@vonage/vivid 3.44.0 → 3.46.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/README.md +399 -165
  2. package/appearance-ui/index.js +1 -1
  3. package/custom-elements.json +133 -248
  4. package/fab/index.js +0 -1
  5. package/index.js +2 -1
  6. package/lib/alert/alert.d.ts +2 -0
  7. package/lib/data-grid/data-grid-cell.d.ts +1 -0
  8. package/lib/data-grid/data-grid.d.ts +2 -0
  9. package/lib/enums.d.ts +3 -0
  10. package/lib/menu/menu.d.ts +5 -5
  11. package/lib/popup/popup.d.ts +2 -2
  12. package/lib/select/select.d.ts +0 -3
  13. package/lib/tabs/tabs.d.ts +3 -1
  14. package/lib/text-area/text-area.d.ts +2 -2
  15. package/lib/toggletip/toggletip.d.ts +4 -4
  16. package/lib/tooltip/tooltip.d.ts +4 -5
  17. package/listbox/index.js +1 -1
  18. package/menu/index.js +1 -0
  19. package/menu-item/index.js +1 -0
  20. package/package.json +1 -1
  21. package/shared/anchored.js +76 -0
  22. package/shared/definition.js +1 -1
  23. package/shared/definition11.js +1 -1
  24. package/shared/definition12.js +1 -1
  25. package/shared/definition13.js +1 -1
  26. package/shared/definition14.js +1 -1
  27. package/shared/definition15.js +1 -1
  28. package/shared/definition16.js +1 -1
  29. package/shared/definition17.js +112 -49
  30. package/shared/definition2.js +1 -1
  31. package/shared/definition20.js +2 -2
  32. package/shared/definition21.js +1 -1
  33. package/shared/definition22.js +1 -1
  34. package/shared/definition23.js +1 -4
  35. package/shared/definition24.js +1 -1
  36. package/shared/definition25.js +1 -1
  37. package/shared/definition28.js +37 -46
  38. package/shared/definition29.js +2 -2
  39. package/shared/definition3.js +1 -1
  40. package/shared/definition30.js +1 -1
  41. package/shared/definition31.js +1 -1
  42. package/shared/definition33.js +1 -1
  43. package/shared/definition34.js +1 -1
  44. package/shared/definition35.js +1 -1
  45. package/shared/definition36.js +1 -1
  46. package/shared/definition37.js +1 -1
  47. package/shared/definition38.js +1 -1
  48. package/shared/definition39.js +1 -1
  49. package/shared/definition4.js +10 -6
  50. package/shared/definition40.js +1 -1
  51. package/shared/definition41.js +6 -4
  52. package/shared/definition42.js +1 -1
  53. package/shared/definition43.js +1 -1
  54. package/shared/definition44.js +1 -1
  55. package/shared/definition45.js +20 -9
  56. package/shared/definition46.js +1 -1
  57. package/shared/definition48.js +1 -1
  58. package/shared/definition49.js +8 -3
  59. package/shared/definition5.js +1 -1
  60. package/shared/definition51.js +1 -1
  61. package/shared/definition52.js +1 -1
  62. package/shared/definition54.js +37 -45
  63. package/shared/definition55.js +42 -58
  64. package/shared/definition56.js +1 -1
  65. package/shared/definition58.js +1 -1
  66. package/shared/definition6.js +1 -1
  67. package/shared/definition60.js +108 -12
  68. package/shared/definition7.js +1 -1
  69. package/shared/definition8.js +2 -3
  70. package/shared/definition9.js +1 -1
  71. package/shared/enums.js +5 -1
  72. package/shared/form-associated.js +1 -0
  73. package/shared/index2.js +1 -1
  74. package/shared/patterns/anchored.d.ts +22 -0
  75. package/shared/presentationDate.js +1 -1
  76. package/shared/text-field.js +1 -1
  77. package/style.css +162 -135
  78. package/styles/core/all.css +1 -1
  79. package/styles/core/theme.css +1 -1
  80. package/styles/core/typography.css +1 -1
  81. package/styles/tokens/theme-dark.css +4 -4
  82. package/styles/tokens/theme-light.css +4 -4
  83. package/styles/tokens/vivid-2-compat.css +1 -1
  84. package/toggletip/index.js +1 -0
  85. package/tooltip/index.js +1 -0
  86. package/vivid.api.json +38 -0
package/appearance-ui/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { a as attr, F as FoundationElement, h as html, r as registerFactory } from '../shared/index.js';
2
2
  import { c as classNames } from '../shared/class-names.js';
3
3
 
