@volvo-cars/css 1.52.1 → 2.0.0

package/dist/llm/meta.md

@@ -19,16 +19,12 @@ Utility classes may be combined with other classes and include the CSS rules the
 
 .spinner
 
-.dialog
-
 .dialog-large
 
 .dialog-small
 
 .sheet
 
-.dialog__close
-
 .radio
 
 .checkbox
@@ -49,8 +45,6 @@ Utility classes may be combined with other classes and include the CSS rules the
 
 .chip-dismissible
 
-.toggle-group-button
-
 .link-inline
 
 .link-underlined
@@ -85,6 +79,8 @@ Utility classes may be combined with other classes and include the CSS rules the
 
 .media-banner
 
+.message-bar
+
 .tooltip
 
 .skeleton
@@ -124,8 +120,6 @@ Utility classes may be combined with other classes and include the CSS rules the
 
 .heading-2
 
-.heading-3
-
 .input-floating-label
 
 .list
@@ -156,8 +150,6 @@ Utility classes may be combined with other classes and include the CSS rules the
 
 .reel
 
-.reel-indicators
-
 .stack-4
 
 .stack-8
@@ -180,6 +172,8 @@ Utility classes may be combined with other classes and include the CSS rules the
 
 .stack-text
 
+.heading-3
+
 .layout-4-5
 
 .layout-5-4
@@ -487,100 +481,8 @@ border-radius: var(--v-shape-emphasis)
 .rounded-none
 border-radius: 0
 
-.rounded
-border-radius: var(--v-radius-sm)
-
-.rounded-sm
-border-radius: var(--v-radius-sm)
-
-.rounded-md
-border-radius: var(--v-radius-md)
-
-.rounded-lg
-border-radius: var(--v-radius-lg)
-
 .rounded-full
-border-radius: var(--v-radius-full)
-
-.rounded-t
-border-start-start-radius: var(--v-radius-sm)
-border-start-end-radius: var(--v-radius-sm)
-
-.rounded-t-sm
-border-start-start-radius: var(--v-radius-sm)
-border-start-end-radius: var(--v-radius-sm)
-
-.rounded-t-md
-border-start-start-radius: var(--v-radius-md)
-border-start-end-radius: var(--v-radius-md)
-
-.rounded-t-lg
-border-start-start-radius: var(--v-radius-lg)
-border-start-end-radius: var(--v-radius-lg)
-
-.rounded-t-full
-border-start-start-radius: var(--v-radius-full)
-border-start-end-radius: var(--v-radius-full)
-
-.rounded-e
-border-start-end-radius: var(--v-radius-sm)
-border-end-end-radius: var(--v-radius-sm)
-
-.rounded-e-sm
-border-start-end-radius: var(--v-radius-sm)
-border-end-end-radius: var(--v-radius-sm)
-
-.rounded-e-md
-border-start-end-radius: var(--v-radius-md)
-border-end-end-radius: var(--v-radius-md)
-
-.rounded-e-lg
-border-start-end-radius: var(--v-radius-lg)
-border-end-end-radius: var(--v-radius-lg)
-
-.rounded-e-full
-border-start-end-radius: var(--v-radius-full)
-border-end-end-radius: var(--v-radius-full)
-
-.rounded-b
-border-end-end-radius: var(--v-radius-sm)
-border-end-start-radius: var(--v-radius-sm)
-
-.rounded-b-sm
-border-end-end-radius: var(--v-radius-sm)
-border-end-start-radius: var(--v-radius-sm)
-
-.rounded-b-md
-border-end-end-radius: var(--v-radius-md)
-border-end-start-radius: var(--v-radius-md)
-
-.rounded-b-lg
-border-end-end-radius: var(--v-radius-lg)
-border-end-start-radius: var(--v-radius-lg)
-
-.rounded-b-full
-border-end-end-radius: var(--v-radius-full)
-border-end-start-radius: var(--v-radius-full)
-
-.rounded-s
-border-start-start-radius: var(--v-radius-sm)
-border-end-start-radius: var(--v-radius-sm)
-
-.rounded-s-sm
-border-start-start-radius: var(--v-radius-sm)
-border-end-start-radius: var(--v-radius-sm)
-
-.rounded-s-md
-border-start-start-radius: var(--v-radius-md)
-border-end-start-radius: var(--v-radius-md)
-
-.rounded-s-lg
-border-start-start-radius: var(--v-radius-lg)
-border-end-start-radius: var(--v-radius-lg)
-
-.rounded-s-full
-border-start-start-radius: var(--v-radius-full)
-border-end-start-radius: var(--v-radius-full)
+border-radius: var(--v-shape-emphasis)
 
 .contain-none
 contain: none
