@volvo-cars/css 0.27.0 → 0.28.0

package/dist/meta.json

@@ -44,6 +44,7 @@
     "button-group",
     "button-outlined",
     "button-text",
+    "checkbox",
     "checked:border",
     "checked:border-2",
     "checked:border-accent-blue",
@@ -154,6 +155,7 @@
     "lg:text-start",
     "lg:until-xl:hidden",
     "link-inline",
+    "list",
     "m-0",
     "m-16",
     "m-24",
@@ -329,6 +331,7 @@
     "py-l",
     "py-m",
     "py-s",
+    "radio",
     "rounded",
     "rounded-full",
     "selected:border",
@@ -382,6 +385,7 @@
     "v-input-delegate",
     "v-input-floating-label",
     "v-input__password-visibility-control",
+    "v-label",
     "w-lg",
     "w-md",
     "w-sm",
@@ -426,7 +430,10 @@
         "display: flex",
         "container: button-group / inline-size",
         "flex: 1 0 40%",
-        "flex: 1 0 40cqw"
+        "flex: 1 0 40cqw",
+        "--stack-gap: var(--v-space-24)",
+        "--stack-gap: var(--v-space-32)",
+        "--stack-gap: var(--v-space-16)"
       ],
       "layer": "volvo.layout"
     },
@@ -436,10 +443,12 @@
       "declarations": [
         "flex: 1 0 40%",
         "flex: 1 0 40cqw",
-        "--_height: 3rem",
+        "--stack-gap: var(--v-space-24)",
+        "--stack-gap: var(--v-space-32)",
+        "--stack-gap: var(--v-space-16)",
         "min-width: max-content",
         "max-width: 100%",
-        "height: var(--_height)",
+        "height: 3rem",
         "font-size: var(--v-font-16-size)",
         "font-weight: var(--v-font-emphasis-weight)",
         "color: var(--_color)",
@@ -453,7 +462,13 @@
         "position: relative",
         "overflow: hidden",
         "--_min-touch-area: 44px",
-        "--_height: 2rem",
+        "width: 100%",
+        "height: 44px",
+        "content: \"\"",
+        "position: absolute",
+        "top: 50%",
+        "transform: translateY(-50%)",
+        "height: 2rem",
         "font-size: var(--v-font-12-size)",
         "color: var(--_color-disabled, var(--_color))",
         "background-color: var(--_background-disabled, var(--_background))",
@@ -474,15 +489,9 @@
         "border-radius: var(--v-radius-4)",
         "width: 1.5rem",
         "height: 1.5rem",
-        "position: absolute",
         "padding-inline: var(--v-space-16)",
         "width: 1rem",
         "height: 1rem",
-        "width: 100%",
-        "height: 44px",
-        "content: \"\"",
-        "top: 50%",
-        "transform: translateY(-50%)",
         "transform: scale(.95)"
       ],
       "layer": "volvo.blocks"
@@ -493,10 +502,12 @@
       "declarations": [
         "flex: 1 0 40%",
         "flex: 1 0 40cqw",
-        "--_height: 3rem",
+        "--stack-gap: var(--v-space-24)",
+        "--stack-gap: var(--v-space-32)",
+        "--stack-gap: var(--v-space-16)",
         "min-width: max-content",
         "max-width: 100%",
-        "height: var(--_height)",
+        "height: 3rem",
         "font-size: var(--v-font-16-size)",
         "font-weight: var(--v-font-emphasis-weight)",
         "color: var(--_color)",
@@ -510,7 +521,13 @@
         "position: relative",
         "overflow: hidden",
         "--_min-touch-area: 44px",
-        "--_height: 2rem",
+        "width: 100%",
+        "height: 44px",
+        "content: \"\"",
+        "position: absolute",
+        "top: 50%",
+        "transform: translateY(-50%)",
+        "height: 2rem",
         "font-size: var(--v-font-12-size)",
         "color: var(--_color-disabled, var(--_color))",
         "background-color: var(--_background-disabled, var(--_background))",
@@ -530,15 +547,9 @@
         "border-radius: var(--v-radius-4)",
         "width: 1.5rem",
         "height: 1.5rem",
-        "position: absolute",
         "padding-inline: var(--v-space-16)",
         "width: 1rem",
         "height: 1rem",
-        "width: 100%",
-        "height: 44px",
-        "content: \"\"",
-        "top: 50%",
-        "transform: translateY(-50%)",
         "transform: scale(.95)"
       ],
       "layer": "volvo.blocks"
