@vonage/vivid 3.59.0 → 4.0.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 (39) hide show
  1. package/appearance-ui/index.cjs +1 -1
  2. package/appearance-ui/index.js +1 -1
  3. package/custom-elements.json +53 -32
  4. package/index.cjs +1 -1
  5. package/index.js +1 -1
  6. package/lib/appearance-ui/appearance-ui.d.ts +1 -1
  7. package/lib/banner/banner.d.ts +1 -1
  8. package/lib/button/button.d.ts +1 -1
  9. package/lib/enums.d.ts +3 -1
  10. package/lib/tab/tab.d.ts +1 -1
  11. package/lib/tabs/tabs.d.ts +2 -2
  12. package/package.json +1 -1
  13. package/shared/definition11.cjs +1 -1
  14. package/shared/definition11.js +1 -1
  15. package/shared/definition17.cjs +1 -1
  16. package/shared/definition17.js +1 -1
  17. package/shared/definition35.cjs +2 -0
  18. package/shared/definition35.js +2 -0
  19. package/shared/definition43.cjs +8 -0
  20. package/shared/definition43.js +8 -0
  21. package/shared/definition5.cjs +28 -30
  22. package/shared/definition5.js +28 -30
  23. package/shared/definition51.cjs +1 -1
  24. package/shared/definition51.js +1 -1
  25. package/shared/definition54.cjs +1 -1
  26. package/shared/definition54.js +1 -1
  27. package/shared/definition57.cjs +1 -1
  28. package/shared/definition57.js +1 -1
  29. package/shared/definition58.cjs +1 -1
  30. package/shared/definition58.js +1 -1
  31. package/shared/enums.cjs +7 -5
  32. package/shared/enums.js +7 -5
  33. package/styles/core/all.css +1 -1
  34. package/styles/core/theme.css +1 -1
  35. package/styles/core/typography.css +1 -1
  36. package/styles/tokens/theme-dark.css +4 -4
  37. package/styles/tokens/theme-light.css +4 -4
  38. package/styles/tokens/vivid-2-compat.css +1 -1
  39. package/vivid.api.json +90 -39
package/appearance-ui/index.cjs CHANGED
@@ -3,7 +3,7 @@
3
3
  const index = require('../shared/index.cjs');
4
4
  const classNames = require('../shared/class-names.cjs');
5
5
 
