Changing class names to avoid clash

Author: rugoncalves

core/src/components/col/col.scss

@@ -37,14 +37,13 @@
   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));
+: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));
 }
 
-:host([class^="ion-grid-offset-col-"]),
-:host([class*=" ion-grid-offset-col-"]) {
+: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))
   );
@@ -55,15 +54,15 @@
 $grid-col-number: 12;
 
 @for $i from 1 through $grid-col-number {
-  :host(.ion-grid-col-#{$i}) {
+  :host(.ion-grid-col--#{$i}) {
     --ion-grid-col-span: #{$i};
   }
 
-  :host(.ion-grid-order-col-#{$i}) {
+  :host(.ion-grid-order-col--#{$i}) {
     order: #{$i};
   }
 
-  :host(.ion-grid-offset-col-#{$i}) {
+  :host(.ion-grid-offset-col--#{$i}) {
     --ion-grid-col-margin: #{$i};
   }
 }

core/src/components/col/col.tsx

@@ -248,7 +248,7 @@ export class Col implements ComponentInterface {
       return;
     }
 
-    return `${className}-col-${valueNumber}`;
+    return `${className}-col--${valueNumber}`;
   }
 
   private getSizeClass(): string | undefined {