@@ -1185,6 +1087,16 @@ margin-top: var(--v-space-s)
 .{lg,md,xl}:mb-s
 margin-bottom: var(--v-space-s)
 
+.{lg,md,xl}:mx-pageoffset
+margin-inline-end: var(--v-space-pageoffset)
+margin-inline-start: var(--v-space-pageoffset)
+
+.{lg,md,xl}:mr-pageoffset
+margin-inline-end: var(--v-space-pageoffset)
+
+.{lg,md,xl}:ml-pageoffset
+margin-inline-start: var(--v-space-pageoffset)
+
 .{lg,md,xl}:mx-pagemargin
 margin-inline-end: var(--v-space-pagemargin)
 margin-inline-start: var(--v-space-pagemargin)
@@ -1767,6 +1679,16 @@ padding-top: var(--v-space-s)
 .{lg,md,xl}:pb-s
 padding-bottom: var(--v-space-s)
 
+.{lg,md,xl}:px-pageoffset
+padding-inline-end: var(--v-space-pageoffset)
+padding-inline-start: var(--v-space-pageoffset)
+
+.{lg,md,xl}:pr-pageoffset
+padding-inline-end: var(--v-space-pageoffset)
+
+.{lg,md,xl}:pl-pageoffset
+padding-inline-start: var(--v-space-pageoffset)
+
 .{lg,md,xl}:px-pagemargin
 padding-inline-end: var(--v-space-pagemargin)
 padding-inline-start: var(--v-space-pagemargin)
@@ -2357,53 +2279,13 @@ z-index: var(--v-index-deep)
 ## Design tokens
 When writing CSS, use these CSS custom properties for relevant properties. Don't use custom fonts, spacing or colors outside of these values.
 
