@ionic/core 7.5.7-dev.11701203423.1b6a8829 → 7.5.7-dev.11701273756.1eb73d4c

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

@@ -123,6 +123,8 @@ export class Toggle {
     if (this.legacyFormController.hasLegacyControl()) {
       this.ionStyle.emit({
         'interactive-disabled': this.disabled,
+        // TODO(FW-2990): remove this
+        legacy: !!this.legacy,
       });
     }
   }

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

@@ -463,6 +463,16 @@ export const createAnimation = (animationId) => {
         }
       }
     });
+    /**
+     * Clean up any value coercion before
+     * the user callbacks fire otherwise
+     * they may get stale values. For example,
+     * if someone calls progressStart(0) the
+     * animation may still be reversed.
+     */
+    forceDurationValue = undefined;
+    forceDirectionValue = undefined;
+    forceDelayValue = undefined;
     onFinishCallbacks.forEach((onFinishCallback) => {
       return onFinishCallback.c(currentStep, ani);
     });
@@ -667,17 +677,8 @@ export const createAnimation = (animationId) => {
         update(false, false);
       }
     }
-    if (playTo !== undefined) {
-      onFinish(() => {
-        forceDurationValue = undefined;
-        forceDirectionValue = undefined;
-        forceDelayValue = undefined;
-      }, {
-        oneTimeCallback: true,
-      });
-      if (!parentAnimation) {
-        play();
-      }
+    if (playTo !== undefined && !parentAnimation) {
+      play();
     }
     return ani;
   };

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

