@vonage/vivid 3.46.0 → 3.48.0

package/appearance-ui/index.js

@@ -1,7 +1,7 @@
 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, 15 Jan 2024 13:38:12 GMT\n */\n.wrapper {\n  display: grid;\n  column-gap: 8px;\n  grid-template-columns: repeat(7, auto);\n}\n\n.base {\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: 40px;\n  border-radius: 8px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  padding-inline: 16px;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-appearanceUI-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-appearanceUI-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-appearanceUI-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-appearanceUI-cta-soft, var(--vvd-color-cta-100));\n  /* @cssprop [--vvd-appearanceUI-cta-dim=var(--vvd-color-cta-200)] */\n  --_connotation-color-dim: var(--vvd-appearanceUI-cta-dim, var(--vvd-color-cta-200));\n  /* @cssprop [--vvd-appearanceUI-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-appearanceUI-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-appearanceUI-cta-light=var(--vvd-color-cta-400)] */\n  --_connotation-color-light: var(--vvd-appearanceUI-cta-light, var(--vvd-color-cta-400));\n  /* @cssprop [--vvd-appearanceUI-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-appearanceUI-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-appearanceUI-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-appearanceUI-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-appearanceUI-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-appearanceUI-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-appearanceUI-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-appearanceUI-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-appearanceUI-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-appearanceUI-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-appearanceUI-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-appearanceUI-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-appearanceUI-cta-backdrop=var(--vvd-color-cta-50)] */\n  --_connotation-color-backdrop: var(--vvd-appearanceUI-cta-backdrop, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-appearanceUI-cta-intermediate=var(--vvd-color-cta-500)] */\n  --_connotation-color-intermediate: var(--vvd-appearanceUI-cta-intermediate, var(--vvd-color-cta-500));\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-appearanceUI-success-faint=var(--vvd-color-success-50)] */\n  --_connotation-color-faint: var(--vvd-appearanceUI-success-faint, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-appearanceUI-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-appearanceUI-success-soft, var(--vvd-color-success-100));\n  /* @cssprop [--vvd-appearanceUI-success-dim=var(--vvd-color-success-200)] */\n  --_connotation-color-dim: var(--vvd-appearanceUI-success-dim, var(--vvd-color-success-200));\n  /* @cssprop [--vvd-appearanceUI-success-pale=var(--vvd-color-success-300)] */\n  --_connotation-color-pale: var(--vvd-appearanceUI-success-pale, var(--vvd-color-success-300));\n  /* @cssprop [--vvd-appearanceUI-success-light=var(--vvd-color-success-400)] */\n  --_connotation-color-light: var(--vvd-appearanceUI-success-light, var(--vvd-color-success-400));\n  /* @cssprop [--vvd-appearanceUI-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-appearanceUI-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-appearanceUI-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-appearanceUI-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-appearanceUI-success-primary-increment=var(--vvd-color-success-600)] */\n  --_connotation-color-primary-increment: var(--vvd-appearanceUI-success-primary-increment, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-appearanceUI-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-appearanceUI-success-firm, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-appearanceUI-success-fierce=var(--vvd-color-success-700)] */\n  --_connotation-color-fierce: var(--vvd-appearanceUI-success-fierce, var(--vvd-color-success-700));\n  /* @cssprop [--vvd-appearanceUI-success-contrast=var(--vvd-color-success-800)] */\n  --_connotation-color-contrast: var(--vvd-appearanceUI-success-contrast, var(--vvd-color-success-800));\n  /* @cssprop [--vvd-appearanceUI-success-backdrop=var(--vvd-color-success-50)] */\n  --_connotation-color-backdrop: var(--vvd-appearanceUI-success-backdrop, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-appearanceUI-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-appearanceUI-success-intermediate, var(--vvd-color-success-500));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-appearanceUI-alert-faint=var(--vvd-color-alert-50)] */\n  --_connotation-color-faint: var(--vvd-appearanceUI-alert-faint, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-appearanceUI-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-appearanceUI-alert-soft, var(--vvd-color-alert-100));\n  /* @cssprop [--vvd-appearanceUI-alert-dim=var(--vvd-color-alert-200)] */\n  --_connotation-color-dim: var(--vvd-appearanceUI-alert-dim, var(--vvd-color-alert-200));\n  /* @cssprop [--vvd-appearanceUI-alert-pale=var(--vvd-color-alert-300)] */\n  --_connotation-color-pale: var(--vvd-appearanceUI-alert-pale, var(--vvd-color-alert-300));\n  /* @cssprop [--vvd-appearanceUI-alert-light=var(--vvd-color-alert-400)] */\n  --_connotation-color-light: var(--vvd-appearanceUI-alert-light, var(--vvd-color-alert-400));\n  /* @cssprop [--vvd-appearanceUI-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-appearanceUI-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-appearanceUI-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-appearanceUI-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-appearanceUI-alert-primary-increment=var(--vvd-color-alert-600)] */\n  --_connotation-color-primary-increment: var(--vvd-appearanceUI-alert-primary-increment, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-appearanceUI-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-appearanceUI-alert-firm, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-appearanceUI-alert-fierce=var(--vvd-color-alert-700)] */\n  --_connotation-color-fierce: var(--vvd-appearanceUI-alert-fierce, var(--vvd-color-alert-700));\n  /* @cssprop [--vvd-appearanceUI-alert-contrast=var(--vvd-color-alert-800)] */\n  --_connotation-color-contrast: var(--vvd-appearanceUI-alert-contrast, var(--vvd-color-alert-800));\n  /* @cssprop [--vvd-appearanceUI-alert-backdrop=var(--vvd-color-alert-50)] */\n  --_connotation-color-backdrop: var(--vvd-appearanceUI-alert-backdrop, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-appearanceUI-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-appearanceUI-alert-intermediate, var(--vvd-color-alert-500));\n}\n.base.connotation-warning {\n  /* @cssprop [--vvd-appearanceUI-warning-faint=var(--vvd-color-warning-50)] */\n  --_connotation-color-faint: var(--vvd-appearanceUI-warning-faint, var(--vvd-color-warning-50));\n  /* @cssprop [--vvd-appearanceUI-warning-soft=var(--vvd-color-warning-100)] */\n  --_connotation-color-soft: var(--vvd-appearanceUI-warning-soft, var(--vvd-color-warning-100));\n  /* @cssprop [--vvd-appearanceUI-warning-dim=var(--vvd-color-warning-200)] */\n  --_connotation-color-dim: var(--vvd-appearanceUI-warning-dim, var(--vvd-color-warning-200));\n  /* @cssprop [--vvd-appearanceUI-warning-pale=var(--vvd-color-warning-300)] */\n  --_connotation-color-pale: var(--vvd-appearanceUI-warning-pale, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-appearanceUI-warning-light=var(--vvd-color-warning-400)] */\n  --_connotation-color-light: var(--vvd-appearanceUI-warning-light, var(--vvd-color-warning-400));\n  /* @cssprop [--vvd-appearanceUI-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-appearanceUI-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-appearanceUI-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-appearanceUI-warning-primary-text, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-appearanceUI-warning-primary-increment=var(--vvd-color-warning-600)] */\n  --_connotation-color-primary-increment: var(--vvd-appearanceUI-warning-primary-increment, var(--vvd-color-warning-600));\n  /* @cssprop [--vvd-appearanceUI-warning-firm=var(--vvd-color-warning-600)] */\n  --_connotation-color-firm: var(--vvd-appearanceUI-warning-firm, var(--vvd-color-warning-600));\n  /* @cssprop [--vvd-appearanceUI-warning-fierce=var(--vvd-color-warning-700)] */\n  --_connotation-color-fierce: var(--vvd-appearanceUI-warning-fierce, var(--vvd-color-warning-700));\n  /* @cssprop [--vvd-appearanceUI-warning-contrast=var(--vvd-color-warning-800)] */\n  --_connotation-color-contrast: var(--vvd-appearanceUI-warning-contrast, var(--vvd-color-warning-800));\n  /* @cssprop [--vvd-appearanceUI-warning-backdrop=var(--vvd-color-warning-50)] */\n  --_connotation-color-backdrop: var(--vvd-appearanceUI-warning-backdrop, var(--vvd-color-warning-50));\n  /* @cssprop [--vvd-appearanceUI-warning-intermediate=var(--vvd-color-warning-300)] */\n  --_connotation-color-intermediate: var(--vvd-appearanceUI-warning-intermediate, var(--vvd-color-warning-300));\n}\n.base.connotation-information {\n  /* @cssprop [--vvd-appearanceUI-information-faint=var(--vvd-color-information-50)] */\n  --_connotation-color-faint: var(--vvd-appearanceUI-information-faint, var(--vvd-color-information-50));\n  /* @cssprop [--vvd-appearanceUI-information-soft=var(--vvd-color-information-100)] */\n  --_connotation-color-soft: var(--vvd-appearanceUI-information-soft, var(--vvd-color-information-100));\n  /* @cssprop [--vvd-appearanceUI-information-dim=var(--vvd-color-information-200)] */\n  --_connotation-color-dim: var(--vvd-appearanceUI-information-dim, var(--vvd-color-information-200));\n  /* @cssprop [--vvd-appearanceUI-information-pale=var(--vvd-color-information-300)] */\n  --_connotation-color-pale: var(--vvd-appearanceUI-information-pale, var(--vvd-color-information-300));\n  /* @cssprop [--vvd-appearanceUI-information-light=var(--vvd-color-information-400)] */\n  --_connotation-color-light: var(--vvd-appearanceUI-information-light, var(--vvd-color-information-400));\n  /* @cssprop [--vvd-appearanceUI-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-appearanceUI-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-appearanceUI-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-appearanceUI-information-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-appearanceUI-information-primary-increment=var(--vvd-color-information-600)] */\n  --_connotation-color-primary-increment: var(--vvd-appearanceUI-information-primary-increment, var(--vvd-color-information-600));\n  /* @cssprop [--vvd-appearanceUI-information-firm=var(--vvd-color-information-600)] */\n  --_connotation-color-firm: var(--vvd-appearanceUI-information-firm, var(--vvd-color-information-600));\n  /* @cssprop [--vvd-appearanceUI-information-fierce=var(--vvd-color-information-700)] */\n  --_connotation-color-fierce: var(--vvd-appearanceUI-information-fierce, var(--vvd-color-information-700));\n  /* @cssprop [--vvd-appearanceUI-information-contrast=var(--vvd-color-information-800)] */\n  --_connotation-color-contrast: var(--vvd-appearanceUI-information-contrast, var(--vvd-color-information-800));\n  /* @cssprop [--vvd-appearanceUI-information-backdrop=var(--vvd-color-information-50)] */\n  --_connotation-color-backdrop: var(--vvd-appearanceUI-information-backdrop, var(--vvd-color-information-50));\n  /* @cssprop [--vvd-appearanceUI-information-intermediate=var(--vvd-color-information-500)] */\n  --_connotation-color-intermediate: var(--vvd-appearanceUI-information-intermediate, var(--vvd-color-information-500));\n}\n.base.connotation-announcement {\n  /* @cssprop [--vvd-appearanceUI-announcement-faint=var(--vvd-color-announcement-50)] */\n  --_connotation-color-faint: var(--vvd-appearanceUI-announcement-faint, var(--vvd-color-announcement-50));\n  /* @cssprop [--vvd-appearanceUI-announcement-soft=var(--vvd-color-announcement-100)] */\n  --_connotation-color-soft: var(--vvd-appearanceUI-announcement-soft, var(--vvd-color-announcement-100));\n  /* @cssprop [--vvd-appearanceUI-announcement-dim=var(--vvd-color-announcement-200)] */\n  --_connotation-color-dim: var(--vvd-appearanceUI-announcement-dim, var(--vvd-color-announcement-200));\n  /* @cssprop [--vvd-appearanceUI-announcement-pale=var(--vvd-color-announcement-300)] */\n  --_connotation-color-pale: var(--vvd-appearanceUI-announcement-pale, var(--vvd-color-announcement-300));\n  /* @cssprop [--vvd-appearanceUI-announcement-light=var(--vvd-color-announcement-400)] */\n  --_connotation-color-light: var(--vvd-appearanceUI-announcement-light, var(--vvd-color-announcement-400));\n  /* @cssprop [--vvd-appearanceUI-announcement-primary=var(--vvd-color-announcement-500)] */\n  --_connotation-color-primary: var(--vvd-appearanceUI-announcement-primary, var(--vvd-color-announcement-500));\n  /* @cssprop [--vvd-appearanceUI-announcement-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-appearanceUI-announcement-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-appearanceUI-announcement-primary-increment=var(--vvd-color-announcement-600)] */\n  --_connotation-color-primary-increment: var(--vvd-appearanceUI-announcement-primary-increment, var(--vvd-color-announcement-600));\n  /* @cssprop [--vvd-appearanceUI-announcement-firm=var(--vvd-color-announcement-600)] */\n  --_connotation-color-firm: var(--vvd-appearanceUI-announcement-firm, var(--vvd-color-announcement-600));\n  /* @cssprop [--vvd-appearanceUI-announcement-fierce=var(--vvd-color-announcement-700)] */\n  --_connotation-color-fierce: var(--vvd-appearanceUI-announcement-fierce, var(--vvd-color-announcement-700));\n  /* @cssprop [--vvd-appearanceUI-announcement-contrast=var(--vvd-color-announcement-800)] */\n  --_connotation-color-contrast: var(--vvd-appearanceUI-announcement-contrast, var(--vvd-color-announcement-800));\n  /* @cssprop [--vvd-appearanceUI-announcement-backdrop=var(--vvd-color-announcement-50)] */\n  --_connotation-color-backdrop: var(--vvd-appearanceUI-announcement-backdrop, var(--vvd-color-announcement-50));\n  /* @cssprop [--vvd-appearanceUI-announcement-intermediate=var(--vvd-color-announcement-500)] */\n  --_connotation-color-intermediate: var(--vvd-appearanceUI-announcement-intermediate, var(--vvd-color-announcement-500));\n}\n.base:not(.connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-information, .connotation-announcement) {\n  /* @cssprop [--vvd-appearanceUI-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-appearanceUI-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-appearanceUI-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-appearanceUI-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-appearanceUI-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-appearanceUI-accent-dim, var(--vvd-color-neutral-200));\n  /* @cssprop [--vvd-appearanceUI-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-appearanceUI-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-appearanceUI-accent-light=var(--vvd-color-neutral-400)] */\n  --_connotation-color-light: var(--vvd-appearanceUI-accent-light, var(--vvd-color-neutral-400));\n  /* @cssprop [--vvd-appearanceUI-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-appearanceUI-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-appearanceUI-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-appearanceUI-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-appearanceUI-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-appearanceUI-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-appearanceUI-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-appearanceUI-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-appearanceUI-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-appearanceUI-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-appearanceUI-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-appearanceUI-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-appearanceUI-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-appearanceUI-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-appearanceUI-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-appearanceUI-accent-intermediate, var(--vvd-color-neutral-500));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base.appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base.appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base.appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base.appearance-fieldset {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-listitem {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-fieldset {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-listitem {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-fieldset {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-listitem {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-outlined {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: notset;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-fieldset {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-listitem {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-outlined {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: notset;\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-fieldset {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-listitem {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: notset;\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: notset;\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-fieldset {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-listitem {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: notset;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: notset;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-fieldset {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-listitem {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled).appearance-outlined {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-duotone {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--vvd-color-neutral-100);\n}\n.base:where(:disabled, .disabled).appearance-subtle {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled).appearance-fieldset {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-listitem {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-outlined {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: notset;\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-duotone {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: notset;\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-subtle {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: notset;\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-fieldset {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-listitem {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-neutral-800);\n  --_appearance-color-fill: var(--vvd-color-neutral-500);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-600);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-outlined {\n  --_appearance-color-text: var(--vvd-color-neutral-600);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-duotone {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: notset;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-subtle {\n  --_appearance-color-text: notset;\n  --_appearance-color-fill: notset;\n  --_appearance-color-outline: notset;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-fieldset {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-listitem {\n  --_appearance-color-text: var(--vvd-color-neutral-600);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}";
+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;background-color:var(--_appearance-color-fill);block-size:40px;border-radius:8px;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-fierce: var(--vvd-appearanceUI-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-contrast: var(--vvd-appearanceUI-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-backdrop: var(--vvd-appearanceUI-cta-backdrop, var(--vvd-color-cta-50));--_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-fierce: var(--vvd-appearanceUI-success-fierce, var(--vvd-color-success-700));--_connotation-color-contrast: var(--vvd-appearanceUI-success-contrast, var(--vvd-color-success-800));--_connotation-color-backdrop: var(--vvd-appearanceUI-success-backdrop, var(--vvd-color-success-50));--_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-fierce: var(--vvd-appearanceUI-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-contrast: var(--vvd-appearanceUI-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-backdrop: var(--vvd-appearanceUI-alert-backdrop, var(--vvd-color-alert-50));--_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-fierce: var(--vvd-appearanceUI-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-contrast: var(--vvd-appearanceUI-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-backdrop: var(--vvd-appearanceUI-warning-backdrop, var(--vvd-color-warning-50));--_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-fierce: var(--vvd-appearanceUI-information-fierce, var(--vvd-color-information-700));--_connotation-color-contrast: var(--vvd-appearanceUI-information-contrast, var(--vvd-color-information-800));--_connotation-color-backdrop: var(--vvd-appearanceUI-information-backdrop, var(--vvd-color-information-50));--_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-fierce: var(--vvd-appearanceUI-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-contrast: var(--vvd-appearanceUI-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-backdrop: var(--vvd-appearanceUI-announcement-backdrop, var(--vvd-color-announcement-50));--_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-fierce: var(--vvd-appearanceUI-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-contrast: var(--vvd-appearanceUI-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-backdrop: var(--vvd-appearanceUI-accent-backdrop, var(--vvd-color-canvas));--_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{--_appearance-color-text: var(--_connotation-color-primary);--_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);--_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(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-listitem{--_appearance-color-text: var(--_connotation-color-primary);--_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-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_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);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.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(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-primary);--_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-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_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);--_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(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(:active,.active):where(:not(:disabled,.disabled)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):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,[aria-current]):where(:not(:disabled,.disabled)).appearance-outlined{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected,[aria-current]):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,[aria-current]):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,[aria-current]):where(:not(:disabled,.disabled)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-dim);--_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-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);--_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-primary);--_appearance-color-fill: var(--_connotation-color-dim);--_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-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);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.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)}.base:where(:checked,.checked):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected,[aria-current]):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,[aria-current]):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,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(.selected,[aria-current]):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,[aria-current]):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)}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-listitem{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-pale);--_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-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,[aria-current]):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,[aria-current]):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,[aria-current]):where(:disabled,.disabled).appearance-outlined{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected,[aria-current]):where(:disabled,.disabled).appearance-duotone{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected,[aria-current]):where(:disabled,.disabled).appearance-subtle{--_appearance-color-text: notset;--_appearance-color-fill: notset;--_appearance-color-outline: notset}.base:where(.selected,[aria-current]):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,[aria-current]):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-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}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/audio-player/index.js

@@ -19,7 +19,6 @@ import '../shared/key-codes.js';
 import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
-import '../shared/focus2.js';
 import '../shared/enums.js';
 import '../shared/definition44.js';
 import '../shared/direction.js';

package/banner/index.js

@@ -19,7 +19,6 @@ import '../shared/key-codes.js';
 import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
-import '../shared/focus2.js';
 import '../shared/enums.js';
 import '../shared/index2.js';
 import '../locales/en-US.js';

package/breadcrumb-item/index.js

@@ -16,6 +16,5 @@ import '../shared/ref.js';
 import '../shared/text-anchor.template.js';
 import '../shared/affix.js';
 import '../shared/slotted.js';
-import '../shared/focus2.js';
 
 registerBreadcrumbItem();

package/button/index.js

@@ -18,7 +18,6 @@ import '../shared/key-codes.js';
 import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
-import '../shared/focus2.js';
 import '../shared/enums.js';
 
 registerButton();

package/combobox/index.js

@@ -20,11 +20,11 @@ import '../shared/key-codes.js';
 import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
-import '../shared/focus2.js';
 import '../shared/enums.js';
 import '../shared/definition59.js';
 import '../shared/definition35.js';
 import '../shared/dom.js';
+import '../shared/focus2.js';
 import '../shared/index2.js';
 import '../locales/en-US.js';
 import '../shared/text-field.js';

package/custom-elements.json

@@ -114,6 +114,10 @@
             {
               "description": "Default slot.",
               "name": ""
+            },
+            {
+              "description": "Add an icon to the component.",
+              "name": "icon"
             }
           ],
           "members": [
@@ -1985,6 +1989,12 @@
               "default": "var(--vvd-color-canvas-text)"
             }
           ],
+          "slots": [
+            {
+              "description": "Add an icon to the component.",
+              "name": "icon"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -2192,6 +2202,10 @@
             {
               "description": "Add action items to banner using this slot.",
               "name": "action-items"
+            },
+            {
+              "description": "Add an icon to the component.",
+              "name": "icon"
             }
           ],
           "members": [
@@ -2663,6 +2677,12 @@
               "default": "var(--vvd-color-neutral-50)"
             }
           ],
+          "slots": [
+            {
+              "description": "Add an icon to the component.",
+              "name": "icon"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -4780,19 +4800,6 @@
                 "module": "libs/components/src/shared/date-picker/date-picker-base.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "#isClosingPopup",
-              "privacy": "private",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DatePickerBase",
-                "module": "libs/components/src/shared/date-picker/date-picker-base.ts"
-              }
-            },
             {
               "kind": "method",
               "name": "#openPopupIfPossible",
@@ -4882,6 +4889,16 @@
                 "module": "libs/components/src/shared/date-picker/date-picker-base.ts"
               }
             }
+          ],
+          "events": [
+            {
+              "description": "Event emitted when the clear value changes",
+              "name": "clear-click",
+              "inheritedFrom": {
+                "name": "DatePickerBase",
+                "module": "libs/components/src/shared/date-picker/date-picker-base.ts"
+              }
+            }
           ]
         }
       ],
@@ -5215,19 +5232,6 @@
                 "module": "libs/components/src/shared/date-picker/date-picker-base.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "#isClosingPopup",
-              "privacy": "private",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DatePickerBase",
-                "module": "libs/components/src/shared/date-picker/date-picker-base.ts"
-              }
-            },
             {
               "kind": "method",
               "name": "#openPopupIfPossible",
@@ -5271,6 +5275,14 @@
             {
               "description": "Event emitted when the end value changes",
               "name": "input:end"
+            },
+            {
+              "description": "Event emitted when the clear value changes",
+              "name": "clear-click",
+              "inheritedFrom": {
+                "name": "DatePickerBase",
+                "module": "libs/components/src/shared/date-picker/date-picker-base.ts"
+              }
             }
           ],
           "attributes": [
@@ -7700,6 +7712,10 @@
               "description": "Assign nodes to the `meta` slot to set a badge or an additional icon.",
               "name": "meta"
             },
+            {
+              "description": "Assign nodes to the `meta` slot to set a badge or an additional icon.",
+              "name": "trailing-meta"
+            },
             {
               "description": "Assign a Menu to the `submenu` slot to add a submenu.",
               "name": "submenu"
@@ -7743,6 +7759,13 @@
               "description": "Controls the appearance of the check indicator.",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "trailingMetaSlottedContent",
+              "type": {
+                "text": "HTMLElement[] | undefined"
+              }
+            },
             {
               "kind": "field",
               "name": "#submenuArray",
@@ -7978,6 +8001,10 @@
             {
               "description": "A slot to add additional content to the nav disclosure.",
               "name": "meta"
+            },
+            {
+              "description": "Add an icon to the component.",
+              "name": "icon"
             }
           ],
           "members": [
@@ -8143,6 +8170,10 @@
             {
               "description": "A slot to add additional content to the nav item.",
               "name": "meta"
+            },
+            {
+              "description": "Add an icon to the component.",
+              "name": "icon"
             }
           ],
           "members": [
@@ -8317,6 +8348,10 @@
             {
               "description": "Any slotted content will appear below the headline.",
               "name": ""
+            },
+            {
+              "description": "Add an icon to the component.",
+              "name": "icon"
             }
           ],
           "members": [
@@ -10987,6 +11022,10 @@
             {
               "description": "Default slot.",
               "name": ""
+            },
+            {
+              "description": "Add an icon to the component.",
+              "name": "icon"
             }
           ],
           "members": [
@@ -11846,6 +11885,16 @@
               "description": "sets the initial preferred margin from predefined available options",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "scrollablePanel",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "sets overflow to the tab-panel",
+              "privacy": "public"
+            },
             {
               "kind": "method",
               "name": "connotationChanged"
@@ -11947,6 +11996,15 @@
               },
               "description": "sets the initial preferred margin from predefined available options",
               "fieldName": "gutters"
+            },
+            {
+              "name": "scrollable-panel",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "sets overflow to the tab-panel",
+              "fieldName": "scrollablePanel"
             }
           ],
           "superclass": {
@@ -12104,6 +12162,12 @@
               "default": "var(--vvd-color-neutral-200)"
             }
           ],
+          "slots": [
+            {
+              "description": "Add an icon to the component.",
+              "name": "icon"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -12438,6 +12502,12 @@
           "kind": "class",
           "description": "Base class for text-anchor",
           "name": "TextAnchor",
+          "slots": [
+            {
+              "description": "Add an icon to the component.",
+              "name": "icon"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -13361,6 +13431,10 @@
             {
               "description": "To specify a child tree item.",
               "name": "item"
+            },
+            {
+              "description": "Add an icon to the component.",
+              "name": "icon"
             }
           ],
           "members": [
@@ -13623,15 +13697,6 @@
               "name": "#dismissOnClickOutside",
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "#isClosingPopup",
-              "privacy": "private",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
             {
               "kind": "method",
               "name": "#openPopupIfPossible"
@@ -13655,6 +13720,12 @@
               "default": "''"
             }
           ],
+          "events": [
+            {
+              "description": "Event emitted when the clear value changes",
+              "name": "clear-click"
+            }
+          ],
           "attributes": [
             {
               "type": {

package/date-picker/index.js

@@ -20,7 +20,6 @@ import '../shared/key-codes.js';
 import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
-import '../shared/focus2.js';
 import '../shared/enums.js';
 import '../shared/definition59.js';
 import '../shared/definition53.js';
@@ -29,6 +28,7 @@ import '../locales/en-US.js';
 import '../shared/Reflector.js';
 import '../shared/text-field2.js';
 import '../shared/text-field.js';
+import '../shared/focus2.js';
 import '../shared/definition21.js';
 import '../shared/aria.js';
 import '../shared/presentationDate.js';

package/date-range-picker/index.js

@@ -19,7 +19,6 @@ import '../shared/key-codes.js';
 import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
-import '../shared/focus2.js';
 import '../shared/enums.js';
 import '../shared/definition60.js';
 import '../shared/definition59.js';
@@ -29,6 +28,7 @@ import '../locales/en-US.js';
 import '../shared/Reflector.js';
 import '../shared/text-field2.js';
 import '../shared/text-field.js';
+import '../shared/focus2.js';
 import '../shared/definition21.js';
 import '../shared/aria.js';
 import '../shared/presentationDate.js';

package/dialog/index.js

@@ -19,11 +19,11 @@ import '../shared/key-codes.js';
 import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
-import '../shared/focus2.js';
 import '../shared/enums.js';
 import '../shared/definition59.js';
 import '../shared/index2.js';
 import '../locales/en-US.js';
 import '../shared/localized.js';
+import '../shared/focus2.js';
 
 registerDialog();

package/file-picker/index.js

@@ -19,10 +19,10 @@ import '../shared/key-codes.js';
 import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
-import '../shared/focus2.js';
 import '../shared/enums.js';
 import '../shared/index2.js';
 import '../locales/en-US.js';
 import '../shared/localized.js';
+import '../shared/focus2.js';
 
 registerFilePicker();

package/index.js

@@ -67,7 +67,6 @@ import './shared/slotted.js';
 import './shared/apply-mixins.js';
 import './shared/start-end.js';
 import './shared/ref.js';
-import './shared/focus2.js';
 import './shared/when.js';
 import './shared/key-codes.js';
 import './shared/numbers.js';
@@ -82,6 +81,7 @@ import './shared/anchor.js';
 import './shared/text-anchor.template.js';
 import './shared/calendar-event.js';
 import './shared/repeat.js';
+import './shared/focus2.js';
 import './shared/definition60.js';
 import './shared/text-field.js';
 import './shared/listbox.js';

package/lib/menu-item/menu-item.d.ts

@@ -16,6 +16,7 @@ export declare class MenuItem extends FastMenuItem {
     textSecondary?: string;
     checkTrailing: boolean;
     checkedAppearance?: CheckAppearance;
+    trailingMetaSlottedContent?: HTMLElement[];
     constructor();
 }
 export interface MenuItem extends AffixIcon {

package/lib/tabs/tabs.d.ts

@@ -8,6 +8,7 @@ export declare class Tabs extends FoundationTabs {
     tablist?: HTMLElement;
     connotation?: TabsConnotation;
     gutters?: Gutters;
+    scrollablePanel: boolean;
     connotationChanged(): void;
     orientationChanged(): void;
     activeidChanged(oldValue: string, newValue: string): void;

package/listbox/index.js

@@ -62,7 +62,7 @@ const ListboxTemplate = (context) => {
 	`;
 };
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n:host {\n  display: inline-block;\n  inline-size: fit-content;\n}\n\n:host(:focus-within) {\n  outline: none;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.base {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  padding: 4px;\n  background-color: var(--_appearance-color-fill);\n  border-radius: var(--_listbox-border-radius);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  contain: paint;\n  gap: 4px;\n  inline-size: 100%;\n}\n.base {\n  /* @cssprop [--vvd-listbox-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-listbox-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-listbox-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-listbox-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-listbox-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100));\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:not(.orientation-horizontal) {\n  flex-direction: column;\n}\n\n.focus-indicator {\n  pointer-events: none;\n}\n:host(:not(:focus-within)) .focus-indicator {\n  display: none;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n  --_listbox-border-radius: 8px;\n}\n\n.base.shape-pill {\n  --_listbox-border-radius: 24px;\n}\n\n::slotted([role=option]) {\n  border-radius: var(--_listbox-border-radius);\n  contain: content;\n}\n\n.base.disabled ::slotted([role=option]) {\n  --_option-appearance-color-text: var(--_appearance-color-outline);\n  pointer-events: none;\n}";
+const styles = ":host{display:inline-block;inline-size:fit-content}:host(:focus-within){outline:none}:host([disabled]){cursor:not-allowed}.base{position:relative;display:inline-flex;box-sizing:border-box;padding:4px;background-color:var(--_appearance-color-fill);border-radius:var(--_listbox-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint;gap:4px;inline-size:100%}.base{--_connotation-color-backdrop: var(--vvd-listbox-accent-backdrop, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_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: var(--vvd-color-neutral-300)}.base:where(:disabled,.disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:not(.orientation-horizontal){flex-direction:column}.focus-indicator{pointer-events:none}:host(:not(:focus-within)) .focus-indicator{display:none}.base:not(.shape-pill){--_listbox-border-radius: 8px}.base.shape-pill{--_listbox-border-radius: 24px}::slotted([role=option]){border-radius:var(--_listbox-border-radius);contain:content}.base.disabled ::slotted([role=option]){--_option-appearance-color-text: var(--_appearance-color-outline);pointer-events:none}\n";
 
 const listboxDefinition = Listbox.compose({
   baseName: "listbox",

package/menu/index.js

@@ -20,7 +20,6 @@ import '../shared/key-codes.js';
 import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
-import '../shared/focus2.js';
 import '../shared/enums.js';
 import '../shared/definition59.js';
 import '../shared/definition28.js';

package/menu-item/index.js

@@ -16,6 +16,5 @@ import '../shared/direction.js';
 import '../shared/key-codes.js';
 import '../shared/anchored.js';
 import '../shared/dom.js';
-import '../shared/focus2.js';
 
 registerMenuItem();

package/nav-disclosure/index.js

@@ -10,7 +10,6 @@ import '../shared/focus.js';
 import '../shared/affix.js';
 import '../shared/slotted.js';
 import '../shared/apply-mixins.js';
-import '../shared/focus2.js';
 import '../shared/ref.js';
 
 registerNavDisclosure();

package/nav-item/index.js

@@ -16,6 +16,5 @@ import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/text-anchor.template.js';
-import '../shared/focus2.js';
 
 registerNavItem();