@vonage/vivid 3.45.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 (65) hide show
  1. package/appearance-ui/index.js +1 -1
  2. package/custom-elements.json +11 -1
  3. package/fab/index.js +0 -1
  4. package/lib/text-area/text-area.d.ts +2 -2
  5. package/listbox/index.js +1 -1
  6. package/package.json +1 -1
  7. package/shared/definition.js +1 -1
  8. package/shared/definition11.js +1 -1
  9. package/shared/definition12.js +1 -1
  10. package/shared/definition13.js +1 -1
  11. package/shared/definition14.js +1 -1
  12. package/shared/definition15.js +1 -1
  13. package/shared/definition16.js +1 -1
  14. package/shared/definition17.js +18 -7
  15. package/shared/definition2.js +1 -1
  16. package/shared/definition20.js +2 -2
  17. package/shared/definition21.js +1 -1
  18. package/shared/definition22.js +1 -1
  19. package/shared/definition23.js +1 -4
  20. package/shared/definition24.js +1 -1
  21. package/shared/definition25.js +1 -1
  22. package/shared/definition28.js +1 -1
  23. package/shared/definition29.js +1 -1
  24. package/shared/definition3.js +1 -1
  25. package/shared/definition30.js +1 -1
  26. package/shared/definition31.js +1 -1
  27. package/shared/definition33.js +1 -1
  28. package/shared/definition34.js +1 -1
  29. package/shared/definition35.js +1 -1
  30. package/shared/definition36.js +1 -1
  31. package/shared/definition37.js +1 -1
  32. package/shared/definition38.js +1 -1
  33. package/shared/definition39.js +1 -1
  34. package/shared/definition4.js +1 -1
  35. package/shared/definition40.js +1 -1
  36. package/shared/definition41.js +1 -1
  37. package/shared/definition42.js +1 -1
  38. package/shared/definition43.js +1 -1
  39. package/shared/definition44.js +1 -1
  40. package/shared/definition45.js +11 -4
  41. package/shared/definition46.js +1 -1
  42. package/shared/definition48.js +1 -1
  43. package/shared/definition49.js +1 -1
  44. package/shared/definition5.js +1 -1
  45. package/shared/definition51.js +1 -1
  46. package/shared/definition52.js +1 -1
  47. package/shared/definition54.js +1 -1
  48. package/shared/definition55.js +1 -1
  49. package/shared/definition56.js +1 -1
  50. package/shared/definition58.js +1 -1
  51. package/shared/definition6.js +1 -1
  52. package/shared/definition60.js +1 -1
  53. package/shared/definition7.js +1 -1
  54. package/shared/definition8.js +1 -1
  55. package/shared/definition9.js +1 -1
  56. package/shared/index2.js +1 -1
  57. package/shared/presentationDate.js +1 -1
  58. package/shared/text-field.js +1 -1
  59. package/style.css +96 -101
  60. package/styles/core/all.css +1 -1
  61. package/styles/core/theme.css +1 -1
  62. package/styles/core/typography.css +1 -1
  63. package/styles/tokens/theme-dark.css +4 -4
  64. package/styles/tokens/theme-light.css +4 -4
  65. package/styles/tokens/vivid-2-compat.css +1 -1
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 Mon, 08 Jan 2024 16:06:07 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;
package/custom-elements.json CHANGED
@@ -11125,6 +11125,16 @@
11125
11125
  "privacy": "public"
11126
11126
  }
11127
11127
  ],
11128
+ "events": [
11129
+ {
11130
+ "description": "Event emitted when the action button is clicked",
11131
+ "name": "action-click"
11132
+ },
11133
+ {
11134
+ "description": "Event emitted when the indicator button is clicked",
11135
+ "name": "indicator-click"
11136
+ }
11137
+ ],
11128
11138
  "attributes": [
11129
11139
  {
11130
11140
  "name": "connotation",
@@ -12626,7 +12636,7 @@
12626
12636
  }
12627
12637
  ],
12628
12638
  "superclass": {
12629
- "name": "FoundationElement",
12639
+ "name": "FoundationTextArea",
12630
12640
  "package": "@microsoft/fast-foundation"
12631
12641
  }
12632
12642
  }
package/fab/index.js CHANGED
@@ -16,6 +16,5 @@ import '../shared/key-codes.js';
16
16
  import '../shared/aria-global.js';
17
17
  import '../shared/start-end.js';
18
18
  import '../shared/ref.js';
19
- import '../shared/focus2.js';
20
19
 
21
20
  registerFab();
package/lib/text-area/text-area.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- import { TextArea as FoundationElement } from '@microsoft/fast-foundation';
1
+ import { TextArea as FoundationTextArea } from '@microsoft/fast-foundation';
2
2
  import { type ErrorText, type FormElement, FormElementCharCount, FormElementHelperText, FormElementSuccessText } from '../../shared/patterns';
3
3
  export type TextAreaWrap = 'hard' | 'soft' | 'off';
