@volvo-cars/css 2.0.1 → 2.1.0

package/dist/links.server.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/links.server.ts","../src/imports.json","../src/links/constants.ts","../src/links/create-filter.ts","../src/media-queries.ts","../src/links/get-media-query.ts"],"sourcesContent":["import cssImports from './imports.json' with { type: 'json' };\nimport { defaultBase } from './links/constants';\nimport { createFilter } from './links/create-filter';\nimport { getMediaQuery } from './links/get-media-query';\nimport type { LinkProps, LinksFunction } from './links/types';\n\nconst fontPreloadUrls = [\n  'https://www.volvocars.com/static/shared/fonts/volvo-centum/v1/volvo-centum.woff2',\n];\n\nexport const links: LinksFunction = ({ base = defaultBase, filter } = {}) => {\n  if (base && typeof base !== 'string') {\n    base = base.href;\n  }\n  if (typeof base === 'string' && base !== '' && !base.endsWith('/')) {\n    base += '/';\n  }\n  const cssLinkProps = Object.entries(cssImports)\n    .filter(createFilter(filter))\n    .flatMap(([name, filename]) => {\n      const props: LinkProps = {\n        href: base + filename,\n        rel: 'stylesheet',\n        crossOrigin: 'anonymous',\n      };\n      const media = getMediaQuery(name);\n      if (media) {\n        props.media = media;\n      }\n\n      const preloadProps = {\n        ...props,\n        rel: 'preload',\n        as: 'style',\n      };\n\n      props['data-volvo-css-name'] = name;\n\n      if (filter?.preload === false) {\n        return props;\n      }\n      return [preloadProps, props] as const;\n    })\n    .sort((a, b) =>\n      a.rel === 'preload' && b.rel === 'preload'\n        ? 0\n        : a.rel === 'preload'\n          ? -1\n          : 1,\n    ) as LinkProps[];\n\n  const fontPreloads: LinkProps[] =\n    filter?.fonts === false || filter?.preload === false\n      ? []\n      : fontPreloadUrls.map((href) => ({\n          rel: 'preload',\n          href,\n          as: 'font',\n          type: 'font/woff2',\n          crossOrigin: 'anonymous',\n        }));\n  const linkProps: LinkProps[] = [...fontPreloads, ...cssLinkProps];\n\n  linkProps.toString = function () {\n    let html = '';\n    for (const link of this) {\n      const attrs = Object.entries(link)\n        .map(([key, value]) => `${key}=\"${value}\"`)\n        .join(' ');\n      html += `<link ${attrs} />\\n`;\n    }\n    return html;\n  };\n\n  return linkProps;\n};\n\nexport type { LinkProps, LinksFunction };\n","{\n  \"font-face.css\": \"css/v1/font-face.8324f4d8.css\",\n  \"tokens.css\": \"css/v1/tokens.a94c1908.css\",\n  \"styles.css\": \"css/v1/styles.661791ab.css\",\n  \"styles_md.css\": \"css/v1/styles_md.53438709.css\",\n  \"styles_xl.css\": \"css/v1/styles_xl.dc799dcd.css\",\n  \"styles_hover.css\": \"css/v1/styles_hover.13f2c48a.css\"\n}","export const defaultBase = 'https://www.volvocars.com/static/shared/pkg/';\n","export interface LinksFilter {\n  preload?: boolean;\n  fonts?: boolean;\n  tokens?: boolean;\n}\n\nexport function createFilter({\n  fonts = true,\n  tokens = true,\n}: LinksFilter = {}) {\n  return ([name]: [string, string]) => {\n    if (name === 'font-face.css') return fonts;\n    if (name.endsWith('tokens.css')) return tokens;\n    return true;\n  };\n}\n","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","import mediaQueries from '../media-queries';\n\nexport function getMediaQuery(name: string) {\n  let suffix = name.split('_').pop()?.replace('.css', '');\n  return mediaQueries[suffix as keyof typeof mediaQueries];\n}\n"],"mappings":"4ZAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,WAAAE,IAAA,eAAAC,EAAAH,GCAA,IAAAI,EAAA,CACE,gBAAiB,gCACjB,aAAc,6BACd,aAAc,6BACd,gBAAiB,gCACjB,gBAAiB,gCACjB,mBAAoB,kCACtB,ECPO,IAAMC,EAAc,+CCMpB,SAASC,EAAa,CAC3B,MAAAC,EAAQ,GACR,OAAAC,EAAS,EACX,EAAiB,CAAC,EAAG,CACnB,MAAO,CAAC,CAACC,CAAI,IACPA,IAAS,gBAAwBF,EACjCE,EAAK,SAAS,YAAY,EAAUD,EACjC,EAEX,CCfA,IAAME,EAAU,CACd,MAAO,iBACP,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACN,EAEOC,EAAQD,ECLR,SAASE,EAAcC,EAAc,CAC1C,IAAIC,EAASD,EAAK,MAAM,GAAG,EAAE,IAAI,GAAG,QAAQ,OAAQ,EAAE,EACtD,OAAOE,EAAaD,CAAmC,CACzD,CLCA,IAAME,EAAkB,CACtB,kFACF,EAEaC,EAAuB,CAAC,CAAE,KAAAC,EAAOC,EAAa,OAAAC,CAAO,EAAI,CAAC,IAAM,CACvEF,GAAQ,OAAOA,GAAS,WAC1BA,EAAOA,EAAK,MAEV,OAAOA,GAAS,UAAYA,IAAS,IAAM,CAACA,EAAK,SAAS,GAAG,IAC/DA,GAAQ,KAEV,IAAMG,EAAe,OAAO,QAAQC,CAAU,EAC3C,OAAOC,EAAaH,CAAM,CAAC,EAC3B,QAAQ,CAAC,CAACI,EAAMC,CAAQ,IAAM,CAC7B,IAAMC,EAAmB,CACvB,KAAMR,EAAOO,EACb,IAAK,aACL,YAAa,WACf,EACME,EAAQC,EAAcJ,CAAI,EAC5BG,IACFD,EAAM,MAAQC,GAGhB,IAAME,EAAe,CACnB,GAAGH,EACH,IAAK,UACL,GAAI,OACN,EAIA,OAFAA,EAAM,qBAAqB,EAAIF,EAE3BJ,GAAQ,UAAY,GACfM,EAEF,CAACG,EAAcH,CAAK,CAC7B,CAAC,EACA,KAAK,CAACI,EAAGC,IACRD,EAAE,MAAQ,WAAaC,EAAE,MAAQ,UAC7B,EACAD,EAAE,MAAQ,UACR,GACA,CACR,EAYIE,EAAyB,CAAC,GAT9BZ,GAAQ,QAAU,IAASA,GAAQ,UAAY,GAC3C,CAAC,EACDJ,EAAgB,IAAKiB,IAAU,CAC7B,IAAK,UACL,KAAAA,EACA,GAAI,OACJ,KAAM,aACN,YAAa,WACf,EAAE,EACyC,GAAGZ,CAAY,EAEhE,OAAAW,EAAU,SAAW,UAAY,CAC/B,IAAIE,EAAO,GACX,QAAWC,KAAQ,KAAM,CACvB,IAAMC,EAAQ,OAAO,QAAQD,CAAI,EAC9B,IAAI,CAAC,CAACE,EAAKC,CAAK,IAAM,GAAGD,CAAG,KAAKC,CAAK,GAAG,EACzC,KAAK,GAAG,EACXJ,GAAQ,SAASE,CAAK;AAAA,CACxB,CACA,OAAOF,CACT,EAEOF,CACT","names":["links_server_exports","__export","links","__toCommonJS","imports_default","defaultBase","createFilter","fonts","tokens","name","queries","media_queries_default","getMediaQuery","name","suffix","media_queries_default","fontPreloadUrls","links","base","defaultBase","filter","cssLinkProps","imports_default","createFilter","name","filename","props","media","getMediaQuery","preloadProps","a","b","linkProps","href","html","link","attrs","key","value"]}
+{"version":3,"sources":["../src/links.server.ts","../src/imports.json","../src/links/constants.ts","../src/links/create-filter.ts","../src/media-queries.ts","../src/links/get-media-query.ts"],"sourcesContent":["import cssImports from './imports.json' with { type: 'json' };\nimport { defaultBase } from './links/constants';\nimport { createFilter } from './links/create-filter';\nimport { getMediaQuery } from './links/get-media-query';\nimport type { LinkProps, LinksFunction } from './links/types';\n\nconst fontPreloadUrls = [\n  'https://www.volvocars.com/static/shared/fonts/volvo-centum/v1/volvo-centum.woff2',\n];\n\nexport const links: LinksFunction = ({ base = defaultBase, filter } = {}) => {\n  if (base && typeof base !== 'string') {\n    base = base.href;\n  }\n  if (typeof base === 'string' && base !== '' && !base.endsWith('/')) {\n    base += '/';\n  }\n  const cssLinkProps = Object.entries(cssImports)\n    .filter(createFilter(filter))\n    .flatMap(([name, filename]) => {\n      const props: LinkProps = {\n        href: base + filename,\n        rel: 'stylesheet',\n        crossOrigin: 'anonymous',\n      };\n      const media = getMediaQuery(name);\n      if (media) {\n        props.media = media;\n      }\n\n      const preloadProps = {\n        ...props,\n        rel: 'preload',\n        as: 'style',\n      };\n\n      props['data-volvo-css-name'] = name;\n\n      if (filter?.preload === false) {\n        return props;\n      }\n      return [preloadProps, props] as const;\n    })\n    .sort((a, b) =>\n      a.rel === 'preload' && b.rel === 'preload'\n        ? 0\n        : a.rel === 'preload'\n          ? -1\n          : 1,\n    ) as LinkProps[];\n\n  const fontPreloads: LinkProps[] =\n    filter?.fonts === false || filter?.preload === false\n      ? []\n      : fontPreloadUrls.map((href) => ({\n          rel: 'preload',\n          href,\n          as: 'font',\n          type: 'font/woff2',\n          crossOrigin: 'anonymous',\n        }));\n  const linkProps: LinkProps[] = [...fontPreloads, ...cssLinkProps];\n\n  linkProps.toString = function () {\n    let html = '';\n    for (const link of this) {\n      const attrs = Object.entries(link)\n        .map(([key, value]) => `${key}=\"${value}\"`)\n        .join(' ');\n      html += `<link ${attrs} />\\n`;\n    }\n    return html;\n  };\n\n  return linkProps;\n};\n\nexport type { LinkProps, LinksFunction };\n","{\n  \"font-face.css\": \"css/v1/font-face.8324f4d8.css\",\n  \"tokens.css\": \"css/v1/tokens.b9b650a2.css\",\n  \"styles.css\": \"css/v1/styles.c474b818.css\",\n  \"styles_md.css\": \"css/v1/styles_md.68466039.css\",\n  \"styles_xl.css\": \"css/v1/styles_xl.dc799dcd.css\",\n  \"styles_hover.css\": \"css/v1/styles_hover.13f2c48a.css\"\n}","export const defaultBase = 'https://www.volvocars.com/static/shared/pkg/';\n","export interface LinksFilter {\n  preload?: boolean;\n  fonts?: boolean;\n  tokens?: boolean;\n}\n\nexport function createFilter({\n  fonts = true,\n  tokens = true,\n}: LinksFilter = {}) {\n  return ([name]: [string, string]) => {\n    if (name === 'font-face.css') return fonts;\n    if (name.endsWith('tokens.css')) return tokens;\n    return true;\n  };\n}\n","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","import mediaQueries from '../media-queries';\n\nexport function getMediaQuery(name: string) {\n  let suffix = name.split('_').pop()?.replace('.css', '');\n  return mediaQueries[suffix as keyof typeof mediaQueries];\n}\n"],"mappings":"4ZAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,WAAAE,IAAA,eAAAC,EAAAH,GCAA,IAAAI,EAAA,CACE,gBAAiB,gCACjB,aAAc,6BACd,aAAc,6BACd,gBAAiB,gCACjB,gBAAiB,gCACjB,mBAAoB,kCACtB,ECPO,IAAMC,EAAc,+CCMpB,SAASC,EAAa,CAC3B,MAAAC,EAAQ,GACR,OAAAC,EAAS,EACX,EAAiB,CAAC,EAAG,CACnB,MAAO,CAAC,CAACC,CAAI,IACPA,IAAS,gBAAwBF,EACjCE,EAAK,SAAS,YAAY,EAAUD,EACjC,EAEX,CCfA,IAAME,EAAU,CACd,MAAO,iBACP,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACN,EAEOC,EAAQD,ECLR,SAASE,EAAcC,EAAc,CAC1C,IAAIC,EAASD,EAAK,MAAM,GAAG,EAAE,IAAI,GAAG,QAAQ,OAAQ,EAAE,EACtD,OAAOE,EAAaD,CAAmC,CACzD,CLCA,IAAME,EAAkB,CACtB,kFACF,EAEaC,EAAuB,CAAC,CAAE,KAAAC,EAAOC,EAAa,OAAAC,CAAO,EAAI,CAAC,IAAM,CACvEF,GAAQ,OAAOA,GAAS,WAC1BA,EAAOA,EAAK,MAEV,OAAOA,GAAS,UAAYA,IAAS,IAAM,CAACA,EAAK,SAAS,GAAG,IAC/DA,GAAQ,KAEV,IAAMG,EAAe,OAAO,QAAQC,CAAU,EAC3C,OAAOC,EAAaH,CAAM,CAAC,EAC3B,QAAQ,CAAC,CAACI,EAAMC,CAAQ,IAAM,CAC7B,IAAMC,EAAmB,CACvB,KAAMR,EAAOO,EACb,IAAK,aACL,YAAa,WACf,EACME,EAAQC,EAAcJ,CAAI,EAC5BG,IACFD,EAAM,MAAQC,GAGhB,IAAME,EAAe,CACnB,GAAGH,EACH,IAAK,UACL,GAAI,OACN,EAIA,OAFAA,EAAM,qBAAqB,EAAIF,EAE3BJ,GAAQ,UAAY,GACfM,EAEF,CAACG,EAAcH,CAAK,CAC7B,CAAC,EACA,KAAK,CAACI,EAAGC,IACRD,EAAE,MAAQ,WAAaC,EAAE,MAAQ,UAC7B,EACAD,EAAE,MAAQ,UACR,GACA,CACR,EAYIE,EAAyB,CAAC,GAT9BZ,GAAQ,QAAU,IAASA,GAAQ,UAAY,GAC3C,CAAC,EACDJ,EAAgB,IAAKiB,IAAU,CAC7B,IAAK,UACL,KAAAA,EACA,GAAI,OACJ,KAAM,aACN,YAAa,WACf,EAAE,EACyC,GAAGZ,CAAY,EAEhE,OAAAW,EAAU,SAAW,UAAY,CAC/B,IAAIE,EAAO,GACX,QAAWC,KAAQ,KAAM,CACvB,IAAMC,EAAQ,OAAO,QAAQD,CAAI,EAC9B,IAAI,CAAC,CAACE,EAAKC,CAAK,IAAM,GAAGD,CAAG,KAAKC,CAAK,GAAG,EACzC,KAAK,GAAG,EACXJ,GAAQ,SAASE,CAAK;AAAA,CACxB,CACA,OAAOF,CACT,EAEOF,CACT","names":["links_server_exports","__export","links","__toCommonJS","imports_default","defaultBase","createFilter","fonts","tokens","name","queries","media_queries_default","getMediaQuery","name","suffix","media_queries_default","fontPreloadUrls","links","base","defaultBase","filter","cssLinkProps","imports_default","createFilter","name","filename","props","media","getMediaQuery","preloadProps","a","b","linkProps","href","html","link","attrs","key","value"]}

