@ionic/core 8.7.4-dev.11756888693.1b2f4d4a → 8.7.4-dev.11757000835.106af570

package/hydrate/index.mjs

@@ -247,7 +247,7 @@ const printRequiredElementError = (el, ...targetSelectors) => {
     return console.error(`<${el.tagName.toLowerCase()}> must be used inside ${targetSelectors.join(' or ')}.`);
 };
 
-const win$2 = typeof window !== 'undefined' ? window : undefined;
+const win$1 = typeof window !== 'undefined' ? window : undefined;
 const doc = typeof document !== 'undefined' ? document : undefined;
 
 /**
@@ -262,7 +262,7 @@ const doc = typeof document !== 'undefined' ? document : undefined;
  * moment this file is evaluated which could be
  * before the config is set.
  */
-const shouldUseCloseWatcher = () => config.get('experimentalCloseWatcher', false) && win$2 !== undefined && 'CloseWatcher' in win$2;
+const shouldUseCloseWatcher = () => config.get('experimentalCloseWatcher', false) && win$1 !== undefined && 'CloseWatcher' in win$1;
 const OVERLAY_BACK_BUTTON_PRIORITY = 100;
 const MENU_BACK_BUTTON_PRIORITY = 99; // 1 less than overlay priority since menu is displayed behind overlays
 
@@ -962,10 +962,10 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
   var _a;
   const scopeId2 = getScopeId(cmpMeta, mode);
   const style = styles.get(scopeId2);