@@ -5,6 +5,22 @@ import { createAnimation } from "../animation";
 import { processKeyframes } from "../animation-utils";
 import { getTimeGivenProgression } from "../cubic-bezier";
 describe('Animation Class', () => {
+  describe('progressEnd callbacks', () => {
+    test('coerced state should be reset before onFinish runs', (done) => {
+      const el = document.createElement('div');
+      const animation = createAnimation()
+        .addElement(el)
+        .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+        .duration(50);
+      animation
+        .onFinish(() => {
+        expect(animation.getDirection()).toBe('normal');
+        expect(animation.getDuration()).toBe(50);
+        done();
+      })
+        .progressEnd(0, 0.5, 10);
+    });
+  });
   describe('play()', () => {
     it('should resolve when the animation is cancelled', async () => {
       // Tell Jest to expect 1 assertion for async code

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

@@ -1,27 +1,5 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-/**
- * When accessing the document or window, it is important
- * to account for SSR applications where the
- * window is not available. Code that accesses
- * window when it is not available will crash.
- * Even checking if `window === undefined` will cause
- * apps to crash in SSR.
- *
- * Use win below to access an SSR-safe version
- * of the window.
- *
- * Example 1:
- * Before:
- * if (window.innerWidth > 768) { ... }
- *
- * After:
- * import { win } from 'path/to/this/file';
- * if (win?.innerWidth > 768) { ... }
- *
- * Note: Code inside of this if-block will
- * not run in an SSR environment.
- */
 export const win = typeof window !== 'undefined' ? window : undefined;
 export const doc = typeof document !== 'undefined' ? document : undefined;

package/dist/collection/utils/forms/compare-with-utils.js

@@ -0,0 +1,39 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * Uses the compareWith param to compare two values to determine if they are equal.
+ *
+ * @param currentValue The current value of the control.
+ * @param compareValue The value to compare against.
+ * @param compareWith The function or property name to use to compare values.
+ */
+export const compareOptions = (currentValue, compareValue, compareWith) => {
+  if (typeof compareWith === 'function') {
+    return compareWith(currentValue, compareValue);
+  }
+  else if (typeof compareWith === 'string') {
+    return currentValue[compareWith] === compareValue[compareWith];
+  }
+  else {
+    return Array.isArray(compareValue) ? compareValue.includes(currentValue) : currentValue === compareValue;
+  }
+};
+/**
+ * Compares a value against the current value(s) to determine if it is selected.
+ *
+ * @param currentValue The current value of the control.
+ * @param compareValue The value to compare against.
+ * @param compareWith The function or property name to use to compare values.
+ */
+export const isOptionSelected = (currentValue, compareValue, compareWith) => {
+  if (currentValue === undefined) {
+    return false;
+  }
+  if (Array.isArray(currentValue)) {
+    return currentValue.some((val) => compareOptions(val, compareValue, compareWith));
+  }
+  else {
+    return compareOptions(currentValue, compareValue, compareWith);
+  }
+};

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

@@ -3,3 +3,4 @@
  */
 export * from './form-controller';
 export * from './notch-controller';
+export * from './compare-with-utils';

package/dist/collection/utils/input-shims/input-shims.js

@@ -1,6 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { doc } from "../browser/index";
 import { findClosestIonContent } from "../content";
 import { componentOnReady } from "../helpers";
 import { Keyboard } from "../native/keyboard";
@@ -11,7 +12,13 @@ const INPUT_BLURRING = true;
 const SCROLL_ASSIST = true;
 const HIDE_CARET = true;
 export const startInputShims = async (config, platform) => {
-  const doc = document;
+  /**
+   * If doc is undefined then we are in an SSR environment
+   * where input shims do not apply.
+   */
+  if (doc === undefined) {
+    return;
+  }
   const isIOS = platform === 'ios';
   const isAndroid = platform === 'android';
   /**
@@ -90,11 +97,10 @@ export const startInputShims = async (config, platform) => {
   for (const input of inputs) {
     registerInput(input);
   }
-  // TODO(FW-2832): types
-  doc.addEventListener('ionInputDidLoad', ((ev) => {
+  doc.addEventListener('ionInputDidLoad', (ev) => {
     registerInput(ev.detail);
-  }));
-  doc.addEventListener('ionInputDidUnload', ((ev) => {
+  });
+  doc.addEventListener('ionInputDidUnload', (ev) => {
     unregisterInput(ev.detail);
-  }));
+  });
 };

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

@@ -1,8 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { printIonWarning } from "../logging/index";
+import { doc } from "../browser/index";
 import { MENU_BACK_BUTTON_PRIORITY } from "../hardware-back-button";
+import { printIonWarning } from "../logging/index";
 import { componentOnReady } from "../helpers";
 import { menuOverlayAnimation } from "./animations/overlay";
 import { menuPushAnimation } from "./animations/push";
@@ -184,17 +185,14 @@ const createMenuController = () => {
   registerAnimation('reveal', menuRevealAnimation);
   registerAnimation('push', menuPushAnimation);
   registerAnimation('overlay', menuOverlayAnimation);
-  if (typeof document !== 'undefined') {
-    document.addEventListener('ionBackButton', (ev) => {
-      // TODO(FW-2832): type
-      const openMenu = _getOpenSync();
-      if (openMenu) {
-        ev.detail.register(MENU_BACK_BUTTON_PRIORITY, () => {
-          return openMenu.close();
-        });
-      }
-    });
-  }
+  doc === null || doc === void 0 ? void 0 : doc.addEventListener('ionBackButton', (ev) => {
+    const openMenu = _getOpenSync();
+    if (openMenu) {
+      ev.detail.register(MENU_BACK_BUTTON_PRIORITY, () => {
+        return openMenu.close();
+      });
+    }
+  });
   return {
     registerAnimation,
     get,

package/dist/collection/utils/overlays.js

@@ -562,6 +562,7 @@ export const safeCall = (handler, arg) => {
 };
 export const BACKDROP = 'backdrop';
 export const GESTURE = 'gesture';
+export const OVERLAY_GESTURE_PRIORITY = 39;
 /**
  * Creates a delegate controller.
  *

package/dist/collection/utils/slot-mutation-controller.js

@@ -9,13 +9,14 @@ import { raf } from "./helpers";
  * This is not needed for components using native slots in the Shadow DOM.
  * @internal
  * @param el The host element to observe
- * @param slotName mutationCallback will fire when nodes on this slot change
+ * @param slotName mutationCallback will fire when nodes on these slot(s) change
  * @param mutationCallback The callback to fire whenever the slotted content changes
  */
 export const createSlotMutationController = (el, slotName, mutationCallback) => {
   let hostMutationObserver;
   let slottedContentMutationObserver;
   if (win !== undefined && 'MutationObserver' in win) {
+    const slots = Array.isArray(slotName) ? slotName : [slotName];
     hostMutationObserver = new MutationObserver((entries) => {
       for (const entry of entries) {
         for (const node of entry.addedNodes) {
@@ -23,7 +24,7 @@ export const createSlotMutationController = (el, slotName, mutationCallback) =>
            * Check to see if the added node
            *  is our slotted content.
            */
-          if (node.nodeType === Node.ELEMENT_NODE && node.slot === slotName) {
+          if (node.nodeType === Node.ELEMENT_NODE && slots.includes(node.slot)) {
             /**
              * If so, we want to watch the slotted
              * content itself for changes. This lets us

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-11-28T20:32:36",
+  "timestamp": "2023-11-29T16:04:28",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.7.2",
@@ -9657,6 +9657,14 @@
         {
           "name": "slot",
           "text": "label - The label text to associate with the input. Use the `labelPlacement` property to control where the label is placed relative to the input. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)"
+        },
+        {
+          "name": "slot",
+          "text": "start - Content to display at the leading edge of the input. (EXPERIMENTAL)"
+        },
+        {
+          "name": "slot",
+          "text": "end - Content to display at the trailing edge of the input. (EXPERIMENTAL)"
         }
       ],
       "usage": {},
@@ -11151,9 +11159,17 @@
         }
       ],
       "slots": [
+        {
+          "name": "end",
+          "docs": "Content to display at the trailing edge of the input. (EXPERIMENTAL)"
+        },
         {
           "name": "label",
           "docs": "The label text to associate with the input. Use the `labelPlacement` property to control where the label is placed relative to the input. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)"
+        },
+        {
+          "name": "start",
+          "docs": "Content to display at the leading edge of the input. (EXPERIMENTAL)"
         }
       ],
       "parts": [],
@@ -19711,6 +19727,42 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "compareWith",
+          "type": "((currentValue: any, compareValue: any) => boolean) | null | string | undefined",
+          "complexType": {
+            "original": "string | RadioGroupCompareFn | null",
+            "resolved": "((currentValue: any, compareValue: any) => boolean) | null | string | undefined",
+            "references": {
+              "RadioGroupCompareFn": {
+                "location": "import",
+                "path": "./radio-group-interface",
+                "id": "src/components/radio-group/radio-group-interface.ts::RadioGroupCompareFn"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "compare-with",
+          "reflectToAttr": false,
+          "docs": "This property allows developers to specify a custom function or property\nname for comparing objects when determining the selected option in the\nion-radio-group. When not specified, the default behavior will use strict\nequality (===) for comparison.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "((currentValue: any, compareValue: any) => boolean)"
+            },
+            {
+              "type": "null"
+            },
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "name",
           "type": "string",
@@ -23781,6 +23833,14 @@
           "name": "slot",
           "text": "label - The label text to associate with the select. Use the `labelPlacement` property to control where the label is placed relative to the select. Use this if you need to render a label with custom HTML."
         },
+        {
+          "name": "slot",
+          "text": "start - Content to display at the leading edge of the select."
+        },
+        {
+          "name": "slot",
+          "text": "end - Content to display at the trailing edge of the select."
+        },
         {
           "name": "part",
           "text": "placeholder - The text displayed in the select when there is no value."
@@ -23909,7 +23969,7 @@
           "mutable": false,
           "attr": "compare-with",
           "reflectToAttr": false,
-          "docs": "A property name or function used to compare object values",
+          "docs": "This property allows developers to specify a custom function or property\nname for comparing objects when determining the selected option in the\nion-select. When not specified, the default behavior will use strict\nequality (===) for comparison.",
           "docsTags": [],
           "values": [
             {
@@ -24596,9 +24656,17 @@
         }
       ],
       "slots": [
+        {
+          "name": "end",
+          "docs": "Content to display at the trailing edge of the select."
+        },
         {
           "name": "label",
           "docs": "The label text to associate with the select. Use the `labelPlacement` property to control where the label is placed relative to the select. Use this if you need to render a label with custom HTML."
+        },
+        {
+          "name": "start",
+          "docs": "Content to display at the leading edge of the select."
         }
       ],
       "parts": [
@@ -26041,6 +26109,14 @@
         {
           "name": "slot",
           "text": "label - The label text to associate with the textarea. Use the `labelPlacement` property to control where the label is placed relative to the textarea. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)"
+        },
+        {
+          "name": "slot",
+          "text": "start - Content to display at the leading edge of the textarea. (EXPERIMENTAL)"
+        },
+        {
+          "name": "slot",
+          "text": "end - Content to display at the trailing edge of the textarea. (EXPERIMENTAL)"
         }
       ],
       "usage": {},
@@ -27091,9 +27167,17 @@
         }
       ],
       "slots": [
+        {
+          "name": "end",
+          "docs": "Content to display at the trailing edge of the textarea. (EXPERIMENTAL)"
+        },
         {
           "name": "label",
           "docs": "The label text to associate with the textarea. Use the `labelPlacement` property to control where the label is placed relative to the textarea. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)"
+        },
+        {
+          "name": "start",
+          "docs": "Content to display at the leading edge of the textarea. (EXPERIMENTAL)"
         }
       ],
       "parts": [],
@@ -27785,6 +27869,37 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "swipeGesture",
+          "type": "\"vertical\" | undefined",
+          "complexType": {
+            "original": "ToastSwipeGestureDirection",
+            "resolved": "\"vertical\" | undefined",
+            "references": {
+              "ToastSwipeGestureDirection": {
+                "location": "import",
+                "path": "./toast-interface",
+                "id": "src/components/toast/toast-interface.ts::ToastSwipeGestureDirection"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "swipe-gesture",
+          "reflectToAttr": false,
+          "docs": "If set to 'vertical', the Toast can be dismissed with\na swipe gesture. The swipe direction is determined by\nthe value of the `position` property:\n`top`: The Toast can be swiped up to dismiss.\n`bottom`: The Toast can be swiped down to dismiss.\n`middle`: The Toast can be swiped up or down to dismiss.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "vertical",
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "translucent",
           "type": "boolean",
@@ -29093,6 +29208,11 @@
       "docstring": "Values are converted to strings when emitted which is\nwhy we do not have a `number` type here even though the\n`value` prop accepts a `number` type.",
       "path": "src/components/input/input-interface.ts"
     },
+    "src/components/radio-group/radio-group-interface.ts::RadioGroupCompareFn": {
+      "declaration": "(currentValue: any, compareValue: any) => boolean",
+      "docstring": "",
+      "path": "src/components/radio-group/radio-group-interface.ts"
+    },
     "src/components/radio-group/radio-group-interface.ts::RadioGroupChangeEventDetail": {
       "declaration": "export interface RadioGroupChangeEventDetail<T = any> {\n  value: T;\n  event?: Event;\n}",
       "docstring": "",
@@ -29343,6 +29463,11 @@
       "docstring": "",
       "path": "src/components/toast/toast-interface.ts"
     },
+    "src/components/toast/toast-interface.ts::ToastSwipeGestureDirection": {
+      "declaration": "\"vertical\"",
+      "docstring": "",
+      "path": "src/components/toast/toast-interface.ts"
+    },
     "src/components/toast/toast-interface.ts::ToastPresentOptions": {
       "declaration": "export type ToastPresentOptions = ToastPositionAlias & ToastAnimationPosition;",
       "docstring": "",

package/dist/esm/{animation-8aa13916.js → animation-cf3dd234.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as win } from './index-7a14ecec.js';
+import { w as win } from './index-a5d50daf.js';
 import { r as raf } from './helpers-3379ba19.js';
 
 let animationPrefix;
@@ -586,6 +586,16 @@ const createAnimation = (animationId) => {
         }
       }
     });
+    /**
+     * Clean up any value coercion before
+     * the user callbacks fire otherwise
+     * they may get stale values. For example,
+     * if someone calls progressStart(0) the
+     * animation may still be reversed.
+     */
+    forceDurationValue = undefined;
+    forceDirectionValue = undefined;
+    forceDelayValue = undefined;
     onFinishCallbacks.forEach((onFinishCallback) => {
       return onFinishCallback.c(currentStep, ani);
     });
@@ -790,17 +800,8 @@ const createAnimation = (animationId) => {
         update(false, false);
       }
     }
-    if (playTo !== undefined) {
-      onFinish(() => {
-        forceDurationValue = undefined;
-        forceDirectionValue = undefined;
-        forceDelayValue = undefined;
-      }, {
-        oneTimeCallback: true,
-      });
-      if (!parentAnimation) {
-        play();
-      }
+    if (playTo !== undefined && !parentAnimation) {
+      play();
     }
     return ani;
   };

package/dist/esm/{button-active-ce5cba4c.js → button-active-47196c40.js}

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { w as writeTask } from './index-7c9b1bca.js';
-import { h as hapticSelectionEnd, a as hapticSelectionStart, b as hapticSelectionChanged } from './haptic-1243b917.js';
+import { h as hapticSelectionEnd, a as hapticSelectionStart, b as hapticSelectionChanged } from './haptic-1a66d69f.js';
 import { createGesture } from './index-ff313b19.js';
 
 const createButtonActiveGesture = (el, isButton) => {

package/dist/esm/{capacitor-b4979570.js → capacitor-f1f25364.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as win } from './index-7a14ecec.js';
+import { w as win } from './index-a5d50daf.js';
 
 const getCapacitor = () => {
   if (win !== undefined) {

package/dist/esm/compare-with-utils-4928c09d.js

@@ -0,0 +1,41 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * Uses the compareWith param to compare two values to determine if they are equal.
+ *
+ * @param currentValue The current value of the control.
+ * @param compareValue The value to compare against.
+ * @param compareWith The function or property name to use to compare values.
+ */
+const compareOptions = (currentValue, compareValue, compareWith) => {
+  if (typeof compareWith === 'function') {
+    return compareWith(currentValue, compareValue);
+  }
+  else if (typeof compareWith === 'string') {
+    return currentValue[compareWith] === compareValue[compareWith];
+  }
+  else {
+    return Array.isArray(compareValue) ? compareValue.includes(currentValue) : currentValue === compareValue;
+  }
+};
+/**
+ * Compares a value against the current value(s) to determine if it is selected.
+ *
+ * @param currentValue The current value of the control.
+ * @param compareValue The value to compare against.
+ * @param compareWith The function or property name to use to compare values.
+ */
+const isOptionSelected = (currentValue, compareValue, compareWith) => {
+  if (currentValue === undefined) {
+    return false;
+  }
+  if (Array.isArray(currentValue)) {
+    return currentValue.some((val) => compareOptions(val, compareValue, compareWith));
+  }
+  else {
+    return compareOptions(currentValue, compareValue, compareWith);
+  }
+};
+
+export { compareOptions as c, isOptionSelected as i };

package/dist/esm/{haptic-1243b917.js → haptic-1a66d69f.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { g as getCapacitor } from './capacitor-b4979570.js';
+import { g as getCapacitor } from './capacitor-f1f25364.js';
 
 var ImpactStyle;
 (function (ImpactStyle) {

package/dist/esm/{index-0aa6e61f.js → index-23c05a55.js}

@@ -1,11 +1,12 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { p as printIonWarning } from './index-595d62c9.js';
+import { d as doc } from './index-a5d50daf.js';
 import { MENU_BACK_BUTTON_PRIORITY } from './hardware-back-button-39299f84.js';
+import { p as printIonWarning } from './index-595d62c9.js';
 import { c as componentOnReady } from './helpers-3379ba19.js';
 import { b as getIonMode } from './ionic-global-40e42e7f.js';
-import { c as createAnimation } from './animation-8aa13916.js';
+import { c as createAnimation } from './animation-cf3dd234.js';
 
 /**
  * baseAnimation
@@ -272,17 +273,14 @@ const createMenuController = () => {
   registerAnimation('reveal', menuRevealAnimation);
   registerAnimation('push', menuPushAnimation);
   registerAnimation('overlay', menuOverlayAnimation);
-  if (typeof document !== 'undefined') {
-    document.addEventListener('ionBackButton', (ev) => {
-      // TODO(FW-2832): type
-      const openMenu = _getOpenSync();
-      if (openMenu) {
-        ev.detail.register(MENU_BACK_BUTTON_PRIORITY, () => {
-          return openMenu.close();
-        });
-      }
-    });
-  }
+  doc === null || doc === void 0 ? void 0 : doc.addEventListener('ionBackButton', (ev) => {
+    const openMenu = _getOpenSync();
+    if (openMenu) {
+      ev.detail.register(MENU_BACK_BUTTON_PRIORITY, () => {
+        return openMenu.close();
+      });
+    }
+  });
   return {
     registerAnimation,
     get,

package/dist/esm/{index-6a0ccabb.js → index-702b3cd3.js}

@@ -10,8 +10,8 @@ const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
 const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
 const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
 
-const iosTransitionAnimation = () => import('./ios.transition-1651c430.js');
-const mdTransitionAnimation = () => import('./md.transition-66f18369.js');
+const iosTransitionAnimation = () => import('./ios.transition-c3e77862.js');
+const mdTransitionAnimation = () => import('./md.transition-1173eca9.js');
 // TODO(FW-2832): types
 const transition = (opts) => {
   return new Promise((resolve, reject) => {

package/dist/esm/index-a5d50daf.js

@@ -0,0 +1,7 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const win = typeof window !== 'undefined' ? window : undefined;
+const doc = typeof document !== 'undefined' ? document : undefined;
+
+export { doc as d, win as w };

package/dist/esm/{index-d1a56aed.js → index-c132c5f1.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-/* Ionicons v7.1.3-dev.11699459714.11b7e8aa, ES Modules */
+/* Ionicons v7.2.1, ES Modules */
 const arrowBackSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path stroke-linecap='square' stroke-miterlimit='10' stroke-width='48' d='M244 400L100 256l144-144M120 256h292' class='ionicon-fill-none'/></svg>";
 const arrowDown = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 268l144 144 144-144M256 392V100' class='ionicon-fill-none'/></svg>";
 const caretBackSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path d='M368 64L144 256l224 192V64z'/></svg>";