@volvo-cars/css 1.7.1 → 1.9.0

package/dist/styles.d.ts

@@ -126,30 +126,30 @@ export interface ClassNames {
      * ``` */ readonly rotate90: '-rotate-90';
     /**
      * ```css
+     * translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
      * --translate-x: 0
      * --translate-y: 0
-     * translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
      * --translate-x: -50%
      * ``` */ readonly translateX12: '-translate-x-1/2';
     /**
      * ```css
+     * translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
      * --translate-x: 0
      * --translate-y: 0
-     * translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
      * --translate-x: -100%
      * ``` */ readonly translateXFull: '-translate-x-full';
     /**
      * ```css
+     * translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
      * --translate-x: 0
      * --translate-y: 0
-     * translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
      * --translate-y: -50%
      * ``` */ readonly translateY12: '-translate-y-1/2';
     /**
      * ```css
+     * translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
      * --translate-x: 0
      * --translate-y: 0
-     * translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
      * --translate-y: -100%
      * ``` */ readonly translateYFull: '-translate-y-full';
     /**
@@ -194,28 +194,28 @@ export interface ClassNames {
      * ``` */ readonly backdrop: 'backdrop';
     /**
      * ```css
-     * --background-color: var(--v-color-always-black)
      * background-color: var(--background-color)
+     * --background-color: var(--v-color-always-black)
      * ``` */ readonly bgAlwaysBlack: 'bg-always-black';
     /**
      * ```css
-     * --background-color: var(--v-color-always-white)
      * background-color: var(--background-color)
+     * --background-color: var(--v-color-always-white)
      * ``` */ readonly bgAlwaysWhite: 'bg-always-white';
     /**
      * ```css
-     * --background-color: var(--v-color-background-feedback-green)
      * background-color: var(--background-color)
+     * --background-color: var(--v-color-background-feedback-green)
      * ``` */ readonly bgFeedbackGreen: 'bg-feedback-green';
     /**
      * ```css
-     * --background-color: var(--v-color-background-feedback-orange)
      * background-color: var(--background-color)
+     * --background-color: var(--v-color-background-feedback-orange)
      * ``` */ readonly bgFeedbackOrange: 'bg-feedback-orange';
     /**
      * ```css
-     * --background-color: var(--v-color-background-feedback-red)
      * background-color: var(--background-color)
+     * --background-color: var(--v-color-background-feedback-red)
      * ``` */ readonly bgFeedbackRed: 'bg-feedback-red';
     /**
      * ```css
@@ -223,38 +223,38 @@ export interface ClassNames {
      * ``` */ readonly bgInherit: 'bg-inherit';
     /**
      * ```css
-     * --background-color: var(--v-color-background-primary)
      * background-color: var(--background-color)
+     * --background-color: var(--v-color-background-primary)
      * ``` */ readonly bgPrimary: 'bg-primary';
     /**
      * ```css
-     * --background-color: var(--v-color-background-secondary)
      * background-color: var(--background-color)
+     * --background-color: var(--v-color-background-secondary)
      * ``` */ readonly bgSecondary: 'bg-secondary';
     /**
      * ```css
-     * --background-color: var(--v-color-surface-accent-blue)
      * background-color: var(--background-color)
+     * --background-color: var(--v-color-surface-accent-blue)
      * ``` */ readonly bgSurfaceAccentBlue: 'bg-surface-accent-blue';
     /**
      * ```css
-     * --background-color: var(--v-color-surface-feedback-green)
      * background-color: var(--background-color)
+     * --background-color: var(--v-color-surface-feedback-green)
      * ``` */ readonly bgSurfaceFeedbackGreen: 'bg-surface-feedback-green';
     /**
      * ```css
-     * --background-color: var(--v-color-surface-feedback-orange)
      * background-color: var(--background-color)
+     * --background-color: var(--v-color-surface-feedback-orange)
      * ``` */ readonly bgSurfaceFeedbackOrange: 'bg-surface-feedback-orange';
     /**
      * ```css
-     * --background-color: var(--v-color-surface-feedback-red)
      * background-color: var(--background-color)
+     * --background-color: var(--v-color-surface-feedback-red)
      * ``` */ readonly bgSurfaceFeedbackRed: 'bg-surface-feedback-red';
     /**
      * ```css
-     * --background-color: var(--v-color-surface-neutral)
      * background-color: var(--background-color)
+     * --background-color: var(--v-color-surface-neutral)
      * ``` */ readonly bgSurfaceNeutral: 'bg-surface-neutral';
     /**
      * ```css
@@ -462,10 +462,10 @@ export interface ClassNames {
      * max-width: 100%
      * height: 3rem
      * overflow: hidden
-     * --button-accent-color: var(--v-color-surface-neutral)
-     * --_color: var(--v-color-foreground-inverted)
      * color: var(--_color)
      * background: color-mix(in oklab, var(--button-accent-color), var(--_color) var(--_overlay-rate))
+     * --button-accent-color: var(--v-color-surface-neutral)
+     * --_color: var(--v-color-foreground-inverted)
      * --_overlay-rate: 0%
      * padding-inline: min(var(--v-space-32), 8vw)
      * border-radius: var(--v-radius-sm)
@@ -497,8 +497,8 @@ export interface ClassNames {
      * --_overlay-rate: 0%
      * padding-inline: min(var(--v-space-32), 8vw)
      * border-radius: var(--v-radius-sm)
-     * --button-accent-color: var(--v-color-foreground-primary)
      * color: var(--button-accent-color)
+     * --button-accent-color: var(--v-color-foreground-primary)
      * ``` */ readonly buttonOutlined: 'button-outlined';
     /**
      * ```css
@@ -515,8 +515,8 @@ export interface ClassNames {
      * max-width: 100%
      * height: 3rem
      * overflow: hidden
-     * --button-accent-color: var(--v-color-foreground-primary)
      * color: var(--button-accent-color)
+     * --button-accent-color: var(--v-color-foreground-primary)
      * text-align: start
      * ``` */ readonly buttonText: 'button-text';
     /**
@@ -538,9 +538,9 @@ export interface ClassNames {
     /**
      * ```css
      * --_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))
      * scroll-padding-inline: calc(var(--_outer-margin) / 2)
+     * --_outer-margin: 0px
      * width: 100%
      * margin-inline: auto
      * container-type: inline-size
@@ -548,18 +548,18 @@ export interface ClassNames {
     /**
      * ```css
      * --_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))
      * scroll-padding-inline: calc(var(--_outer-margin) / 2)
+     * --_outer-margin: 0px
      * width: 100%
      * margin-inline: auto
      * container-type: inline-size
      * ``` */ readonly containerLg: 'container-lg';
     /**
      * ```css
-     * --_outer-margin: 0px
      * max-width: min(80rem, min(var(--v-size-grid-maxwidth), var(--_columns-total-width))  + var(--_outer-margin))
      * scroll-padding-inline: calc(var(--_outer-margin) / 2)
+     * --_outer-margin: 0px
      * width: 100%
      * margin-inline: auto
      * container-type: inline-size
@@ -568,9 +568,9 @@ export interface ClassNames {
     /**
      * ```css
      * --_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))
      * scroll-padding-inline: calc(var(--_outer-margin) / 2)
+     * --_outer-margin: 0px
      * width: 100%
      * margin-inline: auto
      * container-type: inline-size
@@ -578,9 +578,9 @@ export interface ClassNames {
     /**
      * ```css
      * --_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))
      * scroll-padding-inline: calc(var(--_outer-margin) / 2)
+     * --_outer-margin: 0px
      * width: 100%
      * margin-inline: auto
      * container-type: inline-size
@@ -588,9 +588,9 @@ export interface ClassNames {
     /**
      * ```css
      * --_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))
      * scroll-padding-inline: calc(var(--_outer-margin) / 2)
+     * --_outer-margin: 0px
      * width: 100%
      * margin-inline: auto
      * container-type: inline-size
@@ -598,9 +598,9 @@ export interface ClassNames {
     /**
      * ```css
      * --_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))
      * scroll-padding-inline: calc(var(--_outer-margin) / 2)
+     * --_outer-margin: 0px
      * width: 100%
      * margin-inline: auto
      * container-type: inline-size
@@ -685,19 +685,19 @@ export interface ClassNames {
      * ``` */ readonly fixed: 'fixed';
     /**
      * ```css
-     * --_display-inner: flex
      * display: var(--_display-outer) flex
+     * --_display-inner: flex
      * ``` */ readonly flex: 'flex';
     /**
      * ```css
-     * --_display-inner: flex
      * display: var(--_display-outer) flex
+     * --_display-inner: flex
      * flex-direction: column
      * ``` */ readonly flexCol: 'flex-col';
     /**
      * ```css
-     * --_display-inner: flex
      * display: var(--_display-outer) flex
+     * --_display-inner: flex
      * flex-direction: column-reverse
      * ``` */ readonly flexColReverse: 'flex-col-reverse';
     /**
@@ -714,14 +714,14 @@ export interface ClassNames {
      * ``` */ readonly flexNowrap: 'flex-nowrap';
     /**
      * ```css
-     * --_display-inner: flex
      * display: var(--_display-outer) flex
+     * --_display-inner: flex
      * flex-direction: row
      * ``` */ readonly flexRow: 'flex-row';
     /**
      * ```css
-     * --_display-inner: flex
      * display: var(--_display-outer) flex
+     * --_display-inner: flex
      * flex-direction: row-reverse
      * ``` */ readonly flexRowReverse: 'flex-row-reverse';
     /**
@@ -878,25 +878,25 @@ export interface ClassNames {
      * ``` */ readonly gapYS: 'gap-y-s';
     /**
      * ```css
-     * --_display-inner: grid
      * display: var(--_display-outer) grid
+     * --_display-inner: grid
      * ``` */ readonly grid: 'grid';
     /**
      * ```css
-     * --_display-inner: grid
      * display: var(--_display-outer) grid
+     * --_display-inner: grid
      * grid-template-columns: repeat(2, minmax(0, 1fr))
      * ``` */ readonly gridCols2: 'grid-cols-2';
     /**
      * ```css
-     * --_display-inner: grid
      * display: var(--_display-outer) grid
+     * --_display-inner: grid
      * grid-template-columns: repeat(3, minmax(0, 1fr))
      * ``` */ readonly gridCols3: 'grid-cols-3';
     /**
      * ```css
-     * --_display-inner: grid
      * display: var(--_display-outer) grid
+     * --_display-inner: grid
      * grid-template-columns: repeat(4, minmax(0, 1fr))
      * ``` */ readonly gridCols4: 'grid-cols-4';
     /**
@@ -966,8 +966,8 @@ export interface ClassNames {
      * position: relative
      * background: color-mix(in oklab, var(--_button-bg-color, transparent), var(--button-accent-color) var(--_overlay-rate))
      * --_overlay-rate: 0%
-     * --button-accent-color: var(--v-color-foreground-primary)
      * color: var(--button-accent-color)
+     * --button-accent-color: var(--v-color-foreground-primary)
      * border-radius: var(--v-radius-full)
      * flex-shrink: 0
      * width: 2.5rem
@@ -982,10 +982,10 @@ export interface ClassNames {
      * min-width: max-content
      * display: inline-flex
      * position: relative
-     * --button-accent-color: var(--v-color-surface-neutral)
-     * --_color: var(--v-color-foreground-inverted)
      * color: var(--_color)
      * background: color-mix(in oklab, var(--button-accent-color), var(--_color) var(--_overlay-rate))
+     * --button-accent-color: var(--v-color-surface-neutral)
+     * --_color: var(--v-color-foreground-inverted)
      * --_overlay-rate: 0%
      * border-radius: var(--v-radius-full)
      * flex-shrink: 0
@@ -1004,8 +1004,8 @@ export interface ClassNames {
      * background: color-mix(in oklab, var(--_button-bg-color, transparent), var(--button-accent-color) var(--_overlay-rate))
      * box-shadow: inset 0 0 0 1px var(--button-accent-color)
      * --_overlay-rate: 0%
-     * --button-accent-color: var(--v-color-foreground-primary)
      * color: var(--button-accent-color)
+     * --button-accent-color: var(--v-color-foreground-primary)
      * border-radius: var(--v-radius-full)
      * flex-shrink: 0
      * width: 2.5rem
@@ -1927,6 +1927,10 @@ export interface ClassNames {
      * ```css
      * 
      * ``` */ readonly radio: 'radio';
+    /**
+     * ```css
+     * 
+     * ``` */ readonly range: 'range';
     /**
      * ```css
      * scroll-snap-type: x mandatory
@@ -2290,18 +2294,18 @@ export interface ClassNames {
      * ``` */ readonly tapArea: 'tap-area';
     /**
      * ```css
-     * --color: var(--v-color-foreground-accent-blue)
      * color: var(--v-color-foreground-accent-blue)
+     * --color: var(--v-color-foreground-accent-blue)
      * ``` */ readonly textAccentBlue: 'text-accent-blue';
     /**
      * ```css
-     * --color: var(--v-color-always-black)
      * color: var(--v-color-always-black)
+     * --color: var(--v-color-always-black)
      * ``` */ readonly textAlwaysBlack: 'text-always-black';
     /**
      * ```css
-     * --color: var(--v-color-always-white)
      * color: var(--v-color-always-white)
+     * --color: var(--v-color-always-white)
      * ``` */ readonly textAlwaysWhite: 'text-always-white';
     /**
      * ```css
@@ -2317,18 +2321,18 @@ export interface ClassNames {
      * ``` */ readonly textEnd: 'text-end';
     /**
      * ```css
-     * --color: var(--v-color-foreground-feedback-green)
      * color: var(--v-color-foreground-feedback-green)
+     * --color: var(--v-color-foreground-feedback-green)
      * ``` */ readonly textFeedbackGreen: 'text-feedback-green';
     /**
      * ```css
-     * --color: var(--v-color-foreground-feedback-orange)
      * color: var(--v-color-foreground-feedback-orange)
+     * --color: var(--v-color-foreground-feedback-orange)
      * ``` */ readonly textFeedbackOrange: 'text-feedback-orange';
     /**
      * ```css
-     * --color: var(--v-color-foreground-feedback-red)
      * color: var(--v-color-foreground-feedback-red)
+     * --color: var(--v-color-foreground-feedback-red)
      * ``` */ readonly textFeedbackRed: 'text-feedback-red';
     /**
      * ```css
@@ -2336,18 +2340,18 @@ export interface ClassNames {
      * ``` */ readonly textInherit: 'text-inherit';
     /**
      * ```css
-     * --color: var(--v-color-foreground-inverted)
      * color: var(--v-color-foreground-inverted)
+     * --color: var(--v-color-foreground-inverted)
      * ``` */ readonly textInverted: 'text-inverted';
     /**
      * ```css
-     * --color: var(--v-color-foreground-primary)
      * color: var(--v-color-foreground-primary)
+     * --color: var(--v-color-foreground-primary)
      * ``` */ readonly textPrimary: 'text-primary';
     /**
      * ```css
-     * --color: var(--v-color-foreground-secondary)
      * color: var(--v-color-foreground-secondary)
+     * --color: var(--v-color-foreground-secondary)
      * ``` */ readonly textSecondary: 'text-secondary';
     /**
      * ```css
@@ -2409,42 +2413,42 @@ export interface ClassNames {
      * ``` */ readonly transitionTransform: 'transition-transform';
     /**
      * ```css
+     * translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
      * --translate-x: 0
      * --translate-y: 0
-     * translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
      * ``` */ readonly translateX0: 'translate-x-0';
     /**
      * ```css
+     * translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
      * --translate-x: 0
      * --translate-y: 0
-     * translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
      * --translate-x: 50%
      * ``` */ readonly translateX12: 'translate-x-1/2';
     /**
      * ```css
+     * translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
      * --translate-x: 0
      * --translate-y: 0
-     * translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
      * --translate-x: 100%
      * ``` */ readonly translateXFull: 'translate-x-full';
     /**
      * ```css
+     * translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
      * --translate-x: 0
      * --translate-y: 0
-     * translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
      * ``` */ readonly translateY0: 'translate-y-0';
     /**
      * ```css
+     * translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
      * --translate-x: 0
      * --translate-y: 0
-     * translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
      * --translate-y: 50%
      * ``` */ readonly translateY12: 'translate-y-1/2';
     /**
      * ```css
+     * translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
      * --translate-x: 0
      * --translate-y: 0
-     * translate: calc(var(--translate-x) * var(--_v-setting-text-direction)) var(--translate-y)
      * --translate-y: 100%
      * ``` */ readonly translateYFull: 'translate-y-full';
     /**