@ionic/core 8.7.4-dev.11756747371.11c148d6 → 8.7.4-dev.11756911316.113c35b0

package/hydrate/index.js

@@ -249,7 +249,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;
 
 /**
@@ -264,7 +264,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
 
@@ -964,10 +964,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;
@@ -980,9 +980,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);
           }
@@ -1190,8 +1190,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);
@@ -1225,7 +1225,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));
         }
@@ -1535,8 +1535,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);
     }
@@ -2097,7 +2097,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);
@@ -2244,7 +2244,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) ;
     {
@@ -2254,12 +2254,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$
     ) ;
@@ -2636,7 +2636,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);
@@ -2682,13 +2682,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}]`)
   );
 };
@@ -2866,7 +2866,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();
@@ -3160,10 +3160,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;
@@ -3173,9 +3173,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);
@@ -3202,7 +3202,7 @@ var getHostListenerTarget = (doc, elm, flags) => {
     return doc;
   }
   if (flags & 8 /* TargetWindow */) {
-    return win$1;
+    return win;
   }
   if (flags & 16 /* TargetBody */) {
     return doc.body;
@@ -3768,7 +3768,7 @@ var registerComponents = (Cstrs) => {
     });
   }
 };
-var win$1 = window;
+var win = window;
 var readTask = (cb) => {
   nextTick(() => {
     try {
@@ -3802,7 +3802,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) {
@@ -5003,8 +5003,8 @@ class AccordionGroup {
 }
 
 const getCapacitor = () => {
-    if (win$2 !== undefined) {
-        return win$2.Capacitor;
+    if (win$1 !== undefined) {
+        return win$1.Capacitor;
     }
     return undefined;
 };
@@ -7055,7 +7055,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.
      *
@@ -10584,11 +10584,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-],[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-],[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}.ion-grid-col-1{--ion-grid-col-span:1}.ion-grid-order-col-1{-ms-flex-order:1;order:1}.ion-grid-offset-col-1{--ion-grid-col-margin:1}.ion-grid-col-2{--ion-grid-col-span:2}.ion-grid-order-col-2{-ms-flex-order:2;order:2}.ion-grid-offset-col-2{--ion-grid-col-margin:2}.ion-grid-col-3{--ion-grid-col-span:3}.ion-grid-order-col-3{-ms-flex-order:3;order:3}.ion-grid-offset-col-3{--ion-grid-col-margin:3}.ion-grid-col-4{--ion-grid-col-span:4}.ion-grid-order-col-4{-ms-flex-order:4;order:4}.ion-grid-offset-col-4{--ion-grid-col-margin:4}.ion-grid-col-5{--ion-grid-col-span:5}.ion-grid-order-col-5{-ms-flex-order:5;order:5}.ion-grid-offset-col-5{--ion-grid-col-margin:5}.ion-grid-col-6{--ion-grid-col-span:6}.ion-grid-order-col-6{-ms-flex-order:6;order:6}.ion-grid-offset-col-6{--ion-grid-col-margin:6}.ion-grid-col-7{--ion-grid-col-span:7}.ion-grid-order-col-7{-ms-flex-order:7;order:7}.ion-grid-offset-col-7{--ion-grid-col-margin:7}.ion-grid-col-8{--ion-grid-col-span:8}.ion-grid-order-col-8{-ms-flex-order:8;order:8}.ion-grid-offset-col-8{--ion-grid-col-margin:8}.ion-grid-col-9{--ion-grid-col-span:9}.ion-grid-order-col-9{-ms-flex-order:9;order:9}.ion-grid-offset-col-9{--ion-grid-col-margin:9}.ion-grid-col-10{--ion-grid-col-span:10}.ion-grid-order-col-10{-ms-flex-order:10;order:10}.ion-grid-offset-col-10{--ion-grid-col-margin:10}.ion-grid-col-11{--ion-grid-col-span:11}.ion-grid-order-col-11{-ms-flex-order:11;order:11}.ion-grid-offset-col-11{--ion-grid-col-margin:11}.ion-grid-col-12{--ion-grid-col-span:12}.ion-grid-order-col-12{-ms-flex-order:12;order:12}.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.
@@ -10617,66 +10615,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,
@@ -10688,6 +10682,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"],
@@ -15760,8 +15760,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) {
@@ -15838,8 +15838,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;
@@ -17196,8 +17196,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
@@ -17302,7 +17302,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) {
@@ -22113,13 +22113,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 });
@@ -32968,7 +32968,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.
@@ -37071,7 +37071,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') {
@@ -37083,7 +37083,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