@ionic/core 8.8.9-dev.11780414486.1df2bd72 → 8.8.9-dev.11780493937.17fe092d

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

@@ -1,14 +1,17 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, h, d as Host, g as getElement, c as createEvent } from './index-tcQvqkiX.js';
-import { n as reorderThreeOutline, o as reorderTwoSharp } from './index-AlrZKoWR.js';
-import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
-import { f as findClosestIonContent, g as getScrollElement } from './index-MEDq2S8l.js';
-import { r as raf } from './helpers-HEqiOzXb.js';
-import { b as hapticSelectionStart, a as hapticSelectionChanged, h as hapticSelectionEnd } from './haptic-DzAMWJuk.js';
-import './capacitor-CFERIeaU.js';
-import './index-ZjP4CjeZ.js';
+import { r as registerInstance, e as config, h, d as Host, g as getElement, c as createEvent } from './index-Omi_TcwW.js';
+import { l as listSvg } from './list-Dhi5xtNS.js';
+import { j as reorderTwoSharp, k as reorderThreeOutline } from './index-D2tu5BUg.js';
+import { c as getIonTheme } from './ionic-global--9mOmThr.js';
+import { f as findClosestIonContent, g as getScrollElement } from './index-BmkLokUL.js';
+import { r as raf } from './helpers-Do7zwvM1.js';
+import { b as hapticSelectionStart, a as hapticSelectionChanged, h as hapticSelectionEnd } from './haptic-CbnKC3go.js';
+import './focus-visible-vXpMhGrs.js';
+import './capacitor-13SFuT1K.js';
+
+const ionicReorderMdCss = () => `:host([slot]){display:none;line-height:0;z-index:100}.reorder-icon{display:block}::slotted(ion-icon){font-size:dynamic-font(16px)}.reorder-icon{font-size:1.9375rem;opacity:0.3}`;
 
 const reorderIosCss = () => `:host([slot]){display:none;line-height:0;z-index:100}.reorder-icon{display:block}::slotted(ion-icon){font-size:dynamic-font(16px)}.reorder-icon{font-size:2.125rem;opacity:0.4}`;
 
@@ -27,14 +30,35 @@ const Reorder = class {
             ev.stopImmediatePropagation();
         }
     }
