@vonage/vivid 4.14.0 → 4.14.2

package/shared/definition43.cjs

@@ -1,10 +1,9 @@
 'use strict';
 
 const definition = require('./definition63.cjs');
-const definition$3 = require('./definition27.cjs');
-const definition$1 = require('./definition35.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
-const listbox$1 = require('./listbox2.cjs');
+const definition$2 = require('./definition27.cjs');
+const definition$3 = require('./definition35.cjs');
+const vividElement = require('./vivid-element.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const listbox = require('./listbox.cjs');
 const formAssociated = require('./form-associated2.cjs');
@@ -13,7 +12,8 @@ const strings = require('./strings.cjs');
 const keyCodes = require('./key-codes.cjs');
 const formElements = require('./form-elements.cjs');
 const affix = require('./affix.cjs');
-const definition$2 = require('./definition11.cjs');
+const option = require('./option.cjs');
+const definition$1 = require('./definition11.cjs');
 const index = require('./index.cjs');
 const ref = require('./ref.cjs');
 const when = require('./when.cjs');
@@ -321,7 +321,7 @@ let Select = class extends FormAssociatedSelect {
       this.ariaExpanded = "true";
       this.focusAndScrollOptionIntoView();
       this.indexWhenOpened = this.selectedIndex;
-      defineVividComponent.DOM.queueUpdate(() => this.focus());
+      vividElement.DOM.queueUpdate(() => this.focus());
       return;
     }
     const didClose = prev === true && next === false;
@@ -341,7 +341,7 @@ let Select = class extends FormAssociatedSelect {
    * @public
    */
   get value() {
-    defineVividComponent.Observable.track(this, "value");
+    vividElement.Observable.track(this, "value");
     return this._value;
   }
   set value(next) {
@@ -359,7 +359,7 @@ let Select = class extends FormAssociatedSelect {
     if (prev !== next) {
       this._value = next;
       super.valueChanged(prev, next);
-      defineVividComponent.Observable.notify(this, "value");
+      vividElement.Observable.notify(this, "value");
       this.updateDisplayValue();
     }
   }
@@ -652,7 +652,7 @@ let Select = class extends FormAssociatedSelect {
    */
   updateDisplayValue() {
     if (this.collapsible) {
-      defineVividComponent.Observable.notify(this, "displayValue");
+      vividElement.Observable.notify(this, "displayValue");
     }
   }
   labelChanged() {
@@ -661,12 +661,12 @@ let Select = class extends FormAssociatedSelect {
     }
   }
   get displayValue() {
-    defineVividComponent.Observable.track(this, "displayValue");
+    vividElement.Observable.track(this, "displayValue");
     return this.firstSelectedOption?.getAttribute("label") ?? this.firstSelectedOption?.text ?? this.placeholder ?? "";
   }
   setDefaultSelectedOption() {
     const options = Array.from(this.children).filter(
-      listbox$1.Listbox.slottedOptionFilter
+      listbox.Listbox.slottedOptionFilter
     );
     const selectedIndex = options.findIndex(
       (el) => el.hasAttribute("selected") || el.selected || el.value === this.value
@@ -685,12 +685,12 @@ let Select = class extends FormAssociatedSelect {
    */
   slottedOptionsChanged(prev, next) {
     this.options.forEach((o) => {
-      const notifier = defineVividComponent.Observable.getNotifier(o);
+      const notifier = vividElement.Observable.getNotifier(o);
       notifier.unsubscribe(this, "value");
     });
     super.slottedOptionsChanged(prev, next);
     this.options.forEach((o) => {
-      const notifier = defineVividComponent.Observable.getNotifier(o);
+      const notifier = vividElement.Observable.getNotifier(o);
       notifier.subscribe(this, "value");
     });
     this.setProxyOptions();
@@ -717,50 +717,50 @@ let Select = class extends FormAssociatedSelect {
   }
 };
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Select.prototype, "activeIndex", 2);
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Select.prototype, "multiple", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "open", mode: "boolean" })
+  vividElement.attr({ attribute: "open", mode: "boolean" })
 ], Select.prototype, "open", 2);
 __decorateClass([
-  defineVividComponent.volatile
+  vividElement.volatile
 ], Select.prototype, "collapsible", 1);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Select.prototype, "control", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Select.prototype, "maxHeight", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Select.prototype, "_anchor", 2);
 __decorateClass([
-  defineVividComponent.attr()
+  vividElement.attr()
 ], Select.prototype, "scale", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Select.prototype, "appearance", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Select.prototype, "shape", 2);
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean", attribute: "fixed-dropdown" })
+  vividElement.attr({ mode: "boolean", attribute: "fixed-dropdown" })
 ], Select.prototype, "fixedDropdown", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Select.prototype, "placeholder", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Select.prototype, "placeholderOption", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Select.prototype, "_feedbackWrapper", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Select.prototype, "metaSlottedContent", 2);
 Select = __decorateClass([
   formElements.errorText,
@@ -770,7 +770,7 @@ class DelegatesARIASelect {
 }
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], DelegatesARIASelect.prototype, "ariaControls", 2);
 applyMixinsWithObservables.applyMixinsWithObservables(
   Select,
@@ -802,21 +802,21 @@ const getStateClasses = ({
   [`size-${scale}`, Boolean(scale)]
 );
 function renderLabel() {
-  return defineVividComponent.html` <label for="control" class="label" id="label">
+  return vividElement.html` <label for="control" class="label" id="label">
 		${(x) => x.label}
 	</label>`;
 }
 function renderPlaceholder(context) {
-  const optionTag = context.tagFor(definition$1.ListboxOption);
-  return defineVividComponent.html`
+  const optionTag = context.tagFor(option.ListboxOption);
+  return vividElement.html`
 		<${optionTag} ${ref.ref("placeholderOption")}
 			text="${(x) => x.placeholder}" hidden disabled>
 		</${optionTag}>`;
 }
 function selectValue(context) {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  const chevronTemplate = definition$2.chevronTemplateFactory(context);
-  return defineVividComponent.html` <div
+  const chevronTemplate = definition$1.chevronTemplateFactory(context);
+  return vividElement.html` <div
 		class="control ${getStateClasses}"
 		${ref.ref("_anchor")}
 		id="control"
@@ -835,7 +835,7 @@ function setFixedDropdownVarWidth(x) {
 }
 function renderControl(context) {
   const popupTag = context.tagFor(definition.Popup);
-  return defineVividComponent.html`
+  return vividElement.html`
 			${when.when((x) => x.label, renderLabel())}
 			<div class="control-wrapper">
 				${when.when((x) => !x.multiple, selectValue(context))}
@@ -854,7 +854,7 @@ function renderControl(context) {
 						${when.when((x) => x.placeholder, renderPlaceholder(context))}
 						<slot
 							${slotted.slotted({
-    filter: listbox$1.Listbox.slottedOptionFilter,
+    filter: listbox.Listbox.slottedOptionFilter,
     flatten: true,
     property: "slottedOptions"
   })}>
@@ -873,7 +873,7 @@ function ifNotFromFeedback(handler) {
   };
 }
 const SelectTemplate = (context) => {
-  return defineVividComponent.html`
+  return vividElement.html`
 		<template
 			class="base"
 			aria-label="${(x) => x.ariaLabel}"
@@ -906,16 +906,16 @@ const SelectTemplate = (context) => {
 	`;
 };
 
-const selectDefinition = defineVividComponent.defineVividComponent(
+const selectDefinition = vividElement.defineVividComponent(
   "select",
   Select,
   SelectTemplate,
-  [definition.popupDefinition, definition$3.iconDefinition, definition$1.listboxOptionDefinition],
+  [definition.popupDefinition, definition$2.iconDefinition, definition$3.listboxOptionDefinition],
   {
     styles
   }
 );
-const registerSelect = defineVividComponent.createRegisterFunction(selectDefinition);
+const registerSelect = vividElement.createRegisterFunction(selectDefinition);
 
 exports.registerSelect = registerSelect;
 exports.selectDefinition = selectDefinition;

package/shared/definition43.js

@@ -1,8 +1,7 @@
 import { P as Popup, p as popupDefinition } from './definition63.js';
 import { i as iconDefinition } from './definition27.js';
-import { L as ListboxOption, l as listboxOptionDefinition } from './definition35.js';
-import { D as DOM, O as Observable, o as observable, a as attr, v as volatile, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
-import { a as Listbox$1 } from './listbox2.js';
+import { l as listboxOptionDefinition } from './definition35.js';
+import { D as DOM, O as Observable, o as observable, a as attr, v as volatile, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { L as Listbox } from './listbox.js';
 import { F as FormAssociated } from './form-associated2.js';
@@ -10,7 +9,8 @@ import { i as inRange } from './numbers.js';
 import { u as uniqueId } from './strings.js';
 import { a as keySpace, b as keyEscape, c as keyTab, d as keyEnd, e as keyArrowUp, f as keyArrowDown, g as keyHome, k as keyEnter } from './key-codes.js';
 import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, g as getFeedbackTemplate } from './form-elements.js';
-import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { L as ListboxOption } from './option.js';
 import { c as chevronTemplateFactory } from './definition11.js';
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { r as ref } from './ref.js';
@@ -664,7 +664,7 @@ let Select = class extends FormAssociatedSelect {
   }
   setDefaultSelectedOption() {
     const options = Array.from(this.children).filter(
-      Listbox$1.slottedOptionFilter
+      Listbox.slottedOptionFilter
     );
     const selectedIndex = options.findIndex(
       (el) => el.hasAttribute("selected") || el.selected || el.value === this.value
@@ -852,7 +852,7 @@ function renderControl(context) {
 						${when((x) => x.placeholder, renderPlaceholder(context))}
 						<slot
 							${slotted({
-    filter: Listbox$1.slottedOptionFilter,
+    filter: Listbox.slottedOptionFilter,
     flatten: true,
     property: "slottedOptions"
   })}>

package/shared/definition44.cjs

@@ -2,7 +2,6 @@
 
 const definition = require('./definition15.cjs');
 const definition$1 = require('./definition40.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
 const vividElement = require('./vivid-element.cjs');
 const enums = require('./enums.cjs');
 const classNames = require('./class-names.cjs');
@@ -46,25 +45,25 @@ class SelectableBox extends vividElement.VividElement {
   }
 }
 __decorateClass([
-  defineVividComponent.attr({ attribute: "aria-label" })
+  vividElement.attr({ attribute: "aria-label" })
 ], SelectableBox.prototype, "ariaLabel");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], SelectableBox.prototype, "checked");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], SelectableBox.prototype, "clickable");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "clickable-box", mode: "boolean" })
+  vividElement.attr({ attribute: "clickable-box", mode: "boolean" })
 ], SelectableBox.prototype, "clickableBox");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], SelectableBox.prototype, "connotation");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "control-type" })
+  vividElement.attr({ attribute: "control-type" })
 ], SelectableBox.prototype, "controlType");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], SelectableBox.prototype, "tight");
 
 const getClasses = ({
@@ -86,9 +85,9 @@ function handleControlChange(x) {
 }
 function checkbox(context) {
   const checkboxTag = context.tagFor(definition.Checkbox);
-  return defineVividComponent.html`${when.when(
+  return vividElement.html`${when.when(
     (x) => x.controlType !== "radio",
-    defineVividComponent.html`
+    vividElement.html`
 		<${checkboxTag}
 			aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
 			@change="${(x) => handleControlChange(x)}"
@@ -101,9 +100,9 @@ function checkbox(context) {
 }
 function radio(context) {
   const radioTag = context.tagFor(definition$1.Radio);
-  return defineVividComponent.html`${when.when(
+  return vividElement.html`${when.when(
     (x) => x.controlType === "radio",
-    defineVividComponent.html`
+    vividElement.html`
 		<${radioTag}
 			aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
 			@change="${(x) => handleControlChange(x)}"
@@ -115,7 +114,7 @@ function radio(context) {
   )} `;
 }
 const SelectableBoxTemplate = (context) => {
-  return defineVividComponent.html`<template role="presentation">
+  return vividElement.html`<template role="presentation">
 		<div
 			class="${getClasses}"
 			tabindex="${(x) => x.clickableBox || x.clickable ? "0" : null}"
@@ -131,7 +130,7 @@ const SelectableBoxTemplate = (context) => {
 	</template>`;
 };
 
-const selectableBoxDefinition = defineVividComponent.defineVividComponent(
+const selectableBoxDefinition = vividElement.defineVividComponent(
   "selectable-box",
   SelectableBox,
   SelectableBoxTemplate,
@@ -143,7 +142,7 @@ const selectableBoxDefinition = defineVividComponent.defineVividComponent(
     }
   }
 );
-const registerSelectableBox = defineVividComponent.createRegisterFunction(
+const registerSelectableBox = vividElement.createRegisterFunction(
   selectableBoxDefinition
 );
 

package/shared/definition44.js

@@ -1,7 +1,6 @@
 import { C as Checkbox, c as checkboxDefinition } from './definition15.js';
 import { R as Radio, r as radioDefinition } from './definition40.js';
-import { a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
-import { V as VividElement } from './vivid-element.js';
+import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { C as Connotation } from './enums.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';

package/shared/definition45.cjs

@@ -1,8 +1,7 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
-const index = require('./index.cjs');
 const vividElement = require('./vivid-element.cjs');
+const index = require('./index.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
@@ -61,22 +60,22 @@ class SideDrawer extends vividElement.VividElement {
   }
 }
 __decorateClass([
-  defineVividComponent.attr({
+  vividElement.attr({
     mode: "boolean"
   })
 ], SideDrawer.prototype, "alternate");
 __decorateClass([
-  defineVividComponent.attr({
+  vividElement.attr({
     mode: "boolean"
   })
 ], SideDrawer.prototype, "modal");
 __decorateClass([
-  defineVividComponent.attr({
+  vividElement.attr({
     mode: "boolean"
   })
 ], SideDrawer.prototype, "open");
 __decorateClass([
-  defineVividComponent.attr({
+  vividElement.attr({
     mode: "boolean"
   })
 ], SideDrawer.prototype, "trailing");
@@ -90,7 +89,7 @@ const getClasses = ({ modal, open, trailing }) => classNames.classNames(
   ["trailing", trailing]
 );
 const getScrimClasses = ({ open }) => classNames.classNames("scrim", ["open", open]);
-const sideDrawerTemplate = defineVividComponent.html`
+const sideDrawerTemplate = vividElement.html`
 	<div
 		class="${getClasses}"
 		?inert="${(x) => !x.open}"
@@ -106,14 +105,14 @@ const sideDrawerTemplate = defineVividComponent.html`
 
 	${when.when(
   (x) => x.modal,
-  defineVividComponent.html`<div
+  vividElement.html`<div
 			class="${getScrimClasses}"
 			@click="${(x) => x._handleCloseRequest()}"
 		></div>`
 )}
 `;
 
-const sideDrawerDefinition = defineVividComponent.defineVividComponent(
+const sideDrawerDefinition = vividElement.defineVividComponent(
   "side-drawer",
   SideDrawer,
   sideDrawerTemplate,
@@ -122,7 +121,7 @@ const sideDrawerDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerSideDrawer = defineVividComponent.createRegisterFunction(sideDrawerDefinition);
+const registerSideDrawer = vividElement.createRegisterFunction(sideDrawerDefinition);
 
 exports.registerSideDrawer = registerSideDrawer;
 exports.sideDrawerDefinition = sideDrawerDefinition;

package/shared/definition45.js

@@ -1,6 +1,5 @@
-import { a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
-import { V as VividElement } from './vivid-element.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 

package/shared/definition46.cjs

@@ -1,12 +1,11 @@
 'use strict';
 
 const definition = require('./definition63.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const keyCodes = require('./key-codes.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const slider_template = require('./slider.template.cjs');
 const formAssociated = require('./form-associated.cjs');
-const vividElement = require('./vivid-element.cjs');
 const direction = require('./direction.cjs');
 const aria = require('./aria.cjs');
 const numbers = require('./numbers.cjs');
@@ -414,79 +413,79 @@ class Slider extends FormAssociatedSlider {
   #onMouseOut;
 }
 __decorateClass([
-  defineVividComponent.attr({ attribute: "readonly", mode: "boolean" })
+  vividElement.attr({ attribute: "readonly", mode: "boolean" })
 ], Slider.prototype, "readOnly", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Slider.prototype, "direction", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Slider.prototype, "isDragging", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Slider.prototype, "position", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Slider.prototype, "trackWidth", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Slider.prototype, "trackMinWidth", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Slider.prototype, "trackHeight", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Slider.prototype, "trackLeft", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Slider.prototype, "trackMinHeight", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Slider.prototype, "valueTextFormatter", 2);
 __decorateClass([
-  defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], Slider.prototype, "min", 2);
 __decorateClass([
-  defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], Slider.prototype, "max", 2);
 __decorateClass([
-  defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], Slider.prototype, "step", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Slider.prototype, "orientation", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Slider.prototype, "mode", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "aria-label" })
+  vividElement.attr({ attribute: "aria-label" })
 ], Slider.prototype, "ariaLabel", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "aria-valuetext" })
+  vividElement.attr({ attribute: "aria-valuetext" })
 ], Slider.prototype, "ariaValuetext", 2);
 __decorateClass([
-  defineVividComponent.attr({
+  vividElement.attr({
     mode: "boolean"
   })
 ], Slider.prototype, "markers", 2);
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Slider.prototype, "pin", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Slider.prototype, "connotation", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Slider.prototype, "_focusVisible", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Slider.prototype, "_hoveringOnThumb", 2);
 __decorateClass([
-  defineVividComponent.volatile
+  vividElement.volatile
 ], Slider.prototype, "_isThumbPopupOpen", 1);
 applyMixins.applyMixins(Slider, localized.Localized);
 
-const sliderDefinition = defineVividComponent.defineVividComponent(
+const sliderDefinition = vividElement.defineVividComponent(
   "slider",
   Slider,
   slider_template.SliderTemplate,
@@ -498,7 +497,7 @@ const sliderDefinition = defineVividComponent.defineVividComponent(
     }
   }
 );
-const registerSlider = defineVividComponent.createRegisterFunction(sliderDefinition);
+const registerSlider = vividElement.createRegisterFunction(sliderDefinition);
 
 exports.Slider = Slider;
 exports.registerSlider = registerSlider;

package/shared/definition46.js

@@ -1,10 +1,9 @@
 import { p as popupDefinition } from './definition63.js';
-import { a as attr, o as observable, n as nullableNumberConverter, v as volatile, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement, a as attr, o as observable, n as nullableNumberConverter, v as volatile, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { g as keyHome, d as keyEnd, f as keyArrowDown, h as keyArrowLeft, e as keyArrowUp, i as keyArrowRight } from './key-codes.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { i as inverseLerp, l as lerp, r as roundToStepValue, S as SliderTemplate } from './slider.template.js';
 import { F as FormAssociated } from './form-associated.js';
-import { V as VividElement } from './vivid-element.js';
 import { D as Direction, g as getDirection } from './direction.js';
 import { O as Orientation } from './aria.js';
 import { l as limit } from './numbers.js';