6
- const styles = ".wrapper{display:grid;column-gap:8px;grid-template-columns:repeat(7,auto)}.base{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:40px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);padding-inline:16px}.base.connotation-cta{--_connotation-color-faint: var(--vvd-appearanceUI-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-appearanceUI-cta-soft, var(--vvd-color-cta-100));--_connotation-color-dim: var(--vvd-appearanceUI-cta-dim, var(--vvd-color-cta-200));--_connotation-color-pale: var(--vvd-appearanceUI-cta-pale, var(--vvd-color-cta-300));--_connotation-color-light: var(--vvd-appearanceUI-cta-light, var(--vvd-color-cta-400));--_connotation-color-primary: var(--vvd-appearanceUI-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-appearanceUI-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-appearanceUI-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-appearanceUI-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-appearanceUI-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-appearanceUI-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-contrast: var(--vvd-appearanceUI-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-cta-intermediate, var(--vvd-color-cta-500))}.base.connotation-success{--_connotation-color-faint: var(--vvd-appearanceUI-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-appearanceUI-success-soft, var(--vvd-color-success-100));--_connotation-color-dim: var(--vvd-appearanceUI-success-dim, var(--vvd-color-success-200));--_connotation-color-pale: var(--vvd-appearanceUI-success-pale, var(--vvd-color-success-300));--_connotation-color-light: var(--vvd-appearanceUI-success-light, var(--vvd-color-success-400));--_connotation-color-primary: var(--vvd-appearanceUI-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-appearanceUI-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-appearanceUI-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-firm: var(--vvd-appearanceUI-success-firm, var(--vvd-color-success-600));--_connotation-color-firm-all: var(--vvd-appearanceUI-success-firm-all, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-appearanceUI-success-fierce, var(--vvd-color-success-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-success-fierce-primary, var(--vvd-color-success-700));--_connotation-color-contrast: var(--vvd-appearanceUI-success-contrast, var(--vvd-color-success-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-success-intermediate, var(--vvd-color-success-500))}.base.connotation-alert{--_connotation-color-faint: var(--vvd-appearanceUI-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-appearanceUI-alert-soft, var(--vvd-color-alert-100));--_connotation-color-dim: var(--vvd-appearanceUI-alert-dim, var(--vvd-color-alert-200));--_connotation-color-pale: var(--vvd-appearanceUI-alert-pale, var(--vvd-color-alert-300));--_connotation-color-light: var(--vvd-appearanceUI-alert-light, var(--vvd-color-alert-400));--_connotation-color-primary: var(--vvd-appearanceUI-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-appearanceUI-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-appearanceUI-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-firm: var(--vvd-appearanceUI-alert-firm, var(--vvd-color-alert-600));--_connotation-color-firm-all: var(--vvd-appearanceUI-alert-firm-all, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-appearanceUI-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-alert-fierce-primary, var(--vvd-color-alert-700));--_connotation-color-contrast: var(--vvd-appearanceUI-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-alert-intermediate, var(--vvd-color-alert-500))}.base.connotation-warning{--_connotation-color-faint: var(--vvd-appearanceUI-warning-faint, var(--vvd-color-warning-50));--_connotation-color-soft: var(--vvd-appearanceUI-warning-soft, var(--vvd-color-warning-100));--_connotation-color-dim: var(--vvd-appearanceUI-warning-dim, var(--vvd-color-warning-200));--_connotation-color-pale: var(--vvd-appearanceUI-warning-pale, var(--vvd-color-warning-300));--_connotation-color-light: var(--vvd-appearanceUI-warning-light, var(--vvd-color-warning-400));--_connotation-color-primary: var(--vvd-appearanceUI-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-appearanceUI-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-primary-increment: var(--vvd-appearanceUI-warning-primary-increment, var(--vvd-color-warning-600));--_connotation-color-firm: var(--vvd-appearanceUI-warning-firm, var(--vvd-color-warning-600));--_connotation-color-firm-all: var(--vvd-appearanceUI-warning-firm-all, var(--vvd-color-warning-600));--_connotation-color-fierce: var(--vvd-appearanceUI-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-warning-fierce-primary, var(--vvd-color-warning-300));--_connotation-color-contrast: var(--vvd-appearanceUI-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-warning-intermediate, var(--vvd-color-warning-300))}.base.connotation-information{--_connotation-color-faint: var(--vvd-appearanceUI-information-faint, var(--vvd-color-information-50));--_connotation-color-soft: var(--vvd-appearanceUI-information-soft, var(--vvd-color-information-100));--_connotation-color-dim: var(--vvd-appearanceUI-information-dim, var(--vvd-color-information-200));--_connotation-color-pale: var(--vvd-appearanceUI-information-pale, var(--vvd-color-information-300));--_connotation-color-light: var(--vvd-appearanceUI-information-light, var(--vvd-color-information-400));--_connotation-color-primary: var(--vvd-appearanceUI-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-appearanceUI-information-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-appearanceUI-information-primary-increment, var(--vvd-color-information-600));--_connotation-color-firm: var(--vvd-appearanceUI-information-firm, var(--vvd-color-information-600));--_connotation-color-firm-all: var(--vvd-appearanceUI-information-firm-all, var(--vvd-color-information-600));--_connotation-color-fierce: var(--vvd-appearanceUI-information-fierce, var(--vvd-color-information-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-information-fierce-primary, var(--vvd-color-information-700));--_connotation-color-contrast: var(--vvd-appearanceUI-information-contrast, var(--vvd-color-information-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-information-intermediate, var(--vvd-color-information-500))}.base.connotation-announcement{--_connotation-color-faint: var(--vvd-appearanceUI-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-soft: var(--vvd-appearanceUI-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-dim: var(--vvd-appearanceUI-announcement-dim, var(--vvd-color-announcement-200));--_connotation-color-pale: var(--vvd-appearanceUI-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-light: var(--vvd-appearanceUI-announcement-light, var(--vvd-color-announcement-400));--_connotation-color-primary: var(--vvd-appearanceUI-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-appearanceUI-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-appearanceUI-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-firm: var(--vvd-appearanceUI-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-firm-all: var(--vvd-appearanceUI-announcement-firm-all, var(--vvd-color-announcement-600));--_connotation-color-fierce: var(--vvd-appearanceUI-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-announcement-fierce-primary, var(--vvd-color-announcement-700));--_connotation-color-contrast: var(--vvd-appearanceUI-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-announcement-intermediate, var(--vvd-color-announcement-500))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-faint: var(--vvd-appearanceUI-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-appearanceUI-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-appearanceUI-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-appearanceUI-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-light: var(--vvd-appearanceUI-accent-light, var(--vvd-color-neutral-400));--_connotation-color-primary: var(--vvd-appearanceUI-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-appearanceUI-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-appearanceUI-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-appearanceUI-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-appearanceUI-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-fierce: var(--vvd-appearanceUI-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-appearanceUI-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-accent-intermediate, var(--vvd-color-neutral-500))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-ghost,.base.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-fieldset{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-fieldset{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-fieldset{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-fieldset{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:where(.disabled,:disabled).appearance-subtle{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-fieldset{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-listitem{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.selected):where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.base:where(.selected):where(.disabled,:disabled).appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.base:where(.selected):where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(.disabled,:disabled).appearance-duotone{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(.disabled,:disabled).appearance-subtle{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(.disabled,:disabled).appearance-fieldset{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.selected):where(.disabled,:disabled).appearance-listitem{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-neutral-800);--_appearance-color-fill: var(--vvd-color-neutral-500);--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-listitem{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}";
6
+ const styles = ".wrapper{display:grid;column-gap:8px;grid-template-columns:repeat(7,auto)}.base{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:40px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);padding-inline:16px}.base.connotation-cta{--_connotation-color-faint: var(--vvd-appearanceUI-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-appearanceUI-cta-soft, var(--vvd-color-cta-100));--_connotation-color-dim: var(--vvd-appearanceUI-cta-dim, var(--vvd-color-cta-200));--_connotation-color-pale: var(--vvd-appearanceUI-cta-pale, var(--vvd-color-cta-300));--_connotation-color-light: var(--vvd-appearanceUI-cta-light, var(--vvd-color-cta-400));--_connotation-color-primary: var(--vvd-appearanceUI-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-appearanceUI-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-appearanceUI-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-appearanceUI-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-appearanceUI-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-appearanceUI-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-contrast: var(--vvd-appearanceUI-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-cta-intermediate, var(--vvd-color-cta-500))}.base.connotation-success{--_connotation-color-faint: var(--vvd-appearanceUI-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-appearanceUI-success-soft, var(--vvd-color-success-100));--_connotation-color-dim: var(--vvd-appearanceUI-success-dim, var(--vvd-color-success-200));--_connotation-color-pale: var(--vvd-appearanceUI-success-pale, var(--vvd-color-success-300));--_connotation-color-light: var(--vvd-appearanceUI-success-light, var(--vvd-color-success-400));--_connotation-color-primary: var(--vvd-appearanceUI-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-appearanceUI-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-appearanceUI-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-firm: var(--vvd-appearanceUI-success-firm, var(--vvd-color-success-600));--_connotation-color-firm-all: var(--vvd-appearanceUI-success-firm-all, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-appearanceUI-success-fierce, var(--vvd-color-success-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-success-fierce-primary, var(--vvd-color-success-700));--_connotation-color-contrast: var(--vvd-appearanceUI-success-contrast, var(--vvd-color-success-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-success-intermediate, var(--vvd-color-success-500))}.base.connotation-alert{--_connotation-color-faint: var(--vvd-appearanceUI-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-appearanceUI-alert-soft, var(--vvd-color-alert-100));--_connotation-color-dim: var(--vvd-appearanceUI-alert-dim, var(--vvd-color-alert-200));--_connotation-color-pale: var(--vvd-appearanceUI-alert-pale, var(--vvd-color-alert-300));--_connotation-color-light: var(--vvd-appearanceUI-alert-light, var(--vvd-color-alert-400));--_connotation-color-primary: var(--vvd-appearanceUI-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-appearanceUI-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-appearanceUI-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-firm: var(--vvd-appearanceUI-alert-firm, var(--vvd-color-alert-600));--_connotation-color-firm-all: var(--vvd-appearanceUI-alert-firm-all, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-appearanceUI-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-alert-fierce-primary, var(--vvd-color-alert-700));--_connotation-color-contrast: var(--vvd-appearanceUI-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-alert-intermediate, var(--vvd-color-alert-500))}.base.connotation-warning{--_connotation-color-faint: var(--vvd-appearanceUI-warning-faint, var(--vvd-color-warning-50));--_connotation-color-soft: var(--vvd-appearanceUI-warning-soft, var(--vvd-color-warning-100));--_connotation-color-dim: var(--vvd-appearanceUI-warning-dim, var(--vvd-color-warning-200));--_connotation-color-pale: var(--vvd-appearanceUI-warning-pale, var(--vvd-color-warning-300));--_connotation-color-light: var(--vvd-appearanceUI-warning-light, var(--vvd-color-warning-400));--_connotation-color-primary: var(--vvd-appearanceUI-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-appearanceUI-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-primary-increment: var(--vvd-appearanceUI-warning-primary-increment, var(--vvd-color-warning-600));--_connotation-color-firm: var(--vvd-appearanceUI-warning-firm, var(--vvd-color-warning-600));--_connotation-color-firm-all: var(--vvd-appearanceUI-warning-firm-all, var(--vvd-color-warning-600));--_connotation-color-fierce: var(--vvd-appearanceUI-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-warning-fierce-primary, var(--vvd-color-warning-300));--_connotation-color-contrast: var(--vvd-appearanceUI-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-warning-intermediate, var(--vvd-color-warning-300))}.base.connotation-information{--_connotation-color-faint: var(--vvd-appearanceUI-information-faint, var(--vvd-color-information-50));--_connotation-color-soft: var(--vvd-appearanceUI-information-soft, var(--vvd-color-information-100));--_connotation-color-dim: var(--vvd-appearanceUI-information-dim, var(--vvd-color-information-200));--_connotation-color-pale: var(--vvd-appearanceUI-information-pale, var(--vvd-color-information-300));--_connotation-color-light: var(--vvd-appearanceUI-information-light, var(--vvd-color-information-400));--_connotation-color-primary: var(--vvd-appearanceUI-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-appearanceUI-information-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-appearanceUI-information-primary-increment, var(--vvd-color-information-600));--_connotation-color-firm: var(--vvd-appearanceUI-information-firm, var(--vvd-color-information-600));--_connotation-color-firm-all: var(--vvd-appearanceUI-information-firm-all, var(--vvd-color-information-600));--_connotation-color-fierce: var(--vvd-appearanceUI-information-fierce, var(--vvd-color-information-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-information-fierce-primary, var(--vvd-color-information-700));--_connotation-color-contrast: var(--vvd-appearanceUI-information-contrast, var(--vvd-color-information-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-information-intermediate, var(--vvd-color-information-500))}.base.connotation-announcement{--_connotation-color-faint: var(--vvd-appearanceUI-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-soft: var(--vvd-appearanceUI-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-dim: var(--vvd-appearanceUI-announcement-dim, var(--vvd-color-announcement-200));--_connotation-color-pale: var(--vvd-appearanceUI-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-light: var(--vvd-appearanceUI-announcement-light, var(--vvd-color-announcement-400));--_connotation-color-primary: var(--vvd-appearanceUI-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-appearanceUI-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-appearanceUI-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-firm: var(--vvd-appearanceUI-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-firm-all: var(--vvd-appearanceUI-announcement-firm-all, var(--vvd-color-announcement-600));--_connotation-color-fierce: var(--vvd-appearanceUI-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-announcement-fierce-primary, var(--vvd-color-announcement-700));--_connotation-color-contrast: var(--vvd-appearanceUI-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-announcement-intermediate, var(--vvd-color-announcement-500))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-faint: var(--vvd-appearanceUI-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-appearanceUI-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-appearanceUI-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-appearanceUI-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-light: var(--vvd-appearanceUI-accent-light, var(--vvd-color-neutral-400));--_connotation-color-primary: var(--vvd-appearanceUI-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-appearanceUI-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-appearanceUI-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-appearanceUI-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-appearanceUI-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-fierce: var(--vvd-appearanceUI-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-appearanceUI-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-accent-intermediate, var(--vvd-color-neutral-500))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-ghost,.base.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base.appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-fieldset{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-fieldset{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-fieldset{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-fieldset{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-outlined-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:where(.disabled,:disabled).appearance-subtle{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-fieldset{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-listitem{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.selected):where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.base:where(.selected):where(.disabled,:disabled).appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.base:where(.selected):where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(.disabled,:disabled).appearance-outlined-light{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(.disabled,:disabled).appearance-duotone{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(.disabled,:disabled).appearance-subtle{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(.disabled,:disabled).appearance-fieldset{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.selected):where(.disabled,:disabled).appearance-listitem{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-neutral-800);--_appearance-color-fill: var(--vvd-color-neutral-500);--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-listitem{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}";
7
7
 
