@volvo-cars/css 0.45.0 → 0.47.0

package/dist/meta.json

@@ -41,6 +41,9 @@
     "backdrop",
     "bg-always-black",
     "bg-always-white",
+    "bg-feedback-green",
+    "bg-feedback-orange",
+    "bg-feedback-red",
     "bg-inherit",
     "bg-primary",
     "bg-secondary",
@@ -113,7 +116,6 @@
     "details-open:rotate-180",
     "dialog",
     "dialog__close",
-    "disclosure",
     "empty:hidden",
     "expanded:border-accent-blue",
     "expanded:border-primary",
@@ -159,11 +161,13 @@
     "gap-y-l",
     "gap-y-m",
     "gap-y-s",
+    "grid",
     "grid-cols-2",
     "grid-cols-3",
     "grid-cols-4",
     "h-0",
     "h-16",
+    "h-1lh",
     "h-24",
     "h-32",
     "h-48",
@@ -194,6 +198,10 @@
     "justify-end",
     "justify-evenly",
     "justify-start",
+    "layout-4-5",
+    "layout-4-6",
+    "layout-5-4",
+    "layout-6-4",
     "lg:aspect-1/1",
     "lg:aspect-16/9",
     "lg:aspect-2/3",
@@ -240,6 +248,9 @@
     "lg:gap-y-l",
     "lg:gap-y-m",
     "lg:gap-y-s",
+    "lg:grid-cols-2",
+    "lg:grid-cols-3",
+    "lg:grid-cols-4",
     "lg:h-0",
     "lg:h-16",
     "lg:h-24",
@@ -517,6 +528,9 @@
     "md:gap-y-l",
     "md:gap-y-m",
     "md:gap-y-s",
+    "md:grid-cols-2",
+    "md:grid-cols-3",
+    "md:grid-cols-4",
     "md:h-0",
     "md:h-16",
     "md:h-24",
@@ -946,10 +960,13 @@
     "w-48",
     "w-64",
     "w-8",
+    "w-fit",
     "w-full",
     "w-lg",
     "w-md",
+    "w-min",
     "w-sm",
+    "w-xl",
     "w-xs",
     "wordmark",
     "xl:aspect-1/1",
@@ -1188,7 +1205,12 @@
     "xl:self-stretch",
     "xl:text-center",
     "xl:text-end",