---v-color-always-black: Always black regardless of colour mode.
---v-color-always-white: Always white regardless of color mode.
---v-color-background-feedback-gray: Use as a background color to indicate informational messages.
---v-color-background-feedback-green: Use as a background color to highlight successful and positive states.
---v-color-background-feedback-orange: Use as a background color to highlight warnings, invalid or missing data, and states that require caution.
---v-color-background-feedback-red: Use as a background color to highlight errors, invalid data, and destructive states.
---v-color-background-primary: Use as a primary background color.
---v-color-background-secondary: Use as a secondary background color for elevated sections.
---v-color-foreground-accent-blue: For use in links and as a border in emphasized selected states.
---v-color-foreground-feedback-green: Use as a foreground or border color to highlight successful states and positive actions.
---v-color-foreground-feedback-orange: Use as a foreground or border color to highlight warnings, invalid or missing data, and actions that require caution.
---v-color-foreground-feedback-red: Use as a foreground or border color to highlight errors, invalid data, and destructive actions.
---v-color-foreground-inverted: The inverse of the primary foreground color. For use on filled surfaces.
---v-color-foreground-primary: Use for primary text, icons and borders.
---v-color-foreground-secondary: Use for secondary text, icons and borders.
---v-color-foreground-tertiary: The lightest possible foreground color acceptable for UI fills. Should not be used for body text.
---v-color-ornament-primary: Use for strokes or dividers to visually group or separate elements.
---v-color-ornament-scrim: Used as a backdrop that usually sits behind a Side sheet or Dialog component.
---v-color-state-accent-blue-medium: Use for state layers with foreground/accent/blue.
---v-color-state-accent-blue-strong: Use for state layers with foreground/accent/blue.
---v-color-state-accent-blue-subtle: Use for state layers with foreground/accent/blue.
---v-color-state-always-black-medium: Use for state layers with an always/black foreground color.
---v-color-state-always-black-strong: Use for state layers with an always/black foreground color.
---v-color-state-always-black-subtle: Use for state layers with an always/black foreground color.
---v-color-state-always-white-medium: Use for state layers with an always/white foreground color.
---v-color-state-always-white-strong: Use for state layers with an always/white foreground color.
---v-color-state-always-white-subtle: Use for state layers with an always/white foreground color.
---v-color-state-feedback-red-medium: Use for state layers with foreground/feedback/red.
---v-color-state-feedback-red-strong: Use for state layers with foreground/feedback/red.
---v-color-state-feedback-red-subtle: Use for state layers with foreground/feedback/red.
---v-color-state-inverted-medium: Use for state layers with foreground/inverted.
---v-color-state-inverted-strong: Use for state layers with foreground/inverted.
---v-color-state-inverted-subtle: Use for state layers with foreground/inverted.
---v-color-state-primary-medium: Use for state layers with foreground/primary.
---v-color-state-primary-strong: Use for state layers with foreground/primary.
---v-color-state-primary-subtle: Use for state layers with foreground/primary.
---v-color-surface-accent-blue: Used as an emphasized surface fill for UI elements like buttons and form controls.
---v-color-surface-feedback-green: Used as a surface fill for UI elements like buttons and form controls to signify positive actions. Combine with Always White foreground color.
---v-color-surface-feedback-orange: [Deprecated]
---v-color-surface-feedback-red: Used as a surface fill for UI elements like buttons and form controls to signify destructive actions. Combine with Always White foreground color.
---v-color-surface-neutral: Used as a surface fill for UI elements like buttons and form controls. Combine with Foreground / Inverted foreground color.
---v-font-sans-family--v-font-broad-family--v-font-mono-family--v-font-regular-weight--v-font-emphasis-weight--v-font-24-size--v-font-24-lineheight--v-font-24--v-font-20-size--v-font-20-lineheight--v-font-20--v-font-16-size--v-font-16-lineheight--v-font-16--v-font-14-size--v-font-14-lineheight--v-font-14--v-font-12-size--v-font-12-lineheight--v-font-12--v-font-heading-1-weight--v-font-heading-1-lineheight--v-font-heading-1-size-min--v-font-heading-1-size-max--v-font-heading-1-size--v-font-heading-1--v-font-heading-2-weight--v-font-heading-2-lineheight--v-font-heading-2-size-min--v-font-heading-2-size-max--v-font-heading-2-size--v-font-heading-2--v-font-heading-3-weight--v-font-heading-3-lineheight--v-font-heading-3-size-min--v-font-heading-3-size-max--v-font-heading-3-size--v-font-heading-3--v-font-statement-1-weight--v-font-statement-1-lineheight--v-font-statement-1-size-min--v-font-statement-1-size-max--v-font-statement-1-size--v-font-statement-1--v-font-statement-2-weight--v-font-statement-2-lineheight--v-font-statement-2-size-min--v-font-statement-2-size-max--v-font-statement-2-size--v-font-statement-2--v-font-statement-3-weight--v-font-statement-3-lineheight--v-font-statement-3-size-min--v-font-statement-3-size-max--v-font-statement-3-size--v-font-statement-3--v-font-statement-signature-weight--v-font-statement-signature-lineheight--v-font-statement-signature-size-min--v-font-statement-signature-size-max--v-font-statement-signature-size--v-font-statement-signature--v-space-l: Fluid spacing between 64px-96px.
---v-space-m: Fluid spacing between 48px-64px.
---v-space-s: Fluid spacing between 32px-48px.
---v-size-grid-column: The width of a single grid column.
+--v-space-l: --v-space-{l,m,s} will be deprecated. These are fallbacks for the new spacing system
+--v-space-m--v-space-s--v-size-grid-column: The width of a single grid column.
 --v-size-grid-maxwidth: The maximum width of the 12 column grid.
 --v-size-pagemax: The maximum width a page is allowed to grow to.
+--v-space-pageoffset: The inline offset from the viewport edge to the content area,
+matching the page layout. On viewports within pagemax this equals
+pagemargin; on wider viewports it adds the extra centering space.
 --v-size-grid-xs: Width based on the colspan of the grid for the current viewport size  (4 / 6 / 4)
 --v-size-grid-sm: Width based on the colspan of the grid for the current viewport size  (6 / 8 / 6)
 --v-size-grid-md: Width based on the colspan of the grid for the current viewport size  (8 / 10 / 8)
