@vonage/vivid 3.48.0 → 3.49.0-preview.0

package/shared/definition11.cjs

@@ -0,0 +1,164 @@
+'use strict';
+
+const index = require('./index.cjs');
+const definition$1 = require('./definition26.cjs');
+const definition$2 = require('./definition58.cjs');
+const definition = require('./definition37.cjs');
+const affix = require('./affix.cjs');
+const button = require('./button.cjs');
+const applyMixins = require('./apply-mixins.cjs');
+const enums = require('./enums.cjs');
+const ref = require('./ref.cjs');
+const when = require('./when.cjs');
+const classNames = require('./class-names.cjs');
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class Button extends button.Button {
+  constructor() {
+    super();
+    this.stacked = false;
+    this.pending = false;
+    this.title = "";
+  }
+}
+__decorateClass([
+  index.attr({ converter: { fromView: (value) => value || null, toView: (value) => value || null } })
+], Button.prototype, "title", 2);
+__decorateClass([
+  index.attr
+], Button.prototype, "connotation", 2);
+__decorateClass([
+  index.attr
+], Button.prototype, "shape", 2);
+__decorateClass([
+  index.attr
+], Button.prototype, "appearance", 2);
+__decorateClass([
+  index.attr
+], Button.prototype, "size", 2);
+__decorateClass([
+  index.attr({
+    mode: "boolean",
+    attribute: "stacked"
+  })
+], Button.prototype, "stacked", 2);
+__decorateClass([
+  index.attr({
+    mode: "boolean",
+    attribute: "pending"
+  })
+], Button.prototype, "pending", 2);
+__decorateClass([
+  index.attr
+], Button.prototype, "label", 2);
+applyMixins.applyMixins(Button, affix.AffixIconWithTrailing);
+
+const styles = ":host{display:inline-block}.control{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);border-radius:var(--_button-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);gap:var(--_button-icon-gap);vertical-align:middle;--focus-stroke-gap-color: transparent}.control.connotation-cta{--_connotation-color-primary: var(--vvd-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-button-cta-faint, var(--vvd-color-cta-50))}.control.connotation-success{--_connotation-color-primary: var(--vvd-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-button-success-faint, var(--vvd-color-success-50))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-button-alert-faint, var(--vvd-color-alert-50))}.control:not(.connotation-cta,.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50))}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.control{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(:disabled,.disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(:disabled,.disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:active,.active):where(:not(:disabled,.disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:where(:active,.active):where(:not(:disabled,.disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control .text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--button-line-clamp, 1);max-inline-size:100%}.control:not(.icon-only){inline-size:100%}.control.appearance-filled{--focus-stroke-gap-color: unset}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.control{user-select:none}}.control:not(:disabled){cursor:pointer}.control:disabled{cursor:not-allowed}.control.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_button-block-size)}}.control:not(.stacked).size-super-condensed{--_button-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-condensed-bold)}.control:not(.stacked).size-super-condensed:not(.icon-only){--_button-icon-gap: 4px;padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-condensed-bold)}.control:not(.stacked).size-condensed:not(.icon-only){--_button-icon-gap: 8px;padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-extended-bold)}.control:not(.stacked).size-expanded:not(.icon-only){--_button-icon-gap: 10px;padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-bold)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_button-icon-gap: 8px;padding-inline:16px}.control:not(.shape-pill){--_button-border-radius: 8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius: 4px}.control.shape-pill:not(.icon-only,.stacked){--_button-border-radius: 24px}.control.shape-pill.stacked{--_button-border-radius: 24px}.control.shape-pill.icon-only{--_button-border-radius: 50%}.control.stacked{flex-direction:column;justify-content:center}.control.stacked.size-super-condensed{--stacked-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_button-block-size: calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold)}.control.stacked.size-super-condensed:not(.icon-only){--_button-icon-gap: 4px;padding-inline:8px}.control.stacked.size-condensed{--stacked-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_button-block-size: calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold)}.control.stacked.size-condensed:not(.icon-only){--_button-icon-gap: 6px;padding-inline:12px}.control.stacked.size-expanded{--stacked-size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_button-block-size: calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold)}.control.stacked.size-expanded:not(.icon-only){--_button-icon-gap: 10px;padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_button-block-size: calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_button-icon-gap: 8px;padding-inline:16px}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}.control.stacked>slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked)>slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}:host(:not([icon])) .pending{position:absolute}:host(:not([icon])) .pending+.text{visibility:hidden}\n";
+
+const getAppearanceClassName = (appearance, disabled) => {
+  let className = `appearance-${appearance}`;
+  disabled && (className += " disabled");
+  return className;
+};
+const getClasses = ({
+  connotation,
+  appearance,
+  shape,
+  iconTrailing,
+  icon,
+  label,
+  disabled,
+  stacked,
+  size,
+  iconSlottedContent
+}) => classNames.classNames(
+  "control",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  [getAppearanceClassName(appearance, disabled), Boolean(appearance)],
+  [`shape-${shape}`, Boolean(shape)],
+  [`size-${size}`, Boolean(size)],
+  ["icon-only", !label && !!(icon || iconSlottedContent?.length)],
+  ["icon-trailing", iconTrailing],
+  ["stacked", Boolean(stacked)]
+);
+function renderIconOrPending(context, icon, pending, size = enums.Size.Normal) {
+  if (pending && size != enums.Size.SuperCondensed) {
+    const progressTag = context.tagFor(definition.ProgressRing);
+    const progressSize = {
+      [enums.Size.Condensed]: "-6",
+      [enums.Size.Normal]: "-5",
+      [enums.Size.Expanded]: "-4"
+    };
+    return index.html`<span class="icon pending"><${progressTag} size="${progressSize[size]}"></${progressTag}></span>`;
+  } else {
+    const affixIconTemplate = affix.affixIconTemplateFactory(context);
+    return affixIconTemplate(icon, affix.IconWrapper.Slot, affix.IconAriaHidden.Hidden);
+  }
+}
+const buttonTemplate = (context) => {
+  return index.html`
+		<template role="presentation">
+			<button
+				class="${getClasses}"
+				?autofocus="${(x) => x.autofocus}"
+				?disabled="${(x) => x.disabled || x.pending}"
+				form="${(x) => x.formId}"
+				formaction="${(x) => x.formaction}"
+				formenctype="${(x) => x.formenctype}"
+				formmethod="${(x) => x.formmethod}"
+				formnovalidate="${(x) => x.formnovalidate}"
+				formtarget="${(x) => x.formtarget}"
+				name="${(x) => x.name}"
+				type="${(x) => x.type}"
+				value="${(x) => x.value}"
+				aria-atomic="${(x) => x.ariaAtomic}"
+				aria-busy="${(x) => x.ariaBusy}"
+				aria-current="${(x) => x.ariaCurrent}"
+				aria-details="${(x) => x.ariaDetails}"
+				aria-disabled="${(x) => x.ariaDisabled}"
+				aria-expanded="${(x) => x.ariaExpanded}"
+				aria-haspopup="${(x) => x.ariaHaspopup}"
+				aria-hidden="${(x) => x.ariaHidden}"
+				aria-invalid="${(x) => x.ariaInvalid}"
+				aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+				aria-label="${(x) => x.ariaLabel}"
+				aria-live="${(x) => x.ariaLive}"
+				aria-pressed="${(x) => x.ariaPressed}"
+				aria-relevant="${(x) => x.ariaRelevant}"
+				aria-roledescription="${(x) => x.ariaRoledescription}"
+				title="${(x) => x.title}"
+				${ref.ref("control")}
+			>
+				${(x) => renderIconOrPending(context, x.icon, x.pending, x.size)}
+				${when.when((x) => x.label, index.html`<span class="text" role="presentation">${(x) => x.label}</span>`)}
+			</button>
+		</template>
+`;
+};
+
+const buttonDefinition = Button.compose({
+  baseName: "button",
+  baseClass: button.Button,
+  template: buttonTemplate,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+const buttonRegistries = [buttonDefinition(), ...definition$1.iconRegistries, ...definition$2.focusRegistries, ...definition.progressRingRegistries];
+const registerButton = index.registerFactory(buttonRegistries);
+
+exports.Button = Button;
+exports.buttonDefinition = buttonDefinition;
+exports.buttonRegistries = buttonRegistries;
+exports.registerButton = registerButton;

package/shared/definition11.js

@@ -2,7 +2,7 @@ import { a as attr, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition26.js';
 import { f as focusRegistries } from './definition58.js';
 import { P as ProgressRing, a as progressRingRegistries } from './definition37.js';
-import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper, c as IconAriaHidden } from './affix.js';
 import { B as Button$1 } from './button.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { b as Size } from './enums.js';
@@ -100,45 +100,47 @@ function renderIconOrPending(context, icon, pending, size = Size.Normal) {
     return html`<span class="icon pending"><${progressTag} size="${progressSize[size]}"></${progressTag}></span>`;
   } else {
     const affixIconTemplate = affixIconTemplateFactory(context);
-    return affixIconTemplate(icon, IconWrapper.Slot);
+    return affixIconTemplate(icon, IconWrapper.Slot, IconAriaHidden.Hidden);
   }
 }
 const buttonTemplate = (context) => {
   return html`
-	<button
-		class="${getClasses}"
-		?autofocus="${(x) => x.autofocus}"
-		?disabled="${(x) => x.disabled || x.pending}"
-		form="${(x) => x.formId}"
-		formaction="${(x) => x.formaction}"
-		formenctype="${(x) => x.formenctype}"
-		formmethod="${(x) => x.formmethod}"
-		formnovalidate="${(x) => x.formnovalidate}"
-		formtarget="${(x) => x.formtarget}"
-		name="${(x) => x.name}"
-		type="${(x) => x.type}"
-		value="${(x) => x.value}"
-		aria-atomic="${(x) => x.ariaAtomic}"
-		aria-busy="${(x) => x.ariaBusy}"
-		aria-current="${(x) => x.ariaCurrent}"
-		aria-details="${(x) => x.ariaDetails}"
-		aria-disabled="${(x) => x.ariaDisabled}"
-		aria-expanded="${(x) => x.ariaExpanded}"
-		aria-haspopup="${(x) => x.ariaHaspopup}"
-		aria-hidden="${(x) => x.ariaHidden}"
-		aria-invalid="${(x) => x.ariaInvalid}"
-		aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
-		aria-label="${(x) => x.ariaLabel}"
-		aria-live="${(x) => x.ariaLive}"
-		aria-pressed="${(x) => x.ariaPressed}"
-		aria-relevant="${(x) => x.ariaRelevant}"
-		aria-roledescription="${(x) => x.ariaRoledescription}"
-		title="${(x) => x.title}"
-		${ref("control")}
-	>
-		${(x) => renderIconOrPending(context, x.icon, x.pending, x.size)}
-		${when((x) => x.label, html`<span class="text">${(x) => x.label}</span>`)}
-	</button>
+		<template role="presentation">
+			<button
+				class="${getClasses}"
+				?autofocus="${(x) => x.autofocus}"
+				?disabled="${(x) => x.disabled || x.pending}"
+				form="${(x) => x.formId}"
+				formaction="${(x) => x.formaction}"
+				formenctype="${(x) => x.formenctype}"
+				formmethod="${(x) => x.formmethod}"
+				formnovalidate="${(x) => x.formnovalidate}"
+				formtarget="${(x) => x.formtarget}"
+				name="${(x) => x.name}"
+				type="${(x) => x.type}"
+				value="${(x) => x.value}"
+				aria-atomic="${(x) => x.ariaAtomic}"
+				aria-busy="${(x) => x.ariaBusy}"
+				aria-current="${(x) => x.ariaCurrent}"
+				aria-details="${(x) => x.ariaDetails}"
+				aria-disabled="${(x) => x.ariaDisabled}"
+				aria-expanded="${(x) => x.ariaExpanded}"
+				aria-haspopup="${(x) => x.ariaHaspopup}"
+				aria-hidden="${(x) => x.ariaHidden}"
+				aria-invalid="${(x) => x.ariaInvalid}"
+				aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+				aria-label="${(x) => x.ariaLabel}"
+				aria-live="${(x) => x.ariaLive}"
+				aria-pressed="${(x) => x.ariaPressed}"
+				aria-relevant="${(x) => x.ariaRelevant}"
+				aria-roledescription="${(x) => x.ariaRoledescription}"
+				title="${(x) => x.title}"
+				${ref("control")}
+			>
+				${(x) => renderIconOrPending(context, x.icon, x.pending, x.size)}
+				${when((x) => x.label, html`<span class="text" role="presentation">${(x) => x.label}</span>`)}
+			</button>
+		</template>
 `;
 };
 

package/shared/definition12.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+const index = require('./index.cjs');
+const calendarEvent = require('./calendar-event.cjs');
+const when = require('./when.cjs');
+const classNames = require('./class-names.cjs');
+
+const styles = ":host{display:contents}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);border-radius:8px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent),32px));margin-block-start:2px;margin-inline-end:8px;margin-inline-start:min(var(--vvd-calendar-event--indent),32px);max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}.base.connotation-accent{--_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));--_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));--_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{z-index:2000;filter:var(--vvd-shadow-surface-8dp);outline:none}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}\n";
+
+const getClasses = ({
+  connotation,
+  appearance
+}) => classNames.classNames(
+  "base",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  [`appearance-${appearance}`, Boolean(appearance)]
+);
+const getStyles = ({ start, duration, overlapCount }) => {
+  const stylesObj = {
+    ...overlapCount && { "--vvd-calendar-event--overlap-count": overlapCount },
+    ...start && { "--vvd-calendar-event--start": start },
+    ...duration && { "--vvd-calendar-event--duration": duration }
+  };
+  return Object.entries(stylesObj).map((entry) => entry.join(":")).join(";");
+};
+const CalendarEventTemplate = () => index.html`
+<div
+  style="${getStyles}"
+  class="${getClasses}"
+  role="button"
+  tabindex="0"
+>
+  ${when.when((x) => x.heading, index.html`<h2><strong>${(x) => x.heading}</strong></h2>`)}
+  ${when.when((x) => x.description, index.html`<p>${(x) => x.description}</p>`)}
+</div>`;
+
+const calendarEventDefinition = calendarEvent.CalendarEvent.compose({
+  baseName: "calendar-event",
+  template: CalendarEventTemplate,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+const calendarEventRegistries = [calendarEventDefinition()];
+const registerCalendarEvent = index.registerFactory(calendarEventRegistries);
+
+exports.calendarEventDefinition = calendarEventDefinition;
+exports.calendarEventRegistries = calendarEventRegistries;
+exports.registerCalendarEvent = registerCalendarEvent;