+    /**
+     * Get the icon to use for the handle icon.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get reorderHandleIcon() {
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: reorderThreeOutline,
+            ionic: listSvg,
+            md: reorderTwoSharp,
+        };
+        // Get the default icon based on the theme, falling back to 'md' icon if necessary
+        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+        // Return the configured reorder handle icon or the default icon
+        return config.get('reorderHandleIcon', defaultIcon);
+    }
     render() {
-        const mode = getIonMode(this);
-        const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (h(Host, { key: '4d35db30b5b3df2020d2212abb3cfac94f9bc2b8', class: mode }, h("slot", { key: '68a565ae4a47f6a9f5d6ba845b596fdfa629ece8' }, h("ion-icon", { key: '168fb0f8eb9c02329274488900fcdb05d44cb895', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        const { reorderHandleIcon } = this;
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '2a30643d0c5dbebab97a7aca68c165ee79ceed33', class: {
+                [theme]: true,
+            } }, h("slot", { key: '9ac45a0cc21aea6ed0ec03aa12334886219b1051' }, h("ion-icon", { key: '6d6789a718db4f252c6b3b4484148be2a65c80b8', icon: reorderHandleIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     get el() { return getElement(this); }
 };
 Reorder.style = {
+    ionic: ionicReorderMdCss(),
     ios: reorderIosCss(),
     md: reorderMdCss()
 };
@@ -281,7 +305,7 @@ const ReorderGroup = class {
         }
         let amount = 0;
         if (posY < this.scrollElTop) {
-            amount = -SCROLL_JUMP;
+            amount = -10;
         }
         else if (posY > this.scrollElBottom) {
             amount = SCROLL_JUMP;
@@ -292,9 +316,9 @@ const ReorderGroup = class {
         return this.scrollEl.scrollTop - this.scrollElInitial;
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '3afdc6a6c81bba2f88ea523d4b73c6fccff1b9ec', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'f618089290a47bae34bcaaed968c3f8f4daa827f', class: {
+                [theme]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
             } }));

package/dist/esm/ion-ripple-effect.entry.js

@@ -1,10 +1,14 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, a as readTask, w as writeTask, h, d as Host, g as getElement } from './index-tcQvqkiX.js';
-import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
+import { r as registerInstance, a as readTask, w as writeTask, h, d as Host, g as getElement } from './index-Omi_TcwW.js';
+import { c as getIonTheme } from './ionic-global--9mOmThr.js';
 
-const rippleEffectCss = () => `:host{left:0;right:0;top:0;bottom:0;position:absolute;contain:strict;pointer-events:none}:host(.unbounded){contain:layout size style}.ripple-effect{border-radius:50%;position:absolute;background-color:currentColor;color:inherit;contain:strict;opacity:0;-webkit-animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;will-change:transform, opacity;pointer-events:none}.fade-out{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1));-webkit-animation:150ms fadeOutAnimation forwards;animation:150ms fadeOutAnimation forwards}@-webkit-keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@-webkit-keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@-webkit-keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}@keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}`;
+const rippleEffectIonicCss = () => `:host{right:0;left:0;top:0;bottom:0;position:absolute;contain:strict;pointer-events:none}:host(.unbounded){contain:layout size style}.ripple-effect{border-radius:50%;position:absolute;background-color:currentColor;color:inherit;contain:strict;opacity:0;-webkit-animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;will-change:transform, opacity;pointer-events:none}.fade-out{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1));-webkit-animation:150ms fadeOutAnimation forwards;animation:150ms fadeOutAnimation forwards}@-webkit-keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@-webkit-keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@-webkit-keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}@keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}.ripple-effect{-webkit-animation-name:rippleAnimation, fadeInAnimation;animation-name:rippleAnimation, fadeInAnimation}.fade-out{-webkit-animation-name:fadeOutAnimation;animation-name:fadeOutAnimation}@keyframes rippleAnimation{from{-webkit-animation-timing-function:var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));animation-timing-function:var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--ripple-opacity, 0.16)}}@keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--ripple-opacity, 0.16)}to{opacity:0}}`;
+
+const iosRippleEffectCommonCss = () => `:host{right:0;left:0;top:0;bottom:0;position:absolute;contain:strict;pointer-events:none}:host(.unbounded){contain:layout size style}.ripple-effect{border-radius:50%;position:absolute;background-color:currentColor;color:inherit;contain:strict;opacity:0;-webkit-animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;will-change:transform, opacity;pointer-events:none}.fade-out{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1));-webkit-animation:150ms fadeOutAnimation forwards;animation:150ms fadeOutAnimation forwards}@-webkit-keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@-webkit-keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@-webkit-keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}@keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}`;
+
+const mdRippleEffectCommonCss = () => `:host{right:0;left:0;top:0;bottom:0;position:absolute;contain:strict;pointer-events:none}:host(.unbounded){contain:layout size style}.ripple-effect{border-radius:50%;position:absolute;background-color:currentColor;color:inherit;contain:strict;opacity:0;-webkit-animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;will-change:transform, opacity;pointer-events:none}.fade-out{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1));-webkit-animation:150ms fadeOutAnimation forwards;animation:150ms fadeOutAnimation forwards}@-webkit-keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@-webkit-keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@-webkit-keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}@keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}`;
 
 const RippleEffect = class {
     constructor(hostRef) {
@@ -71,9 +75,9 @@ const RippleEffect = class {
         return this.type === 'unbounded';
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '5e88b5225414e29883256c86f111ded5bdf2ef91', role: "presentation", class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'f4db39623cfd1bdc773e222b2dd9ed52a26cc685', role: "presentation", class: {
+                [theme]: true,
                 unbounded: this.unbounded,
             } }));
     }
@@ -87,6 +91,10 @@ const removeRipple = (ripple) => {
 };
 const PADDING = 10;
 const INITIAL_ORIGIN_SCALE = 0.5;
-RippleEffect.style = rippleEffectCss();
+RippleEffect.style = {
+    ionic: rippleEffectIonicCss(),
+    ios: iosRippleEffectCommonCss(),
+    md: mdRippleEffectCommonCss()
+};
 
 export { RippleEffect as ion_ripple_effect };

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

@@ -1,10 +1,11 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, j as printIonError, f as printIonWarning, g as getElement, h, d as Host } from './index-tcQvqkiX.js';
-import { c as componentOnReady, p as debounce } from './helpers-HEqiOzXb.js';
-import { o as openURL, c as createColorClasses } from './theme-DiVJyqlX.js';
-import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
+import { r as registerInstance, c as createEvent, j as printIonError, f as printIonWarning, g as getElement, h, d as Host } from './index-Omi_TcwW.js';
+import { c as componentOnReady, n as debounce } from './helpers-Do7zwvM1.js';
+import { o as openURL, c as createColorClasses } from './theme-DaJxRxSQ.js';
+import { c as getIonTheme } from './ionic-global--9mOmThr.js';
+import './focus-visible-vXpMhGrs.js';
 
 const Route = class {
     constructor(hostRef) {
@@ -884,7 +885,7 @@ const Router = class {
     get el() { return getElement(this); }
 };
 
-const routerLinkCss = () => `:host{--background:transparent;--color:var(--ion-color-primary, #0054e9);background:var(--background);color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}a{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit}`;
+const routerLinkCss = () => `:host{--background:transparent;--color:var(--ion-color-primary, #0054e9);background:var(--background);color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}a{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit}`;
 
 const RouterLink = class {
     constructor(hostRef) {
@@ -899,16 +900,16 @@ const RouterLink = class {
         };
     }
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const attrs = {
             href: this.href,
             rel: this.rel,
             target: this.target,
         };
-        return (h(Host, { key: '6d5fdfa0dcf1eb216173bcc53f1f4d625f3ec551', onClick: this.onClick, class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: '989574921f3bf06e4e5ad4e98ea3cce2e5c7165e', onClick: this.onClick, class: createColorClasses(this.color, {
+                [theme]: true,
                 'ion-activatable': true,
-            }) }, h("a", Object.assign({ key: '85796b7b48581fe9830ba1102dad7d1069de4e17' }, attrs), h("slot", { key: '0f93b0da3ec4ae8f50f624f9e7bed87d13d712d0' }))));
+            }) }, h("a", Object.assign({ key: 'ee72dba91cc13ca4f251ba6bb5a8b7bf54b6f88d' }, attrs), h("slot", { key: '8e8b5afd795bb213b8765f731463e0588799b001' }))));
     }
 };
 RouterLink.style = routerLinkCss();

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

@@ -1,16 +1,24 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, e as config, i as forceUpdate, h, d as Host, g as getElement } from './index-tcQvqkiX.js';
-import { d as debounceEvent, b as inheritAttributes, c as componentOnReady, r as raf } from './helpers-HEqiOzXb.js';
+import { r as registerInstance, c as createEvent, i as forceUpdate, e as config, h, d as Host, g as getElement } from './index-Omi_TcwW.js';
+import { x as xSvg } from './x-BDqjX7Z_.js';
+import { d as debounceEvent, b as inheritAttributes, c as componentOnReady, r as raf } from './helpers-Do7zwvM1.js';
 import { i as isRTL } from './dir-C53feagD.js';
-import { c as createColorClasses } from './theme-DiVJyqlX.js';
-import { a as arrowBackSharp, s as searchOutline, i as searchSharp, g as closeCircle, h as closeSharp } from './index-AlrZKoWR.js';
-import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
+import { c as createColorClasses, h as hostContext } from './theme-DaJxRxSQ.js';
+import { b as closeSharp, d as closeCircle, s as searchSharp, e as searchOutline, a as arrowBackSharp } from './index-D2tu5BUg.js';
+import { c as getIonTheme } from './ionic-global--9mOmThr.js';
+import './focus-visible-vXpMhGrs.js';
 
-const searchbarIosCss = () => `.sc-ion-searchbar-ios-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);-webkit-box-sizing:border-box;box-sizing:border-box}.ion-color.sc-ion-searchbar-ios-h{color:var(--ion-color-contrast)}.ion-color.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{background:var(--ion-color-base)}.ion-color.sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios,.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.ion-color.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{color:inherit}.searchbar-search-icon.sc-ion-searchbar-ios{color:var(--icon-color);pointer-events:none}.searchbar-input-container.sc-ion-searchbar-ios{display:block;position:relative;-ms-flex-negative:1;flex-shrink:1;width:100%}.searchbar-input.sc-ion-searchbar-ios{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--border-radius);display:block;width:100%;min-height:inherit;border:0;outline:none;background:var(--background);font-family:inherit;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-input.sc-ion-searchbar-ios::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios::-webkit-search-cancel-button,.searchbar-input.sc-ion-searchbar-ios::-ms-clear{display:none}.searchbar-cancel-button.sc-ion-searchbar-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;height:100%;border:0;outline:none;color:var(--cancel-button-color);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-cancel-button.sc-ion-searchbar-ios>div.sc-ion-searchbar-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.searchbar-clear-button.sc-ion-searchbar-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:none;min-height:0;outline:none;color:var(--clear-button-color);-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-clear-button.sc-ion-searchbar-ios:focus{opacity:0.5}.searchbar-has-value.searchbar-should-show-clear.sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios{display:block}.searchbar-disabled.sc-ion-searchbar-ios-h{cursor:default;opacity:0.4;pointer-events:none}.sc-ion-searchbar-ios-h{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.07);--border-radius:10px;--box-shadow:none;--cancel-button-color:var(--ion-color-primary, #0054e9);--clear-button-color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));--color:var(--ion-text-color, #000);--icon-color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:12px;padding-bottom:12px;min-height:60px;contain:content}.searchbar-input-container.sc-ion-searchbar-ios{min-height:36px}.searchbar-search-icon.sc-ion-searchbar-ios{-webkit-margin-start:calc(50% - 60px);margin-inline-start:calc(50% - 60px);top:0;position:absolute;width:1.375rem;height:100%;contain:strict}.searchbar-search-icon.sc-ion-searchbar-ios{inset-inline-start:5px}.searchbar-input.sc-ion-searchbar-ios{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:6px;padding-bottom:6px;height:100%;font-size:1.0625rem;font-weight:400;contain:strict}.searchbar-has-value.searchbar-should-show-clear.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{-webkit-padding-start:1.75rem;padding-inline-start:1.75rem;-webkit-padding-end:1.75rem;padding-inline-end:1.75rem}.searchbar-clear-button.sc-ion-searchbar-ios{top:0;background-position:center;position:absolute;width:1.875rem;height:100%;border:0;background-color:transparent}.searchbar-clear-button.sc-ion-searchbar-ios{inset-inline-end:0}.searchbar-clear-icon.sc-ion-searchbar-ios{width:1.125rem;height:100%}.searchbar-cancel-button.sc-ion-searchbar-ios{-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0;-ms-flex-negative:0;flex-shrink:0;background-color:transparent;font-size:17px}.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{-webkit-margin-start:0;margin-inline-start:0}.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{-webkit-padding-start:1.875rem;padding-inline-start:1.875rem}.searchbar-has-focus.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.searchbar-should-show-cancel.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{display:block}.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{-webkit-transition:all 300ms ease;transition:all 300ms ease}.searchbar-animated.searchbar-has-focus.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.searchbar-animated.searchbar-should-show-cancel.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{opacity:1;pointer-events:auto}.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{-webkit-margin-end:-100%;margin-inline-end:-100%;-webkit-transform:translate3d(0,  0,  0);transform:translate3d(0,  0,  0);-webkit-transition:all 300ms ease;transition:all 300ms ease;opacity:0;pointer-events:none}.searchbar-no-animate.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,.searchbar-no-animate.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios,.searchbar-no-animate.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{-webkit-transition-duration:0ms;transition-duration:0ms}.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{color:var(--ion-color-base)}@media (any-hover: hover){.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios:hover{color:var(--ion-color-tint)}}ion-toolbar.sc-ion-searchbar-ios-h,ion-toolbar .sc-ion-searchbar-ios-h{padding-top:1px;padding-bottom:15px;min-height:52px}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color),ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color){color:inherit}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-cancel-button.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-cancel-button.sc-ion-searchbar-ios{color:currentColor}ion-toolbar.ion-color.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{color:currentColor;opacity:0.5}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-input.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-input.sc-ion-searchbar-ios{background:rgba(var(--ion-color-contrast-rgb), 0.07);color:currentColor}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-clear-button.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-clear-button.sc-ion-searchbar-ios{color:currentColor;opacity:0.5}`;
+const arrowLeftSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yMjQsMTI4YTgsOCwwLDAsMS04LDhINTkuMzFsNTguMzUsNTguMzRhOCw4LDAsMCwxLTExLjMyLDExLjMybC03Mi03MmE4LDgsMCwwLDEsMC0xMS4zMmw3Mi03MmE4LDgsMCwwLDEsMTEuMzIsMTEuMzJMNTkuMzEsMTIwSDIxNkE4LDgsMCwwLDEsMjI0LDEyOFoiLz48L3N2Zz4=';
 
-const searchbarMdCss = () => `.sc-ion-searchbar-md-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);-webkit-box-sizing:border-box;box-sizing:border-box}.ion-color.sc-ion-searchbar-md-h{color:var(--ion-color-contrast)}.ion-color.sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md{background:var(--ion-color-base)}.ion-color.sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md,.ion-color.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md,.ion-color.sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md{color:inherit}.searchbar-search-icon.sc-ion-searchbar-md{color:var(--icon-color);pointer-events:none}.searchbar-input-container.sc-ion-searchbar-md{display:block;position:relative;-ms-flex-negative:1;flex-shrink:1;width:100%}.searchbar-input.sc-ion-searchbar-md{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--border-radius);display:block;width:100%;min-height:inherit;border:0;outline:none;background:var(--background);font-family:inherit;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-input.sc-ion-searchbar-md::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md::-webkit-search-cancel-button,.searchbar-input.sc-ion-searchbar-md::-ms-clear{display:none}.searchbar-cancel-button.sc-ion-searchbar-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;height:100%;border:0;outline:none;color:var(--cancel-button-color);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-cancel-button.sc-ion-searchbar-md>div.sc-ion-searchbar-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.searchbar-clear-button.sc-ion-searchbar-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:none;min-height:0;outline:none;color:var(--clear-button-color);-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-clear-button.sc-ion-searchbar-md:focus{opacity:0.5}.searchbar-has-value.searchbar-should-show-clear.sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md{display:block}.searchbar-disabled.sc-ion-searchbar-md-h{cursor:default;opacity:0.4;pointer-events:none}.sc-ion-searchbar-md-h{--background:var(--ion-background-color, #fff);--border-radius:2px;--box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);--cancel-button-color:var(--ion-color-step-900, var(--ion-text-color-step-100, #1a1a1a));--clear-button-color:initial;--color:var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));--icon-color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;background:inherit}.searchbar-search-icon.sc-ion-searchbar-md{top:11px;width:1.3125rem;height:1.3125rem}.searchbar-search-icon.sc-ion-searchbar-md{inset-inline-start:16px}.searchbar-cancel-button.sc-ion-searchbar-md{top:0;background-color:transparent;font-size:1.5em}.searchbar-cancel-button.sc-ion-searchbar-md{inset-inline-start:9px}.searchbar-search-icon.sc-ion-searchbar-md,.searchbar-cancel-button.sc-ion-searchbar-md{position:absolute}.searchbar-search-icon.ion-activated.sc-ion-searchbar-md,.searchbar-cancel-button.ion-activated.sc-ion-searchbar-md{background-color:transparent}.searchbar-input.sc-ion-searchbar-md{-webkit-padding-start:3.4375rem;padding-inline-start:3.4375rem;-webkit-padding-end:3.4375rem;padding-inline-end:3.4375rem;padding-top:0.375rem;padding-bottom:0.375rem;background-position:left 8px center;height:auto;font-size:1rem;font-weight:400;line-height:30px}[dir=rtl].sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md{background-position:right 8px center}[dir=rtl].sc-ion-searchbar-md .searchbar-input.sc-ion-searchbar-md{background-position:right 8px center}@supports selector(:dir(rtl)){.searchbar-input.sc-ion-searchbar-md:dir(rtl){background-position:right 8px center}}.searchbar-clear-button.sc-ion-searchbar-md{top:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;position:absolute;height:100%;border:0;background-color:transparent}.searchbar-clear-button.sc-ion-searchbar-md{inset-inline-end:13px}.searchbar-clear-button.ion-activated.sc-ion-searchbar-md{background-color:transparent}.searchbar-clear-icon.sc-ion-searchbar-md{width:1.375rem;height:100%}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md{display:block}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md,.searchbar-should-show-cancel.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md{display:block}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md+.searchbar-search-icon.sc-ion-searchbar-md,.searchbar-should-show-cancel.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md+.searchbar-search-icon.sc-ion-searchbar-md{display:none}ion-toolbar.sc-ion-searchbar-md-h,ion-toolbar .sc-ion-searchbar-md-h{-webkit-padding-start:7px;padding-inline-start:7px;-webkit-padding-end:7px;padding-inline-end:7px;padding-top:3px;padding-bottom:3px}`;
+const magnifyingGlassSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yMjkuNjYsMjE4LjM0bC01MC4wNy01MC4wNmE4OC4xMSw4OC4xMSwwLDEsMC0xMS4zMSwxMS4zMWw1MC4wNiw1MC4wN2E4LDgsMCwwLDAsMTEuMzItMTEuMzJaTTQwLDExMmE3Miw3MiwwLDEsMSw3Miw3MkE3Mi4wOCw3Mi4wOCwwLDAsMSw0MCwxMTJaIi8+PC9zdmc+';
+
+const searchbarIonicCss = () => `.sc-ion-searchbar-ionic-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:var(--ion-placeholder-opacity, 1);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box}.searchbar-search-icon.sc-ion-searchbar-ionic{color:var(--icon-color);pointer-events:none}.searchbar-input-container.sc-ion-searchbar-ionic{display:block;position:relative;-ms-flex-negative:1;flex-shrink:1;width:100%}.searchbar-input.sc-ion-searchbar-ionic{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;border-radius:var(--border-radius);display:block;width:100%;min-height:inherit;border:0;outline:none;background:var(--background);font-family:inherit;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-input.sc-ion-searchbar-ionic::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ionic::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ionic:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ionic::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ionic::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ionic::-webkit-search-cancel-button,.searchbar-input.sc-ion-searchbar-ionic::-ms-clear{display:none}.searchbar-cancel-button.sc-ion-searchbar-ionic{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;height:100%;border:0;outline:none;color:var(--cancel-button-color);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-cancel-button.sc-ion-searchbar-ionic>div.sc-ion-searchbar-ionic{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.searchbar-clear-button.sc-ion-searchbar-ionic{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:none;min-height:0;outline:none;color:var(--clear-button-color);-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-clear-button.sc-ion-searchbar-ionic:focus{opacity:0.5}.searchbar-has-value.searchbar-should-show-clear.sc-ion-searchbar-ionic-h .searchbar-clear-button.sc-ion-searchbar-ionic{display:block}.sc-ion-searchbar-ionic-h{--background:var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-200, #eae9e9));--border-radius:var(--token-border-radius-400, var(--token-scale-400, 16px));--box-shadow:none;--cancel-button-color:var(--token-primitives-neutral-800, #626262);--clear-button-color:var(--token-primitives-neutral-1000, #3b3b3b);--color:var(--token-text-default, var(--token-primitives-neutral-1200, #242424));--icon-color:var(--token-icon-subtlest, var(--token-primitives-neutral-800, #626262));--placeholder-color:var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));--focus-ring-color:var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));--focus-ring-width:var(--token-border-size-050, var(--token-scale-050, 2px));font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-regular, 400);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-600, var(--token-scale-600, 24px));text-decoration:none;text-transform:none;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}.searchbar-search-icon.sc-ion-searchbar-ionic{width:var(--token-scale-400, 16px);height:var(--token-scale-400, 16px)}.searchbar-input.sc-ion-searchbar-ionic{padding-top:var(--token-space-300, var(--token-scale-300, 12px));padding-bottom:var(--token-space-300, var(--token-scale-300, 12px));text-overflow:ellipsis;contain:strict}.searchbar-clear-button.sc-ion-searchbar-ionic{width:var(--token-scale-400, 16px);height:var(--token-scale-400, 16px);background-color:transparent;font-size:var(--token-scale-400, 16px);contain:strict}.searchbar-cancel-button.sc-ion-searchbar-ionic{width:var(--token-scale-400, 16px);height:var(--token-scale-400, 16px);background-color:transparent;font-size:var(--token-font-size-400, 1rem)}.searchbar-search-icon.sc-ion-searchbar-ionic,.searchbar-clear-button.sc-ion-searchbar-ionic,.searchbar-cancel-button.sc-ion-searchbar-ionic{top:50%;position:absolute;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.searchbar-clear-button.sc-ion-searchbar-ionic:focus-visible,.searchbar-cancel-button.sc-ion-searchbar-ionic:focus-visible ion-icon.sc-ion-searchbar-ionic{border-radius:var(--token-border-radius-100, var(--token-scale-100, 4px));outline:var(--token-border-size-050, var(--token-scale-050, 2px)) var(--token-border-style-solid, solid) var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));opacity:1}.searchbar-has-value.sc-ion-searchbar-ionic-h{--icon-color:var(--token-icon-default, var(--token-primitives-neutral-1200, #242424))}.in-toolbar.searchbar-should-show-cancel.sc-ion-searchbar-ionic-h .searchbar-cancel-button.sc-ion-searchbar-ionic{inset-inline-start:var(--token-space-200, var(--token-scale-200, 8px))}.sc-ion-searchbar-ionic-h:hover{--background:var(--token-primitives-neutral-200, #eae9e9)}.searchbar-has-focus.sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic{outline:var(--focus-ring-width) var(--token-border-style-solid, solid) var(--focus-ring-color)}.searchbar-has-focus.sc-ion-searchbar-ionic-h .searchbar-search-icon.sc-ion-searchbar-ionic,.searchbar-has-focus.sc-ion-searchbar-ionic-h .searchbar-cancel-button.sc-ion-searchbar-ionic,.searchbar-should-show-cancel.sc-ion-searchbar-ionic-h .searchbar-cancel-button.sc-ion-searchbar-ionic{display:block}.searchbar-has-focus.sc-ion-searchbar-ionic-h .searchbar-cancel-button.sc-ion-searchbar-ionic+.searchbar-search-icon.sc-ion-searchbar-ionic,.searchbar-should-show-cancel.sc-ion-searchbar-ionic-h .searchbar-cancel-button.sc-ion-searchbar-ionic+.searchbar-search-icon.sc-ion-searchbar-ionic{display:none}.searchbar-disabled.sc-ion-searchbar-ionic-h{--color:var(--token-primitives-neutral-500, #a2a2a2);--icon-color:var(--token-icon-disabled, var(--token-primitives-neutral-500, #a2a2a2));--placeholder-color:var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2));cursor:default;pointer-events:none}.searchbar-shape-soft.sc-ion-searchbar-ionic-h{--border-radius:var(--token-border-radius-200, var(--token-scale-200, 8px))}.searchbar-shape-round.sc-ion-searchbar-ionic-h{--border-radius:var(--token-border-radius-400, var(--token-scale-400, 16px))}.searchbar-shape-rectangular.sc-ion-searchbar-ionic-h{--border-radius:var(--token-border-radius-0, var(--token-scale-0, 0px))}.searchbar-size-small.sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic{-webkit-padding-start:var(--token-space-300, var(--token-scale-300, 12px));padding-inline-start:var(--token-space-300, var(--token-scale-300, 12px));-webkit-padding-end:var(--token-space-300, var(--token-scale-300, 12px));padding-inline-end:var(--token-space-300, var(--token-scale-300, 12px));height:var(--token-scale-1000, 40px)}.searchbar-size-small.searchbar-should-show-search-icon.sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic,.searchbar-size-small.searchbar-should-show-cancel.sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic{-webkit-padding-start:calc(var(--token-space-300, var(--token-scale-300, 12px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));padding-inline-start:calc(var(--token-space-300, var(--token-scale-300, 12px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));-webkit-padding-end:var(--token-space-300, var(--token-scale-300, 12px));padding-inline-end:var(--token-space-300, var(--token-scale-300, 12px))}.searchbar-size-small.searchbar-should-show-search-icon.searchbar-should-show-clear.sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic,.searchbar-size-small.searchbar-should-show-cancel.searchbar-should-show-clear.sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic{-webkit-padding-start:calc(var(--token-space-300, var(--token-scale-300, 12px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));padding-inline-start:calc(var(--token-space-300, var(--token-scale-300, 12px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));-webkit-padding-end:calc(var(--token-space-300, var(--token-scale-300, 12px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));padding-inline-end:calc(var(--token-space-300, var(--token-scale-300, 12px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)))}.searchbar-size-small.searchbar-should-show-clear.sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic{-webkit-padding-start:var(--token-space-300, var(--token-scale-300, 12px));padding-inline-start:var(--token-space-300, var(--token-scale-300, 12px));-webkit-padding-end:calc(var(--token-space-300, var(--token-scale-300, 12px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));padding-inline-end:calc(var(--token-space-300, var(--token-scale-300, 12px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)))}.searchbar-size-small.sc-ion-searchbar-ionic-h .searchbar-search-icon.sc-ion-searchbar-ionic,.searchbar-size-small.sc-ion-searchbar-ionic-h .searchbar-cancel-button.sc-ion-searchbar-ionic{inset-inline-start:var(--token-space-300, var(--token-scale-300, 12px))}.searchbar-size-small.sc-ion-searchbar-ionic-h .searchbar-clear-button.sc-ion-searchbar-ionic{inset-inline-end:var(--token-space-300, var(--token-scale-300, 12px))}.searchbar-size-medium.sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic{-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px));height:var(--token-scale-1200, 48px)}.searchbar-size-medium.searchbar-should-show-search-icon.sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic,.searchbar-size-medium.searchbar-should-show-cancel.sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic{-webkit-padding-start:calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));padding-inline-start:calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px))}.searchbar-size-medium.searchbar-should-show-search-icon.searchbar-should-show-clear.sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic,.searchbar-size-medium.searchbar-should-show-cancel.searchbar-should-show-clear.sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic{-webkit-padding-start:calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));padding-inline-start:calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));-webkit-padding-end:calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));padding-inline-end:calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)))}.searchbar-size-medium.searchbar-should-show-clear.sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic{-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));padding-inline-end:calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)))}.searchbar-size-medium.sc-ion-searchbar-ionic-h .searchbar-search-icon.sc-ion-searchbar-ionic,.searchbar-size-medium.sc-ion-searchbar-ionic-h .searchbar-cancel-button.sc-ion-searchbar-ionic{inset-inline-start:var(--token-space-400, var(--token-scale-400, 16px))}.searchbar-size-medium.sc-ion-searchbar-ionic-h .searchbar-clear-button.sc-ion-searchbar-ionic{inset-inline-end:var(--token-space-400, var(--token-scale-400, 16px))}.in-toolbar.searchbar-size-small.searchbar-should-show-cancel.sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic,.in-toolbar.searchbar-size-medium.searchbar-should-show-cancel.sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic{-webkit-padding-start:var(--token-space-800, var(--token-scale-800, 32px));padding-inline-start:var(--token-space-800, var(--token-scale-800, 32px))}.searchbar-size-large.sc-ion-searchbar-ionic-h .searchbar-search-icon.sc-ion-searchbar-ionic,.searchbar-size-large.sc-ion-searchbar-ionic-h .searchbar-cancel-button.sc-ion-searchbar-ionic{width:var(--token-scale-500, 20px);height:var(--token-scale-500, 20px)}.searchbar-size-large.sc-ion-searchbar-ionic-h .searchbar-cancel-button.sc-ion-searchbar-ionic{font-size:var(--token-font-size-500, 1.25rem)}.searchbar-size-large.sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic{padding-top:var(--token-space-400, var(--token-scale-400, 16px));padding-bottom:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-start:var(--token-space-500, var(--token-scale-500, 20px));padding-inline-start:var(--token-space-500, var(--token-scale-500, 20px));-webkit-padding-end:var(--token-space-500, var(--token-scale-500, 20px));padding-inline-end:var(--token-space-500, var(--token-scale-500, 20px));height:var(--token-scale-1400, 56px)}.searchbar-size-large.searchbar-should-show-search-icon.sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic,.searchbar-size-large.searchbar-should-show-cancel.sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic{-webkit-padding-start:calc(var(--token-space-500, var(--token-scale-500, 20px)) + var(--token-scale-500, 20px) + var(--token-space-200, var(--token-scale-200, 8px)));padding-inline-start:calc(var(--token-space-500, var(--token-scale-500, 20px)) + var(--token-scale-500, 20px) + var(--token-space-200, var(--token-scale-200, 8px)));-webkit-padding-end:var(--token-space-500, var(--token-scale-500, 20px));padding-inline-end:var(--token-space-500, var(--token-scale-500, 20px))}.searchbar-size-large.searchbar-should-show-search-icon.searchbar-should-show-clear.sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic,.searchbar-size-large.searchbar-should-show-cancel.searchbar-should-show-clear.sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic{-webkit-padding-start:calc(var(--token-space-500, var(--token-scale-500, 20px)) + var(--token-scale-500, 20px) + var(--token-space-200, var(--token-scale-200, 8px)));padding-inline-start:calc(var(--token-space-500, var(--token-scale-500, 20px)) + var(--token-scale-500, 20px) + var(--token-space-200, var(--token-scale-200, 8px)));-webkit-padding-end:calc(var(--token-space-500, var(--token-scale-500, 20px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));padding-inline-end:calc(var(--token-space-500, var(--token-scale-500, 20px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)))}.searchbar-size-large.searchbar-should-show-clear.sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic{-webkit-padding-start:var(--token-space-500, var(--token-scale-500, 20px));padding-inline-start:var(--token-space-500, var(--token-scale-500, 20px));-webkit-padding-end:calc(var(--token-space-500, var(--token-scale-500, 20px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));padding-inline-end:calc(var(--token-space-500, var(--token-scale-500, 20px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)))}.in-toolbar.searchbar-size-large.searchbar-should-show-cancel.sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic{-webkit-padding-start:var(--token-space-900, var(--token-scale-900, 36px));padding-inline-start:var(--token-space-900, var(--token-scale-900, 36px))}.searchbar-size-large.sc-ion-searchbar-ionic-h .searchbar-search-icon.sc-ion-searchbar-ionic,.searchbar-size-large.sc-ion-searchbar-ionic-h .searchbar-cancel-button.sc-ion-searchbar-ionic{inset-inline-start:var(--token-space-500, var(--token-scale-500, 20px))}.searchbar-size-large.sc-ion-searchbar-ionic-h .searchbar-clear-button.sc-ion-searchbar-ionic{inset-inline-end:var(--token-space-500, var(--token-scale-500, 20px))}`;
+
+const searchbarIosCss = () => `.sc-ion-searchbar-ios-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:var(--ion-placeholder-opacity, 1);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box}.searchbar-search-icon.sc-ion-searchbar-ios{color:var(--icon-color);pointer-events:none}.searchbar-input-container.sc-ion-searchbar-ios{display:block;position:relative;-ms-flex-negative:1;flex-shrink:1;width:100%}.searchbar-input.sc-ion-searchbar-ios{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;border-radius:var(--border-radius);display:block;width:100%;min-height:inherit;border:0;outline:none;background:var(--background);font-family:inherit;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-input.sc-ion-searchbar-ios::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios::-webkit-search-cancel-button,.searchbar-input.sc-ion-searchbar-ios::-ms-clear{display:none}.searchbar-cancel-button.sc-ion-searchbar-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;height:100%;border:0;outline:none;color:var(--cancel-button-color);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-cancel-button.sc-ion-searchbar-ios>div.sc-ion-searchbar-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.searchbar-clear-button.sc-ion-searchbar-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:none;min-height:0;outline:none;color:var(--clear-button-color);-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-clear-button.sc-ion-searchbar-ios:focus{opacity:0.5}.searchbar-has-value.searchbar-should-show-clear.sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios{display:block}.sc-ion-searchbar-ios-h{--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);font-family:var(--ion-font-family, inherit)}.ion-color.sc-ion-searchbar-ios-h{color:var(--ion-color-contrast)}.ion-color.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{background:var(--ion-color-base)}.ion-color.sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios,.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.ion-color.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{color:inherit}.searchbar-disabled.sc-ion-searchbar-ios-h{cursor:default;opacity:0.4;pointer-events:none}.sc-ion-searchbar-ios-h{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.07);--border-radius:10px;--box-shadow:none;--cancel-button-color:var(--ion-color-primary, #0054e9);--clear-button-color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));--color:var(--ion-text-color, #000);--icon-color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:12px;padding-bottom:12px;min-height:60px;contain:content}.searchbar-input-container.sc-ion-searchbar-ios{min-height:36px}.searchbar-search-icon.sc-ion-searchbar-ios{-webkit-margin-start:calc(50% - 60px);margin-inline-start:calc(50% - 60px);top:0;position:absolute;width:1.375rem;height:100%;contain:strict}.searchbar-search-icon.sc-ion-searchbar-ios{inset-inline-start:5px}.searchbar-input.sc-ion-searchbar-ios{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:6px;padding-bottom:6px;height:100%;font-size:1.0625rem;font-weight:400;contain:strict}.searchbar-has-value.searchbar-should-show-clear.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{-webkit-padding-start:1.75rem;padding-inline-start:1.75rem;-webkit-padding-end:1.75rem;padding-inline-end:1.75rem}.searchbar-clear-button.sc-ion-searchbar-ios{top:0;background-position:center;position:absolute;width:1.875rem;height:100%;border:0;background-color:transparent}.searchbar-clear-button.sc-ion-searchbar-ios{inset-inline-end:0}.searchbar-clear-icon.sc-ion-searchbar-ios{width:1.125rem;height:100%}.searchbar-cancel-button.sc-ion-searchbar-ios{-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0;-ms-flex-negative:0;flex-shrink:0;background-color:transparent;font-size:17px}.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{-webkit-margin-start:0;margin-inline-start:0}.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{-webkit-padding-start:1.875rem;padding-inline-start:1.875rem}.searchbar-has-focus.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.searchbar-should-show-cancel.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{display:block}.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{-webkit-transition:all 300ms ease;transition:all 300ms ease}.searchbar-animated.searchbar-has-focus.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.searchbar-animated.searchbar-should-show-cancel.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{opacity:1;pointer-events:auto}.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{-webkit-margin-end:-100%;margin-inline-end:-100%;-webkit-transform:translate3d(0,  0,  0);transform:translate3d(0,  0,  0);-webkit-transition:all 300ms ease;transition:all 300ms ease;opacity:0;pointer-events:none}.searchbar-no-animate.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,.searchbar-no-animate.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios,.searchbar-no-animate.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{-webkit-transition-duration:0ms;transition-duration:0ms}.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{color:var(--ion-color-base)}@media (any-hover: hover){.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios:hover{color:var(--ion-color-tint)}}ion-toolbar.sc-ion-searchbar-ios-h,ion-toolbar .sc-ion-searchbar-ios-h{padding-top:1px;padding-bottom:15px;min-height:52px}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color),ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color){color:inherit}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-cancel-button.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-cancel-button.sc-ion-searchbar-ios{color:currentColor}ion-toolbar.ion-color.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{color:currentColor;opacity:0.5}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-input.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-input.sc-ion-searchbar-ios{background:rgba(var(--ion-color-contrast-rgb), 0.07);color:currentColor}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-clear-button.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-clear-button.sc-ion-searchbar-ios{color:currentColor;opacity:0.5}`;
+
+const searchbarMdCss = () => `.sc-ion-searchbar-md-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:var(--ion-placeholder-opacity, 1);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box}.searchbar-search-icon.sc-ion-searchbar-md{color:var(--icon-color);pointer-events:none}.searchbar-input-container.sc-ion-searchbar-md{display:block;position:relative;-ms-flex-negative:1;flex-shrink:1;width:100%}.searchbar-input.sc-ion-searchbar-md{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;border-radius:var(--border-radius);display:block;width:100%;min-height:inherit;border:0;outline:none;background:var(--background);font-family:inherit;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-input.sc-ion-searchbar-md::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-md::-webkit-search-cancel-button,.searchbar-input.sc-ion-searchbar-md::-ms-clear{display:none}.searchbar-cancel-button.sc-ion-searchbar-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;height:100%;border:0;outline:none;color:var(--cancel-button-color);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-cancel-button.sc-ion-searchbar-md>div.sc-ion-searchbar-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.searchbar-clear-button.sc-ion-searchbar-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:none;min-height:0;outline:none;color:var(--clear-button-color);-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-clear-button.sc-ion-searchbar-md:focus{opacity:0.5}.searchbar-has-value.searchbar-should-show-clear.sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md{display:block}.sc-ion-searchbar-md-h{--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);font-family:var(--ion-font-family, inherit)}.ion-color.sc-ion-searchbar-md-h{color:var(--ion-color-contrast)}.ion-color.sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md{background:var(--ion-color-base)}.ion-color.sc-ion-searchbar-md-h .searchbar-clear-button.sc-ion-searchbar-md,.ion-color.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md,.ion-color.sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md{color:inherit}.searchbar-disabled.sc-ion-searchbar-md-h{cursor:default;opacity:0.4;pointer-events:none}.sc-ion-searchbar-md-h{--background:var(--ion-background-color, #fff);--border-radius:2px;--box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);--cancel-button-color:var(--ion-color-step-900, var(--ion-text-color-step-100, #1a1a1a));--clear-button-color:initial;--color:var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));--icon-color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;background:inherit}.searchbar-search-icon.sc-ion-searchbar-md{top:11px;width:1.3125rem;height:1.3125rem}.searchbar-search-icon.sc-ion-searchbar-md{inset-inline-start:16px}.searchbar-cancel-button.sc-ion-searchbar-md{top:0;background-color:transparent;font-size:1.5em}.searchbar-cancel-button.sc-ion-searchbar-md{inset-inline-start:9px}.searchbar-search-icon.sc-ion-searchbar-md,.searchbar-cancel-button.sc-ion-searchbar-md{position:absolute}.searchbar-search-icon.ion-activated.sc-ion-searchbar-md,.searchbar-cancel-button.ion-activated.sc-ion-searchbar-md{background-color:transparent}.searchbar-input.sc-ion-searchbar-md{-webkit-padding-start:3.4375rem;padding-inline-start:3.4375rem;-webkit-padding-end:3.4375rem;padding-inline-end:3.4375rem;padding-top:0.375rem;padding-bottom:0.375rem;background-position:left 8px center;height:auto;font-size:1rem;font-weight:400;line-height:30px}[dir=rtl].sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md,[dir=rtl] .sc-ion-searchbar-md-h .searchbar-input.sc-ion-searchbar-md{background-position:right 8px center}[dir=rtl].sc-ion-searchbar-md .searchbar-input.sc-ion-searchbar-md{background-position:right 8px center}@supports selector(:dir(rtl)){.searchbar-input.sc-ion-searchbar-md:dir(rtl){background-position:right 8px center}}.searchbar-clear-button.sc-ion-searchbar-md{top:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;position:absolute;height:100%;border:0;background-color:transparent}.searchbar-clear-button.sc-ion-searchbar-md{inset-inline-end:13px}.searchbar-clear-button.ion-activated.sc-ion-searchbar-md{background-color:transparent}.searchbar-clear-icon.sc-ion-searchbar-md{width:1.375rem;height:100%}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-search-icon.sc-ion-searchbar-md{display:block}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md,.searchbar-should-show-cancel.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md{display:block}.searchbar-has-focus.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md+.searchbar-search-icon.sc-ion-searchbar-md,.searchbar-should-show-cancel.sc-ion-searchbar-md-h .searchbar-cancel-button.sc-ion-searchbar-md+.searchbar-search-icon.sc-ion-searchbar-md{display:none}ion-toolbar.sc-ion-searchbar-md-h,ion-toolbar .sc-ion-searchbar-md-h{-webkit-padding-start:7px;padding-inline-start:7px;-webkit-padding-end:7px;padding-inline-end:7px;padding-top:3px;padding-bottom:3px}`;
 
 const Searchbar = class {
     constructor(hostRef) {
@@ -44,14 +52,9 @@ const Searchbar = class {
         /**
          * Set the input's autocorrect property.
          */
