@volvo-cars/css 3.0.0 → 3.2.0

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",
@@ -223,6 +225,7 @@
     "current:text-primary",
     "cursor-auto",
     "cursor-pointer",
+    "custom-option",
     "custom-select",
     "details-open:rotate-180",
     "dialog-large",
@@ -344,6 +347,8 @@
     "icon-button-outlined",
     "icon-mask",
     "icon-sprite",
+    "icon-toggle-button",
+    "icon-toggle-button-clear",
     "img",
     "inline",
     "inline-flex",
@@ -915,6 +920,7 @@
     "link-underlined",
     "list",
     "list-item",
+    "listbox",
     "m-0",
     "m-12",
     "m-16",
@@ -1606,6 +1612,7 @@
     "odd:bg-secondary",
     "opacity-0",
     "open:border-primary",
+    "option-group-name",
     "overflow-auto",
     "overflow-clip",
     "overflow-hidden",
@@ -1839,6 +1846,8 @@
     "title-page",
     "title-section",
     "toast-message",
+    "toggle-button",
+    "toggle-button-clear",
     "tooltip",
     "top-0",
     "top-1/2",
@@ -2433,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": [],
@@ -2467,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",
@@ -2491,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",
@@ -2514,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",
@@ -2532,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)",
@@ -2561,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)",
@@ -2589,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)",
@@ -2720,7 +2762,51 @@
       "name": "custom-select",
       "prefixes": [],
       "declarations": [
-        "min-width: 0"
+        "min-width: 0",
+        "--v-component: select"
+      ],
+      "layer": "volvo.blocks"
+    },
+    {
+      "name": "custom-option",
+      "prefixes": [],
+      "declarations": [
+        "--_y-offset-dark: var(--_dark-toggle) 1",
+        "--_y-offset: var(--_y-offset-dark, 0)",
+        "gap: var(--v-space-16)",
+        "min-height: 3rem",
+        "padding-block: var(--v-space-12)",
+        "padding-inline: var(--v-space-16)",
+        "overflow-wrap: anywhere",
+        "white-space: normal",
+        "cursor: pointer",
+        "align-items: center",
+        "display: flex"
+      ],
+      "layer": "volvo.blocks"
+    },
+    {
+      "name": "listbox",
+      "prefixes": [],
+      "declarations": [
+        "background-color: var(--v-color-background-secondary)",
+        "max-height: 16rem",
+        "overflow: hidden",
+        "box-shadow: var(--v-effect-shadow-default)"
+      ],
+      "layer": "volvo.blocks"
+    },
+    {
+      "name": "option-group-name",
+      "prefixes": [],
+      "declarations": [
+        "min-height: 2.5rem",
+        "font-size: var(--v-font-12-size)",
+        "line-height: var(--v-font-12-lineheight)",
+        "color: var(--v-color-foreground-secondary)",
+        "align-items: center",
+        "padding-inline-start: var(--v-space-16)",
+        "display: flex"
       ],
       "layer": "volvo.blocks"
     },
