@volvo-cars/css 0.50.0 → 0.51.0

package/dist/meta.json

@@ -237,6 +237,7 @@
     "lg:gap-x-48",
     "lg:gap-x-64",
     "lg:gap-x-8",
+    "lg:gap-x-gutter",
     "lg:gap-y-0",
     "lg:gap-y-16",
     "lg:gap-y-24",
@@ -316,6 +317,7 @@
     "lg:ml-64",
     "lg:ml-8",
     "lg:ml-auto",
+    "lg:ml-pagemargin",
     "lg:mr-0",
     "lg:mr-16",
     "lg:mr-24",
@@ -325,6 +327,7 @@
     "lg:mr-64",
     "lg:mr-8",
     "lg:mr-auto",
+    "lg:mr-pagemargin",
     "lg:mt-0",
     "lg:mt-16",
     "lg:mt-24",
@@ -346,6 +349,7 @@
     "lg:mx-64",
     "lg:mx-8",
     "lg:mx-auto",
+    "lg:mx-pagemargin",
     "lg:my-0",
     "lg:my-16",
     "lg:my-24",
@@ -394,6 +398,7 @@
     "lg:pl-48",
     "lg:pl-64",
     "lg:pl-8",
+    "lg:pl-pagemargin",
     "lg:pr-0",
     "lg:pr-16",
     "lg:pr-24",
@@ -402,6 +407,7 @@
     "lg:pr-48",
     "lg:pr-64",
     "lg:pr-8",
+    "lg:pr-pagemargin",
     "lg:pt-0",
     "lg:pt-16",
     "lg:pt-24",
@@ -421,6 +427,7 @@
     "lg:px-48",
     "lg:px-64",
     "lg:px-8",
+    "lg:px-pagemargin",
     "lg:py-0",
     "lg:py-16",
     "lg:py-24",
@@ -516,6 +523,7 @@
     "md:gap-x-48",
     "md:gap-x-64",
     "md:gap-x-8",
+    "md:gap-x-gutter",
     "md:gap-y-0",
     "md:gap-y-16",
     "md:gap-y-24",
@@ -595,6 +603,7 @@
     "md:ml-64",
     "md:ml-8",
     "md:ml-auto",
+    "md:ml-pagemargin",
     "md:mr-0",
     "md:mr-16",
     "md:mr-24",
@@ -604,6 +613,7 @@
     "md:mr-64",
     "md:mr-8",
     "md:mr-auto",
+    "md:mr-pagemargin",
     "md:mt-0",
     "md:mt-16",
     "md:mt-24",
@@ -625,6 +635,7 @@
     "md:mx-64",
     "md:mx-8",
     "md:mx-auto",
+    "md:mx-pagemargin",
     "md:my-0",
     "md:my-16",
     "md:my-24",
@@ -673,6 +684,7 @@
     "md:pl-48",
     "md:pl-64",
     "md:pl-8",
+    "md:pl-pagemargin",
     "md:pr-0",
     "md:pr-16",
     "md:pr-24",
@@ -681,6 +693,7 @@
     "md:pr-48",
     "md:pr-64",
     "md:pr-8",
+    "md:pr-pagemargin",
     "md:pt-0",
     "md:pt-16",
     "md:pt-24",
@@ -700,6 +713,7 @@
     "md:px-48",
     "md:px-64",
     "md:px-8",
+    "md:px-pagemargin",
     "md:py-0",
     "md:py-16",
     "md:py-24",
@@ -1001,6 +1015,7 @@
     "xl:gap-x-48",
     "xl:gap-x-64",
     "xl:gap-x-8",
+    "xl:gap-x-gutter",
     "xl:gap-y-0",
     "xl:gap-y-16",
     "xl:gap-y-24",
@@ -1077,6 +1092,7 @@
     "xl:ml-64",
     "xl:ml-8",
     "xl:ml-auto",
+    "xl:ml-pagemargin",
     "xl:mr-0",
     "xl:mr-16",
     "xl:mr-24",
@@ -1086,6 +1102,7 @@
     "xl:mr-64",
     "xl:mr-8",
     "xl:mr-auto",
+    "xl:mr-pagemargin",
     "xl:mt-0",
     "xl:mt-16",
     "xl:mt-24",
@@ -1107,6 +1124,7 @@
     "xl:mx-64",
     "xl:mx-8",
     "xl:mx-auto",
+    "xl:mx-pagemargin",
     "xl:my-0",
     "xl:my-16",
     "xl:my-24",
@@ -1155,6 +1173,7 @@
     "xl:pl-48",
     "xl:pl-64",
     "xl:pl-8",
+    "xl:pl-pagemargin",
     "xl:pr-0",
     "xl:pr-16",
     "xl:pr-24",
@@ -1163,6 +1182,7 @@
     "xl:pr-48",
     "xl:pr-64",
     "xl:pr-8",
+    "xl:pr-pagemargin",
     "xl:pt-0",
     "xl:pt-16",
     "xl:pt-24",
@@ -1182,6 +1202,7 @@
     "xl:px-48",
     "xl:px-64",
     "xl:px-8",
+    "xl:px-pagemargin",
     "xl:py-0",
     "xl:py-16",
     "xl:py-24",
