@volvo-cars/css 3.1.0 → 3.2.0

package/dist/media-queries.js.map

@@ -1 +1 @@
-{"version":3,"file":"media-queries.js","names":["queries"],"sources":["../src/media-queries.ts"],"sourcesContent":["const queries = {\n  hover: '(hover: hover)',\n  md: '(min-width: 30rem)',\n  lg: '(min-width: 64rem)',\n  xl: '(min-width: 100rem)',\n} as const;\n\nexport default queries;\n"],"mappings":"AAAA,MAAMA,EAAU,CACd,MAAO,iBACP,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACN"}
+{"version":3,"file":"media-queries.js","names":["queries"],"sources":["../src/media-queries.ts"],"sourcesContent":["const queries = {\n  hover: '(hover: hover)',\n  md: '(min-width: 30rem)',\n  lg: '(min-width: 64rem)',\n  xl: '(min-width: 100rem)',\n} as const;\n\nexport default queries;\n"],"mappings":"AAAA,MAAMA,EAAU,CACd,MAAO,iBACP,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACN,E"}

package/dist/meta.json

@@ -83,6 +83,8 @@
     "-translate-y-1/2",
     "-translate-y-full",
     "absolute",
+    "action-bar",
+    "action-bar-menu",
     "active:scale-pressed",
     "aspect-1/1",
     "aspect-16/9",
@@ -345,6 +347,8 @@
     "icon-button-outlined",
     "icon-mask",
     "icon-sprite",
+    "icon-toggle-button",
+    "icon-toggle-button-clear",
     "img",
     "inline",
     "inline-flex",
@@ -1842,6 +1846,8 @@
     "title-page",
     "title-section",
     "toast-message",
+    "toggle-button",
+    "toggle-button-clear",
     "tooltip",
     "top-0",
     "top-1/2",
