@vonage/vivid 3.45.0 → 3.46.0

package/shared/definition4.js

@@ -11,7 +11,7 @@ import { B as Button$1 } from './button.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n.control {\n  position: fixed;\n  z-index: 10;\n  border-radius: 6px;\n  inline-size: max-content;\n  inset-block-end: 0;\n  inset-inline-end: 0;\n  inset-inline-start: 0;\n  margin-block: 16px;\n  margin-inline: auto;\n  max-inline-size: var(--alert-max-inline-size, fit-content);\n  min-inline-size: var(--alert-min-inline-size, 420px);\n  transition: opacity 150ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n}\n.control.placement-top, .control.placement-top-start, .control.placement-top-end {\n  inset-block-end: auto;\n  inset-block-start: 0;\n}\n.control.placement-top-start, .control.placement-bottom-start {\n  right: auto;\n  inset-inline-end: auto;\n  margin-inline: 16px;\n}\n.control.placement-top-end, .control.placement-bottom-end {\n  inset-inline-start: auto;\n  margin-inline: 16px;\n}\n.control:where(.strategy-static) {\n  position: static;\n  margin: 0;\n  inline-size: auto;\n}\n.control:not(.open) {\n  opacity: 0;\n  transform: scale(0.8);\n}\n.control.open {\n  opacity: 1;\n  transform: scale(1);\n}\n\n.base {\n  display: flex;\n  align-items: center;\n  padding: 16px;\n  background-color: var(--vvd-color-neutral-50);\n  border-radius: 6px;\n  color: var(--vvd-color-canvas-text);\n  column-gap: 16px;\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-alert-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-alert-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas));\n}\n.base.connotation-information {\n  /* @cssprop [--vvd-alert-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-alert-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-alert-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-alert-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas));\n}\n.base.connotation-warning {\n  /* @cssprop [--vvd-alert-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-alert-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text));\n}\n.base:not(.connotation-success, .connotation-information, .connotation-alert, .connotation-warning) {\n  /* @cssprop [--vvd-alert-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-alert-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas));\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 .alert-text {\n  margin-inline-end: auto;\n}\n.base .alert-text .headline {\n  font: var(--vvd-typography-base-bold);\n  margin-block-end: 4px;\n}\n.base .alert-text .main-text {\n  font: var(--vvd-typography-base);\n}\n.base .icon {\n  flex-shrink: 0;\n  color: var(--_appearance-color-fill);\n  font-size: 24px;\n  line-height: 1;\n}\n.base .dismiss-button {\n  border-left: 1px solid var(--vvd-color-neutral-200);\n  padding-inline-start: 8px;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n.control {\n  position: fixed;\n  z-index: 10;\n  border-radius: 8px;\n  inline-size: max-content;\n  inset-block-end: 0;\n  inset-inline-end: 0;\n  inset-inline-start: 0;\n  margin-block: 16px;\n  margin-inline: auto;\n  max-inline-size: var(--alert-max-inline-size, fit-content);\n  min-inline-size: var(--alert-min-inline-size, 420px);\n  transition: opacity 150ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n}\n.control.placement-top, .control.placement-top-start, .control.placement-top-end {\n  inset-block-end: auto;\n  inset-block-start: 0;\n}\n.control.placement-top-start, .control.placement-bottom-start {\n  right: auto;\n  inset-inline-end: auto;\n  margin-inline: 16px;\n}\n.control.placement-top-end, .control.placement-bottom-end {\n  inset-inline-start: auto;\n  margin-inline: 16px;\n}\n.control:where(.strategy-static) {\n  position: static;\n  margin: 0;\n  inline-size: auto;\n}\n.control:not(.open) {\n  opacity: 0;\n  transform: scale(0.8);\n}\n.control.open {\n  opacity: 1;\n  transform: scale(1);\n}\n\n.base {\n  display: flex;\n  align-items: center;\n  padding: 16px;\n  background-color: var(--vvd-color-neutral-50);\n  border-radius: 8px;\n  color: var(--vvd-color-canvas-text);\n  column-gap: 16px;\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-alert-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-alert-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas));\n}\n.base.connotation-information {\n  /* @cssprop [--vvd-alert-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-alert-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-alert-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-alert-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas));\n}\n.base.connotation-warning {\n  /* @cssprop [--vvd-alert-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-alert-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text));\n}\n.base:not(.connotation-success, .connotation-information, .connotation-alert, .connotation-warning) {\n  /* @cssprop [--vvd-alert-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-alert-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas));\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 .alert-text {\n  margin-inline-end: auto;\n}\n.base .alert-text .headline {\n  font: var(--vvd-typography-base-bold);\n  margin-block-end: 4px;\n}\n.base .alert-text .main-text {\n  font: var(--vvd-typography-base);\n}\n.base .icon {\n  flex-shrink: 0;\n  color: var(--_appearance-color-fill);\n  font-size: 24px;\n  line-height: 1;\n}\n.base .dismiss-button {\n  border-left: 1px solid var(--vvd-color-neutral-200);\n  padding-inline-start: 8px;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition40.js