-        this.autocorrect = false;
-        /**
-         * Set the cancel button icon. Only applies to `md` mode.
-         * Defaults to `arrow-back-sharp`.
-         */
-        this.cancelButtonIcon = config.get('backButtonIcon', arrowBackSharp);
+        this.autocorrect = 'off';
         /**
-         * Set the cancel button text. Only applies to `ios` mode.
+         * Set the cancel button text. Only available when the theme is `"ios"`.
          */
         this.cancelButtonText = 'Cancel';
         /**
@@ -320,10 +323,10 @@ const Searchbar = class {
     positionElements() {
         const value = this.getValue();
         const prevAlignLeft = this.shouldAlignLeft;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const shouldAlignLeft = !this.animated || value.trim() !== '' || !!this.focused;
         this.shouldAlignLeft = shouldAlignLeft;
-        if (mode !== 'ios') {
+        if (theme !== 'ios') {
             return;
         }
         if (prevAlignLeft !== shouldAlignLeft) {
@@ -416,6 +419,12 @@ const Searchbar = class {
     hasValue() {
         return this.getValue() !== '';
     }
+    shouldShowSearchIcon() {
+        if (this.searchIcon === false || this.searchIcon === 'false') {
+            return false;
+        }
+        return true;
+    }
     /**
      * Determines whether or not the cancel button should be visible onscreen.
      * Cancel button should be shown if one of two conditions applies:
@@ -433,39 +442,142 @@ const Searchbar = class {
      * Clear button should be shown if one of two conditions applies:
      * 1. `showClearButton` is set to `always`.
      * 2. `showClearButton` is set to `focus`, and the searchbar has been focused.
+     * Unless the `theme` is `ionic` and the searchbar is disabled.
      */
     shouldShowClearButton() {
+        const theme = getIonTheme(this);
         if (this.showClearButton === 'never' || (this.showClearButton === 'focus' && !this.focused)) {
             return false;
         }
+        if (theme === 'ionic' && this.disabled) {
+            return false;
+        }
         return true;
     }