@@ -2728,6 +2814,7 @@
       "name": "chip-selectable",
       "prefixes": [],
       "declarations": [
+        "--v-component: chips",
         "--_overlay-rate: 0%",
         "--_color: var(--v-color-foreground-primary)",
         "--spinner-size: 1rem",
@@ -2755,6 +2842,7 @@
       "name": "chip-dismissible",
       "prefixes": [],
       "declarations": [
+        "--v-component: chips",
         "--_overlay-rate: 0%",
         "--_color: var(--v-color-foreground-primary)",
         "--spinner-size: 1rem",
@@ -2783,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",
@@ -2796,6 +2885,7 @@
       "declarations": [
         "text-decoration-skip-ink: auto",
         "text-decoration-line: underline",
+        "--v-component: links",
         "text-underline-offset: .125em",
         "position: relative"
       ],
@@ -2805,6 +2895,7 @@
       "name": "link-plain",
       "prefixes": [],
       "declarations": [
+        "--v-component: links",
         "text-underline-offset: .125em",
         "position: relative"
       ],
@@ -2824,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"
       ],
@@ -2837,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",
@@ -2848,6 +2941,7 @@
       "name": "pagination-dots",
       "prefixes": [],
       "declarations": [
+        "--v-component: pagination",
         "flex-direction: row",
         "justify-content: center",
         "align-items: center",
@@ -2860,6 +2954,7 @@
       "name": "range",
       "prefixes": [],
       "declarations": [
+        "--v-component: range-slider",
         "--range-thumb-width: 1.5rem",
         "--_range-gradient-direction: to right"
       ],
@@ -2869,6 +2964,7 @@
       "name": "double-range",
       "prefixes": [],
       "declarations": [
+        "--v-component: range-slider",
         "--range-thumb-width: 1.5rem",
         "--_range-gradient-direction: to right"
       ],
@@ -2878,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)",
@@ -3033,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"
     },
@@ -3047,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)",
@@ -3064,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)",
@@ -3081,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)",
@@ -3095,6 +3196,7 @@
       "declarations": [
         "flex-direction: column",
         "display: flex",
+        "--v-component: cards",
         "gap: var(--v-space-8)",
         "align-items: start"
       ],
@@ -3104,6 +3206,7 @@
       "name": "text-banner",
       "prefixes": [],
       "declarations": [
+        "--v-component: banner",
         "flex-direction: column",
         "display: flex",
         "gap: var(--v-space-24)",
@@ -3117,6 +3220,7 @@
       "name": "media-banner",
       "prefixes": [],
       "declarations": [
+        "--v-component: banner",
         "flex-direction: column",
         "display: flex",
         "background-color: var(--v-color-background-primary)",
@@ -3129,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"
     },
@@ -3146,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"
@@ -3156,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)",
@@ -3181,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)",
@@ -3199,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)",
@@ -3210,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)",
@@ -3228,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)",
@@ -3242,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)",
@@ -3257,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)",
@@ -3271,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)",
@@ -3281,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)",
@@ -3296,6 +3527,7 @@
       "name": "tablist-stretched",
       "prefixes": [],
       "declarations": [
+        "--v-component: tabs",
         "--_selected-border-color: var(--v-color-foreground-primary)",
         "display: flex"
       ],
@@ -3305,6 +3537,7 @@
       "name": "table",
       "prefixes": [],
       "declarations": [
+        "--v-component: table",
         "border-collapse: collapse",
         "background-color: var(--v-color-background-primary)"
       ],
@@ -3315,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",
@@ -3332,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"
     },
@@ -3345,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"
     },
@@ -3475,6 +3704,7 @@
       "name": "reel",
       "prefixes": [],
       "declarations": [
+        "--v-component: reel",
         "scroll-snap-type: x mandatory",
         "scroll-snap-stop: always",
         "scroll-behavior: smooth",
@@ -3688,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",
@@ -3708,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)",

package/dist/meta.json.d.ts

@@ -1,6 +1,6 @@
 //#region src/meta.json.d.ts
-type Library = 'edls';
-interface DesignToken {
+export type Library = 'edls';
+export interface DesignToken {
   css: string;
   type: 'font' | 'color' | 'border' | 'grid' | 'index' | 'radius' | 'shape' | 'size' | 'space' | 'setting' | 'transition' | 'effect';
   category?: string;
@@ -12,7 +12,7 @@ interface DesignToken {
   value?: string | string[];
   library?: Library;
 }
-interface ClassMeta {
+export interface ClassMeta {
   name: string;
   declarations: string[];
   prefixes: string[];
@@ -29,4 +29,4 @@ declare const meta: {
   }[];
 };
 //#endregion
-export { ClassMeta, DesignToken, Library, meta as default };
+export { meta as default };