@ionic/core 8.7.4-dev.11757083062.19f546ed → 8.7.4-dev.11757430138.13649dec

package/dist/collection/components/checkbox/checkbox.ionic.css

@@ -4,7 +4,9 @@
  * @param pixels - Value in pixels to be converted (i.e. px)
  * @param context (optional) - Baseline value
  */
-/**
+/*
+Do not edit directly, this file was auto-generated.
+*/ /**
  * A heuristic that applies CSS to tablet
  * viewports.
  *
@@ -285,19 +287,19 @@ input {
    * @prop --focus-ring-width: Width of the focus ring
    * @prop --focus-ring-offset: Offset of the focus ring
    */
-  --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
-  --border-style: var(--token-border-style-solid, solid);
-  --border-color: var(--token-primitives-neutral-800, #626262);
-  --checkmark-width: var(--token-scale-400, 16px);
+  --border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
+  --border-style: var(--ion-border-style-solid, solid);
+  --border-color: var(--ion-primitives-neutral-800, #626262);
+  --checkmark-width: var(--ion-scale-400, 16px);
   --checkmark-height: var(--checkmark-width);
-  --focus-ring-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
-  --focus-ring-width: var(--token-border-size-050, var(--token-scale-050, 2px));
-  --focus-ring-offset: var(--token-space-050, var(--token-scale-050, 2px));
-  --size: var(--token-scale-600, 24px);
-  --checkbox-background: var(--token-bg-input-default, var(--token-primitives-base-white, #ffffff));
-  --checkbox-background-checked: var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef))));
-  --border-color-checked: var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)));
-  --checkmark-color: var(--token-primitives-base-white, #ffffff);
+  --focus-ring-color: var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
+  --focus-ring-width: var(--ion-border-size-050, var(--ion-scale-050, 2px));
+  --focus-ring-offset: var(--ion-space-050, var(--ion-scale-050, 2px));
+  --size: var(--ion-scale-600, 24px);
+  --checkbox-background: var(--ion-bg-input-default, var(--ion-primitives-base-white, #ffffff));
+  --checkbox-background-checked: var(--ion-bg-primary-base-default, var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef))));
+  --border-color-checked: var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)));
+  --checkmark-color: var(--ion-primitives-base-white, #ffffff);
   --transition: none;
   z-index: 2;
 }
