@vonage/vivid 4.14.0 → 4.14.2

package/shared/definition56.cjs

@@ -3,12 +3,11 @@
 const definition$2 = require('./definition55.cjs');
 const definition = require('./definition63.cjs');
 const definition$1 = require('./definition11.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const index = require('./index.cjs');
 const scrollIntoView = require('./scrollIntoView.cjs');
 const formAssociated = require('./form-associated.cjs');
-const vividElement = require('./vivid-element.cjs');
 const formElements = require('./form-elements.cjs');
 const trappedFocus = require('./trapped-focus.cjs');
 const localized = require('./localized.cjs');
@@ -358,11 +357,11 @@ let TimePicker = class extends FormAssociatedTimePicker {
     document.addEventListener("click", __privateGet(this, _dismissOnClickOutside));
     this.addEventListener("focusin", __privateGet(this, _onFocusIn));
     this.addEventListener("focusout", __privateGet(this, _onFocusOut));
-    __privateSet(this, _clockChangeObserver, defineVividComponent.Observable.binding(
+    __privateSet(this, _clockChangeObserver, vividElement.Observable.binding(
       () => this._use12hClock,
       __privateGet(this, _clockChangeHandler)
     ));
-    __privateGet(this, _clockChangeObserver).observe(this, defineVividComponent.defaultExecutionContext);
+    __privateGet(this, _clockChangeObserver).observe(this, vividElement.defaultExecutionContext);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -459,7 +458,7 @@ let TimePicker = class extends FormAssociatedTimePicker {
       this._closePopup();
     } else {
       __privateMethod(this, _TimePicker_instances, openPopupIfPossible_fn).call(this);
-      defineVividComponent.DOM.processUpdates();
+      vividElement.DOM.processUpdates();
       if (this._selectedHour) {
         __privateMethod(this, _TimePicker_instances, scrollToItem_fn).call(this, "hours", this._selectedHour, "start");
       }
@@ -693,31 +692,31 @@ scrollToItem_fn = function(picker, selectedValue, position) {
   scrollIntoView.scrollIntoView(element, element.parentElement, position);
 };
 __decorateClass([
-  defineVividComponent.attr({ attribute: "readonly", mode: "boolean" })
+  vividElement.attr({ attribute: "readonly", mode: "boolean" })
 ], TimePicker.prototype, "readOnly", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "minutes-step", converter: defineVividComponent.nullableNumberConverter })
+  vividElement.attr({ attribute: "minutes-step", converter: vividElement.nullableNumberConverter })
 ], TimePicker.prototype, "minutesStep", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "seconds-step", converter: defineVividComponent.nullableNumberConverter })
+  vividElement.attr({ attribute: "seconds-step", converter: vividElement.nullableNumberConverter })
 ], TimePicker.prototype, "secondsStep", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], TimePicker.prototype, "clock", 2);
 __decorateClass([
-  defineVividComponent.attr({ converter: ValidTimeFilter })
+  vividElement.attr({ converter: ValidTimeFilter })
 ], TimePicker.prototype, "min", 2);
 __decorateClass([
-  defineVividComponent.attr({ converter: ValidTimeFilter })
+  vividElement.attr({ converter: ValidTimeFilter })
 ], TimePicker.prototype, "max", 2);
 __decorateClass([
-  defineVividComponent.volatile
+  vividElement.volatile
 ], TimePicker.prototype, "_use12hClock", 1);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], TimePicker.prototype, "_popupOpen", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], TimePicker.prototype, "_presentationValue", 2);
 TimePicker = __decorateClass([
   formElements.errorText,
@@ -731,7 +730,7 @@ applyMixinsWithObservables.applyMixinsWithObservables(
 );
 
 const renderPicker = (id, getLabel, getSelected, setSelected, getOptions) => {
-  return defineVividComponent.html`
+  return vividElement.html`
 		<ul
 			id="${id}"
 			class="picker"
@@ -749,7 +748,7 @@ const renderPicker = (id, getLabel, getSelected, setSelected, getOptions) => {
 		>
 			${repeat.repeat(
     getOptions,
-    defineVividComponent.html`
+    vividElement.html`
 					<li
 						id="${(x) => `${id}-${x.value}`}"
 						class="${(x, c) => classNames.classNames("item", [
@@ -771,7 +770,7 @@ const TimePickerTemplate = (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"
@@ -866,7 +865,7 @@ const TimePickerTemplate = (context) => {
 	</div>`;
 };
 
-const timePickerDefinition = defineVividComponent.defineVividComponent(
+const timePickerDefinition = vividElement.defineVividComponent(
   "time-picker",
   TimePicker,
   TimePickerTemplate,
@@ -878,7 +877,7 @@ const timePickerDefinition = defineVividComponent.defineVividComponent(
     }
   }
 );
-const registerTimePicker = defineVividComponent.createRegisterFunction(timePickerDefinition);
+const registerTimePicker = vividElement.createRegisterFunction(timePickerDefinition);
 
 exports.registerTimePicker = registerTimePicker;
 exports.timePickerDefinition = timePickerDefinition;

package/shared/definition56.js

@@ -1,12 +1,11 @@
 import { t as textFieldDefinition } from './definition55.js';
 import { P as Popup, p as popupDefinition } from './definition63.js';
 import { B as Button, b as buttonDefinition } from './definition11.js';
-import { O as Observable, i as defaultExecutionContext, D as DOM, a as attr, n as nullableNumberConverter, v as volatile, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement, O as Observable, i as defaultExecutionContext, D as DOM, a as attr, n as nullableNumberConverter, v as volatile, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { s as scrollIntoView } from './scrollIntoView.js';
 import { F as FormAssociated } from './form-associated.js';
-import { V as VividElement } from './vivid-element.js';
 import { e as errorText, f as formElements, a as FormElementHelperText } from './form-elements.js';
 import { T as TrappedFocus } from './trapped-focus.js';
 import { L as Localized } from './localized.js';

package/shared/definition57.cjs

@@ -1,9 +1,8 @@
 'use strict';
 
 const definition = require('./definition63.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
-const anchored = require('./anchored.cjs');
 const vividElement = require('./vivid-element.cjs');
+const anchored = require('./anchored.cjs');
 const index = require('./index.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
@@ -37,7 +36,7 @@ let Toggletip = class extends vividElement.VividElement {
     this.placement = "right";
     this.open = false;
     __privateAdd(this, _openIfClosed, () => {
-      if (!this.open) defineVividComponent.DOM.queueUpdate(() => this.open = true);
+      if (!this.open) vividElement.DOM.queueUpdate(() => this.open = true);
     });
     __privateAdd(this, _closeOnClickOutside, (e) => {
       const clickedOutside = !this.contains(e.target);
@@ -105,16 +104,16 @@ updateListeners_fn = function() {
 _closeOnClickOutside = new WeakMap();
 _closeOnEscape = new WeakMap();
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Toggletip.prototype, "headline", 2);
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Toggletip.prototype, "alternate", 2);
 __decorateClass([
-  defineVividComponent.attr({ mode: "fromView" })
+  vividElement.attr({ mode: "fromView" })
 ], Toggletip.prototype, "placement", 2);
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Toggletip.prototype, "open", 2);
 Toggletip = __decorateClass([
   anchored.anchored
@@ -124,7 +123,7 @@ const getClasses = (_) => classNames.classNames("control");
 const ToggletipTemplate = (context) => {
   const popup = context.tagFor(definition.Popup);
   const anchorSlotTemplate = anchored.anchorSlotTemplateFactory();
-  return defineVividComponent.html`
+  return vividElement.html`
 		${anchorSlotTemplate}
 		<${popup}
 			@keydown="${(x, { event }) => {
@@ -144,7 +143,7 @@ const ToggletipTemplate = (context) => {
 			<div class="content-wrapper">
 				${when.when(
     (x) => x.headline,
-    defineVividComponent.html`<header class="headline">${(x) => x.headline}</header>`
+    vividElement.html`<header class="headline">${(x) => x.headline}</header>`
   )}
 				<slot></slot>
 				<footer class="action-items"><slot name="action-items"></slot></footer>
@@ -153,7 +152,7 @@ const ToggletipTemplate = (context) => {
 	`;
 };
 
-const toggletipDefinition = defineVividComponent.defineVividComponent(
+const toggletipDefinition = vividElement.defineVividComponent(
   "toggletip",
   Toggletip,
   ToggletipTemplate,
@@ -162,7 +161,7 @@ const toggletipDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerToggletip = defineVividComponent.createRegisterFunction(toggletipDefinition);
+const registerToggletip = vividElement.createRegisterFunction(toggletipDefinition);
 
 exports.registerToggletip = registerToggletip;
 exports.toggletipDefinition = toggletipDefinition;

package/shared/definition57.js

@@ -1,7 +1,6 @@
 import { P as Popup, p as popupDefinition } from './definition63.js';
-import { a as attr, D as DOM, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement, a as attr, D as DOM, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { a as anchored, b as anchorSlotTemplateFactory } from './anchored.js';
-import { V as VividElement } from './vivid-element.js';
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';

package/shared/definition58.cjs

@@ -1,9 +1,8 @@
 'use strict';
 
 const definition = require('./definition63.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
-const anchored = require('./anchored.cjs');
 const vividElement = require('./vivid-element.cjs');
+const anchored = require('./anchored.cjs');
 const index = require('./index.cjs');
 const classNames = require('./class-names.cjs');
 
@@ -88,13 +87,13 @@ updateListeners_fn = function() {
 };
 _closeOnEscape = new WeakMap();
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Tooltip.prototype, "text", 2);
 __decorateClass([
-  defineVividComponent.attr({ mode: "fromView" })
+  vividElement.attr({ mode: "fromView" })
 ], Tooltip.prototype, "placement", 2);
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Tooltip.prototype, "open", 2);
 Tooltip = __decorateClass([
   anchored.anchored
@@ -104,7 +103,7 @@ const getClasses = ({ open }) => classNames.classNames("control", ["open", Boole
 const TooltipTemplate = (context) => {
   const popupTag = context.tagFor(definition.Popup);
   const anchorSlotTemplate = anchored.anchorSlotTemplateFactory();
-  return defineVividComponent.html`
+  return vividElement.html`
 ${anchorSlotTemplate}
 <${popupTag} class="${getClasses}" arrow alternate
 	:placement=${(x) => x.placement}
@@ -124,7 +123,7 @@ ${anchorSlotTemplate}
 </${popupTag}>`;
 };
 
-const tooltipDefinition = defineVividComponent.defineVividComponent(
+const tooltipDefinition = vividElement.defineVividComponent(
   "tooltip",
   Tooltip,
   TooltipTemplate,
@@ -133,7 +132,7 @@ const tooltipDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerTooltip = defineVividComponent.createRegisterFunction(tooltipDefinition);
+const registerTooltip = vividElement.createRegisterFunction(tooltipDefinition);
 
 exports.registerTooltip = registerTooltip;
 exports.tooltipDefinition = tooltipDefinition;

package/shared/definition58.js

@@ -1,7 +1,6 @@
 import { P as Popup, p as popupDefinition } from './definition63.js';
-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 { a as anchored, b as anchorSlotTemplateFactory } from './anchored.js';
-import { V as VividElement } from './vivid-element.js';
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { c as classNames } from './class-names.js';
 

package/shared/definition59.cjs

@@ -1,10 +1,9 @@
 'use strict';
 
 const definition = require('./definition27.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const affix = require('./affix.cjs');
-const foundationElement = require('./foundation-element.cjs');
 const dom = require('./dom.cjs');
 const slotted = require('./slotted.cjs');
 const children = require('./children.cjs');
@@ -26,7 +25,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 function isTreeItemElement(el) {
   return dom.isHTMLElement(el) && el.getAttribute("role") === "treeitem";
 }
-class TreeItem extends foundationElement.FoundationElement {
+class TreeItem extends vividElement.VividElement {
   constructor() {
     super(...arguments);
     this.expanded = false;
@@ -112,36 +111,36 @@ class TreeItem extends foundationElement.FoundationElement {
   }
 }
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], TreeItem.prototype, "text");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], TreeItem.prototype, "expanded");
 __decorateClass([
-  defineVividComponent.attr({
+  vividElement.attr({
     mode: "boolean"
   })
 ], TreeItem.prototype, "selected");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], TreeItem.prototype, "disabled");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], TreeItem.prototype, "focusable");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], TreeItem.prototype, "childItems");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], TreeItem.prototype, "items");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], TreeItem.prototype, "nested");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], TreeItem.prototype, "renderCollapsedChildren");
 applyMixins.applyMixins(TreeItem, affix.AffixIcon);
 
@@ -152,7 +151,7 @@ const getClasses = ({ disabled, selected }) => classNames.classNames(
 );
 const expandCollapseButton = (context) => {
   const iconTag = context.tagFor(definition.Icon);
-  return defineVividComponent.html`
+  return vividElement.html`
 	<div aria-hidden="true"
 		class="expandCollapseButton"
 		@click="${(x, c) => x.handleExpandCollapseButtonClick(c.event)}"
@@ -163,7 +162,7 @@ const expandCollapseButton = (context) => {
 };
 const TreeItemTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return defineVividComponent.html` <template
+  return vividElement.html` <template
 		role="treeitem"
 		slot="${(x) => x.isNestedItem() ? "item" : void 0}"
 		tabindex="-1"
@@ -187,14 +186,14 @@ const TreeItemTemplate = (context) => {
 		</div>
 		${when.when(
     (x) => x.childItems && x.childItems.length > 0 && x.expanded,
-    defineVividComponent.html` <div role="group" class="items">
+    vividElement.html` <div role="group" class="items">
 				<slot name="item" ${slotted.slotted("items")}></slot>
 			</div>`
   )}
 	</template>`;
 };
 
-const treeItemDefinition = defineVividComponent.defineVividComponent(
+const treeItemDefinition = vividElement.defineVividComponent(
   "tree-item",
   TreeItem,
   TreeItemTemplate,
@@ -203,7 +202,7 @@ const treeItemDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerTreeItem = defineVividComponent.createRegisterFunction(treeItemDefinition);
+const registerTreeItem = vividElement.createRegisterFunction(treeItemDefinition);
 
 exports.TreeItem = TreeItem;
 exports.isTreeItemElement = isTreeItemElement;

package/shared/definition59.js

@@ -1,8 +1,7 @@
 import { I as Icon, i as iconDefinition } from './definition27.js';
-import { a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement, a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { F as FoundationElement } from './foundation-element.js';
+import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { i as isHTMLElement } from './dom.js';
 import { e as elements, s as slotted } from './slotted.js';
 import { c as children } from './children.js';
@@ -24,7 +23,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 function isTreeItemElement(el) {
   return isHTMLElement(el) && el.getAttribute("role") === "treeitem";
 }
-class TreeItem extends FoundationElement {
+class TreeItem extends VividElement {
   constructor() {
     super(...arguments);
     this.expanded = false;

package/shared/definition6.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 const definition = require('./definition27.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
 const vividElement = require('./vivid-element.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
@@ -20,22 +19,22 @@ var __decorateClass = (decorators, target, key, kind) => {
 class Avatar extends vividElement.VividElement {
 }
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Avatar.prototype, "connotation");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Avatar.prototype, "shape");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Avatar.prototype, "appearance");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Avatar.prototype, "size");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Avatar.prototype, "icon");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Avatar.prototype, "initials");
 
 const getClasses = ({ appearance, connotation, shape, size }) => classNames.classNames(
@@ -46,20 +45,20 @@ const getClasses = ({ appearance, connotation, shape, size }) => classNames.clas
   [`size-${size}`, Boolean(size)]
 );
 function renderIcon(iconTag) {
-  return defineVividComponent.html`
+  return vividElement.html`
 		<span class="icon">
 			<${iconTag} name="${(x) => x.icon ? `${x.icon}` : "user-line"}"></${iconTag}>
 		</span>
 	`;
 }
 function renderInitials() {
-  return defineVividComponent.html`
+  return vividElement.html`
 		<span class="initials">${({ initials }) => initials.substring(0, 2)}</span>
 	`;
 }
 const AvatarTemplate = (context) => {
   const iconTag = context.tagFor(definition.Icon);
-  return defineVividComponent.html` <span class="${getClasses}">
+  return vividElement.html` <span class="${getClasses}">
 		<slot name="graphic">
 			${when.when((x) => x.initials, renderInitials())}
 			${when.when((x) => !x.initials, renderIcon(iconTag))}
@@ -67,7 +66,7 @@ const AvatarTemplate = (context) => {
 	</span>`;
 };
 
-const avatarDefinition = defineVividComponent.defineVividComponent(
+const avatarDefinition = vividElement.defineVividComponent(
   "avatar",
   Avatar,
   AvatarTemplate,
@@ -76,7 +75,7 @@ const avatarDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerAvatar = defineVividComponent.createRegisterFunction(avatarDefinition);
+const registerAvatar = vividElement.createRegisterFunction(avatarDefinition);
 
 exports.avatarDefinition = avatarDefinition;
 exports.registerAvatar = registerAvatar;

package/shared/definition6.js

@@ -1,6 +1,5 @@
 import { I as Icon, i as iconDefinition } from './definition27.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 { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 

package/shared/definition60.cjs

@@ -1,9 +1,8 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const definition = require('./definition59.cjs');
 const keyCodes = require('./key-codes.cjs');
-const foundationElement = require('./foundation-element.cjs');
 const dom = require('./dom.cjs');
 const ref = require('./ref.cjs');
 const slotted = require('./slotted.cjs');
@@ -38,7 +37,7 @@ function getDisplayedNodes(rootNode, selector) {
   }
   return [];
 }
-class TreeView extends foundationElement.FoundationElement {
+class TreeView extends vividElement.VividElement {
   constructor() {
     super(...arguments);
     /**
@@ -195,7 +194,7 @@ class TreeView extends foundationElement.FoundationElement {
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("tabindex", "0");
-    defineVividComponent.DOM.queueUpdate(() => {
+    vividElement.DOM.queueUpdate(() => {
       this.setItems();
     });
   }
@@ -256,19 +255,19 @@ class TreeView extends foundationElement.FoundationElement {
 }
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr({ attribute: "render-collapsed-nodes" })
+  vividElement.attr({ attribute: "render-collapsed-nodes" })
 ], TreeView.prototype, "renderCollapsedNodes");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], TreeView.prototype, "currentSelected");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], TreeView.prototype, "slottedTreeItems");
 
 const getClasses = (_) => classNames.classNames("control");
-const TreeViewTemplate = defineVividComponent.html` <template
+const TreeViewTemplate = vividElement.html` <template
 	role="tree"
 	${ref.ref("treeView")}
 	@keydown="${(x, c) => x.handleKeyDown(c.event)}"
@@ -282,7 +281,7 @@ const TreeViewTemplate = defineVividComponent.html` <template
 	</div>
 </template>`;
 
-const treeViewDefinition = defineVividComponent.defineVividComponent(
+const treeViewDefinition = vividElement.defineVividComponent(
   "tree-view",
   TreeView,
   TreeViewTemplate,
@@ -291,7 +290,7 @@ const treeViewDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerTreeView = defineVividComponent.createRegisterFunction(treeViewDefinition);
+const registerTreeView = vividElement.createRegisterFunction(treeViewDefinition);
 
 exports.registerTreeView = registerTreeView;
 exports.treeViewDefinition = treeViewDefinition;

package/shared/definition60.js

@@ -1,7 +1,6 @@
-import { D as DOM, a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement, D as DOM, a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { T as TreeItem, i as isTreeItemElement, t as treeItemDefinition } from './definition59.js';
 import { k as keyEnter, e as keyArrowUp, f as keyArrowDown, i as keyArrowRight, h as keyArrowLeft, d as keyEnd, g as keyHome } from './key-codes.js';
-import { F as FoundationElement } from './foundation-element.js';
 import { i as isHTMLElement } from './dom.js';
 import { r as ref } from './ref.js';
 import { s as slotted } from './slotted.js';
@@ -36,7 +35,7 @@ function getDisplayedNodes(rootNode, selector) {
   }
   return [];
 }
-class TreeView extends FoundationElement {
+class TreeView extends VividElement {
   constructor() {
     super(...arguments);
     /**