@ionic/core 8.7.4-dev.11757000835.106af570 → 8.7.4-dev.11757003456.1d9738d5

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-09-04T15:49:44",
+  "timestamp": "2025-09-04T16:33:20",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.36.2",
@@ -7169,7 +7169,7 @@
     },
     {
       "filePath": "src/components/card-content/card-content.tsx",
-      "encapsulation": "none",
+      "encapsulation": "shadow",
       "tag": "ion-card-content",
       "docs": "",
       "docsTags": [
@@ -9178,162 +9178,6 @@
           "getter": false,
           "setter": false
         },
-        {
-          "name": "order",
-          "type": "string | undefined",
-          "complexType": {
-            "original": "string",
-            "resolved": "string | undefined",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "order",
-          "reflectToAttr": false,
-          "docs": "The order of the column, in terms of where the column should position itself in the columns renderer.\nIf no value is passed, the column order implicit value will be the order in the html structure.",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            },
-            {
-              "type": "undefined"
-            }
-          ],
-          "optional": true,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "orderLg",
-          "type": "string | undefined",
-          "complexType": {
-            "original": "string",
-            "resolved": "string | undefined",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "order-lg",
-          "reflectToAttr": false,
-          "docs": "The order of the column for lg screens, in terms of where the column should position itself in the columns renderer.\nIf no value is passed, the column order implicit value will be the order in the html structure.",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            },
-            {
-              "type": "undefined"
-            }
-          ],
-          "optional": true,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "orderMd",
-          "type": "string | undefined",
-          "complexType": {
-            "original": "string",
-            "resolved": "string | undefined",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "order-md",
-          "reflectToAttr": false,
-          "docs": "The order of the column for md screens, in terms of where the column should position itself in the columns renderer.\nIf no value is passed, the column order implicit value will be the order in the html structure.",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            },
-            {
-              "type": "undefined"
-            }
-          ],
-          "optional": true,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "orderSm",
-          "type": "string | undefined",
-          "complexType": {
-            "original": "string",
-            "resolved": "string | undefined",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "order-sm",
-          "reflectToAttr": false,
-          "docs": "The order of the column for sm screens, in terms of where the column should position itself in the columns renderer.\nIf no value is passed, the column order implicit value will be the order in the html structure.",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            },
-            {
-              "type": "undefined"
-            }
-          ],
-          "optional": true,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "orderXl",
-          "type": "string | undefined",
-          "complexType": {
-            "original": "string",
-            "resolved": "string | undefined",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "order-xl",
-          "reflectToAttr": false,
-          "docs": "The order of the column for xl screens, in terms of where the column should position itself in the columns renderer.\nIf no value is passed, the column order implicit value will be the order in the html structure.",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            },
-            {
-              "type": "undefined"
-            }
-          ],
-          "optional": true,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "orderXs",
-          "type": "string | undefined",
-          "complexType": {
-            "original": "string",
-            "resolved": "string | undefined",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "order-xs",
-          "reflectToAttr": false,
-          "docs": "The order of the column for xs screens, in terms of where the column should position itself in the columns renderer.\nIf no value is passed, the column order implicit value will be the order in the html structure.",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            },
-            {
-              "type": "undefined"
-            }
-          ],
-          "optional": true,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
         {
           "name": "pull",
           "type": "string | undefined",
@@ -9346,13 +9190,7 @@
           "attr": "pull",
           "reflectToAttr": false,
           "docs": "The amount to pull the column, in terms of how many columns it should shift to the start of\nthe total available.",
-          "docsTags": [
-            {
-              "name": "deprecated",
-              "text": "Use the combination of `size` and `order` properties to achieve the same effect."
-            }
-          ],
-          "deprecation": "Use the combination of `size` and `order` properties to achieve the same effect.",
+          "docsTags": [],
           "values": [
             {
               "type": "string"
@@ -9378,13 +9216,7 @@
           "attr": "pull-lg",
           "reflectToAttr": false,
           "docs": "The amount to pull the column for lg screens, in terms of how many columns it should shift\nto the start of the total available.",
-          "docsTags": [
-            {
-              "name": "deprecated",
-              "text": "Use the combination of `size` and `order` properties to achieve the same effect."
-            }
-          ],
-          "deprecation": "Use the combination of `size` and `order` properties to achieve the same effect.",
+          "docsTags": [],
           "values": [
             {
               "type": "string"
@@ -9410,13 +9242,7 @@
           "attr": "pull-md",
           "reflectToAttr": false,
           "docs": "The amount to pull the column for md screens, in terms of how many columns it should shift\nto the start of the total available.",
-          "docsTags": [
-            {
-              "name": "deprecated",
-              "text": "Use the combination of `size` and `order` properties to achieve the same effect."
-            }
-          ],
-          "deprecation": "Use the combination of `size` and `order` properties to achieve the same effect.",
+          "docsTags": [],
           "values": [
             {
               "type": "string"
@@ -9442,13 +9268,7 @@
           "attr": "pull-sm",
           "reflectToAttr": false,
           "docs": "The amount to pull the column for sm screens, in terms of how many columns it should shift\nto the start of the total available.",
-          "docsTags": [
-            {
-              "name": "deprecated",
-              "text": "Use the combination of `size` and `order` properties to achieve the same effect."
-            }
-          ],
-          "deprecation": "Use the combination of `size` and `order` properties to achieve the same effect.",
+          "docsTags": [],
           "values": [
             {
               "type": "string"
@@ -9474,13 +9294,7 @@
           "attr": "pull-xl",
           "reflectToAttr": false,
           "docs": "The amount to pull the column for xl screens, in terms of how many columns it should shift\nto the start of the total available.",
-          "docsTags": [
-            {
-              "name": "deprecated",
-              "text": "Use the combination of `size` and `order` properties to achieve the same effect."
-            }
-          ],
-          "deprecation": "Use the combination of `size` and `order` properties to achieve the same effect.",
+          "docsTags": [],
           "values": [
             {
               "type": "string"
@@ -9506,13 +9320,7 @@
           "attr": "pull-xs",
           "reflectToAttr": false,
           "docs": "The amount to pull the column for xs screens, in terms of how many columns it should shift\nto the start of the total available.",
-          "docsTags": [
-            {
-              "name": "deprecated",
-              "text": "Use the combination of `size` and `order` properties to achieve the same effect."
-            }
-          ],
-          "deprecation": "Use the combination of `size` and `order` properties to achieve the same effect.",
+          "docsTags": [],
           "values": [
             {
               "type": "string"
@@ -9538,13 +9346,7 @@
           "attr": "push",
           "reflectToAttr": false,
           "docs": "The amount to push the column, in terms of how many columns it should shift to the end\nof the total available.",
-          "docsTags": [
-            {
-              "name": "deprecated",
-              "text": "Use the combination of `size` and `order` properties to achieve the same effect."
-            }
-          ],
-          "deprecation": "Use the combination of `size` and `order` properties to achieve the same effect.",
+          "docsTags": [],
           "values": [
             {
               "type": "string"
@@ -9570,13 +9372,7 @@
           "attr": "push-lg",
           "reflectToAttr": false,
           "docs": "The amount to push the column for lg screens, in terms of how many columns it should shift\nto the end of the total available.",
-          "docsTags": [
-            {
-              "name": "deprecated",
-              "text": "Use the combination of `size` and `order` properties to achieve the same effect."
-            }
-          ],
-          "deprecation": "Use the combination of `size` and `order` properties to achieve the same effect.",
+          "docsTags": [],
           "values": [
             {
               "type": "string"
@@ -9602,13 +9398,7 @@
           "attr": "push-md",
           "reflectToAttr": false,
           "docs": "The amount to push the column for md screens, in terms of how many columns it should shift\nto the end of the total available.",
-          "docsTags": [
-            {
-              "name": "deprecated",
-              "text": "Use the combination of `size` and `order` properties to achieve the same effect."
-            }
-          ],
-          "deprecation": "Use the combination of `size` and `order` properties to achieve the same effect.",
+          "docsTags": [],
           "values": [
             {
               "type": "string"
@@ -9634,13 +9424,7 @@
           "attr": "push-sm",
           "reflectToAttr": false,
           "docs": "The amount to push the column for sm screens, in terms of how many columns it should shift\nto the end of the total available.",
-          "docsTags": [
-            {
-              "name": "deprecated",
-              "text": "Use the combination of `size` and `order` properties to achieve the same effect."
-            }
-          ],
-          "deprecation": "Use the combination of `size` and `order` properties to achieve the same effect.",
+          "docsTags": [],
           "values": [
             {
               "type": "string"
@@ -9666,13 +9450,7 @@
           "attr": "push-xl",
           "reflectToAttr": false,
           "docs": "The amount to push the column for xl screens, in terms of how many columns it should shift\nto the end of the total available.",
-          "docsTags": [
-            {
-              "name": "deprecated",
-              "text": "Use the combination of `size` and `order` properties to achieve the same effect."
-            }
-          ],
-          "deprecation": "Use the combination of `size` and `order` properties to achieve the same effect.",
+          "docsTags": [],
           "values": [
             {
               "type": "string"
@@ -9698,13 +9476,7 @@
           "attr": "push-xs",
           "reflectToAttr": false,
           "docs": "The amount to push the column for xs screens, in terms of how many columns it should shift\nto the end of the total available.",
-          "docsTags": [
-            {
-              "name": "deprecated",
-              "text": "Use the combination of `size` and `order` properties to achieve the same effect."
-            }
-          ],
-          "deprecation": "Use the combination of `size` and `order` properties to achieve the same effect.",
+          "docsTags": [],
           "values": [
             {
               "type": "string"
@@ -9911,11 +9683,6 @@
         }
       ],
       "styles": [
-        {
-          "name": "--col-unit-size",
-          "annotation": "prop",
-          "docs": "The size of each Column unit."
-        },
         {
           "name": "--ion-grid-column-padding",
           "annotation": "prop",
@@ -15013,7 +14780,7 @@
     },
     {
       "filePath": "src/components/input/input.tsx",
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "tag": "ion-input",
       "docs": "",
       "docsTags": [
@@ -16946,7 +16713,7 @@
     },
     {
       "filePath": "src/components/input-otp/input-otp.tsx",
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "tag": "ion-input-otp",
       "docs": "",
       "docsTags": [],
@@ -40616,7 +40383,7 @@
     },
     {
       "filePath": "src/components/textarea/textarea.tsx",
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "tag": "ion-textarea",
       "docs": "",
       "docsTags": [

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

@@ -94,7 +94,7 @@ const CardContent = class {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '9e0a23306b43bafffd82900a4da7e020fe45c04f', class: {
+        return (h(Host, { key: '02e1dcb024098b03783235cdcf0311ece428a9a6', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`card-content-${theme}`]: true,

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

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, i as forceUpdate, f as printIonWarning, h, d as Host, g as getElement } from './index-4DxY6_gG.js';
+import { r as registerInstance, i as forceUpdate, h, d as Host } from './index-4DxY6_gG.js';
 import { c as getIonTheme } from './ionic-global-Dtd5Ma5B.js';
 
 const SIZE_TO_MEDIA = {
@@ -25,9 +25,11 @@ const matchBreakpoint = (breakpoint) => {
     return false;
 };
 
-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 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 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'];
 const Col = class {
     constructor(hostRef) {
@@ -53,62 +55,66 @@ const Col = class {
         // increase in size and we want to return the largest match
         return matched;
     }
-    getStyleClass(property, className, acceptsAuto = false) {
-        const colPropertyValue = this.getColumns(property);
+    calculateSize() {
+        const columns = this.getColumns('size');
         // 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 (!colPropertyValue || colPropertyValue === '') {
+        if (!columns || columns === '') {
             return;
         }
-        if (acceptsAuto && colPropertyValue === 'auto') {
-            return 'ion-grid-col-auto';
-        }
-        const valueNumber = parseInt(colPropertyValue);
-        if (isNaN(valueNumber)) {
+        // 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) {
             return;
         }
-        return `${className}-col-${valueNumber}`;
+        // 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,
+        };
     }
-    getSizeClass() {
-        return this.getStyleClass('size', 'ion-grid', true);
+    calculateOffset(isRTL) {
+        return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');
     }
-    getOrderClass() {
-        return this.getStyleClass('order', 'ion-grid-order');
+    calculatePull(isRTL) {
+        return this.calculatePosition('pull', isRTL ? 'left' : 'right');
     }
-    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);
-        }
+    calculatePush(isRTL) {
+        return this.calculatePosition('push', isRTL ? 'right' : 'left');
     }
     render() {
+        const isRTL = document.dir === 'rtl';
         const theme = getIonTheme(this);
-        const colSize = this.getSizeClass();
-        const colOrder = this.getOrderClass();
-        const colOffset = this.getOffsetClass();
-        return (h(Host, { key: '13acd2681e3e16bbf196eb3ca8ad01230fbb0df8', class: {
+        return (h(Host, { key: '18eb6aff60f43b28b7e157b7d6ce787635f25fa1', class: {
                 [theme]: true,
-                [`${colSize}`]: colSize !== undefined,
-                [`${colOrder}`]: colOrder !== undefined,
-                [`${colOffset}`]: colOffset !== undefined,
-            } }, h("slot", { key: '525e1f5b3102009f16ae985a838f68f440eea7e4' })));
+            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '3848d5cb525b42a550aa36a486f97b2e20240def' })));
     }
-    get el() { return getElement(this); }
 };
 Col.style = colCss;
 
@@ -132,7 +138,7 @@ const Grid = class {
 };
 Grid.style = gridCss;
 
-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)}";
+const rowCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}";
 
 const Row = class {
     constructor(hostRef) {

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

@@ -942,6 +942,9 @@ const Datetime = class {
         this.toggleMonthAndYearView = () => {
             this.showMonthAndYear = !this.showMonthAndYear;
         };
+        this.asBlob = (icon) => new Blob([Uint8Array.from(icon.split("").map(function (c) {
+                return c.charCodeAt(0);
+            }))], { type: "image/svg+xml" });
     }
     formatOptionsChanged() {
         const { el, formatOptions, presentation } = this;
@@ -1533,6 +1536,22 @@ const Datetime = class {
                 [`wheel-order-${columnOrder}`]: true,
             } }, this.renderWheelPicker(forcePresentation)));
     }
+    getIconProps(icon) {
+        if (typeof icon === 'string' && icon.trim().startsWith('data:image/svg+xml')) {
+            // Extract and decode the SVG string from the data URL
+            const svgString = decodeURIComponent(atob(icon.split(',')[1])
+                .split('')
+                .map(function (c) {
+                return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+            })
+                .join(''));
+            const url = URL.createObjectURL(this.asBlob(svgString));
+            console.log(url);
+            return { src: url };
+        }
+        // Ionicons icon name/object or undefined
+        return { icon };
+    }
     /**
      * Grid Render Methods
      */
@@ -1541,12 +1560,11 @@ const Datetime = class {
         const prevMonthDisabled = disabled || isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
         const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
         // don't use the inheritAttributes util because it removes dir from the host, and we still need that
-        const hostDir = this.el.getAttribute('dir') || undefined;
         return (h("div", { class: "calendar-header" }, h("div", { class: "calendar-action-buttons" }, h("div", { class: "calendar-month-year" }, h("button", { class: {
                 'calendar-month-year-toggle': true,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }, part: "month-year-button", disabled: disabled, "aria-label": this.showMonthAndYear ? 'Hide year picker' : 'Show year picker', onClick: () => this.toggleMonthAndYearView() }, h("span", { id: "toggle-wrapper" }, getMonthAndYear(this.locale, this.workingParts), theme !== 'ionic' && (h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? datetimeExpandedIcon : datetimeCollapsedIcon, lazy: false, flipRtl: true }))), theme === 'md' && h("ion-ripple-effect", null))), h("div", { class: "calendar-next-prev" }, h("ion-buttons", null, h("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: datetimePreviousIcon, lazy: false, flipRtl: true })), h("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: datetimeNextIcon, lazy: false, flipRtl: true }))))), h("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, getDaysOfWeek(this.locale, theme, this.firstDayOfWeek % 7).map((d) => {
+            }, part: "month-year-button", disabled: disabled, "aria-label": this.showMonthAndYear ? 'Hide year picker' : 'Show year picker', onClick: () => this.toggleMonthAndYearView() }, h("span", { id: "toggle-wrapper" }, getMonthAndYear(this.locale, this.workingParts), theme !== 'ionic' && (h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? datetimeExpandedIcon : datetimeCollapsedIcon, lazy: false, flipRtl: true }))), theme === 'md' && h("ion-ripple-effect", null))), h("div", { class: "calendar-next-prev" }, h("ion-buttons", null, h("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, h("ion-icon", Object.assign({ "aria-hidden": "true", slot: "icon-only", lazy: false, flipRtl: true }, this.getIconProps(datetimePreviousIcon)))), h("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, h("ion-icon", Object.assign({ "aria-hidden": "true", slot: "icon-only", lazy: false, flipRtl: true }, this.getIconProps(datetimeNextIcon))))))), h("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, getDaysOfWeek(this.locale, theme, this.firstDayOfWeek % 7).map((d) => {
             return h("div", { class: "day-of-week" }, d);
         }))));
     }
@@ -1930,7 +1948,7 @@ const Datetime = class {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: '40f8732998d123ef5c700080cc423bb8310654d5', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: '1cab6e719cb32cd1cb8082f228ce26346ede22f1', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [theme]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1940,7 +1958,7 @@ const Datetime = class {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: '0a323aa4e3cd9c96495d0dc3bf7985c8723f5e8c', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(theme)));
+            })) }, h("div", { key: '53e49d7bb6b8a99b7e485bf4c75acda59f45c8b1', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(theme)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {