@vonage/vivid 4.14.0 → 4.14.2

package/shared/definition51.js

@@ -1,12 +1,11 @@
 import { t as tabDefinition } from './definition50.js';
 import { t as tabPanelDefinition } from './definition49.js';
-import { a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { a as attr, o as observable, V as VividElement, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { i as keyArrowRight$1, h as keyArrowLeft$1, f as keyArrowDown$1, e as keyArrowUp$1, d as keyEnd$1, g as keyHome$1 } from './key-codes.js';
-import { V as VividElement } from './vivid-element.js';
 import { _ as __decorate, F as FoundationElement } from './foundation-element.js';
-import { S as StartEnd, a as keyArrowRight, b as keyArrowLeft, c as keyArrowDown, d as keyArrowUp, e as keyEnd, f as keyHome } from './key-codes2.js';
+import { S as StartEnd } from './start-end.js';
 import { a as applyMixins } from './apply-mixins2.js';
-import { u as uniqueId, l as limit } from './strings2.js';
+import { a as keyArrowRight, b as keyArrowLeft, c as keyArrowDown, d as keyArrowUp, e as keyEnd, f as keyHome } from './key-codes2.js';
 import { u as uniqueId$1 } from './strings.js';
 import { l as limit$1 } from './numbers.js';
 import { r as ref } from './ref.js';
@@ -14,6 +13,27 @@ import { s as slotted } from './slotted.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
+/**
+ * This method keeps a given value within the bounds of a min and max value. If the value
+ * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
+ * the maximum will be returned. Otherwise, the value is returned un-changed.
+ */
+/**
+ * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
+ * If value is greater than max, max will be returned.
+ */
+function limit(min, max, value) {
+    return Math.min(Math.max(value, min), max);
+}
+
+let uniqueIdCounter = 0;
+/**
+ * Generates a unique ID based on incrementing a counter.
+ */
+function uniqueId(prefix = "") {
+    return `${prefix}${uniqueIdCounter++}`;
+}
+
 /**
  * The orientation of the {@link @microsoft/fast-foundation#(Tabs:class)} component
  * @public
@@ -402,6 +422,11 @@ class Tabs extends VividElement {
     super(...arguments);
     // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
     this.orientation = TabsOrientation.horizontal;
+    this.#isLastTabSelectedAfterRemove = (oldValue, newValue, isTab = true) => {
+      return oldValue.length > newValue.length && this.activetab.id === oldValue[oldValue.length - 1].getAttribute(
+        isTab ? "id" : "aria-labelledby"
+      );
+    };
     // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
     this.activeindicator = true;
     this.showActiveIndicator = true;
@@ -424,10 +449,10 @@ class Tabs extends VividElement {
     this.setTabs = () => {
       const gridHorizontalProperty = "gridColumn";
       const gridVerticalProperty = "gridRow";
-      const gridProperty = this.isHorizontal() ? gridHorizontalProperty : gridVerticalProperty;
+      const gridProperty = this.#isHorizontal() ? gridHorizontalProperty : gridVerticalProperty;
       this.activeTabIndex = this.getActiveIndex();
       this.showActiveIndicator = false;
-      if (this.isHorizontal()) {
+      if (this.#isHorizontal()) {
         this.tablist.style.setProperty(
           "grid-template-columns",
           `repeat(${this.tabs.length}, var(${TABLIST_COLUMN}))`
@@ -447,7 +472,7 @@ class Tabs extends VividElement {
           tab.setAttribute("aria-selected", isActiveTab ? "true" : "false");
           tab.setAttribute("aria-controls", tabpanelId);
           tab.addEventListener("click", this.handleTabClick);
-          tab.addEventListener("keydown", this.handleTabKeyDown);
+          tab.addEventListener("keydown", this.#handleTabKeyDown);
           tab.setAttribute("tabindex", isActiveTab ? "0" : "-1");
           if (isActiveTab) {
             this.activetab = tab;
@@ -457,7 +482,7 @@ class Tabs extends VividElement {
         tab.style[gridHorizontalProperty] = "";
         tab.style[gridVerticalProperty] = "";
         tab.style[gridProperty] = `${index + 1}`;
-        !this.isHorizontal() ? tab.classList.add("vertical") : tab.classList.remove("vertical");
+        !this.#isHorizontal() ? tab.classList.add("vertical") : tab.classList.remove("vertical");
       });
     };
     this.setTabPanels = () => {
@@ -477,8 +502,11 @@ class Tabs extends VividElement {
         this.setComponent();
       }
     };
-    this.handleTabKeyDown = (event) => {
-      if (this.isHorizontal()) {
+    this.#isHorizontal = () => {
+      return this.orientation === TabsOrientation.horizontal;
+    };
+    this.#handleTabKeyDown = (event) => {
+      if (this.#isHorizontal()) {
         switch (event.key) {
           case keyArrowLeft$1:
             event.preventDefault();
@@ -518,7 +546,7 @@ class Tabs extends VividElement {
     this.adjustBackward = (_) => {
       this.#moveToNextTab(-1);
     };
-    this.moveToTabByIndex = (group, index) => {
+    this.#moveToTabByIndex = (group, index) => {
       const tab = group[index];
       this.activetab = tab;
       this.prevActiveTabIndex = this.activeTabIndex;
@@ -536,9 +564,9 @@ class Tabs extends VividElement {
     if (this.$fastController.isConnected) {
       this.setTabs();
       this.setTabPanels();
-      this.handleActiveIndicatorPosition();
+      this.#handleActiveIndicatorPosition();
     }
-    this.patchIndicatorStyleTransition();
+    this.#patchIndicatorStyleTransition();
     if (!this.activeIndicatorRef) return;
     if (this.orientation === TabsOrientation.vertical) {
       this.activeIndicatorRef.style.removeProperty(ACTIVE_TAB_WIDTH);
@@ -554,38 +582,43 @@ class Tabs extends VividElement {
       );
       this.setTabs();
       this.setTabPanels();
-      this.handleActiveIndicatorPosition();
+      this.#handleActiveIndicatorPosition();
     }
-    this.patchIndicatorStyleTransition();
+    this.#patchIndicatorStyleTransition();
     this.#updateTabsConnotation();
     this.#scrollToIndex(this.activeTabIndex);
   }
+  #isLastTabSelectedAfterRemove;
   /**
    * @internal
    */
-  tabsChanged() {
+  tabsChanged(oldValue, newValue) {
     if (this.$fastController.isConnected && this.tabs.length <= this.tabpanels.length) {
       this.tabIds = this.getTabIds();
       this.tabpanelIds = this.getTabPanelIds();
       this.setTabs();
       this.setTabPanels();
-      this.handleActiveIndicatorPosition();
+      this.#handleActiveIndicatorPosition(
+        !this.#isLastTabSelectedAfterRemove(oldValue, newValue)
+      );
     }
-    this.patchIndicatorStyleTransition();
+    this.#patchIndicatorStyleTransition();
     this.#updateScrollStatus();
   }
   /**
    * @internal
    */
-  tabpanelsChanged() {
+  tabpanelsChanged(oldValue, newValue) {
     if (this.$fastController.isConnected && this.tabpanels.length <= this.tabs.length) {
       this.tabIds = this.getTabIds();
       this.tabpanelIds = this.getTabPanelIds();
       this.setTabs();
       this.setTabPanels();
-      this.handleActiveIndicatorPosition();
+      this.#handleActiveIndicatorPosition(
+        !this.#isLastTabSelectedAfterRemove(oldValue, newValue, false)
+      );
     }
-    this.patchIndicatorStyleTransition();
+    this.#patchIndicatorStyleTransition();
   }
   getActiveIndex() {
     const id = this.activeid;
@@ -612,9 +645,8 @@ class Tabs extends VividElement {
       this.change();
     }
   }
-  isHorizontal() {
-    return this.orientation === TabsOrientation.horizontal;
-  }
+  #isHorizontal;
+  #handleTabKeyDown;
   /**
    * The adjust method for FASTTabs
    * @public
@@ -631,7 +663,7 @@ class Tabs extends VividElement {
     );
     const nextIndex = this.tabs.indexOf(focusableTabs[nextTabIndex]);
     if (nextIndex > -1) {
-      this.moveToTabByIndex(this.tabs, nextIndex);
+      this.#moveToTabByIndex(this.tabs, nextIndex);
     }
   }
   #moveToNextTab(direction) {
@@ -639,11 +671,12 @@ class Tabs extends VividElement {
     for (let offset = 1; offset < this.tabs.length; offset++) {
       const index = (activeIndex + direction * offset + this.tabs.length) % this.tabs.length;
       if (this.isFocusableElement(this.tabs[index])) {
-        this.moveToTabByIndex(this.tabs, index);
+        this.#moveToTabByIndex(this.tabs, index);
         break;
       }
     }
   }
+  #moveToTabByIndex;
   focusTab() {
     this.tabs[this.activeTabIndex].focus();
   }
@@ -656,13 +689,13 @@ class Tabs extends VividElement {
   #updateScrollStatus() {
     this.tablist.parentElement.dispatchEvent(new Event("scroll"));
   }
-  /**
-   * @internal
-   */
-  patchIndicatorStyleTransition() {
-    if (!this.activetab || !this.activeIndicatorRef) return;
-    if (this.orientation === TabsOrientation.vertical || !this.showActiveIndicator)
+  get #shouldMoveIndicator() {
+    return !(!this.activetab || !this.activeIndicatorRef || this.orientation === TabsOrientation.vertical || !this.showActiveIndicator);
+  }
+  #patchIndicatorStyleTransition() {
+    if (!this.#shouldMoveIndicator) {
       return;
+    }
     const width = this.activetab.getBoundingClientRect().width;
     this.activeIndicatorRef.style.setProperty(ACTIVE_TAB_WIDTH, `${width}px`);
   }
@@ -675,7 +708,7 @@ class Tabs extends VividElement {
     const scrollWrapper = this.tablist.parentElement;
     this.#resizeObserver = new ResizeObserver(() => {
       this.#updateScrollStatus();
-      this.patchIndicatorStyleTransition();
+      this.#patchIndicatorStyleTransition();
     });
     this.#resizeObserver.observe(scrollWrapper);
   }
