feat(col): modernizing Grid component

BREAKING.md

@@ -18,6 +18,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Button](#version-9x-button)
   - [Card](#version-9x-card)
   - [Chip](#version-9x-chip)
+  - [Grid](#version-9x-grid)
 
 <h2 id="version-9x-components">Components</h2>
 
@@ -32,3 +33,105 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 <h4 id="version-9x-chip">Chip</h4>
 
 - The `border-radius` of the `ios` and `md` chip now defaults to `10px` and `8px`, respectively, instead of `16px` in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"round"`, or override the `--border-radius` CSS variable to specify a different value.
+
+<h4 id="version-9x-grid">Grid</h4>
+
+- The properties `pull` and `push` have been deprecated and no longer work. A similar look can be achieved with the newly added property `order`.
+
+<h5>Example 1: Swap two columns</h5>
+
+**Version up to 8.x**
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col push="4">1</ion-col>
+    <ion-col pull="4">2</ion-col>
+    <ion-col>3</ion-col>
+  </ion-row>
+</ion-grid>
+```
+**Version 9.x+**
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col order="2">1</ion-col>
+    <ion-col order="1">2</ion-col>
+    <ion-col order="3">3</ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+<h5>Example 2: Reorder columns with specific sizes</h5>
+To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `size="3" pull="9"`:
+
+**Version up to 8.x**
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col push="3">1</ion-col>
+    <ion-col pull="9">2</ion-col>
+  </ion-row>
+</ion-grid>
+```
+**Version 9.x+**
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col order="2">1</ion-col>
+    <ion-col size="3" order="1">2</ion-col>
+  </ion-row>
+</ion-grid>
+```
+<h5>Example 3: Push</h5>
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col size="auto" push="1">
+      <div>ion-col push 1</div>
+    </ion-col>
+    <ion-col size="auto" push="1">
+      <div>ion-col push 1</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+**Version 9.x+**
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col size="auto" offset="1">
+      <div>ion-col size="auto" offset="1"</div>
+    </ion-col>
+    <ion-col size="auto">
+      <div>ion-col size="auto"</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+
+<h5>Example 4: Push and Pull</h5>
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col size="3" size-md="6" push="9" push-md="6">
+      <div>ion-col size="3" size-md="6" push="9" push-md="6"</div>
+    </ion-col>
+    <ion-col size="9" size-md="6" pull="3" pull-md="6">
+      <div>ion-col size="9" size-md="6" pull="3" pull-md="6"</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```
+**Version 9.x+**
+```html
+<ion-grid>
+  <ion-row>
+    <ion-col size="auto" order="2" order-md="2">
+      <div>ion-col size="auto" order="2" order-md="2"</div>
+    </ion-col>
+    <ion-col size="auto" order="1" order-md="1">
+      <div>ion-col size="auto" order="1" order-md="1"</div>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+```

core/api.txt

@@ -622,6 +622,12 @@ ion-col,prop,offsetMd,string | undefined,undefined,false,false
 ion-col,prop,offsetSm,string | undefined,undefined,false,false
 ion-col,prop,offsetXl,string | undefined,undefined,false,false
 ion-col,prop,offsetXs,string | undefined,undefined,false,false
+ion-col,prop,order,string | undefined,undefined,false,false
+ion-col,prop,orderLg,string | undefined,undefined,false,false
+ion-col,prop,orderMd,string | undefined,undefined,false,false
+ion-col,prop,orderSm,string | undefined,undefined,false,false
+ion-col,prop,orderXl,string | undefined,undefined,false,false
+ion-col,prop,orderXs,string | undefined,undefined,false,false
 ion-col,prop,pull,string | undefined,undefined,false,false
 ion-col,prop,pullLg,string | undefined,undefined,false,false
 ion-col,prop,pullMd,string | undefined,undefined,false,false
@@ -641,6 +647,7 @@ ion-col,prop,sizeSm,string | undefined,undefined,false,false
 ion-col,prop,sizeXl,string | undefined,undefined,false,false
 ion-col,prop,sizeXs,string | undefined,undefined,false,false
 ion-col,prop,theme,"ios" | "md" | "ionic",undefined,false,false
+ion-col,css-prop,--col-unit-size
 ion-col,css-prop,--ion-grid-column-padding
 ion-col,css-prop,--ion-grid-column-padding-lg
 ion-col,css-prop,--ion-grid-column-padding-md
@@ -2006,6 +2013,7 @@ ion-router-outlet,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-row,shadow
 ion-row,prop,mode,"ios" | "md",undefined,false,false
 ion-row,prop,theme,"ios" | "md" | "ionic",undefined,false,false
+ion-row,css-prop,--ion-grid-gap
 
 ion-searchbar,scoped
 ion-searchbar,prop,animated,boolean,false,false,false

core/src/components.d.ts

@@ -927,52 +927,88 @@ export namespace Components {
           * The amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available.
          */
         "offsetXs"?: string;
+        /**
+          * The order of the column, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "order"?: string;
+        /**
+          * The order of the column for lg screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderLg"?: string;
+        /**
+          * The order of the column for md screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderMd"?: string;
+        /**
+          * The order of the column for sm screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderSm"?: string;
+        /**
+          * The order of the column for xl screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderXl"?: string;
+        /**
+          * The order of the column for xs screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderXs"?: string;
         /**
           * The amount to pull the column, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pull"?: string;
         /**
           * The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullLg"?: string;
         /**
           * The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullMd"?: string;
         /**
           * The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullSm"?: string;
         /**
           * The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullXl"?: string;
         /**
           * The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullXs"?: string;
         /**
           * The amount to push the column, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "push"?: string;
         /**
           * The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushLg"?: string;
         /**
           * The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushMd"?: string;
         /**
           * The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushSm"?: string;
         /**
           * The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushXl"?: string;
         /**
           * The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushXs"?: string;
         /**
@@ -6861,52 +6897,88 @@ declare namespace LocalJSX {
           * The amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available.
          */
         "offsetXs"?: string;
+        /**
+          * The order of the column, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "order"?: string;
+        /**
+          * The order of the column for lg screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderLg"?: string;
+        /**
+          * The order of the column for md screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderMd"?: string;
+        /**
+          * The order of the column for sm screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderSm"?: string;
+        /**
+          * The order of the column for xl screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderXl"?: string;
+        /**
+          * The order of the column for xs screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderXs"?: string;
         /**
           * The amount to pull the column, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pull"?: string;
         /**
           * The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullLg"?: string;
         /**
           * The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullMd"?: string;
         /**
           * The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullSm"?: string;
         /**
           * The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullXl"?: string;
         /**
           * The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullXs"?: string;
         /**
           * The amount to push the column, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "push"?: string;
         /**
           * The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushLg"?: string;
         /**
           * The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushMd"?: string;
         /**
           * The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushSm"?: string;
         /**
           * The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushXl"?: string;
         /**
           * The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushXs"?: string;
         /**

core/src/components/col/col.scss

@@ -4,6 +4,13 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --col-unit-size: The size of each Column unit.
+   */
+  --col-unit-size: calc(
+    (100% - (var(--ion-grid-columns, 12) - 1) * var(--ion-grid-gap, 0px)) / var(--ion-grid-columns, 12)
+  );
+
   /**
    * @prop --ion-grid-columns: The number of total Columns in the Grid
    * @prop --ion-grid-column-padding: Padding for the Column
@@ -20,10 +27,55 @@
 
   position: relative;
 
-  flex-basis: 0;
-  flex-grow: 1;
+  flex: 1;
 
-  width: 100%;
-  max-width: 100%;
   min-height: 1px; // Prevent columns from collapsing when empty
+
+  overflow: auto;
+}
+
+:host(.ion-grid-col-auto) {
+  flex: 0 0 auto;
+}
+
+:host([class^="ion-grid-col--"]),
+:host([class*=" ion-grid-col--"]) {
+  flex: 0 0
+    calc(var(--ion-grid-col-span) * var(--col-unit-size) + (var(--ion-grid-col-span) - 1) * var(--ion-grid-gap, 0px));
+
+  max-width: calc(
+    var(--ion-grid-col-span) * var(--col-unit-size) + (var(--ion-grid-col-span) - 1) * var(--ion-grid-gap, 0px)
+  );
+}
+
+:host([class^="ion-grid-offset-col--"]),
+:host([class*=" ion-grid-offset-col--"]) {
+  --margin-calc: calc(
+    var(--col-unit-size) * var(--ion-grid-col-margin) + (var(--ion-grid-gap, 0px) * var(--ion-grid-col-margin))
+  );
+
+  @include margin-horizontal(var(--margin-calc), 0);
+}
+
+/* 
+ * While the number of columns can be customized, we generate
+ * a default set of classes for 12 columns. In the future, this
+ * will be configurable at build time as Ionic becomes more modular.
+ * For now, 12 columns is a practical default. Developers who need
+ * more columns can override or extend these styles as needed.
+ */
+$grid-col-number: 12;
+
+@for $i from 1 through $grid-col-number {
+  :host(.ion-grid-col--#{$i}) {
+    --ion-grid-col-span: #{$i};
+  }
+
+  :host(.ion-grid-order-col--#{$i}) {
+    order: #{$i};
+  }
+
+  :host(.ion-grid-offset-col--#{$i}) {
+    --ion-grid-col-margin: #{$i};
+  }
 }