@@ -549,10 +560,11 @@
       "declarations": [
         "flex: 1 0 40%",
         "flex: 1 0 40cqw",
-        "--_height: 3rem",
+        "--stack-gap: var(--v-space-24)",
+        "--stack-gap: var(--v-space-16)",
         "min-width: max-content",
         "max-width: 100%",
-        "height: var(--_height)",
+        "height: 3rem",
         "font-size: var(--v-font-16-size)",
         "font-weight: var(--v-font-emphasis-weight)",
         "color: var(--_color)",
@@ -566,7 +578,13 @@
         "position: relative",
         "overflow: hidden",
         "--_min-touch-area: 44px",
-        "--_height: 2rem",
+        "width: 100%",
+        "height: 44px",
+        "content: \"\"",
+        "position: absolute",
+        "top: 50%",
+        "transform: translateY(-50%)",
+        "height: 2rem",
         "font-size: var(--v-font-12-size)",
         "color: var(--_color-disabled, var(--_color))",
         "background-color: var(--_background-disabled, var(--_background))",
@@ -575,15 +593,13 @@
         "--_color: var(--v-color-foreground-primary)",
         "--_color-hover: var(--_v-color-foreground-primary-hover)",
         "--_color-disabled: var(--_v-color-surface-neutral-disabled)",
-        "height: max(var(--_min-touch-area, var(--_height)), var(--_height))",
-        "margin-block: min(0rem, (var(--_height)  - max(var(--_min-touch-area), var(--_height))) / 2)",
         "text-align: start",
         "--_color: var(--v-color-surface-feedback-red)",
         "--_color-disabled: var(--_v-color-surface-feedback-red-disabled)",
         "--_color-hover: var(--_v-color-surface-feedback-red-hover)",
         "--_arrow-icon: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.96' fill-rule='evenodd' d='m10 8.707-4-4-4 4L1.293 8 6 3.293 10.707 8 10 8.707Z' clip-rule='evenodd'/%3E%3Cpath stroke='%23000' stroke-linecap='square' stroke-opacity='.96' stroke-width='.4' d='M9.858 8.848 10 8.99l.141-.142.707-.707L10.99 8l-.142-.141L6.141 3.15 6 3.01l-.141.141L1.15 7.86l-.141.14.141.142.708.707.14.142.142-.142L6 4.99l3.858 3.858Z'/%3E%3C/svg%3E\")",
-        "width: .75rem",
-        "height: .75rem",
+        "width: .75em",
+        "height: .75em",
         "mask: var(--_arrow-icon)",
         "rotate: var(--_arrow-rotation)",
         "flex-shrink: 0",
@@ -592,7 +608,6 @@
         "mask-size: cover",
         "width: .5rem",
         "height: .5rem",
-        "content: \"\"",
         "background-color: currentColor",
         "margin-inline-start: var(--v-space-4)",
         "margin-inline-end: var(--v-space-4)",
@@ -872,24 +887,158 @@
       "declarations": [
         "margin-top: var(--stack-gap)",
         "--stack-gap: var(--v-space-16)",
-        "--stack-gap: var(--v-space-24)"
+        "--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.layout"
     },
+    {
+      "name": "heading-1",
+      "prefixes": [],
+      "declarations": [
+        "--stack-gap: var(--v-space-8)",
+        "--stack-gap: calc(var(--v-space-8)  + 1em)",
+        "font: var(--v-font-heading-1)"
+      ],
+      "layer": "volvo.blocks"
+    },
+    {
+      "name": "heading-2",
+      "prefixes": [],
+      "declarations": [
+        "--stack-gap: var(--v-space-8)",
+        "--stack-gap: calc(var(--v-space-8)  + 1em)",
+        "font: var(--v-font-heading-2)"
+      ],
+      "layer": "volvo.blocks"
+    },
+    {
+      "name": "heading-3",
+      "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": [],
+      "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": [
+        "--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.utilities"
+    },
+    {
+      "name": "list",
+      "prefixes": [],
+      "declarations": [
+        "--stack-gap: var(--v-space-8)",
+        "list-style-type: revert",
+        "padding-inline-start: 2rem"
+      ],
+      "layer": "volvo.blocks"
+    },
+    {
+      "name": "micro",
+      "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"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "font-medium",
+      "prefixes": [],
+      "declarations": [
+        "--stack-gap: var(--v-space-4)",
+        "--stack-gap: var(--v-space-16)",
+        "font-weight: 500"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "title-24",
+      "prefixes": [],
+      "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": "statement-3",
       "prefixes": [],
       "declarations": [
         "--stack-gap: var(--v-space-24)",
+        "--stack-gap: var(--v-space-32)",
         "font: var(--v-font-statement-3)"
       ],
       "layer": "volvo.blocks"
     },
+    {
+      "name": "v-input-floating-label",
+      "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"
+      ],
+      "layer": "volvo.blocks"
+    },
     {
       "name": "backdrop",
       "prefixes": [],
       "declarations": [
-        "background-color: var(--_v-color-black-64)"
+        "background-color: var(--_v-color-black-64)",
+        "z-index: calc(var(--v-index-overlay)  - 1)",
+        "justify-content: center",
+        "align-items: center",
+        "display: flex",
+        "position: fixed",
+        "inset: 0"
       ],
       "layer": "volvo.blocks"
     },
@@ -940,26 +1089,47 @@
       "layer": "volvo.blocks"
     },
     {
-      "name": "heading-1",
+      "name": "radio",
       "prefixes": [],
       "declarations": [
-        "font: var(--v-font-heading-1)"
+        "width: var(--v-space-16)",
+        "height: 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-foreground-secondary))",
+        "transition: box-shadow var(--v-transition-default)",
+        "place-content: center",
+        "margin-top: .25em",
+        "display: inline-grid",
+        "position: relative",
+        "border-radius: var(--v-radius-full)"
       ],
       "layer": "volvo.blocks"
     },
     {
-      "name": "heading-2",
+      "name": "checkbox",
       "prefixes": [],
       "declarations": [
-        "font: var(--v-font-heading-2)"
+        "width: var(--v-space-16)",
+        "height: 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-foreground-secondary))",
+        "transition: box-shadow var(--v-transition-default)",
+        "place-content: center",
+        "margin-top: .25em",
+        "display: inline-grid",
+        "position: relative"
       ],
       "layer": "volvo.blocks"
     },
     {
-      "name": "heading-3",
+      "name": "v-label",
       "prefixes": [],
       "declarations": [
-        "font: var(--v-font-heading-3)"
+        "flex-direction: column",
+        "display: inline-flex",
+        "margin-top: var(--v-space-8)"
       ],
       "layer": "volvo.blocks"
     },
@@ -967,8 +1137,21 @@
       "name": "v-input",
       "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%",
         "--_input-border-color: var(--v-color-ornament-primary)",
-        "--_input-background-color: var(--v-color-background-secondary)"
+        "--_input-background-color: var(--v-color-background-secondary)",
+        "--_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: 1.5rem 1.5rem"
       ],
       "layer": "volvo.blocks"
     },