@@ -2436,6 +2442,33 @@
     "z-spinner"
   ],
   "classes": [
+    {
+      "name": "action-bar",
+      "prefixes": [],
+      "declarations": [
+        "--v-component: action-bar",
+        "padding-block: var(--v-space-8)",
+        "padding-inline: var(--v-space-16)",
+        "background-color: var(--v-color-always-black)",
+        "border: 1px solid var(--_border-color, transparent)",
+        "border-radius: var(--v-radius-md)",
+        "anchor-name: --bulk-edit",
+        "box-shadow: 0 6px 12px #00000029, 0 8px 16px #0000001f, 0 12px 24px #00000014"
+      ],
+      "layer": "volvo.blocks"
+    },
+    {
+      "name": "action-bar-menu",
+      "prefixes": [],
+      "declarations": [
+        "position-anchor: --bulk-edit",
+        "position-area: top span-left",
+        "margin-bottom: var(--v-space-4)",
+        "border: 1px solid var(--_border-color, transparent)",
+        "border-radius: var(--v-radius-md)"
+      ],
+      "layer": "volvo.blocks"
+    },
     {
       "name": "backdrop",
       "prefixes": [],
@@ -2470,6 +2503,7 @@
         "background: var(--button-accent-color)",
         "--_overlay-rate: 0%",
         "border-radius: var(--v-shape-emphasis)",
+        "--v-component: icon-button",
         "border-radius: var(--v-radius-full)",
         "flex-shrink: 0",
         "width: 2.5rem",
@@ -2494,6 +2528,7 @@
         "border-radius: var(--v-shape-emphasis)",
         "--button-accent-color: var(--v-color-foreground-primary)",
         "color: var(--button-accent-color)",
+        "--v-component: icon-button",
         "border-radius: var(--v-radius-full)",
         "flex-shrink: 0",
         "width: 2.5rem",
@@ -2517,6 +2552,7 @@
         "border-radius: var(--v-shape-emphasis)",
         "--button-accent-color: var(--v-color-foreground-primary)",
         "color: var(--button-accent-color)",
+        "--v-component: icon-button",
         "border-radius: var(--v-radius-full)",
         "flex-shrink: 0",
         "width: 2.5rem",
@@ -2535,6 +2571,7 @@
         "align-items: center",
         "display: inline-flex",
         "position: relative",
+        "--v-component: button",
         "max-width: 100%",
         "height: 3rem",
         "font-size: var(--v-font-16-size)",
@@ -2564,6 +2601,7 @@
         "align-items: center",
         "display: inline-flex",
         "position: relative",
+        "--v-component: button",
         "max-width: 100%",
         "height: 3rem",
         "font-size: var(--v-font-16-size)",
@@ -2592,6 +2630,7 @@
         "align-items: center",
         "display: inline-flex",
         "position: relative",
+        "--v-component: button",
         "max-width: 100%",
         "height: 3rem",
         "font-size: var(--v-font-16-size)",
@@ -2723,7 +2762,8 @@
       "name": "custom-select",
       "prefixes": [],
       "declarations": [
-        "min-width: 0"
+        "min-width: 0",
+        "--v-component: select"
       ],
       "layer": "volvo.blocks"
     },
@@ -2774,6 +2814,7 @@
       "name": "chip-selectable",
       "prefixes": [],
       "declarations": [
+        "--v-component: chips",
         "--_overlay-rate: 0%",
         "--_color: var(--v-color-foreground-primary)",
         "--spinner-size: 1rem",
@@ -2801,6 +2842,7 @@
       "name": "chip-dismissible",
       "prefixes": [],
       "declarations": [
+        "--v-component: chips",
         "--_overlay-rate: 0%",
         "--_color: var(--v-color-foreground-primary)",
         "--spinner-size: 1rem",
@@ -2829,6 +2871,7 @@
       "name": "link-inline",
       "prefixes": [],
       "declarations": [
+        "--v-component: links",
         "color: var(--v-color-foreground-primary)",
         "text-decoration-skip-ink: auto",
         "text-underline-offset: .125em",
@@ -2842,6 +2885,7 @@
       "declarations": [
         "text-decoration-skip-ink: auto",
         "text-decoration-line: underline",
+        "--v-component: links",
         "text-underline-offset: .125em",
         "position: relative"
       ],
@@ -2851,6 +2895,7 @@
       "name": "link-plain",
       "prefixes": [],
       "declarations": [
+        "--v-component: links",
         "text-underline-offset: .125em",
         "position: relative"
       ],
@@ -2870,6 +2915,7 @@
         "padding-block: var(--v-space-16)",
         "align-items: center",
         "display: flex",
+        "--v-component: list-item",
         "border-bottom: 1px solid var(--v-color-ornament-primary)",
         "list-style: none"
       ],
@@ -2883,6 +2929,7 @@
         "padding-block: var(--v-space-16)",
         "align-items: center",
         "display: flex",
+        "--v-component: list-item",
         "border-bottom: 1px solid var(--v-color-ornament-primary)",
         "list-style: none",
         "isolation: isolate",
@@ -2894,6 +2941,7 @@
       "name": "pagination-dots",
       "prefixes": [],
       "declarations": [
+        "--v-component: pagination",
         "flex-direction: row",
         "justify-content: center",
         "align-items: center",
@@ -2906,6 +2954,7 @@
       "name": "range",
       "prefixes": [],
       "declarations": [
+        "--v-component: range-slider",
         "--range-thumb-width: 1.5rem",
         "--_range-gradient-direction: to right"
       ],
@@ -2915,6 +2964,7 @@
       "name": "double-range",
       "prefixes": [],
       "declarations": [
+        "--v-component: range-slider",
         "--range-thumb-width: 1.5rem",
         "--_range-gradient-direction: to right"
       ],
@@ -2924,6 +2974,7 @@
       "name": "selectable-card",
       "prefixes": [],
       "declarations": [
+        "--v-component: selectable-cards",
         "--_card-border-color: var(--v-color-foreground-tertiary)",
         "--_card-border-width: 1px",
         "--_card-padding: var(--v-space-16)",
@@ -3079,7 +3130,8 @@
         "transition: color, background-color, border-color, box-shadow, text-decoration-color, fill, stroke",
         "transition-duration: var(--_v-transition-speed-default)",
         "display: block",
-        "background-color: color-mix(in lab,\n    var(--background-color, var(--v-color-background-primary)),\n    var(--tap-area-color, var(--color, var(--v-color-foreground-primary)))\n      var(--_overlay-rate, 0%))"
+        "background-color: color-mix(in lab,\n    var(--background-color, var(--v-color-background-primary)),\n    var(--tap-area-color, var(--color, var(--v-color-foreground-primary)))\n      var(--_overlay-rate, 0%))",
+        "--v-component: tap-area"
       ],
       "layer": "volvo.blocks"
     },
@@ -3093,6 +3145,7 @@
         "display: block",
         "flex-direction: column",
         "display: flex",
+        "--v-component: tiles",
         "text-align: start",
         "text-decoration: none",
         "padding-bottom: var(--v-space-16)",
@@ -3110,6 +3163,7 @@
         "display: block",
         "flex-direction: column",
         "display: flex",
+        "--v-component: tiles",
         "text-align: start",
         "text-decoration: none",
         "--background-color: var(--v-color-background-secondary)",
@@ -3127,6 +3181,7 @@
       "declarations": [
         "flex-direction: column",
         "display: flex",
+        "--v-component: cards",
         "gap: var(--v-space-8)",
         "align-items: start",
         "padding-block: var(--v-space-32)",
@@ -3141,6 +3196,7 @@
       "declarations": [
         "flex-direction: column",
         "display: flex",
+        "--v-component: cards",
         "gap: var(--v-space-8)",
         "align-items: start"
       ],
@@ -3150,6 +3206,7 @@
       "name": "text-banner",
       "prefixes": [],
       "declarations": [
+        "--v-component: banner",
         "flex-direction: column",
         "display: flex",
         "gap: var(--v-space-24)",
@@ -3163,6 +3220,7 @@
       "name": "media-banner",
       "prefixes": [],
       "declarations": [
+        "--v-component: banner",
         "flex-direction: column",
         "display: flex",
         "background-color: var(--v-color-background-primary)",
@@ -3175,16 +3233,16 @@
       "name": "media-hero",
       "prefixes": [],
       "declarations": [
+        "--v-component: hero",
         "--_media-hero-media-bleed: max(0px,\n    calc(var(--v-space-pagemargin) - (100vw - var(--v-size-pagemax)) / 2))",
-        "row-gap: var(--v-space-24)",
+        "--_media-hero-content-rows: [content-start] var(--v-space-xl) [title] auto\n    [body] auto [action] auto [content-end] var(--v-space-xl)",
+        "grid-template-rows: var(--_media-hero-content-rows) [media] auto",
         "width: 100%",
         "max-width: var(--v-size-pagemax)",
-        "padding: var(--v-space-xl) var(--v-space-pagemargin) 0",
-        "grid-template-columns: 1fr",
+        "padding-inline: var(--v-space-pagemargin)",
+        "grid-template-columns: minmax(0, 1fr)",
         "margin-inline: auto",
-        "display: grid",
-        "column-gap: var(--v-space-gutter)",
-        "grid-template-columns: 1fr 1fr"
+        "display: grid"
       ],
       "layer": "volvo.blocks"
     },
@@ -3192,6 +3250,7 @@
       "name": "text-hero",
       "prefixes": [],
       "declarations": [
+        "--v-component: hero",
         "padding: var(--v-space-xl) var(--v-space-pagemargin)",
         "flex-direction: column",
         "display: flex"
@@ -3202,6 +3261,7 @@
       "name": "message-bar",
       "prefixes": [],
       "declarations": [
+        "--v-component: message-bar",
         "--v-color-foreground-primary: var(--v-color-foreground-inverted)",
         "--_dark-toggle: var(--_light-toggle)",
         "gap: var(--v-space-8)",
@@ -3227,6 +3287,7 @@
       "name": "tooltip",
       "prefixes": [],
       "declarations": [
+        "--v-component: tooltip",
         "max-width: 24ch",
         "padding-block: var(--v-space-4)",
         "padding-inline: var(--v-space-8)",
@@ -3245,6 +3306,7 @@
       "name": "skeleton",
       "prefixes": [],
       "declarations": [
+        "--v-component: skeleton",
         "background-color: var(--v-color-ornament-primary)",
         "contain: strict",
         "border-radius: var(--v-shape-default)",
@@ -3256,6 +3318,7 @@
       "name": "toast-message",
       "prefixes": [],
       "declarations": [
+        "--v-component: toast-message",
         "--_border-color-dark: var(--_dark-toggle) var(--v-color-ornament-primary)",
         "--_border-color: var(--_border-color-dark, transparent)",
         "column-gap: var(--v-space-16)",
@@ -3274,6 +3337,7 @@
       "name": "inline-message",
       "prefixes": [],
       "declarations": [
+        "--v-component: inline-message",
         "--_background-color: var(--v-color-background-feedback-gray)",
         "gap: var(--v-space-4)",
         "padding: var(--v-space-16)",
@@ -3288,6 +3352,7 @@
       "name": "pill-filled",
       "prefixes": [],
       "declarations": [
+        "--v-component: pill",
         "width: fit-content",
         "padding-block: var(--v-space-2)",
         "padding-inline: var(--v-space-8)",
@@ -3303,6 +3368,7 @@
       "name": "pill-outlined",
       "prefixes": [],
       "declarations": [
+        "--v-component: pill",
         "width: fit-content",
         "padding-block: var(--v-space-2)",
         "padding-inline: var(--v-space-8)",
@@ -3317,6 +3383,7 @@
       "name": "pill-soft",
       "prefixes": [],
       "declarations": [
+        "--v-component: pill",
         "width: fit-content",
         "padding-block: var(--v-space-2)",
         "padding-inline: var(--v-space-8)",
@@ -3327,10 +3394,128 @@
       ],
       "layer": "volvo.blocks"
     },
+    {
+      "name": "toggle-button",
+      "prefixes": [],
+      "declarations": [
+        "--_overlay-rate: 0%",
+        "--_color: var(--v-color-foreground-primary)",
+        "--spinner-size: 1.5rem",
+        "gap: var(--v-space-8)",
+        "font-size: var(--v-font-16-size)",
+        "line-height: var(--v-font-16-lineheight)",
+        "color: var(--_color)",
+        "white-space: nowrap",
+        "user-select: none",
+        "background-color: color-mix(in oklab,\n    var(--_bg-color, transparent),\n    var(--_color) var(--_overlay-rate))",
+        "border-radius: var(--v-shape-emphasis)",
+        "transition: background-color var(--v-transition-default)",
+        "flex-shrink: 0",
+        "justify-content: center",
+        "align-items: center",
+        "display: inline-flex",
+        "position: relative",
+        "background-color: var(--_bg-color, transparent)",
+        "--_bg-color: var(--v-color-surface-gray)",
+        "--v-component: toggle-button",
+        "min-width: max-content",
+        "height: 3rem",
+        "padding-inline: var(--v-space-24)"
+      ],
+      "layer": "volvo.blocks"
+    },
+    {
+      "name": "toggle-button-clear",
+      "prefixes": [],
+      "declarations": [
+        "--_overlay-rate: 0%",
+        "--_color: var(--v-color-foreground-primary)",
+        "--spinner-size: 1.5rem",
+        "gap: var(--v-space-8)",
+        "font-size: var(--v-font-16-size)",
+        "line-height: var(--v-font-16-lineheight)",
+        "color: var(--_color)",
+        "white-space: nowrap",
+        "user-select: none",
+        "background-color: color-mix(in oklab,\n    var(--_bg-color, transparent),\n    var(--_color) var(--_overlay-rate))",
+        "border-radius: var(--v-shape-emphasis)",
+        "transition: background-color var(--v-transition-default)",
+        "flex-shrink: 0",
+        "justify-content: center",
+        "align-items: center",
+        "display: inline-flex",
+        "position: relative",
+        "background-color: var(--_bg-color, transparent)",
+        "--v-component: toggle-button",
+        "min-width: max-content",
+        "height: 2.5rem",
+        "padding-inline: var(--v-space-16)"
+      ],
+      "layer": "volvo.blocks"
+    },
+    {
+      "name": "icon-toggle-button",
+      "prefixes": [],
+      "declarations": [
+        "--_overlay-rate: 0%",
+        "--_color: var(--v-color-foreground-primary)",
+        "--spinner-size: 1.5rem",
+        "gap: var(--v-space-8)",
+        "font-size: var(--v-font-16-size)",
+        "line-height: var(--v-font-16-lineheight)",
+        "color: var(--_color)",
+        "white-space: nowrap",
+        "user-select: none",
+        "background-color: color-mix(in oklab,\n    var(--_bg-color, transparent),\n    var(--_color) var(--_overlay-rate))",
+        "border-radius: var(--v-shape-emphasis)",
+        "transition: background-color var(--v-transition-default)",
+        "flex-shrink: 0",
+        "justify-content: center",
+        "align-items: center",
+        "display: inline-flex",
+        "position: relative",
+        "background-color: var(--_bg-color, transparent)",
+        "--_bg-color: var(--v-color-surface-gray)",
+        "--v-component: icon-toggle-button",
+        "width: 3rem",
+        "height: 3rem"
+      ],
+      "layer": "volvo.blocks"
+    },
+    {
+      "name": "icon-toggle-button-clear",
+      "prefixes": [],
+      "declarations": [
+        "--_overlay-rate: 0%",
+        "--_color: var(--v-color-foreground-primary)",
+        "--spinner-size: 1.5rem",
+        "gap: var(--v-space-8)",
+        "font-size: var(--v-font-16-size)",
+        "line-height: var(--v-font-16-lineheight)",
+        "color: var(--_color)",
+        "white-space: nowrap",
+        "user-select: none",
+        "background-color: color-mix(in oklab,\n    var(--_bg-color, transparent),\n    var(--_color) var(--_overlay-rate))",
+        "border-radius: var(--v-shape-emphasis)",
+        "transition: background-color var(--v-transition-default)",
+        "flex-shrink: 0",
+        "justify-content: center",
+        "align-items: center",
+        "display: inline-flex",
+        "position: relative",
+        "background-color: var(--_bg-color, transparent)",
+        "--v-component: icon-toggle-button",
+        "--spinner-size: 1rem",
+        "width: 2.5rem",
+        "height: 2.5rem"
+      ],
+      "layer": "volvo.blocks"
+    },
     {
       "name": "tablist",
       "prefixes": [],
       "declarations": [
+        "--v-component: tabs",
         "--_selected-border-color: var(--v-color-foreground-primary)",
         "display: flex",
         "gap: var(--v-space-8)",
@@ -3342,6 +3527,7 @@
       "name": "tablist-stretched",
       "prefixes": [],
       "declarations": [
+        "--v-component: tabs",
         "--_selected-border-color: var(--v-color-foreground-primary)",
         "display: flex"
       ],
@@ -3351,6 +3537,7 @@
       "name": "table",
       "prefixes": [],
       "declarations": [
+        "--v-component: table",
         "border-collapse: collapse",
         "background-color: var(--v-color-background-primary)"
       ],
@@ -3361,7 +3548,7 @@
       "prefixes": [],
       "declarations": [
         "inset-inline-end: 0",
-        "width: var(--v-space-20)",
+        "width: var(--v-space-24)",
         "touch-action: none",
         "cursor: col-resize",
         "user-select: none",
@@ -3378,12 +3565,10 @@
       "name": "title-page",
       "prefixes": [],
       "declarations": [
+        "--v-component: title",
         "grid-template-areas: \"heading\"\n                         \"description\"\n                         \"action\"",
         "justify-items: start",
-        "display: grid",
-        "column-gap: var(--v-space-24)",
-        "grid-template-columns: 1fr 1fr",
-        "grid-template-areas: \"heading description\"\n                           \"heading action\""
+        "display: grid"
       ],
       "layer": "volvo.blocks"
     },
@@ -3391,12 +3576,10 @@
       "name": "title-section",
       "prefixes": [],
       "declarations": [
+        "--v-component: title",
         "grid-template-areas: \"heading\"\n                         \"description\"\n                         \"action\"",
         "justify-items: start",
-        "display: grid",
-        "column-gap: var(--v-space-24)",
-        "grid-template-columns: 1fr 1fr",
-        "grid-template-areas: \"heading description\"\n                           \"heading action\""
+        "display: grid"
       ],
       "layer": "volvo.blocks"
     },
@@ -3521,6 +3704,7 @@
       "name": "reel",
       "prefixes": [],
       "declarations": [
+        "--v-component: reel",
         "scroll-snap-type: x mandatory",
         "scroll-snap-stop: always",
         "scroll-behavior: smooth",
@@ -3734,6 +3918,7 @@
       "name": "pagelayout",
       "prefixes": [],
       "declarations": [
+        "--v-component: pagelayout",
         "--_container-max-width: 160rem",
         "--v-size-grid-maxwidth: min(160rem, 100vw - var(--v-space-pagemargin) * 2)",
         "--_sidebar-start-toggle: initial",
@@ -3754,6 +3939,7 @@
       "name": "navigation-bar",
       "prefixes": [],
       "declarations": [
+        "--v-component: navigation-bar",
         "position: var(--navigation-bar-position, sticky)",
         "z-index: var(--v-index-navigation)",
         "column-gap: var(--v-space-16)",