@@ -307,7 +309,7 @@ input {
   top: 50%;
   position: absolute;
   height: 100%;
-  min-height: var(--token-scale-1200, 48px);
+  min-height: var(--ion-scale-1200, 48px);
   transform: translateY(-50%);
   content: "";
   cursor: pointer;
@@ -318,21 +320,21 @@ input {
 }
 
 .label-text-wrapper {
-  color: var(--token-primitives-neutral-1200, #242424);
+  color: var(--ion-primitives-neutral-1200, #242424);
 }
 
 :host(.in-item) .label-text-wrapper {
-  margin-top: var(--token-space-250, var(--token-scale-250, 10px));
-  margin-bottom: var(--token-space-250, var(--token-scale-250, 10px));
+  margin-top: var(--ion-space-250, var(--ion-scale-250, 10px));
+  margin-bottom: var(--ion-space-250, var(--ion-scale-250, 10px));
 }
 
 :host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper {
-  margin-top: var(--token-space-250, var(--token-scale-250, 10px));
-  margin-bottom: var(--token-space-400, var(--token-scale-400, 16px));
+  margin-top: var(--ion-space-250, var(--ion-scale-250, 10px));
+  margin-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
 }
 
 :host(.in-item.checkbox-label-placement-stacked) .native-wrapper {
-  margin-bottom: var(--token-space-250, var(--token-scale-250, 10px));
+  margin-bottom: var(--ion-space-250, var(--ion-scale-250, 10px));
 }
 
 input {
@@ -378,20 +380,20 @@ input {
 }
 
 .checkbox-bottom {
-  font-size: var(--token-font-size-350, 0.875rem);
-  font-weight: var(--token-font-weight-regular, 400);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
+  font-size: var(--ion-font-size-350, 0.875rem);
+  font-weight: var(--ion-font-weight-regular, 400);
+  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
+  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
   text-decoration: none;
   text-transform: none;
 }
 
 .checkbox-bottom .error-text {
-  color: var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222));
+  color: var(--ion-semantics-danger-800, var(--ion-primitives-red-800, #bf2222));
 }
 
 .checkbox-bottom .helper-text {
-  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
+  color: var(--ion-text-subtlest, var(--ion-primitives-neutral-800, #626262));
 }
 
 :host(.checkbox-label-placement-start) .label-text-wrapper {
@@ -402,8 +404,8 @@ input {
    */
   -webkit-margin-start: 0;
   margin-inline-start: 0;
-  -webkit-margin-end: var(--token-space-400, var(--token-scale-400, 16px));
-  margin-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
+  -webkit-margin-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  margin-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
 }
 
 /**
@@ -412,8 +414,8 @@ input {
  * when the label sits at the end.
  */
 :host(.checkbox-label-placement-end) .label-text-wrapper {
-  -webkit-margin-start: var(--token-space-400, var(--token-scale-400, 16px));
-  margin-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
+  -webkit-margin-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  margin-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
@@ -426,8 +428,8 @@ input {
    */
   -webkit-margin-start: 0;
   margin-inline-start: 0;
-  -webkit-margin-end: var(--token-space-400, var(--token-scale-400, 16px));
-  margin-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
+  -webkit-margin-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  margin-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
 }
 
 :host(.checkbox-label-placement-stacked) .label-text-wrapper {
@@ -439,7 +441,7 @@ input {
    */
   margin-left: 0;
   margin-right: 0;
-  margin-bottom: var(--token-space-400, var(--token-scale-400, 16px));
+  margin-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
   /**
    * Label text should not extend
    * beyond the bounds of the checkbox.
@@ -448,7 +450,7 @@ input {
 }
 
 :host(.checkbox-size-small) {
-  --size: var(--token-scale-400, 16px);
+  --size: var(--ion-scale-400, 16px);
 }
 
 :host(.checkbox-checked) .native-wrapper,
@@ -458,12 +460,12 @@ input {
 }
 
 :host(.ion-invalid) {
-  --focus-ring-color: var(--token-border-focus-error, var(--token-primitives-red-400, #faa1a1));
+  --focus-ring-color: var(--ion-border-focus-error, var(--ion-primitives-red-400, #faa1a1));
 }
 
 :host(.ion-invalid:not(.checkbox-checked)) .native-wrapper,
 :host(.ion-invalid:not(.checkbox-checked).checkbox-disabled) .native-wrapper {
-  border-color: var(--token-border-danger-default, var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222)));
+  border-color: var(--ion-border-danger-default, var(--ion-semantics-danger-800, var(--ion-primitives-red-800, #bf2222)));
 }
 
 :host(.checkbox-disabled) .native-wrapper:after {
@@ -472,7 +474,7 @@ input {
   top: 0;
   bottom: 0;
   position: absolute;
-  background-color: var(--token-state-disabled, rgba(255, 255, 255, 0.6));
+  background-color: var(--ion-state-disabled, rgba(255, 255, 255, 0.6));
   content: "";
   pointer-events: none;
   right: unset;
@@ -484,56 +486,56 @@ input {
 }
 
 :host(.checkbox-disabled.checkbox-checked) .native-wrapper {
-  border-width: var(--token-border-size-0, var(--token-scale-0, 0px));
-  background-color: var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef))));
+  border-width: var(--ion-border-size-0, var(--ion-scale-0, 0px));
+  background-color: var(--ion-bg-primary-base-default, var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef))));
 }
 
 @media (any-hover: hover) {
   :host(:hover) .native-wrapper {
-    background-color: var(--token-primitives-neutral-100, #f5f5f5);
+    background-color: var(--ion-primitives-neutral-100, #f5f5f5);
   }
   :host(:hover.checkbox-checked) .native-wrapper,
   :host(:hover.checkbox-checked) .checkbox-icon,
   :host(:hover.checkbox-indeterminate) .native-wrapper,
   :host(:hover.checkbox-indeterminate) .checkbox-icon {
-    background-color: var(--token-semantics-primary-800, var(--token-primitives-blue-800, #0f54da));
+    background-color: var(--ion-semantics-primary-800, var(--ion-primitives-blue-800, #0f54da));
   }
 }
 :host(.ion-focused:not(.checkbox-disabled)) .native-wrapper {
   outline-offset: var(--focus-ring-width);
-  outline: var(--focus-ring-width) var(--token-border-style-solid, solid) var(--focus-ring-color);
+  outline: var(--focus-ring-width) var(--ion-border-style-solid, solid) var(--focus-ring-color);
 }
 
 :host(.ion-activated) .native-wrapper {
-  background-color: var(--token-bg-input-press, var(--token-primitives-neutral-200, #efefef));
+  background-color: var(--ion-bg-input-press, var(--ion-primitives-neutral-200, #efefef));
 }
 
 :host(.ion-activated.checkbox-checked) .native-wrapper,
 :host(.ion-activated.checkbox-checked) .checkbox-icon,
 :host(.ion-activated.checkbox-indeterminate) .native-wrapper,
 :host(.ion-activated.checkbox-indeterminate) .checkbox-icon {
-  background-color: var(--token-bg-primary-base-press, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3)));
+  background-color: var(--ion-bg-primary-base-press, var(--ion-semantics-primary-900, var(--ion-primitives-blue-900, #0d4bc3)));
 }
 
 :host(.ion-activated.ion-invalid:not(.checkbox-checked)) {
-  background-color: var(--token-bg-input-press, var(--token-primitives-neutral-200, #efefef));
+  background-color: var(--ion-bg-input-press, var(--ion-primitives-neutral-200, #efefef));
 }
 :host(.ion-activated.ion-invalid:not(.checkbox-checked)) .native-wrapper {
-  border-color: var(--token-border-danger-press, var(--token-semantics-danger-1000, var(--token-primitives-red-1000, #761515)));
+  border-color: var(--ion-border-danger-press, var(--ion-semantics-danger-1000, var(--ion-primitives-red-1000, #761515)));
 }
 
 :host(.checkbox-shape-soft) {
-  --border-radius: var(--token-border-radius-100, var(--token-scale-100, 4px));
+  --border-radius: var(--ion-border-radius-100, var(--ion-scale-100, 4px));
 }
 
 :host(.checkbox-size-small.checkbox-shape-soft) {
-  --border-radius: var(--token-border-radius-025, var(--token-scale-050, 2px));
+  --border-radius: var(--ion-border-radius-025, var(--ion-scale-050, 2px));
 }
 
 :host(.checkbox-shape-rectangular) {
-  --border-radius: var(--token-border-radius-0, var(--token-scale-0, 0px));
+  --border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
 }
 
 .checkbox-wrapper {
-  min-height: var(--token-scale-1200, 48px);
+  min-height: var(--ion-scale-1200, 48px);
 }

package/dist/collection/components/chip/chip.ionic.css

@@ -4,7 +4,9 @@
  * @param pixels - Value in pixels to be converted (i.e. px)
  * @param context (optional) - Baseline value
  */
-/**
+/*
+Do not edit directly, this file was auto-generated.
+*/ /**
  * A heuristic that applies CSS to tablet
  * viewports.
  *
@@ -111,41 +113,41 @@
    * @prop --focus-ring-color: Color of the focus ring
    * @prop --focus-ring-width: Width of the focus ring
    */
-  --focus-ring-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
-  --focus-ring-width: var(--token-border-size-050, var(--token-scale-050, 2px));
-  -webkit-padding-start: var(--token-space-200, var(--token-scale-200, 8px));
-  padding-inline-start: var(--token-space-200, var(--token-scale-200, 8px));
-  -webkit-padding-end: var(--token-space-200, var(--token-scale-200, 8px));
-  padding-inline-end: var(--token-space-200, var(--token-scale-200, 8px));
-  padding-top: var(--token-space-150, var(--token-scale-150, 6px));
-  padding-bottom: var(--token-space-150, var(--token-scale-150, 6px));
+  --focus-ring-color: var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
+  --focus-ring-width: var(--ion-border-size-050, var(--ion-scale-050, 2px));
+  -webkit-padding-start: var(--ion-space-200, var(--ion-scale-200, 8px));
+  padding-inline-start: var(--ion-space-200, var(--ion-scale-200, 8px));
+  -webkit-padding-end: var(--ion-space-200, var(--ion-scale-200, 8px));
+  padding-inline-end: var(--ion-space-200, var(--ion-scale-200, 8px));
+  padding-top: var(--ion-space-150, var(--ion-scale-150, 6px));
+  padding-bottom: var(--ion-space-150, var(--ion-scale-150, 6px));
   border-radius: var(--border-radius);
-  font-size: var(--token-font-size-300, 0.75rem);
-  font-weight: var(--token-font-weight-medium, 500);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
+  font-size: var(--ion-font-size-300, 0.75rem);
+  font-weight: var(--ion-font-weight-medium, 500);
+  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
+  line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
   text-decoration: none;
   text-transform: none;
-  gap: var(--token-space-100, var(--token-scale-100, 4px));
-  line-height: var(--token-font-line-height-full, 100%);
+  gap: var(--ion-space-100, var(--ion-scale-100, 4px));
+  line-height: var(--ion-font-line-height-full, 100%);
 }
 
 :host(.chip-outline) {
-  border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
-  border-style: var(--token-border-style-solid, solid);
+  border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
+  border-style: var(--ion-border-style-solid, solid);
 }
 
 :host(.ion-focused) {
-  outline-offset: var(--token-border-size-050, var(--token-scale-050, 2px));
-  outline: var(--token-border-size-050, var(--token-scale-050, 2px)) var(--token-border-style-solid, solid) var(--focus-ring-color);
+  outline-offset: var(--ion-border-size-050, var(--ion-scale-050, 2px));
+  outline: var(--ion-border-size-050, var(--ion-scale-050, 2px)) var(--ion-border-style-solid, solid) var(--focus-ring-color);
 }
 
 @media (any-hover: hover) {
   :host(.chip-subtle:hover) {
-    --background: var(--token-primitives-neutral-200, #efefef);
+    --background: var(--ion-primitives-neutral-200, #efefef);
   }
   :host(.chip-bold:hover) {
-    --background: var(--token-primitives-neutral-1100, #292929);
+    --background: var(--ion-primitives-neutral-1100, #292929);
   }
   :host(.chip-subtle.ion-color:hover) {
     background: var(--ion-color-subtle-tint);
@@ -160,53 +162,53 @@
   top: 0;
   bottom: 0;
   position: absolute;
-  background-color: var(--token-state-disabled, rgba(255, 255, 255, 0.6));
+  background-color: var(--ion-state-disabled, rgba(255, 255, 255, 0.6));
   content: "";
   pointer-events: none;
 }
 
 :host(.chip-soft) {
-  --border-radius: var(--token-border-radius-100, var(--token-scale-100, 4px));
+  --border-radius: var(--ion-border-radius-100, var(--ion-scale-100, 4px));
 }
 
 :host(.chip-round) {
-  --border-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
+  --border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
 }
 
 :host(.chip-rectangular) {
-  --border-radius: var(--token-border-radius-0, var(--token-scale-0, 0px));
+  --border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
 }
 
 ::slotted(ion-icon) {
-  font-size: var(--token-font-size-400, 1rem);
+  font-size: var(--ion-font-size-400, 1rem);
 }
 
 :host(.chip-small) {
-  min-height: var(--token-scale-600, 24px);
-  font-size: var(--token-font-size-300, 0.75rem);
+  min-height: var(--ion-scale-600, 24px);
+  font-size: var(--ion-font-size-300, 0.75rem);
 }
 
 :host(.chip-large) {
-  min-height: var(--token-scale-800, 32px);
-  font-size: var(--token-font-size-350, 0.875rem);
+  min-height: var(--ion-scale-800, 32px);
+  font-size: var(--ion-font-size-350, 0.875rem);
 }
 
 :host(.chip-subtle) {
-  --background: var(--token-primitives-neutral-100, #f5f5f5);
-  --color: var(--token-primitives-neutral-800, #626262);
+  --background: var(--ion-primitives-neutral-100, #f5f5f5);
+  --color: var(--ion-primitives-neutral-800, #626262);
 }
 
 :host(.chip-outline.chip-subtle) {
-  border-color: var(--token-primitives-neutral-300, #e0e0e0);
+  border-color: var(--ion-primitives-neutral-300, #e0e0e0);
 }
 
 :host(.chip-bold) {
-  --background: var(--token-bg-neutral-bold-default, var(--token-primitives-neutral-1000, #3b3b3b));
-  --color: var(--token-primitives-base-white, #ffffff);
+  --background: var(--ion-bg-neutral-bold-default, var(--ion-primitives-neutral-1000, #3b3b3b));
+  --color: var(--ion-primitives-base-white, #ffffff);
 }
 
 :host(.chip-outline.chip-bold) {
-  border-color: var(--token-primitives-neutral-1200, #242424);
+  border-color: var(--ion-primitives-neutral-1200, #242424);
 }
 
 :host(.chip-subtle.ion-color) {

package/dist/collection/components/col/col.css

@@ -143,6 +143,12 @@
  * }
  */
 :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
@@ -164,10 +170,7 @@
   margin-bottom: 0;
   box-sizing: border-box;
   position: relative;
-  flex-basis: 0;
-  flex-grow: 1;
-  width: 100%;
-  max-width: 100%;
+  flex: 1;
   min-height: 1px;
 }
 @media (min-width: 576px) {
@@ -209,4 +212,169 @@
     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) {
+  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))
+  );
+  -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) {
+  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) {
+  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) {
+  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) {
+  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) {
+  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) {
+  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) {
+  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) {
+  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) {
+  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) {
+  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) {
+  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) {
+  order: 12;
+}
+
+:host(.ion-grid-offset-col--12) {
+  --ion-grid-col-margin: 12;
 }