@@ -5,7 +5,7 @@ import { f as focusTemplateFactory } from './focus2.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n@supports selector(:focus-visible) {\n  :host(:focus-visible) {\n    outline: none;\n  }\n}\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.base {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  gap: 8px;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-radio-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-radio-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-radio-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-radio-cta-intermediate=var(--vvd-color-cta-500)] */\n  --_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-radio-cta-backdrop=var(--vvd-color-cta-50)] */\n  --_connotation-color-backdrop: var(--vvd-radio-cta-backdrop, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-radio-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-radio-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-radio-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-radio-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-radio-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-radio-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-radio-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-radio-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base.disabled {\n  pointer-events: none;\n}\n\n.control {\n  position: relative;\n  flex-shrink: 0;\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n  border-radius: 50%;\n  box-shadow: inset 0 0 0 2px var(--_appearance-color-outline);\n  inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n}\n.base:not(.checked) .control {\n  background-color: var(--_appearance-color-fill);\n}\n.control::after {\n  position: absolute;\n  background-color: var(--_appearance-color-outline);\n  border-radius: inherit;\n  content: \"\";\n  inset: 5px;\n  opacity: 1;\n  transition: opacity 0.2s;\n}\n.base:not(.checked) .control::after {\n  opacity: 0;\n}\n\nlabel {\n  color: var(--vvd-color-canvas-text);\n  cursor: pointer;\n  font: var(--vvd-typography-base);\n}\n\n.focus-indicator {\n  --focus-inset: -3px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 50%;\n}\n:host(:not(:focus-visible)) .focus-indicator {\n  display: none;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n@supports selector(:focus-visible) {\n  :host(:focus-visible) {\n    outline: none;\n  }\n}\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.base {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  gap: 8px;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-radio-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-radio-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-radio-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-radio-cta-intermediate=var(--vvd-color-cta-500)] */\n  --_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-radio-cta-backdrop=var(--vvd-color-cta-50)] */\n  --_connotation-color-backdrop: var(--vvd-radio-cta-backdrop, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-radio-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-radio-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-radio-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-radio-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-radio-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-radio-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-radio-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-radio-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base.disabled {\n  pointer-events: none;\n}\n\n.control {\n  position: relative;\n  flex-shrink: 0;\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n  border-radius: 50%;\n  box-shadow: inset 0 0 0 2px var(--_appearance-color-outline);\n  inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n}\n.base:not(.checked) .control {\n  background-color: var(--_appearance-color-fill);\n}\n.control::after {\n  position: absolute;\n  background-color: var(--_appearance-color-outline);\n  border-radius: inherit;\n  content: \"\";\n  inset: 5px;\n  opacity: 1;\n  transition: opacity 0.2s;\n}\n.base:not(.checked) .control::after {\n  opacity: 0;\n}\n\nlabel {\n  color: var(--vvd-color-canvas-text);\n  cursor: pointer;\n  font: var(--vvd-typography-base);\n}\n\n.focus-indicator {\n  --focus-inset: -3px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 50%;\n}\n:host(:not(:focus-visible)) .focus-indicator {\n  display: none;\n}";
 
 const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames(
   "base",

package/shared/definition41.js

@@ -515,7 +515,7 @@ __decorate([
 applyMixins(DelegatesARIASelect, DelegatesARIAListbox);
 applyMixins(Select$1, StartEnd, DelegatesARIASelect);
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n@supports selector(:focus-visible) {\n  :host(:focus-visible) {\n    outline: none;\n  }\n}\n:host {\n  display: inline-flex;\n  flex-direction: column;\n  gap: 4px;\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n\n:host([disabled]) {\n  --_low-ink-color: var(--vvd-color-neutral-400);\n  cursor: not-allowed;\n}\n\n.label {\n  color: var(--vvd-color-canvas-text);\n  contain: inline-size;\n  font: var(--vvd-typography-base);\n}\n\n.control {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: var(--_appearance-color-fill);\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  border-radius: var(--_select-control-border-radius);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  gap: 8px;\n  padding-inline: 16px;\n  transition: box-shadow 0.2s, background-color 0.2s;\n}\n.control {\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.control.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\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.control: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.control: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.control: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.control:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.control: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.control.connotation-success {\n  /* @cssprop [--vvd-select-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-select-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-select-success-backdrop=var(--vvd-color-success-50)] */\n  --_connotation-color-backdrop: var(--vvd-select-success-backdrop, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-select-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-select-success-intermediate, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-select-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-select-success-firm, var(--vvd-color-success-600));\n}\n.control.connotation-alert {\n  /* @cssprop [--vvd-select-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-select-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-select-alert-backdrop=var(--vvd-color-alert-50)] */\n  --_connotation-color-backdrop: var(--vvd-select-alert-backdrop, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-select-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-select-alert-intermediate, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-select-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-select-alert-firm, var(--vvd-color-alert-600));\n}\n.control:not(.connotation-success, .connotation-alert) {\n  /* @cssprop [--vvd-select-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-select-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-select-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-select-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-select-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));\n}\n.control-wrapper {\n  position: relative;\n}\n.control:not(.disabled) {\n  cursor: pointer;\n}\n.control.disabled {\n  pointer-events: none;\n}\n.control:not(.shape-pill) {\n  --_select-control-border-radius: 6px;\n}\n.control.shape-pill {\n  --_select-control-border-radius: 24px;\n}\n\n.listbox {\n  display: flex;\n  max-height: var(--select-height, 408px);\n  flex-direction: column;\n  padding: 4px;\n  gap: 2px;\n  overflow-y: auto;\n}\n\n.icon {\n  display: flex;\n  flex-shrink: 0;\n}\n\n.selected-value {\n  display: flex;\n  overflow: hidden;\n  flex-grow: 1;\n  align-items: center;\n  column-gap: 12px;\n  white-space: nowrap;\n}\n.selected-value .text {\n  overflow: hidden;\n  max-inline-size: 100%;\n  text-overflow: ellipsis;\n}\n.selected-value slot[name=icon] {\n  flex: 0 0 20px;\n  font-size: 20px;\n  line-height: 1;\n}\n.control.has-meta .selected-value {\n  padding-inline-end: 8px;\n}\n\n::part(popup-base) {\n  inline-size: max-content;\n  min-inline-size: var(--_select-fixed-width, 100%);\n}\n:host([multiple]) ::part(popup-base) {\n  position: static;\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  border-radius: var(--_select-control-border-radius);\n  pointer-events: none;\n}\n:host(:not(:focus-visible)) .focus-indicator {\n  display: none;\n}\n:host([multiple]) .focus-indicator {\n  --_select-control-border-radius: 6px;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n@supports selector(:focus-visible) {\n  :host(:focus-visible) {\n    outline: none;\n  }\n}\n:host {\n  display: inline-flex;\n  flex-direction: column;\n  gap: 4px;\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n\n:host([disabled]) {\n  --_low-ink-color: var(--vvd-color-neutral-400);\n  cursor: not-allowed;\n}\n\n.label {\n  color: var(--vvd-color-canvas-text);\n  contain: inline-size;\n  font: var(--vvd-typography-base);\n}\n\n.control {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: var(--_appearance-color-fill);\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  border-radius: var(--_select-control-border-radius);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  gap: 8px;\n  padding-inline: 16px;\n  transition: box-shadow 0.2s, background-color 0.2s;\n}\n.control {\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.control.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\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.control: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.control: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.control: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.control:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.control: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.control.connotation-success {\n  /* @cssprop [--vvd-select-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-select-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-select-success-backdrop=var(--vvd-color-success-50)] */\n  --_connotation-color-backdrop: var(--vvd-select-success-backdrop, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-select-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-select-success-intermediate, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-select-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-select-success-firm, var(--vvd-color-success-600));\n}\n.control.connotation-alert {\n  /* @cssprop [--vvd-select-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-select-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-select-alert-backdrop=var(--vvd-color-alert-50)] */\n  --_connotation-color-backdrop: var(--vvd-select-alert-backdrop, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-select-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-select-alert-intermediate, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-select-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-select-alert-firm, var(--vvd-color-alert-600));\n}\n.control:not(.connotation-success, .connotation-alert) {\n  /* @cssprop [--vvd-select-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-select-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-select-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-select-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-select-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));\n}\n.control-wrapper {\n  position: relative;\n}\n.control:not(.disabled) {\n  cursor: pointer;\n}\n.control.disabled {\n  pointer-events: none;\n}\n.control:not(.shape-pill) {\n  --_select-control-border-radius: 8px;\n}\n.control.shape-pill {\n  --_select-control-border-radius: 24px;\n}\n\n.listbox {\n  display: flex;\n  max-height: var(--select-height, 408px);\n  flex-direction: column;\n  padding: 4px;\n  gap: 2px;\n  overflow-y: auto;\n}\n\n.icon {\n  display: flex;\n  flex-shrink: 0;\n}\n\n.selected-value {\n  display: flex;\n  overflow: hidden;\n  flex-grow: 1;\n  align-items: center;\n  column-gap: 12px;\n  white-space: nowrap;\n}\n.selected-value .text {\n  overflow: hidden;\n  max-inline-size: 100%;\n  text-overflow: ellipsis;\n}\n.selected-value slot[name=icon] {\n  flex: 0 0 20px;\n  font-size: 20px;\n  line-height: 1;\n}\n.control.has-meta .selected-value {\n  padding-inline-end: 8px;\n}\n\n::part(popup-base) {\n  inline-size: max-content;\n  min-inline-size: var(--_select-fixed-width, 100%);\n}\n:host([multiple]) ::part(popup-base) {\n  position: static;\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  border-radius: var(--_select-control-border-radius);\n  pointer-events: none;\n}\n:host(:not(:focus-visible)) .focus-indicator {\n  display: none;\n}\n:host([multiple]) .focus-indicator {\n  --_select-control-border-radius: 8px;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition42.js

@@ -8,7 +8,7 @@ import { R as Radio } from './radio.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n@supports selector(:focus-visible) {\n  .base:focus-visible {\n    outline: none;\n  }\n}\n:host {\n  display: flex;\n}\n\n.base {\n  position: relative;\n  padding: var(--selectable-box-spacing, 16px);\n  border: 1px solid var(--_appearance-color-outline);\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  inline-size: 100%;\n  padding-block-start: calc(var(--selectable-box-spacing, 16px) + 36px);\n  text-align: start;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-selectable-box-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-selectable-box-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-selectable-box-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-selectable-box-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-selectable-box-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-selectable-box-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-selectable-box-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-selectable-box-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-selectable-box-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-selectable-box-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-selectable-box-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-selectable-box-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\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(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\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(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\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.tight {\n  overflow: hidden;\n  min-height: calc(var(--selectable-box-spacing, 16px) * 2 + 22px);\n  padding: 0;\n}\n.base.clickable {\n  cursor: pointer;\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  --focus-inset: -1px;\n  pointer-events: none;\n}\n.base:not(:focus-visible) > .focus-indicator {\n  display: none;\n}\n\n.control {\n  position: absolute;\n  inset-block-start: var(--selectable-box-spacing, 16px);\n  inset-inline-end: var(--selectable-box-spacing, 16px);\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n@supports selector(:focus-visible) {\n  .base:focus-visible {\n    outline: none;\n  }\n}\n:host {\n  display: flex;\n}\n\n.base {\n  position: relative;\n  padding: var(--selectable-box-spacing, 16px);\n  border: 1px solid var(--_appearance-color-outline);\n  background-color: var(--_appearance-color-fill);\n  border-radius: 8px;\n  inline-size: 100%;\n  padding-block-start: calc(var(--selectable-box-spacing, 16px) + 36px);\n  text-align: start;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-selectable-box-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-selectable-box-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-selectable-box-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-selectable-box-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-selectable-box-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-selectable-box-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-selectable-box-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-selectable-box-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-selectable-box-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-selectable-box-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-selectable-box-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-selectable-box-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\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(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\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(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\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.tight {\n  overflow: hidden;\n  min-height: calc(var(--selectable-box-spacing, 16px) * 2 + 22px);\n  padding: 0;\n}\n.base.clickable {\n  cursor: pointer;\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  --focus-inset: -1px;\n  pointer-events: none;\n}\n.base:not(:focus-visible) > .focus-indicator {\n  display: none;\n}\n\n.control {\n  position: absolute;\n  inset-block-start: var(--selectable-box-spacing, 16px);\n  inset-inline-end: var(--selectable-box-spacing, 16px);\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition43.js

@@ -57,7 +57,7 @@ __decorateClass([
   })
 ], SideDrawer.prototype, "trailing", 2);
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n  display: block;\n}\n\n.side-drawer-app-content {\n  block-size: 100%;\n}\n\n.control {\n  position: fixed;\n  z-index: 1;\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  inline-size: 280px;\n  inset-block: 0;\n  overflow-y: auto;\n}\n.control[part~=vvd-theme-alternate] {\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  color-scheme: var(--vvd-color-scheme);\n}\n.control.trailing {\n  inset-inline-end: 0;\n}\n.control:not(.open).trailing {\n  transform: translateX(100%);\n}\n.control:not(.open):not(.trailing) {\n  transform: translateX(-100%);\n}\n.control.open:not(.modal).trailing + .side-drawer-app-content {\n  margin-inline-end: var(--side-drawer-app-content-offset, 280px);\n}\n.control.open:not(.modal):not(.trailing) + .side-drawer-app-content {\n  margin-inline-start: var(--side-drawer-app-content-offset, 280px);\n}\n@media (prefers-reduced-motion: no-preference) {\n  .control {\n    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n}\n\n.scrim {\n  background-color: var(--vvd-color-canvas-text, currentColor);\n  opacity: 0.5;\n  position: fixed;\n  inset: 0;\n}\n.scrim:not(.open) {\n  display: none;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n:host {\n  display: block;\n}\n\n.side-drawer-app-content {\n  block-size: 100%;\n}\n\n.control {\n  position: fixed;\n  z-index: 1;\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  inline-size: 280px;\n  inset-block: 0;\n  overflow-y: auto;\n}\n.control[part~=vvd-theme-alternate] {\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  color-scheme: var(--vvd-color-scheme);\n}\n.control.trailing {\n  inset-inline-end: 0;\n}\n.control:not(.open).trailing {\n  transform: translateX(100%);\n}\n.control:not(.open):not(.trailing) {\n  transform: translateX(-100%);\n}\n.control.open:not(.modal).trailing + .side-drawer-app-content {\n  margin-inline-end: var(--side-drawer-app-content-offset, 280px);\n}\n.control.open:not(.modal):not(.trailing) + .side-drawer-app-content {\n  margin-inline-start: var(--side-drawer-app-content-offset, 280px);\n}\n@media (prefers-reduced-motion: no-preference) {\n  .control {\n    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n}\n\n.scrim {\n  background-color: var(--vvd-color-canvas-text, currentColor);\n  opacity: 0.5;\n  position: fixed;\n  inset: 0;\n}\n.scrim:not(.open) {\n  display: none;\n}";
 
 const getClasses = ({
   modal,

package/shared/definition44.js

@@ -495,7 +495,7 @@ function limit(min, max, value) {
     return Math.min(Math.max(value, min), max);
 }
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n  display: inline-block;\n  width: 100%;\n}\n\n:host([orientation=vertical]) {\n  height: 100%;\n  min-height: calc(var(--_thumb-interaction-indicator-size) * 5);\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.control {\n  --_thumb-size: 12px;\n  --_thumb-interaction-indicator-size: 36px;\n  height: var(--_thumb-interaction-indicator-size);\n  cursor: pointer;\n  outline: none;\n  user-select: none;\n}\n.control.connotation-cta {\n  /* @cssprop [--vvd-slider-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500));\n}\n.control:not(.connotation-cta) {\n  /* @cssprop [--vvd-slider-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text));\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n.control .positioning-region {\n  position: relative;\n}\n.control .track {\n  position: absolute;\n  background: var(--_track-background-color);\n  border-radius: 4px;\n}\n.control .track .track-start {\n  position: absolute;\n  left: 0;\n  height: 100%;\n  background: var(--_track-start-background-color);\n  border-radius: 4px;\n}\n.control .thumb-container {\n  position: absolute;\n  width: var(--_thumb-interaction-indicator-size);\n  height: var(--_thumb-interaction-indicator-size);\n  cursor: inherit;\n  touch-action: none;\n}\n.control .thumb-container::before {\n  position: absolute;\n  display: block;\n  width: var(--_thumb-interaction-indicator-size);\n  height: var(--_thumb-interaction-indicator-size);\n  background-color: var(--_track-start-background-color);\n  border-radius: 50%;\n  content: \"\";\n  opacity: var(--_thumb-interaction-indicator-alpha, 0);\n  transition: opacity 0.2s ease-out 0s;\n}\n.control .thumb-container::after {\n  position: absolute;\n  display: block;\n  width: var(--_thumb-size);\n  height: var(--_thumb-size);\n  background-color: var(--_track-start-background-color);\n  border-radius: 50%;\n  content: \"\";\n  inset: calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2);\n}\n.control[aria-orientation=horizontal] {\n  width: calc(100% - var(--_thumb-size));\n  min-width: var(--_thumb-size);\n  margin-left: calc(var(--_thumb-size) / 2);\n}\n.control[aria-orientation=horizontal] .track {\n  top: calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);\n  right: 0;\n  left: 0;\n  height: 2px;\n}\n.control[aria-orientation=horizontal] .track .mark {\n  width: 100%;\n  height: 4px;\n}\n.control[aria-orientation=horizontal] .thumb-container {\n  transform: translateX(calc(var(--_thumb-interaction-indicator-size) / 2));\n}\n.control[aria-orientation=vertical] {\n  height: calc(100% - var(--_thumb-interaction-indicator-size));\n  min-height: var(--_thumb-interaction-indicator-size);\n  margin-top: calc(var(--_thumb-interaction-indicator-size) / 2);\n}\n.control[aria-orientation=vertical] .positioning-region {\n  height: 100%;\n}\n.control[aria-orientation=vertical] .track {\n  left: calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);\n  width: 2px;\n  height: 100%;\n}\n.control[aria-orientation=vertical] .track .mark {\n  width: 4px;\n  height: 100%;\n}\n.control[aria-orientation=vertical] .track-start {\n  top: 0;\n  width: 100%;\n  height: auto;\n}\n.control[aria-orientation=vertical] .thumb-container {\n  transform: translateY(calc(var(--_thumb-interaction-indicator-size) / 2));\n}\n.control.disabled {\n  --_track-background-color: var(--vvd-color-neutral-100);\n  --_track-start-background-color: var(--vvd-color-neutral-500);\n  pointer-events: none;\n}\n.control:not(.disabled) {\n  --_track-background-color: var(--vvd-color-neutral-300);\n  --_track-start-background-color: var(--_appearance-color-fill);\n}\n.control:not(.disabled) .thumb-container:hover {\n  --_thumb-interaction-indicator-alpha: 0.12;\n}\n.control:not(.disabled) .thumb-container:active {\n  --_thumb-interaction-indicator-alpha: 0.25;\n}\n\n.focus-indicator {\n  --focus-inset: -3px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 50%;\n}\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
+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  width: 100%;\n}\n\n:host([orientation=vertical]) {\n  height: 100%;\n  min-height: calc(var(--_thumb-interaction-indicator-size) * 5);\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.control {\n  --_thumb-size: 12px;\n  --_thumb-interaction-indicator-size: 36px;\n  height: var(--_thumb-interaction-indicator-size);\n  cursor: pointer;\n  outline: none;\n  user-select: none;\n}\n.control.connotation-cta {\n  /* @cssprop [--vvd-slider-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500));\n}\n.control:not(.connotation-cta) {\n  /* @cssprop [--vvd-slider-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text));\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n.control .positioning-region {\n  position: relative;\n}\n.control .track {\n  position: absolute;\n  background: var(--_track-background-color);\n  border-radius: 4px;\n}\n.control .track .track-start {\n  position: absolute;\n  left: 0;\n  height: 100%;\n  background: var(--_track-start-background-color);\n  border-radius: 4px;\n}\n.control .thumb-container {\n  position: absolute;\n  width: var(--_thumb-interaction-indicator-size);\n  height: var(--_thumb-interaction-indicator-size);\n  cursor: inherit;\n  touch-action: none;\n}\n.control .thumb-container::before {\n  position: absolute;\n  display: block;\n  width: var(--_thumb-interaction-indicator-size);\n  height: var(--_thumb-interaction-indicator-size);\n  background-color: var(--_track-start-background-color);\n  border-radius: 50%;\n  content: \"\";\n  opacity: var(--_thumb-interaction-indicator-alpha, 0);\n  transition: opacity 0.2s ease-out 0s;\n}\n.control .thumb-container::after {\n  position: absolute;\n  display: block;\n  width: var(--_thumb-size);\n  height: var(--_thumb-size);\n  background-color: var(--_track-start-background-color);\n  border-radius: 50%;\n  content: \"\";\n  inset: calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2);\n}\n.control[aria-orientation=horizontal] {\n  width: calc(100% - var(--_thumb-size));\n  min-width: var(--_thumb-size);\n  margin-left: calc(var(--_thumb-size) / 2);\n}\n.control[aria-orientation=horizontal] .track {\n  top: calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);\n  right: 0;\n  left: 0;\n  height: 2px;\n}\n.control[aria-orientation=horizontal] .track .mark {\n  width: 100%;\n  height: 4px;\n}\n.control[aria-orientation=horizontal] .thumb-container {\n  transform: translateX(calc(var(--_thumb-interaction-indicator-size) / 2));\n}\n.control[aria-orientation=vertical] {\n  height: calc(100% - var(--_thumb-interaction-indicator-size));\n  min-height: var(--_thumb-interaction-indicator-size);\n  margin-top: calc(var(--_thumb-interaction-indicator-size) / 2);\n}\n.control[aria-orientation=vertical] .positioning-region {\n  height: 100%;\n}\n.control[aria-orientation=vertical] .track {\n  left: calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);\n  width: 2px;\n  height: 100%;\n}\n.control[aria-orientation=vertical] .track .mark {\n  width: 4px;\n  height: 100%;\n}\n.control[aria-orientation=vertical] .track-start {\n  top: 0;\n  width: 100%;\n  height: auto;\n}\n.control[aria-orientation=vertical] .thumb-container {\n  transform: translateY(calc(var(--_thumb-interaction-indicator-size) / 2));\n}\n.control.disabled {\n  --_track-background-color: var(--vvd-color-neutral-100);\n  --_track-start-background-color: var(--vvd-color-neutral-500);\n  pointer-events: none;\n}\n.control:not(.disabled) {\n  --_track-background-color: var(--vvd-color-neutral-300);\n  --_track-start-background-color: var(--_appearance-color-fill);\n}\n.control:not(.disabled) .thumb-container:hover {\n  --_thumb-interaction-indicator-alpha: 0.12;\n}\n.control:not(.disabled) .thumb-container:active {\n  --_thumb-interaction-indicator-alpha: 0.25;\n}\n\n.focus-indicator {\n  --focus-inset: -3px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 50%;\n}\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition45.js

@@ -71,7 +71,7 @@ __decorateClass([
 ], SplitButton.prototype, "indicatorAriaLabel", 2);
 applyMixins(SplitButton, AffixIcon, Localized);
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  display: inline-flex;\n  justify-content: flex-start;\n  inline-size: inherit;\n}\n\n.control,\n.indicator {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: 1px solid var(--_appearance-color-outline);\n  margin: 0;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_split-button-block-size);\n  color: var(--_appearance-color-text);\n  vertical-align: middle;\n}\n.control.connotation-cta,\n.indicator.connotation-cta {\n  /* @cssprop [--vvd-split-button-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-split-button-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-split-button-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-split-button-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-split-button-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-split-button-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-split-button-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-split-button-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-split-button-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-split-button-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-split-button-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-split-button-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-split-button-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-split-button-cta-soft, var(--vvd-color-cta-100));\n  /* @cssprop [--vvd-split-button-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-split-button-cta-faint, var(--vvd-color-cta-50));\n}\n.control.connotation-success,\n.indicator.connotation-success {\n  /* @cssprop [--vvd-split-button-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-split-button-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-split-button-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-split-button-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-split-button-success-primary-increment=var(--vvd-color-success-600)] */\n  --_connotation-color-primary-increment: var(--vvd-split-button-success-primary-increment, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-split-button-success-contrast=var(--vvd-color-success-800)] */\n  --_connotation-color-contrast: var(--vvd-split-button-success-contrast, var(--vvd-color-success-800));\n  /* @cssprop [--vvd-split-button-success-fierce=var(--vvd-color-success-700)] */\n  --_connotation-color-fierce: var(--vvd-split-button-success-fierce, var(--vvd-color-success-700));\n  /* @cssprop [--vvd-split-button-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-split-button-success-firm, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-split-button-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-split-button-success-soft, var(--vvd-color-success-100));\n  /* @cssprop [--vvd-split-button-success-faint=var(--vvd-color-success-50)] */\n  --_connotation-color-faint: var(--vvd-split-button-success-faint, var(--vvd-color-success-50));\n}\n.control.connotation-alert,\n.indicator.connotation-alert {\n  /* @cssprop [--vvd-split-button-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-split-button-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-split-button-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-split-button-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-split-button-alert-primary-increment=var(--vvd-color-alert-600)] */\n  --_connotation-color-primary-increment: var(--vvd-split-button-alert-primary-increment, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-split-button-alert-contrast=var(--vvd-color-alert-800)] */\n  --_connotation-color-contrast: var(--vvd-split-button-alert-contrast, var(--vvd-color-alert-800));\n  /* @cssprop [--vvd-split-button-alert-fierce=var(--vvd-color-alert-700)] */\n  --_connotation-color-fierce: var(--vvd-split-button-alert-fierce, var(--vvd-color-alert-700));\n  /* @cssprop [--vvd-split-button-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-split-button-alert-firm, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-split-button-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-split-button-alert-soft, var(--vvd-color-alert-100));\n  /* @cssprop [--vvd-split-button-alert-faint=var(--vvd-color-alert-50)] */\n  --_connotation-color-faint: var(--vvd-split-button-alert-faint, var(--vvd-color-alert-50));\n}\n.control:not(.connotation-cta, .connotation-success, .connotation-alert),\n.indicator:not(.connotation-cta, .connotation-success, .connotation-alert) {\n  /* @cssprop [--vvd-split-button-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-split-button-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-split-button-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-split-button-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-split-button-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-split-button-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-split-button-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-split-button-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-split-button-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-split-button-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-split-button-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-split-button-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-split-button-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-split-button-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-split-button-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-split-button-accent-faint, var(--vvd-color-neutral-50));\n}\n.control.appearance-filled,\n.indicator.appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control.appearance-outlined,\n.indicator.appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control,\n.indicator {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-filled,\n.indicator:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined,\n.indicator:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)),\n.indicator:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled).appearance-filled,\n.indicator:where(:disabled, .disabled).appearance-filled {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled).appearance-outlined,\n.indicator:where(:disabled, .disabled).appearance-outlined {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.control:where(:disabled, .disabled),\n.indicator:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-filled,\n.indicator:where(:active, .active):where(:not(:disabled, .disabled)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-outlined,\n.indicator:where(:active, .active):where(:not(:disabled, .disabled)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)),\n.indicator:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n@supports (user-select: none) {\n  .control,\n  .indicator {\n    user-select: none;\n  }\n}\n\n.control {\n  border-bottom-left-radius: var(--_border-radius);\n  border-inline-end: 0;\n  border-top-left-radius: var(--_border-radius);\n  gap: var(--_split-button-icon-gap);\n  isolation: isolate;\n  /* Disabled */\n  /* size */\n  /* shape */\n}\n.control:focus-visible {\n  outline: none;\n}\n.control:not(:disabled) {\n  cursor: pointer;\n}\n.control:disabled {\n  cursor: not-allowed;\n}\n.control.icon-only {\n  contain: size;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .control.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .control.icon-only {\n    inline-size: var(--_split-button-block-size);\n  }\n}\n.control:not(.icon-only) {\n  flex-grow: 1;\n  inline-size: inherit;\n}\n.control.size-super-condensed {\n  --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.control.size-super-condensed:not(.icon-only) {\n  --_split-button-icon-gap: 4px;\n  padding-inline: 8px;\n}\n.control.size-condensed {\n  --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.control.size-condensed:not(.icon-only) {\n  --_split-button-icon-gap: 8px;\n  padding-inline: 12px;\n}\n.control.size-expanded {\n  --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  font: var(--vvd-typography-base-extended-bold);\n}\n.control.size-expanded:not(.icon-only) {\n  --_split-button-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:not(.size-condensed, .size-expanded, .size-super-condensed) {\n  --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  font: var(--vvd-typography-base-bold);\n}\n.control:not(.size-condensed, .size-expanded, .size-super-condensed):not(.icon-only) {\n  --_split-button-icon-gap: 8px;\n  padding-inline: 16px;\n}\n.control:not(.shape-pill) {\n  --_border-radius: 6px;\n}\n.control:not(.shape-pill).size-super-condensed, .control:not(.shape-pill).super-condensed {\n  --_border-radius: 4px;\n}\n.control.shape-pill {\n  --_border-radius: 24px;\n}\n.control .text {\n  overflow: hidden;\n  max-inline-size: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.indicator {\n  border-bottom-right-radius: var(--_border-radius);\n  border-inline-start: 0;\n  border-top-right-radius: var(--_border-radius);\n  inline-size: var(--_split-button-inline-size);\n  /* Disabled */\n  /* Separator */\n  /* size */\n  /* Shape */\n}\n.indicator:focus-visible {\n  outline: none;\n}\n.indicator:not(:disabled) {\n  cursor: pointer;\n}\n.indicator:disabled {\n  cursor: not-allowed;\n}\n.indicator::before {\n  position: absolute;\n  background-color: var(--_appearance-color-text);\n  content: \"\";\n  inline-size: 1px;\n  inset-inline-start: 0;\n  opacity: 0.35;\n}\n.indicator:not(.appearance-filled, .appearance-outlined)::before {\n  block-size: 50%;\n}\n.indicator:is(.appearance-filled, .appearance-outlined)::before {\n  block-size: 100%;\n}\n.indicator.size-super-condensed {\n  --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n  --_split-button-inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n  font: var(--vvd-typography-base-condensed);\n}\n.indicator.size-condensed {\n  --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n  --_split-button-inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));\n  font: var(--vvd-typography-base-condensed);\n}\n.indicator.size-expanded {\n  --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  --_split-button-inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  font: var(--vvd-typography-base-extended);\n}\n.indicator:not(.size-condensed, .size-expanded, .size-super-condensed) {\n  --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  --_split-button-inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n  font: var(--vvd-typography-base-extended);\n}\n.indicator:not(.shape-pill) {\n  --_border-radius: 6px;\n}\n.indicator:not(.shape-pill).size-super-condensed, .indicator:not(.shape-pill).super-condensed {\n  --_border-radius: 4px;\n}\n.indicator.shape-pill {\n  --_border-radius: 24px;\n}\n\n/* Icon */\n.icon {\n  line-height: 1;\n}\n.icon-trailing .icon {\n  order: 1;\n}\n.control > .icon {\n  font-size: calc(var(--_split-button-block-size) / 2);\n}\n\n/* Focus */\n:not(:focus-visible) > .focus-indicator {\n  display: none;\n}\n.control:not(.appearance-filled) .focus-indicator, .indicator:not(.appearance-filled) .focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}\n.control.appearance-outlined .focus-indicator, .indicator.appearance-outlined .focus-indicator {\n  --focus-inset: -1px;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  display: inline-flex;\n  justify-content: flex-start;\n  inline-size: inherit;\n}\n\n.control,\n.indicator {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: 1px solid var(--_appearance-color-outline);\n  margin: 0;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_split-button-block-size);\n  color: var(--_appearance-color-text);\n  vertical-align: middle;\n}\n.control.connotation-cta,\n.indicator.connotation-cta {\n  /* @cssprop [--vvd-split-button-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-split-button-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-split-button-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-split-button-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-split-button-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-split-button-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-split-button-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-split-button-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-split-button-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-split-button-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-split-button-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-split-button-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-split-button-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-split-button-cta-soft, var(--vvd-color-cta-100));\n  /* @cssprop [--vvd-split-button-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-split-button-cta-faint, var(--vvd-color-cta-50));\n}\n.control.connotation-success,\n.indicator.connotation-success {\n  /* @cssprop [--vvd-split-button-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-split-button-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-split-button-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-split-button-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-split-button-success-primary-increment=var(--vvd-color-success-600)] */\n  --_connotation-color-primary-increment: var(--vvd-split-button-success-primary-increment, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-split-button-success-contrast=var(--vvd-color-success-800)] */\n  --_connotation-color-contrast: var(--vvd-split-button-success-contrast, var(--vvd-color-success-800));\n  /* @cssprop [--vvd-split-button-success-fierce=var(--vvd-color-success-700)] */\n  --_connotation-color-fierce: var(--vvd-split-button-success-fierce, var(--vvd-color-success-700));\n  /* @cssprop [--vvd-split-button-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-split-button-success-firm, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-split-button-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-split-button-success-soft, var(--vvd-color-success-100));\n  /* @cssprop [--vvd-split-button-success-faint=var(--vvd-color-success-50)] */\n  --_connotation-color-faint: var(--vvd-split-button-success-faint, var(--vvd-color-success-50));\n}\n.control.connotation-alert,\n.indicator.connotation-alert {\n  /* @cssprop [--vvd-split-button-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-split-button-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-split-button-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-split-button-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-split-button-alert-primary-increment=var(--vvd-color-alert-600)] */\n  --_connotation-color-primary-increment: var(--vvd-split-button-alert-primary-increment, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-split-button-alert-contrast=var(--vvd-color-alert-800)] */\n  --_connotation-color-contrast: var(--vvd-split-button-alert-contrast, var(--vvd-color-alert-800));\n  /* @cssprop [--vvd-split-button-alert-fierce=var(--vvd-color-alert-700)] */\n  --_connotation-color-fierce: var(--vvd-split-button-alert-fierce, var(--vvd-color-alert-700));\n  /* @cssprop [--vvd-split-button-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-split-button-alert-firm, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-split-button-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-split-button-alert-soft, var(--vvd-color-alert-100));\n  /* @cssprop [--vvd-split-button-alert-faint=var(--vvd-color-alert-50)] */\n  --_connotation-color-faint: var(--vvd-split-button-alert-faint, var(--vvd-color-alert-50));\n}\n.control:not(.connotation-cta, .connotation-success, .connotation-alert),\n.indicator:not(.connotation-cta, .connotation-success, .connotation-alert) {\n  /* @cssprop [--vvd-split-button-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-split-button-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-split-button-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-split-button-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-split-button-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-split-button-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-split-button-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-split-button-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-split-button-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-split-button-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-split-button-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-split-button-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-split-button-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-split-button-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-split-button-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-split-button-accent-faint, var(--vvd-color-neutral-50));\n}\n.control.appearance-filled,\n.indicator.appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control.appearance-outlined,\n.indicator.appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control,\n.indicator {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-filled,\n.indicator:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined,\n.indicator:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)),\n.indicator:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled).appearance-filled,\n.indicator:where(:disabled, .disabled).appearance-filled {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled).appearance-outlined,\n.indicator:where(:disabled, .disabled).appearance-outlined {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.control:where(:disabled, .disabled),\n.indicator:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-filled,\n.indicator:where(:active, .active):where(:not(:disabled, .disabled)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-outlined,\n.indicator:where(:active, .active):where(:not(:disabled, .disabled)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)),\n.indicator:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n@supports (user-select: none) {\n  .control,\n  .indicator {\n    user-select: none;\n  }\n}\n\n.control {\n  border-bottom-left-radius: var(--_border-radius);\n  border-inline-end: 0;\n  border-top-left-radius: var(--_border-radius);\n  gap: var(--_split-button-icon-gap);\n  isolation: isolate;\n  /* Disabled */\n  /* size */\n  /* shape */\n}\n.control:focus-visible {\n  outline: none;\n}\n.control:not(:disabled) {\n  cursor: pointer;\n}\n.control:disabled {\n  cursor: not-allowed;\n}\n.control.icon-only {\n  contain: size;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .control.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .control.icon-only {\n    inline-size: var(--_split-button-block-size);\n  }\n}\n.control:not(.icon-only) {\n  flex-grow: 1;\n  inline-size: inherit;\n}\n.control.size-super-condensed {\n  --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.control.size-super-condensed:not(.icon-only) {\n  --_split-button-icon-gap: 4px;\n  padding-inline: 8px;\n}\n.control.size-condensed {\n  --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.control.size-condensed:not(.icon-only) {\n  --_split-button-icon-gap: 8px;\n  padding-inline: 12px;\n}\n.control.size-expanded {\n  --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  font: var(--vvd-typography-base-extended-bold);\n}\n.control.size-expanded:not(.icon-only) {\n  --_split-button-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:not(.size-condensed, .size-expanded, .size-super-condensed) {\n  --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  font: var(--vvd-typography-base-bold);\n}\n.control:not(.size-condensed, .size-expanded, .size-super-condensed):not(.icon-only) {\n  --_split-button-icon-gap: 8px;\n  padding-inline: 16px;\n}\n.control:not(.shape-pill) {\n  --_border-radius: 8px;\n}\n.control:not(.shape-pill).size-super-condensed, .control:not(.shape-pill).super-condensed {\n  --_border-radius: 4px;\n}\n.control.shape-pill {\n  --_border-radius: 24px;\n}\n.control .text {\n  overflow: hidden;\n  max-inline-size: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.indicator {\n  border-bottom-right-radius: var(--_border-radius);\n  border-inline-start: 0;\n  border-top-right-radius: var(--_border-radius);\n  inline-size: var(--_split-button-inline-size);\n  /* Disabled */\n  /* Separator */\n  /* size */\n  /* Shape */\n}\n.indicator:focus-visible {\n  outline: none;\n}\n.indicator:not(:disabled) {\n  cursor: pointer;\n}\n.indicator:disabled {\n  cursor: not-allowed;\n}\n.indicator::before {\n  position: absolute;\n  background-color: var(--_appearance-color-text);\n  content: \"\";\n  inline-size: 1px;\n  inset-inline-start: 0;\n  opacity: 0.35;\n}\n.indicator:not(.appearance-filled, .appearance-outlined)::before {\n  block-size: 50%;\n}\n.indicator:is(.appearance-filled, .appearance-outlined)::before {\n  block-size: 100%;\n}\n.indicator.size-super-condensed {\n  --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n  --_split-button-inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n  font: var(--vvd-typography-base-condensed);\n}\n.indicator.size-condensed {\n  --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n  --_split-button-inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));\n  font: var(--vvd-typography-base-condensed);\n}\n.indicator.size-expanded {\n  --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  --_split-button-inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  font: var(--vvd-typography-base-extended);\n}\n.indicator:not(.size-condensed, .size-expanded, .size-super-condensed) {\n  --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  --_split-button-inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n  font: var(--vvd-typography-base-extended);\n}\n.indicator:not(.shape-pill) {\n  --_border-radius: 8px;\n}\n.indicator:not(.shape-pill).size-super-condensed, .indicator:not(.shape-pill).super-condensed {\n  --_border-radius: 4px;\n}\n.indicator.shape-pill {\n  --_border-radius: 24px;\n}\n\n/* Icon */\n.icon {\n  line-height: 1;\n}\n.icon-trailing .icon {\n  order: 1;\n}\n.control > .icon {\n  font-size: calc(var(--_split-button-block-size) / 2);\n}\n\n/* Focus */\n:not(:focus-visible) > .focus-indicator {\n  display: none;\n}\n.control:not(.appearance-filled) .focus-indicator, .indicator:not(.appearance-filled) .focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}\n.control.appearance-outlined .focus-indicator, .indicator.appearance-outlined .focus-indicator {\n  --focus-inset: -1px;\n}";
 
 const getClasses = ({
   connotation,
@@ -98,7 +98,11 @@ function actionButton(context) {
 		${ref("_action")}
 		class="control ${getClasses}"
 		aria-label="${(x) => x.ariaLabel}"
-		?disabled="${(x) => x.disabled}">
+		?disabled="${(x) => x.disabled}"
+		@click="${(x) => x.$emit("action-click", void 0, {
+    bubbles: false
+  })}"
+	>
 			${() => focusTemplate}
 			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
 		<span class="text">${(x) => x.label}</span>
@@ -114,8 +118,11 @@ function indicatorButton(context) {
 		class="indicator ${getClasses}"
 		?disabled="${(x) => x.disabled}"
 		aria-label="${(x) => x.indicatorAriaLabel || x.locale.splitButton.showMoreActionsLabel}"
-		aria-haspopup="true"
-		aria-expanded="${(x) => x.ariaExpanded}">
+		aria-expanded="${(x) => x.ariaExpanded}"
+		@click="${(x) => x.$emit("indicator-click", void 0, {
+    bubbles: false
+  })}"
+	>
 			${() => focusTemplate}
 			${(x) => affixIconTemplate(x.splitIndicator)}
 	</button>

package/shared/definition46.js

@@ -99,7 +99,7 @@ __decorate([
     observable
 ], Switch$1.prototype, "defaultSlottedNodes", void 0);
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host(.disabled) {\n  cursor: not-allowed;\n}\n\n.control {\n  display: inline-flex;\n  gap: 8px;\n}\n.control.connotation-cta {\n  /* @cssprop [--vvd-switch-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-switch-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-switch-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-switch-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-switch-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-switch-cta-backdrop=var(--vvd-color-cta-50)] */\n  --_connotation-color-backdrop: var(--vvd-switch-cta-backdrop, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-switch-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-switch-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-switch-cta-intermediate=var(--vvd-color-cta-500)] */\n  --_connotation-color-intermediate: var(--vvd-switch-cta-intermediate, var(--vvd-color-cta-500));\n}\n.control.connotation-alert {\n  /* @cssprop [--vvd-switch-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-switch-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-switch-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-switch-alert-primary-increment=var(--vvd-color-alert-600)] */\n  --_connotation-color-primary-increment: var(--vvd-switch-alert-primary-increment, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-switch-alert-backdrop=var(--vvd-color-alert-50)] */\n  --_connotation-color-backdrop: var(--vvd-switch-alert-backdrop, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-switch-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-switch-alert-firm, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-switch-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-switch-alert-intermediate, var(--vvd-color-alert-500));\n}\n.control.connotation-success {\n  /* @cssprop [--vvd-switch-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-switch-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-switch-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-switch-success-primary-increment=var(--vvd-color-success-600)] */\n  --_connotation-color-primary-increment: var(--vvd-switch-success-primary-increment, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-switch-success-backdrop=var(--vvd-color-success-50)] */\n  --_connotation-color-backdrop: var(--vvd-switch-success-backdrop, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-switch-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-switch-success-firm, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-switch-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-switch-success-intermediate, var(--vvd-color-success-500));\n}\n.control:not(.connotation-cta, .connotation-alert, .connotation-success) {\n  /* @cssprop [--vvd-switch-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-switch-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-switch-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-switch-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-switch-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-switch-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-switch-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-switch-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-switch-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-switch-accent-intermediate, var(--vvd-color-neutral-500));\n}\n.control {\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.control.appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.control:where(: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.control:where(:disabled, .disabled).appearance-filled {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: transparent;\n}\n.control:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.control:where(.readonly):where(:not(:disabled, .disabled)).appearance-filled {\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@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control:not(.disabled) {\n  cursor: pointer;\n}\n.control.disabled {\n  pointer-events: none;\n}\n\n.switch {\n  --_switch-inline-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) * 1.8);\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n  border-radius: 40px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  inline-size: var(--_switch-inline-size);\n  transition: all 0.2s ease-in-out 0s;\n}\n\n.checked-indicator {\n  --_switch-checked-indicator-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) / 1.6667);\n  --_switch-gutter: calc(var(--_switch-checked-indicator-size) / 3);\n  block-size: var(--_switch-checked-indicator-size);\n  border-radius: inherit;\n  inline-size: var(--_switch-checked-indicator-size);\n  margin-inline-start: auto;\n  transition: all 0.2s ease-in-out 0s;\n}\n.control:not(.appearance-filled) .checked-indicator {\n  background-color: var(--_appearance-color-outline);\n}\n.control:not(.appearance-filled):where(.readonly) .checked-indicator {\n  background-color: var(--vvd-color-neutral-600);\n}\n.control.appearance-filled .checked-indicator {\n  background-color: var(--vvd-color-neutral-100);\n}\n.control:not(.checked) .checked-indicator {\n  transform: translateX(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)));\n}\n.control.checked .checked-indicator {\n  transform: translateX(calc(-1 * var(--_switch-gutter)));\n}\n.control.appearance-filled.disabled .checked-indicator {\n  background-color: var(--_appearance-color-text);\n}\n.control.appearance-filled.readonly .checked-indicator {\n  background-color: var(--vvd-color-neutral-50);\n}\n\n.label {\n  color: var(--vvd-color-canvas-text);\n  cursor: pointer;\n  font: var(--vvd-typography-base);\n}\n\n.focus-indicator {\n  --focus-inset: -4px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 14px;\n}\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n:host(.disabled) {\n  cursor: not-allowed;\n}\n\n.control {\n  display: inline-flex;\n  gap: 8px;\n}\n.control.connotation-cta {\n  /* @cssprop [--vvd-switch-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-switch-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-switch-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-switch-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-switch-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-switch-cta-backdrop=var(--vvd-color-cta-50)] */\n  --_connotation-color-backdrop: var(--vvd-switch-cta-backdrop, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-switch-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-switch-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-switch-cta-intermediate=var(--vvd-color-cta-500)] */\n  --_connotation-color-intermediate: var(--vvd-switch-cta-intermediate, var(--vvd-color-cta-500));\n}\n.control.connotation-alert {\n  /* @cssprop [--vvd-switch-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-switch-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-switch-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-switch-alert-primary-increment=var(--vvd-color-alert-600)] */\n  --_connotation-color-primary-increment: var(--vvd-switch-alert-primary-increment, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-switch-alert-backdrop=var(--vvd-color-alert-50)] */\n  --_connotation-color-backdrop: var(--vvd-switch-alert-backdrop, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-switch-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-switch-alert-firm, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-switch-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-switch-alert-intermediate, var(--vvd-color-alert-500));\n}\n.control.connotation-success {\n  /* @cssprop [--vvd-switch-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-switch-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-switch-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-switch-success-primary-increment=var(--vvd-color-success-600)] */\n  --_connotation-color-primary-increment: var(--vvd-switch-success-primary-increment, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-switch-success-backdrop=var(--vvd-color-success-50)] */\n  --_connotation-color-backdrop: var(--vvd-switch-success-backdrop, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-switch-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-switch-success-firm, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-switch-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-switch-success-intermediate, var(--vvd-color-success-500));\n}\n.control:not(.connotation-cta, .connotation-alert, .connotation-success) {\n  /* @cssprop [--vvd-switch-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-switch-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-switch-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-switch-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-switch-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-switch-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-switch-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-switch-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-switch-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-switch-accent-intermediate, var(--vvd-color-neutral-500));\n}\n.control {\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.control.appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.control:where(: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.control:where(:disabled, .disabled).appearance-filled {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: transparent;\n}\n.control:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.control:where(.readonly):where(:not(:disabled, .disabled)).appearance-filled {\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@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control:not(.disabled) {\n  cursor: pointer;\n}\n.control.disabled {\n  pointer-events: none;\n}\n\n.switch {\n  --_switch-inline-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) * 1.8);\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n  border-radius: 40px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  inline-size: var(--_switch-inline-size);\n  transition: all 0.2s ease-in-out 0s;\n}\n\n.checked-indicator {\n  --_switch-checked-indicator-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) / 1.6667);\n  --_switch-gutter: calc(var(--_switch-checked-indicator-size) / 3);\n  block-size: var(--_switch-checked-indicator-size);\n  border-radius: inherit;\n  inline-size: var(--_switch-checked-indicator-size);\n  margin-inline-start: auto;\n  transition: all 0.2s ease-in-out 0s;\n}\n.control:not(.appearance-filled) .checked-indicator {\n  background-color: var(--_appearance-color-outline);\n}\n.control:not(.appearance-filled):where(.readonly) .checked-indicator {\n  background-color: var(--vvd-color-neutral-600);\n}\n.control.appearance-filled .checked-indicator {\n  background-color: var(--vvd-color-neutral-100);\n}\n.control:not(.checked) .checked-indicator {\n  transform: translateX(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)));\n}\n.control.checked .checked-indicator {\n  transform: translateX(calc(-1 * var(--_switch-gutter)));\n}\n.control.appearance-filled.disabled .checked-indicator {\n  background-color: var(--_appearance-color-text);\n}\n.control.appearance-filled.readonly .checked-indicator {\n  background-color: var(--vvd-color-neutral-50);\n}\n\n.label {\n  color: var(--vvd-color-canvas-text);\n  cursor: pointer;\n  font: var(--vvd-typography-base);\n}\n\n.focus-indicator {\n  --focus-inset: -4px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 14px;\n}\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition48.js

@@ -19,7 +19,7 @@ __decorate([
     attr({ mode: "boolean" })
 ], Tab$1.prototype, "disabled", void 0);
 
-const styles = "/* #region SPACES */\n/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n@supports selector(:focus-visible) {\n  :host(:focus-visible) {\n    outline: none;\n  }\n}\n:host(.vertical) {\n  justify-content: end;\n  grid-column: 1/auto;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.base {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  padding: var(--_tabs-tablist-gutter);\n  background-color: var(--_appearance-color-fill);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base-bold);\n  gap: var(--_tabs-tablist-gutter);\n  min-block-size: 40px;\n  vertical-align: middle;\n  white-space: nowrap;\n}\n.base {\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);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-tab-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-tab-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-tab-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-tab-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-tab-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-tab-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-tab-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-tab-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-tab-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-tab-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-tab-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-tab-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-tab-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-tab-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300));\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.shape-sharp) {\n  border-radius: 6px;\n}\n.base:not(.disabled) {\n  cursor: pointer;\n}\n.base.disabled {\n  pointer-events: none;\n}\n:host(.vertical) .base {\n  padding-inline-start: calc(var(--_tabs-active-indicator-stroke-width) + var(--_tabs-tablist-gutter));\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}\n:host(:not(:focus-visible)) .focus-indicator {\n  display: none;\n}\n\nslot[name=icon] {\n  font-size: 20px;\n  line-height: 1;\n}\n.icon-trailing slot[name=icon] {\n  display: inline-block;\n  order: 1;\n  margin-inline-start: auto;\n}\n\n:host(:not(.vertical)) .base::after {\n  position: absolute;\n  background: currentColor;\n  block-size: 2px;\n  border-radius: 2px;\n  content: \"\";\n  inline-size: 100%;\n  inset-block-end: 0;\n  inset-inline-start: 0;\n  pointer-events: none;\n  transition-property: opacity;\n}\n:host(:not(.vertical)):host([aria-selected=true]) .base::after {\n  transition-delay: 0.2s;\n}\n:host(:not(.vertical)):host(:not([aria-selected=true])) .base::after {\n  opacity: 0;\n}";
+const styles = "/* #region SPACES */\n/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n@supports selector(:focus-visible) {\n  :host(:focus-visible) {\n    outline: none;\n  }\n}\n:host(.vertical) {\n  justify-content: end;\n  grid-column: 1/auto;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.base {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  padding: var(--_tabs-tablist-gutter);\n  background-color: var(--_appearance-color-fill);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base-bold);\n  gap: var(--_tabs-tablist-gutter);\n  min-block-size: 40px;\n  vertical-align: middle;\n  white-space: nowrap;\n}\n.base {\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);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-tab-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-tab-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-tab-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-tab-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-tab-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-tab-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-tab-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-tab-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-tab-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-tab-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-tab-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-tab-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-tab-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-tab-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300));\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.shape-sharp) {\n  border-radius: 8px;\n}\n.base:not(.disabled) {\n  cursor: pointer;\n}\n.base.disabled {\n  pointer-events: none;\n}\n:host(.vertical) .base {\n  padding-inline-start: calc(var(--_tabs-active-indicator-stroke-width) + var(--_tabs-tablist-gutter));\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}\n:host(:not(:focus-visible)) .focus-indicator {\n  display: none;\n}\n\nslot[name=icon] {\n  font-size: 20px;\n  line-height: 1;\n}\n.icon-trailing slot[name=icon] {\n  display: inline-block;\n  order: 1;\n  margin-inline-start: auto;\n}\n\n:host(:not(.vertical)) .base::after {\n  position: absolute;\n  background: currentColor;\n  block-size: 2px;\n  border-radius: 2px;\n  content: \"\";\n  inline-size: 100%;\n  inset-block-end: 0;\n  inset-inline-start: 0;\n  pointer-events: none;\n  transition-property: opacity;\n}\n:host(:not(.vertical)):host([aria-selected=true]) .base::after {\n  transition-delay: 0.2s;\n}\n:host(:not(.vertical)):host(:not([aria-selected=true])) .base::after {\n  opacity: 0;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition49.js

@@ -381,7 +381,7 @@ __decorate([
 ], Tabs$1.prototype, "showActiveIndicator", void 0);
 applyMixins(Tabs$1, StartEnd);
 
-const styles = "/* #region SPACES */\n/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n  display: block;\n}\n\n.base {\n  display: grid;\n  box-sizing: border-box;\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-tabs-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-tabs-cta-primary, var(--vvd-color-cta-500));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-tabs-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-tabs-accent-primary, var(--vvd-color-canvas-text));\n}\n.base.orientation-vertical {\n  overflow: hidden;\n  block-size: inherit;\n  grid-template-columns: auto 1fr;\n  grid-template-rows: 1fr;\n}\n.base:not(.orientation-vertical) {\n  grid-template-columns: 1fr;\n  grid-template-rows: auto 1fr;\n  max-block-size: 100%;\n}\n\n.tablist {\n  --_tabs-tablist-gutter: 8px;\n  --_tabs-active-indicator-stroke-width: 2px;\n  position: relative;\n  display: grid;\n  box-sizing: border-box;\n  color: var(--_appearance-color-text);\n}\n.base.orientation-vertical .tablist {\n  padding: var(--_tabs-tablist-gutter);\n  grid-row: 1/2;\n  grid-template-columns: auto 1fr;\n  grid-template-rows: auto;\n  inline-size: 100%;\n  place-self: flex-start end;\n  row-gap: var(--_tabs-tablist-gutter);\n}\n.base:not(.orientation-vertical) .tablist {\n  justify-content: flex-start;\n  column-gap: var(--_tabs-tablist-gutter);\n  grid-auto-flow: column;\n  grid-template-columns: auto;\n  grid-template-rows: auto auto;\n  inline-size: 100%;\n  padding-inline: var(--_tabs-tablist-gutter);\n}\n.base:not(.orientation-vertical) .tablist-wrapper {\n  align-self: end;\n  border-bottom: 1px solid var(--vvd-color-neutral-300);\n  inline-size: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n.base.orientation-vertical .tablist-wrapper {\n  block-size: 100%;\n  box-shadow: 1px 0 0 0 var(--vvd-color-neutral-300);\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n.tablist-wrapper::-webkit-scrollbar {\n  display: none;\n}\n\n.tabpanel {\n  box-sizing: border-box;\n  block-size: 100%;\n  min-block-size: 0;\n  min-inline-size: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n.base.gutters-small .tabpanel {\n  padding: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n\n.active-indicator {\n  background: currentColor;\n  margin-inline-start: calc(var(--_tabs-tablist-gutter) * -1);\n}\n.base.orientation-vertical .active-indicator {\n  align-self: center;\n  block-size: 80%;\n  border-radius: 2px;\n  grid-area: 1/1/auto/auto;\n  inline-size: var(--_tabs-active-indicator-stroke-width);\n}\n.base:not(.orientation-vertical) .active-indicator {\n  position: absolute;\n  z-index: 1;\n  block-size: var(--_tabs-active-indicator-stroke-width);\n  grid-column: 1/auto;\n  inline-size: calc(var(--_tabs-active-tab-inline-size) - 32px);\n  inset-block-end: 0;\n  inset-inline-start: 8px;\n  justify-self: center;\n  padding-inline: var(--_tabs-tablist-gutter);\n}\n\n.activeIndicatorTransition {\n  transition: transform 0.2s ease-out 0s, inline-size 0.2s ease-out 0s;\n}\n\n.base:not(.orientation-vertical) .active-indicator:not(.activeIndicatorTransition) {\n  opacity: 0;\n}";
+const styles = "/* #region SPACES */\n/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n:host {\n  display: block;\n}\n\n.base {\n  display: grid;\n  box-sizing: border-box;\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-tabs-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-tabs-cta-primary, var(--vvd-color-cta-500));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-tabs-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-tabs-accent-primary, var(--vvd-color-canvas-text));\n}\n.base.orientation-vertical {\n  overflow: hidden;\n  block-size: inherit;\n  grid-template-columns: auto 1fr;\n  grid-template-rows: 1fr;\n}\n.base:not(.orientation-vertical) {\n  grid-template-columns: 1fr;\n  grid-template-rows: auto 1fr;\n  max-block-size: 100%;\n}\n\n.tablist {\n  --_tabs-tablist-gutter: 8px;\n  --_tabs-active-indicator-stroke-width: 2px;\n  position: relative;\n  display: grid;\n  box-sizing: border-box;\n  color: var(--_appearance-color-text);\n}\n.base.orientation-vertical .tablist {\n  padding: var(--_tabs-tablist-gutter);\n  grid-row: 1/2;\n  grid-template-columns: auto 1fr;\n  grid-template-rows: auto;\n  inline-size: 100%;\n  place-self: flex-start end;\n  row-gap: var(--_tabs-tablist-gutter);\n}\n.base:not(.orientation-vertical) .tablist {\n  justify-content: flex-start;\n  column-gap: var(--_tabs-tablist-gutter);\n  grid-auto-flow: column;\n  grid-template-columns: auto;\n  grid-template-rows: auto auto;\n  inline-size: 100%;\n  padding-inline: var(--_tabs-tablist-gutter);\n}\n.base:not(.orientation-vertical) .tablist-wrapper {\n  align-self: end;\n  border-bottom: 1px solid var(--vvd-color-neutral-300);\n  inline-size: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n.base.orientation-vertical .tablist-wrapper {\n  block-size: 100%;\n  box-shadow: 1px 0 0 0 var(--vvd-color-neutral-300);\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n.tablist-wrapper::-webkit-scrollbar {\n  display: none;\n}\n\n.tabpanel {\n  box-sizing: border-box;\n  block-size: 100%;\n  min-block-size: 0;\n  min-inline-size: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n.base.gutters-small .tabpanel {\n  padding: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n\n.active-indicator {\n  background: currentColor;\n  margin-inline-start: calc(var(--_tabs-tablist-gutter) * -1);\n}\n.base.orientation-vertical .active-indicator {\n  align-self: center;\n  block-size: 80%;\n  border-radius: 2px;\n  grid-area: 1/1/auto/auto;\n  inline-size: var(--_tabs-active-indicator-stroke-width);\n}\n.base:not(.orientation-vertical) .active-indicator {\n  position: absolute;\n  z-index: 1;\n  block-size: var(--_tabs-active-indicator-stroke-width);\n  grid-column: 1/auto;\n  inline-size: calc(var(--_tabs-active-tab-inline-size) - 32px);\n  inset-block-end: 0;\n  inset-inline-start: 8px;\n  justify-self: center;\n  padding-inline: var(--_tabs-tablist-gutter);\n}\n\n.activeIndicatorTransition {\n  transition: transform 0.2s ease-out 0s, inline-size 0.2s ease-out 0s;\n}\n\n.base:not(.orientation-vertical) .active-indicator:not(.activeIndicatorTransition) {\n  opacity: 0;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition5.js

@@ -10,7 +10,7 @@ import { w as when } from './when.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n.base {\n  display: inline-flex;\n  align-items: center;\n  padding: 8px;\n  color: var(--vvd-color-canvas-text);\n  user-select: none;\n}\n.base .slider {\n  min-inline-size: var(--audio-player-min-inline-size, 200px);\n}\n.base .controls {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n.base .time-stamp {\n  display: inline-flex;\n}\n.base .time-stamp .current-time,\n.base .time-stamp .total-time {\n  margin-inline: 6px;\n  min-inline-size: 32px;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n.base {\n  display: inline-flex;\n  align-items: center;\n  padding: 8px;\n  color: var(--vvd-color-canvas-text);\n  user-select: none;\n}\n.base .slider {\n  min-inline-size: var(--audio-player-min-inline-size, 200px);\n}\n.base .controls {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n.base .time-stamp {\n  display: inline-flex;\n}\n.base .time-stamp .current-time,\n.base .time-stamp .total-time {\n  margin-inline: 6px;\n  min-inline-size: 32px;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition51.js

@@ -81,7 +81,7 @@ __decorateClass([
 ], Tag.prototype, "selected", 2);
 applyMixins(Tag, AffixIcon);
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n.base {\n  --tag-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--tag-block-size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  column-gap: 8px;\n  font: var(--vvd-typography-base-bold);\n  max-inline-size: 100%;\n  padding-inline: 8px;\n  vertical-align: middle;\n  /* Shape */\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-tag-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-tag-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));\n  /* @cssprop [--vvd-tag-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-tag-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-tag-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-tag-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-tag-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-tag-cta-dim=var(--vvd-color-cta-200)] */\n  --_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-tag-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-tag-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-tag-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-tag-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-tag-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-tag-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-tag-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-tag-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\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-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:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\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-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(:active, .active):where(:not(:disabled, .disabled)) {\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-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(: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-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(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\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-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:not(.shape-pill) {\n  border-radius: 4px;\n}\n.base.shape-pill {\n  border-radius: 14px;\n}\n@supports selector(:focus-visible) {\n  .base:focus-visible {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  cursor: pointer;\n}\n.base.disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.base.removable {\n  cursor: auto;\n}\n\n.label {\n  overflow: hidden;\n  max-inline-size: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\nslot[name=icon] {\n  font-size: calc(var(--tag-block-size) / 1.5);\n  line-height: 1;\n}\n\n.dismiss-button {\n  display: flex;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: inherit;\n  cursor: pointer;\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}\n.base:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n.base {\n  --tag-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--tag-block-size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  column-gap: 8px;\n  font: var(--vvd-typography-base-bold);\n  max-inline-size: 100%;\n  padding-inline: 8px;\n  vertical-align: middle;\n  /* Shape */\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-tag-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-tag-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));\n  /* @cssprop [--vvd-tag-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-tag-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-tag-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-tag-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-tag-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-tag-cta-dim=var(--vvd-color-cta-200)] */\n  --_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-tag-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-tag-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-tag-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-tag-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-tag-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-tag-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-tag-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-tag-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\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-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:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\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-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(:active, .active):where(:not(:disabled, .disabled)) {\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-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(: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-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(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\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-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:not(.shape-pill) {\n  border-radius: 4px;\n}\n.base.shape-pill {\n  border-radius: 14px;\n}\n@supports selector(:focus-visible) {\n  .base:focus-visible {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  cursor: pointer;\n}\n.base.disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.base.removable {\n  cursor: auto;\n}\n\n.label {\n  overflow: hidden;\n  max-inline-size: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\nslot[name=icon] {\n  font-size: calc(var(--tag-block-size) / 1.5);\n  line-height: 1;\n}\n\n.dismiss-button {\n  display: flex;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: inherit;\n  cursor: pointer;\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}\n.base:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
 
 const getClasses = ({
   connotation,

package/shared/definition52.js

@@ -188,7 +188,7 @@ __decorate([
 ], TextArea$1.prototype, "defaultSlottedNodes", void 0);
 applyMixins(TextArea$1, DelegatesARIATextbox);
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  display: inline-grid;\n  grid-template-columns: 1fr max-content;\n  inline-size: 100%;\n  row-gap: 4px;\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(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(: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(: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:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.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(.error):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: notSet;\n  --_appearance-color-fill: var(--vvd-color-alert-50);\n  --_appearance-color-outline: var(--vvd-color-alert-500);\n}\n.base:where(.error):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: notSet;\n  --_appearance-color-fill: var(--vvd-color-alert-50);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.success):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: notSet;\n  --_appearance-color-fill: var(--vvd-color-success-50);\n  --_appearance-color-outline: var(--vvd-color-success-500);\n}\n.base:where(.success):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: notSet;\n  --_appearance-color-fill: var(--vvd-color-success-50);\n  --_appearance-color-outline: transparent;\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-text-area-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-text-area-success-backdrop=var(--vvd-color-success-50)] */\n  --_connotation-color-backdrop: var(--vvd-text-area-success-backdrop, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-text-area-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-text-area-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-text-area-success-faint=var(--vvd-color-success-50)] */\n  --_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-text-area-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-text-area-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-text-area-alert-backdrop=var(--vvd-color-alert-50)] */\n  --_connotation-color-backdrop: var(--vvd-text-area-alert-backdrop, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-text-area-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-text-area-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-text-area-alert-faint=var(--vvd-color-alert-50)] */\n  --_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-text-area-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100));\n}\n.base:not(.connotation-success, .connotation-alert) {\n  /* @cssprop [--vvd-text-area-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-text-area-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-text-area-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-text-area-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-text-area-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-text-area-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-text-area-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n  --_low-ink-color: var(--_appearance-color-text);\n  cursor: not-allowed;\n}\n\n.label {\n  color: var(--vvd-color-canvas-text);\n  contain: inline-size;\n  font: var(--vvd-typography-base);\n  grid-column: 1/2;\n  grid-row: 1;\n  line-height: 20px;\n}\n\n.char-count {\n  color: var(--_low-ink-color);\n  font: var(--vvd-typography-base);\n  grid-column: 2/-1;\n}\n\n.control {\n  padding: 8px 16px;\n  border: 0 none;\n  appearance: none; /* for box-shadow visibility on IOS */\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  grid-column: 1/-1;\n  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  resize: none;\n  transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;\n}\n.control:disabled {\n  opacity: 1; /* 2. correct opacity on iOS */\n  pointer-events: none;\n  -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */\n}\n.control::placeholder, .control:disabled::placeholder {\n  opacity: 1; /* 2. correct opacity on iOS */\n  pointer-events: none;\n  -webkit-text-fill-color: var(--_low-ink-color); /* 1. sets text fill to current `color` for safari */\n}\n.control:focus {\n  outline: 2px solid var(--focus-stroke-color, currentColor);\n  outline-offset: -2px;\n}\n:host([resize=both]) .control {\n  resize: both;\n}\n:host([resize=horizontal]) .control {\n  resize: horizontal;\n}\n:host([resize=vertical]) .control {\n  resize: vertical;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  display: inline-grid;\n  grid-template-columns: 1fr max-content;\n  inline-size: 100%;\n  row-gap: 4px;\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(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(: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(: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:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.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(.error):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: notSet;\n  --_appearance-color-fill: var(--vvd-color-alert-50);\n  --_appearance-color-outline: var(--vvd-color-alert-500);\n}\n.base:where(.error):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: notSet;\n  --_appearance-color-fill: var(--vvd-color-alert-50);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.success):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: notSet;\n  --_appearance-color-fill: var(--vvd-color-success-50);\n  --_appearance-color-outline: var(--vvd-color-success-500);\n}\n.base:where(.success):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: notSet;\n  --_appearance-color-fill: var(--vvd-color-success-50);\n  --_appearance-color-outline: transparent;\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-text-area-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-text-area-success-backdrop=var(--vvd-color-success-50)] */\n  --_connotation-color-backdrop: var(--vvd-text-area-success-backdrop, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-text-area-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-text-area-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-text-area-success-faint=var(--vvd-color-success-50)] */\n  --_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-text-area-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-text-area-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-text-area-alert-backdrop=var(--vvd-color-alert-50)] */\n  --_connotation-color-backdrop: var(--vvd-text-area-alert-backdrop, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-text-area-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-text-area-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-text-area-alert-faint=var(--vvd-color-alert-50)] */\n  --_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-text-area-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100));\n}\n.base:not(.connotation-success, .connotation-alert) {\n  /* @cssprop [--vvd-text-area-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-text-area-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-text-area-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-text-area-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-text-area-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-text-area-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-text-area-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n  --_low-ink-color: var(--_appearance-color-text);\n  cursor: not-allowed;\n}\n\n.label {\n  color: var(--vvd-color-canvas-text);\n  contain: inline-size;\n  font: var(--vvd-typography-base);\n  grid-column: 1/2;\n  grid-row: 1;\n  line-height: 20px;\n}\n\n.char-count {\n  color: var(--_low-ink-color);\n  font: var(--vvd-typography-base);\n  grid-column: 2/-1;\n}\n\n.control {\n  padding: 8px 16px;\n  border: 0 none;\n  appearance: none; /* for box-shadow visibility on IOS */\n  background-color: var(--_appearance-color-fill);\n  border-radius: 8px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  grid-column: 1/-1;\n  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  resize: none;\n  transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;\n}\n.control:disabled {\n  opacity: 1; /* 2. correct opacity on iOS */\n  pointer-events: none;\n  -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */\n}\n.control::placeholder, .control:disabled::placeholder {\n  opacity: 1; /* 2. correct opacity on iOS */\n  pointer-events: none;\n  -webkit-text-fill-color: var(--_low-ink-color); /* 1. sets text fill to current `color` for safari */\n}\n.control:focus {\n  outline: 2px solid var(--focus-stroke-color, currentColor);\n  outline-offset: -2px;\n}\n:host([resize=both]) .control {\n  resize: both;\n}\n:host([resize=horizontal]) .control {\n  resize: horizontal;\n}\n:host([resize=vertical]) .control {\n  resize: vertical;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition54.js

@@ -4,7 +4,7 @@ import { a as anchored } from './anchored.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n.control {\n  display: inline-block;\n}\n\n.content-wrapper {\n  width: var(--toggletip-inline-size, auto);\n  padding: 16px;\n}\n\n.headline {\n  font: var(--vvd-typography-base-bold);\n}\n\n.action-items {\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n}\n\n::slotted([slot=action-items]) {\n  margin-block-start: 16px;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n.control {\n  display: inline-block;\n}\n\n.content-wrapper {\n  width: var(--toggletip-inline-size, auto);\n  padding: 16px;\n}\n\n.headline {\n  font: var(--vvd-typography-base-bold);\n}\n\n.action-items {\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n}\n\n::slotted([slot=action-items]) {\n  margin-block-start: 16px;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition55.js

@@ -3,7 +3,7 @@ import { P as Popup, p as popupRegistries } from './definition60.js';
 import { a as anchored } from './anchored.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n.control {\n  pointer-events: none;\n}\n\n.tooltip {\n  width: var(--tooltip-inline-size, auto);\n}\n.tooltip-text {\n  padding: 8px 12px;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base-bold);\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n.control {\n  pointer-events: none;\n}\n\n.tooltip {\n  width: var(--tooltip-inline-size, auto);\n}\n.tooltip-text {\n  padding: 8px 12px;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base-bold);\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition56.js

@@ -12,7 +12,7 @@ import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 import { r as ref } from './ref.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n@supports selector(:focus-visible) {\n  :host(:focus-visible) {\n    outline: none;\n  }\n}\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  gap: 12px;\n  hyphens: auto;\n  inline-size: 100%;\n  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  padding-inline: 16px;\n  text-decoration: none;\n  vertical-align: middle;\n  word-break: break-word;\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control:where(.selected, [aria-current]):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.control {\n  /* @cssprop [--vvd-tree-item-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-tree-item-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-tree-item-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-tree-item-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-tree-item-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control:not(.disabled) {\n  cursor: pointer;\n}\n.control.disabled {\n  pointer-events: none;\n}\n.control .text {\n  font: var(--vvd-typography-base);\n}\n\n.expandCollapseButton {\n  display: flex;\n  align-items: center;\n  border-radius: 6px;\n  font-size: 20px;\n}\n.expandCollapseButton .expandCollapseIcon {\n  margin: 4px;\n}\n.expandCollapseButton:hover {\n  background-color: var(--vvd-color-neutral-100);\n}\n.selected .expandCollapseButton:hover {\n  background-color: var(--vvd-color-neutral-700);\n}\n\n.items {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin-block: 4px;\n  padding-inline-start: 48px;\n}\n\n:host(:not(:focus-visible)) .focus-indicator {\n  display: none;\n}\n\nslot[name=icon] {\n  font-size: 20px;\n  line-height: 1;\n}\n.control:not(.disabled, .selected) slot[name=icon] {\n  color: var(--vvd-color-neutral-600);\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n@supports selector(:focus-visible) {\n  :host(:focus-visible) {\n    outline: none;\n  }\n}\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 8px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  gap: 12px;\n  hyphens: auto;\n  inline-size: 100%;\n  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  padding-inline: 16px;\n  text-decoration: none;\n  vertical-align: middle;\n  word-break: break-word;\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control:where(.selected, [aria-current]):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.control {\n  /* @cssprop [--vvd-tree-item-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-tree-item-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-tree-item-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-tree-item-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-tree-item-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control:not(.disabled) {\n  cursor: pointer;\n}\n.control.disabled {\n  pointer-events: none;\n}\n.control .text {\n  font: var(--vvd-typography-base);\n}\n\n.expandCollapseButton {\n  display: flex;\n  align-items: center;\n  border-radius: 8px;\n  font-size: 20px;\n}\n.expandCollapseButton .expandCollapseIcon {\n  margin: 4px;\n}\n.expandCollapseButton:hover {\n  background-color: var(--vvd-color-neutral-100);\n}\n.selected .expandCollapseButton:hover {\n  background-color: var(--vvd-color-neutral-700);\n}\n\n.items {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin-block: 4px;\n  padding-inline-start: 48px;\n}\n\n:host(:not(:focus-visible)) .focus-indicator {\n  display: none;\n}\n\nslot[name=icon] {\n  font-size: 20px;\n  line-height: 1;\n}\n.control:not(.disabled, .selected) slot[name=icon] {\n  color: var(--vvd-color-neutral-600);\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition58.js

@@ -1,7 +1,7 @@
 import { h as html, r as registerFactory } from './index.js';
 import { F as Focus } from './focus.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n:host {\n  display: contents;\n  border-radius: inherit;\n}\n\n.control {\n  position: absolute;\n  z-index: 1;\n  box-sizing: border-box;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);\n  inset: var(--focus-inset, 0);\n  outline: 2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));\n  outline-offset: -2px;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n:host {\n  display: contents;\n  border-radius: inherit;\n}\n\n.control {\n  position: absolute;\n  z-index: 1;\n  box-sizing: border-box;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);\n  inset: var(--focus-inset, 0);\n  outline: 2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));\n  outline-offset: -2px;\n}";
 
 const focusTemplate = () => html`
         <span class="control"></span>`;

package/shared/definition6.js

@@ -4,7 +4,7 @@ import { I as Icon } from './icon.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Mon, 08 Jan 2024 16:06:07 GMT\n */\n.base {\n  display: inline-flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_size);\n  border-radius: var(--_avatar-border-radius);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  inline-size: var(--_size);\n  vertical-align: middle;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-avatar-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-avatar-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-avatar-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-avatar-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-avatar-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-avatar-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));\n  /* @cssprop [--vvd-avatar-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-avatar-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-avatar-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-avatar-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-avatar-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-avatar-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-avatar-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-avatar-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800));\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-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.size-condensed {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.base.size-condensed .initials {\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.base.size-condensed .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) / 2);\n  line-height: 1;\n}\n.base.size-expanded {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n}\n.base.size-expanded .initials {\n  font: var(--vvd-typography-heading-4);\n}\n.base.size-expanded .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8)) / 2);\n  line-height: 1;\n}\n.base:not(.size-condensed, .size-expanded) {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base:not(.size-condensed, .size-expanded) .initials {\n  font: var(--vvd-typography-base-extended-bold);\n}\n.base:not(.size-condensed, .size-expanded) .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n  line-height: 1;\n}\n.base:not(.shape-pill) {\n  --_avatar-border-radius: 6px;\n}\n.base:not(.shape-pill).size-condensed {\n  --_avatar-border-radius: 4px;\n}\n.base.shape-pill {\n  --_avatar-border-radius: 50%;\n}\n.base .initials {\n  text-transform: uppercase;\n}\n.base ::slotted(*) {\n  block-size: 100%;\n  inline-size: 100%;\n  object-fit: cover;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n.base {\n  display: inline-flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_size);\n  border-radius: var(--_avatar-border-radius);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  inline-size: var(--_size);\n  vertical-align: middle;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-avatar-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-avatar-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-avatar-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-avatar-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-avatar-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-avatar-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));\n  /* @cssprop [--vvd-avatar-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-avatar-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-avatar-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-avatar-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-avatar-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-avatar-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-avatar-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-avatar-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800));\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-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.size-condensed {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.base.size-condensed .initials {\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.base.size-condensed .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) / 2);\n  line-height: 1;\n}\n.base.size-expanded {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n}\n.base.size-expanded .initials {\n  font: var(--vvd-typography-heading-4);\n}\n.base.size-expanded .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8)) / 2);\n  line-height: 1;\n}\n.base:not(.size-condensed, .size-expanded) {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base:not(.size-condensed, .size-expanded) .initials {\n  font: var(--vvd-typography-base-extended-bold);\n}\n.base:not(.size-condensed, .size-expanded) .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n  line-height: 1;\n}\n.base:not(.shape-pill) {\n  --_avatar-border-radius: 8px;\n}\n.base:not(.shape-pill).size-condensed {\n  --_avatar-border-radius: 4px;\n}\n.base.shape-pill {\n  --_avatar-border-radius: 50%;\n}\n.base .initials {\n  text-transform: uppercase;\n}\n.base ::slotted(*) {\n  block-size: 100%;\n  inline-size: 100%;\n  object-fit: cover;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;