@@ -2413,13 +2295,49 @@ When writing CSS, use these CSS custom properties for relevant properties. Don't
 --v-size-contentmax: The maximum width a block of content should be allowed to grow to while maintaining readability
 https://baymard.com/blog/line-length-readability
 --v-radius-sm--v-radius-md--v-radius-lg--v-radius-full--v-index-spinner--v-index-overlay--v-index-navigation--v-index-default--v-index-deep--v-grid-columns: The total number of grid columns at the current breakpoint.
---v-space-pagemargin: The fluid outer horizontal margins of the main page container.
-402  - 16px
-1600  - 64px
---v-space-gutter: The horizontal gap between grid columns. Fluid between 16px-32px.
---v-shape-default: Use as default value for all all non-interactive UI elements.
---v-shape-emphasis: Use for interactive UI, and elements that need to draw attention and create visual contrast from the rest of the page.
---v-transition-default--v-transition-micro--v-transition-notable--v-space-2: Fixed 2px spacing
+--v-font-heading-1-size-max--v-font-heading-2-size-max--v-font-heading-3-size-max--v-font-statement-1-size-max--v-font-statement-2-size-max--v-font-statement-3-size-max--v-font-statement-signature-size-max--v-transition-default--v-transition-micro--v-transition-notable--v-color-foreground-primary--v-color-foreground-secondary: Use for primary text, icons and borders.
+--v-color-foreground-tertiary: Use for secondary text, icons and borders.
+--v-color-foreground-inverted: The lightest possible foreground color acceptable for UI fills. Should not be used for body text.
+--v-color-foreground-accent-blue: The inverse of the primary foreground color. For use on filled surfaces.
+--v-color-foreground-feedback-green: For emphasized selection borders and graphic accents (icons, illustrations).
+--v-color-foreground-feedback-red: Use as a foreground or border color to highlight successful states and positive actions.
+--v-color-foreground-feedback-orange: Use as a foreground or border color to highlight errors, invalid data, and destructive actions.
+--v-color-surface-neutral: Use as a foreground or border color to highlight warnings, invalid or missing data, and actions that require caution.
+--v-color-surface-gray: Used as a surface fill for UI elements like buttons and form controls. Combine with Foreground / Inverted foreground color.
+--v-color-surface-accent-blue: Used as surface fill.
+--v-color-surface-accent-safety: Used as an emphasized surface fill for UI elements like buttons and form controls.
+--v-color-surface-feedback-green: Used as an emphasized surface fill for UI elements like buttons and form controls.
+--v-color-surface-feedback-orange: Used as a surface fill for UI elements like buttons and form controls to signify positive actions. Combine with Always White foreground color.
+--v-color-surface-feedback-red: [Deprecated]
+--v-color-background-primary: Used as a surface fill for UI elements like buttons and form controls to signify destructive actions. Combine with Always White foreground color.
+--v-color-background-secondary: Use as a primary background color.
+--v-color-background-feedback-gray: Use as a background color to highlight warnings, invalid or missing data, and states that require caution.
+--v-color-background-feedback-green: Use as a secondary background color for elevated sections.
+--v-color-background-feedback-red: Use as a background color to highlight successful and positive states.
+--v-color-background-feedback-orange: Use as a background color to highlight errors, invalid data, and destructive states.
+--v-color-always-white: Use as a background color to indicate informational messages.
+--v-color-always-black: Always white regardless of color mode.
+--v-color-ornament-primary: Always black regardless of colour mode.
+--v-color-ornament-scrim: Use for strokes or dividers to visually group or separate elements.
+--v-color-state-primary-strong: Used as a backdrop that usually sits behind a Side sheet or Dialog component.
+--v-color-state-primary-medium: Use for state layers with foreground/primary.
+--v-color-state-primary-subtle: Use for state layers with foreground/primary.
+--v-color-state-inverted-strong: Use for state layers with foreground/primary.
+--v-color-state-inverted-medium: Use for state layers with foreground/inverted.
+--v-color-state-inverted-subtle: Use for state layers with foreground/inverted.
+--v-color-state-accent-blue-strong: Use for state layers with foreground/inverted.
+--v-color-state-accent-blue-medium: Use for state layers with foreground/accent/blue.
+--v-color-state-accent-blue-subtle: Use for state layers with foreground/accent/blue.
+--v-color-state-feedback-red-strong: Use for state layers with foreground/accent/blue.
+--v-color-state-feedback-red-medium: Use for state layers with foreground/feedback/red.
+--v-color-state-feedback-red-subtle: Use for state layers with foreground/feedback/red.
+--v-color-state-always-black-strong: Use for state layers with foreground/feedback/red.
+--v-color-state-always-black-medium: Use for state layers with an always/black foreground color.
+--v-color-state-always-black-subtle: Use for state layers with an always/black foreground color.
+--v-color-state-always-white-strong: Use for state layers with an always/black foreground color.
+--v-color-state-always-white-medium: Use for state layers with an always/white foreground color.
+--v-color-state-always-white-subtle: Use for state layers with an always/white foreground color.
+--v-space-2: Fixed 2px spacing
 --v-space-4: Fixed 4px spacing
 --v-space-8: Fixed 8px spacing
 --v-space-12: Fixed 12px spacing