@@ -986,27 +1169,6 @@
       ],
       "layer": "volvo.blocks"
     },
-    {
-      "name": "v-input-floating-label",
-      "prefixes": [],
-      "declarations": [
-        "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)",
-        "height: 3.5rem",
-        "padding-top: 1.625rem",
-        "padding-bottom: .625rem"
-      ],
-      "layer": "volvo.blocks"
-    },
     {
       "name": "link-inline",
       "prefixes": [],
@@ -1681,51 +1843,6 @@
       ],
       "layer": "volvo.utilities"
     },
-    {
-      "name": "title-24",
-      "prefixes": [],
-      "declarations": [
-        "font-size: var(--v-font-title-24-size)",
-        "line-height: var(--v-font-title-24-lineheight)"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "title-20",
-      "prefixes": [],
-      "declarations": [
-        "font-size: var(--v-font-title-20-size)",
-        "line-height: var(--v-font-title-20-lineheight)"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "body-16",
-      "prefixes": [],
-      "declarations": [
-        "font-size: var(--v-font-16-size)",
-        "line-height: var(--v-font-16-lineheight)"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "micro",
-      "prefixes": [],
-      "declarations": [
-        "font-size: var(--v-font-12-size)",
-        "line-height: var(--v-font-12-lineheight)",
-        "letter-spacing: .02em"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "font-medium",
-      "prefixes": [],
-      "declarations": [
-        "font-weight: 500"
-      ],
-      "layer": "volvo.utilities"
-    },
     {
       "name": "font-light",
       "prefixes": [],