+    getShape() {
+        const theme = getIonTheme(this);
+        const { shape } = this;
+        // TODO(ROU-11677): Remove theme check when shapes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (shape === undefined) {
+            return 'round';
+        }
+        return shape;
+    }
+    getSize() {
+        const theme = getIonTheme(this);
+        const { size } = this;
+        // TODO(ROU-11678): Remove theme check when sizes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (size === undefined) {
+            return 'medium';
+        }
+        return size;
+    }
+    /**
+     * Get the icon to use for the clear icon.
+     * If an icon is set on the component, use that.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get searchbarClearIcon() {
+        // Return the icon if it is explicitly set
+        if (this.clearIcon != null) {
+            return this.clearIcon;
+        }
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: closeCircle,
+            ionic: xSvg,
+            md: closeSharp,
+        };
+        // Get the default icon based on the theme, falling back to 'md' icon if necessary
+        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+        // Return the configured searchbar clear icon or the default icon
+        return config.get('searchbarClearIcon', defaultIcon);
+    }
+    /**
+     * Get the icon to use for the search icon.
+     * If an icon is set on the component, use that.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get searchbarSearchIcon() {
+        // Return the icon if it is explicitly set.
+        // If the icon is set to a boolean or string 'true', use the default icon.
+        if (this.searchIcon != null && this.searchIcon !== 'true' && typeof this.searchIcon !== 'boolean') {
+            return this.searchIcon;
+        }
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: searchOutline,
+            ionic: magnifyingGlassSvg,
+            md: searchSharp,
+        };
+        // Get the default icon based on the theme, falling back to 'md' icon if necessary
+        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+        // Return the configured searchbar search icon or the default icon
+        return config.get('searchbarSearchIcon', defaultIcon);
+    }
+    /**
+     * Get the icon to use for the cancel icon.
+     * If an icon is set on the component, use that.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get searchbarCancelIcon() {
+        // Return the icon if it is explicitly set
+        if (this.cancelButtonIcon != null) {
+            return this.cancelButtonIcon;
+        }
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: arrowBackSharp,
+            ionic: arrowLeftSvg,
+            md: arrowBackSharp,
+        };
+        // Get the default icon based on the theme, falling back to 'md' icon if necessary
+        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+        // Return the configured searchbar cancel icon, the back button icon or the default icon
+        return config.get('searchbarCancelIcon', config.get('backButtonIcon', defaultIcon));
+    }
     render() {
-        const { cancelButtonText, autocapitalize } = this;
+        const { cancelButtonText, autocapitalize, searchbarCancelIcon, searchbarClearIcon, searchbarSearchIcon } = this;
         const animated = this.animated && config.getBoolean('animated', true);
-        const mode = getIonMode(this);
-        const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
-        const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
+        const theme = getIonTheme(this);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '870c9284441fdf431056ac944ac93afa7cb1ee96', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: '730e33f44c5ec6eee898ea6612fdba337de354e3', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: 'd898b9f9768ec7119a3ad4be8350d8a3cfb32ba6', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
-                [mode]: true,
+        const shape = this.getShape();
+        const size = this.getSize();
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '9b71660f86c93ab8e1c4bca45a778584b1473a48', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: theme === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: '27c4121c6b49906b2a9c225bd7ba9ab2a41e4292', "aria-hidden": "true" }, theme === 'md' || theme === 'ionic' ? (h("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: 'd5fc37533478d088fd40697b21cffc8f9c673add', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+                [theme]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
                 'searchbar-no-animate': animated && this.noAnimate,
                 'searchbar-has-value': this.hasValue(),
                 'searchbar-left-aligned': this.shouldAlignLeft,
                 'searchbar-has-focus': this.focused,
+                'searchbar-should-show-search-icon': this.shouldShowSearchIcon(),
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: 'a0b49cce6241b7e79834de7cbb1d1076f9d42a21', class: "searchbar-input-container" }, h("input", Object.assign({ key: '8ad5e659f8ed675fa5559f9e5dfcdf99cfcb8bcf', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect ? 'on' : 'off', spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, h("ion-icon", { key: '09f26831a519bb6639115f827b2b8985ae51e4b9', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: 'd70ccda51cb79e51577648fcca3b274c6fa20a4f', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+                [`searchbar-shape-${shape}`]: shape !== undefined,
+                [`searchbar-size-${size}`]: size !== undefined,
+                'in-toolbar': hostContext('ion-toolbar', this.el),
+            }) }, h("div", { key: 'b7e0dbfa02f9ea4db7eb01cb293d81d4a54e23d2', class: "searchbar-input-container" }, h("input", Object.assign({ key: '3b790197d1f8bad980086ebd898cb2487d56ea24', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), (theme === 'md' || theme === 'ionic') && cancelButton, this.shouldShowSearchIcon() && (h("ion-icon", { key: 'fce3e3510516d768d8b51a6334cf9d9ac934345e', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" })), this.shouldShowClearButton() && (h("button", { key: 'b47cb7c79fd07e44f2273e55782a784f6d567155', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '428dcb1c0ffef947e24771b060288da47e67b6bd', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '6d4f026bd1fde68d43c4e49531ca7b1689590e80', "aria-hidden": "true", icon: searchbarClearIcon, lazy: false, class: "searchbar-clear-icon" })))), theme === 'ios' && cancelButton));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -488,6 +600,7 @@ const Searchbar = class {
 };
 let searchbarIds = 0;
 Searchbar.style = {
+    ionic: searchbarIonicCss(),
     ios: searchbarIosCss(),
     md: searchbarMdCss()
 };

package/dist/esm/ion-segment-content.entry.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, h, d as Host } from './index-tcQvqkiX.js';
+import { r as registerInstance, h, d as Host } from './index-Omi_TcwW.js';
 
 const segmentContentCss = () => `:host{scroll-snap-align:center;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%;min-height:1px;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none;}:host::-webkit-scrollbar{display:none}`;
 
@@ -10,7 +10,7 @@ const SegmentContent = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'ef39f29c444177c3b083cd35680ba891e4bb6a2a' }, h("slot", { key: '51f9dd9ca084ddd928b376aa9d716509669c32b2' })));
+        return (h(Host, { key: '66e6783365c0842eb785d50191206d82321b35e7' }, h("slot", { key: '21528369e7efdb93599179720b26c3f3c3e574ed' })));
     }
 };
 SegmentContent.style = segmentContentCss();

package/dist/esm/ion-segment-view.entry.js

@@ -1,9 +1,11 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, h, d as Host, g as getElement } from './index-tcQvqkiX.js';
+import { r as registerInstance, c as createEvent, h, d as Host, g as getElement } from './index-Omi_TcwW.js';
 import { i as isRTL } from './dir-C53feagD.js';
 
+const ionicSegmentViewMdCss = () => `:host{display:-ms-flexbox;display:flex;height:100%;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none}:host(.segment-view-disabled),:host(.segment-view-swipe-disabled){-ms-touch-action:none;touch-action:none;overflow-x:hidden}:host(.segment-view-scroll-disabled){pointer-events:none}:host(.segment-view-disabled){opacity:0.3}`;
+
 const segmentViewIosCss = () => `:host{display:-ms-flexbox;display:flex;height:100%;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none}:host(.segment-view-disabled),:host(.segment-view-swipe-disabled){-ms-touch-action:none;touch-action:none;overflow-x:hidden}:host(.segment-view-scroll-disabled){pointer-events:none}:host(.segment-view-disabled){opacity:0.3}`;
 
 const segmentViewMdCss = () => `:host{display:-ms-flexbox;display:flex;height:100%;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none}:host(.segment-view-disabled),:host(.segment-view-swipe-disabled){-ms-touch-action:none;touch-action:none;overflow-x:hidden}:host(.segment-view-scroll-disabled){pointer-events:none}:host(.segment-view-disabled){opacity:0.3}`;
@@ -27,6 +29,13 @@ const SegmentView = class {
         var _a;
         const { scrollLeft, scrollWidth, clientWidth } = ev.target;
         const max = scrollWidth - clientWidth;
+        // When only one content item is present max is 0 — skip to avoid NaN/Infinity scrollRatio.
+        // Still reset the timeout so isManualScroll isn't cleared prematurely if setContent
+        // started the timer and a stray scroll event arrives on a non-overflowing element.
+        if (max <= 0) {
+            this.resetScrollEndTimeout();
+            return;
+        }
         const scrollRatio = (isRTL(this.el) ? -1 : 1) * (scrollLeft / max);
         this.ionSegmentViewScroll.emit({
             scrollRatio,
@@ -110,15 +119,16 @@ const SegmentView = class {
     }
     render() {
         const { disabled, isManualScroll, swipeGesture } = this;
-        return (h(Host, { key: 'a6c6ac0232c4bb6f2a954b3de7993019d71f423a', class: {
+        return (h(Host, { key: '48ce45ca6c45d4bbc804390c31a43729a60abb8a', class: {
                 'segment-view-disabled': disabled,
                 'segment-view-scroll-disabled': isManualScroll === false,
                 'segment-view-swipe-disabled': swipeGesture === false,
-            } }, h("slot", { key: '386305be2a75069c79def12005d9f6b49276763f' })));
+            } }, h("slot", { key: 'e248ce5b24b355bd6b51cbfd25741addf4ffd4fb' })));
     }
     get el() { return getElement(this); }
 };
 SegmentView.style = {
+    ionic: ionicSegmentViewMdCss(),
     ios: segmentViewIosCss(),
     md: segmentViewMdCss()
 };