8
8
  var __defProp = Object.defineProperty;
9
9
  var __decorateClass = (decorators, target, key, kind) => {
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 = ".wrapper{display:grid;column-gap:8px;grid-template-columns:repeat(7,auto)}.base{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:40px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);padding-inline:16px}.base.connotation-cta{--_connotation-color-faint: var(--vvd-appearanceUI-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-appearanceUI-cta-soft, var(--vvd-color-cta-100));--_connotation-color-dim: var(--vvd-appearanceUI-cta-dim, var(--vvd-color-cta-200));--_connotation-color-pale: var(--vvd-appearanceUI-cta-pale, var(--vvd-color-cta-300));--_connotation-color-light: var(--vvd-appearanceUI-cta-light, var(--vvd-color-cta-400));--_connotation-color-primary: var(--vvd-appearanceUI-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-appearanceUI-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-appearanceUI-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-appearanceUI-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-appearanceUI-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-appearanceUI-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-contrast: var(--vvd-appearanceUI-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-cta-intermediate, var(--vvd-color-cta-500))}.base.connotation-success{--_connotation-color-faint: var(--vvd-appearanceUI-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-appearanceUI-success-soft, var(--vvd-color-success-100));--_connotation-color-dim: var(--vvd-appearanceUI-success-dim, var(--vvd-color-success-200));--_connotation-color-pale: var(--vvd-appearanceUI-success-pale, var(--vvd-color-success-300));--_connotation-color-light: var(--vvd-appearanceUI-success-light, var(--vvd-color-success-400));--_connotation-color-primary: var(--vvd-appearanceUI-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-appearanceUI-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-appearanceUI-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-firm: var(--vvd-appearanceUI-success-firm, var(--vvd-color-success-600));--_connotation-color-firm-all: var(--vvd-appearanceUI-success-firm-all, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-appearanceUI-success-fierce, var(--vvd-color-success-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-success-fierce-primary, var(--vvd-color-success-700));--_connotation-color-contrast: var(--vvd-appearanceUI-success-contrast, var(--vvd-color-success-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-success-intermediate, var(--vvd-color-success-500))}.base.connotation-alert{--_connotation-color-faint: var(--vvd-appearanceUI-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-appearanceUI-alert-soft, var(--vvd-color-alert-100));--_connotation-color-dim: var(--vvd-appearanceUI-alert-dim, var(--vvd-color-alert-200));--_connotation-color-pale: var(--vvd-appearanceUI-alert-pale, var(--vvd-color-alert-300));--_connotation-color-light: var(--vvd-appearanceUI-alert-light, var(--vvd-color-alert-400));--_connotation-color-primary: var(--vvd-appearanceUI-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-appearanceUI-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-appearanceUI-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-firm: var(--vvd-appearanceUI-alert-firm, var(--vvd-color-alert-600));--_connotation-color-firm-all: var(--vvd-appearanceUI-alert-firm-all, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-appearanceUI-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-alert-fierce-primary, var(--vvd-color-alert-700));--_connotation-color-contrast: var(--vvd-appearanceUI-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-alert-intermediate, var(--vvd-color-alert-500))}.base.connotation-warning{--_connotation-color-faint: var(--vvd-appearanceUI-warning-faint, var(--vvd-color-warning-50));--_connotation-color-soft: var(--vvd-appearanceUI-warning-soft, var(--vvd-color-warning-100));--_connotation-color-dim: var(--vvd-appearanceUI-warning-dim, var(--vvd-color-warning-200));--_connotation-color-pale: var(--vvd-appearanceUI-warning-pale, var(--vvd-color-warning-300));--_connotation-color-light: var(--vvd-appearanceUI-warning-light, var(--vvd-color-warning-400));--_connotation-color-primary: var(--vvd-appearanceUI-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-appearanceUI-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-primary-increment: var(--vvd-appearanceUI-warning-primary-increment, var(--vvd-color-warning-600));--_connotation-color-firm: var(--vvd-appearanceUI-warning-firm, var(--vvd-color-warning-600));--_connotation-color-firm-all: var(--vvd-appearanceUI-warning-firm-all, var(--vvd-color-warning-600));--_connotation-color-fierce: var(--vvd-appearanceUI-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-warning-fierce-primary, var(--vvd-color-warning-300));--_connotation-color-contrast: var(--vvd-appearanceUI-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-warning-intermediate, var(--vvd-color-warning-300))}.base.connotation-information{--_connotation-color-faint: var(--vvd-appearanceUI-information-faint, var(--vvd-color-information-50));--_connotation-color-soft: var(--vvd-appearanceUI-information-soft, var(--vvd-color-information-100));--_connotation-color-dim: var(--vvd-appearanceUI-information-dim, var(--vvd-color-information-200));--_connotation-color-pale: var(--vvd-appearanceUI-information-pale, var(--vvd-color-information-300));--_connotation-color-light: var(--vvd-appearanceUI-information-light, var(--vvd-color-information-400));--_connotation-color-primary: var(--vvd-appearanceUI-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-appearanceUI-information-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-appearanceUI-information-primary-increment, var(--vvd-color-information-600));--_connotation-color-firm: var(--vvd-appearanceUI-information-firm, var(--vvd-color-information-600));--_connotation-color-firm-all: var(--vvd-appearanceUI-information-firm-all, var(--vvd-color-information-600));--_connotation-color-fierce: var(--vvd-appearanceUI-information-fierce, var(--vvd-color-information-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-information-fierce-primary, var(--vvd-color-information-700));--_connotation-color-contrast: var(--vvd-appearanceUI-information-contrast, var(--vvd-color-information-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-information-intermediate, var(--vvd-color-information-500))}.base.connotation-announcement{--_connotation-color-faint: var(--vvd-appearanceUI-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-soft: var(--vvd-appearanceUI-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-dim: var(--vvd-appearanceUI-announcement-dim, var(--vvd-color-announcement-200));--_connotation-color-pale: var(--vvd-appearanceUI-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-light: var(--vvd-appearanceUI-announcement-light, var(--vvd-color-announcement-400));--_connotation-color-primary: var(--vvd-appearanceUI-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-appearanceUI-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-appearanceUI-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-firm: var(--vvd-appearanceUI-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-firm-all: var(--vvd-appearanceUI-announcement-firm-all, var(--vvd-color-announcement-600));--_connotation-color-fierce: var(--vvd-appearanceUI-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-announcement-fierce-primary, var(--vvd-color-announcement-700));--_connotation-color-contrast: var(--vvd-appearanceUI-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-announcement-intermediate, var(--vvd-color-announcement-500))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-faint: var(--vvd-appearanceUI-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-appearanceUI-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-appearanceUI-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-appearanceUI-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-light: var(--vvd-appearanceUI-accent-light, var(--vvd-color-neutral-400));--_connotation-color-primary: var(--vvd-appearanceUI-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-appearanceUI-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-appearanceUI-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-appearanceUI-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-appearanceUI-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-fierce: var(--vvd-appearanceUI-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-appearanceUI-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-accent-intermediate, var(--vvd-color-neutral-500))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-ghost,.base.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-fieldset{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-fieldset{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-fieldset{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-fieldset{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:where(.disabled,:disabled).appearance-subtle{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-fieldset{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-listitem{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.selected):where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.base:where(.selected):where(.disabled,:disabled).appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.base:where(.selected):where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(.disabled,:disabled).appearance-duotone{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(.disabled,:disabled).appearance-subtle{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(.disabled,:disabled).appearance-fieldset{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.selected):where(.disabled,:disabled).appearance-listitem{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-neutral-800);--_appearance-color-fill: var(--vvd-color-neutral-500);--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-listitem{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}";
4
+ const styles = ".wrapper{display:grid;column-gap:8px;grid-template-columns:repeat(7,auto)}.base{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:40px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);padding-inline:16px}.base.connotation-cta{--_connotation-color-faint: var(--vvd-appearanceUI-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-appearanceUI-cta-soft, var(--vvd-color-cta-100));--_connotation-color-dim: var(--vvd-appearanceUI-cta-dim, var(--vvd-color-cta-200));--_connotation-color-pale: var(--vvd-appearanceUI-cta-pale, var(--vvd-color-cta-300));--_connotation-color-light: var(--vvd-appearanceUI-cta-light, var(--vvd-color-cta-400));--_connotation-color-primary: var(--vvd-appearanceUI-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-appearanceUI-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-appearanceUI-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-appearanceUI-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-appearanceUI-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-appearanceUI-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-contrast: var(--vvd-appearanceUI-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-cta-intermediate, var(--vvd-color-cta-500))}.base.connotation-success{--_connotation-color-faint: var(--vvd-appearanceUI-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-appearanceUI-success-soft, var(--vvd-color-success-100));--_connotation-color-dim: var(--vvd-appearanceUI-success-dim, var(--vvd-color-success-200));--_connotation-color-pale: var(--vvd-appearanceUI-success-pale, var(--vvd-color-success-300));--_connotation-color-light: var(--vvd-appearanceUI-success-light, var(--vvd-color-success-400));--_connotation-color-primary: var(--vvd-appearanceUI-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-appearanceUI-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-appearanceUI-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-firm: var(--vvd-appearanceUI-success-firm, var(--vvd-color-success-600));--_connotation-color-firm-all: var(--vvd-appearanceUI-success-firm-all, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-appearanceUI-success-fierce, var(--vvd-color-success-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-success-fierce-primary, var(--vvd-color-success-700));--_connotation-color-contrast: var(--vvd-appearanceUI-success-contrast, var(--vvd-color-success-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-success-intermediate, var(--vvd-color-success-500))}.base.connotation-alert{--_connotation-color-faint: var(--vvd-appearanceUI-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-appearanceUI-alert-soft, var(--vvd-color-alert-100));--_connotation-color-dim: var(--vvd-appearanceUI-alert-dim, var(--vvd-color-alert-200));--_connotation-color-pale: var(--vvd-appearanceUI-alert-pale, var(--vvd-color-alert-300));--_connotation-color-light: var(--vvd-appearanceUI-alert-light, var(--vvd-color-alert-400));--_connotation-color-primary: var(--vvd-appearanceUI-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-appearanceUI-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-appearanceUI-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-firm: var(--vvd-appearanceUI-alert-firm, var(--vvd-color-alert-600));--_connotation-color-firm-all: var(--vvd-appearanceUI-alert-firm-all, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-appearanceUI-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-alert-fierce-primary, var(--vvd-color-alert-700));--_connotation-color-contrast: var(--vvd-appearanceUI-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-alert-intermediate, var(--vvd-color-alert-500))}.base.connotation-warning{--_connotation-color-faint: var(--vvd-appearanceUI-warning-faint, var(--vvd-color-warning-50));--_connotation-color-soft: var(--vvd-appearanceUI-warning-soft, var(--vvd-color-warning-100));--_connotation-color-dim: var(--vvd-appearanceUI-warning-dim, var(--vvd-color-warning-200));--_connotation-color-pale: var(--vvd-appearanceUI-warning-pale, var(--vvd-color-warning-300));--_connotation-color-light: var(--vvd-appearanceUI-warning-light, var(--vvd-color-warning-400));--_connotation-color-primary: var(--vvd-appearanceUI-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-appearanceUI-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-primary-increment: var(--vvd-appearanceUI-warning-primary-increment, var(--vvd-color-warning-600));--_connotation-color-firm: var(--vvd-appearanceUI-warning-firm, var(--vvd-color-warning-600));--_connotation-color-firm-all: var(--vvd-appearanceUI-warning-firm-all, var(--vvd-color-warning-600));--_connotation-color-fierce: var(--vvd-appearanceUI-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-warning-fierce-primary, var(--vvd-color-warning-300));--_connotation-color-contrast: var(--vvd-appearanceUI-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-warning-intermediate, var(--vvd-color-warning-300))}.base.connotation-information{--_connotation-color-faint: var(--vvd-appearanceUI-information-faint, var(--vvd-color-information-50));--_connotation-color-soft: var(--vvd-appearanceUI-information-soft, var(--vvd-color-information-100));--_connotation-color-dim: var(--vvd-appearanceUI-information-dim, var(--vvd-color-information-200));--_connotation-color-pale: var(--vvd-appearanceUI-information-pale, var(--vvd-color-information-300));--_connotation-color-light: var(--vvd-appearanceUI-information-light, var(--vvd-color-information-400));--_connotation-color-primary: var(--vvd-appearanceUI-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-appearanceUI-information-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-appearanceUI-information-primary-increment, var(--vvd-color-information-600));--_connotation-color-firm: var(--vvd-appearanceUI-information-firm, var(--vvd-color-information-600));--_connotation-color-firm-all: var(--vvd-appearanceUI-information-firm-all, var(--vvd-color-information-600));--_connotation-color-fierce: var(--vvd-appearanceUI-information-fierce, var(--vvd-color-information-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-information-fierce-primary, var(--vvd-color-information-700));--_connotation-color-contrast: var(--vvd-appearanceUI-information-contrast, var(--vvd-color-information-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-information-intermediate, var(--vvd-color-information-500))}.base.connotation-announcement{--_connotation-color-faint: var(--vvd-appearanceUI-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-soft: var(--vvd-appearanceUI-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-dim: var(--vvd-appearanceUI-announcement-dim, var(--vvd-color-announcement-200));--_connotation-color-pale: var(--vvd-appearanceUI-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-light: var(--vvd-appearanceUI-announcement-light, var(--vvd-color-announcement-400));--_connotation-color-primary: var(--vvd-appearanceUI-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-appearanceUI-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-appearanceUI-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-firm: var(--vvd-appearanceUI-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-firm-all: var(--vvd-appearanceUI-announcement-firm-all, var(--vvd-color-announcement-600));--_connotation-color-fierce: var(--vvd-appearanceUI-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-announcement-fierce-primary, var(--vvd-color-announcement-700));--_connotation-color-contrast: var(--vvd-appearanceUI-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-announcement-intermediate, var(--vvd-color-announcement-500))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-faint: var(--vvd-appearanceUI-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-appearanceUI-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-appearanceUI-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-appearanceUI-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-light: var(--vvd-appearanceUI-accent-light, var(--vvd-color-neutral-400));--_connotation-color-primary: var(--vvd-appearanceUI-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-appearanceUI-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-appearanceUI-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-appearanceUI-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-appearanceUI-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-fierce: var(--vvd-appearanceUI-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-appearanceUI-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-appearanceUI-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-appearanceUI-accent-intermediate, var(--vvd-color-neutral-500))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-ghost,.base.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base.appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-fieldset{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-fieldset{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-fieldset{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-fieldset{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-outlined-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:where(.disabled,:disabled).appearance-subtle{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-fieldset{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-listitem{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.selected):where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.base:where(.selected):where(.disabled,:disabled).appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.base:where(.selected):where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(.disabled,:disabled).appearance-outlined-light{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(.disabled,:disabled).appearance-duotone{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(.disabled,:disabled).appearance-subtle{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected):where(.disabled,:disabled).appearance-fieldset{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.selected):where(.disabled,:disabled).appearance-listitem{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-neutral-800);--_appearance-color-fill: var(--vvd-color-neutral-500);--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-listitem{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}";
5
5
 
6
6
  var __defProp = Object.defineProperty;
7
7
  var __decorateClass = (decorators, target, key, kind) => {
package/custom-elements.json CHANGED
@@ -1569,15 +1569,6 @@
1569
1569
  "privacy": "private",
1570
1570
  "default": "new Audio()"
1571
1571
  },
1572
- {
1573
- "kind": "field",
1574
- "name": "#baseElement",
1575
- "privacy": "private",
1576
- "type": {
1577
- "text": "HTMLElement | null"
1578
- },
1579
- "readonly": true
1580
- },
1581
1572
  {
1582
1573
  "kind": "method",
1583
1574
  "name": "play"
@@ -1588,7 +1579,7 @@
1588
1579
  },
1589
1580
  {
1590
1581
  "kind": "method",
1591
- "name": "#setInteractionListeners",
1582
+ "name": "#setSliderInteractionListeners",
1592
1583
  "parameters": [
1593
1584
  {
1594
1585
  "name": "add",
@@ -1601,6 +1592,15 @@
1601
1592
  "name": "#pausedChanged",
1602
1593
  "privacy": "private"
1603
1594
  },
1595
+ {
1596
+ "kind": "field",
1597
+ "name": "#currentTimeChanged",
1598
+ "privacy": "private",
1599
+ "type": {
1600
+ "text": "boolean"
1601
+ },
1602
+ "default": "false"
1603
+ },
1604
1604
  {
1605
1605
  "kind": "field",
1606
1606
  "name": "#updateProgress",
@@ -1613,12 +1613,15 @@
1613
1613
  },
1614
1614
  {
1615
1615
  "kind": "field",
1616
- "name": "#rewind",
1617
- "privacy": "private"
1616
+ "name": "#dragInterval",
1617
+ "privacy": "private",
1618
+ "type": {
1619
+ "text": "number | undefined"
1620
+ }
1618
1621
  },
1619
1622
  {
1620
1623
  "kind": "field",
1621
- "name": "#handleSliderEvent",
1624
+ "name": "#updateCurrentTimeOnSliderChange",
1622
1625
  "privacy": "private"
1623
1626
  },
1624
1627
  {
@@ -2573,7 +2576,7 @@
2573
2576
  "kind": "field",
2574
2577
  "name": "ariaLive",
2575
2578
  "type": {
2576
- "text": "any"
2579
+ "text": "string | null"
2577
2580
  }
2578
2581
  },
2579
2582
  {
@@ -2656,7 +2659,7 @@
2656
2659
  {
2657
2660
  "name": "aria-live",
2658
2661
  "type": {
2659
- "text": "any"
2662
+ "text": "string | null"
2660
2663
  },
2661
2664
  "fieldName": "ariaLive"
2662
2665
  },
@@ -4333,7 +4336,7 @@
4333
4336
  "vueModels": [
4334
4337
  {
4335
4338
  "name": "modelValue",
4336
- "attributeName": "current-checked",
4339
+ "attributeName": "checked",
4337
4340
  "eventName": "change",
4338
4341
  "valueMapping": "(event.target as HTMLInputElement).checked"
4339
4342
  }
@@ -4490,7 +4493,7 @@
4490
4493
  "vueModels": [
4491
4494
  {
4492
4495
  "name": "modelValue",
4493
- "attributeName": "current-value",
4496
+ "attributeName": "value",
4494
4497
  "eventName": "change",
4495
4498
  "valueMapping": "(event.target as HTMLInputElement).value"
4496
4499
  }
@@ -6125,13 +6128,13 @@
6125
6128
  "vueModels": [
6126
6129
  {
6127
6130
  "name": "start",
6128
- "attributeName": "current-start",
6131
+ "attributeName": "start",
6129
6132
  "eventName": "input:start",
6130
6133
  "valueMapping": "(event.target as any).start"
6131
6134
  },
6132
6135
  {
6133
6136
  "name": "end",
6134
- "attributeName": "current-end",
6137
+ "attributeName": "end",
6135
6138
  "eventName": "input:end",
6136
6139
  "valueMapping": "(event.target as any).end"
6137
6140
  }
@@ -10431,7 +10434,7 @@
10431
10434
  "vueModels": [
10432
10435
  {
10433
10436
  "name": "modelValue",
10434
- "attributeName": "current-value",
10437
+ "attributeName": "value",
10435
10438
  "eventName": "input",
10436
10439
  "valueMapping": "(event.target as HTMLInputElement).value"
10437
10440
  }
@@ -12109,13 +12112,13 @@
12109
12112
  "vueModels": [
12110
12113
  {
12111
12114
  "name": "start",
12112
- "attributeName": "current-start",
12115
+ "attributeName": "start",
12113
12116
  "eventName": "input:start",
12114
12117
  "valueMapping": "(event.target as any).start"
12115
12118
  },
12116
12119
  {
12117
12120
  "name": "end",
12118
- "attributeName": "current-end",
12121
+ "attributeName": "end",
12119
12122
  "eventName": "input:end",
12120
12123
  "valueMapping": "(event.target as any).end"
12121
12124
  }
@@ -12304,6 +12307,24 @@
12304
12307
  "text": "void"
12305
12308
  }
12306
12309
  }
12310
+ },
12311
+ {
12312
+ "kind": "method",
12313
+ "name": "slottedOptionsChanged",
12314
+ "parameters": [
12315
+ {
12316
+ "name": "prev",
12317
+ "type": {
12318
+ "text": "Element[] | undefined"
12319
+ }
12320
+ },
12321
+ {
12322
+ "name": "next",
12323
+ "type": {
12324
+ "text": "Element[]"
12325
+ }
12326
+ }
12327
+ ]
12307
12328
  }
12308
12329
  ],
12309
12330
  "events": [
@@ -12367,7 +12388,7 @@
12367
12388
  "vueModels": [
12368
12389
  {
12369
12390
  "name": "modelValue",
12370
- "attributeName": "current-value",
12391
+ "attributeName": "value",
12371
12392
  "eventName": "input",
12372
12393
  "valueMapping": "(event.target as HTMLInputElement).value"
12373
12394
  }
@@ -12992,7 +13013,7 @@
12992
13013
  "vueModels": [
12993
13014
  {
12994
13015
  "name": "modelValue",
12995
- "attributeName": "current-value",
13016
+ "attributeName": "value",
12996
13017
  "eventName": "change",
12997
13018
  "valueMapping": "(event.target as HTMLInputElement).value"
12998
13019
  }
@@ -13733,7 +13754,7 @@
13733
13754
  "vueModels": [
13734
13755
  {
13735
13756
  "name": "modelValue",
13736
- "attributeName": "current-checked",
13757
+ "attributeName": "checked",
13737
13758
  "eventName": "change",
13738
13759
  "valueMapping": "(event.target as HTMLInputElement).checked"
13739
13760
  }
@@ -13904,9 +13925,9 @@
13904
13925
  "kind": "field",
13905
13926
  "name": "tabIndex",
13906
13927
  "type": {
13907
- "text": "any"
13928
+ "text": "number"
13908
13929
  },
13909
- "default": "'-1'"
13930
+ "default": "'-1' as unknown"
13910
13931
  },
13911
13932
  {
13912
13933
  "kind": "field",
@@ -13944,9 +13965,9 @@
13944
13965
  },
13945
13966
  {
13946
13967
  "type": {
13947
- "text": "any"
13968
+ "text": "number"
13948
13969
  },
13949
- "default": "'-1'",
13970
+ "default": "'-1' as unknown",
13950
13971
  "fieldName": "tabIndex"
13951
13972
  },
13952
13973
  {
@@ -15111,7 +15132,7 @@
15111
15132
  "vueModels": [
15112
15133
  {
15113
15134
  "name": "modelValue",
15114
- "attributeName": "current-value",
15135
+ "attributeName": "value",
15115
15136
  "eventName": "input",
15116
15137
  "valueMapping": "(event.target as HTMLInputElement).value"
15117
15138
  }
@@ -15362,7 +15383,7 @@
15362
15383
  "vueModels": [
15363
15384
  {
15364
15385
  "name": "modelValue",
15365
- "attributeName": "current-value",
15386
+ "attributeName": "value",
15366
15387
  "eventName": "input",
15367
15388
  "valueMapping": "(event.target as HTMLInputElement).value"
15368
15389
  }
@@ -15735,7 +15756,7 @@
15735
15756
  "vueModels": [
15736
15757
  {
15737
15758
  "name": "modelValue",
15738
- "attributeName": "current-value",
15759
+ "attributeName": "value",
15739
15760
  "eventName": "input",
15740
15761
  "valueMapping": "(event.target as HTMLInputElement).value"
15741
15762
  }
package/index.cjs CHANGED
@@ -263,7 +263,7 @@ exports.Position = enums.Position;
263
263
  exports.Role = enums.Role;
264
264
  exports.Shape = enums.Shape;
265
265
  exports.Size = enums.Size;
266
- exports.TabsSize = enums.TabsSize;
266
+ exports.TabsGutters = enums.TabsGutters;
267
267
  exports.designSystem = index$1.designSystem;
268
268
  exports.registerFactory = index$1.registerFactory;
269
269
  exports.setLocale = index.setLocale;
package/index.js CHANGED
@@ -59,6 +59,6 @@ export { r as registerTooltip, t as tooltipDefinition, a as tooltipRegistries }
59
59
  export { r as registerTreeItem, t as treeItemDefinition, a as treeItemRegistries } from './shared/definition59.js';
60
60
  export { r as registerTreeView, t as treeViewDefinition, a as treeViewRegistries } from './shared/definition60.js';
61
61
  export { r as registerVideoPlayer, v as videoPlayerDefinition, a as videoPlayerRegistries } from './shared/definition61.js';
62
- export { A as Appearance, c as AriaLive, C as Connotation, a as ConnotationDecorative, L as LayoutSize, M as MediaSkipBy, P as Position, R as Role, S as Shape, b as Size, T as TabsSize } from './shared/enums.js';
62
+ export { A as Appearance, c as AriaLive, C as Connotation, a as ConnotationDecorative, L as LayoutSize, M as MediaSkipBy, P as Position, R as Role, S as Shape, b as Size, T as TabsGutters } from './shared/enums.js';
63
63
  export { d as designSystem, r as registerFactory } from './shared/index.js';
64
64
  export { s as setLocale } from './shared/index2.js';
package/lib/appearance-ui/appearance-ui.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { FoundationElement } from '@microsoft/fast-foundation';
2
2
  import type { Appearance } from '../enums.js';
3
- export type AppearanceUIAppearance = Extract<Appearance, Appearance.Filled | Appearance.Ghost | Appearance.GhostLight | Appearance.Outlined | Appearance.Duotone | Appearance.Fieldset | Appearance.Subtle | Appearance.Listitem>;
3
+ export type AppearanceUIAppearance = Extract<Appearance, Appearance.Filled | Appearance.Ghost | Appearance.GhostLight | Appearance.Outlined | Appearance.OutlinedLight | Appearance.Duotone | Appearance.Fieldset | Appearance.Subtle | Appearance.Listitem>;
4
4
  export declare class AppearanceUi extends FoundationElement {
5
5
  appearance?: AppearanceUIAppearance;
6
6
  hovered: boolean;
package/lib/banner/banner.d.ts CHANGED
@@ -10,7 +10,7 @@ export declare class Banner extends FoundationElement {
10
10
  actionHref: string | undefined;
11
11
  actionText: string | undefined;
12
12
  removable: boolean;
13
- ariaLive: any;
13
+ ariaLive: string | null;
14
14
  text: string | undefined;
15
15
  connotation: BannerConnotation | undefined;
16
16
  get conditionedIcon(): string;
package/lib/button/button.d.ts CHANGED
@@ -2,7 +2,7 @@ import { Button as FoundationButton } from '@microsoft/fast-foundation';
2
2
  import type { Appearance, Connotation, Shape, Size } from '../enums.js';
3
3
  import { AffixIconWithTrailing } from '../../shared/patterns/affix';
4
4
  export type ButtonConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert>;
5
- export type ButtonAppearance = Extract<Appearance, Appearance.Filled | Appearance.Outlined | Appearance.Ghost | Appearance.GhostLight>;
5
+ export type ButtonAppearance = Extract<Appearance, Appearance.Filled | Appearance.Outlined | Appearance.Ghost | Appearance.GhostLight | Appearance.OutlinedLight>;
6
6
  export type ButtonShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
7
7
  export type ButtonSize = Extract<Size, Size.SuperCondensed | Size.Condensed | Size.Normal | Size.Expanded>;
8
8
  export declare class Button extends FoundationButton {
package/lib/enums.d.ts CHANGED
@@ -24,6 +24,7 @@ export declare enum Appearance {
24
24
  Subtle = "subtle",
25
25
  Ghost = "ghost",
26
26
  GhostLight = "ghost-light",
27
+ OutlinedLight = "outlined-light",
27
28
  Listitem = "listitem",
28
29
  Elevated = "elevated"
29
30
  }
@@ -45,7 +46,8 @@ export declare enum LayoutSize {
45
46
  Medium = "medium",
46
47
  Large = "large"
47
48
  }
48
- export declare enum TabsSize {
49
+ export declare enum TabsGutters {
50
+ None = "none",
49
51
  Small = "small"
50
52
  }
51
53
  export declare enum Position {
package/lib/tab/tab.d.ts CHANGED
@@ -7,7 +7,7 @@ export declare class Tab extends FoundationTab {
7
7
  connotation?: TabConnotation;
8
8
  shape?: TabShape;
9
9
  label?: string;
10
- tabIndex: any;
10
+ tabIndex: number;
11
11
  ariaSelected: string | null;
12
12
  }
13
13
  export interface Tab extends AffixIconWithTrailing {
package/lib/tabs/tabs.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import { Tabs as FoundationTabs } from '@microsoft/fast-foundation';
2
- import type { Connotation, TabsSize } from '../enums.js';
2
+ import type { Connotation, TabsGutters } from '../enums.js';
3
3
  export declare const ACTIVE_TAB_WIDTH = "--_tabs-active-tab-inline-size";
4
4
  export type TabsConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA>;
5
- export type Gutters = Extract<TabsSize, TabsSize.Small>;
5
+ export type Gutters = Extract<TabsGutters, TabsGutters.Small | TabsGutters.None>;
6
6
  export declare class Tabs extends FoundationTabs {
7
7
  #private;
8
8
  tablist?: HTMLElement;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vonage/vivid",
3
- "version": "3.59.0",
3
+ "version": "4.0.0",
4
4
  "type": "module",
5
5
  "module": "./index.js",
6
6
  "main": "./index.cjs",