@@ -721,18 +754,18 @@ class Tabs extends VividElement {
     this.#tabListWrapper.scrollTo({ top, left, behavior: "smooth" });
   }
   #getGridProperty() {
-    return this.isHorizontal() ? "gridColumn" : "gridRow";
+    return this.#isHorizontal() ? "gridColumn" : "gridRow";
   }
   #getTranslateProperty() {
-    return this.isHorizontal() ? "translateX" : "translateY";
+    return this.#isHorizontal() ? "translateX" : "translateY";
   }
-  handleActiveIndicatorPosition() {
+  #handleActiveIndicatorPosition(animate = true) {
     if (this.showActiveIndicator && this.activeindicator) {
-      this.animateActiveIndicator();
+      this.#animateActiveIndicator(animate);
     }
   }
-  animateActiveIndicator() {
-    const offsetProperty = this.isHorizontal() ? "offsetLeft" : "offsetTop";
+  #animateActiveIndicator(animate) {
+    const offsetProperty = this.#isHorizontal() ? "offsetLeft" : "offsetTop";
     const currentOffset = this.activeIndicatorRef[offsetProperty];
     const currentGridValue = this.activeIndicatorRef.style[this.#getGridProperty()];
     this.activeIndicatorRef.style[this.#getGridProperty()] = `${this.activeTabIndex + 1}`;
@@ -740,7 +773,11 @@ class Tabs extends VividElement {
     this.activeIndicatorRef.style[this.#getGridProperty()] = currentGridValue;
     const relativeOffset = targetOffset - currentOffset;
     this.activeIndicatorRef.style.transform = `${this.#getTranslateProperty()}(${relativeOffset}px)`;
-    this.activeIndicatorRef.classList.add("activeIndicatorTransition");
+    if (animate) {
+      this.activeIndicatorRef.classList.add("activeIndicatorTransition");
+    } else {
+      this.activeIndicatorRef.classList.remove("activeIndicatorTransition");
+    }
   }
   /**
    * @internal
@@ -827,7 +864,7 @@ function addEndShadow(scrollShadow, scrollWrapper) {
   );
 }
 function setShadowWhenScrollTabs(_, { event }) {
-  const scrollWrapper = event.target;
+  const scrollWrapper = event.currentTarget;
   const scrollShadow = scrollWrapper.parentElement;
   if (setNoScrollState(scrollShadow, scrollWrapper)) {
     return;

package/shared/definition52.cjs

@@ -1,6 +1,5 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
 const vividElement = require('./vivid-element.cjs');
 const classNames = require('./class-names.cjs');
 
@@ -22,11 +21,11 @@ class TagGroup extends vividElement.VividElement {
   }
 }
 __decorateClass([
-  defineVividComponent.attr({ attribute: "aria-label" })
+  vividElement.attr({ attribute: "aria-label" })
 ], TagGroup.prototype, "ariaLabel");
 
 const getClasses = (_) => classNames.classNames("base");
-const TagGroupTemplate = defineVividComponent.html`
+const TagGroupTemplate = vividElement.html`
 	<div
 		class="${getClasses}"
 		role="listbox"
@@ -37,7 +36,7 @@ const TagGroupTemplate = defineVividComponent.html`
 	</div>
 `;
 
-const tagGroupDefinition = defineVividComponent.defineVividComponent(
+const tagGroupDefinition = vividElement.defineVividComponent(
   "tag-group",
   TagGroup,
   TagGroupTemplate,
@@ -46,7 +45,7 @@ const tagGroupDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerTagGroup = defineVividComponent.createRegisterFunction(tagGroupDefinition);
+const registerTagGroup = vividElement.createRegisterFunction(tagGroupDefinition);
 
 exports.registerTagGroup = registerTagGroup;
 exports.tagGroupDefinition = tagGroupDefinition;

package/shared/definition52.js

@@ -1,5 +1,4 @@
-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 classNames } from './class-names.js';
 
 const styles = ".base{display:flex;flex-wrap:wrap;gap:8px}";

package/shared/definition53.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 vividElement = require('./vivid-element.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
@@ -54,28 +53,28 @@ class Tag extends vividElement.VividElement {
   }
 }
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Tag.prototype, "connotation");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Tag.prototype, "shape");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Tag.prototype, "appearance");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Tag.prototype, "label");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Tag.prototype, "removable");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Tag.prototype, "disabled");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Tag.prototype, "selectable");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Tag.prototype, "selected");
 applyMixins.applyMixins(Tag, affix.AffixIcon);
 
@@ -100,7 +99,7 @@ const getClasses = ({
   [`shape-${shape}`, Boolean(shape)]
 );
 function renderDismissButton(iconTag) {
-  return defineVividComponent.html`
+  return vividElement.html`
 	<span
 		aria-hidden="true"
 		class="dismiss-button"
@@ -111,7 +110,7 @@ function renderDismissButton(iconTag) {
 const tagTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
   const iconTag = context.tagFor(definition.Icon);
-  return defineVividComponent.html` <span
+  return vividElement.html` <span
 		class="${getClasses}"
 		role="option"
 		aria-disabled="${(x) => x.disabled}"
@@ -123,17 +122,17 @@ const tagTemplate = (context) => {
 		${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
 		${when.when(
     (x) => x.label,
-    (x) => defineVividComponent.html`<span class="label">${x.label}</span>`
+    (x) => vividElement.html`<span class="label">${x.label}</span>`
   )}
 		${when.when((x) => x.removable && !x.selectable, renderDismissButton(iconTag))}
 		${when.when(
     (x) => x.selectable && x.selected,
-    defineVividComponent.html`<${iconTag} class="selectable-icon" name="check-circle-solid"></${iconTag}>`
+    vividElement.html`<${iconTag} class="selectable-icon" name="check-circle-solid"></${iconTag}>`
   )}
 	</span>`;
 };
 
-const tagDefinition = defineVividComponent.defineVividComponent(
+const tagDefinition = vividElement.defineVividComponent(
   "tag",
   Tag,
   tagTemplate,
@@ -145,7 +144,7 @@ const tagDefinition = defineVividComponent.defineVividComponent(
     }
   }
 );
-const registerTag = defineVividComponent.createRegisterFunction(tagDefinition);
+const registerTag = vividElement.createRegisterFunction(tagDefinition);
 
 exports.registerTag = registerTag;
 exports.tagDefinition = tagDefinition;

package/shared/definition53.js

@@ -1,8 +1,7 @@
 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, a as attr, 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 { V as VividElement } from './vivid-element.js';
+import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 

package/shared/definition54.cjs

@@ -1,11 +1,10 @@
 'use strict';
 
 const definition = require('./definition27.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const textField = require('./text-field2.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const formAssociated = require('./form-associated.cjs');
-const vividElement = require('./vivid-element.cjs');
 const formElements = require('./form-elements.cjs');
 const when = require('./when.cjs');
 const ref = require('./ref.cjs');
@@ -157,55 +156,55 @@ let TextArea = class extends FormAssociatedTextArea {
 _reflectToTextArea = new WeakMap();
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], TextArea.prototype, "readOnly", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], TextArea.prototype, "resize", 2);
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], TextArea.prototype, "autofocus", 2);
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr({ attribute: "form" })
+  vividElement.attr({ attribute: "form" })
 ], TextArea.prototype, "formId", 2);
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], TextArea.prototype, "list", 2);
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], TextArea.prototype, "maxlength", 2);
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], TextArea.prototype, "minlength", 2);
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], TextArea.prototype, "name", 2);
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], TextArea.prototype, "placeholder", 2);
 __decorateClass([
-  defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter, mode: "fromView" })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter, mode: "fromView" })
 ], TextArea.prototype, "cols", 2);
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter, mode: "fromView" })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter, mode: "fromView" })
 ], TextArea.prototype, "rows", 2);
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], TextArea.prototype, "spellcheck", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], TextArea.prototype, "defaultSlottedNodes", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], TextArea.prototype, "wrap", 2);
 TextArea = __decorateClass([
   formElements.errorText,
@@ -236,19 +235,19 @@ const getClasses = ({
   ["success", !!successText]
 );
 function renderLabel() {
-  return defineVividComponent.html` <label for="control" class="label">
+  return vividElement.html` <label for="control" class="label">
 		${(x) => x.label}
 	</label>`;
 }
 function renderCharCount() {
-  return defineVividComponent.html`
+  return vividElement.html`
 		<span class="char-count"
 			>${(x) => x.value ? x.value.length : 0} / ${(x) => x.maxlength}</span
 		>
 	`;
 }
 const TextAreaTemplate = (context) => {
-  return defineVividComponent.html`
+  return vividElement.html`
 		<div class="${getClasses}">
 			${when.when((x) => x.charCount && x.maxlength, renderCharCount())}
 			${when.when((x) => x.label, renderLabel())}
@@ -292,7 +291,7 @@ const TextAreaTemplate = (context) => {
 	`;
 };
 
-const textAreaDefinition = defineVividComponent.defineVividComponent(
+const textAreaDefinition = vividElement.defineVividComponent(
   "text-area",
   TextArea,
   TextAreaTemplate,
@@ -304,7 +303,7 @@ const textAreaDefinition = defineVividComponent.defineVividComponent(
     }
   }
 );
-const registerTextArea = defineVividComponent.createRegisterFunction(textAreaDefinition);
+const registerTextArea = vividElement.createRegisterFunction(textAreaDefinition);
 
 exports.registerTextArea = registerTextArea;
 exports.textAreaDefinition = textAreaDefinition;

package/shared/definition54.js

@@ -1,9 +1,8 @@
 import { i as iconDefinition } from './definition27.js';
-import { a as attr, n as nullableNumberConverter, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement, a as attr, n as nullableNumberConverter, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { R as Reflector, D as DelegatesARIATextbox } from './text-field2.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { F as FormAssociated } from './form-associated.js';
-import { V as VividElement } from './vivid-element.js';
 import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount, g as getFeedbackTemplate } from './form-elements.js';
 import { w as when } from './when.js';
 import { r as ref } from './ref.js';

package/shared/definition55.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const definition = require('./definition27.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const textField$1 = require('./text-field2.cjs');
 const textField = require('./text-field.cjs');
 const affix = require('./affix.cjs');
@@ -41,7 +41,7 @@ const getStateClasses = ({
   [`size-${scale}`, Boolean(scale)]
 );
 function renderCharCount() {
-  return defineVividComponent.html`
+  return vividElement.html`
 		<span class="char-count"
 			>${(x) => x.value ? x.value.length : 0} / ${(x) => x.maxlength}</span
 		>
@@ -49,7 +49,7 @@ function renderCharCount() {
 }
 const TextfieldTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return defineVividComponent.html` <div class="base ${getStateClasses}">
+  return vividElement.html` <div class="base ${getStateClasses}">
 			${when.when((x) => x.charCount && x.maxlength, renderCharCount())}
 			<slot class="label" name="_label"></slot>
 			<div class="fieldset">
@@ -76,7 +76,7 @@ const TextfieldTemplate = (context) => {
 		<slot name="_mirrored-helper-text"></slot>`;
 };
 
-const textFieldDefinition = defineVividComponent.defineVividComponent(
+const textFieldDefinition = vividElement.defineVividComponent(
   "text-field",
   textField$1.TextField,
   TextfieldTemplate,
@@ -88,7 +88,7 @@ const textFieldDefinition = defineVividComponent.defineVividComponent(
     }
   }
 );
-const registerTextField = defineVividComponent.createRegisterFunction(textFieldDefinition);
+const registerTextField = vividElement.createRegisterFunction(textFieldDefinition);
 
 exports.registerTextField = registerTextField;
 exports.textFieldDefinition = textFieldDefinition;

package/shared/definition55.js

@@ -1,5 +1,5 @@
 import { i as iconDefinition } from './definition27.js';
-import { h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { T as TextField } from './text-field2.js';
 import { s as styles } from './text-field.js';
 import { a as affixIconTemplateFactory } from './affix.js';