@vonage/vivid 3.27.0 → 3.29.0

package/shared/definition11.js

@@ -12,11 +12,8 @@ __decorate([attr, __metadata("design:type", String)], Badge.prototype, "appearan
 __decorate([attr, __metadata("design:type", String)], Badge.prototype, "text", void 0);
 applyMixins(Badge, AffixIconWithTrailing);
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Aug 2023 09:40:18 GMT\n */\n.base {\n  --_badge-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_badge-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-condensed-bold);\n  padding-inline: 8px;\n  vertical-align: middle;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-badge-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-badge-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-cta-intermediate=var(--vvd-color-cta-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-badge-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));\n  /* @cssprop [--vvd-badge-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-badge-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-badge-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-badge-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-badge-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-badge-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));\n  /* @cssprop [--vvd-badge-success-contrast=var(--vvd-color-success-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));\n  /* @cssprop [--vvd-badge-success-pale=var(--vvd-color-success-300)] */\n  --_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));\n  /* @cssprop [--vvd-badge-success-fierce=var(--vvd-color-success-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-badge-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-badge-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-badge-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));\n  /* @cssprop [--vvd-badge-alert-contrast=var(--vvd-color-alert-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));\n  /* @cssprop [--vvd-badge-alert-pale=var(--vvd-color-alert-300)] */\n  --_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));\n  /* @cssprop [--vvd-badge-alert-fierce=var(--vvd-color-alert-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));\n}\n.base.connotation-warning {\n  /* @cssprop [--vvd-badge-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-badge-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-badge-warning-intermediate=var(--vvd-color-warning-300)] */\n  --_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-badge-warning-soft=var(--vvd-color-warning-100)] */\n  --_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));\n  /* @cssprop [--vvd-badge-warning-contrast=var(--vvd-color-warning-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));\n  /* @cssprop [--vvd-badge-warning-pale=var(--vvd-color-warning-300)] */\n  --_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-badge-warning-fierce=var(--vvd-color-warning-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));\n}\n.base.connotation-information {\n  /* @cssprop [--vvd-badge-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-badge-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-information-intermediate=var(--vvd-color-information-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-badge-information-soft=var(--vvd-color-information-100)] */\n  --_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));\n  /* @cssprop [--vvd-badge-information-contrast=var(--vvd-color-information-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));\n  /* @cssprop [--vvd-badge-information-pale=var(--vvd-color-information-300)] */\n  --_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));\n  /* @cssprop [--vvd-badge-information-fierce=var(--vvd-color-information-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));\n}\n.base:not(.connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-information) {\n  /* @cssprop [--vvd-badge-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-badge-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-badge-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-badge-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-badge-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-badge-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));\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-duotone {\n  --_appearance-color-text: var(--_connotation-color-fierce);\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:not(.icon-only) {\n  max-inline-size: 100%;\n}\n.base.icon-only {\n  contain: size;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .base.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .base.icon-only {\n    inline-size: var(--_badge-block-size);\n  }\n}\n\n.text {\n  overflow: hidden;\n  max-inline-size: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n  border-radius: 4px;\n}\n\n.base.shape-pill {\n  border-radius: 14px;\n}\n\n/* Icon */\n.icon {\n  display: flex;\n  flex-shrink: 0;\n  font-size: calc(var(--_badge-block-size) / 1.6667);\n  line-height: 1;\n}\n.icon-trailing .icon {\n  order: 1;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 09 Aug 2023 13:23:44 GMT\n */\n.base {\n  --_badge-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_badge-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-condensed-bold);\n  padding-inline: 8px;\n  vertical-align: middle;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-badge-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-badge-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-cta-intermediate=var(--vvd-color-cta-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-badge-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));\n  /* @cssprop [--vvd-badge-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-badge-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-badge-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-badge-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-badge-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-badge-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));\n  /* @cssprop [--vvd-badge-success-contrast=var(--vvd-color-success-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));\n  /* @cssprop [--vvd-badge-success-pale=var(--vvd-color-success-300)] */\n  --_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));\n  /* @cssprop [--vvd-badge-success-fierce=var(--vvd-color-success-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-badge-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-badge-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-badge-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));\n  /* @cssprop [--vvd-badge-alert-contrast=var(--vvd-color-alert-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));\n  /* @cssprop [--vvd-badge-alert-pale=var(--vvd-color-alert-300)] */\n  --_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));\n  /* @cssprop [--vvd-badge-alert-fierce=var(--vvd-color-alert-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));\n}\n.base.connotation-warning {\n  /* @cssprop [--vvd-badge-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-badge-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-badge-warning-intermediate=var(--vvd-color-warning-300)] */\n  --_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-badge-warning-soft=var(--vvd-color-warning-100)] */\n  --_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));\n  /* @cssprop [--vvd-badge-warning-contrast=var(--vvd-color-warning-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));\n  /* @cssprop [--vvd-badge-warning-pale=var(--vvd-color-warning-300)] */\n  --_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-badge-warning-fierce=var(--vvd-color-warning-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));\n}\n.base.connotation-information {\n  /* @cssprop [--vvd-badge-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-badge-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-information-intermediate=var(--vvd-color-information-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-badge-information-soft=var(--vvd-color-information-100)] */\n  --_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));\n  /* @cssprop [--vvd-badge-information-contrast=var(--vvd-color-information-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));\n  /* @cssprop [--vvd-badge-information-pale=var(--vvd-color-information-300)] */\n  --_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));\n  /* @cssprop [--vvd-badge-information-fierce=var(--vvd-color-information-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));\n}\n.base:not(.connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-information) {\n  /* @cssprop [--vvd-badge-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-badge-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-badge-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-badge-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-badge-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-badge-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-badge-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));\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-duotone {\n  --_appearance-color-text: var(--_connotation-color-fierce);\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:not(.icon-only) {\n  max-inline-size: 100%;\n}\n.base.icon-only {\n  contain: size;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .base.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .base.icon-only {\n    inline-size: var(--_badge-block-size);\n  }\n}\n\n.text {\n  overflow: hidden;\n  max-inline-size: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n  border-radius: 4px;\n}\n\n.base.shape-pill {\n  border-radius: 14px;\n}\n\n/* Icon */\n.icon {\n  display: flex;\n  flex-shrink: 0;\n  font-size: calc(var(--_badge-block-size) / 1.6667);\n  line-height: 1;\n}\n.icon-trailing .icon {\n  order: 1;\n}";
 