package/dist/links.server.js

@@ -1,3 +1,3 @@
-import{a as l,b as f,c,d as a}from"./chunk-O7LMNRND.js";import"./chunk-BBIFT7L4.js";var d=["https://www.volvocars.com/static/shared/fonts/volvo-centum/v1/volvo-centum.woff2"],h=({base:t=f,filter:s}={})=>{t&&typeof t!="string"&&(t=t.href),typeof t=="string"&&t!==""&&!t.endsWith("/")&&(t+="/");let m=Object.entries(l).filter(c(s)).flatMap(([o,n])=>{let r={href:t+n,rel:"stylesheet",crossOrigin:"anonymous"},e=a(o);e&&(r.media=e);let i={...r,rel:"preload",as:"style"};return r["data-volvo-css-name"]=o,s?.preload===!1?r:[i,r]}).sort((o,n)=>o.rel==="preload"&&n.rel==="preload"?0:o.rel==="preload"?-1:1),p=[...s?.fonts===!1||s?.preload===!1?[]:d.map(o=>({rel:"preload",href:o,as:"font",type:"font/woff2",crossOrigin:"anonymous"})),...m];return p.toString=function(){let o="";for(let n of this){let r=Object.entries(n).map(([e,i])=>`${e}="${i}"`).join(" ");o+=`<link ${r} />
+import{a as l,b as f,c,d as a}from"./chunk-WHX3TVFH.js";import"./chunk-BBIFT7L4.js";var d=["https://www.volvocars.com/static/shared/fonts/volvo-centum/v1/volvo-centum.woff2"],h=({base:t=f,filter:s}={})=>{t&&typeof t!="string"&&(t=t.href),typeof t=="string"&&t!==""&&!t.endsWith("/")&&(t+="/");let m=Object.entries(l).filter(c(s)).flatMap(([o,n])=>{let r={href:t+n,rel:"stylesheet",crossOrigin:"anonymous"},e=a(o);e&&(r.media=e);let i={...r,rel:"preload",as:"style"};return r["data-volvo-css-name"]=o,s?.preload===!1?r:[i,r]}).sort((o,n)=>o.rel==="preload"&&n.rel==="preload"?0:o.rel==="preload"?-1:1),p=[...s?.fonts===!1||s?.preload===!1?[]:d.map(o=>({rel:"preload",href:o,as:"font",type:"font/woff2",crossOrigin:"anonymous"})),...m];return p.toString=function(){let o="";for(let n of this){let r=Object.entries(n).map(([e,i])=>`${e}="${i}"`).join(" ");o+=`<link ${r} />
 `}return o},p};export{h as links};
 //# sourceMappingURL=links.server.js.map

package/dist/llm/meta.md

@@ -184,6 +184,8 @@ Utility classes may be combined with other classes and include the CSS rules the
 
 .pagelayout
 
+.navigation-bar
+
 
 ### Layer: utilities
 
@@ -1966,6 +1968,18 @@ padding-top: var(--v-space-2xl)
 .{lg,md,xl}:pb-2xl
 padding-bottom: var(--v-space-2xl)
 
+.pointer-events-none
+pointer-events: none
+
+.pointer-events-auto
+pointer-events: auto
+
+.cursor-pointer
+cursor: pointer
+
+.cursor-auto
+cursor: auto
+
 .static
 position: static
 
@@ -2008,6 +2022,9 @@ scale: 1.1
 .scale-110
 scale: 1.1
 
+.select-none
+user-select: none
+
 .scrollbar-none
 
 
@@ -2294,49 +2311,52 @@ pagemargin; on wider viewports it adds the extra centering space.
 --v-size-grid-max: Width based on the maximum extent of a `max` container
 --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-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-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-size-navigation-bar-height--v-grid-columns: The total number of grid columns at the current breakpoint.
+--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: 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-foreground-inverted: The inverse of the primary foreground color. For use on filled surfaces.
+--v-color-foreground-accent-blue: For emphasized selection borders and graphic accents (icons, illustrations).
+--v-color-foreground-feedback-green: Use as a foreground or border color to highlight successful states and positive actions.
+--v-color-foreground-feedback-red: Use as a foreground or border color to highlight errors, invalid data, and destructive 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-surface-neutral: Used as a surface fill for UI elements like buttons and form controls. Combine with Foreground / Inverted foreground color.
+--v-color-surface-gray: Used as surface fill.
+--v-color-surface-accent-blue: Used as an emphasized surface fill for UI elements like buttons and form controls.
 --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-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-background-primary: Use as a primary background color.
+--v-color-background-secondary: Use as a secondary background color for elevated sections.
+--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-red: Use as a background color to highlight errors, invalid data, and destructive 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-always-white: Always white regardless of color mode.
+--v-color-always-black: Always black regardless of colour mode.
+--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-primary-strong: Use for state layers with foreground/primary.
 --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-strong: Use for state layers with foreground/inverted.
 --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-strong: Use for state layers with foreground/accent/blue.
 --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-strong: Use for state layers with foreground/feedback/red.
 --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-strong: Use for state layers with an always/black foreground color.
 --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-strong: Use for state layers with an always/white 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-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-space-2: Fixed 2px spacing
 --v-space-4: Fixed 4px spacing
 --v-space-8: Fixed 8px spacing
@@ -2357,8 +2377,6 @@ https://baymard.com/blog/line-length-readability
 --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