@ionic/core 8.0.0-dev.11711476529.17eae6ec → 8.0.0-rc.0

package/components/ion-fab-list.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as getIonTheme } from './ionic-global.js';
+import { b as getIonMode } from './ionic-global.js';
 
 const fabListCss = ":host{margin-left:0;margin-right:0;margin-top:calc(100% + 10px);margin-bottom:calc(100% + 10px);display:none;position:absolute;top:0;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;min-width:56px;min-height:56px}:host(.fab-list-active){display:-ms-flexbox;display:flex}::slotted(.fab-button-in-list){margin-left:0;margin-right:0;margin-top:8px;margin-bottom:8px;width:40px;height:40px;-webkit-transform:scale(0);transform:scale(0);opacity:0;visibility:hidden}:host(.fab-list-side-top) ::slotted(.fab-button-in-list),:host(.fab-list-side-bottom) ::slotted(.fab-button-in-list){margin-left:0;margin-right:0;margin-top:5px;margin-bottom:5px}:host(.fab-list-side-start) ::slotted(.fab-button-in-list),:host(.fab-list-side-end) ::slotted(.fab-button-in-list){-webkit-margin-start:5px;margin-inline-start:5px;-webkit-margin-end:5px;margin-inline-end:5px;margin-top:0;margin-bottom:0}::slotted(.fab-button-in-list.fab-button-show){-webkit-transform:scale(1);transform:scale(1);opacity:1;visibility:visible}:host(.fab-list-side-top){top:auto;bottom:0;-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.fab-list-side-start){-webkit-margin-start:calc(100% + 10px);margin-inline-start:calc(100% + 10px);-webkit-margin-end:calc(100% + 10px);margin-inline-end:calc(100% + 10px);margin-top:0;margin-bottom:0;-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.fab-list-side-start){inset-inline-end:0}:host(.fab-list-side-end){-webkit-margin-start:calc(100% + 10px);margin-inline-start:calc(100% + 10px);-webkit-margin-end:calc(100% + 10px);margin-inline-end:calc(100% + 10px);margin-top:0;margin-bottom:0;-ms-flex-direction:row;flex-direction:row}:host(.fab-list-side-end){inset-inline-start:0}";
 const IonFabListStyle0 = fabListCss;