-let _ = t => t,
-  _t,
-  _t2;
 const getClasses = ({
   connotation,
   appearance,
@@ -27,11 +24,11 @@ const getClasses = ({
 }) => classNames('base', [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], ['icon-trailing', iconTrailing], ['icon-only', !text && Boolean(icon)]);
 const badgeTemplate = context => {
   const affixIconTemplate = affixIconTemplateFactory(context);
-  return html(_t || (_t = _`
-    <span class="${0}">
-      ${0}
-			${0}
-		</span>`), getClasses, x => affixIconTemplate(x.icon), when(x => x.text, x => html(_t2 || (_t2 = _`<span class="text">${0}</span>`), x.text)));
+  return html`
+    <span class="${getClasses}">
+      ${x => affixIconTemplate(x.icon)}
+			${when(x => x.text, x => html`<span class="text">${x.text}</span>`)}
+		</span>`;
 };
 
 const badgeDefinition = Badge.compose({

package/shared/definition12.js

@@ -1,4 +1,4 @@
-import { F as FoundationElement, V as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
+import { F as FoundationElement, d as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
 import { C as Connotation, B as Button, b as buttonRegistries } from './definition7.js';
 import { i as iconRegistries } from './definition3.js';
 import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
@@ -6,7 +6,7 @@ import { a as applyMixins } from './apply-mixins.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Aug 2023 09:40:18 GMT\n */\n.control {\n  overflow: hidden;\n  max-height: 160px;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  transition: max-height var(--transition-delay, 200ms);\n}\n.control.connotation-success {\n  /* @cssprop [--vvd-banner-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-banner-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-alert {\n  /* @cssprop [--vvd-banner-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-banner-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-announcement {\n  /* @cssprop [--vvd-banner-announcement-primary=var(--vvd-color-announcement-500)] */\n  --_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));\n  /* @cssprop [--vvd-banner-announcement-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-warning {\n  /* @cssprop [--vvd-banner-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-banner-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text));\n}\n.control:not(.connotation-success, .connotation-alert, .connotation-announcement, .connotation-warning) {\n  /* @cssprop [--vvd-banner-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-banner-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas));\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.control.removing {\n  max-height: 0;\n}\n\n.header {\n  display: flex;\n  min-height: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 20));\n  align-items: center;\n  font: var(--vvd-typography-base-bold);\n  inline-size: 100%;\n}\n.header .content {\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: center;\n  column-gap: 16px;\n  inline-size: 100%;\n  padding-inline: 16px;\n}\n.header .content .icon {\n  flex-shrink: 0;\n  font-size: 20px;\n  line-height: 1;\n}\n.header .content .action-items {\n  flex-shrink: 0;\n}\n.header .dismiss-button {\n  flex-shrink: 0;\n  margin-inline-end: 8px;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 09 Aug 2023 13:23:44 GMT\n */\n.control {\n  overflow: hidden;\n  max-height: 160px;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  transition: max-height var(--transition-delay, 200ms);\n}\n.control.connotation-success {\n  /* @cssprop [--vvd-banner-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-banner-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-alert {\n  /* @cssprop [--vvd-banner-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-banner-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-announcement {\n  /* @cssprop [--vvd-banner-announcement-primary=var(--vvd-color-announcement-500)] */\n  --_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));\n  /* @cssprop [--vvd-banner-announcement-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-warning {\n  /* @cssprop [--vvd-banner-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-banner-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text));\n}\n.control:not(.connotation-success, .connotation-alert, .connotation-announcement, .connotation-warning) {\n  /* @cssprop [--vvd-banner-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-banner-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas));\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.control.removing {\n  max-height: 0;\n}\n\n.header {\n  display: flex;\n  min-height: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 20));\n  align-items: center;\n  font: var(--vvd-typography-base-bold);\n  inline-size: 100%;\n}\n.header .content {\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: center;\n  column-gap: 16px;\n  inline-size: 100%;\n  padding-inline: 16px;\n}\n.header .content .icon {\n  flex-shrink: 0;\n  font-size: 20px;\n  line-height: 1;\n}\n.header .content .action-items {\n  flex-shrink: 0;\n}\n.header .dismiss-button {\n  flex-shrink: 0;\n  margin-inline-end: 8px;\n}";
 
 var _Banner_handleRemoveEnd, _Banner_closeOnKeyDown;
 const connotationIconMap = new Map([[Connotation.Information, 'info-solid'], [Connotation.Announcement, 'megaphone-solid'], [Connotation.Success, 'check-circle-solid'], [Connotation.Warning, 'warning-solid'], [Connotation.Alert, 'error-solid']]);
@@ -14,6 +14,7 @@ const defaultConnotation = (connotation = Connotation.Information) => connotatio
 class Banner extends FoundationElement {
   constructor() {
     super(...arguments);
+    this.role = null;
     this.removable = false;
     _Banner_handleRemoveEnd.set(this, () => {
       this.$emit('removed');
@@ -48,6 +49,7 @@ class Banner extends FoundationElement {
   }
 }
 _Banner_handleRemoveEnd = new WeakMap(), _Banner_closeOnKeyDown = new WeakMap();
+__decorate([attr, __metadata("design:type", Object)], Banner.prototype, "role", void 0);
 __decorate([attr({
   attribute: 'action-href'
 }), __metadata("design:type", Object)], Banner.prototype, "actionHref", void 0);
@@ -60,45 +62,41 @@ __decorate([attr({
 __decorate([attr({
   attribute: 'aria-live'
 }), __metadata("design:type", Object)], Banner.prototype, "ariaLive", void 0);
-__decorate([attr(), __metadata("design:type", Object)], Banner.prototype, "role", void 0);
 __decorate([attr(), __metadata("design:type", Object)], Banner.prototype, "text", void 0);
 __decorate([attr(), __metadata("design:type", Object)], Banner.prototype, "connotation", void 0);
 applyMixins(Banner, AffixIcon);
 
-let _2 = t => t,
-  _t,
-  _t2;
 const getClasses = _ => classNames('control', [`connotation-${_.connotation}`, !!_.connotation]);
 function renderDismissButton(buttonTag) {
-  return html(_t || (_t = _2`
-	  <${0}
+  return html`
+	  <${buttonTag}
 				part="vvd-theme-alternate"
 			  size="condensed"
 			  class="dismiss-button"
 			  icon="close-line"
-			  @click="${0}">
-	  </${0}>`), buttonTag, x => x.remove(), buttonTag);
+			  @click="${x => x.remove()}">
+	  </${buttonTag}>`;
 }
 const BannerTemplate = context => {
   const affixIconTemplate = affixIconTemplateFactory(context);
   const buttonTag = context.tagFor(Button);
-  return html(_t2 || (_t2 = _2`
-	  <div class="${0}" tabindex="0">
+  return html`
+	  <div class="${getClasses}" tabindex="0">
 		  <header class="header">
 					<div class="content">
-            ${0}
+            ${x => affixIconTemplate(x.conditionedIcon)}
 						<div class="banner-message"
-						 role="${0}"
-						 aria-live="${0}">
-									${0}
+						 role="${x => x.role ? x.role : 'status'}"
+						 aria-live="${x => x.ariaLive ? x.ariaLive : 'polite'}">
+									${x => x.text}
             </div>
 						<slot class="action-items" name="action-items"></slot>
 					</div>
 
-			  ${0}
+			  ${when(x => x.removable, renderDismissButton(buttonTag))}
 		  </header>
 	  </div>
-	`), getClasses, x => affixIconTemplate(x.conditionedIcon), x => x.role ? x.role : 'status', x => x.ariaLive ? x.ariaLive : 'polite', x => x.text, when(x => x.removable, renderDismissButton(buttonTag)));
+	`;
 };
 
 const bannerDefinition = Banner.compose({

package/shared/definition13.js

@@ -70,20 +70,18 @@ __decorate([
     observable
 ], Breadcrumb$1.prototype, "slottedBreadcrumbItems", void 0);
 
-let _ = t => t,
-  _t;
-const breadcrumbTemplate = () => html(_t || (_t = _`
+const breadcrumbTemplate = () => html`
 	<nav aria-label="breadcrumbs" class="base">
     <div role="list" class="list">
       <slot
-        ${0}
+        ${slotted({
+  property: 'slottedBreadcrumbItems',
+  filter: elements()
+})}
       ></slot>
     </div>
 	</nav>
-`), slotted({
-  property: 'slottedBreadcrumbItems',
-  filter: elements()
-}));
+`;
 
 var css_248z = ".list {\n  display: flex;\n}";
 

package/shared/definition14.js

@@ -7,7 +7,7 @@ import { I as Icon } from './icon.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Aug 2023 09:40:18 GMT\n */\n.base {\n  display: flex;\n  align-items: center;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base);\n}\n.base .separator {\n  margin: 0 16px;\n  color: var(--vvd-color-neutral-600);\n  font-size: 12px;\n}\n\n.control {\n  position: relative;\n  font: inherit;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n.control:any-link {\n  color: var(--vvd-color-cta-600);\n  text-decoration: none;\n}\n.control:any-link:hover {\n  text-decoration: underline;\n}\n\n.focus-indicator {\n  --focus-inset: -4px -8px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 6px;\n}\n.control:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 09 Aug 2023 13:23:44 GMT\n */\n.base {\n  display: flex;\n  align-items: center;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base);\n}\n.base .separator {\n  margin: 0 16px;\n  color: var(--vvd-color-neutral-600);\n  font-size: 12px;\n}\n\n.control {\n  position: relative;\n  font: inherit;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n.control:any-link {\n  color: var(--vvd-color-cta-600);\n  text-decoration: none;\n}\n.control:any-link:hover {\n  text-decoration: underline;\n}\n\n.focus-indicator {\n  --focus-inset: -4px -8px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 6px;\n}\n.control:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
 
 class BreadcrumbItem extends BreadcrumbItem$1 {
   constructor() {
@@ -16,22 +16,17 @@ class BreadcrumbItem extends BreadcrumbItem$1 {
 }
 __decorate([attr, __metadata("design:type", String)], BreadcrumbItem.prototype, "text", void 0);
 
-let _2 = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4;
 const getClasses = _ => classNames('base');
 const BreadcrumbItemTemplate = (context, definition) => {
   const iconTag = context.tagFor(Icon);
-  return html(_t || (_t = _2`
-	<div role="listitem" class="${0}">
-		${0}
+  return html`
+	<div role="listitem" class="${getClasses}">
+		${when(x => x.text && !x.href, html`${x => x.text}`)}
 
-		${0}
+		${when(x => x.text && x.href && x.href.length > 0, html`${textAnchorTemplate(context)}`)}
 
-		${0}
-	</div>`), getClasses, when(x => x.text && !x.href, html(_t2 || (_t2 = _2`${0}`), x => x.text)), when(x => x.text && x.href && x.href.length > 0, html(_t3 || (_t3 = _2`${0}`), textAnchorTemplate(context))), when(x => x.separator, html(_t4 || (_t4 = _2`<${0} class="separator" name="chevron-right-solid"></${0}>`), iconTag, iconTag)));
+		${when(x => x.separator, html`<${iconTag} class="separator" name="chevron-right-solid"></${iconTag}>`)}
+	</div>`;
 };
 
 const breadcrumbItemDefinition = BreadcrumbItem.compose({

package/shared/definition15.js

@@ -1,6 +1,5 @@
-import { F as FoundationElement, V as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
+import { F as FoundationElement, d as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
 import { C as CalendarEvent } from './calendar-event.js';
-import './es.object.assign.js';
 import { b as _has, _ as _curry1, a as _curry2 } from './_has.js';
 import { r as repeat } from './repeat.js';
 
@@ -506,7 +505,7 @@ _curry1(function isEmpty(x) {
 
 var isEmpty$1 = isEmpty;
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Aug 2023 09:40:18 GMT\n */\nol {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\n[role=grid i] {\n  position: relative;\n  z-index: 0;\n  display: grid;\n  margin: auto;\n  grid-template-areas: \". column-headers\" \"row-headers calendar\";\n  grid-template-columns: min-content auto;\n  inline-size: max(100%, 500px);\n  min-inline-size: 880px;\n}\n\n.row-headers {\n  display: grid;\n  grid-area: row-headers;\n  grid-template-rows: repeat(24, 1fr);\n  margin-inline-end: 2px;\n}\n.row-headers > [role=rowheader i] {\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n}\n.row-headers > [role=rowheader i] > time {\n  font: var(--vvd-typography-base-condensed);\n  font-size: small;\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.calendar-row {\n  display: contents;\n}\n\n.calendar-grid-presentation {\n  display: grid;\n  overflow: hidden;\n  background: var(--vvd-color-surface-2dp);\n  border-radius: 6px;\n  counter-reset: listing;\n  filter: var(--vvd-shadow-surface-2dp);\n  gap: 1px;\n  grid-area: calendar;\n  grid-auto-flow: column;\n  grid-template: repeat(24, 1fr)/repeat(7, 1fr);\n}\n\n.hours {\n  display: contents;\n}\n.hours > [role=listitem i] {\n  position: relative;\n  grid-column: 1/8;\n  grid-row: var(--row);\n  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  pointer-events: none;\n}\n.hours > [role=listitem i]:not(:first-child)::after {\n  position: absolute;\n  border-block-end: var(--vvd-color-neutral-100) 1px solid;\n  content: \"\";\n  inline-size: 100%;\n  margin-block-start: -1px;\n}\n.hours > [role=listitem i]:nth-child(24n+1) {\n  --row: 1;\n}\n.hours > [role=listitem i]:nth-child(24n+2) {\n  --row: 2;\n}\n.hours > [role=listitem i]:nth-child(24n+3) {\n  --row: 3;\n}\n.hours > [role=listitem i]:nth-child(24n+4) {\n  --row: 4;\n}\n.hours > [role=listitem i]:nth-child(24n+5) {\n  --row: 5;\n}\n.hours > [role=listitem i]:nth-child(24n+6) {\n  --row: 6;\n}\n.hours > [role=listitem i]:nth-child(24n+7) {\n  --row: 7;\n}\n.hours > [role=listitem i]:nth-child(24n+8) {\n  --row: 8;\n}\n.hours > [role=listitem i]:nth-child(24n+9) {\n  --row: 9;\n}\n.hours > [role=listitem i]:nth-child(24n+10) {\n  --row: 10;\n}\n.hours > [role=listitem i]:nth-child(24n+11) {\n  --row: 11;\n}\n.hours > [role=listitem i]:nth-child(24n+12) {\n  --row: 12;\n}\n.hours > [role=listitem i]:nth-child(24n+13) {\n  --row: 13;\n}\n.hours > [role=listitem i]:nth-child(24n+14) {\n  --row: 14;\n}\n.hours > [role=listitem i]:nth-child(24n+15) {\n  --row: 15;\n}\n.hours > [role=listitem i]:nth-child(24n+16) {\n  --row: 16;\n}\n.hours > [role=listitem i]:nth-child(24n+17) {\n  --row: 17;\n}\n.hours > [role=listitem i]:nth-child(24n+18) {\n  --row: 18;\n}\n.hours > [role=listitem i]:nth-child(24n+19) {\n  --row: 19;\n}\n.hours > [role=listitem i]:nth-child(24n+20) {\n  --row: 20;\n}\n.hours > [role=listitem i]:nth-child(24n+21) {\n  --row: 21;\n}\n.hours > [role=listitem i]:nth-child(24n+22) {\n  --row: 22;\n}\n.hours > [role=listitem i]:nth-child(24n+23) {\n  --row: 23;\n}\n.hours > [role=listitem i]:nth-child(24n+24) {\n  --row: 24;\n}\n\n[role=gridcell i] {\n  display: grid;\n  gap: 1px;\n  grid-auto-flow: column;\n}\n\n[role=gridcell i],\n[role=columnheader i],\n[role=columnheader i] [role=button i] {\n  position: relative;\n}\n[role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n  position: absolute;\n  z-index: -1;\n  background-color: var(--vvd-color-information-400);\n  content: \"\";\n}\n@supports (inset: 0) {\n  [role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n    inset: 0;\n  }\n}\n@supports not (inset: 0) {\n  [role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n}\n[role=gridcell i]:focus,\n[role=columnheader i]:focus,\n[role=columnheader i] [role=button i]:focus {\n  outline: none;\n}\n[role=gridcell i]:not(:focus-visible)::before,\n[role=columnheader i]:not(:focus-visible)::before,\n[role=columnheader i] [role=button i]:not(:focus-visible)::before {\n  display: none;\n}\n\n.columns {\n  display: contents;\n}\n.columns > [role=gridcell i] {\n  position: relative;\n  grid-column: var(--column);\n  grid-row: 1/25;\n}\n.columns > [role=gridcell i]:nth-child(1) {\n  --column: 1;\n}\n.columns > [role=gridcell i]:nth-child(2) {\n  --column: 2;\n}\n.columns > [role=gridcell i]:nth-child(3) {\n  --column: 3;\n}\n.columns > [role=gridcell i]:nth-child(4) {\n  --column: 4;\n}\n.columns > [role=gridcell i]:nth-child(5) {\n  --column: 5;\n}\n.columns > [role=gridcell i]:nth-child(6) {\n  --column: 6;\n}\n.columns > [role=gridcell i]:nth-child(7) {\n  --column: 7;\n}\n.columns > [role=gridcell i]:not(:first-child)::after {\n  position: absolute;\n  block-size: 100%;\n  border-inline-end: var(--vvd-color-neutral-100) 1px solid;\n  content: \"\";\n  margin-inline-start: -1px;\n}\n\n.column-headers {\n  display: grid;\n  grid-area: column-headers;\n  grid-template-columns: repeat(7, 1fr);\n}\n.column-headers [role=columnheader i] h2 {\n  display: grid;\n  align-items: baseline;\n  margin: 0;\n  font: var(--vvd-typography-heading-4);\n  grid-template-columns: 1fr auto 1fr;\n}\n.column-headers [role=columnheader i] h2 > em {\n  font: inherit;\n  inline-size: min-content;\n}\n@supports (inset: 0) {\n  .column-headers [role=columnheader i] h2 > em {\n    inset-inline-start: 0;\n  }\n}\n@supports not (inset: 0) {\n  .column-headers [role=columnheader i] h2 > em {\n    left: 0;\n  }\n}\n.column-headers [role=columnheader i] h2 > small {\n  font: var(--vvd-typography-base-condensed);\n  text-transform: uppercase;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 09 Aug 2023 13:23:44 GMT\n */\nol {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\n[role=grid i] {\n  position: relative;\n  z-index: 0;\n  display: grid;\n  margin: auto;\n  grid-template-areas: \". column-headers\" \"row-headers calendar\";\n  grid-template-columns: min-content auto;\n  inline-size: max(100%, 500px);\n  min-inline-size: 880px;\n}\n\n.row-headers {\n  display: grid;\n  grid-area: row-headers;\n  grid-template-rows: repeat(24, 1fr);\n  margin-inline-end: 2px;\n}\n.row-headers > [role=rowheader i] {\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n}\n.row-headers > [role=rowheader i] > time {\n  font: var(--vvd-typography-base-condensed);\n  font-size: small;\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.calendar-row {\n  display: contents;\n}\n\n.calendar-grid-presentation {\n  display: grid;\n  overflow: hidden;\n  background: var(--vvd-color-surface-2dp);\n  border-radius: 6px;\n  counter-reset: listing;\n  filter: var(--vvd-shadow-surface-2dp);\n  gap: 1px;\n  grid-area: calendar;\n  grid-auto-flow: column;\n  grid-template: repeat(24, 1fr)/repeat(7, 1fr);\n}\n\n.hours {\n  display: contents;\n}\n.hours > [role=listitem i] {\n  position: relative;\n  grid-column: 1/8;\n  grid-row: var(--row);\n  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  pointer-events: none;\n}\n.hours > [role=listitem i]:not(:first-child)::after {\n  position: absolute;\n  border-block-end: var(--vvd-color-neutral-100) 1px solid;\n  content: \"\";\n  inline-size: 100%;\n  margin-block-start: -1px;\n}\n.hours > [role=listitem i]:nth-child(24n+1) {\n  --row: 1;\n}\n.hours > [role=listitem i]:nth-child(24n+2) {\n  --row: 2;\n}\n.hours > [role=listitem i]:nth-child(24n+3) {\n  --row: 3;\n}\n.hours > [role=listitem i]:nth-child(24n+4) {\n  --row: 4;\n}\n.hours > [role=listitem i]:nth-child(24n+5) {\n  --row: 5;\n}\n.hours > [role=listitem i]:nth-child(24n+6) {\n  --row: 6;\n}\n.hours > [role=listitem i]:nth-child(24n+7) {\n  --row: 7;\n}\n.hours > [role=listitem i]:nth-child(24n+8) {\n  --row: 8;\n}\n.hours > [role=listitem i]:nth-child(24n+9) {\n  --row: 9;\n}\n.hours > [role=listitem i]:nth-child(24n+10) {\n  --row: 10;\n}\n.hours > [role=listitem i]:nth-child(24n+11) {\n  --row: 11;\n}\n.hours > [role=listitem i]:nth-child(24n+12) {\n  --row: 12;\n}\n.hours > [role=listitem i]:nth-child(24n+13) {\n  --row: 13;\n}\n.hours > [role=listitem i]:nth-child(24n+14) {\n  --row: 14;\n}\n.hours > [role=listitem i]:nth-child(24n+15) {\n  --row: 15;\n}\n.hours > [role=listitem i]:nth-child(24n+16) {\n  --row: 16;\n}\n.hours > [role=listitem i]:nth-child(24n+17) {\n  --row: 17;\n}\n.hours > [role=listitem i]:nth-child(24n+18) {\n  --row: 18;\n}\n.hours > [role=listitem i]:nth-child(24n+19) {\n  --row: 19;\n}\n.hours > [role=listitem i]:nth-child(24n+20) {\n  --row: 20;\n}\n.hours > [role=listitem i]:nth-child(24n+21) {\n  --row: 21;\n}\n.hours > [role=listitem i]:nth-child(24n+22) {\n  --row: 22;\n}\n.hours > [role=listitem i]:nth-child(24n+23) {\n  --row: 23;\n}\n.hours > [role=listitem i]:nth-child(24n+24) {\n  --row: 24;\n}\n\n[role=gridcell i] {\n  display: grid;\n  gap: 1px;\n  grid-auto-flow: column;\n}\n\n[role=gridcell i],\n[role=columnheader i],\n[role=columnheader i] [role=button i] {\n  position: relative;\n}\n[role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n  position: absolute;\n  z-index: -1;\n  background-color: var(--vvd-color-information-400);\n  content: \"\";\n}\n@supports (inset: 0) {\n  [role=gridcell i]::before,\n  [role=columnheader i]::before,\n  [role=columnheader i] [role=button i]::before {\n    inset: 0;\n  }\n}\n@supports not (inset: 0) {\n  [role=gridcell i]::before,\n  [role=columnheader i]::before,\n  [role=columnheader i] [role=button i]::before {\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n}\n[role=gridcell i]:focus,\n[role=columnheader i]:focus,\n[role=columnheader i] [role=button i]:focus {\n  outline: none;\n}\n[role=gridcell i]:not(:focus-visible)::before,\n[role=columnheader i]:not(:focus-visible)::before,\n[role=columnheader i] [role=button i]:not(:focus-visible)::before {\n  display: none;\n}\n\n.columns {\n  display: contents;\n}\n.columns > [role=gridcell i] {\n  position: relative;\n  grid-column: var(--column);\n  grid-row: 1/25;\n}\n.columns > [role=gridcell i]:nth-child(1) {\n  --column: 1;\n}\n.columns > [role=gridcell i]:nth-child(2) {\n  --column: 2;\n}\n.columns > [role=gridcell i]:nth-child(3) {\n  --column: 3;\n}\n.columns > [role=gridcell i]:nth-child(4) {\n  --column: 4;\n}\n.columns > [role=gridcell i]:nth-child(5) {\n  --column: 5;\n}\n.columns > [role=gridcell i]:nth-child(6) {\n  --column: 6;\n}\n.columns > [role=gridcell i]:nth-child(7) {\n  --column: 7;\n}\n.columns > [role=gridcell i]:not(:first-child)::after {\n  position: absolute;\n  block-size: 100%;\n  border-inline-end: var(--vvd-color-neutral-100) 1px solid;\n  content: \"\";\n  margin-inline-start: -1px;\n}\n\n.column-headers {\n  display: grid;\n  grid-area: column-headers;\n  grid-template-columns: repeat(7, 1fr);\n}\n.column-headers [role=columnheader i] h2 {\n  display: grid;\n  align-items: baseline;\n  margin: 0;\n  font: var(--vvd-typography-heading-4);\n  grid-template-columns: 1fr auto 1fr;\n}\n.column-headers [role=columnheader i] h2 > em {\n  font: inherit;\n  inline-size: min-content;\n}\n@supports (inset: 0) {\n  .column-headers [role=columnheader i] h2 > em {\n    inset-inline-start: 0;\n  }\n}\n@supports not (inset: 0) {\n  .column-headers [role=columnheader i] h2 > em {\n    left: 0;\n  }\n}\n.column-headers [role=columnheader i] h2 > small {\n  font: var(--vvd-typography-base-condensed);\n  text-transform: uppercase;\n}";
 
 const ARROW_UP = 'ArrowUp';
 const ARROW_RIGHT = 'ArrowRight';
@@ -566,7 +565,7 @@ function getHour(e, el, hours) {
     return Math.round((hour + Number.EPSILON) * 100) / 100;
   }
 }
-const getEventContext = function getEventContext(e) {
+const getEventContext = function (e) {
   if (!(e instanceof KeyboardEvent || e instanceof MouseEvent)) {
     throw new Error('Invalid event. Event must be instance of KeyboardEvent or MouseEvent');
   }
@@ -677,86 +676,78 @@ function getFirstDateOfTheWeek(date = new Date(), startDay) {
   return new Date(date.setDate(day));
 }
 
-let _2 = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4,
-  _t5,
-  _t6,
-  _t7;
 const HoursTemplate = () => {
-  return html(_t || (_t = _2`
+  return html`
   <div class="row-headers" role="presentation">
-    ${0}
-  </div>`), repeat(x => x.hoursAsDatetime, html(_t2 || (_t2 = _2`<span role="rowheader">
-      <time datetime="${0}">
-						${0}
-					</time>
-				</span>`), (x, c) => new Intl.DateTimeFormat(c.parent.locales, {
+    ${repeat(x => x.hoursAsDatetime, html`<span role="rowheader">
+      <time datetime="${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
     hour: 'numeric',
     minute: 'numeric',
     hour12: false
-  }).format(x), (x, c) => new Intl.DateTimeFormat(c.parent.locales, {
+  }).format(x)}">
+						${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
     hour: 'numeric',
     hour12: c.parent.hour12
-  }).format(x))));
+  }).format(x)}
+					</time>
+				</span>`)}
+  </div>`;
 };
 const DaysTemplate = () => {
-  return html(_t3 || (_t3 = _2`
+  return html`
 			<div class="column-headers" role="row">
-				${0}
-			</div>`), repeat(x => x._generateDaysArr([getFirstDateOfTheWeek(x.datetime, x.startDay)]), html(_t4 || (_t4 = _2`
+				${repeat(x => x._generateDaysArr([getFirstDateOfTheWeek(x.datetime, x.startDay)]), html`
 						<div role="columnheader" tabindex="-1">
-              <time datetime=${0}>
+              <time datetime=${x => getValidDateString(x)}>
                 <h2>
 									<!-- TODO add to column aria-labelledby or describedby to count
                   events and related day e.g. "3 events, Sunday, March 8" -->
-									<em tabindex="0" role="button" aria-label=${0}>
-										${0}
-									</em>
-									<small aria-hidden="true">
-										${0}
-									</small>
-                </h2>
-              </time>
-						</div>`), x => getValidDateString(x), (x, c) => new Intl.DateTimeFormat(c.parent.locales, {
+									<em tabindex="0" role="button" aria-label=${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
     weekday: 'long',
     month: 'long',
     day: 'numeric'
-  }).format(x), (x, c) => new Intl.DateTimeFormat(c.parent.locales, {
+  }).format(x)}>
+										${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
     day: '2-digit'
-  }).format(x), (x, c) => new Intl.DateTimeFormat(c.parent.locales, {
+  }).format(x)}
+									</em>
+									<small aria-hidden="true">
+										${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
     weekday: 'short'
-  }).format(x))));
+  }).format(x)}
+									</small>
+                </h2>
+              </time>
+						</div>`)}
+			</div>`;
 };
-const ColumnTemplate = html(_t5 || (_t5 = _2`
+const ColumnTemplate = html`
             <div role="gridcell" tabindex="-1">
-              <slot name="day-${0}"></slot>
+              <slot name="day-${(_, c) => c.index}"></slot>
             </div>
-          `), (_, c) => c.index);
-const CalendarTemplate = () => html(_t6 || (_t6 = _2`
-  <div role="grid" @keydown=${0}>
-    ${0}
+          `;
+const CalendarTemplate = () => html`
+  <div role="grid" @keydown=${(x, c) => x.onKeydown(c.event)}>
+    ${DaysTemplate}
     <div role="row" class="calendar-row">
-      ${0}
+      ${HoursTemplate}
       <div class="calendar-grid-presentation" role="presentation">
         <div class="hours" role="list">
-          ${0}
+          ${repeat(x => Array.from({
+  length: x.hoursAsDatetime.length + 1
+}), html`
+            <div role="listitem"></div>`)}
         </div>
         <div class="columns" role="presentation">
-          ${0}
+          ${repeat(x => Array.from(Array(x._days)), ColumnTemplate, {
+  positioning: true
+})}
         </div>
         <slot></slot>
       </div>
     </div>
   </div>
-`), (x, c) => x.onKeydown(c.event), DaysTemplate, HoursTemplate, repeat(x => Array.from({
-  length: x.hoursAsDatetime.length + 1
-}), html(_t7 || (_t7 = _2`
-            <div role="listitem"></div>`))), repeat(x => Array.from(Array(x._days)), ColumnTemplate, {
-  positioning: true
-}));
+`;
 
 const calendarDefinition = Calendar.compose({
   baseName: 'calendar',

package/shared/definition16.js

@@ -1,73 +1,10 @@
-import { G as _export, i as descriptors, g as global$1, k as functionUncurryThis, B as hasOwnProperty_1, m as isCallable$1, f as objectDefineProperty, a6 as copyConstructorProperties$1, j as objectIsPrototypeOf, h as html, r as registerFactory } from './index.js';
+import { h as html, r as registerFactory } from './index.js';
 import { C as CalendarEvent } from './calendar-event.js';
-import './es.object.assign.js';
-import { t as toString$1 } from './to-string.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Aug 2023 09:40:18 GMT\n */\n:host {\n  display: contents;\n}\n\n.base {\n  /* 4 as the indentation limit */\n  /* per cell divider */\n  /* per cell divider */\n  --vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);\n  position: absolute;\n  z-index: var(--vvd-calendar-event--overlap-count);\n  top: calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));\n  overflow: hidden;\n  box-sizing: border-box;\n  padding: 4px 8px;\n  background-color: var(--_appearance-color-fill);\n  block-size: calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  inline-size: calc(100% - 8px - min(var(--vvd-calendar-event--indent), 32px));\n  margin-block-start: 2px;\n  margin-inline-end: 8px;\n  margin-inline-start: min(var(--vvd-calendar-event--indent), 32px);\n  max-block-size: calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px);\n}\n.base.connotation-accent {\n  /* @cssprop [--vvd-calendar-event-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-calendar-event-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-calendar-event-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-calendar-event-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100));\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-calendar-event-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-calendar-event-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-calendar-event-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-calendar-event-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100));\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-calendar-event-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-calendar-event-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-calendar-event-success-contrast=var(--vvd-color-success-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));\n  /* @cssprop [--vvd-calendar-event-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-calendar-event-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-calendar-event-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-calendar-event-alert-contrast=var(--vvd-color-alert-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));\n  /* @cssprop [--vvd-calendar-event-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100));\n}\n.base.connotation-warning {\n  /* @cssprop [--vvd-calendar-event-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-calendar-event-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-calendar-event-warning-contrast=var(--vvd-color-warning-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));\n  /* @cssprop [--vvd-calendar-event-warning-soft=var(--vvd-color-warning-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100));\n}\n.base.connotation-announcement {\n  /* @cssprop [--vvd-calendar-event-announcement-primary=var(--vvd-color-announcement-500)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));\n  /* @cssprop [--vvd-calendar-event-announcement-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-calendar-event-announcement-contrast=var(--vvd-color-announcement-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));\n  /* @cssprop [--vvd-calendar-event-announcement-soft=var(--vvd-color-announcement-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100));\n}\n.base:not(.connotation-accent, .connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-announcement) {\n  /* @cssprop [--vvd-calendar-event-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-calendar-event-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-calendar-event-information-contrast=var(--vvd-color-information-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));\n  /* @cssprop [--vvd-calendar-event-information-soft=var(--vvd-color-information-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base.appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n@supports (contain: content) {\n  .base {\n    contain: strict;\n  }\n}\n@supports not (contain: content) {\n  .base {\n    overflow: hidden;\n  }\n}\n.base:focus {\n  z-index: 2000;\n  filter: var(--vvd-shadow-surface-8dp);\n  outline: none;\n}\n\nh2 {\n  margin: 0;\n  font: var(--vvd-typography-base-condensed-bold);\n}\nh2 > strong {\n  font: inherit;\n}\n\np {\n  margin: 0;\n  font: var(--vvd-typography-base-condensed);\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 09 Aug 2023 13:23:44 GMT\n */\n:host {\n  display: contents;\n}\n\n.base {\n  /* 4 as the indentation limit */\n  /* per cell divider */\n  /* per cell divider */\n  --vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);\n  position: absolute;\n  z-index: var(--vvd-calendar-event--overlap-count);\n  top: calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));\n  overflow: hidden;\n  box-sizing: border-box;\n  padding: 4px 8px;\n  background-color: var(--_appearance-color-fill);\n  block-size: calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  inline-size: calc(100% - 8px - min(var(--vvd-calendar-event--indent), 32px));\n  margin-block-start: 2px;\n  margin-inline-end: 8px;\n  margin-inline-start: min(var(--vvd-calendar-event--indent), 32px);\n  max-block-size: calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px);\n}\n.base.connotation-accent {\n  /* @cssprop [--vvd-calendar-event-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-calendar-event-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-calendar-event-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-calendar-event-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100));\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-calendar-event-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-calendar-event-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-calendar-event-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-calendar-event-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100));\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-calendar-event-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-calendar-event-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-calendar-event-success-contrast=var(--vvd-color-success-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));\n  /* @cssprop [--vvd-calendar-event-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-calendar-event-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-calendar-event-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-calendar-event-alert-contrast=var(--vvd-color-alert-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));\n  /* @cssprop [--vvd-calendar-event-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100));\n}\n.base.connotation-warning {\n  /* @cssprop [--vvd-calendar-event-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-calendar-event-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-calendar-event-warning-contrast=var(--vvd-color-warning-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));\n  /* @cssprop [--vvd-calendar-event-warning-soft=var(--vvd-color-warning-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100));\n}\n.base.connotation-announcement {\n  /* @cssprop [--vvd-calendar-event-announcement-primary=var(--vvd-color-announcement-500)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));\n  /* @cssprop [--vvd-calendar-event-announcement-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-calendar-event-announcement-contrast=var(--vvd-color-announcement-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));\n  /* @cssprop [--vvd-calendar-event-announcement-soft=var(--vvd-color-announcement-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100));\n}\n.base:not(.connotation-accent, .connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-announcement) {\n  /* @cssprop [--vvd-calendar-event-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-calendar-event-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-calendar-event-information-contrast=var(--vvd-color-information-800)] */\n  --_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));\n  /* @cssprop [--vvd-calendar-event-information-soft=var(--vvd-color-information-100)] */\n  --_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base.appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n@supports (contain: content) {\n  .base {\n    contain: strict;\n  }\n}\n@supports not (contain: content) {\n  .base {\n    overflow: hidden;\n  }\n}\n.base:focus {\n  z-index: 2000;\n  filter: var(--vvd-shadow-surface-8dp);\n  outline: none;\n}\n\nh2 {\n  margin: 0;\n  font: var(--vvd-typography-base-condensed-bold);\n}\nh2 > strong {\n  font: inherit;\n}\n\np {\n  margin: 0;\n  font: var(--vvd-typography-base-condensed);\n}";
 
-var $ = _export;
-var DESCRIPTORS = descriptors;
-var global = global$1;
-var uncurryThis = functionUncurryThis;
-var hasOwn = hasOwnProperty_1;
-var isCallable = isCallable$1;
-var isPrototypeOf = objectIsPrototypeOf;
-var toString = toString$1;
-var defineProperty = objectDefineProperty.f;
-var copyConstructorProperties = copyConstructorProperties$1;
-
-var NativeSymbol = global.Symbol;
-var SymbolPrototype = NativeSymbol && NativeSymbol.prototype;
-
-if (DESCRIPTORS && isCallable(NativeSymbol) && (!('description' in SymbolPrototype) ||
-  // Safari 12 bug
-  NativeSymbol().description !== undefined
-)) {
-  var EmptyStringDescriptionStore = {};
-  // wrap Symbol constructor for correct work with undefined description
-  var SymbolWrapper = function Symbol() {
-    var description = arguments.length < 1 || arguments[0] === undefined ? undefined : toString(arguments[0]);
-    var result = isPrototypeOf(SymbolPrototype, this)
-      ? new NativeSymbol(description)
-      // in Edge 13, String(Symbol(undefined)) === 'Symbol(undefined)'
-      : description === undefined ? NativeSymbol() : NativeSymbol(description);
-    if (description === '') EmptyStringDescriptionStore[result] = true;
-    return result;
-  };
-
-  copyConstructorProperties(SymbolWrapper, NativeSymbol);
-  SymbolWrapper.prototype = SymbolPrototype;
-  SymbolPrototype.constructor = SymbolWrapper;
-
-  var NATIVE_SYMBOL = String(NativeSymbol('test')) == 'Symbol(test)';
-  var thisSymbolValue = uncurryThis(SymbolPrototype.valueOf);
-  var symbolDescriptiveString = uncurryThis(SymbolPrototype.toString);
-  var regexp = /^Symbol\((.*)\)[^)]+$/;
-  var replace = uncurryThis(''.replace);
-  var stringSlice = uncurryThis(''.slice);
-
-  defineProperty(SymbolPrototype, 'description', {
-    configurable: true,
-    get: function description() {
-      var symbol = thisSymbolValue(this);
-      if (hasOwn(EmptyStringDescriptionStore, symbol)) return '';
-      var string = symbolDescriptiveString(symbol);
-      var desc = NATIVE_SYMBOL ? stringSlice(string, 7, -1) : replace(string, regexp, '$1');
-      return desc === '' ? undefined : desc;
-    }
-  });
-
-  $({ global: true, constructor: true, forced: true }, {
-    Symbol: SymbolWrapper
-  });
-}
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3;
 const getClasses = ({
   connotation,
   appearance
@@ -86,16 +23,16 @@ const getStyles = ({
   });
   return Object.entries(stylesObj).map(entry => entry.join(':')).join(';');
 };
-const CalendarEventTemplate = () => html(_t || (_t = _`
+const CalendarEventTemplate = () => html`
 <div
-  style="${0}"
-  class="${0}"
+  style="${getStyles}"
+  class="${getClasses}"
   role="button"
   tabindex="0"
 >
-  ${0}
-  ${0}
-</div>`), getStyles, getClasses, when(x => x.heading, html(_t2 || (_t2 = _`<h2><strong>${0}</strong></h2>`), x => x.heading)), when(x => x.description, html(_t3 || (_t3 = _`<p>${0}</p>`), x => x.description)));
+  ${when(x => x.heading, html`<h2><strong>${x => x.heading}</strong></h2>`)}
+  ${when(x => x.description, html`<p>${x => x.description}</p>`)}
+</div>`;
 
 const calendarEventDefinition = CalendarEvent.compose({
   baseName: 'calendar-event',