-    "xl:text-start"
+    "xl:text-start",
+    "z-deep",
+    "z-default",
+    "z-navigation",
+    "z-overlay",
+    "z-spinner"
   ],
   "classes": [
     {
@@ -1232,7 +1254,7 @@
         "overflow: hidden",
         "content: \"\"",
         "width: 100%",
-        "height: 44px",
+        "height: 40px",
         "position: absolute",
         "top: 50%",
         "transform: translateY(-50%)",
@@ -1284,7 +1306,7 @@
         "overflow: hidden",
         "content: \"\"",
         "width: 100%",
-        "height: 44px",
+        "height: 40px",
         "position: absolute",
         "top: 50%",
         "transform: translateY(-50%)",
@@ -1332,7 +1354,7 @@
         "overflow: hidden",
         "content: \"\"",
         "width: 100%",
-        "height: 44px",
+        "height: 40px",
         "position: absolute",
         "top: 50%",
         "transform: translateY(-50%)",
@@ -1372,14 +1394,22 @@
       "name": "w-xs",
       "prefixes": [],
       "declarations": [
+        "--_columns-total-width: var(--v-size-grid-xs)",
+        "width: var(--_columns-total-width)"
+      ],
+      "layer": "volvo.layout"
+    },
+    {
+      "name": "container-xs",
+      "prefixes": [],
+      "declarations": [
+        "--_columns-total-width: var(--v-size-grid-xs)",
         "--_outer-margin: 0px",
-        "--_colspan: min(var(--v-grid-columns), var(--container-colspan, var(--v-grid-columns)))",
-        "--_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan))  + var(--v-space-gutter) * (var(--_colspan)  - 1))",
-        "max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width))  + var(--_outer-margin))",
+        "max-width: min(80rem, min(var(--v-size-grid-maxwidth), var(--_columns-total-width))  + var(--_outer-margin))",
         "width: 100%",
-        "width: min(var(--v-size-gridmax), var(--_columns-total-width))",
-        "--container-colspan: 6",
-        "--container-colspan: 4"
+        "margin-inline: auto",
+        "container-type: inline-size",
+        "--_outer-margin: calc(var(--v-space-pagemargin) * 2)"
       ],
       "layer": "volvo.layout"
     },
@@ -1387,54 +1417,41 @@
       "name": "w-sm",
       "prefixes": [],
       "declarations": [
-        "--_outer-margin: 0px",
-        "--_colspan: min(var(--v-grid-columns), var(--container-colspan, var(--v-grid-columns)))",
-        "--_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan))  + var(--v-space-gutter) * (var(--_colspan)  - 1))",
-        "max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width))  + var(--_outer-margin))",
-        "width: 100%",
-        "width: min(var(--v-size-gridmax), var(--_columns-total-width))",
-        "--container-colspan: 8",
-        "--container-colspan: 6"
+        "--_columns-total-width: var(--v-size-grid-sm)",
+        "width: var(--_columns-total-width)"
       ],
       "layer": "volvo.layout"
     },
     {
-      "name": "w-md",
+      "name": "container-sm",
       "prefixes": [],
       "declarations": [
+        "--_columns-total-width: var(--v-size-grid-sm)",
         "--_outer-margin: 0px",
-        "--_colspan: min(var(--v-grid-columns), var(--container-colspan, var(--v-grid-columns)))",
-        "--_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan))  + var(--v-space-gutter) * (var(--_colspan)  - 1))",
-        "max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width))  + var(--_outer-margin))",
+        "max-width: min(80rem, min(var(--v-size-grid-maxwidth), var(--_columns-total-width))  + var(--_outer-margin))",
         "width: 100%",
-        "width: min(var(--v-size-gridmax), var(--_columns-total-width))",
-        "--container-colspan: 10",
-        "--container-colspan: 8"
+        "margin-inline: auto",
+        "container-type: inline-size",
+        "--_outer-margin: calc(var(--v-space-pagemargin) * 2)"
       ],
       "layer": "volvo.layout"
     },
     {
-      "name": "w-lg",
+      "name": "w-md",
       "prefixes": [],
       "declarations": [
-        "--_outer-margin: 0px",
-        "--_colspan: min(var(--v-grid-columns), var(--container-colspan, var(--v-grid-columns)))",
-        "--_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan))  + var(--v-space-gutter) * (var(--_colspan)  - 1))",
-        "max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width))  + var(--_outer-margin))",
-        "width: 100%",
-        "width: min(var(--v-size-gridmax), var(--_columns-total-width))",
-        "--container-colspan: 10"
+        "--_columns-total-width: var(--v-size-grid-md)",
+        "width: var(--_columns-total-width)"
       ],
       "layer": "volvo.layout"
     },
     {
-      "name": "container",
+      "name": "container-md",
       "prefixes": [],
       "declarations": [
+        "--_columns-total-width: var(--v-size-grid-md)",
         "--_outer-margin: 0px",
-        "--_colspan: min(var(--v-grid-columns), var(--container-colspan, var(--v-grid-columns)))",
-        "--_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan))  + var(--v-space-gutter) * (var(--_colspan)  - 1))",
-        "max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width))  + var(--_outer-margin))",
+        "max-width: min(80rem, min(var(--v-size-grid-maxwidth), var(--_columns-total-width))  + var(--_outer-margin))",
         "width: 100%",
         "margin-inline: auto",
         "container-type: inline-size",
@@ -1443,68 +1460,48 @@
       "layer": "volvo.layout"
     },
     {
-      "name": "container-xs",
+      "name": "w-lg",
       "prefixes": [],
       "declarations": [
-        "--_outer-margin: 0px",
-        "--_colspan: min(var(--v-grid-columns), var(--container-colspan, var(--v-grid-columns)))",
-        "--_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan))  + var(--v-space-gutter) * (var(--_colspan)  - 1))",
-        "max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width))  + var(--_outer-margin))",
-        "width: 100%",
-        "margin-inline: auto",
-        "container-type: inline-size",
-        "--container-colspan: 6",
-        "--container-colspan: 4"
+        "--_columns-total-width: var(--v-size-grid-lg)",
+        "width: var(--_columns-total-width)"
       ],
       "layer": "volvo.layout"
     },
     {
-      "name": "container-sm",
+      "name": "container-lg",
       "prefixes": [],
       "declarations": [
+        "--_columns-total-width: var(--v-size-grid-lg)",
         "--_outer-margin: 0px",
-        "--_colspan: min(var(--v-grid-columns), var(--container-colspan, var(--v-grid-columns)))",
-        "--_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan))  + var(--v-space-gutter) * (var(--_colspan)  - 1))",
-        "max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width))  + var(--_outer-margin))",
+        "max-width: min(80rem, min(var(--v-size-grid-maxwidth), var(--_columns-total-width))  + var(--_outer-margin))",
         "width: 100%",
         "margin-inline: auto",
         "container-type: inline-size",
-        "--_outer-margin: calc(var(--v-space-pagemargin) * 2)",
-        "--container-colspan: 8",
-        "--container-colspan: 6"
+        "--_outer-margin: calc(var(--v-space-pagemargin) * 2)"
       ],
       "layer": "volvo.layout"
     },
     {
-      "name": "container-md",
+      "name": "w-xl",
       "prefixes": [],
       "declarations": [
-        "--_outer-margin: 0px",
-        "--_colspan: min(var(--v-grid-columns), var(--container-colspan, var(--v-grid-columns)))",
-        "--_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan))  + var(--v-space-gutter) * (var(--_colspan)  - 1))",
-        "max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width))  + var(--_outer-margin))",
-        "width: 100%",
-        "margin-inline: auto",
-        "container-type: inline-size",
-        "--_outer-margin: calc(var(--v-space-pagemargin) * 2)",
-        "--container-colspan: 10",
-        "--container-colspan: 8"
+        "--_columns-total-width: var(--v-size-grid-xl)",
+        "width: var(--_columns-total-width)"
       ],
       "layer": "volvo.layout"
     },
     {
-      "name": "container-lg",
+      "name": "container",
       "prefixes": [],
       "declarations": [
+        "--_columns-total-width: var(--v-size-grid-xl)",
         "--_outer-margin: 0px",
-        "--_colspan: min(var(--v-grid-columns), var(--container-colspan, var(--v-grid-columns)))",
-        "--_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan))  + var(--v-space-gutter) * (var(--_colspan)  - 1))",
-        "max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width))  + var(--_outer-margin))",
+        "max-width: min(80rem, min(var(--v-size-grid-maxwidth), var(--_columns-total-width))  + var(--_outer-margin))",
         "width: 100%",
         "margin-inline: auto",
         "container-type: inline-size",
-        "--_outer-margin: calc(var(--v-space-pagemargin) * 2)",
-        "--container-colspan: 10"
+        "--_outer-margin: calc(var(--v-space-pagemargin) * 2)"
       ],
       "layer": "volvo.layout"
     },
@@ -1512,10 +1509,9 @@
       "name": "container-xl",
       "prefixes": [],
       "declarations": [
+        "--_columns-total-width: var(--v-size-grid-xl)",
         "--_outer-margin: 0px",
-        "--_colspan: min(var(--v-grid-columns), var(--container-colspan, var(--v-grid-columns)))",
-        "--_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan))  + var(--v-space-gutter) * (var(--_colspan)  - 1))",
-        "max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width))  + var(--_outer-margin))",
+        "max-width: min(80rem, min(var(--v-size-grid-maxwidth), var(--_columns-total-width))  + var(--_outer-margin))",
         "width: 100%",
         "margin-inline: auto",
         "container-type: inline-size",
@@ -1528,9 +1524,7 @@
       "prefixes": [],
       "declarations": [
         "--_outer-margin: 0px",
-        "--_colspan: min(var(--v-grid-columns), var(--container-colspan, var(--v-grid-columns)))",
-        "--_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan))  + var(--v-space-gutter) * (var(--_colspan)  - 1))",
-        "max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width))  + var(--_outer-margin))",
+        "max-width: min(80rem, min(var(--v-size-grid-maxwidth), var(--_columns-total-width))  + var(--_outer-margin))",
         "width: 100%",
         "margin-inline: auto",
         "container-type: inline-size",
@@ -1548,8 +1542,19 @@
       "layer": "volvo.layout"
     },
     {
-      "name": "grid-cols-2",
+      "name": "grid",
       "prefixes": [],
+      "declarations": [
+        "display: grid"
+      ],
+      "layer": "volvo.layout"
+    },
+    {
+      "name": "grid-cols-2",
+      "prefixes": [
+        "lg",
+        "md"
+      ],
       "declarations": [
         "grid-template-columns: repeat(2, minmax(0, 1fr))",
         "display: grid"
@@ -1558,7 +1563,10 @@
     },
     {
       "name": "grid-cols-3",
-      "prefixes": [],
+      "prefixes": [
+        "lg",
+        "md"
+      ],
       "declarations": [
         "grid-template-columns: repeat(3, minmax(0, 1fr))",
         "display: grid"
@@ -1567,7 +1575,10 @@
     },
     {
       "name": "grid-cols-4",
-      "prefixes": [],
+      "prefixes": [
+        "lg",
+        "md"
+      ],
       "declarations": [
         "grid-template-columns: repeat(4, minmax(0, 1fr))",
         "display: grid"
@@ -1811,6 +1822,66 @@
       ],
       "layer": "volvo.blocks"
     },
+    {
+      "name": "layout-4-5",
+      "prefixes": [],
+      "declarations": [
+        "gap: var(--v-space-gutter)",
+        "max-width: calc(var(--v-size-grid-maxwidth)  + var(--_outer-margin, 0))",
+        "grid-template-columns: 1fr",
+        "margin-inline: auto",
+        "display: grid",
+        "margin-inline: var(--v-space-pagemargin)",
+        "--_outer-margin: 0px",
+        "grid-template-columns: 1fr 1fr"
+      ],
+      "layer": "volvo.layout"
+    },
+    {
+      "name": "layout-5-4",
+      "prefixes": [],
+      "declarations": [
+        "gap: var(--v-space-gutter)",
+        "max-width: calc(var(--v-size-grid-maxwidth)  + var(--_outer-margin, 0))",
+        "grid-template-columns: 1fr",
+        "margin-inline: auto",
+        "display: grid",
+        "margin-inline: var(--v-space-pagemargin)",
+        "--_outer-margin: 0px",
+        "grid-template-columns: 1fr 1fr"
+      ],
+      "layer": "volvo.layout"
+    },
+    {
+      "name": "layout-6-4",
+      "prefixes": [],
+      "declarations": [
+        "gap: var(--v-space-gutter)",
+        "max-width: calc(var(--v-size-grid-maxwidth)  + var(--_outer-margin, 0))",
+        "grid-template-columns: 1fr",
+        "margin-inline: auto",
+        "display: grid",
+        "--_outer-margin: var(--v-space-pagemargin) * 2",
+        "--_outer-margin: 0px",
+        "grid-template-columns: 1fr 1fr"
+      ],
+      "layer": "volvo.layout"
+    },
+    {
+      "name": "layout-4-6",
+      "prefixes": [],
+      "declarations": [
+        "gap: var(--v-space-gutter)",
+        "max-width: calc(var(--v-size-grid-maxwidth)  + var(--_outer-margin, 0))",
+        "grid-template-columns: 1fr",
+        "margin-inline: auto",
+        "display: grid",
+        "--_outer-margin: var(--v-space-pagemargin) * 2",
+        "--_outer-margin: 0px",
+        "grid-template-columns: 1fr 1fr"
+      ],
+      "layer": "volvo.layout"
+    },
     {
       "name": "backdrop",
       "prefixes": [],
@@ -1851,13 +1922,7 @@
         "border-radius: var(--v-radius-full)",
         "flex-shrink: 0",
         "width: 2.5rem",
-        "height: 2.5rem",
-        "content: \"\"",
-        "width: 44px",
-        "height: 44px",
-        "position: absolute",
-        "top: 50%",
-        "transform: translateY(-50%)"
+        "height: 2.5rem"
       ],
       "layer": "volvo.blocks"
     },
@@ -1884,13 +1949,7 @@
         "border-radius: var(--v-radius-full)",
         "flex-shrink: 0",
         "width: 2.5rem",
-        "height: 2.5rem",
-        "content: \"\"",
-        "width: 44px",
-        "height: 44px",
-        "position: absolute",
-        "top: 50%",
-        "transform: translateY(-50%)"
+        "height: 2.5rem"
       ],
       "layer": "volvo.blocks"
     },
@@ -1915,12 +1974,6 @@
         "flex-shrink: 0",
         "width: 2.5rem",
         "height: 2.5rem",
-        "content: \"\"",
-        "width: 44px",
-        "height: 44px",
-        "position: absolute",
-        "top: 50%",
-        "transform: translateY(-50%)",
         "background-color: color-mix(in lab, var(--background-color, var(--v-color-background-primary)), var(--button-accent-color) var(--_v-color-mix-subtle))"
       ],
       "layer": "volvo.blocks"