@@ -2429,13 +2347,22 @@ https://baymard.com/blog/line-length-readability
 --v-space-48: Fixed 48px spacing
 --v-space-64: Fixed 64px spacing
 --v-space-gridded-element-gap: Divider between gridded elements. Do not use for text.
+--v-space-pagemargin: The fluid outer horizontal margins of the main page container.
+402  - 16px
+1600  - 64px
 --v-space-xs: Fluid spacing between 8px-20px.
 --v-space-sm: Fluid spacing between 16px-32px.
 --v-space-md: Fluid spacing between 24px-48px.
 --v-space-lg: Fluid spacing between 32px-56px.
 --v-space-xl: Fluid spacing between 48px-72px.
 --v-space-2xl: Fluid spacing between 64px-128px.
+--v-space-gutter: The horizontal gap between grid columns. Fluid between 16px-32px.
 --v-border-width-default: Use for any UI element that needs a border in the default state.
 --v-border-width-selected: Use for any UI element that needs a border in the selected state.
+--v-size-overlay-narrow: Used to set the width of small overlays such as small dialogs, toasts
+--v-size-overlay-wide: Used to set the width of large overlays such as sheet, large dialogs
 --v-size-sidebar-narrow: Narrow sidebar width is 240 to 304 between lg and xl
---v-size-sidebar-wide: Wide sidebar width is 368 to 464 between lg and xl
+--v-size-sidebar-wide: Wide sidebar width is 368 to 464 between lg and xl
+--v-shape-default: Use as default value for all all non-interactive UI elements.
+--v-shape-emphasis: Use for interactive UI, and elements that need to draw attention and create visual contrast from the rest of the page.
+--v-font-12-size--v-font-12-lineheight--v-font-14-size--v-font-14-lineheight--v-font-16-size--v-font-16-lineheight--v-font-20-size--v-font-20-lineheight--v-font-24-size--v-font-24-lineheight--v-font-heading-3-weight--v-font-heading-3-size--v-font-heading-3-lineheight--v-font-heading-3-size-min--v-font-heading-2-weight--v-font-heading-2-size--v-font-heading-2-size-min--v-font-heading-2-lineheight--v-font-heading-1-weight--v-font-heading-1-size--v-font-heading-1-lineheight--v-font-heading-1-size-min--v-font-statement-3-weight--v-font-statement-3-size--v-font-statement-3-size-min--v-font-statement-3-lineheight--v-font-statement-2-weight--v-font-statement-2-size--v-font-statement-2-size-min--v-font-statement-2-lineheight--v-font-statement-1-weight--v-font-statement-1-size--v-font-statement-1-size-min--v-font-statement-1-lineheight--v-font-statement-signature-weight--v-font-statement-signature-size--v-font-statement-signature-size-min--v-font-statement-signature-lineheight--v-font-regular-weight--v-font-emphasis-weight--v-font-sans-family--v-font-broad-family--v-font-mono-family