@vonage/vivid 4.14.0 → 4.14.1

package/shared/definition42.cjs

@@ -3,17 +3,16 @@
 const definition$1 = require('./definition11.cjs');
 const definition = require('./definition63.cjs');
 const definition$2 = require('./definition27.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const scrollIntoView = require('./scrollIntoView.cjs');
 const formAssociated = require('./form-associated.cjs');
-const vividElement = require('./vivid-element.cjs');
 const affix = require('./affix.cjs');
 const localized = require('./localized.cjs');
 const formElements = require('./form-elements.cjs');
 const listbox = require('./listbox2.cjs');
 const applyMixins = require('./apply-mixins.cjs');
-const foundationElement = require('./foundation-element.cjs');
+const keyCodes = require('./key-codes2.cjs');
 const when = require('./when.cjs');
 const ref = require('./ref.cjs');
 const slotted = require('./slotted.cjs');
@@ -314,14 +313,14 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
     this._areOptionsInitialized = true;
     if (oldValue) {
       for (const option of oldValue) {
-        const notifier = defineVividComponent.Observable.getNotifier(option);
+        const notifier = vividElement.Observable.getNotifier(option);
         notifier.unsubscribe(__privateGet(this, _slottedOptionsChangeHandler), "selected");
       }
     }
     if (newValue) {
       for (const option of newValue) {
         option._displayCheckmark = true;
-        const notifier = defineVividComponent.Observable.getNotifier(option);
+        const notifier = vividElement.Observable.getNotifier(option);
         notifier.subscribe(__privateGet(this, _slottedOptionsChangeHandler), "selected");
       }
     }
@@ -377,7 +376,7 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
       case "Enter":
       case " ": {
         this._onTagRemoved(this.values[tagIndex]);
-        defineVividComponent.DOM.processUpdates();
+        vividElement.DOM.processUpdates();
         __privateMethod(this, _SearchableSelect_instances, moveTagFocusTo_fn).call(this, __privateMethod(this, _SearchableSelect_instances, nextTagIndexForRemoved_fn).call(this, tagIndex));
         break;
       }
@@ -740,76 +739,76 @@ updateFormValue_fn = function() {
 };
 _resizeObserver = new WeakMap();
 __decorateClass$1([
-  defineVividComponent.attr
+  vividElement.attr
 ], SearchableSelect.prototype, "appearance", 2);
 __decorateClass$1([
-  defineVividComponent.attr
+  vividElement.attr
 ], SearchableSelect.prototype, "shape", 2);
 __decorateClass$1([
-  defineVividComponent.attr({ mode: "boolean", attribute: "fixed-dropdown" })
+  vividElement.attr({ mode: "boolean", attribute: "fixed-dropdown" })
 ], SearchableSelect.prototype, "fixedDropdown", 2);
 __decorateClass$1([
-  defineVividComponent.attr
+  vividElement.attr
 ], SearchableSelect.prototype, "placeholder", 2);
 __decorateClass$1([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], SearchableSelect.prototype, "open", 2);
 __decorateClass$1([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], SearchableSelect.prototype, "multiple", 2);
 __decorateClass$1([
-  defineVividComponent.attr({ attribute: "external-tags", mode: "boolean" })
+  vividElement.attr({ attribute: "external-tags", mode: "boolean" })
 ], SearchableSelect.prototype, "externalTags", 2);
 __decorateClass$1([
-  defineVividComponent.attr({ attribute: "max-lines", converter: defineVividComponent.nullableNumberConverter })
+  vividElement.attr({ attribute: "max-lines", converter: vividElement.nullableNumberConverter })
 ], SearchableSelect.prototype, "maxLines", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "values", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "initialValues", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_input", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_inputValue", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_slottedOptions", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_filteredOptions", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_filteredEnabledOptions", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_highlightedOptionIndex", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_contentArea", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_numElidedTags", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_tagRows", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_lastTagRow", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_listbox", 2);
 __decorateClass$1([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], SearchableSelect.prototype, "clearable", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_changeDescription", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_anchor", 2);
 SearchableSelect = __decorateClass$1([
   formElements.errorText,
@@ -832,7 +831,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class OptionTag extends foundationElement.FoundationElement {
+class OptionTag extends keyCodes.FoundationElement {
   constructor() {
     super(...arguments);
     this.removable = false;
@@ -846,19 +845,19 @@ class OptionTag extends foundationElement.FoundationElement {
   }
 }
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], OptionTag.prototype, "shape");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], OptionTag.prototype, "label");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], OptionTag.prototype, "removable");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], OptionTag.prototype, "disabled");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], OptionTag.prototype, "hasIconPlaceholder");
 applyMixins.applyMixins(OptionTag, localized.Localized);
 