@@ -24,12 +24,12 @@ const FabList = /*@__PURE__*/ proxyCustomElement(class FabList extends HTMLEleme
         });
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '34847ba5afdb64f828443fa730bc744529f8752a', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '62d22c1907677360d91fc0386ab05379bcc9de8a', class: {
+                [mode]: true,
                 'fab-list-active': this.activated,
                 [`fab-list-side-${this.side}`]: true,
-            } }, h("slot", { key: '0854c9acbd8c4b089d8917a540ed3f0834dce8f5' })));
+            } }, h("slot", { key: '4f9b6b9620c0ec79006663c5981140184129b7ce' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-fab.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as getIonTheme } from './ionic-global.js';
+import { b as getIonMode } from './ionic-global.js';
 
 const fabCss = ":host{position:absolute;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;z-index:999}:host(.fab-horizontal-center){left:0px;right:0px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}:host(.fab-horizontal-start){left:calc(10px + var(--ion-safe-area-left, 0px));}:host-context([dir=rtl]):host(.fab-horizontal-start),:host-context([dir=rtl]).fab-horizontal-start{right:calc(10px + var(--ion-safe-area-right, 0px));left:unset}@supports selector(:dir(rtl)){:host(.fab-horizontal-start:dir(rtl)){right:calc(10px + var(--ion-safe-area-right, 0px));left:unset}}:host(.fab-horizontal-end){right:calc(10px + var(--ion-safe-area-right, 0px));}:host-context([dir=rtl]):host(.fab-horizontal-end),:host-context([dir=rtl]).fab-horizontal-end{left:calc(10px + var(--ion-safe-area-left, 0px));right:unset}@supports selector(:dir(rtl)){:host(.fab-horizontal-end:dir(rtl)){left:calc(10px + var(--ion-safe-area-left, 0px));right:unset}}:host(.fab-vertical-top){top:10px}:host(.fab-vertical-top.fab-edge){top:0}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button){margin-top:-50%}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button.fab-button-small){margin-top:calc((-100% + 16px) / 2)}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-end){margin-top:-50%}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom){margin-top:calc(50% + 10px)}:host(.fab-vertical-bottom){bottom:10px}:host(.fab-vertical-bottom.fab-edge){bottom:0}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button){margin-bottom:-50%}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button.fab-button-small){margin-bottom:calc((-100% + 16px) / 2)}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-end){margin-bottom:-50%}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom){margin-bottom:calc(50% + 10px)}:host(.fab-vertical-center){top:0px;bottom:0px;margin-top:auto;margin-bottom:auto}";
 const IonFabStyle0 = fabCss;
@@ -53,13 +53,13 @@ const Fab = /*@__PURE__*/ proxyCustomElement(class Fab extends HTMLElement {
     }
     render() {
         const { horizontal, vertical, edge } = this;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'd1db311656f40e40df4bc4e455daf41186f9745f', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'a25aae31396546595b21a760ced22ee92d2379d6', class: {
+                [mode]: true,
                 [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
                 [`fab-vertical-${vertical}`]: vertical !== undefined,
                 'fab-edge': edge,
-            } }, h("slot", { key: 'f4cd7b0794897362b34258e94ef869c50c891722' })));
+            } }, h("slot", { key: 'b01cc2572213bfa6c12111e32e2f7702e6d93621' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-footer.js

@@ -2,9 +2,9 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { readTask, writeTask, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { f as findIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index7.js';
+import { f as findIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index8.js';
 import { c as createKeyboardController } from './keyboard-controller.js';
-import { d as getIonTheme } from './ionic-global.js';
+import { b as getIonMode } from './ionic-global.js';
 import { k as clamp } from './helpers.js';
 
 const handleFooterFade = (scrollEl, baseEl) => {
@@ -36,9 +36,6 @@ const handleFooterFade = (scrollEl, baseEl) => {
     });
 };
 
-const ionicFooterMdCss = "ion-footer{display:block;position:relative;-ms-flex-order:1;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}.footer-md{-webkit-box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.footer-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}";
-const IonFooterIonicStyle0 = ionicFooterMdCss;
-
 const footerIosCss = "ion-footer{display:block;position:relative;-ms-flex-order:1;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}.footer-ios ion-toolbar:first-of-type{--border-width:0.55px 0 0}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.footer-background{left:0;right:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.footer-translucent-ios ion-toolbar{--opacity:.8}}.footer-ios.ion-no-border ion-toolbar:first-of-type{--border-width:0}.footer-collapse-fade ion-toolbar{--opacity-scale:inherit}";
 const IonFooterIosStyle0 = footerIosCss;
 
@@ -51,8 +48,8 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
         this.__registerHost();
         this.keyboardCtrl = null;
         this.checkCollapsibleFooter = () => {
-            const theme = getIonTheme(this);
-            if (theme !== 'ios') {
+            const mode = getIonMode(this);
+            if (mode !== 'ios') {
                 return;
             }
             const { collapse } = this;
@@ -115,22 +112,21 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
     }
     render() {
         const { translucent, collapse } = this;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const tabs = this.el.closest('ion-tabs');
         const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
-        return (h(Host, { key: '54e14d57df65312eb769f976ee1c688410166aff', role: "contentinfo", class: {
-                [theme]: true,
+        return (h(Host, { key: 'c6f57ef061d44a475dd2c3361e73199a1820e2ea', role: "contentinfo", class: {
+                [mode]: true,
                 // Used internally for styling
-                [`footer-${theme}`]: true,
+                [`footer-${mode}`]: true,
                 [`footer-translucent`]: translucent,
-                [`footer-translucent-${theme}`]: translucent,
+                [`footer-translucent-${mode}`]: translucent,
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
                 [`footer-collapse-${collapse}`]: collapse !== undefined,
-            } }, theme === 'ios' && translucent && h("div", { class: "footer-background" }), h("slot", { key: '4450248cb2ebdfa4bddf9079cc1c02d4419a819d' })));
+            } }, mode === 'ios' && translucent && h("div", { class: "footer-background" }), h("slot", { key: '5f27edadd5c05c38d0ba9de0277bac675f5b36b3' })));
     }
     get el() { return this; }
     static get style() { return {
-        ionic: IonFooterIonicStyle0,
         ios: IonFooterIosStyle0,
         md: IonFooterMdStyle0
     }; }

package/components/ion-grid.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as getIonTheme } from './ionic-global.js';
+import { b as getIonMode } from './ionic-global.js';
 
 const gridCss = ":host{-webkit-padding-start:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;display:block;-ms-flex:1;flex:1}@media (min-width: 576px){:host{-webkit-padding-start:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px))}}@media (min-width: 768px){:host{-webkit-padding-start:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px))}}@media (min-width: 992px){:host{-webkit-padding-start:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px))}}@media (min-width: 1200px){:host{-webkit-padding-start:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px))}}:host(.grid-fixed){width:var(--ion-grid-width-xs, var(--ion-grid-width, 100%));max-width:100%}@media (min-width: 576px){:host(.grid-fixed){width:var(--ion-grid-width-sm, var(--ion-grid-width, 540px))}}@media (min-width: 768px){:host(.grid-fixed){width:var(--ion-grid-width-md, var(--ion-grid-width, 720px))}}@media (min-width: 992px){:host(.grid-fixed){width:var(--ion-grid-width-lg, var(--ion-grid-width, 960px))}}@media (min-width: 1200px){:host(.grid-fixed){width:var(--ion-grid-width-xl, var(--ion-grid-width, 1140px))}}:host(.ion-no-padding){--ion-grid-column-padding:0;--ion-grid-column-padding-xs:0;--ion-grid-column-padding-sm:0;--ion-grid-column-padding-md:0;--ion-grid-column-padding-lg:0;--ion-grid-column-padding-xl:0}";
 const IonGridStyle0 = gridCss;
@@ -15,11 +15,11 @@ const Grid = /*@__PURE__*/ proxyCustomElement(class Grid extends HTMLElement {
         this.fixed = false;
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '24fc09fd10fc22ae4cacf905886a45bb559c8c70', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'f16254ea58e52b57b2de5cb33a7e84ad544361af', class: {
+                [mode]: true,
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: '5cd2884368fc0a1c12a068445fab4dbacb19e228' })));
+            } }, h("slot", { key: '42f4eff0d912dc0112fa74d7de69f3a6a8e04a2e' })));
     }
     static get style() { return IonGridStyle0; }
 }, [1, "ion-grid", {

package/components/ion-header.js

@@ -2,10 +2,10 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { readTask, writeTask, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { g as getScrollElement, f as findIonContent, p as printIonContentErrorMsg } from './index7.js';
+import { g as getScrollElement, f as findIonContent, p as printIonContentErrorMsg } from './index8.js';
 import { k as clamp, i as inheritAriaAttributes } from './helpers.js';
 import { h as hostContext } from './theme.js';
-import { d as getIonTheme } from './ionic-global.js';
+import { b as getIonMode } from './ionic-global.js';
 
 const TRANSITION = 'all 0.2s ease-in-out';
 const cloneElement = (tagName) => {
@@ -183,9 +183,6 @@ const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
     });
 };
 
-const ionicHeaderMdCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-md{-webkit-box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.header-collapse-condense{display:none}.header-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}";
-const IonHeaderIonicStyle0 = ionicHeaderMdCss;
-
 const headerIosCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{left:0;right:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:.8}.header-collapse-condense-inactive .header-background{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-fade ion-toolbar{--opacity-scale:inherit}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:-webkit-sticky;position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:0px;z-index:1}.header-collapse-condense ion-toolbar{--background:var(--ion-background-color, #fff);z-index:0}.header-collapse-condense ion-toolbar:last-of-type{--border-width:0px}.header-collapse-condense ion-toolbar ion-searchbar{padding-top:0px;padding-bottom:13px}.header-collapse-main{--opacity-scale:1}.header-collapse-main ion-toolbar{--opacity-scale:inherit}.header-collapse-main ion-toolbar.in-toolbar ion-title,.header-collapse-main ion-toolbar.in-toolbar ion-buttons{-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse{opacity:0;pointer-events:none}.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse{visibility:hidden}ion-header.header-ios:not(.header-collapse-main):has(~ion-content ion-header.header-ios[collapse=condense],~ion-content ion-header.header-ios.header-collapse-condense){opacity:0}";
 const IonHeaderIosStyle0 = headerIosCss;
 
@@ -224,8 +221,8 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement
         this.destroyCollapsibleHeader();
     }
     async checkCollapsibleHeader() {
-        const theme = getIonTheme(this);
-        if (theme !== 'ios') {
+        const mode = getIonMode(this);
+        if (mode !== 'ios') {
             return;
         }
         const { collapse } = this;
@@ -320,22 +317,21 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement
     }
     render() {
         const { translucent, inheritedAttributes } = this;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const collapse = this.collapse || 'none';
         // banner role must be at top level, so remove role if inside a menu
         const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
-        return (h(Host, Object.assign({ key: '696c39641a73888ede9d706f19e908feb55ee789', role: roleType, class: {
-                [theme]: true,
+        return (h(Host, Object.assign({ key: '9f30ede40eaf89b3e0adbcd03e1d08d0d4ca762b', role: roleType, class: {
+                [mode]: true,
                 // Used internally for styling
-                [`header-${theme}`]: true,
+                [`header-${mode}`]: true,
                 [`header-translucent`]: this.translucent,
                 [`header-collapse-${collapse}`]: true,
-                [`header-translucent-${theme}`]: this.translucent,
-            } }, inheritedAttributes), theme === 'ios' && translucent && h("div", { class: "header-background" }), h("slot", { key: 'd886c1521e18911818d8d168a5655216634fa942' })));
+                [`header-translucent-${mode}`]: this.translucent,
+            } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { class: "header-background" }), h("slot", { key: '029aa484210e8dd5c5404a84c134d64a9100ba6e' })));
     }
     get el() { return this; }
     static get style() { return {
-        ionic: IonHeaderIonicStyle0,
         ios: IonHeaderIosStyle0,
         md: IonHeaderMdStyle0
     }; }

package/components/ion-img.js

@@ -3,7 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as inheritAttributes } from './helpers.js';
-import { d as getIonTheme } from './ionic-global.js';
+import { b as getIonMode } from './ionic-global.js';
 
 const imgCss = ":host{display:block;-o-object-fit:contain;object-fit:contain}img{display:block;width:100%;height:100%;-o-object-fit:inherit;object-fit:inherit;-o-object-position:inherit;object-position:inherit}";
 const IonImgStyle0 = imgCss;
@@ -78,10 +78,7 @@ const Img = /*@__PURE__*/ proxyCustomElement(class Img extends HTMLElement {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'c789da9dc3b3a06715e3550e951ff2ffbb80d174', class: {
-                [theme]: true,
-            } }, h("img", { key: 'b24b2d82d3b037c9f4bde82e5bbf669a6b58009a', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        return (h(Host, { key: 'fa0d0e73693f4d5454dde2397a333143ab00a145', class: getIonMode(this) }, h("img", { key: '70198693643ab6a33816c6e1b0ed23b368208fbb', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-infinite-scroll-content.js

@@ -3,12 +3,9 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config.js';
-import { c as config, d as getIonTheme } from './ionic-global.js';
+import { c as config, b as getIonMode } from './ionic-global.js';
 import { d as defineCustomElement$2 } from './spinner.js';
 
-const ionicInfiniteScrollContentMdCss = "ion-infinite-scroll-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;min-height:84px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.infinite-loading{margin-left:0;margin-right:0;margin-top:0;margin-bottom:32px;display:none;width:100%}.infinite-loading-text{-webkit-margin-start:32px;margin-inline-start:32px;-webkit-margin-end:32px;margin-inline-end:32px;margin-top:4px;margin-bottom:0}.infinite-scroll-loading ion-infinite-scroll-content>.infinite-loading{display:block}.infinite-scroll-content-md .infinite-loading-text{color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-md line,.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-small-md line,.infinite-scroll-content-md .infinite-loading-spinner .spinner-crescent circle{stroke:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.infinite-scroll-content-md .infinite-loading-spinner .spinner-bubbles circle,.infinite-scroll-content-md .infinite-loading-spinner .spinner-circles circle,.infinite-scroll-content-md .infinite-loading-spinner .spinner-dots circle{fill:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}";
-const IonInfiniteScrollContentIonicStyle0 = ionicInfiniteScrollContentMdCss;
-
 const infiniteScrollContentIosCss = "ion-infinite-scroll-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;min-height:84px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.infinite-loading{margin-left:0;margin-right:0;margin-top:0;margin-bottom:32px;display:none;width:100%}.infinite-loading-text{-webkit-margin-start:32px;margin-inline-start:32px;-webkit-margin-end:32px;margin-inline-end:32px;margin-top:4px;margin-bottom:0}.infinite-scroll-loading ion-infinite-scroll-content>.infinite-loading{display:block}.infinite-scroll-content-ios .infinite-loading-text{color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-ios line,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-small-ios line,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-crescent circle{stroke:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.infinite-scroll-content-ios .infinite-loading-spinner .spinner-bubbles circle,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-circles circle,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-dots circle{fill:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}";
 const IonInfiniteScrollContentIosStyle0 = infiniteScrollContentIosCss;
 
@@ -25,8 +22,8 @@ const InfiniteScrollContent = /*@__PURE__*/ proxyCustomElement(class InfiniteScr
     }
     componentDidLoad() {
         if (this.loadingSpinner === undefined) {
-            const theme = getIonTheme(this);
-            this.loadingSpinner = config.get('infiniteLoadingSpinner', config.get('spinner', theme === 'ios' ? 'lines' : 'crescent'));
+            const mode = getIonMode(this);
+            this.loadingSpinner = config.get('infiniteLoadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
         }
     }
     renderLoadingText() {
@@ -37,15 +34,14 @@ const InfiniteScrollContent = /*@__PURE__*/ proxyCustomElement(class InfiniteScr
         return h("div", { class: "infinite-loading-text" }, this.loadingText);
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '1bebdcb04f303c5222b23bf800168eee3c5942bd', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '44b11681f802fb0d1c565810f71f7672453e16ca', class: {
+                [mode]: true,
                 // Used internally for styling
-                [`infinite-scroll-content-${theme}`]: true,
-            } }, h("div", { key: '414b460914f59aa3ee800bc17389e46253b516da', class: "infinite-loading" }, this.loadingSpinner && (h("div", { class: "infinite-loading-spinner" }, h("ion-spinner", { name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+                [`infinite-scroll-content-${mode}`]: true,
+            } }, h("div", { key: 'd7e7d5beedf1e22a009e87790ca024b8f15c462b', class: "infinite-loading" }, this.loadingSpinner && (h("div", { class: "infinite-loading-spinner" }, h("ion-spinner", { name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
     }
     static get style() { return {
-        ionic: IonInfiniteScrollContentIonicStyle0,
         ios: IonInfiniteScrollContentIosStyle0,
         md: IonInfiniteScrollContentMdStyle0
     }; }

package/components/ion-infinite-scroll.js

@@ -2,8 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, createEvent, writeTask, readTask, h, Host } from '@stencil/core/internal/client';
-import { a as findClosestIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index7.js';
-import { d as getIonTheme } from './ionic-global.js';
+import { a as findClosestIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index8.js';
+import { b as getIonMode } from './ionic-global.js';
 
 const infiniteScrollCss = "ion-infinite-scroll{display:none;width:100%}.infinite-scroll-enabled{display:block}";
 const IonInfiniteScrollStyle0 = infiniteScrollCss;
@@ -172,10 +172,10 @@ const InfiniteScroll = /*@__PURE__*/ proxyCustomElement(class InfiniteScroll ext
         }
     }
     render() {
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const disabled = this.disabled;
-        return (h(Host, { key: '6506910ec74544cc51c396bac21a6e2a8fe2a956', class: {
-                [theme]: true,
+        return (h(Host, { key: 'be1a720fcf686dc48468de968d84ea58bfe0a06d', class: {
+                [mode]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,
             } }));

package/components/ion-input-password-toggle.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IonInputPasswordToggle extends Components.IonInputPasswordToggle, HTMLElement {}
+export const IonInputPasswordToggle: {
+    prototype: IonInputPasswordToggle;
+    new (): IonInputPasswordToggle;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ion-input-password-toggle.js

@@ -0,0 +1,132 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { p as printIonWarning } from './index6.js';
+import { c as createColorClasses } from './theme.js';
+import { l as eye, m as eyeOff } from './index7.js';
+import { b as getIonMode } from './ionic-global.js';
+import { d as defineCustomElement$4 } from './button.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './ripple-effect.js';
+
+const iosInputPasswordToggleCss = "";
+const IonInputPasswordToggleIosStyle0 = iosInputPasswordToggleCss;
+
+const mdInputPasswordToggleCss = "";
+const IonInputPasswordToggleMdStyle0 = mdInputPasswordToggleCss;
+
+const InputPasswordToggle = /*@__PURE__*/ proxyCustomElement(class InputPasswordToggle extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.togglePasswordVisibility = () => {
+            const { inputElRef } = this;
+            if (!inputElRef) {
+                return;
+            }
+            inputElRef.type = inputElRef.type === 'text' ? 'password' : 'text';
+        };
+        this.color = undefined;
+        this.showIcon = undefined;
+        this.hideIcon = undefined;
+        this.type = 'password';
+    }
+    /**
+     * Whenever the input type changes we need to re-run validation to ensure the password
+     * toggle is being used with the correct input type. If the application changes the type
+     * outside of this component we also need to re-render so the correct icon is shown.
+     */
+    onTypeChange(newValue) {
+        if (newValue !== 'text' && newValue !== 'password') {
+            printIonWarning(`ion-input-password-toggle only supports inputs of type "text" or "password". Input of type "${newValue}" is not compatible.`, this.el);
+            return;
+        }
+    }
+    connectedCallback() {
+        const { el } = this;
+        const inputElRef = (this.inputElRef = el.closest('ion-input'));
+        if (!inputElRef) {
+            printIonWarning('No ancestor ion-input found for ion-input-password-toggle. This component must be slotted inside of an ion-input.', el);
+            return;
+        }
+        /**
+         * Important: Set the type in connectedCallback because the default value
+         * of this.type may not always be accurate. Usually inputs have the "password" type
+         * but it is possible to have the input to initially have the "text" type. In that scenario
+         * the wrong icon will show briefly before switching to the correct icon. Setting the
+         * type here allows us to avoid that flicker.
+         */
+        this.type = inputElRef.type;
+    }
+    disconnectedCallback() {
+        this.inputElRef = null;
+    }
+    render() {
+        var _a, _b;
+        const { color, type } = this;
+        const mode = getIonMode(this);
+        const showPasswordIcon = (_a = this.showIcon) !== null && _a !== void 0 ? _a : eye;
+        const hidePasswordIcon = (_b = this.hideIcon) !== null && _b !== void 0 ? _b : eyeOff;
+        const isPasswordVisible = type === 'text';
+        return (h(Host, { key: '1cb075999e41c2fde3a3d6cafe6f37c9b5429299', class: createColorClasses(color, {
+                [mode]: true,
+            }) }, h("ion-button", { key: 'cfaaec221f530ecc475690b6508c2333e32ff609', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": "show password", role: "switch", type: "button", onPointerDown: (ev) => {
+                /**
+                 * This prevents mobile browsers from
+                 * blurring the input when the password toggle
+                 * button is activated.
+                 */
+                ev.preventDefault();
+            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: 'dc0fc5fe8df4df4c145e29b30e589f159aab9cd9', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? hidePasswordIcon : showPasswordIcon }))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "type": ["onTypeChange"]
+    }; }
+    static get style() { return {
+        ios: IonInputPasswordToggleIosStyle0,
+        md: IonInputPasswordToggleMdStyle0
+    }; }
+}, [33, "ion-input-password-toggle", {
+        "color": [513],
+        "showIcon": [1, "show-icon"],
+        "hideIcon": [1, "hide-icon"],
+        "type": [1025]
+    }, undefined, {
+        "type": ["onTypeChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-input-password-toggle", "ion-button", "ion-icon", "ion-ripple-effect"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-input-password-toggle":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, InputPasswordToggle);
+            }
+            break;
+        case "ion-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ion-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ion-ripple-effect":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IonInputPasswordToggle = InputPasswordToggle;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonInputPasswordToggle, defineCustomElement };