-  if (!win$1.document) {
+  if (!win.document) {
     return scopeId2;
   }
-  styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : win$1.document;
+  styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : win.document;
   if (style) {
     if (typeof style === "string") {
       styleContainerNode = styleContainerNode.head || styleContainerNode;
@@ -978,9 +978,9 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
         if (styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
           styleElm.innerHTML = style;
         } else {
-          styleElm = win$1.document.createElement("style");
+          styleElm = win.document.createElement("style");
           styleElm.innerHTML = style;
-          const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(win$1.document);
+          const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(win.document);
           if (nonce != null) {
             styleElm.setAttribute("nonce", nonce);
           }
@@ -1188,8 +1188,8 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       delete hostElm["s-sc"];
     }
   }
-  if (win$1.document && (!plt.$orgLocNodes$ || !plt.$orgLocNodes$.size)) {
-    initializeDocumentHydrate(win$1.document.body, plt.$orgLocNodes$ = /* @__PURE__ */ new Map());
+  if (win.document && (!plt.$orgLocNodes$ || !plt.$orgLocNodes$.size)) {
+    initializeDocumentHydrate(win.document.body, plt.$orgLocNodes$ = /* @__PURE__ */ new Map());
   }
   hostElm[HYDRATE_ID] = hostId;
   hostElm.removeAttribute(HYDRATE_ID);
@@ -1223,7 +1223,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
           cmpMeta.$cmpMeta$,
           childRenderNode.$elm$.getAttribute("s-mode") 
         );
-        const styleSheet = win$1.document.querySelector(`style[sty-id="${scopeId3}"]`);
+        const styleSheet = win.document.querySelector(`style[sty-id="${scopeId3}"]`);
         if (styleSheet) {
           hostElm.shadowRoot.append(styleSheet.cloneNode(true));
         }
@@ -1533,8 +1533,8 @@ function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNod
   childVNode.$name$ = slotName || null;
   childVNode.$tag$ = "slot";
   const parentNodeId = (parentVNode == null ? void 0 : parentVNode.$elm$) ? parentVNode.$elm$["s-id"] || parentVNode.$elm$.getAttribute("s-id") : "";
-  if (shadowRootNodes && win$1.document) {
-    const slot = childVNode.$elm$ = win$1.document.createElement(childVNode.$tag$);
+  if (shadowRootNodes && win.document) {
+    const slot = childVNode.$elm$ = win.document.createElement(childVNode.$tag$);
     if (childVNode.$name$) {
       childVNode.$elm$.setAttribute("name", slotName);
     }
@@ -2095,7 +2095,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
   } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
     if (memberName[2] === "-") {
       memberName = memberName.slice(3);
-    } else if (isMemberInElement(win$1, ln)) {
+    } else if (isMemberInElement(win, ln)) {
       memberName = ln.slice(2);
     } else {
       memberName = ln[2] + memberName.slice(3);
@@ -2242,7 +2242,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
     }
   }
   if (newVNode2.$text$ !== null) {
-    elm = newVNode2.$elm$ = win$1.document.createTextNode(newVNode2.$text$);
+    elm = newVNode2.$elm$ = win.document.createTextNode(newVNode2.$text$);
   } else if (newVNode2.$flags$ & 1 /* isSlotReference */) {
     elm = newVNode2.$elm$ = slotReferenceDebugNode(newVNode2) ;
     {
@@ -2252,12 +2252,12 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
     if (!isSvgMode) {
       isSvgMode = newVNode2.$tag$ === "svg";
     }
-    if (!win$1.document) {
+    if (!win.document) {
       throw new Error(
         "You are trying to render a Stencil component in an environment that doesn't support the DOM. Make sure to populate the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window/window) object before rendering a component."
       );
     }
-    elm = newVNode2.$elm$ = win$1.document.createElementNS(
+    elm = newVNode2.$elm$ = win.document.createElementNS(
       isSvgMode ? SVG_NS : HTML_NS,
       !useNativeShadowDom && BUILD.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
     ) ;
@@ -2634,7 +2634,7 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
       markSlotContentForRelocation(rootVnode.$elm$);
       for (const relocateData of relocateNodes) {
         const nodeToRelocate = relocateData.$nodeToRelocate$;
-        if (!nodeToRelocate["s-ol"] && win$1.document) {
+        if (!nodeToRelocate["s-ol"] && win.document) {
           const orgLocationNode = originalLocationDebugNode(nodeToRelocate) ;
           orgLocationNode["s-nr"] = nodeToRelocate;
           insertBefore(nodeToRelocate.parentNode, nodeToRelocate["s-ol"] = orgLocationNode, nodeToRelocate);
@@ -2680,13 +2680,13 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
 };
 var slotReferenceDebugNode = (slotVNode) => {
   var _a;
-  return (_a = win$1.document) == null ? void 0 : _a.createComment(
+  return (_a = win.document) == null ? void 0 : _a.createComment(
     `<slot${slotVNode.$name$ ? ' name="' + slotVNode.$name$ + '"' : ""}> (host=${hostTagName.toLowerCase()})`
   );
 };
 var originalLocationDebugNode = (nodeToRelocate) => {
   var _a;
-  return (_a = win$1.document) == null ? void 0 : _a.createComment(
+  return (_a = win.document) == null ? void 0 : _a.createComment(
     `org-location for ` + (nodeToRelocate.localName ? `<${nodeToRelocate.localName}> (host=${nodeToRelocate["s-hn"]})` : `[${nodeToRelocate.textContent}]`)
   );
 };
@@ -2864,7 +2864,7 @@ var appDidLoad = (who) => {
   if (BUILD.asyncQueue) {
     plt.$flags$ |= 2 /* appLoaded */;
   }
-  nextTick(() => emitEvent(win$1, "appload", { detail: { namespace: NAMESPACE } }));
+  nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } }));
   {
     if ((_a = plt.$orgLocNodes$) == null ? void 0 : _a.size) {
       plt.$orgLocNodes$.clear();
@@ -3158,10 +3158,10 @@ var connectedCallback = (elm) => {
   }
 };
 var setContentReference = (elm) => {
-  if (!win$1.document) {
+  if (!win.document) {
     return;
   }
-  const contentRefElm = elm["s-cr"] = win$1.document.createComment(
+  const contentRefElm = elm["s-cr"] = win.document.createComment(
     ""
   );
   contentRefElm["s-cn"] = true;
@@ -3171,9 +3171,9 @@ var setContentReference = (elm) => {
 // src/runtime/fragment.ts
 var Fragment = (_, children) => children;
 var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
-  if (listeners && win$1.document) {
+  if (listeners && win.document) {
     listeners.map(([flags, name, method]) => {
-      const target = getHostListenerTarget(win$1.document, elm, flags) ;
+      const target = getHostListenerTarget(win.document, elm, flags) ;
       const handler = hostListenerProxy(hostRef, method);
       const opts = hostListenerOpts(flags);
       plt.ael(target, name, handler, opts);
@@ -3200,7 +3200,7 @@ var getHostListenerTarget = (doc, elm, flags) => {
     return doc;
   }
   if (flags & 8 /* TargetWindow */) {
-    return win$1;
+    return win;
   }
   if (flags & 16 /* TargetBody */) {
     return doc.body;
@@ -3766,7 +3766,7 @@ var registerComponents = (Cstrs) => {
     });
   }
 };
-var win$1 = window;
+var win = window;
 var readTask = (cb) => {
   nextTick(() => {
     try {
@@ -3800,7 +3800,7 @@ var plt = {
   raf: (h2) => requestAnimationFrame(h2),
   ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
   rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
-  ce: (eventName, opts) => new win$1.CustomEvent(eventName, opts)
+  ce: (eventName, opts) => new win.CustomEvent(eventName, opts)
 };
 var getHostRef = (ref) => {
   if (ref.__stencil__getHostRef) {
@@ -5001,8 +5001,8 @@ class AccordionGroup {
 }
 
 const getCapacitor = () => {
-    if (win$2 !== undefined) {
-        return win$2.Capacitor;
+    if (win$1 !== undefined) {
+        return win$1.Capacitor;
     }
     return undefined;
 };
@@ -7053,7 +7053,7 @@ const createAnimation = (animationId) => {
     const _afterAddWriteFunctions = [];
     const webAnimations = [];
     const supportsAnimationEffect = typeof AnimationEffect === 'function' ||
-        (win$2 !== undefined && typeof win$2.AnimationEffect === 'function');
+        (win$1 !== undefined && typeof win$1.AnimationEffect === 'function');
     /**
      * This is a feature detection for Web Animations.
      *
@@ -10582,11 +10582,9 @@ const matchBreakpoint = (breakpoint) => {
     return false;
 };
 
-const colCss = ":host{-webkit-padding-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;width:100%;max-width:100%;min-height:1px}@media (min-width: 576px){:host{-webkit-padding-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px))}}@media (min-width: 768px){:host{-webkit-padding-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px))}}@media (min-width: 992px){:host{-webkit-padding-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px))}}@media (min-width: 1200px){:host{-webkit-padding-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px))}}";
+const colCss = ":host{--col-unit-size:calc((100% - (var(--ion-grid-columns) - 1) * var(--ion-grid-gap)) / var(--ion-grid-columns));-webkit-padding-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;width:100%;max-width:100%;min-height:1px}@media (min-width: 576px){:host{-webkit-padding-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px))}}@media (min-width: 768px){:host{-webkit-padding-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px))}}@media (min-width: 992px){:host{-webkit-padding-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px))}}@media (min-width: 1200px){:host{-webkit-padding-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px))}}:host(.ion-grid-col-auto){-ms-flex:0 0 auto;flex:0 0 auto}:host([class^=ion-grid-col-]),:host([class*=\" ion-grid-col-\"]){-ms-flex:0 0 calc(var(--ion-grid-col-span) * var(--col-unit-size) + (var(--ion-grid-col-span) - 1) * var(--ion-grid-gap));flex:0 0 calc(var(--ion-grid-col-span) * var(--col-unit-size) + (var(--ion-grid-col-span) - 1) * var(--ion-grid-gap))}:host([class^=ion-grid-offset-col-]),:host([class*=\" ion-grid-offset-col-\"]){--margin-calc:calc(\n    var(--col-unit-size) * var(--ion-grid-col-margin) + (var(--ion-grid-gap) * var(--ion-grid-col-margin))\n  );-webkit-margin-start:var(--margin-calc);margin-inline-start:var(--margin-calc);-webkit-margin-end:0;margin-inline-end:0}:host(.ion-grid-col-1){--ion-grid-col-span:1}:host(.ion-grid-order-col-1){-ms-flex-order:1;order:1}:host(.ion-grid-offset-col-1){--ion-grid-col-margin:1}:host(.ion-grid-col-2){--ion-grid-col-span:2}:host(.ion-grid-order-col-2){-ms-flex-order:2;order:2}:host(.ion-grid-offset-col-2){--ion-grid-col-margin:2}:host(.ion-grid-col-3){--ion-grid-col-span:3}:host(.ion-grid-order-col-3){-ms-flex-order:3;order:3}:host(.ion-grid-offset-col-3){--ion-grid-col-margin:3}:host(.ion-grid-col-4){--ion-grid-col-span:4}:host(.ion-grid-order-col-4){-ms-flex-order:4;order:4}:host(.ion-grid-offset-col-4){--ion-grid-col-margin:4}:host(.ion-grid-col-5){--ion-grid-col-span:5}:host(.ion-grid-order-col-5){-ms-flex-order:5;order:5}:host(.ion-grid-offset-col-5){--ion-grid-col-margin:5}:host(.ion-grid-col-6){--ion-grid-col-span:6}:host(.ion-grid-order-col-6){-ms-flex-order:6;order:6}:host(.ion-grid-offset-col-6){--ion-grid-col-margin:6}:host(.ion-grid-col-7){--ion-grid-col-span:7}:host(.ion-grid-order-col-7){-ms-flex-order:7;order:7}:host(.ion-grid-offset-col-7){--ion-grid-col-margin:7}:host(.ion-grid-col-8){--ion-grid-col-span:8}:host(.ion-grid-order-col-8){-ms-flex-order:8;order:8}:host(.ion-grid-offset-col-8){--ion-grid-col-margin:8}:host(.ion-grid-col-9){--ion-grid-col-span:9}:host(.ion-grid-order-col-9){-ms-flex-order:9;order:9}:host(.ion-grid-offset-col-9){--ion-grid-col-margin:9}:host(.ion-grid-col-10){--ion-grid-col-span:10}:host(.ion-grid-order-col-10){-ms-flex-order:10;order:10}:host(.ion-grid-offset-col-10){--ion-grid-col-margin:10}:host(.ion-grid-col-11){--ion-grid-col-span:11}:host(.ion-grid-order-col-11){-ms-flex-order:11;order:11}:host(.ion-grid-offset-col-11){--ion-grid-col-margin:11}:host(.ion-grid-col-12){--ion-grid-col-span:12}:host(.ion-grid-order-col-12){-ms-flex-order:12;order:12}:host(.ion-grid-offset-col-12){--ion-grid-col-margin:12}";
 
-const win = typeof window !== 'undefined' ? window : undefined;
 // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
-const SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));
 const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
@@ -10615,66 +10613,62 @@ class Col {
         // increase in size and we want to return the largest match
         return matched;
     }
-    calculateSize() {
-        const columns = this.getColumns('size');
+    getStyleClass(property, className, acceptsAuto = false) {
+        const colPropertyValue = this.getColumns(property);
         // If size wasn't set for any breakpoint
         // or if the user set the size without a value
         // it means we need to stick with the default and return
         // e.g. <ion-col size-md>
-        if (!columns || columns === '') {
+        if (!colPropertyValue || colPropertyValue === '') {
             return;
         }
-        // If the size is set to auto then don't calculate a size
-        const colSize = columns === 'auto'
-            ? 'auto'
-            : // If CSS supports variables we should use the grid columns var
-                SUPPORTS_VARS
-                    ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
-                    : // Convert the columns to a percentage by dividing by the total number
-                        // of columns (12) and then multiplying by 100
-                        (columns / 12) * 100 + '%';
-        return {
-            flex: `0 0 ${colSize}`,
-            width: `${colSize}`,
-            'max-width': `${colSize}`,
-        };
-    }
-    // Called by push, pull, and offset since they use the same calculations
-    calculatePosition(property, modifier) {
-        const columns = this.getColumns(property);
-        if (!columns) {
+        if (acceptsAuto && colPropertyValue === 'auto') {
+            return 'ion-grid-col-auto';
+        }
+        const valueNumber = parseInt(colPropertyValue);
+        if (isNaN(valueNumber)) {
             return;
         }
-        // If the number of columns passed are greater than 0 and less than
-        // 12 we can position the column, else default to auto
-        const amount = SUPPORTS_VARS
-            ? // If CSS supports variables we should use the grid columns var
-                `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
-            : // Convert the columns to a percentage by dividing by the total number
-                // of columns (12) and then multiplying by 100
-                columns > 0 && columns < 12
-                    ? (columns / 12) * 100 + '%'
-                    : 'auto';
-        return {
-            [modifier]: amount,
-        };
+        return `${className}-col-${valueNumber}`;
     }
-    calculateOffset(isRTL) {
-        return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');
+    getSizeClass() {
+        return this.getStyleClass('size', 'ion-grid', true);
     }
-    calculatePull(isRTL) {
-        return this.calculatePosition('pull', isRTL ? 'left' : 'right');
+    getOrderClass() {
+        return this.getStyleClass('order', 'ion-grid-order');
     }
-    calculatePush(isRTL) {
-        return this.calculatePosition('push', isRTL ? 'right' : 'left');
+    getOffsetClass() {
+        return this.getStyleClass('offset', 'ion-grid-offset');
+    }
+    componentDidLoad() {
+        if (this.pull ||
+            this.pullLg ||
+            this.pullMd ||
+            this.pullSm ||
+            this.pullXl ||
+            this.pullXs ||
+            this.push ||
+            this.pushLg ||
+            this.pushMd ||
+            this.pushSm ||
+            this.pushXl ||
+            this.pushXs) {
+            printIonWarning('[ion-col] - The pull and push properties are deprecated and no longer work, in favor of the order and size properties.', this.el);
+        }
     }
     render() {
-        const isRTL = document.dir === 'rtl';
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '18eb6aff60f43b28b7e157b7d6ce787635f25fa1', class: {
+        const colSize = this.getSizeClass();
+        const colOrder = this.getOrderClass();
+        const colOffset = this.getOffsetClass();
+        return (hAsync(Host, { key: '13acd2681e3e16bbf196eb3ca8ad01230fbb0df8', class: {
                 [theme]: true,
-            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, hAsync("slot", { key: '3848d5cb525b42a550aa36a486f97b2e20240def' })));
+                [`${colSize}`]: colSize !== undefined,
+                [`${colOrder}`]: colOrder !== undefined,
+                [`${colOffset}`]: colOffset !== undefined,
+            } }, hAsync("slot", { key: '525e1f5b3102009f16ae985a838f68f440eea7e4' })));
     }
+    get el() { return getElement(this); }
     static get style() { return colCss; }
     static get cmpMeta() { return {
         "$flags$": 265,
@@ -10686,6 +10680,12 @@ class Col {
             "offsetMd": [1, "offset-md"],
             "offsetLg": [1, "offset-lg"],
             "offsetXl": [1, "offset-xl"],
+            "order": [1],
+            "orderXs": [1, "order-xs"],
+            "orderSm": [1, "order-sm"],
+            "orderMd": [1, "order-md"],
+            "orderLg": [1, "order-lg"],
+            "orderXl": [1, "order-xl"],
             "pull": [1],
             "pullXs": [1, "pull-xs"],
             "pullSm": [1, "pull-sm"],
@@ -15758,8 +15758,8 @@ const createKeyboardController = async (keyboardChangeCallback) => {
             keyboardVisible = false;
             fireChangeCallback(keyboardVisible, resizeMode);
         };
-        win$2 === null || win$2 === void 0 ? void 0 : win$2.addEventListener('keyboardWillShow', keyboardWillShowHandler);
-        win$2 === null || win$2 === void 0 ? void 0 : win$2.addEventListener('keyboardWillHide', keyboardWillHideHandler);
+        win$1 === null || win$1 === void 0 ? void 0 : win$1.addEventListener('keyboardWillShow', keyboardWillShowHandler);
+        win$1 === null || win$1 === void 0 ? void 0 : win$1.addEventListener('keyboardWillHide', keyboardWillHideHandler);
     };
     const fireChangeCallback = (state, resizeMode) => {
         if (keyboardChangeCallback) {
@@ -15836,8 +15836,8 @@ const createKeyboardController = async (keyboardChangeCallback) => {
         });
     };
     const destroy = () => {
-        win$2 === null || win$2 === void 0 ? void 0 : win$2.removeEventListener('keyboardWillShow', keyboardWillShowHandler);
-        win$2 === null || win$2 === void 0 ? void 0 : win$2.removeEventListener('keyboardWillHide', keyboardWillHideHandler);
+        win$1 === null || win$1 === void 0 ? void 0 : win$1.removeEventListener('keyboardWillShow', keyboardWillShowHandler);
+        win$1 === null || win$1 === void 0 ? void 0 : win$1.removeEventListener('keyboardWillHide', keyboardWillHideHandler);
         keyboardWillShowHandler = keyboardWillHideHandler = undefined;
     };
     const isKeyboardVisible = () => keyboardVisible;
@@ -17194,8 +17194,8 @@ const createNotchController = (el, getNotchSpacerEl, getLabelSlot) => {
          */
         width === 0 &&
             notchSpacerEl.offsetParent === null &&
-            win$2 !== undefined &&
-            'IntersectionObserver' in win$2) {
+            win$1 !== undefined &&
+            'IntersectionObserver' in win$1) {
             /**
              * If there is an IO already attached
              * then that will update the notch
@@ -17300,7 +17300,7 @@ const isOptionSelected = (currentValue, compareValue, compareWith) => {
 const createSlotMutationController = (el, slotName, mutationCallback) => {
     let hostMutationObserver;
     let slottedContentMutationObserver;
-    if (win$2 !== undefined && 'MutationObserver' in win$2) {
+    if (win$1 !== undefined && 'MutationObserver' in win$1) {
         const slots = Array.isArray(slotName) ? slotName : [slotName];
         hostMutationObserver = new MutationObserver((entries) => {
             for (const entry of entries) {
@@ -22111,13 +22111,13 @@ const getBackdropValueForSheet = (x, backdropBreakpoint) => {
  *
  */
 const setCardStatusBarDark = () => {
-    if (!win$2 || win$2.innerWidth >= 768) {
+    if (!win$1 || win$1.innerWidth >= 768) {
         return;
     }
     StatusBar.setStyle({ style: Style.Dark });
 };
 const setCardStatusBarDefault = (defaultStyle = Style.Default) => {
-    if (!win$2 || win$2.innerWidth >= 768) {
+    if (!win$1 || win$1.innerWidth >= 768) {
         return;
     }
     StatusBar.setStyle({ style: defaultStyle });
@@ -32966,7 +32966,7 @@ class RouterOutlet {
     }; }
 }
 
-const rowCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}";
+const rowCss = ":host{--ion-grid-gap:0px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--ion-grid-gap, 0px)}";
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
@@ -37069,7 +37069,7 @@ function getAnimationPosition(position, positionAnchor, mode, toast) {
      * bottom anchor edge is targeted. For position="bottom", the top
      * anchor edge is targeted.
      */
-    if (positionAnchor && win$2) {
+    if (positionAnchor && win$1) {
         warnIfAnchorIsHidden(positionAnchor, toast);
         const box = positionAnchor.getBoundingClientRect();
         if (position === 'top') {
@@ -37081,7 +37081,7 @@ function getAnimationPosition(position, positionAnchor, mode, toast) {
              * to the top edge of the anchor. We want to calculate from the
              * bottom edge of the screen instead.
              */
-            offset -= win$2.innerHeight - box.top;
+            offset -= win$1.innerHeight - box.top;
         }
         /**
          * We don't include safe area here because that should already be

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.7.4-dev.11756888693.1b2f4d4a",
+  "version": "8.7.4-dev.11757000835.106af570",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",

package/dist/ionic/p-dc66e8cc.entry.js

@@ -1,4 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import{r as i,i as d,h as n,d as a}from"./p-4DxY6_gG.js";import{c as r}from"./p-Cdv0TJ6-.js";const g={xs:"(min-width: 0px)",sm:"(min-width: 576px)",md:"(min-width: 768px)",lg:"(min-width: 992px)",xl:"(min-width: 1200px)"},o=i=>void 0===i||""===i||!!window.matchMedia&&window.matchMedia(g[i]).matches,p="undefined"!=typeof window?window:void 0,t=p&&!!(p.CSS&&p.CSS.supports&&p.CSS.supports("--a: 0")),l=["","xs","sm","md","lg","xl"],e=class{constructor(d){i(this,d)}onResize(){d(this)}getColumns(i){let d;for(const n of l){const a=o(n),r=this[i+n.charAt(0).toUpperCase()+n.slice(1)];a&&void 0!==r&&(d=r)}return d}calculateSize(){const i=this.getColumns("size");if(!i||""===i)return;const d="auto"===i?"auto":t?`calc(calc(${i} / var(--ion-grid-columns, 12)) * 100%)`:i/12*100+"%";return{flex:`0 0 ${d}`,width:`${d}`,"max-width":`${d}`}}calculatePosition(i,d){const n=this.getColumns(i);if(!n)return;const a=t?`calc(calc(${n} / var(--ion-grid-columns, 12)) * 100%)`:n>0&&n<12?n/12*100+"%":"auto";return{[d]:a}}calculateOffset(i){return this.calculatePosition("offset",i?"margin-right":"margin-left")}calculatePull(i){return this.calculatePosition("pull",i?"left":"right")}calculatePush(i){return this.calculatePosition("push",i?"right":"left")}render(){const i="rtl"===document.dir,d=r(this);return n(a,{key:"18eb6aff60f43b28b7e157b7d6ce787635f25fa1",class:{[d]:!0},style:Object.assign(Object.assign(Object.assign(Object.assign({},this.calculateOffset(i)),this.calculatePull(i)),this.calculatePush(i)),this.calculateSize())},n("slot",{key:"3848d5cb525b42a550aa36a486f97b2e20240def"}))}};e.style=":host{-webkit-padding-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;width:100%;max-width:100%;min-height:1px}@media (min-width: 576px){:host{-webkit-padding-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px))}}@media (min-width: 768px){:host{-webkit-padding-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px))}}@media (min-width: 992px){:host{-webkit-padding-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px))}}@media (min-width: 1200px){:host{-webkit-padding-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px))}}";const m=class{constructor(d){i(this,d),this.fixed=!1}render(){const i=r(this);return n(a,{key:"f439594e1c4186e30d5b57bf3ca95c220df954fa",class:{[i]:!0,"grid-fixed":this.fixed}},n("slot",{key:"e8e01f0b46a05fb3220837fbfa9f161b086c06ad"}))}};m.style=":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 s=class{constructor(d){i(this,d)}render(){const i=r(this);return n(a,{key:"6f5dd5032485a69ddf9510e2e539a7ba90afda47",class:{[i]:!0}},n("slot",{key:"994dcbbc871d606b61ff5993fb29aa1fa349c483"}))}};s.style=":host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}";export{e as ion_col,m as ion_grid,s as ion_row}