@@ -1208,30 +1229,105 @@
   ],
   "classes": [
     {
-      "name": "button-group",
+      "name": "backdrop",
       "prefixes": [],
       "declarations": [
-        "gap: var(--v-space-16)",
-        "flex-wrap: wrap",
+        "background-color: #000000a3",
+        "z-index: calc(var(--v-index-overlay)  - 1)",
+        "justify-content: center",
+        "align-items: center",
         "display: flex",
-        "container: button-group / inline-size",
-        "flex: 1 0 40%",
-        "flex: 1 0 40cqw",
-        "--stack-gap: var(--v-space-24)",
-        "--stack-gap: var(--v-space-32)",
-        "--stack-gap: var(--v-space-16)"
+        "position: fixed",
+        "inset: 0"
       ],
-      "layer": "volvo.layout"
+      "layer": "volvo.blocks"
+    },
+    {
+      "name": "icon-button-filled",
+      "prefixes": [],
+      "declarations": [
+        "user-select: none",
+        "transition: transform var(--v-transition-default), background-color var(--v-transition-default)",
+        "justify-content: center",
+        "align-items: center",
+        "min-width: max-content",
+        "display: inline-flex",
+        "position: relative",
+        "opacity: var(--_v-disabled-opacity)",
+        "--button-accent-color: var(--v-color-surface-neutral)",
+        "--_color: var(--v-color-foreground-inverted)",
+        "--_overlay-rate: 0%",
+        "color: var(--_color)",
+        "background: color-mix(in oklab, var(--button-accent-color), var(--_color) var(--_overlay-rate))",
+        "--button-accent-color: var(--v-color-surface-accent-blue)",
+        "--_color: var(--v-color-always-white)",
+        "--button-accent-color: var(--v-color-surface-feedback-red)",
+        "background: var(--button-accent-color)",
+        "--_overlay-rate: var(--_v-color-mix-strong)",
+        "transform: scale(.95)",
+        "border-radius: var(--v-radius-full)",
+        "flex-shrink: 0",
+        "width: 2.5rem",
+        "height: 2.5rem"
+      ],
+      "layer": "volvo.blocks"
+    },
+    {
+      "name": "icon-button-outlined",
+      "prefixes": [],
+      "declarations": [
+        "user-select: none",
+        "transition: transform var(--v-transition-default), background-color var(--v-transition-default)",
+        "justify-content: center",
+        "align-items: center",
+        "min-width: max-content",
+        "display: inline-flex",
+        "position: relative",
+        "opacity: var(--_v-disabled-opacity)",
+        "box-shadow: inset 0 0 0 1px var(--button-accent-color)",
+        "color: var(--v-color-foreground-inverted)",
+        "background-color: var(--button-accent-color)",
+        "transform: scale(.95)",
+        "--button-accent-color: var(--v-color-foreground-primary)",
+        "color: var(--button-accent-color)",
+        "--button-accent-color: var(--v-color-foreground-accent-blue)",
+        "--button-accent-color: var(--v-color-foreground-feedback-red)",
+        "border-radius: var(--v-radius-full)",
+        "flex-shrink: 0",
+        "width: 2.5rem",
+        "height: 2.5rem"
+      ],
+      "layer": "volvo.blocks"
+    },
+    {
+      "name": "icon-button-clear",
+      "prefixes": [],
+      "declarations": [
+        "user-select: none",
+        "transition: transform var(--v-transition-default), background-color var(--v-transition-default)",
+        "justify-content: center",
+        "align-items: center",
+        "min-width: max-content",
+        "display: inline-flex",
+        "position: relative",
+        "opacity: var(--_v-disabled-opacity)",
+        "transform: scale(.95)",
+        "--button-accent-color: var(--v-color-foreground-primary)",
+        "color: var(--button-accent-color)",
+        "--button-accent-color: var(--v-color-foreground-accent-blue)",
+        "--button-accent-color: var(--v-color-foreground-feedback-red)",
+        "border-radius: var(--v-radius-full)",
+        "flex-shrink: 0",
+        "width: 2.5rem",
+        "height: 2.5rem",
+        "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"
     },
     {
       "name": "button-filled",
       "prefixes": [],
       "declarations": [
-        "flex: 1 0 40%",
-        "flex: 1 0 40cqw",
-        "--stack-gap: var(--v-space-24)",
-        "--stack-gap: var(--v-space-32)",
-        "--stack-gap: var(--v-space-16)",
         "user-select: none",
         "transition: transform var(--v-transition-default), background-color var(--v-transition-default)",
         "justify-content: center",
@@ -1271,19 +1367,19 @@
         "height: 1.5rem",
         "padding-inline: var(--v-space-16)",
         "width: 1rem",
-        "height: 1rem"
+        "height: 1rem",
+        "flex: 1 0 40%",
+        "flex: 1 0 40cqw",
+        "--stack-gap: var(--v-space-24)",
+        "--stack-gap: var(--v-space-32)",
+        "--stack-gap: var(--v-space-16)"
       ],
-      "layer": "volvo.blocks"
+      "layer": "volvo.layout"
     },
     {
       "name": "button-outlined",
       "prefixes": [],
       "declarations": [
-        "flex: 1 0 40%",
-        "flex: 1 0 40cqw",
-        "--stack-gap: var(--v-space-24)",
-        "--stack-gap: var(--v-space-32)",
-        "--stack-gap: var(--v-space-16)",
         "user-select: none",
         "transition: transform var(--v-transition-default), background-color var(--v-transition-default)",
         "justify-content: center",
@@ -1320,18 +1416,19 @@
         "--button-accent-color: var(--v-color-foreground-primary)",
         "color: var(--button-accent-color)",
         "--button-accent-color: var(--v-color-foreground-accent-blue)",
-        "--button-accent-color: var(--v-color-foreground-feedback-red)"
+        "--button-accent-color: var(--v-color-foreground-feedback-red)",
+        "flex: 1 0 40%",
+        "flex: 1 0 40cqw",
+        "--stack-gap: var(--v-space-24)",
+        "--stack-gap: var(--v-space-32)",
+        "--stack-gap: var(--v-space-16)"
       ],
-      "layer": "volvo.blocks"
+      "layer": "volvo.layout"
     },
     {
       "name": "button-text",
       "prefixes": [],
       "declarations": [
-        "flex: 1 0 40%",
-        "flex: 1 0 40cqw",
-        "--stack-gap: var(--v-space-24)",
-        "--stack-gap: var(--v-space-16)",
         "user-select: none",
         "transition: transform var(--v-transition-default), background-color var(--v-transition-default)",
         "justify-content: center",
@@ -1380,892 +1477,816 @@
         "--_arrow-rotation: 90deg",
         "--_arrow-rotation: -90deg",
         "margin-inline-start: var(--v-space-8)",
-        "text-decoration-line: underline"
+        "text-decoration-line: underline",
+        "flex: 1 0 40%",
+        "flex: 1 0 40cqw",
+        "--stack-gap: var(--v-space-24)",
+        "--stack-gap: var(--v-space-16)"
       ],
-      "layer": "volvo.blocks"
+      "layer": "volvo.layout"
     },
     {
-      "name": "w-xs",
+      "name": "spinner",
       "prefixes": [],
       "declarations": [
-        "--_columns-total-width: var(--v-size-grid-xs)",
-        "width: var(--_columns-total-width)"
+        "width: 1.5rem",
+        "height: 1.5rem",
+        "position: absolute",
+        "width: 1rem",
+        "height: 1rem",
+        "contain: strict",
+        "appearance: none",
+        "background: none",
+        "border: 2px solid",
+        "border-bottom-color: #0000",
+        "border-radius: 50%",
+        "width: 2.5rem",
+        "height: 2.5rem",
+        "animation: .7s cubic-bezier(.62, .63, 0, .53) infinite rotate",
+        "display: inline-flex",
+        "display: none"
       ],
-      "layer": "volvo.layout"
+      "layer": "volvo.blocks"
     },
     {
-      "name": "container-xs",
+      "name": "icon-sprite",
       "prefixes": [],
       "declarations": [
-        "--_columns-total-width: var(--v-size-grid-xs)",
-        "--_outer-margin: 0px",
-        "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)"
+        "margin-inline-start: var(--v-space-8)",
+        "width: var(--_height)",
+        "min-width: var(--_height)",
+        "height: var(--_height)",
+        "min-height: var(--_height)",
+        "vertical-align: middle",
+        "flex-grow: 0",
+        "flex-shrink: 0",
+        "display: inline-block",
+        "--_height: 5rem",
+        "--_height: 4rem",
+        "--_height: 3rem",
+        "--_height: 2.5rem",
+        "--_height: 2rem",
+        "--_height: 1.5rem",
+        "--_height: 1rem",
+        "--_height: .75rem",
+        "--_height: .5rem",
+        "--_y-offset: var(--_dark-toggle) 7",
+        "fill: currentColor",
+        "object-fit: cover",
+        "object-position: 0 calc(var(--_y-offset, 0) * -1 * var(--_height, 0))",
+        "transform: scaleX(-1)"
       ],
-      "layer": "volvo.layout"
+      "layer": "volvo.blocks"
     },
     {
-      "name": "w-sm",
+      "name": "dialog",
       "prefixes": [],
       "declarations": [
-        "--_columns-total-width: var(--v-size-grid-sm)",
-        "width: var(--_columns-total-width)"
+        "z-index: var(--v-index-overlay)",
+        "padding-block: var(--v-space-48)",
+        "padding-inline: var(--v-space-24)",
+        "color: var(--v-color-foreground-primary)",
+        "background-color: var(--v-color-background-secondary)",
+        "margin: auto",
+        "width: 100%",
+        "max-width: 100%",
+        "height: fit-content",
+        "max-height: calc(100vh + -1 * min(2rem, 20vh))",
+        "margin-bottom: 0",
+        "position: fixed",
+        "inset: 0",
+        "overflow-y: auto",
+        "padding-inline: var(--v-space-48)",
+        "max-width: min(31rem, 100vw - 2rem)",
+        "margin-bottom: auto",
+        "padding-top: 0"
       ],
-      "layer": "volvo.layout"
+      "layer": "volvo.blocks"
     },
     {
-      "name": "container-sm",
+      "name": "dialog__close",
       "prefixes": [],
       "declarations": [
-        "--_columns-total-width: var(--v-size-grid-sm)",
-        "--_outer-margin: 0px",
-        "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)"
+        "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"
       ],
-      "layer": "volvo.layout"
+      "layer": "volvo.blocks"
     },
     {
-      "name": "w-md",
+      "name": "radio",
       "prefixes": [],
       "declarations": [
-        "--_columns-total-width: var(--v-size-grid-md)",
-        "width: var(--_columns-total-width)"
+        "background-color: var(--_input-background-color, var(--v-color-background-primary))",
+        "border-radius: var(--v-radius-4)",
+        "box-shadow: inset 0 0 0 var(--_input-border-size, 1px) var(--_input-border-color, var(--v-color-foreground-secondary))",
+        "transition: box-shadow var(--v-transition-default)",
+        "place-content: center",
+        "width: 1rem",
+        "height: 1rem",
+        "margin-top: .25em",
+        "display: inline-grid",
+        "position: relative",
+        "border-radius: var(--v-radius-full)"
       ],
-      "layer": "volvo.layout"
+      "layer": "volvo.blocks"
     },
     {
-      "name": "container-md",
+      "name": "checkbox",
       "prefixes": [],
       "declarations": [
-        "--_columns-total-width: var(--v-size-grid-md)",
-        "--_outer-margin: 0px",
-        "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)"
+        "background-color: var(--_input-background-color, var(--v-color-background-primary))",
+        "border-radius: var(--v-radius-4)",
+        "box-shadow: inset 0 0 0 var(--_input-border-size, 1px) var(--_input-border-color, var(--v-color-foreground-secondary))",
+        "transition: box-shadow var(--v-transition-default)",
+        "place-content: center",
+        "width: 1rem",
+        "height: 1rem",
+        "margin-top: .25em",
+        "display: inline-grid",
+        "position: relative"
       ],
-      "layer": "volvo.layout"
+      "layer": "volvo.blocks"
     },
     {
-      "name": "w-lg",
+      "name": "switch",
       "prefixes": [],
       "declarations": [
-        "--_columns-total-width: var(--v-size-grid-lg)",
-        "width: var(--_columns-total-width)"
+        "--_background-color: var(--_toggle-background)",
+        "--_indicator-color: var(--v-color-always-white)",
+        "appearance: none",
+        "background-color: var(--_background-color)",
+        "border-radius: var(--v-radius-full)",
+        "flex-shrink: 0",
+        "width: 2.5rem",
+        "height: 1.5rem",
+        "padding: .125rem",
+        "transition: background .25s",
+        "display: inline-flex"
       ],
-      "layer": "volvo.layout"
+      "layer": "volvo.blocks"
     },
     {
-      "name": "container-lg",
+      "name": "heading-1",
       "prefixes": [],
       "declarations": [
-        "--_columns-total-width: var(--v-size-grid-lg)",
-        "--_outer-margin: 0px",
-        "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)"
+        "font: var(--v-font-heading-1)",
+        "--stack-gap: var(--v-space-8)",
+        "--stack-gap: calc(var(--v-space-8)  + 1em)"
       ],
       "layer": "volvo.layout"
     },
     {
-      "name": "w-xl",
+      "name": "heading-2",
       "prefixes": [],
       "declarations": [
-        "--_columns-total-width: var(--v-size-grid-xl)",
-        "width: var(--_columns-total-width)"
+        "font: var(--v-font-heading-2)",
+        "--stack-gap: var(--v-space-8)",
+        "--stack-gap: calc(var(--v-space-8)  + 1em)"
       ],
       "layer": "volvo.layout"
     },
     {
-      "name": "container",
+      "name": "heading-3",
       "prefixes": [],
       "declarations": [
-        "--_columns-total-width: var(--v-size-grid-xl)",
-        "--_outer-margin: 0px",
-        "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)"
+        "font: var(--v-font-heading-3)",
+        "--stack-gap: var(--v-space-8)",
+        "--stack-gap: calc(var(--v-space-8)  + 1em)",
+        "--stack-gap: var(--v-space-24)"
       ],
       "layer": "volvo.layout"
     },
     {
-      "name": "container-xl",
+      "name": "wordmark",
       "prefixes": [],
       "declarations": [
-        "--_columns-total-width: var(--v-size-grid-xl)",
-        "--_outer-margin: 0px",
-        "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)"
+        "width: var(--_height)",
+        "min-width: var(--_height)",
+        "height: var(--_height)",
+        "min-height: var(--_height)",
+        "vertical-align: middle",
+        "flex-grow: 0",
+        "flex-shrink: 0",
+        "display: inline-block",
+        "--_height: 5rem",
+        "--_height: 4rem",
+        "--_height: 3rem",
+        "--_height: 2.5rem",
+        "--_height: 2rem",
+        "--_height: 1.5rem",
+        "--_height: 1rem",
+        "--_height: .75rem",
+        "--_height: .5rem",
+        "width: calc(var(--_height) * 13)",
+        "min-width: calc(var(--_height) * 13)",
+        "object-position: 0 -999px",
+        "mask-size: cover",
+        "mask-repeat: no-repeat",
+        "mask-image: var(--mask-url, var(--icon-url))",
+        "background-color: currentColor"
       ],
-      "layer": "volvo.layout"
+      "layer": "volvo.blocks"
     },
     {
-      "name": "container-max",
+      "name": "icon-mask",
       "prefixes": [],
       "declarations": [
-        "--_outer-margin: 0px",
-        "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)",
-        "max-width: min((100vw - var(--v-space-pagemargin) * 2)  + var(--_outer-margin), 160rem)"
+        "width: var(--_height)",
+        "min-width: var(--_height)",
+        "height: var(--_height)",
+        "min-height: var(--_height)",
+        "vertical-align: middle",
+        "flex-grow: 0",
+        "flex-shrink: 0",
+        "display: inline-block",
+        "--_height: 5rem",
+        "--_height: 4rem",
+        "--_height: 3rem",
+        "--_height: 2.5rem",
+        "--_height: 2rem",
+        "--_height: 1.5rem",
+        "--_height: 1rem",
+        "--_height: .75rem",
+        "--_height: .5rem",
+        "object-position: 0 -999px",
+        "mask-size: cover",
+        "mask-repeat: no-repeat",
+        "mask-image: var(--mask-url, var(--icon-url))",
+        "background-color: currentColor",
+        "transform: scaleX(-1)"
       ],
-      "layer": "volvo.layout"
+      "layer": "volvo.blocks"
     },
     {
-      "name": "max-w-prose",
+      "name": "v-label",
       "prefixes": [],
       "declarations": [
-        "max-width: var(--v-size-contentmax)"
+        "flex-direction: column",
+        "display: inline-flex",
+        "margin-top: var(--v-space-8)"
       ],
-      "layer": "volvo.layout"
+      "layer": "volvo.blocks"
     },
     {
-      "name": "reel",
+      "name": "v-input",
       "prefixes": [],
       "declarations": [
-        "scroll-snap-type: x mandatory",
-        "scrollbar-width: none",
-        "display: flex",
-        "overflow: scroll hidden"
+        "padding: var(--v-space-16)",
+        "background-color: var(--_input-background-color, var(--v-color-background-primary))",
+        "border-radius: var(--v-radius-4)",
+        "box-shadow: inset 0 0 0 var(--_input-border-size, 1px) var(--_input-border-color, var(--v-color-ornament-primary))",
+        "transition: box-shadow var(--v-transition-default)",
+        "outline: none",
+        "height: 3rem",
+        "width: 100%",
+        "--_bg-pos-x: var(--_rtl-toggle) left",
+        "background-image: var(--_icon-chevrondown)",
+        "background-repeat: no-repeat",
+        "background-position: center var(--_bg-pos-x, right) var(--v-space-16)",
+        "background-size: 1rem 1rem"
       ],
-      "layer": "volvo.layout"
+      "layer": "volvo.blocks"
     },
     {
-      "name": "reel-indicators",
+      "name": "v-input-floating-label",
       "prefixes": [],
       "declarations": [
-        "flex-direction: row",
-        "justify-content: center",
-        "column-gap: 4px",
-        "margin-block: 32px",
-        "display: flex",
-        "background-color: var(--v-color-ornament-primary)",
-        "border-radius: 9999px",
-        "width: .5rem",
-        "height: .5rem",
-        "transition: background-color .2s",
-        "background-color: var(--v-color-surface-neutral)"
+        "position: relative",
+        "--_transform-origin: var(--_rtl-toggle) 100%",
+        "z-index: 1",
+        "color: var(--v-color-foreground-secondary)",
+        "pointer-events: none",
+        "transition: transform var(--v-transition-default)",
+        "transform-origin: var(--_transform-origin, 0)",
+        "top: 0",
+        "position: absolute",
+        "inset-inline-start: var(--v-space-16)",
+        "transform: translateY(5px)scale(.75)",
+        "color: var(--v-color-foreground-feedback-red)",
+        "height: 3.5rem",
+        "padding-top: 1.625rem",
+        "padding-bottom: .625rem",
+        "--stack-gap: var(--v-space-32)"
       ],
       "layer": "volvo.layout"
     },
     {
-      "name": "stack-4",
+      "name": "link-inline",
       "prefixes": [],
       "declarations": [
-        "margin-top: var(--stack-gap)",
-        "--stack-gap: var(--v-space-4)"
+        "color: var(--v-color-foreground-primary)",
+        "text-decoration-skip-ink: auto",
+        "text-underline-offset: .125em",
+        "text-decoration-line: underline"
       ],
-      "layer": "volvo.layout"
+      "layer": "volvo.blocks"
     },
     {
-      "name": "stack-8",
+      "name": "link-underlined",
       "prefixes": [],
       "declarations": [
-        "margin-top: var(--stack-gap)",
-        "--stack-gap: var(--v-space-8)"
+        "text-decoration-line: underline",
+        "text-underline-offset: .125em",
+        "position: relative"
       ],
-      "layer": "volvo.layout"
+      "layer": "volvo.blocks"
     },
     {
-      "name": "stack-16",
+      "name": "link-plain",
       "prefixes": [],
       "declarations": [
-        "margin-top: var(--stack-gap)",
-        "--stack-gap: var(--v-space-16)"
+        "text-underline-offset: .125em",
+        "position: relative"
       ],
-      "layer": "volvo.layout"
+      "layer": "volvo.blocks"
     },
     {
-      "name": "stack-24",
+      "name": "list",
       "prefixes": [],
       "declarations": [
-        "margin-top: var(--stack-gap)",
-        "--stack-gap: var(--v-space-24)"
+        "list-style-type: revert",
+        "padding-inline-start: 2rem",
+        "--stack-gap: var(--v-space-8)"
       ],
       "layer": "volvo.layout"
     },
     {
-      "name": "stack-32",
+      "name": "statement-1",
       "prefixes": [],
       "declarations": [
-        "margin-top: var(--stack-gap)",
-        "--stack-gap: var(--v-space-32)"
+        "font: var(--v-font-statement-1)"
       ],
-      "layer": "volvo.layout"
+      "layer": "volvo.blocks"
     },
     {
-      "name": "stack-48",
+      "name": "statement-2",
       "prefixes": [],
       "declarations": [
-        "margin-top: var(--stack-gap)",
-        "--stack-gap: var(--v-space-48)"
+        "font: var(--v-font-statement-2)"
       ],
-      "layer": "volvo.layout"
+      "layer": "volvo.blocks"
     },
     {
-      "name": "stack-64",
+      "name": "statement-3",
       "prefixes": [],
       "declarations": [
-        "margin-top: var(--stack-gap)",
-        "--stack-gap: var(--v-space-64)"
+        "font: var(--v-font-statement-3)",
+        "--stack-gap: var(--v-space-24)",
+        "--stack-gap: var(--v-space-32)"
       ],
       "layer": "volvo.layout"
     },
     {
-      "name": "stack-s",
+      "name": "statement-signature",
       "prefixes": [],
       "declarations": [
-        "margin-top: var(--stack-gap)",
-        "--stack-gap: var(--v-space-s)"
+        "font: var(--v-font-statement-signature)",
+        "letter-spacing: .02em"
       ],
-      "layer": "volvo.layout"
+      "layer": "volvo.blocks"
     },
     {
-      "name": "stack-m",
+      "name": "tap-area",
       "prefixes": [],
       "declarations": [
-        "margin-top: var(--stack-gap)",
-        "--stack-gap: var(--v-space-m)"
-      ],
-      "layer": "volvo.layout"
-    },
-    {
-      "name": "stack-l",
-      "prefixes": [],
-      "declarations": [
-        "margin-top: var(--stack-gap)",
-        "--stack-gap: var(--v-space-l)"
+        "cursor: pointer",
+        "transition: color, background-color, border-color, box-shadow, text-decoration-color, fill, stroke",
+        "transition-duration: var(--_v-transition-speed-default)",
+        "display: block",
+        "position: relative"
       ],
-      "layer": "volvo.layout"
+      "layer": "volvo.blocks"
     },
     {
-      "name": "stack-text",
+      "name": "button-group",
       "prefixes": [],
       "declarations": [
-        "margin-top: var(--stack-gap)",
-        "--stack-gap: var(--v-space-16)",
-        "--stack-gap: var(--v-space-8)",
-        "--stack-gap: var(--v-space-4)",
-        "--stack-gap: calc(var(--v-space-8)  + 1em)",
+        "gap: var(--v-space-16)",
+        "flex-wrap: wrap",
+        "display: flex",
+        "container: button-group / inline-size",
+        "flex: 1 0 40%",
+        "flex: 1 0 40cqw",
         "--stack-gap: var(--v-space-24)",
-        "--stack-gap: 0rem",
-        "--stack-gap: var(--v-space-32)"
+        "--stack-gap: var(--v-space-32)",
+        "--stack-gap: var(--v-space-16)"
       ],
       "layer": "volvo.layout"
     },
     {
-      "name": "heading-1",
+      "name": "w-xs",
       "prefixes": [],
       "declarations": [
-        "--stack-gap: var(--v-space-8)",
-        "--stack-gap: calc(var(--v-space-8)  + 1em)",
-        "font: var(--v-font-heading-1)"
+        "--_columns-total-width: var(--v-size-grid-xs)",
+        "width: var(--_columns-total-width)"
       ],
-      "layer": "volvo.blocks"
+      "layer": "volvo.layout"
     },
     {
-      "name": "heading-2",
+      "name": "container-xs",
       "prefixes": [],
       "declarations": [
-        "--stack-gap: var(--v-space-8)",
-        "--stack-gap: calc(var(--v-space-8)  + 1em)",
-        "font: var(--v-font-heading-2)"
+        "--_columns-total-width: var(--v-size-grid-xs)",
+        "--_outer-margin: 0px",
+        "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)"
       ],
-      "layer": "volvo.blocks"
+      "layer": "volvo.layout"
     },
     {
-      "name": "heading-3",
+      "name": "w-sm",
       "prefixes": [],
       "declarations": [
-        "--stack-gap: var(--v-space-8)",
-        "--stack-gap: calc(var(--v-space-8)  + 1em)",
-        "--stack-gap: var(--v-space-24)",
-        "font: var(--v-font-heading-3)"
-      ],
-      "layer": "volvo.blocks"
-    },
-    {
-      "name": "title-20",
-      "prefixes": [
-        "lg",
-        "md"
-      ],
-      "declarations": [
-        "--stack-gap: var(--v-space-8)",
-        "--stack-gap: var(--v-space-4)",
-        "--stack-gap: var(--v-space-24)",
-        "--stack-gap: var(--v-space-16)",
-        "font-size: var(--v-font-title-20-size)",
-        "line-height: var(--v-font-title-20-lineheight)"
+        "--_columns-total-width: var(--v-size-grid-sm)",
+        "width: var(--_columns-total-width)"
       ],
-      "layer": "volvo.utilities"
+      "layer": "volvo.layout"
     },
     {
-      "name": "body-16",
+      "name": "container-sm",
       "prefixes": [],
       "declarations": [
-        "--stack-gap: var(--v-space-8)",
-        "--stack-gap: var(--v-space-4)",
-        "--stack-gap: var(--v-space-16)",
-        "font-size: var(--v-font-16-size)",
-        "line-height: var(--v-font-16-lineheight)"
+        "--_columns-total-width: var(--v-size-grid-sm)",
+        "--_outer-margin: 0px",
+        "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)"
       ],
-      "layer": "volvo.utilities"
+      "layer": "volvo.layout"
     },
     {
-      "name": "list",
+      "name": "w-md",
       "prefixes": [],
       "declarations": [
-        "--stack-gap: var(--v-space-8)",
-        "list-style-type: revert",
-        "padding-inline-start: 2rem"
+        "--_columns-total-width: var(--v-size-grid-md)",
+        "width: var(--_columns-total-width)"
       ],
-      "layer": "volvo.blocks"
+      "layer": "volvo.layout"
     },
     {
-      "name": "micro",
+      "name": "container-md",
       "prefixes": [],
       "declarations": [
-        "--stack-gap: var(--v-space-8)",
-        "--stack-gap: 0rem",
-        "font-size: var(--v-font-12-size)",
-        "line-height: var(--v-font-12-lineheight)",
-        "letter-spacing: .02em"
+        "--_columns-total-width: var(--v-size-grid-md)",
+        "--_outer-margin: 0px",
+        "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)"
       ],
-      "layer": "volvo.utilities"
+      "layer": "volvo.layout"
     },
     {
-      "name": "font-medium",
+      "name": "w-lg",
       "prefixes": [],
       "declarations": [
-        "--stack-gap: var(--v-space-4)",
-        "--stack-gap: var(--v-space-16)",
-        "font-weight: 500"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "title-24",
-      "prefixes": [
-        "lg",
-        "md"
-      ],
-      "declarations": [
-        "--stack-gap: var(--v-space-4)",
-        "--stack-gap: var(--v-space-16)",
-        "font-size: var(--v-font-title-24-size)",
-        "line-height: var(--v-font-title-24-lineheight)"
+        "--_columns-total-width: var(--v-size-grid-lg)",
+        "width: var(--_columns-total-width)"
       ],
-      "layer": "volvo.utilities"
+      "layer": "volvo.layout"
     },
     {
-      "name": "statement-3",
+      "name": "container-lg",
       "prefixes": [],
       "declarations": [
-        "--stack-gap: var(--v-space-24)",
-        "--stack-gap: var(--v-space-32)",
-        "font: var(--v-font-statement-3)"
+        "--_columns-total-width: var(--v-size-grid-lg)",
+        "--_outer-margin: 0px",
+        "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)"
       ],
-      "layer": "volvo.blocks"
+      "layer": "volvo.layout"
     },
     {
-      "name": "v-input-floating-label",
+      "name": "w-xl",
       "prefixes": [],
       "declarations": [
-        "--stack-gap: var(--v-space-32)",
-        "position: relative",
-        "--_transform-origin: var(--_rtl-toggle) 100%",
-        "z-index: 1",
-        "color: var(--v-color-foreground-secondary)",
-        "pointer-events: none",
-        "transition: transform var(--v-transition-default)",
-        "transform-origin: var(--_transform-origin, 0)",
-        "top: 0",
-        "position: absolute",
-        "inset-inline-start: var(--v-space-16)",
-        "transform: translateY(5px)scale(.75)",
-        "color: var(--v-color-foreground-feedback-red)",
-        "height: 3.5rem",
-        "padding-top: 1.625rem",
-        "padding-bottom: .625rem"
+        "--_columns-total-width: var(--v-size-grid-xl)",
+        "width: var(--_columns-total-width)"
       ],
-      "layer": "volvo.blocks"
+      "layer": "volvo.layout"
     },
     {
-      "name": "layout-4-5",
+      "name": "container",
       "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)",
+        "--_columns-total-width: var(--v-size-grid-xl)",
         "--_outer-margin: 0px",
-        "grid-template-columns: 1fr 1fr"
+        "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)"
       ],
       "layer": "volvo.layout"
     },
     {
-      "name": "layout-5-4",
+      "name": "container-xl",
       "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)",
+        "--_columns-total-width: var(--v-size-grid-xl)",
         "--_outer-margin: 0px",
-        "grid-template-columns: 1fr 1fr"
+        "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)"
       ],
       "layer": "volvo.layout"
     },
     {
-      "name": "layout-6-4",
+      "name": "container-max",
       "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"
+        "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)",
+        "max-width: min((100vw - var(--v-space-pagemargin) * 2)  + var(--_outer-margin), 160rem)"
       ],
       "layer": "volvo.layout"
     },
     {
-      "name": "layout-4-6",
+      "name": "max-w-prose",
       "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"
+        "max-width: var(--v-size-contentmax)"
       ],
       "layer": "volvo.layout"
     },
     {
-      "name": "backdrop",
+      "name": "reel",
       "prefixes": [],
       "declarations": [
-        "background-color: #000000a3",
-        "z-index: calc(var(--v-index-overlay)  - 1)",
-        "justify-content: center",
-        "align-items: center",
+        "scroll-snap-type: x mandatory",
+        "scrollbar-width: none",
         "display: flex",
-        "position: fixed",
-        "inset: 0"
-      ],
-      "layer": "volvo.blocks"
-    },
-    {
-      "name": "icon-button-filled",
-      "prefixes": [],
-      "declarations": [
-        "user-select: none",
-        "transition: transform var(--v-transition-default), background-color var(--v-transition-default)",
-        "justify-content: center",
-        "align-items: center",
-        "min-width: max-content",
-        "display: inline-flex",
-        "position: relative",
-        "opacity: var(--_v-disabled-opacity)",
-        "--button-accent-color: var(--v-color-surface-neutral)",
-        "--_color: var(--v-color-foreground-inverted)",
-        "--_overlay-rate: 0%",
-        "color: var(--_color)",
-        "background: color-mix(in oklab, var(--button-accent-color), var(--_color) var(--_overlay-rate))",
-        "--button-accent-color: var(--v-color-surface-accent-blue)",
-        "--_color: var(--v-color-always-white)",
-        "--button-accent-color: var(--v-color-surface-feedback-red)",
-        "background: var(--button-accent-color)",
-        "--_overlay-rate: var(--_v-color-mix-strong)",
-        "transform: scale(.95)",
-        "border-radius: var(--v-radius-full)",
-        "flex-shrink: 0",
-        "width: 2.5rem",
-        "height: 2.5rem"
-      ],
-      "layer": "volvo.blocks"
-    },
-    {
-      "name": "icon-button-outlined",
-      "prefixes": [],
-      "declarations": [
-        "user-select: none",
-        "transition: transform var(--v-transition-default), background-color var(--v-transition-default)",
-        "justify-content: center",
-        "align-items: center",
-        "min-width: max-content",
-        "display: inline-flex",
-        "position: relative",
-        "opacity: var(--_v-disabled-opacity)",
-        "box-shadow: inset 0 0 0 1px var(--button-accent-color)",
-        "color: var(--v-color-foreground-inverted)",
-        "background-color: var(--button-accent-color)",
-        "transform: scale(.95)",
-        "--button-accent-color: var(--v-color-foreground-primary)",
-        "color: var(--button-accent-color)",
-        "--button-accent-color: var(--v-color-foreground-accent-blue)",
-        "--button-accent-color: var(--v-color-foreground-feedback-red)",
-        "border-radius: var(--v-radius-full)",
-        "flex-shrink: 0",
-        "width: 2.5rem",
-        "height: 2.5rem"
+        "overflow: scroll hidden"
       ],
-      "layer": "volvo.blocks"
+      "layer": "volvo.layout"
     },
     {
-      "name": "icon-button-clear",
+      "name": "reel-indicators",
       "prefixes": [],
       "declarations": [
-        "user-select: none",
-        "transition: transform var(--v-transition-default), background-color var(--v-transition-default)",
+        "flex-direction: row",
         "justify-content: center",
-        "align-items: center",
-        "min-width: max-content",
-        "display: inline-flex",
-        "position: relative",
-        "opacity: var(--_v-disabled-opacity)",
-        "transform: scale(.95)",
-        "--button-accent-color: var(--v-color-foreground-primary)",
-        "color: var(--button-accent-color)",
-        "--button-accent-color: var(--v-color-foreground-accent-blue)",
-        "--button-accent-color: var(--v-color-foreground-feedback-red)",
-        "border-radius: var(--v-radius-full)",
-        "flex-shrink: 0",
-        "width: 2.5rem",
-        "height: 2.5rem",
-        "background-color: color-mix(in lab, var(--background-color, var(--v-color-background-primary)), var(--button-accent-color) var(--_v-color-mix-subtle))"
+        "column-gap: 4px",
+        "margin-block: 32px",
+        "display: flex",
+        "background-color: var(--v-color-ornament-primary)",
+        "border-radius: 9999px",
+        "width: .5rem",
+        "height: .5rem",
+        "transition: background-color .2s",
+        "background-color: var(--v-color-surface-neutral)"
       ],
-      "layer": "volvo.blocks"
+      "layer": "volvo.layout"
     },
     {
-      "name": "spinner",
+      "name": "stack-4",
       "prefixes": [],
       "declarations": [
-        "width: 1.5rem",
-        "height: 1.5rem",
-        "position: absolute",
-        "width: 1rem",
-        "height: 1rem",
-        "contain: strict",
-        "appearance: none",
-        "background: none",
-        "border: 2px solid",
-        "border-bottom-color: #0000",
-        "border-radius: 50%",
-        "width: 2.5rem",
-        "height: 2.5rem",
-        "animation: .7s cubic-bezier(.62, .63, 0, .53) infinite rotate",
-        "display: inline-flex",
-        "display: none"
+        "margin-top: var(--stack-gap)",
+        "--stack-gap: var(--v-space-4)"
       ],
-      "layer": "volvo.blocks"
+      "layer": "volvo.layout"
     },
     {
-      "name": "icon-sprite",
+      "name": "stack-8",
       "prefixes": [],
       "declarations": [
-        "margin-inline-start: var(--v-space-8)",
-        "width: var(--_height)",
-        "min-width: var(--_height)",
-        "height: var(--_height)",
-        "min-height: var(--_height)",
-        "vertical-align: middle",
-        "flex-grow: 0",
-        "flex-shrink: 0",
-        "display: inline-block",
-        "--_height: 5rem",
-        "--_height: 4rem",
-        "--_height: 3rem",
-        "--_height: 2.5rem",
-        "--_height: 2rem",
-        "--_height: 1.5rem",
-        "--_height: 1rem",
-        "--_height: .75rem",
-        "--_height: .5rem",
-        "--_y-offset: var(--_dark-toggle) 7",
-        "fill: currentColor",
-        "object-fit: cover",
-        "object-position: 0 calc(var(--_y-offset, 0) * -1 * var(--_height, 0))",
-        "transform: scaleX(-1)"
+        "margin-top: var(--stack-gap)",
+        "--stack-gap: var(--v-space-8)"
       ],
-      "layer": "volvo.blocks"
+      "layer": "volvo.layout"
     },
     {
-      "name": "dialog",
+      "name": "stack-16",
       "prefixes": [],
       "declarations": [
-        "z-index: var(--v-index-overlay)",
-        "padding-block: var(--v-space-48)",
-        "padding-inline: var(--v-space-24)",
-        "color: var(--v-color-foreground-primary)",
-        "background-color: var(--v-color-background-secondary)",
-        "margin: auto",
-        "width: 100%",
-        "max-width: 100%",
-        "height: fit-content",
-        "max-height: calc(100vh + -1 * min(2rem, 20vh))",
-        "margin-bottom: 0",
-        "position: fixed",
-        "inset: 0",
-        "overflow-y: auto",
-        "padding-top: 0",
-        "padding-inline: var(--v-space-48)",
-        "max-width: min(31rem, 100vw - 2rem)",
-        "margin-bottom: auto"
+        "margin-top: var(--stack-gap)",
+        "--stack-gap: var(--v-space-16)"
       ],
-      "layer": "volvo.blocks"
+      "layer": "volvo.layout"
     },
     {
-      "name": "dialog__close",
+      "name": "stack-24",
       "prefixes": [],
       "declarations": [
-        "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"
+        "margin-top: var(--stack-gap)",
+        "--stack-gap: var(--v-space-24)"
       ],
-      "layer": "volvo.blocks"
+      "layer": "volvo.layout"
     },
     {
-      "name": "radio",
+      "name": "stack-32",
       "prefixes": [],
       "declarations": [
-        "background-color: var(--_input-background-color, var(--v-color-background-primary))",
-        "border-radius: var(--v-radius-4)",
-        "box-shadow: inset 0 0 0 var(--_input-border-size, 1px) var(--_input-border-color, var(--v-color-foreground-secondary))",
-        "transition: box-shadow var(--v-transition-default)",
-        "place-content: center",
-        "width: 1rem",
-        "height: 1rem",
-        "margin-top: .25em",
-        "display: inline-grid",
-        "position: relative",
-        "border-radius: var(--v-radius-full)"
+        "margin-top: var(--stack-gap)",
+        "--stack-gap: var(--v-space-32)"
       ],
-      "layer": "volvo.blocks"
+      "layer": "volvo.layout"
     },
     {
-      "name": "checkbox",
+      "name": "stack-48",
       "prefixes": [],
       "declarations": [
-        "background-color: var(--_input-background-color, var(--v-color-background-primary))",
-        "border-radius: var(--v-radius-4)",
-        "box-shadow: inset 0 0 0 var(--_input-border-size, 1px) var(--_input-border-color, var(--v-color-foreground-secondary))",
-        "transition: box-shadow var(--v-transition-default)",
-        "place-content: center",
-        "width: 1rem",
-        "height: 1rem",
-        "margin-top: .25em",
-        "display: inline-grid",
-        "position: relative"
+        "margin-top: var(--stack-gap)",
+        "--stack-gap: var(--v-space-48)"
       ],
-      "layer": "volvo.blocks"
+      "layer": "volvo.layout"
     },
     {
-      "name": "switch",
+      "name": "stack-64",
       "prefixes": [],
       "declarations": [
-        "--_background-color: var(--_toggle-background)",
-        "--_indicator-color: var(--v-color-always-white)",
-        "appearance: none",
-        "background-color: var(--_background-color)",
-        "border-radius: var(--v-radius-full)",
-        "flex-shrink: 0",
-        "width: 2.5rem",
-        "height: 1.5rem",
-        "padding: .125rem",
-        "transition: background .25s",
-        "display: inline-flex"
+        "margin-top: var(--stack-gap)",
+        "--stack-gap: var(--v-space-64)"
       ],
-      "layer": "volvo.blocks"
+      "layer": "volvo.layout"
     },
     {
-      "name": "wordmark",
+      "name": "stack-s",
       "prefixes": [],
       "declarations": [
-        "width: var(--_height)",
-        "min-width: var(--_height)",
-        "height: var(--_height)",
-        "min-height: var(--_height)",
-        "vertical-align: middle",
-        "flex-grow: 0",
-        "flex-shrink: 0",
-        "display: inline-block",
-        "--_height: 5rem",
-        "--_height: 4rem",
-        "--_height: 3rem",
-        "--_height: 2.5rem",
-        "--_height: 2rem",
-        "--_height: 1.5rem",
-        "--_height: 1rem",
-        "--_height: .75rem",
-        "--_height: .5rem",
-        "width: calc(var(--_height) * 13)",
-        "min-width: calc(var(--_height) * 13)",
-        "object-position: 0 -999px",
-        "mask-size: cover",
-        "mask-repeat: no-repeat",
-        "mask-image: var(--mask-url, var(--icon-url))",
-        "background-color: currentColor"
+        "margin-top: var(--stack-gap)",
+        "--stack-gap: var(--v-space-s)"
       ],
-      "layer": "volvo.blocks"
+      "layer": "volvo.layout"
     },
     {
-      "name": "icon-mask",
+      "name": "stack-m",
       "prefixes": [],
       "declarations": [
-        "width: var(--_height)",
-        "min-width: var(--_height)",
-        "height: var(--_height)",
-        "min-height: var(--_height)",
-        "vertical-align: middle",
-        "flex-grow: 0",
-        "flex-shrink: 0",
-        "display: inline-block",
-        "--_height: 5rem",
-        "--_height: 4rem",
-        "--_height: 3rem",
-        "--_height: 2.5rem",
-        "--_height: 2rem",
-        "--_height: 1.5rem",
-        "--_height: 1rem",
-        "--_height: .75rem",
-        "--_height: .5rem",
-        "object-position: 0 -999px",
-        "mask-size: cover",
-        "mask-repeat: no-repeat",
-        "mask-image: var(--mask-url, var(--icon-url))",
-        "background-color: currentColor",
-        "transform: scaleX(-1)"
+        "margin-top: var(--stack-gap)",
+        "--stack-gap: var(--v-space-m)"
       ],
-      "layer": "volvo.blocks"
+      "layer": "volvo.layout"
     },
     {
-      "name": "v-label",
+      "name": "stack-l",
       "prefixes": [],
       "declarations": [
-        "flex-direction: column",
-        "display: inline-flex",
-        "margin-top: var(--v-space-8)"
+        "margin-top: var(--stack-gap)",
+        "--stack-gap: var(--v-space-l)"
       ],
-      "layer": "volvo.blocks"
+      "layer": "volvo.layout"
     },
     {
-      "name": "v-input",
+      "name": "stack-text",
       "prefixes": [],
       "declarations": [
-        "padding: var(--v-space-16)",
-        "background-color: var(--_input-background-color, var(--v-color-background-primary))",
-        "border-radius: var(--v-radius-4)",
-        "box-shadow: inset 0 0 0 var(--_input-border-size, 1px) var(--_input-border-color, var(--v-color-ornament-primary))",
-        "transition: box-shadow var(--v-transition-default)",
-        "outline: none",
-        "height: 3rem",
-        "width: 100%",
-        "--_bg-pos-x: var(--_rtl-toggle) left",
-        "background-image: var(--_icon-chevrondown)",
-        "background-repeat: no-repeat",
-        "background-position: center var(--_bg-pos-x, right) var(--v-space-16)",
-        "background-size: 1rem 1rem"
+        "margin-top: var(--stack-gap)",
+        "--stack-gap: var(--v-space-16)",
+        "--stack-gap: var(--v-space-8)",
+        "--stack-gap: var(--v-space-4)",
+        "--stack-gap: calc(var(--v-space-8)  + 1em)",
+        "--stack-gap: var(--v-space-24)",
+        "--stack-gap: 0rem",
+        "--stack-gap: var(--v-space-32)"
       ],
-      "layer": "volvo.blocks"
+      "layer": "volvo.layout"
     },
     {
-      "name": "link-inline",
+      "name": "title-20",
+      "prefixes": [
+        "lg",
+        "md"
+      ],
+      "declarations": [
+        "--stack-gap: var(--v-space-8)",
+        "--stack-gap: var(--v-space-4)",
+        "--stack-gap: var(--v-space-24)",
+        "--stack-gap: var(--v-space-16)",
+        "font-size: var(--v-font-title-20-size)",
+        "line-height: var(--v-font-title-20-lineheight)"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "body-16",
       "prefixes": [],
       "declarations": [
-        "color: var(--v-color-foreground-primary)",
-        "text-decoration-skip-ink: auto",
-        "text-underline-offset: .125em",
-        "text-decoration-line: underline"
+        "--stack-gap: var(--v-space-8)",
+        "--stack-gap: var(--v-space-4)",
+        "--stack-gap: var(--v-space-16)",
+        "font-size: var(--v-font-16-size)",
+        "line-height: var(--v-font-16-lineheight)"
       ],
-      "layer": "volvo.blocks"
+      "layer": "volvo.utilities"
     },
     {
-      "name": "link-underlined",
+      "name": "micro",
       "prefixes": [],
       "declarations": [
-        "text-decoration-line: underline",
-        "text-underline-offset: .125em",
-        "position: relative"
+        "--stack-gap: var(--v-space-8)",
+        "--stack-gap: 0rem",
+        "font-size: var(--v-font-12-size)",
+        "line-height: var(--v-font-12-lineheight)",
+        "letter-spacing: .02em"
       ],
-      "layer": "volvo.blocks"
+      "layer": "volvo.utilities"
     },
     {
-      "name": "link-plain",
+      "name": "font-medium",
       "prefixes": [],
       "declarations": [
-        "text-underline-offset: .125em",
-        "position: relative"
+        "--stack-gap: var(--v-space-4)",
+        "--stack-gap: var(--v-space-16)",
+        "font-weight: 500"
       ],
-      "layer": "volvo.blocks"
+      "layer": "volvo.utilities"
     },
     {
-      "name": "statement-1",
+      "name": "title-24",
+      "prefixes": [
+        "lg",
+        "md"
+      ],
+      "declarations": [
+        "--stack-gap: var(--v-space-4)",
+        "--stack-gap: var(--v-space-16)",
+        "font-size: var(--v-font-title-24-size)",
+        "line-height: var(--v-font-title-24-lineheight)"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "layout-4-5",
       "prefixes": [],
       "declarations": [
-        "font: var(--v-font-statement-1)"
+        "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.blocks"
+      "layer": "volvo.layout"
     },
     {
-      "name": "statement-2",
+      "name": "layout-5-4",
       "prefixes": [],
       "declarations": [
-        "font: var(--v-font-statement-2)"
+        "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.blocks"
+      "layer": "volvo.layout"
     },
     {
-      "name": "statement-signature",
+      "name": "layout-6-4",
       "prefixes": [],
       "declarations": [
-        "font: var(--v-font-statement-signature)",
-        "letter-spacing: .02em"
+        "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.blocks"
+      "layer": "volvo.layout"
     },
     {
-      "name": "tap-area",
+      "name": "layout-4-6",
       "prefixes": [],
       "declarations": [
-        "cursor: pointer",
-        "transition: color, background-color, border-color, box-shadow, text-decoration-color, fill, stroke",
-        "transition-duration: var(--_v-transition-speed-default)",
-        "display: block",
-        "position: relative"
+        "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.blocks"
+      "layer": "volvo.layout"
     },
     {
       "name": "fade-in",
@@ -3407,7 +3428,11 @@
     },
     {
       "name": "gap-x-gutter",
-      "prefixes": [],
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
       "declarations": [
         "column-gap: var(--v-space-gutter)"
       ],
@@ -4907,7 +4932,11 @@
     },
     {
       "name": "mx-pagemargin",
-      "prefixes": [],
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
       "declarations": [
         "margin-inline-end: var(--v-space-pagemargin)",
         "margin-inline-start: var(--v-space-pagemargin)"
@@ -4916,7 +4945,11 @@
     },
     {
       "name": "mr-pagemargin",
-      "prefixes": [],
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
       "declarations": [
         "margin-inline-end: var(--v-space-pagemargin)"
       ],
@@ -4924,7 +4957,11 @@
     },
     {
       "name": "ml-pagemargin",
-      "prefixes": [],
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
       "declarations": [
         "margin-inline-start: var(--v-space-pagemargin)"
       ],
@@ -5863,7 +5900,11 @@
     },
     {
       "name": "px-pagemargin",
-      "prefixes": [],
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
       "declarations": [
         "padding-inline-end: var(--v-space-pagemargin)",
         "padding-inline-start: var(--v-space-pagemargin)"
@@ -5872,7 +5913,11 @@
     },
     {
       "name": "pr-pagemargin",
-      "prefixes": [],
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
       "declarations": [
         "padding-inline-end: var(--v-space-pagemargin)"
       ],
@@ -5880,7 +5925,11 @@
     },
     {
       "name": "pl-pagemargin",
-      "prefixes": [],
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
       "declarations": [
         "padding-inline-start: var(--v-space-pagemargin)"
       ],