4
- const styles = "/**\n * Do not edit directly\n * Generated on Thu, 21 Dec 2023 10:43:18 GMT\n */\n.wrapper {\n display: grid;\n column-gap: 8px;\n grid-template-columns: repeat(7, auto);\n}\n\n.base {\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n background-color: var(--_appearance-color-fill);\n block-size: 40px;\n border-radius: 6px;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n padding-inline: 16px;\n}\n.base.connotation-cta {\n /* @cssprop [--vvd-appearanceUI-cta-faint=var(--vvd-color-cta-50)] */\n --_connotation-color-faint: var(--vvd-appearanceUI-cta-faint, var(--vvd-color-cta-50));\n /* @cssprop [--vvd-appearanceUI-cta-soft=var(--vvd-color-cta-100)] */\n --_connotation-color-soft: var(--vvd-appearanceUI-cta-soft, var(--vvd-color-cta-100));\n /* @cssprop [--vvd-appearanceUI-cta-dim=var(--vvd-color-cta-200)] */\n --_connotation-color-dim: var(--vvd-appearanceUI-cta-dim, var(--vvd-color-cta-200));\n /* @cssprop [--vvd-appearanceUI-cta-pale=var(--vvd-color-cta-300)] */\n --_connotation-color-pale: var(--vvd-appearanceUI-cta-pale, var(--vvd-color-cta-300));\n /* @cssprop [--vvd-appearanceUI-cta-light=var(--vvd-color-cta-400)] */\n --_connotation-color-light: var(--vvd-appearanceUI-cta-light, var(--vvd-color-cta-400));\n /* @cssprop [--vvd-appearanceUI-cta-primary=var(--vvd-color-cta-500)] */\n --_connotation-color-primary: var(--vvd-appearanceUI-cta-primary, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-appearanceUI-cta-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-appearanceUI-cta-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-appearanceUI-cta-primary-increment=var(--vvd-color-cta-600)] */\n --_connotation-color-primary-increment: var(--vvd-appearanceUI-cta-primary-increment, var(--vvd-color-cta-600));\n /* @cssprop [--vvd-appearanceUI-cta-firm=var(--vvd-color-cta-600)] */\n --_connotation-color-firm: var(--vvd-appearanceUI-cta-firm, var(--vvd-color-cta-600));\n /* @cssprop [--vvd-appearanceUI-cta-fierce=var(--vvd-color-cta-700)] */\n --_connotation-color-fierce: var(--vvd-appearanceUI-cta-fierce, var(--vvd-color-cta-700));\n /* @cssprop [--vvd-appearanceUI-cta-contrast=var(--vvd-color-cta-800)] */\n --_connotation-color-contrast: var(--vvd-appearanceUI-cta-contrast, var(--vvd-color-cta-800));\n /* @cssprop [--vvd-appearanceUI-cta-backdrop=var(--vvd-color-cta-50)] */\n --_connotation-color-backdrop: var(--vvd-appearanceUI-cta-backdrop, var(--vvd-color-cta-50));\n /* @cssprop [--vvd-appearanceUI-cta-intermediate=var(--vvd-color-cta-500)] */\n --_connotation-color-intermediate: var(--vvd-appearanceUI-cta-intermediate, var(--vvd-color-cta-500));\n}\n.base.connotation-success {\n /* @cssprop [--vvd-appearanceUI-success-faint=var(--vvd-color-success-50)] */\n --_connotation-color-faint: var(--vvd-appearanceUI-success-faint, var(--vvd-color-success-50));\n /* @cssprop [--vvd-appearanceUI-success-soft=var(--vvd-color-success-100)] */\n --_connotation-color-soft: var(--vvd-appearanceUI-success-soft, var(--vvd-color-success-100));\n /* @cssprop [--vvd-appearanceUI-success-dim=var(--vvd-color-success-200)] */\n --_connotation-color-dim: var(--vvd-appearanceUI-success-dim, var(--vvd-color-success-200));\n /* @cssprop [--vvd-appearanceUI-success-pale=var(--vvd-color-success-300)] */\n --_connotation-color-pale: var(--vvd-appearanceUI-success-pale, var(--vvd-color-success-300));\n /* @cssprop [--vvd-appearanceUI-success-light=var(--vvd-color-success-400)] */\n --_connotation-color-light: var(--vvd-appearanceUI-success-light, var(--vvd-color-success-400));\n /* @cssprop [--vvd-appearanceUI-success-primary=var(--vvd-color-success-500)] */\n --_connotation-color-primary: var(--vvd-appearanceUI-success-primary, var(--vvd-color-success-500));\n /* @cssprop [--vvd-appearanceUI-success-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-appearanceUI-success-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-appearanceUI-success-primary-increment=var(--vvd-color-success-600)] */\n --_connotation-color-primary-increment: var(--vvd-appearanceUI-success-primary-increment, var(--vvd-color-success-600));\n /* @cssprop [--vvd-appearanceUI-success-firm=var(--vvd-color-success-600)] */\n --_connotation-color-firm: var(--vvd-appearanceUI-success-firm, var(--vvd-color-success-600));\n /* @cssprop [--vvd-appearanceUI-success-fierce=var(--vvd-color-success-700)] */\n --_connotation-color-fierce: var(--vvd-appearanceUI-success-fierce, var(--vvd-color-success-700));\n /* @cssprop [--vvd-appearanceUI-success-contrast=var(--vvd-color-success-800)] */\n --_connotation-color-contrast: var(--vvd-appearanceUI-success-contrast, var(--vvd-color-success-800));\n /* @cssprop [--vvd-appearanceUI-success-backdrop=var(--vvd-color-success-50)] */\n --_connotation-color-backdrop: var(--vvd-appearanceUI-success-backdrop, var(--vvd-color-success-50));\n /* @cssprop [--vvd-appearanceUI-success-intermediate=var(--vvd-color-success-500)] */\n --_connotation-color-intermediate: var(--vvd-appearanceUI-success-intermediate, var(--vvd-color-success-500));\n}\n.base.connotation-alert {\n /* @cssprop [--vvd-appearanceUI-alert-faint=var(--vvd-color-alert-50)] */\n --_connotation-color-faint: var(--vvd-appearanceUI-alert-faint, var(--vvd-color-alert-50));\n /* @cssprop [--vvd-appearanceUI-alert-soft=var(--vvd-color-alert-100)] */\n --_connotation-color-soft: var(--vvd-appearanceUI-alert-soft, var(--vvd-color-alert-100));\n /* @cssprop [--vvd-appearanceUI-alert-dim=var(--vvd-color-alert-200)] */\n --_connotation-color-dim: var(--vvd-appearanceUI-alert-dim, var(--vvd-color-alert-200));\n /* @cssprop [--vvd-appearanceUI-alert-pale=var(--vvd-color-alert-300)] */\n --_connotation-color-pale: var(--vvd-appearanceUI-alert-pale, var(--vvd-color-alert-300));\n /* @cssprop [--vvd-appearanceUI-alert-light=var(--vvd-color-alert-400)] */\n --_connotation-color-light: var(--vvd-appearanceUI-alert-light, var(--vvd-color-alert-400));\n /* @cssprop [--vvd-appearanceUI-alert-primary=var(--vvd-color-alert-500)] */\n --_connotation-color-primary: var(--vvd-appearanceUI-alert-primary, var(--vvd-color-alert-500));\n /* @cssprop [--vvd-appearanceUI-alert-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-appearanceUI-alert-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-appearanceUI-alert-primary-increment=var(--vvd-color-alert-600)] */\n --_connotation-color-primary-increment: var(--vvd-appearanceUI-alert-primary-increment, var(--vvd-color-alert-600));\n /* @cssprop [--vvd-appearanceUI-alert-firm=var(--vvd-color-alert-600)] */\n --_connotation-color-firm: var(--vvd-appearanceUI-alert-firm, var(--vvd-color-alert-600));\n /* @cssprop [--vvd-appearanceUI-alert-fierce=var(--vvd-color-alert-700)] */\n --_connotation-color-fierce: var(--vvd-appearanceUI-alert-fierce, var(--vvd-color-alert-700));\n /* @cssprop [--vvd-appearanceUI-alert-contrast=var(--vvd-color-alert-800)] */\n --_connotation-color-contrast: var(--vvd-appearanceUI-alert-contrast, var(--vvd-color-alert-800));\n /* @cssprop [--vvd-appearanceUI-alert-backdrop=var(--vvd-color-alert-50)] */\n --_connotation-color-backdrop: var(--vvd-appearanceUI-alert-backdrop, var(--vvd-color-alert-50));\n /* @cssprop [--vvd-appearanceUI-alert-intermediate=var(--vvd-color-alert-500)] */\n --_connotation-color-intermediate: var(--vvd-appearanceUI-alert-intermediate, var(--vvd-color-alert-500));\n}\n.base.connotation-warning {\n /* @cssprop [--vvd-appearanceUI-warning-faint=var(--vvd-color-warning-50)] */\n --_connotation-color-faint: var(--vvd-appearanceUI-warning-faint, var(--vvd-color-warning-50));\n /* @cssprop [--vvd-appearanceUI-warning-soft=var(--vvd-color-warning-100)] */\n --_connotation-color-soft: var(--vvd-appearanceUI-warning-soft, var(--vvd-color-warning-100));\n /* @cssprop [--vvd-appearanceUI-warning-dim=var(--vvd-color-warning-200)] */\n --_connotation-color-dim: var(--vvd-appearanceUI-warning-dim, var(--vvd-color-warning-200));\n /* @cssprop [--vvd-appearanceUI-warning-pale=var(--vvd-color-warning-300)] */\n --_connotation-color-pale: var(--vvd-appearanceUI-warning-pale, var(--vvd-color-warning-300));\n /* @cssprop [--vvd-appearanceUI-warning-light=var(--vvd-color-warning-400)] */\n --_connotation-color-light: var(--vvd-appearanceUI-warning-light, var(--vvd-color-warning-400));\n /* @cssprop [--vvd-appearanceUI-warning-primary=var(--vvd-color-warning-300)] */\n --_connotation-color-primary: var(--vvd-appearanceUI-warning-primary, var(--vvd-color-warning-300));\n /* @cssprop [--vvd-appearanceUI-warning-primary-text=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary-text: var(--vvd-appearanceUI-warning-primary-text, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-appearanceUI-warning-primary-increment=var(--vvd-color-warning-600)] */\n --_connotation-color-primary-increment: var(--vvd-appearanceUI-warning-primary-increment, var(--vvd-color-warning-600));\n /* @cssprop [--vvd-appearanceUI-warning-firm=var(--vvd-color-warning-600)] */\n --_connotation-color-firm: var(--vvd-appearanceUI-warning-firm, var(--vvd-color-warning-600));\n /* @cssprop [--vvd-appearanceUI-warning-fierce=var(--vvd-color-warning-700)] */\n --_connotation-color-fierce: var(--vvd-appearanceUI-warning-fierce, var(--vvd-color-warning-700));\n /* @cssprop [--vvd-appearanceUI-warning-contrast=var(--vvd-color-warning-800)] */\n --_connotation-color-contrast: var(--vvd-appearanceUI-warning-contrast, var(--vvd-color-warning-800));\n /* @cssprop [--vvd-appearanceUI-warning-backdrop=var(--vvd-color-warning-50)] */\n --_connotation-color-backdrop: var(--vvd-appearanceUI-warning-backdrop, var(--vvd-color-warning-50));\n /* @cssprop [--vvd-appearanceUI-warning-intermediate=var(--vvd-color-warning-300)] */\n --_connotation-color-intermediate: var(--vvd-appearanceUI-warning-intermediate, var(--vvd-color-warning-300));\n}\n.base.connotation-information {\n /* @cssprop [--vvd-appearanceUI-information-faint=var(--vvd-color-information-50)] */\n --_connotation-color-faint: var(--vvd-appearanceUI-information-faint, var(--vvd-color-information-50));\n /* @cssprop [--vvd-appearanceUI-information-soft=var(--vvd-color-information-100)] */\n --_connotation-color-soft: var(--vvd-appearanceUI-information-soft, var(--vvd-color-information-100));\n /* @cssprop [--vvd-appearanceUI-information-dim=var(--vvd-color-information-200)] */\n --_connotation-color-dim: var(--vvd-appearanceUI-information-dim, var(--vvd-color-information-200));\n /* @cssprop [--vvd-appearanceUI-information-pale=var(--vvd-color-information-300)] */\n --_connotation-color-pale: var(--vvd-appearanceUI-information-pale, var(--vvd-color-information-300));\n /* @cssprop [--vvd-appearanceUI-information-light=var(--vvd-color-information-400)] */\n --_connotation-color-light: var(--vvd-appearanceUI-information-light, var(--vvd-color-information-400));\n /* @cssprop [--vvd-appearanceUI-information-primary=var(--vvd-color-information-500)] */\n --_connotation-color-primary: var(--vvd-appearanceUI-information-primary, var(--vvd-color-information-500));\n /* @cssprop [--vvd-appearanceUI-information-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-appearanceUI-information-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-appearanceUI-information-primary-increment=var(--vvd-color-information-600)] */\n --_connotation-color-primary-increment: var(--vvd-appearanceUI-information-primary-increment, var(--vvd-color-information-600));\n /* @cssprop [--vvd-appearanceUI-information-firm=var(--vvd-color-information-600)] */\n --_connotation-color-firm: var(--vvd-appearanceUI-information-firm, var(--vvd-color-information-600));\n /* @cssprop [--vvd-appearanceUI-information-fierce=var(--vvd-color-information-700)] */\n --_connotation-color-fierce: var(--vvd-appearanceUI-information-fierce, var(--vvd-color-information-700));\n /* @cssprop [--vvd-appearanceUI-information-contrast=var(--vvd-color-information-800)] */\n --_connotation-color-contrast: var(--vvd-appearanceUI-information-contrast, var(--vvd-color-information-800));\n /* @cssprop [--vvd-appearanceUI-information-backdrop=var(--vvd-color-information-50)] */\n --_connotation-color-backdrop: var(--vvd-appearanceUI-information-backdrop, var(--vvd-color-information-50));\n /* @cssprop [--vvd-appearanceUI-information-intermediate=var(--vvd-color-information-500)] */\n --_connotation-color-intermediate: var(--vvd-appearanceUI-information-intermediate, var(--vvd-color-information-500));\n}\n.base.connotation-announcement {\n /* @cssprop [--vvd-appearanceUI-announcement-faint=var(--vvd-color-announcement-50)] */\n --_connotation-color-faint: var(--vvd-appearanceUI-announcement-faint, var(--vvd-color-announcement-50));\n /* @cssprop [--vvd-appearanceUI-announcement-soft=var(--vvd-color-announcement-100)] */\n --_connotation-color-soft: var(--vvd-appearanceUI-announcement-soft, var(--vvd-color-announcement-100));\n /* @cssprop [--vvd-appearanceUI-announcement-dim=var(--vvd-color-announcement-200)] */\n --_connotation-color-dim: var(--vvd-appearanceUI-announcement-dim, var(--vvd-color-announcement-200));\n /* @cssprop [--vvd-appearanceUI-announcement-pale=var(--vvd-color-announcement-300)] */\n --_connotation-color-pale: var(--vvd-appearanceUI-announcement-pale, var(--vvd-color-announcement-300));\n /* @cssprop [--vvd-appearanceUI-announcement-light=var(--vvd-color-announcement-400)] */\n --_connotation-color-light: var(--vvd-appearanceUI-announcement-light, var(--vvd-color-announcement-400));\n /* @cssprop [--vvd-appearanceUI-announcement-primary=var(--vvd-color-announcement-500)] */\n --_connotation-color-primary: var(--vvd-appearanceUI-announcement-primary, var(--vvd-color-announcement-500));\n /* @cssprop [--vvd-appearanceUI-announcement-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-appearanceUI-announcement-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-appearanceUI-announcement-primary-increment=var(--vvd-color-announcement-600)] */\n --_connotation-color-primary-increment: var(--vvd-appearanceUI-announcement-primary-increment, var(--vvd-color-announcement-600));\n /* @cssprop [--vvd-appearanceUI-announcement-firm=var(--vvd-color-announcement-600)] */\n --_connotation-color-firm: var(--vvd-appearanceUI-announcement-firm, var(--vvd-color-announcement-600));\n /* @cssprop [--vvd-appearanceUI-announcement-fierce=var(--vvd-color-announcement-700)] */\n --_connotation-color-fierce: var(--vvd-appearanceUI-announcement-fierce, var(--vvd-color-announcement-700));\n /* @cssprop [--vvd-appearanceUI-announcement-contrast=var(--vvd-color-announcement-800)] */\n --_connotation-color-contrast: var(--vvd-appearanceUI-announcement-contrast, var(--vvd-color-announcement-800));\n /* @cssprop [--vvd-appearanceUI-announcement-backdrop=var(--vvd-color-announcement-50)] */\n --_connotation-color-backdrop: var(--vvd-appearanceUI-announcement-backdrop, var(--vvd-color-announcement-50));\n /* @cssprop [--vvd-appearanceUI-announcement-intermediate=var(--vvd-color-announcement-500)] */\n --_connotation-color-intermediate: var(--vvd-appearanceUI-announcement-intermediate, var(--vvd-color-announcement-500));\n}\n.base:not(.connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-information, .connotation-announcement) {\n /* @cssprop [--vvd-appearanceUI-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-appearanceUI-accent-faint, var(--vvd-color-neutral-50));\n /* @cssprop [--vvd-appearanceUI-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-appearanceUI-accent-soft, var(--vvd-color-neutral-100));\n /* @cssprop [--vvd-appearanceUI-accent-dim=var(--vvd-color-neutral-200)] */\n --_connotation-color-dim: var(--vvd-appearanceUI-accent-dim, var(--vvd-color-neutral-200));\n /* @cssprop [--vvd-appearanceUI-accent-pale=var(--vvd-color-neutral-300)] */\n --_connotation-color-pale: var(--vvd-appearanceUI-accent-pale, var(--vvd-color-neutral-300));\n /* @cssprop [--vvd-appearanceUI-accent-light=var(--vvd-color-neutral-400)] */\n --_connotation-color-light: var(--vvd-appearanceUI-accent-light, var(--vvd-color-neutral-400));\n /* @cssprop [--vvd-appearanceUI-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-appearanceUI-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-appearanceUI-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-appearanceUI-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-appearanceUI-accent-primary-increment=var(--vvd-color-neutral-800)] */\n --_connotation-color-primary-increment: var(--vvd-appearanceUI-accent-primary-increment, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-appearanceUI-accent-firm=var(--vvd-color-canvas-text)] */\n --_connotation-color-firm: var(--vvd-appearanceUI-accent-firm, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-appearanceUI-accent-fierce=var(--vvd-color-neutral-700)] */\n --_connotation-color-fierce: var(--vvd-appearanceUI-accent-fierce, var(--vvd-color-neutral-700));\n /* @cssprop [--vvd-appearanceUI-accent-contrast=var(--vvd-color-neutral-800)] */\n --_connotation-color-contrast: var(--vvd-appearanceUI-accent-contrast, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-appearanceUI-accent-backdrop=var(--vvd-color-canvas)] */\n --_connotation-color-backdrop: var(--vvd-appearanceUI-accent-backdrop, var(--vvd-color-canvas));\n /* @cssprop [--vvd-appearanceUI-accent-intermediate=var(--vvd-color-neutral-500)] */\n --_connotation-color-intermediate: var(--vvd-appearanceUI-accent-intermediate, var(--vvd-color-neutral-500));\n}\n.base {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transparent;\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base.appearance-outlined {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base.appearance-duotone {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base.appearance-subtle {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transparent;\n}\n.base.appearance-fieldset {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-listitem {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary-increment);\n --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-duotone {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-subtle {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-fieldset {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-listitem {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-fierce);\n --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-outlined {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-duotone {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-subtle {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: var(--_connotation-color-dim);\n --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-fieldset {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-listitem {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-outlined {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: notset;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-duotone {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-subtle {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: var(--_connotation-color-pale);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-fieldset {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-listitem {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-dim);\n --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-outlined {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: notset;\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-duotone {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-subtle {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: var(--_connotation-color-pale);\n --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-fieldset {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-listitem {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-dim);\n --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: notset;\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary-increment);\n --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: notset;\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-duotone {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-subtle {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: var(--_connotation-color-pale);\n --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-fieldset {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary-increment);\n --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-listitem {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-pale);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: notset;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary-increment);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: notset;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-duotone {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-subtle {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: var(--_connotation-color-pale);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-fieldset {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary-increment);\n --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-listitem {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-pale);\n --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled).appearance-outlined {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-duotone {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: var(--vvd-color-neutral-100);\n}\n.base:where(:disabled, .disabled).appearance-subtle {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled).appearance-fieldset {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-listitem {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-outlined {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: notset;\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-duotone {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: notset;\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-subtle {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: notset;\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-fieldset {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-listitem {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-neutral-800);\n --_appearance-color-fill: var(--vvd-color-neutral-500);\n --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-600);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-outlined {\n --_appearance-color-text: var(--vvd-color-neutral-600);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-duotone {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: notset;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-subtle {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: notset;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-fieldset {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-listitem {\n --_appearance-color-text: var(--vvd-color-neutral-600);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}";
4
+ const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n.wrapper {\n display: grid;\n column-gap: 8px;\n grid-template-columns: repeat(7, auto);\n}\n\n.base {\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n background-color: var(--_appearance-color-fill);\n block-size: 40px;\n border-radius: 8px;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n padding-inline: 16px;\n}\n.base.connotation-cta {\n /* @cssprop [--vvd-appearanceUI-cta-faint=var(--vvd-color-cta-50)] */\n --_connotation-color-faint: var(--vvd-appearanceUI-cta-faint, var(--vvd-color-cta-50));\n /* @cssprop [--vvd-appearanceUI-cta-soft=var(--vvd-color-cta-100)] */\n --_connotation-color-soft: var(--vvd-appearanceUI-cta-soft, var(--vvd-color-cta-100));\n /* @cssprop [--vvd-appearanceUI-cta-dim=var(--vvd-color-cta-200)] */\n --_connotation-color-dim: var(--vvd-appearanceUI-cta-dim, var(--vvd-color-cta-200));\n /* @cssprop [--vvd-appearanceUI-cta-pale=var(--vvd-color-cta-300)] */\n --_connotation-color-pale: var(--vvd-appearanceUI-cta-pale, var(--vvd-color-cta-300));\n /* @cssprop [--vvd-appearanceUI-cta-light=var(--vvd-color-cta-400)] */\n --_connotation-color-light: var(--vvd-appearanceUI-cta-light, var(--vvd-color-cta-400));\n /* @cssprop [--vvd-appearanceUI-cta-primary=var(--vvd-color-cta-500)] */\n --_connotation-color-primary: var(--vvd-appearanceUI-cta-primary, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-appearanceUI-cta-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-appearanceUI-cta-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-appearanceUI-cta-primary-increment=var(--vvd-color-cta-600)] */\n --_connotation-color-primary-increment: var(--vvd-appearanceUI-cta-primary-increment, var(--vvd-color-cta-600));\n /* @cssprop [--vvd-appearanceUI-cta-firm=var(--vvd-color-cta-600)] */\n --_connotation-color-firm: var(--vvd-appearanceUI-cta-firm, var(--vvd-color-cta-600));\n /* @cssprop [--vvd-appearanceUI-cta-fierce=var(--vvd-color-cta-700)] */\n --_connotation-color-fierce: var(--vvd-appearanceUI-cta-fierce, var(--vvd-color-cta-700));\n /* @cssprop [--vvd-appearanceUI-cta-contrast=var(--vvd-color-cta-800)] */\n --_connotation-color-contrast: var(--vvd-appearanceUI-cta-contrast, var(--vvd-color-cta-800));\n /* @cssprop [--vvd-appearanceUI-cta-backdrop=var(--vvd-color-cta-50)] */\n --_connotation-color-backdrop: var(--vvd-appearanceUI-cta-backdrop, var(--vvd-color-cta-50));\n /* @cssprop [--vvd-appearanceUI-cta-intermediate=var(--vvd-color-cta-500)] */\n --_connotation-color-intermediate: var(--vvd-appearanceUI-cta-intermediate, var(--vvd-color-cta-500));\n}\n.base.connotation-success {\n /* @cssprop [--vvd-appearanceUI-success-faint=var(--vvd-color-success-50)] */\n --_connotation-color-faint: var(--vvd-appearanceUI-success-faint, var(--vvd-color-success-50));\n /* @cssprop [--vvd-appearanceUI-success-soft=var(--vvd-color-success-100)] */\n --_connotation-color-soft: var(--vvd-appearanceUI-success-soft, var(--vvd-color-success-100));\n /* @cssprop [--vvd-appearanceUI-success-dim=var(--vvd-color-success-200)] */\n --_connotation-color-dim: var(--vvd-appearanceUI-success-dim, var(--vvd-color-success-200));\n /* @cssprop [--vvd-appearanceUI-success-pale=var(--vvd-color-success-300)] */\n --_connotation-color-pale: var(--vvd-appearanceUI-success-pale, var(--vvd-color-success-300));\n /* @cssprop [--vvd-appearanceUI-success-light=var(--vvd-color-success-400)] */\n --_connotation-color-light: var(--vvd-appearanceUI-success-light, var(--vvd-color-success-400));\n /* @cssprop [--vvd-appearanceUI-success-primary=var(--vvd-color-success-500)] */\n --_connotation-color-primary: var(--vvd-appearanceUI-success-primary, var(--vvd-color-success-500));\n /* @cssprop [--vvd-appearanceUI-success-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-appearanceUI-success-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-appearanceUI-success-primary-increment=var(--vvd-color-success-600)] */\n --_connotation-color-primary-increment: var(--vvd-appearanceUI-success-primary-increment, var(--vvd-color-success-600));\n /* @cssprop [--vvd-appearanceUI-success-firm=var(--vvd-color-success-600)] */\n --_connotation-color-firm: var(--vvd-appearanceUI-success-firm, var(--vvd-color-success-600));\n /* @cssprop [--vvd-appearanceUI-success-fierce=var(--vvd-color-success-700)] */\n --_connotation-color-fierce: var(--vvd-appearanceUI-success-fierce, var(--vvd-color-success-700));\n /* @cssprop [--vvd-appearanceUI-success-contrast=var(--vvd-color-success-800)] */\n --_connotation-color-contrast: var(--vvd-appearanceUI-success-contrast, var(--vvd-color-success-800));\n /* @cssprop [--vvd-appearanceUI-success-backdrop=var(--vvd-color-success-50)] */\n --_connotation-color-backdrop: var(--vvd-appearanceUI-success-backdrop, var(--vvd-color-success-50));\n /* @cssprop [--vvd-appearanceUI-success-intermediate=var(--vvd-color-success-500)] */\n --_connotation-color-intermediate: var(--vvd-appearanceUI-success-intermediate, var(--vvd-color-success-500));\n}\n.base.connotation-alert {\n /* @cssprop [--vvd-appearanceUI-alert-faint=var(--vvd-color-alert-50)] */\n --_connotation-color-faint: var(--vvd-appearanceUI-alert-faint, var(--vvd-color-alert-50));\n /* @cssprop [--vvd-appearanceUI-alert-soft=var(--vvd-color-alert-100)] */\n --_connotation-color-soft: var(--vvd-appearanceUI-alert-soft, var(--vvd-color-alert-100));\n /* @cssprop [--vvd-appearanceUI-alert-dim=var(--vvd-color-alert-200)] */\n --_connotation-color-dim: var(--vvd-appearanceUI-alert-dim, var(--vvd-color-alert-200));\n /* @cssprop [--vvd-appearanceUI-alert-pale=var(--vvd-color-alert-300)] */\n --_connotation-color-pale: var(--vvd-appearanceUI-alert-pale, var(--vvd-color-alert-300));\n /* @cssprop [--vvd-appearanceUI-alert-light=var(--vvd-color-alert-400)] */\n --_connotation-color-light: var(--vvd-appearanceUI-alert-light, var(--vvd-color-alert-400));\n /* @cssprop [--vvd-appearanceUI-alert-primary=var(--vvd-color-alert-500)] */\n --_connotation-color-primary: var(--vvd-appearanceUI-alert-primary, var(--vvd-color-alert-500));\n /* @cssprop [--vvd-appearanceUI-alert-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-appearanceUI-alert-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-appearanceUI-alert-primary-increment=var(--vvd-color-alert-600)] */\n --_connotation-color-primary-increment: var(--vvd-appearanceUI-alert-primary-increment, var(--vvd-color-alert-600));\n /* @cssprop [--vvd-appearanceUI-alert-firm=var(--vvd-color-alert-600)] */\n --_connotation-color-firm: var(--vvd-appearanceUI-alert-firm, var(--vvd-color-alert-600));\n /* @cssprop [--vvd-appearanceUI-alert-fierce=var(--vvd-color-alert-700)] */\n --_connotation-color-fierce: var(--vvd-appearanceUI-alert-fierce, var(--vvd-color-alert-700));\n /* @cssprop [--vvd-appearanceUI-alert-contrast=var(--vvd-color-alert-800)] */\n --_connotation-color-contrast: var(--vvd-appearanceUI-alert-contrast, var(--vvd-color-alert-800));\n /* @cssprop [--vvd-appearanceUI-alert-backdrop=var(--vvd-color-alert-50)] */\n --_connotation-color-backdrop: var(--vvd-appearanceUI-alert-backdrop, var(--vvd-color-alert-50));\n /* @cssprop [--vvd-appearanceUI-alert-intermediate=var(--vvd-color-alert-500)] */\n --_connotation-color-intermediate: var(--vvd-appearanceUI-alert-intermediate, var(--vvd-color-alert-500));\n}\n.base.connotation-warning {\n /* @cssprop [--vvd-appearanceUI-warning-faint=var(--vvd-color-warning-50)] */\n --_connotation-color-faint: var(--vvd-appearanceUI-warning-faint, var(--vvd-color-warning-50));\n /* @cssprop [--vvd-appearanceUI-warning-soft=var(--vvd-color-warning-100)] */\n --_connotation-color-soft: var(--vvd-appearanceUI-warning-soft, var(--vvd-color-warning-100));\n /* @cssprop [--vvd-appearanceUI-warning-dim=var(--vvd-color-warning-200)] */\n --_connotation-color-dim: var(--vvd-appearanceUI-warning-dim, var(--vvd-color-warning-200));\n /* @cssprop [--vvd-appearanceUI-warning-pale=var(--vvd-color-warning-300)] */\n --_connotation-color-pale: var(--vvd-appearanceUI-warning-pale, var(--vvd-color-warning-300));\n /* @cssprop [--vvd-appearanceUI-warning-light=var(--vvd-color-warning-400)] */\n --_connotation-color-light: var(--vvd-appearanceUI-warning-light, var(--vvd-color-warning-400));\n /* @cssprop [--vvd-appearanceUI-warning-primary=var(--vvd-color-warning-300)] */\n --_connotation-color-primary: var(--vvd-appearanceUI-warning-primary, var(--vvd-color-warning-300));\n /* @cssprop [--vvd-appearanceUI-warning-primary-text=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary-text: var(--vvd-appearanceUI-warning-primary-text, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-appearanceUI-warning-primary-increment=var(--vvd-color-warning-600)] */\n --_connotation-color-primary-increment: var(--vvd-appearanceUI-warning-primary-increment, var(--vvd-color-warning-600));\n /* @cssprop [--vvd-appearanceUI-warning-firm=var(--vvd-color-warning-600)] */\n --_connotation-color-firm: var(--vvd-appearanceUI-warning-firm, var(--vvd-color-warning-600));\n /* @cssprop [--vvd-appearanceUI-warning-fierce=var(--vvd-color-warning-700)] */\n --_connotation-color-fierce: var(--vvd-appearanceUI-warning-fierce, var(--vvd-color-warning-700));\n /* @cssprop [--vvd-appearanceUI-warning-contrast=var(--vvd-color-warning-800)] */\n --_connotation-color-contrast: var(--vvd-appearanceUI-warning-contrast, var(--vvd-color-warning-800));\n /* @cssprop [--vvd-appearanceUI-warning-backdrop=var(--vvd-color-warning-50)] */\n --_connotation-color-backdrop: var(--vvd-appearanceUI-warning-backdrop, var(--vvd-color-warning-50));\n /* @cssprop [--vvd-appearanceUI-warning-intermediate=var(--vvd-color-warning-300)] */\n --_connotation-color-intermediate: var(--vvd-appearanceUI-warning-intermediate, var(--vvd-color-warning-300));\n}\n.base.connotation-information {\n /* @cssprop [--vvd-appearanceUI-information-faint=var(--vvd-color-information-50)] */\n --_connotation-color-faint: var(--vvd-appearanceUI-information-faint, var(--vvd-color-information-50));\n /* @cssprop [--vvd-appearanceUI-information-soft=var(--vvd-color-information-100)] */\n --_connotation-color-soft: var(--vvd-appearanceUI-information-soft, var(--vvd-color-information-100));\n /* @cssprop [--vvd-appearanceUI-information-dim=var(--vvd-color-information-200)] */\n --_connotation-color-dim: var(--vvd-appearanceUI-information-dim, var(--vvd-color-information-200));\n /* @cssprop [--vvd-appearanceUI-information-pale=var(--vvd-color-information-300)] */\n --_connotation-color-pale: var(--vvd-appearanceUI-information-pale, var(--vvd-color-information-300));\n /* @cssprop [--vvd-appearanceUI-information-light=var(--vvd-color-information-400)] */\n --_connotation-color-light: var(--vvd-appearanceUI-information-light, var(--vvd-color-information-400));\n /* @cssprop [--vvd-appearanceUI-information-primary=var(--vvd-color-information-500)] */\n --_connotation-color-primary: var(--vvd-appearanceUI-information-primary, var(--vvd-color-information-500));\n /* @cssprop [--vvd-appearanceUI-information-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-appearanceUI-information-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-appearanceUI-information-primary-increment=var(--vvd-color-information-600)] */\n --_connotation-color-primary-increment: var(--vvd-appearanceUI-information-primary-increment, var(--vvd-color-information-600));\n /* @cssprop [--vvd-appearanceUI-information-firm=var(--vvd-color-information-600)] */\n --_connotation-color-firm: var(--vvd-appearanceUI-information-firm, var(--vvd-color-information-600));\n /* @cssprop [--vvd-appearanceUI-information-fierce=var(--vvd-color-information-700)] */\n --_connotation-color-fierce: var(--vvd-appearanceUI-information-fierce, var(--vvd-color-information-700));\n /* @cssprop [--vvd-appearanceUI-information-contrast=var(--vvd-color-information-800)] */\n --_connotation-color-contrast: var(--vvd-appearanceUI-information-contrast, var(--vvd-color-information-800));\n /* @cssprop [--vvd-appearanceUI-information-backdrop=var(--vvd-color-information-50)] */\n --_connotation-color-backdrop: var(--vvd-appearanceUI-information-backdrop, var(--vvd-color-information-50));\n /* @cssprop [--vvd-appearanceUI-information-intermediate=var(--vvd-color-information-500)] */\n --_connotation-color-intermediate: var(--vvd-appearanceUI-information-intermediate, var(--vvd-color-information-500));\n}\n.base.connotation-announcement {\n /* @cssprop [--vvd-appearanceUI-announcement-faint=var(--vvd-color-announcement-50)] */\n --_connotation-color-faint: var(--vvd-appearanceUI-announcement-faint, var(--vvd-color-announcement-50));\n /* @cssprop [--vvd-appearanceUI-announcement-soft=var(--vvd-color-announcement-100)] */\n --_connotation-color-soft: var(--vvd-appearanceUI-announcement-soft, var(--vvd-color-announcement-100));\n /* @cssprop [--vvd-appearanceUI-announcement-dim=var(--vvd-color-announcement-200)] */\n --_connotation-color-dim: var(--vvd-appearanceUI-announcement-dim, var(--vvd-color-announcement-200));\n /* @cssprop [--vvd-appearanceUI-announcement-pale=var(--vvd-color-announcement-300)] */\n --_connotation-color-pale: var(--vvd-appearanceUI-announcement-pale, var(--vvd-color-announcement-300));\n /* @cssprop [--vvd-appearanceUI-announcement-light=var(--vvd-color-announcement-400)] */\n --_connotation-color-light: var(--vvd-appearanceUI-announcement-light, var(--vvd-color-announcement-400));\n /* @cssprop [--vvd-appearanceUI-announcement-primary=var(--vvd-color-announcement-500)] */\n --_connotation-color-primary: var(--vvd-appearanceUI-announcement-primary, var(--vvd-color-announcement-500));\n /* @cssprop [--vvd-appearanceUI-announcement-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-appearanceUI-announcement-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-appearanceUI-announcement-primary-increment=var(--vvd-color-announcement-600)] */\n --_connotation-color-primary-increment: var(--vvd-appearanceUI-announcement-primary-increment, var(--vvd-color-announcement-600));\n /* @cssprop [--vvd-appearanceUI-announcement-firm=var(--vvd-color-announcement-600)] */\n --_connotation-color-firm: var(--vvd-appearanceUI-announcement-firm, var(--vvd-color-announcement-600));\n /* @cssprop [--vvd-appearanceUI-announcement-fierce=var(--vvd-color-announcement-700)] */\n --_connotation-color-fierce: var(--vvd-appearanceUI-announcement-fierce, var(--vvd-color-announcement-700));\n /* @cssprop [--vvd-appearanceUI-announcement-contrast=var(--vvd-color-announcement-800)] */\n --_connotation-color-contrast: var(--vvd-appearanceUI-announcement-contrast, var(--vvd-color-announcement-800));\n /* @cssprop [--vvd-appearanceUI-announcement-backdrop=var(--vvd-color-announcement-50)] */\n --_connotation-color-backdrop: var(--vvd-appearanceUI-announcement-backdrop, var(--vvd-color-announcement-50));\n /* @cssprop [--vvd-appearanceUI-announcement-intermediate=var(--vvd-color-announcement-500)] */\n --_connotation-color-intermediate: var(--vvd-appearanceUI-announcement-intermediate, var(--vvd-color-announcement-500));\n}\n.base:not(.connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-information, .connotation-announcement) {\n /* @cssprop [--vvd-appearanceUI-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-appearanceUI-accent-faint, var(--vvd-color-neutral-50));\n /* @cssprop [--vvd-appearanceUI-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-appearanceUI-accent-soft, var(--vvd-color-neutral-100));\n /* @cssprop [--vvd-appearanceUI-accent-dim=var(--vvd-color-neutral-200)] */\n --_connotation-color-dim: var(--vvd-appearanceUI-accent-dim, var(--vvd-color-neutral-200));\n /* @cssprop [--vvd-appearanceUI-accent-pale=var(--vvd-color-neutral-300)] */\n --_connotation-color-pale: var(--vvd-appearanceUI-accent-pale, var(--vvd-color-neutral-300));\n /* @cssprop [--vvd-appearanceUI-accent-light=var(--vvd-color-neutral-400)] */\n --_connotation-color-light: var(--vvd-appearanceUI-accent-light, var(--vvd-color-neutral-400));\n /* @cssprop [--vvd-appearanceUI-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-appearanceUI-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-appearanceUI-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-appearanceUI-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-appearanceUI-accent-primary-increment=var(--vvd-color-neutral-800)] */\n --_connotation-color-primary-increment: var(--vvd-appearanceUI-accent-primary-increment, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-appearanceUI-accent-firm=var(--vvd-color-canvas-text)] */\n --_connotation-color-firm: var(--vvd-appearanceUI-accent-firm, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-appearanceUI-accent-fierce=var(--vvd-color-neutral-700)] */\n --_connotation-color-fierce: var(--vvd-appearanceUI-accent-fierce, var(--vvd-color-neutral-700));\n /* @cssprop [--vvd-appearanceUI-accent-contrast=var(--vvd-color-neutral-800)] */\n --_connotation-color-contrast: var(--vvd-appearanceUI-accent-contrast, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-appearanceUI-accent-backdrop=var(--vvd-color-canvas)] */\n --_connotation-color-backdrop: var(--vvd-appearanceUI-accent-backdrop, var(--vvd-color-canvas));\n /* @cssprop [--vvd-appearanceUI-accent-intermediate=var(--vvd-color-neutral-500)] */\n --_connotation-color-intermediate: var(--vvd-appearanceUI-accent-intermediate, var(--vvd-color-neutral-500));\n}\n.base {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transparent;\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base.appearance-outlined {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base.appearance-duotone {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base.appearance-subtle {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transparent;\n}\n.base.appearance-fieldset {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-listitem {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary-increment);\n --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-duotone {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-subtle {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-fieldset {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-listitem {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-fierce);\n --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-outlined {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-duotone {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-subtle {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: var(--_connotation-color-dim);\n --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-fieldset {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-listitem {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-outlined {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: notset;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-duotone {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-subtle {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: var(--_connotation-color-pale);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-fieldset {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-listitem {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-dim);\n --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-outlined {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: notset;\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-duotone {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-subtle {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: var(--_connotation-color-pale);\n --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-fieldset {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-listitem {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-dim);\n --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: notset;\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary-increment);\n --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: notset;\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-duotone {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-subtle {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: var(--_connotation-color-pale);\n --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-fieldset {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary-increment);\n --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-listitem {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-pale);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: notset;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary-increment);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: notset;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-duotone {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-subtle {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: var(--_connotation-color-pale);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-fieldset {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary-increment);\n --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-listitem {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-pale);\n --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled).appearance-outlined {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-duotone {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: var(--vvd-color-neutral-100);\n}\n.base:where(:disabled, .disabled).appearance-subtle {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled).appearance-fieldset {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-listitem {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-outlined {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: notset;\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-duotone {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: notset;\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-subtle {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: notset;\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-fieldset {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-listitem {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-neutral-800);\n --_appearance-color-fill: var(--vvd-color-neutral-500);\n --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-600);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-outlined {\n --_appearance-color-text: var(--vvd-color-neutral-600);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-duotone {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: notset;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-subtle {\n --_appearance-color-text: notset;\n --_appearance-color-fill: notset;\n --_appearance-color-outline: notset;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-fieldset {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-listitem {\n --_appearance-color-text: var(--vvd-color-neutral-600);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}";
5
5
 
6
6
  var __defProp = Object.defineProperty;
7
7
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;