@vonage/vivid 4.14.0 → 4.14.1

package/shared/listbox.cjs

@@ -4,7 +4,6 @@ const definition = require('./definition35.cjs');
 const vividElement = require('./vivid-element.cjs');
 const keyCodes = require('./key-codes.cjs');
 const strings = require('./strings.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
 const applyMixins = require('./apply-mixins2.cjs');
 const ariaGlobal = require('./aria-global.cjs');
 
@@ -95,12 +94,12 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
    * @public
    */
   get options() {
-    defineVividComponent.Observable.track(this, "options");
+    vividElement.Observable.track(this, "options");
     return this._options;
   }
   set options(value) {
     this._options = value;
-    defineVividComponent.Observable.notify(this, "options");
+    vividElement.Observable.notify(this, "options");
   }
   static {
     /**
@@ -347,7 +346,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
   selectedOptionsChanged(_, next) {
     const filteredNext = next.filter(_Listbox.slottedOptionFilter);
     this.options.forEach((o) => {
-      const notifier = defineVividComponent.Observable.getNotifier(o);
+      const notifier = vividElement.Observable.getNotifier(o);
       notifier.unsubscribe(this, "selected");
       o.selected = filteredNext.includes(o);
       notifier.subscribe(this, "selected");
@@ -458,38 +457,38 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
 };
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], _Listbox.prototype, "disabled");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], _Listbox.prototype, "selectedIndex");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], _Listbox.prototype, "selectedOptions");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], _Listbox.prototype, "slottedOptions");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], _Listbox.prototype, "typeaheadBuffer");
 let Listbox = _Listbox;
 class DelegatesARIAListbox {
 }
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], DelegatesARIAListbox.prototype, "ariaActiveDescendant");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], DelegatesARIAListbox.prototype, "ariaDisabled");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], DelegatesARIAListbox.prototype, "ariaExpanded");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], DelegatesARIAListbox.prototype, "ariaMultiSelectable");
 applyMixins.applyMixins(DelegatesARIAListbox, ariaGlobal.ARIAGlobalStatesAndProperties);
 applyMixins.applyMixins(Listbox, DelegatesARIAListbox);

package/shared/listbox.js

@@ -1,8 +1,7 @@
 import { i as isListboxOption } from './definition35.js';
-import { V as VividElement } from './vivid-element.js';
+import { V as VividElement, O as Observable, a as attr, o as observable } from './vivid-element.js';
 import { a as keySpace, b as keyEscape, k as keyEnter, c as keyTab, d as keyEnd, e as keyArrowUp, f as keyArrowDown, g as keyHome } from './key-codes.js';
 import { u as uniqueId } from './strings.js';
-import { O as Observable, a as attr, o as observable } from './defineVividComponent.js';
 import { a as applyMixins } from './apply-mixins2.js';
 import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
 

package/shared/listbox2.cjs

@@ -1,11 +1,10 @@
 'use strict';
 
 const keyCodes$1 = require('./key-codes.cjs');
-const foundationElement = require('./foundation-element.cjs');
-const ariaGlobal = require('./aria-global2.cjs');
 const keyCodes = require('./key-codes2.cjs');
+const ariaGlobal = require('./aria-global2.cjs');
 const applyMixins = require('./apply-mixins2.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const strings = require('./strings2.cjs');
 
 /**
@@ -53,7 +52,7 @@ function isListboxOption(el) {
  *
  * @public
  */
-class ListboxOption extends foundationElement.FoundationElement {
+class ListboxOption extends keyCodes.FoundationElement {
     constructor(text, value, defaultSelected, selected) {
         super();
         /**
@@ -171,37 +170,37 @@ class ListboxOption extends foundationElement.FoundationElement {
         if (this.proxy instanceof HTMLOptionElement) {
             this.proxy.value = newValue;
         }
-        defineVividComponent.Observable.notify(this, "value");
+        vividElement.Observable.notify(this, "value");
     }
     get value() {
         var _a;
-        defineVividComponent.Observable.track(this, "value");
+        vividElement.Observable.track(this, "value");
         return (_a = this._value) !== null && _a !== void 0 ? _a : this.text;
     }
     get form() {
         return this.proxy ? this.proxy.form : null;
     }
 }
-foundationElement.__decorate([
-    defineVividComponent.observable
+keyCodes.__decorate([
+    vividElement.observable
 ], ListboxOption.prototype, "checked", void 0);
-foundationElement.__decorate([
-    defineVividComponent.observable
+keyCodes.__decorate([
+    vividElement.observable
 ], ListboxOption.prototype, "content", void 0);
-foundationElement.__decorate([
-    defineVividComponent.observable
+keyCodes.__decorate([
+    vividElement.observable
 ], ListboxOption.prototype, "defaultSelected", void 0);
-foundationElement.__decorate([
-    defineVividComponent.attr({ mode: "boolean" })
+keyCodes.__decorate([
+    vividElement.attr({ mode: "boolean" })
 ], ListboxOption.prototype, "disabled", void 0);
-foundationElement.__decorate([
-    defineVividComponent.attr({ attribute: "selected", mode: "boolean" })
+keyCodes.__decorate([
+    vividElement.attr({ attribute: "selected", mode: "boolean" })
 ], ListboxOption.prototype, "selectedAttribute", void 0);
-foundationElement.__decorate([
-    defineVividComponent.observable
+keyCodes.__decorate([
+    vividElement.observable
 ], ListboxOption.prototype, "selected", void 0);
-foundationElement.__decorate([
-    defineVividComponent.attr({ attribute: "value", mode: "fromView" })
+keyCodes.__decorate([
+    vividElement.attr({ attribute: "value", mode: "fromView" })
 ], ListboxOption.prototype, "initialValue", void 0);
 /**
  * States and properties relating to the ARIA `option` role.
@@ -210,17 +209,17 @@ foundationElement.__decorate([
  */
 class DelegatesARIAListboxOption {
 }
-foundationElement.__decorate([
-    defineVividComponent.observable
+keyCodes.__decorate([
+    vividElement.observable
 ], DelegatesARIAListboxOption.prototype, "ariaChecked", void 0);
-foundationElement.__decorate([
-    defineVividComponent.observable
+keyCodes.__decorate([
+    vividElement.observable
 ], DelegatesARIAListboxOption.prototype, "ariaPosInSet", void 0);
-foundationElement.__decorate([
-    defineVividComponent.observable
+keyCodes.__decorate([
+    vividElement.observable
 ], DelegatesARIAListboxOption.prototype, "ariaSelected", void 0);
-foundationElement.__decorate([
-    defineVividComponent.observable
+keyCodes.__decorate([
+    vividElement.observable
 ], DelegatesARIAListboxOption.prototype, "ariaSetSize", void 0);
 applyMixins.applyMixins(DelegatesARIAListboxOption, ariaGlobal.ARIAGlobalStatesAndProperties);
 applyMixins.applyMixins(ListboxOption, keyCodes.StartEnd, DelegatesARIAListboxOption);
@@ -233,7 +232,7 @@ applyMixins.applyMixins(ListboxOption, keyCodes.StartEnd, DelegatesARIAListboxOp
  *
  * @public
  */
-let Listbox$1 = class Listbox extends foundationElement.FoundationElement {
+let Listbox$1 = class Listbox extends keyCodes.FoundationElement {
     constructor() {
         super(...arguments);
         /**
@@ -312,12 +311,12 @@ let Listbox$1 = class Listbox extends foundationElement.FoundationElement {
      * @public
      */
     get options() {
-        defineVividComponent.Observable.track(this, "options");
+        vividElement.Observable.track(this, "options");
         return this._options;
     }
     set options(value) {
         this._options = value;
-        defineVividComponent.Observable.notify(this, "options");
+        vividElement.Observable.notify(this, "options");
     }
     /**
      * Flag for the typeahead timeout expiration.
@@ -579,7 +578,7 @@ let Listbox$1 = class Listbox extends foundationElement.FoundationElement {
         var _a;
         const filteredNext = next.filter(Listbox.slottedOptionFilter);
         (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(o => {
-            const notifier = defineVividComponent.Observable.getNotifier(o);
+            const notifier = vividElement.Observable.getNotifier(o);
             notifier.unsubscribe(this, "selected");
             o.selected = filteredNext.includes(o);
             notifier.subscribe(this, "selected");
@@ -710,20 +709,20 @@ Listbox$1.slottedOptionFilter = (n) => isListboxOption(n) && !n.hidden;
  * @internal
  */
 Listbox$1.TYPE_AHEAD_TIMEOUT_MS = 1000;
-foundationElement.__decorate([
-    defineVividComponent.attr({ mode: "boolean" })
+keyCodes.__decorate([
+    vividElement.attr({ mode: "boolean" })
 ], Listbox$1.prototype, "disabled", void 0);
-foundationElement.__decorate([
-    defineVividComponent.observable
+keyCodes.__decorate([
+    vividElement.observable
 ], Listbox$1.prototype, "selectedIndex", void 0);
-foundationElement.__decorate([
-    defineVividComponent.observable
+keyCodes.__decorate([
+    vividElement.observable
 ], Listbox$1.prototype, "selectedOptions", void 0);
-foundationElement.__decorate([
-    defineVividComponent.observable
+keyCodes.__decorate([
+    vividElement.observable
 ], Listbox$1.prototype, "slottedOptions", void 0);
-foundationElement.__decorate([
-    defineVividComponent.observable
+keyCodes.__decorate([
+    vividElement.observable
 ], Listbox$1.prototype, "typeaheadBuffer", void 0);
 /**
  * Includes ARIA states and properties relating to the ARIA listbox role
@@ -732,17 +731,17 @@ foundationElement.__decorate([
  */
 class DelegatesARIAListbox {
 }
-foundationElement.__decorate([
-    defineVividComponent.observable
+keyCodes.__decorate([
+    vividElement.observable
 ], DelegatesARIAListbox.prototype, "ariaActiveDescendant", void 0);
-foundationElement.__decorate([
-    defineVividComponent.observable
+keyCodes.__decorate([
+    vividElement.observable
 ], DelegatesARIAListbox.prototype, "ariaDisabled", void 0);
-foundationElement.__decorate([
-    defineVividComponent.observable
+keyCodes.__decorate([
+    vividElement.observable
 ], DelegatesARIAListbox.prototype, "ariaExpanded", void 0);
-foundationElement.__decorate([
-    defineVividComponent.observable
+keyCodes.__decorate([
+    vividElement.observable
 ], DelegatesARIAListbox.prototype, "ariaMultiSelectable", void 0);
 applyMixins.applyMixins(DelegatesARIAListbox, ariaGlobal.ARIAGlobalStatesAndProperties);
 applyMixins.applyMixins(Listbox$1, DelegatesARIAListbox);
@@ -1126,7 +1125,7 @@ class ListboxElement extends Listbox$1 {
         var _a;
         const size = Math.max(0, parseInt((_a = next === null || next === void 0 ? void 0 : next.toFixed()) !== null && _a !== void 0 ? _a : "", 10));
         if (size !== next) {
-            defineVividComponent.DOM.queueUpdate(() => {
+            vividElement.DOM.queueUpdate(() => {
                 this.size = size;
             });
         }
@@ -1182,14 +1181,14 @@ class ListboxElement extends Listbox$1 {
         }
     }
 }
-foundationElement.__decorate([
-    defineVividComponent.observable
+keyCodes.__decorate([
+    vividElement.observable
 ], ListboxElement.prototype, "activeIndex", void 0);
-foundationElement.__decorate([
-    defineVividComponent.attr({ mode: "boolean" })
+keyCodes.__decorate([
+    vividElement.attr({ mode: "boolean" })
 ], ListboxElement.prototype, "multiple", void 0);
-foundationElement.__decorate([
-    defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
+keyCodes.__decorate([
+    vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], ListboxElement.prototype, "size", void 0);
 
 var __defProp = Object.defineProperty;
@@ -1255,13 +1254,13 @@ class Listbox extends ListboxElement {
   }
 }
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Listbox.prototype, "appearance");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Listbox.prototype, "orientation");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Listbox.prototype, "shape");
 
 exports.Listbox = Listbox;

package/shared/listbox2.js

@@ -1,9 +1,8 @@
 import { h as keyArrowLeft, i as keyArrowRight } from './key-codes.js';
-import { _ as __decorate, F as FoundationElement } from './foundation-element.js';
+import { _ as __decorate, S as StartEnd, F as FoundationElement, g as keySpace, h as keyEscape, k as keyEnter, i as keyTab, e as keyEnd, d as keyArrowUp, c as keyArrowDown, f as keyHome } from './key-codes2.js';
 import { A as ARIAGlobalStatesAndProperties } from './aria-global2.js';
-import { S as StartEnd, g as keySpace, h as keyEscape, k as keyEnter, i as keyTab, e as keyEnd, d as keyArrowUp, c as keyArrowDown, f as keyHome } from './key-codes2.js';
 import { a as applyMixins } from './apply-mixins2.js';
-import { o as observable, a as attr, O as Observable, D as DOM, n as nullableNumberConverter } from './defineVividComponent.js';
+import { o as observable, a as attr, O as Observable, D as DOM, n as nullableNumberConverter } from './vivid-element.js';
 import { u as uniqueId, i as inRange } from './strings2.js';
 
 /**

package/shared/localized.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const locales_enUS = require('../locales/en-US.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -18,7 +18,7 @@ class CurrentLocale {
   }
 }
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], CurrentLocale.prototype, "locale");
 const currentLocale = new CurrentLocale();
 const setLocale = (locale) => {

package/shared/localized.js

@@ -1,5 +1,5 @@
 import enUS from '../locales/en-US.js';
-import { o as observable } from './defineVividComponent.js';
+import { o as observable } from './vivid-element.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/presentationDate.cjs

@@ -4,7 +4,7 @@ const definition$1 = require('./definition11.cjs');
 const definition = require('./definition63.cjs');
 const textField = require('./text-field2.cjs');
 const definition$2 = require('./definition22.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const ref = require('./ref.cjs');
 const slotted = require('./slotted.cjs');
 const repeat = require('./repeat.cjs');
@@ -13,7 +13,6 @@ const classNames = require('./class-names.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const index = require('./index.cjs');
 const formAssociated = require('./form-associated.cjs');
-const vividElement = require('./vivid-element.cjs');
 const trappedFocus = require('./trapped-focus.cjs');
 const formElements = require('./form-elements.cjs');
 const localized = require('./localized.cjs');
@@ -5527,10 +5526,10 @@ const monthToStr = ({ month, year }) => `${year.toString().padStart(4, "0")}-${(
 
 function renderDialogHeader(context) {
   const buttonTag = context.tagFor(definition$1.Button);
-  return defineVividComponent.html`<div class="header">
+  return vividElement.html`<div class="header">
 		${when.when(
     (x) => x.prevYearButton,
-    defineVividComponent.html`
+    vividElement.html`
 					<${buttonTag}
 						tabindex="1"
 						class="vwc-button"
@@ -5544,7 +5543,7 @@ function renderDialogHeader(context) {
   )}
 		${when.when(
     (x) => x.prevMonthButton,
-    defineVividComponent.html`
+    vividElement.html`
 					<${buttonTag}
 						tabindex="1"
 						class="vwc-button"
@@ -5559,7 +5558,7 @@ function renderDialogHeader(context) {
 		<div class="title">
 			${when.when(
     (x) => x.titleClickable,
-    defineVividComponent.html`
+    vividElement.html`
 					<button
 						tabindex="1"
 						id="${(x) => `grid-label-${x.id}`}"
@@ -5573,7 +5572,7 @@ function renderDialogHeader(context) {
   )}
 			${when.when(
     (x) => !x.titleClickable,
-    defineVividComponent.html`
+    vividElement.html`
 					<div
 						id="${(x) => `grid-label-${x.id}`}"
 						class="title-action"
@@ -5587,7 +5586,7 @@ function renderDialogHeader(context) {
 
 		${when.when(
     (x) => x.nextMonthButton,
-    defineVividComponent.html`
+    vividElement.html`
 				<${buttonTag}
 					tabindex="1"
 					class="vwc-button"
@@ -5601,7 +5600,7 @@ function renderDialogHeader(context) {
   )}
 		${when.when(
     (x) => x.nextYearButton,
-    defineVividComponent.html`
+    vividElement.html`
 				<${buttonTag}
 					tabindex="1"
 					class="vwc-button"
@@ -5617,7 +5616,7 @@ function renderDialogHeader(context) {
 }
 function renderCalendarGrid(context) {
   const dividerTag = context.tagFor(definition$2.Divider);
-  return defineVividComponent.html`<div
+  return vividElement.html`<div
 		class="calendar"
 		role="grid"
 		aria-labelledby="${(x) => `grid-label-${x.id}`}"
@@ -5625,7 +5624,7 @@ function renderCalendarGrid(context) {
 		<div class="calendar-weekdays" role="row">
 			${repeat.repeat(
     (x) => x.calendar.weekdays,
-    defineVividComponent.html`
+    vividElement.html`
 					<div
 						class="calendar-weekday"
 						role="columnheader"
@@ -5639,17 +5638,17 @@ function renderCalendarGrid(context) {
 		<${dividerTag} class="calendar-separator" role="presentation"></${dividerTag}>
 		${repeat.repeat(
     (x) => x.calendar.grid,
-    defineVividComponent.html` <div class="calendar-week" role="row">
+    vividElement.html` <div class="calendar-week" role="row">
 				${repeat.repeat(
       (x) => x,
-      defineVividComponent.html`
+      vividElement.html`
 			${when.when(
         (x, c) => c.parentContext.parentContext.parent._hideDatesOutsideMonth && x.isOutsideMonth,
-        defineVividComponent.html`<div class="calendar-day"></div>`
+        vividElement.html`<div class="calendar-day"></div>`
       )}
 			${when.when(
         (x, c) => !c.parentContext.parentContext.parent._hideDatesOutsideMonth || !x.isOutsideMonth,
-        defineVividComponent.html` <span role="gridcell">
+        vividElement.html` <span role="gridcell">
 					<button
 						class="${(x, c) => classNames.classNames(
           "calendar-day",
@@ -5707,7 +5706,7 @@ function renderCalendarGrid(context) {
 }
 function renderMonthPickerGrid(context) {
   const dividerTag = context.tagFor(definition$2.Divider);
-  return defineVividComponent.html`
+  return vividElement.html`
 		<${dividerTag}
 			class="months-separator"
 			role="presentation"
@@ -5719,11 +5718,11 @@ function renderMonthPickerGrid(context) {
 	>
 		${repeat.repeat(
     (x) => x.months,
-    defineVividComponent.html`
+    vividElement.html`
 				<div class="months-row" role="row">
 					${repeat.repeat(
       (x) => x,
-      defineVividComponent.html`
+      vividElement.html`
 							<span role="gridcell">
 								<button
 									class="${(x, c) => classNames.classNames(
@@ -5782,7 +5781,7 @@ const DatePickerBaseTemplate = (context) => {
   const popupTag = context.tagFor(definition.Popup);
   const textFieldTag = context.tagFor(textField.TextField);
   const buttonTag = context.tagFor(definition$1.Button);
-  return defineVividComponent.html`<div class="base" @keydown="${(x, { event }) => x._onBaseKeyDown(event)}">
+  return vividElement.html`<div class="base" @keydown="${(x, { event }) => x._onBaseKeyDown(event)}">
 		<${textFieldTag} id="text-field"
 										 ${ref.ref("_textFieldEl")}
 										 class="control"
@@ -5825,15 +5824,15 @@ const DatePickerBaseTemplate = (context) => {
 				<div class="segments">
 					${repeat.repeat(
     (x) => x._segments,
-    defineVividComponent.html` <div class="segment">
+    vividElement.html` <div class="segment">
 							${renderDialogHeader(context)}
 							${when.when(
       (x) => x.type === "month-picker",
-      defineVividComponent.html`${renderMonthPickerGrid(context)}`
+      vividElement.html`${renderMonthPickerGrid(context)}`
     )}
 							${when.when(
       (x) => x.type === "calendar",
-      defineVividComponent.html`${renderCalendarGrid(context)}`
+      vividElement.html`${renderCalendarGrid(context)}`
     )}
 						</div>`
   )}
@@ -6088,11 +6087,11 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     document.addEventListener("click", this.#dismissOnClickOutside);
     this.addEventListener("focusin", this.#onFocusIn);
     this.addEventListener("focusout", this.#onFocusOut);
-    this.#localeChangeObserver = defineVividComponent.Observable.binding(
+    this.#localeChangeObserver = vividElement.Observable.binding(
       () => this.locale,
       this.#localeChangeHandler
     );
-    this.#localeChangeObserver.observe(this, defineVividComponent.defaultExecutionContext);
+    this.#localeChangeObserver.observe(this, vividElement.defaultExecutionContext);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -6172,7 +6171,7 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
       this._closePopup();
     } else {
       this.#openPopupIfPossible();
-      defineVividComponent.DOM.processUpdates();
+      vividElement.DOM.processUpdates();
       const tabbableDate = this.shadowRoot.querySelector(
         `[data-date="${this._tabbableDate}"]`
       );
@@ -6340,7 +6339,7 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     }
     if (newDate && this._isDateInValidRange(newDate)) {
       if (this._adjustSelectedMonthToEnsureVisibilityOf(newDate)) {
-        defineVividComponent.DOM.processUpdates();
+        vividElement.DOM.processUpdates();
       }
       this._dialogEl.querySelector(
         `[data-date="${newDate}"]`
@@ -6406,7 +6405,7 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     if (newMonth && this._isMonthInValidRange(newMonth)) {
       if (newMonth.year !== this._monthPickerYear) {
         this._monthPickerYear = newMonth.year;
-        defineVividComponent.DOM.processUpdates();
+        vividElement.DOM.processUpdates();
       }
       this._dialogEl.querySelector(
         `[data-month="${monthToStr(newMonth)}"]`
@@ -6450,52 +6449,52 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
   }
 }
 __decorateClass([
-  defineVividComponent.attr({ converter: ValidDateFilter })
+  vividElement.attr({ converter: ValidDateFilter })
 ], DatePickerBase.prototype, "min", 2);
 __decorateClass([
-  defineVividComponent.attr({ converter: ValidDateFilter })
+  vividElement.attr({ converter: ValidDateFilter })
 ], DatePickerBase.prototype, "max", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "value" })
+  vividElement.attr({ attribute: "value" })
 ], DatePickerBase.prototype, "initialValue", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "current-value" })
+  vividElement.attr({ attribute: "current-value" })
 ], DatePickerBase.prototype, "currentValue", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "readonly", mode: "boolean" })
+  vividElement.attr({ attribute: "readonly", mode: "boolean" })
 ], DatePickerBase.prototype, "readOnly", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], DatePickerBase.prototype, "_selectedMonth", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], DatePickerBase.prototype, "_popupOpen", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], DatePickerBase.prototype, "_presentationValue", 2);
 __decorateClass([
-  defineVividComponent.volatile
+  vividElement.volatile
 ], DatePickerBase.prototype, "_isPrevYearDisabled", 1);
 __decorateClass([
-  defineVividComponent.volatile
+  vividElement.volatile
 ], DatePickerBase.prototype, "_isNextYearDisabled", 1);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], DatePickerBase.prototype, "_numCalendars", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], DatePickerBase.prototype, "_lastFocussedDate", 2);
 __decorateClass([
-  defineVividComponent.volatile
+  vividElement.volatile
 ], DatePickerBase.prototype, "_tabbableDate", 1);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], DatePickerBase.prototype, "_monthPickerYear", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], DatePickerBase.prototype, "_lastFocussedMonth", 2);
 __decorateClass([
-  defineVividComponent.volatile
+  vividElement.volatile
 ], DatePickerBase.prototype, "_tabbableMonth", 1);
 applyMixinsWithObservables.applyMixinsWithObservables(
   DatePickerBase,

package/shared/presentationDate.js

@@ -2,7 +2,7 @@ import { B as Button } from './definition11.js';
 import { P as Popup } from './definition63.js';
 import { T as TextField } from './text-field2.js';
 import { D as Divider } from './definition22.js';
-import { h as html, O as Observable, i as defaultExecutionContext, D as DOM, a as attr, o as observable, v as volatile } from './defineVividComponent.js';
+import { h as html, V as VividElement, O as Observable, i as defaultExecutionContext, D as DOM, a as attr, o as observable, v as volatile } from './vivid-element.js';
 import { r as ref } from './ref.js';
 import { s as slotted } from './slotted.js';
 import { r as repeat } from './repeat.js';
@@ -11,7 +11,6 @@ import { c as classNames } from './class-names.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { F as FormAssociated } from './form-associated.js';
-import { V as VividElement } from './vivid-element.js';
 import { T as TrappedFocus } from './trapped-focus.js';
 import { a as FormElementHelperText } from './form-elements.js';
 import { L as Localized } from './localized.js';