@@ -870,13 +869,13 @@ const getStateClasses = (x) => classNames.classNames(
   ["success", !!x.successText]
 );
 function renderLabel() {
-  return defineVividComponent.html`
+  return vividElement.html`
 		<label for="control" class="label" id="label"> ${(x) => x.label} </label>
 	`;
 }
 const tagTemplateFactory = (context, getComponent) => {
   const optionTagTag = context.tagFor(OptionTag);
-  return defineVividComponent.html`
+  return vividElement.html`
 		<div class="tag-wrapper">
 			<${optionTagTag}
 				class="tag"
@@ -896,7 +895,7 @@ const tagTemplateFactory = (context, getComponent) => {
 };
 const elidedTagTemplateFactory = (context, getComponent) => {
   const optionTagTag = context.tagFor(OptionTag);
-  return defineVividComponent.html`
+  return vividElement.html`
 		<${optionTagTag}
 			class="tag"
 			tabindex="-1"
@@ -921,7 +920,7 @@ function renderFieldset(context) {
     context,
     (_, c) => c.parent
   );
-  return defineVividComponent.html`
+  return vividElement.html`
 		<div
 			class="fieldset ${getStateClasses}"
 			@click="${(x, c) => x._onFieldsetClick(c.event)}"
@@ -931,7 +930,7 @@ function renderFieldset(context) {
 			<div class="content-area" ${ref.ref("_contentArea")}>
 				${repeat.repeat(
     (x) => x._tagRows,
-    defineVividComponent.html`
+    vividElement.html`
 						<div class="tag-row">
 							${when.when(
       (_, c) => c.isFirst && c.parent._numElidedTags,
@@ -978,7 +977,7 @@ function renderFieldset(context) {
 			<slot name="meta"></slot>
 			${when.when(
     (x) => x._shouldShowClearButton,
-    defineVividComponent.html`<${buttonTag}
+    vividElement.html`<${buttonTag}
 					aria-label="${(x) => x.locale.searchableSelect.clearButtonLabel}"
 					@click="${(x) => x._onClearButtonClick()}"
 					@mousedown="${() => false}"
@@ -996,7 +995,7 @@ function renderFieldset(context) {
 }
 function renderControl(context) {
   const popupTag = context.tagFor(definition.Popup);
-  return defineVividComponent.html`
+  return vividElement.html`
 		${when.when((x) => x.label, renderLabel())}
 		<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
 			${(x) => x._changeDescription}
@@ -1028,16 +1027,16 @@ function renderControl(context) {
 						</slot>
 						${when.when(
     (x) => x._filteredOptions.length === 0,
-    defineVividComponent.html`<div class="empty-message">
+    vividElement.html`<div class="empty-message">
 								${when.when(
       (x) => x._inputValue === "",
-      defineVividComponent.html`<slot name="no-options">
+      vividElement.html`<slot name="no-options">
 										${(x) => x.locale.searchableSelect.noOptionsMessage}
 									</slot>`
     )}
 								${when.when(
       (x) => x._inputValue !== "",
-      defineVividComponent.html`<slot name="no-matches">
+      vividElement.html`<slot name="no-matches">
 										${(x) => x.locale.searchableSelect.noMatchesMessage}
 									</slot>`
     )}
@@ -1051,7 +1050,7 @@ function renderControl(context) {
 }
 const SearchableSelectTemplate = (context) => {
   const optionTagTag = context.tagFor(OptionTag);
-  return defineVividComponent.html`
+  return vividElement.html`
 		<template :_optionTagTagName="${() => optionTagTag}">
 			<div class="control-wrapper">
 				${renderControl(context)} ${formElements.getFeedbackTemplate(context)}
@@ -1067,7 +1066,7 @@ const getClasses = ({ shape, disabled, removable }) => classNames.classNames(
   [`shape-${shape}`, Boolean(shape)]
 );
 function renderRemoveButton(iconTag) {
-  return defineVividComponent.html`
+  return vividElement.html`
 		<span
 			class="remove-button"
 			aria-label="${(x) => x.locale.searchableSelect.removeTagButtonLabel(x.label)}"
@@ -1081,22 +1080,22 @@ function renderRemoveButton(iconTag) {
 }
 const optionTagTemplate = (context) => {
   const iconTag = context.tagFor(definition$2.Icon);
-  return defineVividComponent.html`<span class="${getClasses}" aria-disabled="${(x) => x.disabled}">
+  return vividElement.html`<span class="${getClasses}" aria-disabled="${(x) => x.disabled}">
 		<slot name="icon" aria-hidden="true">
 			${when.when(
     (x) => x.hasIconPlaceholder,
-    defineVividComponent.html`<div class="icon-placeholder"></div>`
+    vividElement.html`<div class="icon-placeholder"></div>`
   )}
 		</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, renderRemoveButton(iconTag))}
 	</span>`;
 };
 
-const optionTagDefinition = defineVividComponent.defineVividComponent(
+const optionTagDefinition = vividElement.defineVividComponent(
   "option-tag",
   OptionTag,
   optionTagTemplate,
@@ -1108,7 +1107,7 @@ const optionTagDefinition = defineVividComponent.defineVividComponent(
     }
   }
 );
-const searchableSelectDefinition = defineVividComponent.defineVividComponent(
+const searchableSelectDefinition = vividElement.defineVividComponent(
   "searchable-select",
   SearchableSelect,
   SearchableSelectTemplate,
@@ -1120,7 +1119,7 @@ const searchableSelectDefinition = defineVividComponent.defineVividComponent(
     }
   }
 );
-const registerSearchableSelect = defineVividComponent.createRegisterFunction(
+const registerSearchableSelect = vividElement.createRegisterFunction(
   searchableSelectDefinition
 );
 

package/shared/definition42.js

@@ -1,17 +1,16 @@
 import { B as Button, c as chevronTemplateFactory, b as buttonDefinition } from './definition11.js';
 import { P as Popup, p as popupDefinition } from './definition63.js';
 import { I as Icon, i as iconDefinition } from './definition27.js';
-import { O as Observable, D as DOM, a as attr, n as nullableNumberConverter, o as observable, h as html, f as createRegisterFunction, d as defineVividComponent } from './defineVividComponent.js';
+import { V as VividElement, O as Observable, D as DOM, a as attr, n as nullableNumberConverter, o as observable, h as html, f as createRegisterFunction, d as defineVividComponent } from './vivid-element.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.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 { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { L as Localized } from './localized.js';
 import { F as FormElementSuccessText, a as FormElementHelperText, e as errorText, f as formElements, g as getFeedbackTemplate } from './form-elements.js';
 import { a as Listbox } from './listbox2.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { F as FoundationElement } from './foundation-element.js';
+import { F as FoundationElement } from './key-codes2.js';
 import { w as when } from './when.js';
 import { r as ref } from './ref.js';
 import { s as slotted } from './slotted.js';

package/shared/definition43.cjs

@@ -3,7 +3,7 @@
 const definition = require('./definition63.cjs');
 const definition$3 = require('./definition27.cjs');
 const definition$1 = require('./definition35.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const listbox$1 = require('./listbox2.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const listbox = require('./listbox.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,7 +661,7 @@ 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() {
@@ -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,13 +802,13 @@ 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`
+  return vividElement.html`
 		<${optionTag} ${ref.ref("placeholderOption")}
 			text="${(x) => x.placeholder}" hidden disabled>
 		</${optionTag}>`;
@@ -816,7 +816,7 @@ function renderPlaceholder(context) {
 function selectValue(context) {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
   const chevronTemplate = definition$2.chevronTemplateFactory(context);
-  return defineVividComponent.html` <div
+  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))}
@@ -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,7 +906,7 @@ const SelectTemplate = (context) => {
 	`;
 };
 
-const selectDefinition = defineVividComponent.defineVividComponent(
+const selectDefinition = vividElement.defineVividComponent(
   "select",
   Select,
   SelectTemplate,
@@ -915,7 +915,7 @@ const selectDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerSelect = defineVividComponent.createRegisterFunction(selectDefinition);
+const registerSelect = vividElement.createRegisterFunction(selectDefinition);
 
 exports.registerSelect = registerSelect;
 exports.selectDefinition = selectDefinition;

package/shared/definition43.js

@@ -1,7 +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 { 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 Listbox$1 } from './listbox2.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { L as Listbox } from './listbox.js';

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';