4
- export declare class TextArea extends FoundationElement {
4
+ export declare class TextArea extends FoundationTextArea {
5
5
  #private;
6
6
  wrap?: TextAreaWrap;
7
7
  connectedCallback(): void;
package/listbox/index.js CHANGED
@@ -62,7 +62,7 @@ const ListboxTemplate = (context) => {
62
62
  `;
63
63
  };
64
64
 
65
- const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n display: inline-block;\n inline-size: fit-content;\n}\n\n:host(:focus-within) {\n outline: none;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n}\n\n.base {\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n padding: 4px;\n background-color: var(--_appearance-color-fill);\n border-radius: var(--_listbox-border-radius);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n contain: paint;\n gap: 4px;\n inline-size: 100%;\n}\n.base {\n /* @cssprop [--vvd-listbox-accent-backdrop=var(--vvd-color-canvas)] */\n --_connotation-color-backdrop: var(--vvd-listbox-accent-backdrop, var(--vvd-color-canvas));\n /* @cssprop [--vvd-listbox-accent-intermediate=var(--vvd-color-neutral-500)] */\n --_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));\n /* @cssprop [--vvd-listbox-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-listbox-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100));\n}\n.base {\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-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\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: var(--vvd-color-neutral-300);\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:not(.orientation-horizontal) {\n flex-direction: column;\n}\n\n.focus-indicator {\n pointer-events: none;\n}\n:host(:not(:focus-within)) .focus-indicator {\n display: none;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n --_listbox-border-radius: 6px;\n}\n\n.base.shape-pill {\n --_listbox-border-radius: 24px;\n}\n\n::slotted([role=option]) {\n border-radius: var(--_listbox-border-radius);\n contain: content;\n}\n\n.base.disabled ::slotted([role=option]) {\n --_option-appearance-color-text: var(--_appearance-color-outline);\n pointer-events: none;\n}";
65
+ const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n:host {\n display: inline-block;\n inline-size: fit-content;\n}\n\n:host(:focus-within) {\n outline: none;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n}\n\n.base {\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n padding: 4px;\n background-color: var(--_appearance-color-fill);\n border-radius: var(--_listbox-border-radius);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n contain: paint;\n gap: 4px;\n inline-size: 100%;\n}\n.base {\n /* @cssprop [--vvd-listbox-accent-backdrop=var(--vvd-color-canvas)] */\n --_connotation-color-backdrop: var(--vvd-listbox-accent-backdrop, var(--vvd-color-canvas));\n /* @cssprop [--vvd-listbox-accent-intermediate=var(--vvd-color-neutral-500)] */\n --_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));\n /* @cssprop [--vvd-listbox-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-listbox-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100));\n}\n.base {\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-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\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: var(--vvd-color-neutral-300);\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:not(.orientation-horizontal) {\n flex-direction: column;\n}\n\n.focus-indicator {\n pointer-events: none;\n}\n:host(:not(:focus-within)) .focus-indicator {\n display: none;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n --_listbox-border-radius: 8px;\n}\n\n.base.shape-pill {\n --_listbox-border-radius: 24px;\n}\n\n::slotted([role=option]) {\n border-radius: var(--_listbox-border-radius);\n contain: content;\n}\n\n.base.disabled ::slotted([role=option]) {\n --_option-appearance-color-text: var(--_appearance-color-outline);\n pointer-events: none;\n}";
66
66
 
67
67
  const listboxDefinition = Listbox.compose({
68
68
  baseName: "listbox",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vonage/vivid",
3
- "version": "3.45.0",
3
+ "version": "3.46.0",
4
4
  "type": "module",
5
5
  "module": "./index.js",
6
6
  "main": "./index.js",
package/shared/definition.js CHANGED
@@ -76,7 +76,7 @@ __decorate([
76
76
  ], AccordionItem$1.prototype, "id", void 0);
77
77
  applyMixins(AccordionItem$1, StartEnd);
78
78
 
79
- const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n display: flex;\n box-sizing: border-box;\n flex-direction: column;\n}\n\n.heading-container {\n margin: 0;\n}\n\n.heading-button {\n position: relative;\n display: flex;\n width: 100%;\n align-items: center;\n padding: 16px;\n border: none;\n background-color: var(--_appearance-color-fill);\n color: var(--_appearance-color-text);\n cursor: pointer;\n text-align: left;\n}\n.heading-button {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.heading-button:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.heading-button:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transparent;\n}\n.heading-button {\n /* @cssprop [--vvd-accordion-item-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-accordion-item-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-accordion-item-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));\n /* @cssprop [--vvd-accordion-item-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports selector(:focus-visible) {\n .heading-button:focus-visible {\n outline: none;\n }\n}\n.heading-button.size-condensed {\n font: var(--vvd-typography-base-bold);\n gap: 12px;\n}\n.heading-button:not(.size-condensed) {\n font: var(--vvd-typography-heading-4);\n gap: 16px;\n}\n\n.heading-content {\n flex: auto;\n}\n\n.meta {\n overflow: hidden;\n max-width: 20%;\n flex-shrink: 0;\n color: var(--vvd-color-neutral-600);\n text-align: end;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.heading-button:not(.size-condensed) .meta {\n font: var(--vvd-typography-base-bold);\n}\n.heading-button.size-condensed .meta {\n font: var(--vvd-typography-base-condensed-bold);\n}\n\n.region {\n display: none;\n padding: 8px 32px 24px 16px;\n}\n.region:not(.size-condensed).padded {\n padding-inline-start: 52px;\n}\n:host([expanded]) .region {\n display: block;\n}\n.region.size-condensed.padded {\n padding-inline-start: 44px;\n}\n\nslot[name=icon] {\n color: var(--vvd-color-neutral-600);\n}\n.heading-button:not(.size-condensed) slot[name=icon] {\n font: inherit;\n}\n.heading-button.size-condensed slot[name=icon] {\n font: var(--vvd-typography-base-extended);\n}\n:host(:not([icon-trailing])) slot[name=icon]:last-of-type {\n color: var(--_appearance-color-text);\n}\n\n.focus-indicator {\n --focus-stroke-gap-color: transparent;\n}\nbutton:not(:focus-visible) > .focus-indicator {\n display: none;\n}";
79
+ const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n:host {\n display: flex;\n box-sizing: border-box;\n flex-direction: column;\n}\n\n.heading-container {\n margin: 0;\n}\n\n.heading-button {\n position: relative;\n display: flex;\n width: 100%;\n align-items: center;\n padding: 16px;\n border: none;\n background-color: var(--_appearance-color-fill);\n color: var(--_appearance-color-text);\n cursor: pointer;\n text-align: left;\n}\n.heading-button {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.heading-button:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.heading-button:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transparent;\n}\n.heading-button {\n /* @cssprop [--vvd-accordion-item-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-accordion-item-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-accordion-item-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));\n /* @cssprop [--vvd-accordion-item-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports selector(:focus-visible) {\n .heading-button:focus-visible {\n outline: none;\n }\n}\n.heading-button.size-condensed {\n font: var(--vvd-typography-base-bold);\n gap: 12px;\n}\n.heading-button:not(.size-condensed) {\n font: var(--vvd-typography-heading-4);\n gap: 16px;\n}\n\n.heading-content {\n flex: auto;\n}\n\n.meta {\n overflow: hidden;\n max-width: 20%;\n flex-shrink: 0;\n color: var(--vvd-color-neutral-600);\n text-align: end;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.heading-button:not(.size-condensed) .meta {\n font: var(--vvd-typography-base-bold);\n}\n.heading-button.size-condensed .meta {\n font: var(--vvd-typography-base-condensed-bold);\n}\n\n.region {\n display: none;\n padding: 8px 32px 24px 16px;\n}\n.region:not(.size-condensed).padded {\n padding-inline-start: 52px;\n}\n:host([expanded]) .region {\n display: block;\n}\n.region.size-condensed.padded {\n padding-inline-start: 44px;\n}\n\nslot[name=icon] {\n color: var(--vvd-color-neutral-600);\n}\n.heading-button:not(.size-condensed) slot[name=icon] {\n font: inherit;\n}\n.heading-button.size-condensed slot[name=icon] {\n font: var(--vvd-typography-base-extended);\n}\n:host(:not([icon-trailing])) slot[name=icon]:last-of-type {\n color: var(--_appearance-color-text);\n}\n\n.focus-indicator {\n --focus-stroke-gap-color: transparent;\n}\nbutton:not(:focus-visible) > .focus-indicator {\n display: none;\n}";
80
80
 
81
81
  var __defProp = Object.defineProperty;
82
82
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
package/shared/definition11.js CHANGED
@@ -62,7 +62,7 @@ __decorateClass([
62
62
  ], Button.prototype, "label", 2);
63
63
  applyMixins(Button, AffixIconWithTrailing);
64
64
 
65
- const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n display: inline-block;\n}\n\n.control {\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n border: 0 none;\n margin: 0;\n background-color: var(--_appearance-color-fill);\n block-size: var(--_button-block-size);\n border-radius: var(--_button-border-radius);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n gap: var(--_button-icon-gap);\n vertical-align: middle;\n /* Size */\n /* Shape */\n /* stylelint-disable */\n /* disabling because of order issues */\n /* stylelint-enable */\n}\n.control.connotation-cta {\n /* @cssprop [--vvd-button-cta-primary=var(--vvd-color-cta-500)] */\n --_connotation-color-primary: var(--vvd-button-cta-primary, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-button-cta-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-button-cta-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-button-cta-primary-increment=var(--vvd-color-cta-600)] */\n --_connotation-color-primary-increment: var(--vvd-button-cta-primary-increment, var(--vvd-color-cta-600));\n /* @cssprop [--vvd-button-cta-contrast=var(--vvd-color-cta-800)] */\n --_connotation-color-contrast: var(--vvd-button-cta-contrast, var(--vvd-color-cta-800));\n /* @cssprop [--vvd-button-cta-fierce=var(--vvd-color-cta-700)] */\n --_connotation-color-fierce: var(--vvd-button-cta-fierce, var(--vvd-color-cta-700));\n /* @cssprop [--vvd-button-cta-firm=var(--vvd-color-cta-600)] */\n --_connotation-color-firm: var(--vvd-button-cta-firm, var(--vvd-color-cta-600));\n /* @cssprop [--vvd-button-cta-soft=var(--vvd-color-cta-100)] */\n --_connotation-color-soft: var(--vvd-button-cta-soft, var(--vvd-color-cta-100));\n /* @cssprop [--vvd-button-cta-faint=var(--vvd-color-cta-50)] */\n --_connotation-color-faint: var(--vvd-button-cta-faint, var(--vvd-color-cta-50));\n}\n.control.connotation-success {\n /* @cssprop [--vvd-button-success-primary=var(--vvd-color-success-500)] */\n --_connotation-color-primary: var(--vvd-button-success-primary, var(--vvd-color-success-500));\n /* @cssprop [--vvd-button-success-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-button-success-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-button-success-primary-increment=var(--vvd-color-success-600)] */\n --_connotation-color-primary-increment: var(--vvd-button-success-primary-increment, var(--vvd-color-success-600));\n /* @cssprop [--vvd-button-success-contrast=var(--vvd-color-success-800)] */\n --_connotation-color-contrast: var(--vvd-button-success-contrast, var(--vvd-color-success-800));\n /* @cssprop [--vvd-button-success-fierce=var(--vvd-color-success-700)] */\n --_connotation-color-fierce: var(--vvd-button-success-fierce, var(--vvd-color-success-700));\n /* @cssprop [--vvd-button-success-firm=var(--vvd-color-success-600)] */\n --_connotation-color-firm: var(--vvd-button-success-firm, var(--vvd-color-success-600));\n /* @cssprop [--vvd-button-success-soft=var(--vvd-color-success-100)] */\n --_connotation-color-soft: var(--vvd-button-success-soft, var(--vvd-color-success-100));\n /* @cssprop [--vvd-button-success-faint=var(--vvd-color-success-50)] */\n --_connotation-color-faint: var(--vvd-button-success-faint, var(--vvd-color-success-50));\n}\n.control.connotation-alert {\n /* @cssprop [--vvd-button-alert-primary=var(--vvd-color-alert-500)] */\n --_connotation-color-primary: var(--vvd-button-alert-primary, var(--vvd-color-alert-500));\n /* @cssprop [--vvd-button-alert-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-button-alert-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-button-alert-primary-increment=var(--vvd-color-alert-600)] */\n --_connotation-color-primary-increment: var(--vvd-button-alert-primary-increment, var(--vvd-color-alert-600));\n /* @cssprop [--vvd-button-alert-contrast=var(--vvd-color-alert-800)] */\n --_connotation-color-contrast: var(--vvd-button-alert-contrast, var(--vvd-color-alert-800));\n /* @cssprop [--vvd-button-alert-fierce=var(--vvd-color-alert-700)] */\n --_connotation-color-fierce: var(--vvd-button-alert-fierce, var(--vvd-color-alert-700));\n /* @cssprop [--vvd-button-alert-firm=var(--vvd-color-alert-600)] */\n --_connotation-color-firm: var(--vvd-button-alert-firm, var(--vvd-color-alert-600));\n /* @cssprop [--vvd-button-alert-soft=var(--vvd-color-alert-100)] */\n --_connotation-color-soft: var(--vvd-button-alert-soft, var(--vvd-color-alert-100));\n /* @cssprop [--vvd-button-alert-faint=var(--vvd-color-alert-50)] */\n --_connotation-color-faint: var(--vvd-button-alert-faint, var(--vvd-color-alert-50));\n}\n.control:not(.connotation-cta, .connotation-success, .connotation-alert) {\n /* @cssprop [--vvd-button-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-button-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-button-accent-primary-increment=var(--vvd-color-neutral-800)] */\n --_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-button-accent-contrast=var(--vvd-color-neutral-800)] */\n --_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-button-accent-fierce=var(--vvd-color-neutral-700)] */\n --_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));\n /* @cssprop [--vvd-button-accent-firm=var(--vvd-color-canvas-text)] */\n --_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-button-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));\n /* @cssprop [--vvd-button-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));\n}\n.control.appearance-filled {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transparent;\n}\n.control.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.control {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-filled {\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.control: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.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled).appearance-filled {\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.control: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.control:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-filled {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-fierce);\n --_appearance-color-outline: transparent;\n}\n.control: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.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transparent;\n}\n.control .text {\n /* stylelint-disable value-no-vendor-prefix */\n display: -webkit-box;\n /* stylelint-enable value-no-vendor-prefix */\n overflow: hidden;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--button-line-clamp, 1);\n max-inline-size: 100%;\n}\n.control:not(.icon-only) {\n inline-size: 100%;\n}\n@supports selector(:focus-visible) {\n .control:focus-visible {\n outline: none;\n }\n}\n@supports (user-select: none) {\n .control {\n user-select: none;\n }\n}\n.control:not(:disabled) {\n cursor: pointer;\n}\n.control:disabled {\n cursor: not-allowed;\n}\n.control.icon-only {\n contain: size;\n padding-inline: 0;\n place-content: center;\n}\n@supports (aspect-ratio: 1) {\n .control.icon-only {\n aspect-ratio: 1;\n }\n}\n@supports not (aspect-ratio: 1) {\n .control.icon-only {\n inline-size: var(--_button-block-size);\n }\n}\n.control:not(.stacked).size-super-condensed {\n --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n font: var(--vvd-typography-base-condensed-bold);\n}\n.control:not(.stacked).size-super-condensed:not(.icon-only) {\n --_button-icon-gap: 4px;\n padding-inline: 8px;\n}\n.control:not(.stacked).size-condensed {\n --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n font: var(--vvd-typography-base-condensed-bold);\n}\n.control:not(.stacked).size-condensed:not(.icon-only) {\n --_button-icon-gap: 8px;\n padding-inline: 12px;\n}\n.control:not(.stacked).size-expanded {\n --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n font: var(--vvd-typography-base-extended-bold);\n}\n.control:not(.stacked).size-expanded:not(.icon-only) {\n --_button-icon-gap: 10px;\n padding-inline: 20px;\n}\n.control:not(.stacked):not(.size-condensed, .size-expanded, .size-super-condensed) {\n --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n font: var(--vvd-typography-base-bold);\n}\n.control:not(.stacked):not(.size-condensed, .size-expanded, .size-super-condensed):not(.icon-only) {\n --_button-icon-gap: 8px;\n padding-inline: 16px;\n}\n.control:not(.shape-pill) {\n --_button-border-radius: 6px;\n}\n.control:not(.shape-pill).size-condensed:not(.stacked), .control:not(.shape-pill).size-super-condensed:not(.stacked) {\n --_button-border-radius: 4px;\n}\n.control.shape-pill:not(.icon-only, .stacked) {\n --_button-border-radius: 24px;\n}\n.control.shape-pill.stacked {\n --_button-border-radius: 24px;\n}\n.control.shape-pill.icon-only {\n --_button-border-radius: 50%;\n}\n.control.stacked {\n flex-direction: column;\n justify-content: center;\n}\n.control.stacked.size-super-condensed {\n --stacked-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n --_button-block-size: calc(var(--stacked-size) + 20px);\n font: var(--vvd-typography-base-condensed-bold);\n}\n.control.stacked.size-super-condensed:not(.icon-only) {\n --_button-icon-gap: 4px;\n padding-inline: 8px;\n}\n.control.stacked.size-condensed {\n --stacked-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n --_button-block-size: calc(var(--stacked-size) + 24px);\n font: var(--vvd-typography-base-condensed-bold);\n}\n.control.stacked.size-condensed:not(.icon-only) {\n --_button-icon-gap: 6px;\n padding-inline: 12px;\n}\n.control.stacked.size-expanded {\n --stacked-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n --_button-block-size: calc(var(--stacked-size) + 32px);\n font: var(--vvd-typography-base-extended-bold);\n}\n.control.stacked.size-expanded:not(.icon-only) {\n --_button-icon-gap: 10px;\n padding-inline: 20px;\n}\n.control.stacked:not(.size-condensed, .size-expanded, .size-super-condensed) {\n --stacked-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n --_button-block-size: calc(var(--stacked-size) + 28px);\n font: var(--vvd-typography-base-bold);\n}\n.control.stacked:not(.size-condensed, .size-expanded, .size-super-condensed):not(.icon-only) {\n --_button-icon-gap: 8px;\n padding-inline: 16px;\n}\n\n/* Icon */\nslot[name=icon] {\n line-height: 1;\n}\n.icon-trailing slot[name=icon] {\n display: flex;\n order: 1;\n}\n.control.stacked > slot[name=icon] {\n font-size: calc(var(--stacked-size) / 2);\n}\n.control:not(.stacked) > slot[name=icon] {\n font-size: calc(var(--_button-block-size) / 2);\n}\n\n.focus-indicator {\n --focus-stroke-gap-color: transparent;\n}\n.appearance-filled .focus-indicator {\n --focus-stroke-gap-color: unset;\n}\n.control:not(:focus-visible) > .focus-indicator {\n display: none;\n}\n\n:host(:not([icon])) .pending {\n position: absolute;\n}\n:host(:not([icon])) .pending + .text {\n visibility: hidden;\n}";
65
+ const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n:host {\n display: inline-block;\n}\n\n.control {\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n border: 0 none;\n margin: 0;\n background-color: var(--_appearance-color-fill);\n block-size: var(--_button-block-size);\n border-radius: var(--_button-border-radius);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n gap: var(--_button-icon-gap);\n vertical-align: middle;\n /* Size */\n /* Shape */\n /* stylelint-disable */\n /* disabling because of order issues */\n /* stylelint-enable */\n}\n.control.connotation-cta {\n /* @cssprop [--vvd-button-cta-primary=var(--vvd-color-cta-500)] */\n --_connotation-color-primary: var(--vvd-button-cta-primary, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-button-cta-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-button-cta-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-button-cta-primary-increment=var(--vvd-color-cta-600)] */\n --_connotation-color-primary-increment: var(--vvd-button-cta-primary-increment, var(--vvd-color-cta-600));\n /* @cssprop [--vvd-button-cta-contrast=var(--vvd-color-cta-800)] */\n --_connotation-color-contrast: var(--vvd-button-cta-contrast, var(--vvd-color-cta-800));\n /* @cssprop [--vvd-button-cta-fierce=var(--vvd-color-cta-700)] */\n --_connotation-color-fierce: var(--vvd-button-cta-fierce, var(--vvd-color-cta-700));\n /* @cssprop [--vvd-button-cta-firm=var(--vvd-color-cta-600)] */\n --_connotation-color-firm: var(--vvd-button-cta-firm, var(--vvd-color-cta-600));\n /* @cssprop [--vvd-button-cta-soft=var(--vvd-color-cta-100)] */\n --_connotation-color-soft: var(--vvd-button-cta-soft, var(--vvd-color-cta-100));\n /* @cssprop [--vvd-button-cta-faint=var(--vvd-color-cta-50)] */\n --_connotation-color-faint: var(--vvd-button-cta-faint, var(--vvd-color-cta-50));\n}\n.control.connotation-success {\n /* @cssprop [--vvd-button-success-primary=var(--vvd-color-success-500)] */\n --_connotation-color-primary: var(--vvd-button-success-primary, var(--vvd-color-success-500));\n /* @cssprop [--vvd-button-success-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-button-success-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-button-success-primary-increment=var(--vvd-color-success-600)] */\n --_connotation-color-primary-increment: var(--vvd-button-success-primary-increment, var(--vvd-color-success-600));\n /* @cssprop [--vvd-button-success-contrast=var(--vvd-color-success-800)] */\n --_connotation-color-contrast: var(--vvd-button-success-contrast, var(--vvd-color-success-800));\n /* @cssprop [--vvd-button-success-fierce=var(--vvd-color-success-700)] */\n --_connotation-color-fierce: var(--vvd-button-success-fierce, var(--vvd-color-success-700));\n /* @cssprop [--vvd-button-success-firm=var(--vvd-color-success-600)] */\n --_connotation-color-firm: var(--vvd-button-success-firm, var(--vvd-color-success-600));\n /* @cssprop [--vvd-button-success-soft=var(--vvd-color-success-100)] */\n --_connotation-color-soft: var(--vvd-button-success-soft, var(--vvd-color-success-100));\n /* @cssprop [--vvd-button-success-faint=var(--vvd-color-success-50)] */\n --_connotation-color-faint: var(--vvd-button-success-faint, var(--vvd-color-success-50));\n}\n.control.connotation-alert {\n /* @cssprop [--vvd-button-alert-primary=var(--vvd-color-alert-500)] */\n --_connotation-color-primary: var(--vvd-button-alert-primary, var(--vvd-color-alert-500));\n /* @cssprop [--vvd-button-alert-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-button-alert-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-button-alert-primary-increment=var(--vvd-color-alert-600)] */\n --_connotation-color-primary-increment: var(--vvd-button-alert-primary-increment, var(--vvd-color-alert-600));\n /* @cssprop [--vvd-button-alert-contrast=var(--vvd-color-alert-800)] */\n --_connotation-color-contrast: var(--vvd-button-alert-contrast, var(--vvd-color-alert-800));\n /* @cssprop [--vvd-button-alert-fierce=var(--vvd-color-alert-700)] */\n --_connotation-color-fierce: var(--vvd-button-alert-fierce, var(--vvd-color-alert-700));\n /* @cssprop [--vvd-button-alert-firm=var(--vvd-color-alert-600)] */\n --_connotation-color-firm: var(--vvd-button-alert-firm, var(--vvd-color-alert-600));\n /* @cssprop [--vvd-button-alert-soft=var(--vvd-color-alert-100)] */\n --_connotation-color-soft: var(--vvd-button-alert-soft, var(--vvd-color-alert-100));\n /* @cssprop [--vvd-button-alert-faint=var(--vvd-color-alert-50)] */\n --_connotation-color-faint: var(--vvd-button-alert-faint, var(--vvd-color-alert-50));\n}\n.control:not(.connotation-cta, .connotation-success, .connotation-alert) {\n /* @cssprop [--vvd-button-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-button-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-button-accent-primary-increment=var(--vvd-color-neutral-800)] */\n --_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-button-accent-contrast=var(--vvd-color-neutral-800)] */\n --_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-button-accent-fierce=var(--vvd-color-neutral-700)] */\n --_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));\n /* @cssprop [--vvd-button-accent-firm=var(--vvd-color-canvas-text)] */\n --_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-button-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));\n /* @cssprop [--vvd-button-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));\n}\n.control.appearance-filled {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transparent;\n}\n.control.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.control {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-filled {\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.control: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.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled).appearance-filled {\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.control: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.control:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-filled {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-fierce);\n --_appearance-color-outline: transparent;\n}\n.control: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.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transparent;\n}\n.control .text {\n /* stylelint-disable value-no-vendor-prefix */\n display: -webkit-box;\n /* stylelint-enable value-no-vendor-prefix */\n overflow: hidden;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--button-line-clamp, 1);\n max-inline-size: 100%;\n}\n.control:not(.icon-only) {\n inline-size: 100%;\n}\n@supports selector(:focus-visible) {\n .control:focus-visible {\n outline: none;\n }\n}\n@supports (user-select: none) {\n .control {\n user-select: none;\n }\n}\n.control:not(:disabled) {\n cursor: pointer;\n}\n.control:disabled {\n cursor: not-allowed;\n}\n.control.icon-only {\n contain: size;\n padding-inline: 0;\n place-content: center;\n}\n@supports (aspect-ratio: 1) {\n .control.icon-only {\n aspect-ratio: 1;\n }\n}\n@supports not (aspect-ratio: 1) {\n .control.icon-only {\n inline-size: var(--_button-block-size);\n }\n}\n.control:not(.stacked).size-super-condensed {\n --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n font: var(--vvd-typography-base-condensed-bold);\n}\n.control:not(.stacked).size-super-condensed:not(.icon-only) {\n --_button-icon-gap: 4px;\n padding-inline: 8px;\n}\n.control:not(.stacked).size-condensed {\n --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n font: var(--vvd-typography-base-condensed-bold);\n}\n.control:not(.stacked).size-condensed:not(.icon-only) {\n --_button-icon-gap: 8px;\n padding-inline: 12px;\n}\n.control:not(.stacked).size-expanded {\n --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n font: var(--vvd-typography-base-extended-bold);\n}\n.control:not(.stacked).size-expanded:not(.icon-only) {\n --_button-icon-gap: 10px;\n padding-inline: 20px;\n}\n.control:not(.stacked):not(.size-condensed, .size-expanded, .size-super-condensed) {\n --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n font: var(--vvd-typography-base-bold);\n}\n.control:not(.stacked):not(.size-condensed, .size-expanded, .size-super-condensed):not(.icon-only) {\n --_button-icon-gap: 8px;\n padding-inline: 16px;\n}\n.control:not(.shape-pill) {\n --_button-border-radius: 8px;\n}\n.control:not(.shape-pill).size-condensed:not(.stacked), .control:not(.shape-pill).size-super-condensed:not(.stacked) {\n --_button-border-radius: 4px;\n}\n.control.shape-pill:not(.icon-only, .stacked) {\n --_button-border-radius: 24px;\n}\n.control.shape-pill.stacked {\n --_button-border-radius: 24px;\n}\n.control.shape-pill.icon-only {\n --_button-border-radius: 50%;\n}\n.control.stacked {\n flex-direction: column;\n justify-content: center;\n}\n.control.stacked.size-super-condensed {\n --stacked-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n --_button-block-size: calc(var(--stacked-size) + 20px);\n font: var(--vvd-typography-base-condensed-bold);\n}\n.control.stacked.size-super-condensed:not(.icon-only) {\n --_button-icon-gap: 4px;\n padding-inline: 8px;\n}\n.control.stacked.size-condensed {\n --stacked-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n --_button-block-size: calc(var(--stacked-size) + 24px);\n font: var(--vvd-typography-base-condensed-bold);\n}\n.control.stacked.size-condensed:not(.icon-only) {\n --_button-icon-gap: 6px;\n padding-inline: 12px;\n}\n.control.stacked.size-expanded {\n --stacked-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n --_button-block-size: calc(var(--stacked-size) + 32px);\n font: var(--vvd-typography-base-extended-bold);\n}\n.control.stacked.size-expanded:not(.icon-only) {\n --_button-icon-gap: 10px;\n padding-inline: 20px;\n}\n.control.stacked:not(.size-condensed, .size-expanded, .size-super-condensed) {\n --stacked-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n --_button-block-size: calc(var(--stacked-size) + 28px);\n font: var(--vvd-typography-base-bold);\n}\n.control.stacked:not(.size-condensed, .size-expanded, .size-super-condensed):not(.icon-only) {\n --_button-icon-gap: 8px;\n padding-inline: 16px;\n}\n\n/* Icon */\nslot[name=icon] {\n line-height: 1;\n}\n.icon-trailing slot[name=icon] {\n display: flex;\n order: 1;\n}\n.control.stacked > slot[name=icon] {\n font-size: calc(var(--stacked-size) / 2);\n}\n.control:not(.stacked) > slot[name=icon] {\n font-size: calc(var(--_button-block-size) / 2);\n}\n\n.focus-indicator {\n --focus-stroke-gap-color: transparent;\n}\n.appearance-filled .focus-indicator {\n --focus-stroke-gap-color: unset;\n}\n.control:not(:focus-visible) > .focus-indicator {\n display: none;\n}\n\n:host(:not([icon])) .pending {\n position: absolute;\n}\n:host(:not([icon])) .pending + .text {\n visibility: hidden;\n}";
66
66
 
67
67
  const getAppearanceClassName = (appearance, disabled) => {
68
68
  let className = `appearance-${appearance}`;
package/shared/definition12.js CHANGED
@@ -3,7 +3,7 @@ import { C as CalendarEvent } from './calendar-event.js';
3
3
  import { w as when } from './when.js';
4
4
  import { c as classNames } from './class-names.js';
5
5
 
6
- const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n display: contents;\n}\n\n.base {\n /* 4 as the indentation limit */\n /* per cell divider */\n /* per cell divider */\n --vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);\n position: absolute;\n z-index: var(--vvd-calendar-event--overlap-count);\n top: calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));\n overflow: hidden;\n box-sizing: border-box;\n padding: 4px 8px;\n background-color: var(--_appearance-color-fill);\n block-size: calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);\n border-radius: 6px;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n inline-size: calc(100% - 8px - min(var(--vvd-calendar-event--indent), 32px));\n margin-block-start: 2px;\n margin-inline-end: 8px;\n margin-inline-start: min(var(--vvd-calendar-event--indent), 32px);\n max-block-size: calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px);\n}\n.base.connotation-accent {\n /* @cssprop [--vvd-calendar-event-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-calendar-event-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-calendar-event-accent-contrast=var(--vvd-color-neutral-800)] */\n --_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-calendar-event-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100));\n}\n.base.connotation-cta {\n /* @cssprop [--vvd-calendar-event-cta-primary=var(--vvd-color-cta-500)] */\n --_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-calendar-event-cta-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-calendar-event-cta-contrast=var(--vvd-color-cta-800)] */\n --_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));\n /* @cssprop [--vvd-calendar-event-cta-soft=var(--vvd-color-cta-100)] */\n --_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100));\n}\n.base.connotation-success {\n /* @cssprop [--vvd-calendar-event-success-primary=var(--vvd-color-success-500)] */\n --_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));\n /* @cssprop [--vvd-calendar-event-success-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-calendar-event-success-contrast=var(--vvd-color-success-800)] */\n --_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));\n /* @cssprop [--vvd-calendar-event-success-soft=var(--vvd-color-success-100)] */\n --_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100));\n}\n.base.connotation-alert {\n /* @cssprop [--vvd-calendar-event-alert-primary=var(--vvd-color-alert-500)] */\n --_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));\n /* @cssprop [--vvd-calendar-event-alert-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-calendar-event-alert-contrast=var(--vvd-color-alert-800)] */\n --_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));\n /* @cssprop [--vvd-calendar-event-alert-soft=var(--vvd-color-alert-100)] */\n --_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100));\n}\n.base.connotation-warning {\n /* @cssprop [--vvd-calendar-event-warning-primary=var(--vvd-color-warning-300)] */\n --_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));\n /* @cssprop [--vvd-calendar-event-warning-primary-text=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-calendar-event-warning-contrast=var(--vvd-color-warning-800)] */\n --_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));\n /* @cssprop [--vvd-calendar-event-warning-soft=var(--vvd-color-warning-100)] */\n --_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100));\n}\n.base.connotation-announcement {\n /* @cssprop [--vvd-calendar-event-announcement-primary=var(--vvd-color-announcement-500)] */\n --_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));\n /* @cssprop [--vvd-calendar-event-announcement-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-calendar-event-announcement-contrast=var(--vvd-color-announcement-800)] */\n --_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));\n /* @cssprop [--vvd-calendar-event-announcement-soft=var(--vvd-color-announcement-100)] */\n --_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100));\n}\n.base:not(.connotation-accent, .connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-announcement) {\n /* @cssprop [--vvd-calendar-event-information-primary=var(--vvd-color-information-500)] */\n --_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));\n /* @cssprop [--vvd-calendar-event-information-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-calendar-event-information-contrast=var(--vvd-color-information-800)] */\n --_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));\n /* @cssprop [--vvd-calendar-event-information-soft=var(--vvd-color-information-100)] */\n --_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100));\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-subtle {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transparent;\n}\n@supports (contain: content) {\n .base {\n contain: strict;\n }\n}\n@supports not (contain: content) {\n .base {\n overflow: hidden;\n }\n}\n.base:focus {\n z-index: 2000;\n filter: var(--vvd-shadow-surface-8dp);\n outline: none;\n}\n\nh2 {\n margin: 0;\n font: var(--vvd-typography-base-condensed-bold);\n}\nh2 > strong {\n font: inherit;\n}\n\np {\n margin: 0;\n font: var(--vvd-typography-base-condensed);\n}";
6
+ const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n:host {\n display: contents;\n}\n\n.base {\n /* 4 as the indentation limit */\n /* per cell divider */\n /* per cell divider */\n --vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);\n position: absolute;\n z-index: var(--vvd-calendar-event--overlap-count);\n top: calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));\n overflow: hidden;\n box-sizing: border-box;\n padding: 4px 8px;\n background-color: var(--_appearance-color-fill);\n block-size: calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);\n border-radius: 8px;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n inline-size: calc(100% - 8px - min(var(--vvd-calendar-event--indent), 32px));\n margin-block-start: 2px;\n margin-inline-end: 8px;\n margin-inline-start: min(var(--vvd-calendar-event--indent), 32px);\n max-block-size: calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px);\n}\n.base.connotation-accent {\n /* @cssprop [--vvd-calendar-event-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-calendar-event-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-calendar-event-accent-contrast=var(--vvd-color-neutral-800)] */\n --_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-calendar-event-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100));\n}\n.base.connotation-cta {\n /* @cssprop [--vvd-calendar-event-cta-primary=var(--vvd-color-cta-500)] */\n --_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-calendar-event-cta-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-calendar-event-cta-contrast=var(--vvd-color-cta-800)] */\n --_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));\n /* @cssprop [--vvd-calendar-event-cta-soft=var(--vvd-color-cta-100)] */\n --_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100));\n}\n.base.connotation-success {\n /* @cssprop [--vvd-calendar-event-success-primary=var(--vvd-color-success-500)] */\n --_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));\n /* @cssprop [--vvd-calendar-event-success-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-calendar-event-success-contrast=var(--vvd-color-success-800)] */\n --_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));\n /* @cssprop [--vvd-calendar-event-success-soft=var(--vvd-color-success-100)] */\n --_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100));\n}\n.base.connotation-alert {\n /* @cssprop [--vvd-calendar-event-alert-primary=var(--vvd-color-alert-500)] */\n --_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));\n /* @cssprop [--vvd-calendar-event-alert-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-calendar-event-alert-contrast=var(--vvd-color-alert-800)] */\n --_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));\n /* @cssprop [--vvd-calendar-event-alert-soft=var(--vvd-color-alert-100)] */\n --_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100));\n}\n.base.connotation-warning {\n /* @cssprop [--vvd-calendar-event-warning-primary=var(--vvd-color-warning-300)] */\n --_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));\n /* @cssprop [--vvd-calendar-event-warning-primary-text=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-calendar-event-warning-contrast=var(--vvd-color-warning-800)] */\n --_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));\n /* @cssprop [--vvd-calendar-event-warning-soft=var(--vvd-color-warning-100)] */\n --_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100));\n}\n.base.connotation-announcement {\n /* @cssprop [--vvd-calendar-event-announcement-primary=var(--vvd-color-announcement-500)] */\n --_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));\n /* @cssprop [--vvd-calendar-event-announcement-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-calendar-event-announcement-contrast=var(--vvd-color-announcement-800)] */\n --_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));\n /* @cssprop [--vvd-calendar-event-announcement-soft=var(--vvd-color-announcement-100)] */\n --_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100));\n}\n.base:not(.connotation-accent, .connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-announcement) {\n /* @cssprop [--vvd-calendar-event-information-primary=var(--vvd-color-information-500)] */\n --_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));\n /* @cssprop [--vvd-calendar-event-information-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-calendar-event-information-contrast=var(--vvd-color-information-800)] */\n --_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));\n /* @cssprop [--vvd-calendar-event-information-soft=var(--vvd-color-information-100)] */\n --_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100));\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-subtle {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transparent;\n}\n@supports (contain: content) {\n .base {\n contain: strict;\n }\n}\n@supports not (contain: content) {\n .base {\n overflow: hidden;\n }\n}\n.base:focus {\n z-index: 2000;\n filter: var(--vvd-shadow-surface-8dp);\n outline: none;\n}\n\nh2 {\n margin: 0;\n font: var(--vvd-typography-base-condensed-bold);\n}\nh2 > strong {\n font: inherit;\n}\n\np {\n margin: 0;\n font: var(--vvd-typography-base-condensed);\n}";
7
7
 
8
8
  const getClasses = ({
9
9
  connotation,
package/shared/definition13.js CHANGED
@@ -505,7 +505,7 @@ _curry1(function isEmpty(x) {
505
505
 
506
506
  const isEmpty$1 = isEmpty;
507
507
 
508
- const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\nol {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n\n[role=grid i] {\n position: relative;\n z-index: 0;\n display: grid;\n margin: auto;\n grid-template-areas: \". column-headers\" \"row-headers calendar\";\n grid-template-columns: min-content auto;\n inline-size: max(100%, 500px);\n min-inline-size: 880px;\n}\n\n.row-headers {\n display: grid;\n grid-area: row-headers;\n grid-template-rows: repeat(24, 1fr);\n margin-inline-end: 2px;\n}\n.row-headers > [role=rowheader i] {\n display: flex;\n align-items: flex-end;\n justify-content: flex-end;\n}\n.row-headers > [role=rowheader i] > time {\n font: var(--vvd-typography-base-condensed);\n font-size: small;\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n.calendar-row {\n display: contents;\n}\n\n.calendar-grid-presentation {\n display: grid;\n overflow: hidden;\n background: var(--vvd-color-surface-2dp);\n border-radius: 6px;\n counter-reset: listing;\n filter: var(--vvd-shadow-surface-2dp);\n gap: 1px;\n grid-area: calendar;\n grid-auto-flow: column;\n grid-template: repeat(24, 1fr)/repeat(7, 1fr);\n}\n\n.hours {\n display: contents;\n}\n.hours > [role=listitem i] {\n position: relative;\n grid-column: 1/8;\n grid-row: var(--row);\n min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n pointer-events: none;\n}\n.hours > [role=listitem i]:not(:first-child)::after {\n position: absolute;\n border-block-end: var(--vvd-color-neutral-100) 1px solid;\n content: \"\";\n inline-size: 100%;\n margin-block-start: -1px;\n}\n.hours > [role=listitem i]:nth-child(24n+1) {\n --row: 1;\n}\n.hours > [role=listitem i]:nth-child(24n+2) {\n --row: 2;\n}\n.hours > [role=listitem i]:nth-child(24n+3) {\n --row: 3;\n}\n.hours > [role=listitem i]:nth-child(24n+4) {\n --row: 4;\n}\n.hours > [role=listitem i]:nth-child(24n+5) {\n --row: 5;\n}\n.hours > [role=listitem i]:nth-child(24n+6) {\n --row: 6;\n}\n.hours > [role=listitem i]:nth-child(24n+7) {\n --row: 7;\n}\n.hours > [role=listitem i]:nth-child(24n+8) {\n --row: 8;\n}\n.hours > [role=listitem i]:nth-child(24n+9) {\n --row: 9;\n}\n.hours > [role=listitem i]:nth-child(24n+10) {\n --row: 10;\n}\n.hours > [role=listitem i]:nth-child(24n+11) {\n --row: 11;\n}\n.hours > [role=listitem i]:nth-child(24n+12) {\n --row: 12;\n}\n.hours > [role=listitem i]:nth-child(24n+13) {\n --row: 13;\n}\n.hours > [role=listitem i]:nth-child(24n+14) {\n --row: 14;\n}\n.hours > [role=listitem i]:nth-child(24n+15) {\n --row: 15;\n}\n.hours > [role=listitem i]:nth-child(24n+16) {\n --row: 16;\n}\n.hours > [role=listitem i]:nth-child(24n+17) {\n --row: 17;\n}\n.hours > [role=listitem i]:nth-child(24n+18) {\n --row: 18;\n}\n.hours > [role=listitem i]:nth-child(24n+19) {\n --row: 19;\n}\n.hours > [role=listitem i]:nth-child(24n+20) {\n --row: 20;\n}\n.hours > [role=listitem i]:nth-child(24n+21) {\n --row: 21;\n}\n.hours > [role=listitem i]:nth-child(24n+22) {\n --row: 22;\n}\n.hours > [role=listitem i]:nth-child(24n+23) {\n --row: 23;\n}\n.hours > [role=listitem i]:nth-child(24n+24) {\n --row: 24;\n}\n\n[role=gridcell i] {\n display: grid;\n gap: 1px;\n grid-auto-flow: column;\n}\n\n[role=gridcell i],\n[role=columnheader i],\n[role=columnheader i] [role=button i] {\n position: relative;\n}\n[role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n position: absolute;\n z-index: -1;\n background-color: var(--vvd-color-information-400);\n content: \"\";\n}\n@supports (inset: 0) {\n [role=gridcell i]::before,\n [role=columnheader i]::before,\n [role=columnheader i] [role=button i]::before {\n inset: 0;\n }\n}\n@supports not (inset: 0) {\n [role=gridcell i]::before,\n [role=columnheader i]::before,\n [role=columnheader i] [role=button i]::before {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n }\n}\n[role=gridcell i]:focus,\n[role=columnheader i]:focus,\n[role=columnheader i] [role=button i]:focus {\n outline: none;\n}\n[role=gridcell i]:not(:focus-visible)::before,\n[role=columnheader i]:not(:focus-visible)::before,\n[role=columnheader i] [role=button i]:not(:focus-visible)::before {\n display: none;\n}\n\n.columns {\n display: contents;\n}\n.columns > [role=gridcell i] {\n position: relative;\n grid-column: var(--column);\n grid-row: 1/25;\n}\n.columns > [role=gridcell i]:nth-child(1) {\n --column: 1;\n}\n.columns > [role=gridcell i]:nth-child(2) {\n --column: 2;\n}\n.columns > [role=gridcell i]:nth-child(3) {\n --column: 3;\n}\n.columns > [role=gridcell i]:nth-child(4) {\n --column: 4;\n}\n.columns > [role=gridcell i]:nth-child(5) {\n --column: 5;\n}\n.columns > [role=gridcell i]:nth-child(6) {\n --column: 6;\n}\n.columns > [role=gridcell i]:nth-child(7) {\n --column: 7;\n}\n.columns > [role=gridcell i]:not(:first-child)::after {\n position: absolute;\n block-size: 100%;\n border-inline-end: var(--vvd-color-neutral-100) 1px solid;\n content: \"\";\n margin-inline-start: -1px;\n}\n\n.column-headers {\n display: grid;\n grid-area: column-headers;\n grid-template-columns: repeat(7, 1fr);\n}\n.column-headers [role=columnheader i] h2 {\n display: grid;\n align-items: baseline;\n margin: 0;\n font: var(--vvd-typography-heading-4);\n grid-template-columns: 1fr auto 1fr;\n}\n.column-headers [role=columnheader i] h2 > em {\n font: inherit;\n inline-size: min-content;\n}\n@supports (inset: 0) {\n .column-headers [role=columnheader i] h2 > em {\n inset-inline-start: 0;\n }\n}\n@supports not (inset: 0) {\n .column-headers [role=columnheader i] h2 > em {\n left: 0;\n }\n}\n.column-headers [role=columnheader i] h2 > small {\n font: var(--vvd-typography-base-condensed);\n text-transform: uppercase;\n}";
508
+ const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\nol {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n\n[role=grid i] {\n position: relative;\n z-index: 0;\n display: grid;\n margin: auto;\n grid-template-areas: \". column-headers\" \"row-headers calendar\";\n grid-template-columns: min-content auto;\n inline-size: max(100%, 500px);\n min-inline-size: 880px;\n}\n\n.row-headers {\n display: grid;\n grid-area: row-headers;\n grid-template-rows: repeat(24, 1fr);\n margin-inline-end: 2px;\n}\n.row-headers > [role=rowheader i] {\n display: flex;\n align-items: flex-end;\n justify-content: flex-end;\n}\n.row-headers > [role=rowheader i] > time {\n font: var(--vvd-typography-base-condensed);\n font-size: small;\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n.calendar-row {\n display: contents;\n}\n\n.calendar-grid-presentation {\n display: grid;\n overflow: hidden;\n background: var(--vvd-color-surface-2dp);\n border-radius: 8px;\n counter-reset: listing;\n filter: var(--vvd-shadow-surface-2dp);\n gap: 1px;\n grid-area: calendar;\n grid-auto-flow: column;\n grid-template: repeat(24, 1fr)/repeat(7, 1fr);\n}\n\n.hours {\n display: contents;\n}\n.hours > [role=listitem i] {\n position: relative;\n grid-column: 1/8;\n grid-row: var(--row);\n min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n pointer-events: none;\n}\n.hours > [role=listitem i]:not(:first-child)::after {\n position: absolute;\n border-block-end: var(--vvd-color-neutral-100) 1px solid;\n content: \"\";\n inline-size: 100%;\n margin-block-start: -1px;\n}\n.hours > [role=listitem i]:nth-child(24n+1) {\n --row: 1;\n}\n.hours > [role=listitem i]:nth-child(24n+2) {\n --row: 2;\n}\n.hours > [role=listitem i]:nth-child(24n+3) {\n --row: 3;\n}\n.hours > [role=listitem i]:nth-child(24n+4) {\n --row: 4;\n}\n.hours > [role=listitem i]:nth-child(24n+5) {\n --row: 5;\n}\n.hours > [role=listitem i]:nth-child(24n+6) {\n --row: 6;\n}\n.hours > [role=listitem i]:nth-child(24n+7) {\n --row: 7;\n}\n.hours > [role=listitem i]:nth-child(24n+8) {\n --row: 8;\n}\n.hours > [role=listitem i]:nth-child(24n+9) {\n --row: 9;\n}\n.hours > [role=listitem i]:nth-child(24n+10) {\n --row: 10;\n}\n.hours > [role=listitem i]:nth-child(24n+11) {\n --row: 11;\n}\n.hours > [role=listitem i]:nth-child(24n+12) {\n --row: 12;\n}\n.hours > [role=listitem i]:nth-child(24n+13) {\n --row: 13;\n}\n.hours > [role=listitem i]:nth-child(24n+14) {\n --row: 14;\n}\n.hours > [role=listitem i]:nth-child(24n+15) {\n --row: 15;\n}\n.hours > [role=listitem i]:nth-child(24n+16) {\n --row: 16;\n}\n.hours > [role=listitem i]:nth-child(24n+17) {\n --row: 17;\n}\n.hours > [role=listitem i]:nth-child(24n+18) {\n --row: 18;\n}\n.hours > [role=listitem i]:nth-child(24n+19) {\n --row: 19;\n}\n.hours > [role=listitem i]:nth-child(24n+20) {\n --row: 20;\n}\n.hours > [role=listitem i]:nth-child(24n+21) {\n --row: 21;\n}\n.hours > [role=listitem i]:nth-child(24n+22) {\n --row: 22;\n}\n.hours > [role=listitem i]:nth-child(24n+23) {\n --row: 23;\n}\n.hours > [role=listitem i]:nth-child(24n+24) {\n --row: 24;\n}\n\n[role=gridcell i] {\n display: grid;\n gap: 1px;\n grid-auto-flow: column;\n}\n\n[role=gridcell i],\n[role=columnheader i],\n[role=columnheader i] [role=button i] {\n position: relative;\n}\n[role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n position: absolute;\n z-index: -1;\n background-color: var(--vvd-color-information-400);\n content: \"\";\n}\n@supports (inset: 0) {\n [role=gridcell i]::before,\n [role=columnheader i]::before,\n [role=columnheader i] [role=button i]::before {\n inset: 0;\n }\n}\n@supports not (inset: 0) {\n [role=gridcell i]::before,\n [role=columnheader i]::before,\n [role=columnheader i] [role=button i]::before {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n }\n}\n[role=gridcell i]:focus,\n[role=columnheader i]:focus,\n[role=columnheader i] [role=button i]:focus {\n outline: none;\n}\n[role=gridcell i]:not(:focus-visible)::before,\n[role=columnheader i]:not(:focus-visible)::before,\n[role=columnheader i] [role=button i]:not(:focus-visible)::before {\n display: none;\n}\n\n.columns {\n display: contents;\n}\n.columns > [role=gridcell i] {\n position: relative;\n grid-column: var(--column);\n grid-row: 1/25;\n}\n.columns > [role=gridcell i]:nth-child(1) {\n --column: 1;\n}\n.columns > [role=gridcell i]:nth-child(2) {\n --column: 2;\n}\n.columns > [role=gridcell i]:nth-child(3) {\n --column: 3;\n}\n.columns > [role=gridcell i]:nth-child(4) {\n --column: 4;\n}\n.columns > [role=gridcell i]:nth-child(5) {\n --column: 5;\n}\n.columns > [role=gridcell i]:nth-child(6) {\n --column: 6;\n}\n.columns > [role=gridcell i]:nth-child(7) {\n --column: 7;\n}\n.columns > [role=gridcell i]:not(:first-child)::after {\n position: absolute;\n block-size: 100%;\n border-inline-end: var(--vvd-color-neutral-100) 1px solid;\n content: \"\";\n margin-inline-start: -1px;\n}\n\n.column-headers {\n display: grid;\n grid-area: column-headers;\n grid-template-columns: repeat(7, 1fr);\n}\n.column-headers [role=columnheader i] h2 {\n display: grid;\n align-items: baseline;\n margin: 0;\n font: var(--vvd-typography-heading-4);\n grid-template-columns: 1fr auto 1fr;\n}\n.column-headers [role=columnheader i] h2 > em {\n font: inherit;\n inline-size: min-content;\n}\n@supports (inset: 0) {\n .column-headers [role=columnheader i] h2 > em {\n inset-inline-start: 0;\n }\n}\n@supports not (inset: 0) {\n .column-headers [role=columnheader i] h2 > em {\n left: 0;\n }\n}\n.column-headers [role=columnheader i] h2 > small {\n font: var(--vvd-typography-base-condensed);\n text-transform: uppercase;\n}";
509
509
 
510
510
  const ARROW_UP = "ArrowUp";
511
511
  const ARROW_RIGHT = "ArrowRight";
package/shared/definition14.js CHANGED
@@ -7,7 +7,7 @@ import { w as when } from './when.js';
7
7
  import { s as slotted } from './slotted.js';
8
8
  import { c as classNames } from './class-names.js';
9
9
 
10
- const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n display: flex;\n}\n\n.base {\n border-radius: 6px;\n inline-size: 100%;\n text-align: start;\n}\n\n.wrapper {\n display: flex;\n overflow: hidden;\n flex-flow: column;\n block-size: 100%;\n border-radius: inherit;\n color: var(--vvd-color-canvas-text);\n}\n\n.main-content {\n display: flex;\n flex-flow: column;\n padding: 24px;\n}\n\n.header {\n display: flex;\n flex: 1;\n align-items: flex-start;\n gap: 8px;\n}\n.header-content {\n flex: 1;\n}\n.header-wrapper {\n display: flex;\n gap: 8px;\n}\n.header-headline, .header-subtitle {\n /* stylelint-disable value-no-vendor-prefix */\n display: -webkit-box;\n /* stylelint-enable value-no-vendor-prefix */\n overflow: hidden;\n -webkit-box-orient: vertical;\n}\n.header-headline {\n font: var(--vvd-typography-heading-4);\n -webkit-line-clamp: var(--headline-line-clamp);\n}\n.header-subtitle {\n font: var(--vvd-typography-base);\n -webkit-line-clamp: var(--subtitle-line-clamp);\n}\n.hide-header .header {\n display: none;\n}\n\n.header-subtitle,\n.text {\n color: var(--vvd-color-neutral-600);\n font: var(--vvd-typography-base);\n}\n\n.text {\n padding-right: 8px;\n margin-top: 12px;\n}\n\n.footer {\n display: inline-flex;\n flex-direction: column;\n align-items: flex-end;\n padding-bottom: 24px;\n margin-top: auto;\n padding-inline: 24px;\n}\n.hide-footer .footer {\n display: none;\n}\n\n::slotted([slot=graphic i]),\n.icon {\n flex-shrink: 0;\n align-self: baseline;\n margin-block-start: 4px;\n}\n\n.icon {\n font-size: 20px;\n}\n\n::slotted([slot=meta i]) {\n flex-shrink: 0;\n align-self: flex-start;\n margin-block-start: -8px;\n margin-inline-end: -8px;\n margin-inline-start: auto;\n}";
10
+ const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n:host {\n display: flex;\n}\n\n.base {\n border-radius: 8px;\n inline-size: 100%;\n text-align: start;\n}\n\n.wrapper {\n display: flex;\n overflow: hidden;\n flex-flow: column;\n block-size: 100%;\n border-radius: inherit;\n color: var(--vvd-color-canvas-text);\n}\n\n.main-content {\n display: flex;\n flex-flow: column;\n padding: 24px;\n}\n\n.header {\n display: flex;\n flex: 1;\n align-items: flex-start;\n gap: 8px;\n}\n.header-content {\n flex: 1;\n}\n.header-wrapper {\n display: flex;\n gap: 8px;\n}\n.header-headline, .header-subtitle {\n /* stylelint-disable value-no-vendor-prefix */\n display: -webkit-box;\n /* stylelint-enable value-no-vendor-prefix */\n overflow: hidden;\n -webkit-box-orient: vertical;\n}\n.header-headline {\n font: var(--vvd-typography-heading-4);\n -webkit-line-clamp: var(--headline-line-clamp);\n}\n.header-subtitle {\n font: var(--vvd-typography-base);\n -webkit-line-clamp: var(--subtitle-line-clamp);\n}\n.hide-header .header {\n display: none;\n}\n\n.header-subtitle,\n.text {\n color: var(--vvd-color-neutral-600);\n font: var(--vvd-typography-base);\n}\n\n.text {\n padding-right: 8px;\n margin-top: 12px;\n}\n\n.footer {\n display: inline-flex;\n flex-direction: column;\n align-items: flex-end;\n padding-bottom: 24px;\n margin-top: auto;\n padding-inline: 24px;\n}\n.hide-footer .footer {\n display: none;\n}\n\n::slotted([slot=graphic i]),\n.icon {\n flex-shrink: 0;\n align-self: baseline;\n margin-block-start: 4px;\n}\n\n.icon {\n font-size: 20px;\n}\n\n::slotted([slot=meta i]) {\n flex-shrink: 0;\n align-self: flex-start;\n margin-block-start: -8px;\n margin-inline-end: -8px;\n margin-inline-start: auto;\n}";
11
11
 
12
12
  var __defProp = Object.defineProperty;
13
13
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
package/shared/definition15.js CHANGED
@@ -98,7 +98,7 @@ __decorate([
98
98
  observable
99
99
  ], Checkbox$1.prototype, "indeterminate", void 0);
100
100
 
101
- const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n display: inline-flex;\n flex-direction: column;\n vertical-align: middle;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n}\n\n.base {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n vertical-align: middle;\n}\n.base.connotation-cta {\n /* @cssprop [--vvd-checkbox-cta-primary=var(--vvd-color-cta-500)] */\n --_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-checkbox-cta-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-checkbox-cta-primary-increment=var(--vvd-color-cta-600)] */\n --_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));\n /* @cssprop [--vvd-checkbox-cta-intermediate=var(--vvd-color-cta-500)] */\n --_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-checkbox-cta-backdrop=var(--vvd-color-cta-50)] */\n --_connotation-color-backdrop: var(--vvd-checkbox-cta-backdrop, var(--vvd-color-cta-50));\n /* @cssprop [--vvd-checkbox-cta-firm=var(--vvd-color-cta-600)] */\n --_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600));\n}\n.base:not(.connotation-cta) {\n /* @cssprop [--vvd-checkbox-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-checkbox-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-checkbox-accent-primary-increment=var(--vvd-color-neutral-800)] */\n --_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-checkbox-accent-intermediate=var(--vvd-color-neutral-500)] */\n --_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));\n /* @cssprop [--vvd-checkbox-accent-backdrop=var(--vvd-color-canvas)] */\n --_connotation-color-backdrop: var(--vvd-checkbox-accent-backdrop, var(--vvd-color-canvas));\n /* @cssprop [--vvd-checkbox-accent-firm=var(--vvd-color-canvas-text)] */\n --_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text));\n}\n.base {\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:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\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(:checked, .checked):where(:not(:disabled, .disabled)) {\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(: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: var(--_connotation-color-primary);\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: var(--vvd-color-neutral-300);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\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@supports selector(:focus-visible) {\n .base:focus-visible {\n outline: none;\n }\n}\n@supports (user-select: none) {\n .base {\n user-select: none;\n }\n}\n.base:not(.disabled) {\n cursor: pointer;\n}\n.base.disabled {\n pointer-events: none;\n}\n\n.control {\n position: relative;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n background-color: var(--_appearance-color-fill);\n block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n border-radius: 4px;\n box-shadow: inset 0 0 0 2px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n}\n\n.indicator {\n font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) - 4px);\n}\n.base:not(.checked) .indicator.checkmark {\n display: none;\n}\n\n.base.checked .indicator.minus, .base:not(.indeterminate) .indicator.minus {\n display: none;\n}\n\nlabel {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n color: var(--vvd-color-canvas-text);\n column-gap: 4px;\n cursor: pointer;\n font: var(--vvd-typography-base);\n}\n.hide-label label {\n display: none;\n}\n\n.focus-indicator {\n --focus-inset: -3px;\n --focus-stroke-gap-color: transparent;\n border-radius: 6px;\n}\n.base:not(:focus-visible) .focus-indicator {\n display: none;\n}\n\n.icon {\n font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) * 0.6);\n line-height: 1;\n}\n\n.message {\n margin-block-start: 4px;\n --_low-ink-color: var(--vvd-color-neutral-600);\n}";
101
+ const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n:host {\n display: inline-flex;\n flex-direction: column;\n vertical-align: middle;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n}\n\n.base {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n vertical-align: middle;\n}\n.base.connotation-cta {\n /* @cssprop [--vvd-checkbox-cta-primary=var(--vvd-color-cta-500)] */\n --_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-checkbox-cta-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-checkbox-cta-primary-increment=var(--vvd-color-cta-600)] */\n --_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));\n /* @cssprop [--vvd-checkbox-cta-intermediate=var(--vvd-color-cta-500)] */\n --_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-checkbox-cta-backdrop=var(--vvd-color-cta-50)] */\n --_connotation-color-backdrop: var(--vvd-checkbox-cta-backdrop, var(--vvd-color-cta-50));\n /* @cssprop [--vvd-checkbox-cta-firm=var(--vvd-color-cta-600)] */\n --_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600));\n}\n.base:not(.connotation-cta) {\n /* @cssprop [--vvd-checkbox-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-checkbox-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-checkbox-accent-primary-increment=var(--vvd-color-neutral-800)] */\n --_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-checkbox-accent-intermediate=var(--vvd-color-neutral-500)] */\n --_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));\n /* @cssprop [--vvd-checkbox-accent-backdrop=var(--vvd-color-canvas)] */\n --_connotation-color-backdrop: var(--vvd-checkbox-accent-backdrop, var(--vvd-color-canvas));\n /* @cssprop [--vvd-checkbox-accent-firm=var(--vvd-color-canvas-text)] */\n --_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text));\n}\n.base {\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:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\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(:checked, .checked):where(:not(:disabled, .disabled)) {\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(: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: var(--_connotation-color-primary);\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: var(--vvd-color-neutral-300);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\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@supports selector(:focus-visible) {\n .base:focus-visible {\n outline: none;\n }\n}\n@supports (user-select: none) {\n .base {\n user-select: none;\n }\n}\n.base:not(.disabled) {\n cursor: pointer;\n}\n.base.disabled {\n pointer-events: none;\n}\n\n.control {\n position: relative;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n background-color: var(--_appearance-color-fill);\n block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n border-radius: 4px;\n box-shadow: inset 0 0 0 2px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n}\n\n.indicator {\n font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) - 4px);\n}\n.base:not(.checked) .indicator.checkmark {\n display: none;\n}\n\n.base.checked .indicator.minus, .base:not(.indeterminate) .indicator.minus {\n display: none;\n}\n\nlabel {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n color: var(--vvd-color-canvas-text);\n column-gap: 4px;\n cursor: pointer;\n font: var(--vvd-typography-base);\n}\n.hide-label label {\n display: none;\n}\n\n.focus-indicator {\n --focus-inset: -3px;\n --focus-stroke-gap-color: transparent;\n border-radius: 4px;\n}\n.base:not(:focus-visible) .focus-indicator {\n display: none;\n}\n\n.icon {\n font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) * 0.6);\n line-height: 1;\n}\n\n.message {\n margin-block-start: 4px;\n --_low-ink-color: var(--vvd-color-neutral-600);\n}";
102
102
 
103
103
  var __defProp = Object.defineProperty;
104
104
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
package/shared/definition16.js CHANGED
@@ -621,7 +621,7 @@ __decorate([
621
621
  applyMixins(DelegatesARIACombobox, DelegatesARIAListbox);
622
622
  applyMixins(Combobox$1, StartEnd, DelegatesARIACombobox);
623
623
 
624
- const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n position: relative;\n}\n\n.base {\n --_text-field-gutter-end: 44px;\n}\n\n.icon {\n inset-inline-end: 16px;\n inset-inline-start: unset;\n}\n:not(.disabled) .icon {\n cursor: pointer;\n}\n.disabled .icon {\n cursor: not-allowed;\n}\n\n.listbox {\n padding: 4px;\n background-color: var(--_appearance-color-fill);\n border-radius: 6px;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n contain: paint;\n}\n.listbox {\n /* @cssprop [--vvd-combobox-accent-backdrop=var(--vvd-color-canvas)] */\n --_connotation-color-backdrop: var(--vvd-combobox-accent-backdrop, var(--vvd-color-canvas));\n /* @cssprop [--vvd-combobox-accent-intermediate=var(--vvd-color-neutral-500)] */\n --_connotation-color-intermediate: var(--vvd-combobox-accent-intermediate, var(--vvd-color-neutral-500));\n /* @cssprop [--vvd-combobox-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-combobox-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-combobox-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-combobox-accent-soft, var(--vvd-color-neutral-100));\n}\n.listbox {\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.listbox.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.listbox: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: var(--vvd-color-neutral-300);\n}\n.listbox: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\n::part(popup-base) {\n inline-size: 100%;\n}";
624
+ const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n:host {\n position: relative;\n}\n\n.base {\n --_text-field-gutter-end: 44px;\n}\n\n.icon {\n inset-inline-end: 16px;\n inset-inline-start: unset;\n}\n:not(.disabled) .icon {\n cursor: pointer;\n}\n.disabled .icon {\n cursor: not-allowed;\n}\n\n.listbox {\n padding: 4px;\n background-color: var(--_appearance-color-fill);\n border-radius: 8px;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n contain: paint;\n}\n.listbox {\n /* @cssprop [--vvd-combobox-accent-backdrop=var(--vvd-color-canvas)] */\n --_connotation-color-backdrop: var(--vvd-combobox-accent-backdrop, var(--vvd-color-canvas));\n /* @cssprop [--vvd-combobox-accent-intermediate=var(--vvd-color-neutral-500)] */\n --_connotation-color-intermediate: var(--vvd-combobox-accent-intermediate, var(--vvd-color-neutral-500));\n /* @cssprop [--vvd-combobox-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-combobox-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-combobox-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-combobox-accent-soft, var(--vvd-color-neutral-100));\n}\n.listbox {\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.listbox.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.listbox: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: var(--vvd-color-neutral-300);\n}\n.listbox: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\n::part(popup-base) {\n inline-size: 100%;\n}";
625
625
 
626
626
  var __defProp = Object.defineProperty;
627
627
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;