@@ -2010,27 +2063,11 @@
         "height: var(--v-space-48)",
         "top: 0",
         "justify-content: flex-end",
+        "align-items: center",
         "display: flex",
         "position: absolute",
         "inset-inline-end: 0",
-        "outline-offset: -2px",
-        "border-radius: 50%",
-        "justify-content: center",
-        "align-items: center",
-        "width: 2.5rem",
-        "height: 2.5rem",
-        "line-height: 0"
-      ],
-      "layer": "volvo.blocks"
-    },
-    {
-      "name": "disclosure",
-      "prefixes": [],
-      "declarations": [
-        "display: flex",
-        "flex-direction: row",
-        "justify-content: space-between",
-        "align-items: center"
+        "outline-offset: -2px"
       ],
       "layer": "volvo.blocks"
     },
@@ -2455,6 +2492,33 @@
       ],
       "layer": "volvo.utilities"
     },
+    {
+      "name": "bg-feedback-green",
+      "prefixes": [],
+      "declarations": [
+        "--background-color: var(--v-color-background-feedback-green)",
+        "background-color: var(--background-color)"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "bg-feedback-orange",
+      "prefixes": [],
+      "declarations": [
+        "--background-color: var(--v-color-background-feedback-orange)",
+        "background-color: var(--background-color)"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "bg-feedback-red",
+      "prefixes": [],
+      "declarations": [
+        "--background-color: var(--v-color-background-feedback-red)",
+        "background-color: var(--background-color)"
+      ],
+      "layer": "volvo.utilities"
+    },
     {
       "name": "border",
       "prefixes": [
@@ -3457,6 +3521,14 @@
       ],
       "layer": "volvo.utilities"
     },
+    {
+      "name": "h-1lh",
+      "prefixes": [],
+      "declarations": [
+        "height: 1lh"
+      ],
+      "layer": "volvo.utilities"
+    },
     {
       "name": "h-full",
       "prefixes": [
@@ -6229,6 +6301,62 @@
         "width: 100%"
       ],
       "layer": "volvo.utilities"
+    },
+    {
+      "name": "w-min",
+      "prefixes": [],
+      "declarations": [
+        "width: min-content"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "w-fit",
+      "prefixes": [],
+      "declarations": [
+        "width: fit-content"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "z-spinner",
+      "prefixes": [],
+      "declarations": [
+        "z-index: var(--v-index-spinner)"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "z-overlay",
+      "prefixes": [],
+      "declarations": [
+        "z-index: var(--v-index-overlay)"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "z-navigation",
+      "prefixes": [],
+      "declarations": [
+        "z-index: var(--v-index-navigation)"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "z-default",
+      "prefixes": [],
+      "declarations": [
+        "z-index: var(--v-index-default)"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "z-deep",
+      "prefixes": [],
+      "declarations": [
+        "z-index: var(--v-index-deep)"
+      ],
+      "layer": "volvo.utilities"
     }
   ],
   "tokens": [
@@ -6369,27 +6497,18 @@
       "value": "clamp(1rem, 2.6vw + 0.3rem, 1.5rem)"
     },
     {
-      "css": "--v-grid-columns",
-      "type": "grid",
-      "variant": "columns",
-      "meta": {
-        "description": "The total number of grid columns at the current breakpoint."
-      },
-      "value": "8"
-    },
-    {
-      "css": "--v-size-gridcolumn",
+      "css": "--v-size-grid-column",
       "type": "size",
-      "variant": "gridcolumn",
+      "variant": "column",
       "meta": {
         "description": "The width of a single grid column."
       },
-      "value": "calc(\n    (\n        var(--v-size-gridmax) - (var(--v-grid-columns) - 1) *\n          var(--v-space-gutter)\n      ) / var(--v-grid-columns)\n  )"
+      "value": "calc(\n    (\n        var(--v-size-grid-maxwidth) - (var(--v-grid-columns) - 1) *\n          var(--v-space-gutter)\n      ) / var(--v-grid-columns)\n  )"
     },
     {
-      "css": "--v-size-gridmax",
+      "css": "--v-size-grid-maxwidth",
       "type": "size",
-      "variant": "gridmax",
+      "variant": "maxwidth",
       "meta": {
         "description": "The maximum width of the 12 column grid."
       },
@@ -6404,6 +6523,60 @@
       },
       "value": "min(160rem, 100vw)"
     },
+    {
+      "css": "--v-size-grid-xs",
+      "type": "size",
+      "variant": "xs",
+      "meta": {
+        "description": "Width based on the colspan of the grid for the current viewport size  (4 / 6 / 4)"
+      },
+      "value": "calc(\n    (var(--v-size-grid-column) * var(--_xs-cols)) + var(--v-space-gutter) *\n      (var(--_xs-cols) - 1)\n  )"
+    },
+    {
+      "css": "--v-size-grid-sm",
+      "type": "size",
+      "variant": "sm",
+      "meta": {
+        "description": "Width based on the colspan of the grid for the current viewport size  (6 / 8 / 6)"
+      },
+      "value": "calc(\n    (var(--v-size-grid-column) * var(--_sm-cols)) + var(--v-space-gutter) *\n      (var(--_sm-cols) - 1)\n  )"
+    },
+    {
+      "css": "--v-size-grid-md",
+      "type": "size",
+      "variant": "md",
+      "meta": {
+        "description": "Width based on the colspan of the grid for the current viewport size  (8 / 10 / 8)"
+      },
+      "value": "calc(\n    (var(--v-size-grid-column) * var(--_md-cols)) + var(--v-space-gutter) *\n      (var(--_md-cols) - 1)\n  )"
+    },
+    {
+      "css": "--v-size-grid-lg",
+      "type": "size",
+      "variant": "lg",
+      "meta": {
+        "description": "Width based on the colspan of the grid for the current viewport size  (8 / 10 / 12)"
+      },
+      "value": "calc(\n    (var(--v-size-grid-column) * var(--_lg-cols)) + var(--v-space-gutter) *\n      (var(--_lg-cols) - 1)\n  )"
+    },
+    {
+      "css": "--v-size-grid-xl",
+      "type": "size",
+      "variant": "xl",
+      "meta": {
+        "description": "Width based on the colspan of the grid for the current viewport size  (8 / 12 / 12)"
+      },
+      "value": "calc(\n    (var(--v-size-grid-column) * var(--_xl-cols)) + var(--v-space-gutter) *\n      (var(--_xl-cols) - 1)\n  )"
+    },
+    {
+      "css": "--v-size-grid-max",
+      "type": "size",
+      "variant": "max",
+      "meta": {
+        "description": "Width based on the maximum extent of a `max` container"
+      },
+      "value": "min(\n    (100vw - var(--v-space-pagemargin) * 2) + var(--_outer-margin, 0rem),\n    160rem\n  )"
+    },
     {
       "css": "--v-size-contentmax",
       "type": "size",
@@ -6462,6 +6635,15 @@
       "meta": {},
       "value": "-1"
     },
+    {
+      "css": "--v-grid-columns",
+      "type": "grid",
+      "variant": "columns",
+      "meta": {
+        "description": "The total number of grid columns at the current breakpoint."
+      },
+      "value": "8"
+    },
     {
       "css": "--v-font-sans-family",
       "type": "font",