@volvo-cars/css 3.1.0 → 3.2.0

package/dist/styles.d.ts

@@ -310,6 +310,25 @@ export interface ClassNames {
      * ```css
      * position: absolute
      * ``` */ readonly absolute: 'absolute';
+    /**
+     * ```css
+     * --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
+     * ``` */ readonly actionBar: 'action-bar';
+    /**
+     * ```css
+     * 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)
+     * ``` */ readonly actionBarMenu: 'action-bar-menu';
     /**
      * ```css
      * aspect-ratio: 1
@@ -699,6 +718,7 @@ export interface ClassNames {
      * align-items: center
      * display: inline-flex
      * position: relative
+     * --v-component: button
      * max-width: 100%
      * height: 3rem
      * font-size: var(--v-font-16-size)
@@ -733,6 +753,7 @@ export interface ClassNames {
      * align-items: center
      * display: inline-flex
      * position: relative
+     * --v-component: button
      * max-width: 100%
      * height: 3rem
      * font-size: var(--v-font-16-size)
@@ -759,6 +780,7 @@ export interface ClassNames {
      * align-items: center
      * display: inline-flex
      * position: relative
+     * --v-component: button
      * max-width: 100%
      * height: 3rem
      * font-size: var(--v-font-16-size)
@@ -781,6 +803,7 @@ export interface ClassNames {
      * ``` */ readonly checkbox: 'checkbox';
     /**
      * ```css
+     * --v-component: chips
      * --_overlay-rate: 0%
      * --_color: var(--v-color-foreground-primary)
      * --spinner-size: 1rem
@@ -807,6 +830,7 @@ export interface ClassNames {
      * ``` */ readonly chipDismissible: 'chip-dismissible';
     /**
      * ```css
+     * --v-component: chips
      * --_overlay-rate: 0%
      * --_color: var(--v-color-foreground-primary)
      * --spinner-size: 1rem
@@ -972,6 +996,7 @@ export interface ClassNames {
     /**
      * ```css
      * min-width: 0
+     * --v-component: select
      * ``` */ readonly customSelect: 'custom-select';
     /**
      * ```css
@@ -983,6 +1008,7 @@ export interface ClassNames {
      * ``` */ readonly dialogSmall: 'dialog-small';
     /**
      * ```css
+     * --v-component: range-slider
      * --range-thumb-width: 1.5rem
      * --_range-gradient-direction: to right
      * ``` */ readonly doubleRange: 'double-range';
@@ -1439,6 +1465,7 @@ export interface ClassNames {
      * 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
@@ -1462,6 +1489,7 @@ export interface ClassNames {
      * 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
@@ -1484,6 +1512,7 @@ export interface ClassNames {
      * 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
@@ -1497,6 +1526,60 @@ export interface ClassNames {
      * ```css
      *
      * ``` */ readonly iconSprite: 'icon-sprite';
+    /**
+     * ```css
+     * --_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,
+     *     var(--_bg-color, transparent),
+     *     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
+     * ``` */ readonly iconToggleButton: 'icon-toggle-button';
+    /**
+     * ```css
+     * --_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,
+     *     var(--_bg-color, transparent),
+     *     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
+     * ``` */ readonly iconToggleButtonClear: 'icon-toggle-button-clear';
     /**
      * ```css
      * object-fit: cover
@@ -1527,6 +1610,7 @@ export interface ClassNames {
      * ``` */ readonly inlineGrid: 'inline-grid';
     /**
      * ```css
+     * --v-component: inline-message
      * --_background-color: var(--v-color-background-feedback-gray)
      * gap: var(--v-space-4)
      * padding: var(--v-space-16)
@@ -1649,6 +1733,7 @@ export interface ClassNames {
      * ``` */ readonly layout64: 'layout-6-4';
     /**
      * ```css
+     * --v-component: links
      * color: var(--v-color-foreground-primary)
      * text-decoration-skip-ink: auto
      * text-underline-offset: .125em
@@ -1656,6 +1741,7 @@ export interface ClassNames {
      * ``` */ readonly linkInline: 'link-inline';
     /**
      * ```css
+     * --v-component: links
      * text-underline-offset: .125em
      * position: relative
      * ``` */ readonly linkPlain: 'link-plain';
@@ -1663,6 +1749,7 @@ export interface ClassNames {
      * ```css
      * text-decoration-skip-ink: auto
      * text-decoration-line: underline
+     * --v-component: links
      * text-underline-offset: .125em
      * position: relative
      * ``` */ readonly linkUnderlined: 'link-underlined';
@@ -1676,6 +1763,7 @@ export interface ClassNames {
      * 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
      * ``` */ readonly listItem: 'list-item';
@@ -1876,6 +1964,7 @@ export interface ClassNames {
      * ``` */ readonly mbXs: 'mb-xs';
     /**
      * ```css
+     * --v-component: banner
      * flex-direction: column
      * display: flex
      * background-color: var(--v-color-background-primary)
@@ -1886,22 +1975,24 @@ export interface ClassNames {
      * ```css
      * flex-direction: column
      * display: flex
+     * --v-component: cards
      * gap: var(--v-space-8)
      * align-items: start
      * ``` */ readonly mediaCard: 'media-card';
     /**
      * ```css
+     * --v-component: hero
      * --_media-hero-media-bleed: max(0px,
      *     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
+     *     [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
      * ``` */ readonly mediaHero: 'media-hero';
     /**
      * ```css
@@ -1911,6 +2002,7 @@ export interface ClassNames {
      * display: block
      * flex-direction: column
      * display: flex
+     * --v-component: tiles
      * text-align: start
      * text-decoration: none
      * padding-bottom: var(--v-space-16)
@@ -1918,6 +2010,7 @@ export interface ClassNames {
      * ``` */ readonly mediaTile: 'media-tile';
     /**
      * ```css
+     * --v-component: message-bar
      * --v-color-foreground-primary: var(--v-color-foreground-inverted)
      * --_dark-toggle: var(--_light-toggle)
      * gap: var(--v-space-8)
@@ -2346,6 +2439,7 @@ export interface ClassNames {
      * ``` */ readonly myXs: 'my-xs';
     /**
      * ```css
+     * --v-component: navigation-bar
      * position: var(--navigation-bar-position, sticky)
      * z-index: var(--v-index-navigation)
      * column-gap: var(--v-space-16)
@@ -2364,6 +2458,7 @@ export interface ClassNames {
      * 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
@@ -2485,6 +2580,7 @@ export interface ClassNames {
      * ``` */ readonly p8: 'p-8';
     /**
      * ```css
+     * --v-component: pagelayout
      * --_container-max-width: 160rem
      * --v-size-grid-maxwidth: min(160rem, 100vw - var(--v-space-pagemargin) * 2)
      * --_sidebar-start-toggle: initial
@@ -2510,6 +2606,7 @@ export interface ClassNames {
      * ``` */ readonly pagelayout: 'pagelayout';
     /**
      * ```css
+     * --v-component: pagination
      * flex-direction: row
      * justify-content: center
      * align-items: center
@@ -2594,6 +2691,7 @@ export interface ClassNames {
      * ``` */ readonly pbXs: 'pb-xs';
     /**
      * ```css
+     * --v-component: pill
      * width: fit-content
      * padding-block: var(--v-space-2)
      * padding-inline: var(--v-space-8)
@@ -2605,6 +2703,7 @@ export interface ClassNames {
      * ``` */ readonly pillFilled: 'pill-filled';
     /**
      * ```css
+     * --v-component: pill
      * width: fit-content
      * padding-block: var(--v-space-2)
      * padding-inline: var(--v-space-8)
@@ -2616,6 +2715,7 @@ export interface ClassNames {
      * ``` */ readonly pillOutlined: 'pill-outlined';
     /**
      * ```css
+     * --v-component: pill
      * width: fit-content
      * padding-block: var(--v-space-2)
      * padding-inline: var(--v-space-8)
@@ -2965,11 +3065,13 @@ export interface ClassNames {
      * ``` */ readonly radio: 'radio';
     /**
      * ```css
+     * --v-component: range-slider
      * --range-thumb-width: 1.5rem
      * --_range-gradient-direction: to right
      * ``` */ readonly range: 'range';
     /**
      * ```css
+     * --v-component: reel
      * scroll-snap-type: x mandatory
      * scroll-snap-stop: always
      * scroll-behavior: smooth
@@ -2988,7 +3090,7 @@ export interface ClassNames {
     /**
      * ```css
      * inset-inline-end: 0
-     * width: var(--v-space-20)
+     * width: var(--v-space-24)
      * touch-action: none
      * cursor: col-resize
      * user-select: none
@@ -3049,6 +3151,7 @@ export interface ClassNames {
      * ``` */ readonly selectNone: 'select-none';
     /**
      * ```css
+     * --v-component: selectable-cards
      * --_card-border-color: var(--v-color-foreground-tertiary)
      * --_card-border-width: 1px
      * --_card-padding: var(--v-space-16)
@@ -3097,6 +3200,7 @@ export interface ClassNames {
      * ``` */ readonly sheet: 'sheet';
     /**
      * ```css
+     * --v-component: skeleton
      * background-color: var(--v-color-ornament-primary)
      * contain: strict
      * border-radius: var(--v-shape-default)
@@ -3307,11 +3411,13 @@ export interface ClassNames {
      * ``` */ readonly tab: 'tab';
     /**
      * ```css
+     * --v-component: table
      * border-collapse: collapse
      * background-color: var(--v-color-background-primary)
      * ``` */ readonly table: 'table';
     /**
      * ```css
+     * --v-component: tabs
      * --_selected-border-color: var(--v-color-foreground-primary)
      * display: flex
      * gap: var(--v-space-8)
@@ -3319,6 +3425,7 @@ export interface ClassNames {
      * ``` */ readonly tablist: 'tablist';
     /**
      * ```css
+     * --v-component: tabs
      * --_selected-border-color: var(--v-color-foreground-primary)
      * display: flex
      * ``` */ readonly tablistStretched: 'tablist-stretched';
@@ -3336,6 +3443,7 @@ export interface ClassNames {
      *     var(--background-color, var(--v-color-background-primary)),
      *     var(--tap-area-color, var(--color, var(--v-color-foreground-primary)))
      *       var(--_overlay-rate, 0%))
+     * --v-component: tap-area
      * ``` */ readonly tapArea: 'tap-area';
     /**
      * ```css
@@ -3358,6 +3466,7 @@ export interface ClassNames {
      * ``` */ readonly textBalance: 'text-balance';
     /**
      * ```css
+     * --v-component: banner
      * flex-direction: column
      * display: flex
      * gap: var(--v-space-24)
@@ -3369,6 +3478,7 @@ export interface ClassNames {
      * ```css
      * flex-direction: column
      * display: flex
+     * --v-component: cards
      * gap: var(--v-space-8)
      * align-items: start
      * padding-block: var(--v-space-32)
@@ -3400,6 +3510,7 @@ export interface ClassNames {
      * ``` */ readonly textFeedbackRed: 'text-feedback-red';
     /**
      * ```css
+     * --v-component: hero
      * padding: var(--v-space-xl) var(--v-space-pagemargin)
      * flex-direction: column
      * display: flex
@@ -3435,6 +3546,7 @@ export interface ClassNames {
      * display: block
      * flex-direction: column
      * display: flex
+     * --v-component: tiles
      * text-align: start
      * text-decoration: none
      * --background-color: var(--v-color-background-secondary)
@@ -3453,30 +3565,25 @@ export interface ClassNames {
      * ``` */ readonly textWrap: 'text-wrap';
     /**
      * ```css
+     * --v-component: title
      * grid-template-areas: "heading"
      *                          "description"
      *                          "action"
      * justify-items: start
      * display: grid
-     * column-gap: var(--v-space-24)
-     * grid-template-columns: 1fr 1fr
-     * grid-template-areas: "heading description"
-     *                            "heading action"
      * ``` */ readonly titlePage: 'title-page';
     /**
      * ```css
+     * --v-component: title
      * grid-template-areas: "heading"
      *                          "description"
      *                          "action"
      * justify-items: start
      * display: grid
-     * column-gap: var(--v-space-24)
-     * grid-template-columns: 1fr 1fr
-     * grid-template-areas: "heading description"
-     *                            "heading action"
      * ``` */ readonly titleSection: 'title-section';
     /**
      * ```css
+     * --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)
@@ -3492,6 +3599,62 @@ export interface ClassNames {
      * ``` */ readonly toastMessage: 'toast-message';
     /**
      * ```css
+     * --_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,
+     *     var(--_bg-color, transparent),
+     *     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)
+     * ``` */ readonly toggleButton: 'toggle-button';
+    /**
+     * ```css
+     * --_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,
+     *     var(--_bg-color, transparent),
+     *     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)
+     * ``` */ readonly toggleButtonClear: 'toggle-button-clear';
+    /**
+     * ```css
+     * --v-component: tooltip
      * max-width: 24ch
      * padding-block: var(--v-space-4)
      * padding-inline: var(--v-space-8)