@vonage/vivid 3.43.0 → 3.45.0

package/appearance-ui/index.js

@@ -0,0 +1,94 @@
+import { a as attr, F as FoundationElement, h as html, r as registerFactory } from '../shared/index.js';
+import { c as classNames } from '../shared/class-names.js';
+
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n.wrapper {\n  display: grid;\n  column-gap: 8px;\n  grid-template-columns: repeat(7, auto);\n}\n\n.base {\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: 40px;\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  padding-inline: 16px;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-appearanceUI-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-appearanceUI-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-appearanceUI-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-appearanceUI-cta-soft, var(--vvd-color-cta-100));\n  /* @cssprop [--vvd-appearanceUI-cta-dim=var(--vvd-color-cta-200)] */\n  --_connotation-color-dim: var(--vvd-appearanceUI-cta-dim, var(--vvd-color-cta-200));\n  /* @cssprop [--vvd-appearanceUI-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-appearanceUI-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-appearanceUI-cta-light=var(--vvd-color-cta-400)] */\n  --_connotation-color-light: var(--vvd-appearanceUI-cta-light, var(--vvd-color-cta-400));\n  /* @cssprop [--vvd-appearanceUI-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-appearanceUI-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-appearanceUI-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-appearanceUI-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-appearanceUI-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-appearanceUI-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-appearanceUI-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-appearanceUI-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-appearanceUI-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-appearanceUI-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-appearanceUI-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-appearanceUI-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-appearanceUI-cta-backdrop=var(--vvd-color-cta-50)] */\n  --_connotation-color-backdrop: var(--vvd-appearanceUI-cta-backdrop, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-appearanceUI-cta-intermediate=var(--vvd-color-cta-500)] */\n  --_connotation-color-intermediate: var(--vvd-appearanceUI-cta-intermediate, var(--vvd-color-cta-500));\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-appearanceUI-success-faint=var(--vvd-color-success-50)] */\n  --_connotation-color-faint: var(--vvd-appearanceUI-success-faint, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-appearanceUI-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-appearanceUI-success-soft, var(--vvd-color-success-100));\n  /* @cssprop [--vvd-appearanceUI-success-dim=var(--vvd-color-success-200)] */\n  --_connotation-color-dim: var(--vvd-appearanceUI-success-dim, var(--vvd-color-success-200));\n  /* @cssprop [--vvd-appearanceUI-success-pale=var(--vvd-color-success-300)] */\n  --_connotation-color-pale: var(--vvd-appearanceUI-success-pale, var(--vvd-color-success-300));\n  /* @cssprop [--vvd-appearanceUI-success-light=var(--vvd-color-success-400)] */\n  --_connotation-color-light: var(--vvd-appearanceUI-success-light, var(--vvd-color-success-400));\n  /* @cssprop [--vvd-appearanceUI-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-appearanceUI-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-appearanceUI-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-appearanceUI-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-appearanceUI-success-primary-increment=var(--vvd-color-success-600)] */\n  --_connotation-color-primary-increment: var(--vvd-appearanceUI-success-primary-increment, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-appearanceUI-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-appearanceUI-success-firm, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-appearanceUI-success-fierce=var(--vvd-color-success-700)] */\n  --_connotation-color-fierce: var(--vvd-appearanceUI-success-fierce, var(--vvd-color-success-700));\n  /* @cssprop [--vvd-appearanceUI-success-contrast=var(--vvd-color-success-800)] */\n  --_connotation-color-contrast: var(--vvd-appearanceUI-success-contrast, var(--vvd-color-success-800));\n  /* @cssprop [--vvd-appearanceUI-success-backdrop=var(--vvd-color-success-50)] */\n  --_connotation-color-backdrop: var(--vvd-appearanceUI-success-backdrop, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-appearanceUI-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-appearanceUI-success-intermediate, var(--vvd-color-success-500));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-appearanceUI-alert-faint=var(--vvd-color-alert-50)] */\n  --_connotation-color-faint: var(--vvd-appearanceUI-alert-faint, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-appearanceUI-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-appearanceUI-alert-soft, var(--vvd-color-alert-100));\n  /* @cssprop [--vvd-appearanceUI-alert-dim=var(--vvd-color-alert-200)] */\n  --_connotation-color-dim: var(--vvd-appearanceUI-alert-dim, var(--vvd-color-alert-200));\n  /* @cssprop [--vvd-appearanceUI-alert-pale=var(--vvd-color-alert-300)] */\n  --_connotation-color-pale: var(--vvd-appearanceUI-alert-pale, var(--vvd-color-alert-300));\n  /* @cssprop [--vvd-appearanceUI-alert-light=var(--vvd-color-alert-400)] */\n  --_connotation-color-light: var(--vvd-appearanceUI-alert-light, var(--vvd-color-alert-400));\n  /* @cssprop [--vvd-appearanceUI-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-appearanceUI-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-appearanceUI-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-appearanceUI-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-appearanceUI-alert-primary-increment=var(--vvd-color-alert-600)] */\n  --_connotation-color-primary-increment: var(--vvd-appearanceUI-alert-primary-increment, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-appearanceUI-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-appearanceUI-alert-firm, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-appearanceUI-alert-fierce=var(--vvd-color-alert-700)] */\n  --_connotation-color-fierce: var(--vvd-appearanceUI-alert-fierce, var(--vvd-color-alert-700));\n  /* @cssprop [--vvd-appearanceUI-alert-contrast=var(--vvd-color-alert-800)] */\n  --_connotation-color-contrast: var(--vvd-appearanceUI-alert-contrast, var(--vvd-color-alert-800));\n  /* @cssprop [--vvd-appearanceUI-alert-backdrop=var(--vvd-color-alert-50)] */\n  --_connotation-color-backdrop: var(--vvd-appearanceUI-alert-backdrop, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-appearanceUI-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-appearanceUI-alert-intermediate, var(--vvd-color-alert-500));\n}\n.base.connotation-warning {\n  /* @cssprop [--vvd-appearanceUI-warning-faint=var(--vvd-color-warning-50)] */\n  --_connotation-color-faint: var(--vvd-appearanceUI-warning-faint, var(--vvd-color-warning-50));\n  /* @cssprop [--vvd-appearanceUI-warning-soft=var(--vvd-color-warning-100)] */\n  --_connotation-color-soft: var(--vvd-appearanceUI-warning-soft, var(--vvd-color-warning-100));\n  /* @cssprop [--vvd-appearanceUI-warning-dim=var(--vvd-color-warning-200)] */\n  --_connotation-color-dim: var(--vvd-appearanceUI-warning-dim, var(--vvd-color-warning-200));\n  /* @cssprop [--vvd-appearanceUI-warning-pale=var(--vvd-color-warning-300)] */\n  --_connotation-color-pale: var(--vvd-appearanceUI-warning-pale, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-appearanceUI-warning-light=var(--vvd-color-warning-400)] */\n  --_connotation-color-light: var(--vvd-appearanceUI-warning-light, var(--vvd-color-warning-400));\n  /* @cssprop [--vvd-appearanceUI-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-appearanceUI-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-appearanceUI-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-appearanceUI-warning-primary-text, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-appearanceUI-warning-primary-increment=var(--vvd-color-warning-600)] */\n  --_connotation-color-primary-increment: var(--vvd-appearanceUI-warning-primary-increment, var(--vvd-color-warning-600));\n  /* @cssprop [--vvd-appearanceUI-warning-firm=var(--vvd-color-warning-600)] */\n  --_connotation-color-firm: var(--vvd-appearanceUI-warning-firm, var(--vvd-color-warning-600));\n  /* @cssprop [--vvd-appearanceUI-warning-fierce=var(--vvd-color-warning-700)] */\n  --_connotation-color-fierce: var(--vvd-appearanceUI-warning-fierce, var(--vvd-color-warning-700));\n  /* @cssprop [--vvd-appearanceUI-warning-contrast=var(--vvd-color-warning-800)] */\n  --_connotation-color-contrast: var(--vvd-appearanceUI-warning-contrast, var(--vvd-color-warning-800));\n  /* @cssprop [--vvd-appearanceUI-warning-backdrop=var(--vvd-color-warning-50)] */\n  --_connotation-color-backdrop: var(--vvd-appearanceUI-warning-backdrop, var(--vvd-color-warning-50));\n  /* @cssprop [--vvd-appearanceUI-warning-intermediate=var(--vvd-color-warning-300)] */\n  --_connotation-color-intermediate: var(--vvd-appearanceUI-warning-intermediate, var(--vvd-color-warning-300));\n}\n.base.connotation-information {\n  /* @cssprop [--vvd-appearanceUI-information-faint=var(--vvd-color-information-50)] */\n  --_connotation-color-faint: var(--vvd-appearanceUI-information-faint, var(--vvd-color-information-50));\n  /* @cssprop [--vvd-appearanceUI-information-soft=var(--vvd-color-information-100)] */\n  --_connotation-color-soft: var(--vvd-appearanceUI-information-soft, var(--vvd-color-information-100));\n  /* @cssprop [--vvd-appearanceUI-information-dim=var(--vvd-color-information-200)] */\n  --_connotation-color-dim: var(--vvd-appearanceUI-information-dim, var(--vvd-color-information-200));\n  /* @cssprop [--vvd-appearanceUI-information-pale=var(--vvd-color-information-300)] */\n  --_connotation-color-pale: var(--vvd-appearanceUI-information-pale, var(--vvd-color-information-300));\n  /* @cssprop [--vvd-appearanceUI-information-light=var(--vvd-color-information-400)] */\n  --_connotation-color-light: var(--vvd-appearanceUI-information-light, var(--vvd-color-information-400));\n  /* @cssprop [--vvd-appearanceUI-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-appearanceUI-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-appearanceUI-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-appearanceUI-information-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-appearanceUI-information-primary-increment=var(--vvd-color-information-600)] */\n  --_connotation-color-primary-increment: var(--vvd-appearanceUI-information-primary-increment, var(--vvd-color-information-600));\n  /* @cssprop [--vvd-appearanceUI-information-firm=var(--vvd-color-information-600)] */\n  --_connotation-color-firm: var(--vvd-appearanceUI-information-firm, var(--vvd-color-information-600));\n  /* @cssprop [--vvd-appearanceUI-information-fierce=var(--vvd-color-information-700)] */\n  --_connotation-color-fierce: var(--vvd-appearanceUI-information-fierce, var(--vvd-color-information-700));\n  /* @cssprop [--vvd-appearanceUI-information-contrast=var(--vvd-color-information-800)] */\n  --_connotation-color-contrast: var(--vvd-appearanceUI-information-contrast, var(--vvd-color-information-800));\n  /* @cssprop [--vvd-appearanceUI-information-backdrop=var(--vvd-color-information-50)] */\n  --_connotation-color-backdrop: var(--vvd-appearanceUI-information-backdrop, var(--vvd-color-information-50));\n  /* @cssprop [--vvd-appearanceUI-information-intermediate=var(--vvd-color-information-500)] */\n  --_connotation-color-intermediate: var(--vvd-appearanceUI-information-intermediate, var(--vvd-color-information-500));\n}\n.base.connotation-announcement {\n  /* @cssprop [--vvd-appearanceUI-announcement-faint=var(--vvd-color-announcement-50)] */\n  --_connotation-color-faint: var(--vvd-appearanceUI-announcement-faint, var(--vvd-color-announcement-50));\n  /* @cssprop [--vvd-appearanceUI-announcement-soft=var(--vvd-color-announcement-100)] */\n  --_connotation-color-soft: var(--vvd-appearanceUI-announcement-soft, var(--vvd-color-announcement-100));\n  /* @cssprop [--vvd-appearanceUI-announcement-dim=var(--vvd-color-announcement-200)] */\n  --_connotation-color-dim: var(--vvd-appearanceUI-announcement-dim, var(--vvd-color-announcement-200));\n  /* @cssprop [--vvd-appearanceUI-announcement-pale=var(--vvd-color-announcement-300)] */\n  --_connotation-color-pale: var(--vvd-appearanceUI-announcement-pale, var(--vvd-color-announcement-300));\n  /* @cssprop [--vvd-appearanceUI-announcement-light=var(--vvd-color-announcement-400)] */\n  --_connotation-color-light: var(--vvd-appearanceUI-announcement-light, var(--vvd-color-announcement-400));\n  /* @cssprop [--vvd-appearanceUI-announcement-primary=var(--vvd-color-announcement-500)] */\n  --_connotation-color-primary: var(--vvd-appearanceUI-announcement-primary, var(--vvd-color-announcement-500));\n  /* @cssprop [--vvd-appearanceUI-announcement-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-appearanceUI-announcement-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-appearanceUI-announcement-primary-increment=var(--vvd-color-announcement-600)] */\n  --_connotation-color-primary-increment: var(--vvd-appearanceUI-announcement-primary-increment, var(--vvd-color-announcement-600));\n  /* @cssprop [--vvd-appearanceUI-announcement-firm=var(--vvd-color-announcement-600)] */\n  --_connotation-color-firm: var(--vvd-appearanceUI-announcement-firm, var(--vvd-color-announcement-600));\n  /* @cssprop [--vvd-appearanceUI-announcement-fierce=var(--vvd-color-announcement-700)] */\n  --_connotation-color-fierce: var(--vvd-appearanceUI-announcement-fierce, var(--vvd-color-announcement-700));\n  /* @cssprop [--vvd-appearanceUI-announcement-contrast=var(--vvd-color-announcement-800)] */\n  --_connotation-color-contrast: var(--vvd-appearanceUI-announcement-contrast, var(--vvd-color-announcement-800));\n  /* @cssprop [--vvd-appearanceUI-announcement-backdrop=var(--vvd-color-announcement-50)] */\n  --_connotation-color-backdrop: var(--vvd-appearanceUI-announcement-backdrop, var(--vvd-color-announcement-50));\n  /* @cssprop [--vvd-appearanceUI-announcement-intermediate=var(--vvd-color-announcement-500)] */\n  --_connotation-color-intermediate: var(--vvd-appearanceUI-announcement-intermediate, var(--vvd-color-announcement-500));\n}\n.base:not(.connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-information, .connotation-announcement) {\n  /* @cssprop [--vvd-appearanceUI-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-appearanceUI-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-appearanceUI-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-appearanceUI-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-appearanceUI-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-appearanceUI-accent-dim, var(--vvd-color-neutral-200));\n  /* @cssprop [--vvd-appearanceUI-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-appearanceUI-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-appearanceUI-accent-light=var(--vvd-color-neutral-400)] */\n  --_connotation-color-light: var(--vvd-appearanceUI-accent-light, var(--vvd-color-neutral-400));\n  /* @cssprop [--vvd-appearanceUI-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-appearanceUI-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-appearanceUI-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-appearanceUI-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-appearanceUI-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-appearanceUI-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-appearanceUI-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-appearanceUI-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-appearanceUI-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-appearanceUI-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-appearanceUI-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-appearanceUI-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-appearanceUI-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-appearanceUI-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-appearanceUI-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-appearanceUI-accent-intermediate, var(--vvd-color-neutral-500));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base.appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base.appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base.appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base.appearance-fieldset {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-listitem {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-fieldset {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-listitem {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-fieldset {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-listitem {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-outlined {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: notset;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-fieldset {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-listitem {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-outlined {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: notset;\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-fieldset {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-listitem {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: notset;\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: notset;\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-fieldset {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-listitem {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: notset;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: notset;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-fieldset {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-listitem {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled).appearance-outlined {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-duotone {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--vvd-color-neutral-100);\n}\n.base:where(:disabled, .disabled).appearance-subtle {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled).appearance-fieldset {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-listitem {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-outlined {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: notset;\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-duotone {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: notset;\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-subtle {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: notset;\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-fieldset {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-listitem {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-neutral-800);\n  --_appearance-color-fill: var(--vvd-color-neutral-500);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-600);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-outlined {\n  --_appearance-color-text: var(--vvd-color-neutral-600);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-duotone {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: notset;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-subtle {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: notset;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-fieldset {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-listitem {\n  --_appearance-color-text: var(--vvd-color-neutral-600);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class AppearanceUi extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.hovered = false;
+    this.active = false;
+    this.selected = false;
+    this.disabled = false;
+    this.readonly = false;
+  }
+}
+__decorateClass([
+  attr
+], AppearanceUi.prototype, "appearance", 2);
+__decorateClass([
+  attr({
+    mode: "boolean",
+    attribute: "hovered"
+  })
+], AppearanceUi.prototype, "hovered", 2);
+__decorateClass([
+  attr({
+    mode: "boolean",
+    attribute: "active"
+  })
+], AppearanceUi.prototype, "active", 2);
+__decorateClass([
+  attr({
+    mode: "boolean",
+    attribute: "selected"
+  })
+], AppearanceUi.prototype, "selected", 2);
+__decorateClass([
+  attr({
+    mode: "boolean",
+    attribute: "disabled"
+  })
+], AppearanceUi.prototype, "disabled", 2);
+__decorateClass([
+  attr({
+    mode: "boolean",
+    attribute: "readonly"
+  })
+], AppearanceUi.prototype, "readonly", 2);
+__decorateClass([
+  attr
+], AppearanceUi.prototype, "text", 2);
+
+const getClasses = ({ appearance, hovered, active, selected, disabled, readonly }) => classNames(
+  "base",
+  [`appearance-${appearance}`, Boolean(appearance)],
+  ["hover", Boolean(hovered)],
+  ["active", Boolean(active)],
+  ["checked selected", Boolean(selected)],
+  ["disabled", Boolean(disabled)],
+  ["readonly", Boolean(readonly)]
+);
+const AppearanceUiTemplate = () => {
+  return html` <div class="wrapper">
+		<span class="${getClasses} connotation-accent">accent</span>
+		<span class="${getClasses} connotation-cta">cta</span>
+		<span class="${getClasses} connotation-success">success</span>
+		<span class="${getClasses} connotation-alert">alert</span>
+		<span class="${getClasses} connotation-warning">warning</span>
+		<span class="${getClasses} connotation-information">information</span>
+		<span class="${getClasses} connotation-announcement">announcement</span>
+	</div>
+	`;
+};
+
+const appearanceUiDefinition = AppearanceUi.compose({
+  baseName: "appearance-ui",
+  template: AppearanceUiTemplate,
+  styles
+});
+const appearanceUiRegistries = [appearanceUiDefinition()];
+const registerAppearanceUi = registerFactory(appearanceUiRegistries);
+
+registerAppearanceUi();