@vonage/vivid 4.14.1 → 4.14.2

package/shared/definition34.js

@@ -4,19 +4,88 @@ import { a as attr, n as nullableNumberConverter, o as observable, D as DOM, V a
 import { i as iconDefinition } from './definition27.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { F as FormAssociated$1 } from './form-associated.js';
-import { F as FoundationElement, _ as __decorate, S as StartEnd } from './key-codes2.js';
+import { _ as __decorate, F as FoundationElement } from './foundation-element.js';
 import { a as applyMixins } from './apply-mixins2.js';
 import { F as FormAssociated } from './form-associated2.js';
-import { A as ARIAGlobalStatesAndProperties } from './aria-global2.js';
+import { S as StartEnd } from './start-end.js';
 import { f as keyArrowDown, e as keyArrowUp } from './key-codes.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 { A as AffixIcon } from './affix.js';
+import { b as AffixIcon } from './affix.js';
 import { L as Localized } from './localized.js';
 import { S as Shape } from './enums.js';
 import { w as when } from './when.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
+/**
+ * Some states and properties are applicable to all host language elements regardless of whether a role is applied.
+ * The following global states and properties are supported by all roles and by all base markup elements.
+ * {@link https://www.w3.org/TR/wai-aria-1.1/#global_states}
+ *
+ * This is intended to be used as a mixin. Be sure you extend FASTElement.
+ *
+ * @public
+ */
+class ARIAGlobalStatesAndProperties {
+}
+__decorate([
+    attr({ attribute: "aria-atomic" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", void 0);
+__decorate([
+    attr({ attribute: "aria-busy" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", void 0);
+__decorate([
+    attr({ attribute: "aria-controls" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaControls", void 0);
+__decorate([
+    attr({ attribute: "aria-current" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", void 0);
+__decorate([
+    attr({ attribute: "aria-describedby" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", void 0);
+__decorate([
+    attr({ attribute: "aria-details" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", void 0);
+__decorate([
+    attr({ attribute: "aria-disabled" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", void 0);
+__decorate([
+    attr({ attribute: "aria-errormessage" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", void 0);
+__decorate([
+    attr({ attribute: "aria-flowto" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", void 0);
+__decorate([
+    attr({ attribute: "aria-haspopup" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", void 0);
+__decorate([
+    attr({ attribute: "aria-hidden" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", void 0);
+__decorate([
+    attr({ attribute: "aria-invalid" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", void 0);
+__decorate([
+    attr({ attribute: "aria-keyshortcuts" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", void 0);
+__decorate([
+    attr({ attribute: "aria-label" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", void 0);
+__decorate([
+    attr({ attribute: "aria-labelledby" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", void 0);
+__decorate([
+    attr({ attribute: "aria-live" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLive", void 0);
+__decorate([
+    attr({ attribute: "aria-owns" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", void 0);
+__decorate([
+    attr({ attribute: "aria-relevant" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", void 0);
+__decorate([
+    attr({ attribute: "aria-roledescription" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", void 0);
+
 class _TextField extends FoundationElement {
 }
 /**

package/shared/definition35.cjs

@@ -2,208 +2,11 @@
 
 const definition = require('./definition27.cjs');
 const vividElement = require('./vivid-element.cjs');
-const applyMixins = require('./apply-mixins.cjs');
+const option = require('./option.cjs');
 const affix = require('./affix.cjs');
-const ariaGlobal = require('./aria-global.cjs');
-const dom = require('./dom.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-function isListboxOption(el) {
-  return dom.isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement);
-}
-class ListboxOption extends vividElement.VividElement {
-  constructor(text, value, defaultSelected, selected) {
-    super();
-    this.defaultSelected = false;
-    /**
-     * Tracks whether the "selected" property has been changed.
-     * @internal
-     */
-    this.dirtySelected = false;
-    this.selected = this.defaultSelected;
-    /**
-     * Track whether the value has been changed from the initial value
-     */
-    this.dirtyValue = false;
-    this._highlighted = false;
-    this._displayCheckmark = false;
-    this._matchedRange = null;
-    if (text) {
-      this.text = text;
-    }
-    if (value) {
-      this.initialValue = value;
-    }
-    if (defaultSelected) {
-      this.defaultSelected = defaultSelected;
-    }
-    if (selected) {
-      this.selected = selected;
-    }
-    this.proxy = new Option(
-      this.text,
-      // @ts-expect-error Propery is used before it is assigned
-      this.initialValue,
-      this.defaultSelected,
-      this.selected
-    );
-    this.proxy.disabled = this.disabled;
-  }
-  /**
-   * Updates the ariaChecked property when the checked property changes.
-   *
-   * @param _ - the previous checked value
-   * @param next - the current checked value
-   *
-   * @public
-   */
-  checkedChanged(_, next) {
-    if (typeof next === "boolean") {
-      this.ariaChecked = next ? "true" : "false";
-      return;
-    }
-    this.ariaChecked = null;
-  }
-  defaultSelectedChanged() {
-    if (!this.dirtySelected) {
-      this.selected = this.defaultSelected;
-      if (this.proxy instanceof HTMLOptionElement) {
-        this.proxy.selected = this.defaultSelected;
-      }
-    }
-  }
-  disabledChanged() {
-    this.ariaDisabled = this.disabled ? "true" : "false";
-    if (this.proxy instanceof HTMLOptionElement) {
-      this.proxy.disabled = this.disabled;
-    }
-  }
-  selectedAttributeChanged() {
-    this.defaultSelected = this.selectedAttribute;
-    if (this.proxy instanceof HTMLOptionElement) {
-      this.proxy.defaultSelected = this.defaultSelected;
-    }
-  }
-  selectedChanged() {
-    this.ariaSelected = this.selected ? "true" : "false";
-    if (!this.dirtySelected) {
-      this.dirtySelected = true;
-    }
-    if (this.proxy instanceof HTMLOptionElement) {
-      this.proxy.selected = this.selected;
-    }
-  }
-  initialValueChanged() {
-    if (!this.dirtyValue) {
-      this.value = this.initialValue;
-      this.dirtyValue = false;
-    }
-  }
-  get label() {
-    return this._label ?? this.text;
-  }
-  set label(value) {
-    this._label = value;
-  }
-  set text(value) {
-    this._text = value;
-  }
-  get text() {
-    return this._text ?? "";
-  }
-  set value(next) {
-    const newValue = `${next ?? ""}`;
-    this._value = newValue;
-    this.dirtyValue = true;
-    if (this.proxy instanceof HTMLOptionElement) {
-      this.proxy.value = newValue;
-    }
-    vividElement.Observable.notify(this, "value");
-  }
-  get value() {
-    vividElement.Observable.track(this, "value");
-    return this._value ?? this.text;
-  }
-  get form() {
-    return null;
-  }
-  /**
-   * @internal
-   */
-  get _matchedRangeSafe() {
-    return this._matchedRange ?? { from: 0, to: 0 };
-  }
-}
-__decorateClass([
-  vividElement.observable
-], ListboxOption.prototype, "checked");
-__decorateClass([
-  vividElement.observable
-], ListboxOption.prototype, "defaultSelected");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  vividElement.attr({ mode: "boolean" })
-], ListboxOption.prototype, "disabled");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  vividElement.attr({ attribute: "selected", mode: "boolean" })
-], ListboxOption.prototype, "selectedAttribute");
-__decorateClass([
-  vividElement.observable
-], ListboxOption.prototype, "selected");
-__decorateClass([
-  vividElement.attr({ attribute: "value", mode: "fromView" })
-], ListboxOption.prototype, "initialValue");
-__decorateClass([
-  vividElement.attr({
-    attribute: "label"
-  })
-], ListboxOption.prototype, "_label");
-__decorateClass([
-  vividElement.attr({
-    attribute: "text"
-  })
-], ListboxOption.prototype, "_text");
-__decorateClass([
-  vividElement.observable
-], ListboxOption.prototype, "_highlighted");
-__decorateClass([
-  vividElement.observable
-], ListboxOption.prototype, "_displayCheckmark");
-__decorateClass([
-  vividElement.observable
-], ListboxOption.prototype, "_matchedRange");
-class DelegatesARIAListboxOption {
-}
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  vividElement.observable
-], DelegatesARIAListboxOption.prototype, "ariaChecked");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  vividElement.observable
-], DelegatesARIAListboxOption.prototype, "ariaPosInSet");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  vividElement.observable
-], DelegatesARIAListboxOption.prototype, "ariaSelected");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  vividElement.observable
-], DelegatesARIAListboxOption.prototype, "ariaSetSize");
-applyMixins.applyMixins(DelegatesARIAListboxOption, ariaGlobal.ARIAGlobalStatesAndProperties);
-applyMixins.applyMixins(ListboxOption, affix.AffixIconWithTrailing, DelegatesARIAListboxOption);
-
 const getClasses = (x) => classNames.classNames(
   "base",
   ["disabled", x.disabled],
@@ -253,7 +56,7 @@ const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-
 
 const listboxOptionDefinition = vividElement.defineVividComponent(
   "option",
-  ListboxOption,
+  option.ListboxOption,
   ListboxOptionTemplate,
   [definition.iconDefinition],
   {
@@ -262,7 +65,5 @@ const listboxOptionDefinition = vividElement.defineVividComponent(
 );
 const registerOption = vividElement.createRegisterFunction(listboxOptionDefinition);
 
-exports.ListboxOption = ListboxOption;
-exports.isListboxOption = isListboxOption;
 exports.listboxOptionDefinition = listboxOptionDefinition;
 exports.registerOption = registerOption;

package/shared/definition35.js

@@ -1,207 +1,10 @@
 import { I as Icon, i as iconDefinition } from './definition27.js';
-import { V as VividElement, O as Observable, o as observable, 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 { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
-import { i as isHTMLElement } from './dom.js';
+import { h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { L as ListboxOption } from './option.js';
+import { a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-function isListboxOption(el) {
-  return isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement);
-}
-class ListboxOption extends VividElement {
-  constructor(text, value, defaultSelected, selected) {
-    super();
-    this.defaultSelected = false;
-    /**
-     * Tracks whether the "selected" property has been changed.
-     * @internal
-     */
-    this.dirtySelected = false;
-    this.selected = this.defaultSelected;
-    /**
-     * Track whether the value has been changed from the initial value
-     */
-    this.dirtyValue = false;
-    this._highlighted = false;
-    this._displayCheckmark = false;
-    this._matchedRange = null;
-    if (text) {
-      this.text = text;
-    }
-    if (value) {
-      this.initialValue = value;
-    }
-    if (defaultSelected) {
-      this.defaultSelected = defaultSelected;
-    }
-    if (selected) {
-      this.selected = selected;
-    }
-    this.proxy = new Option(
-      this.text,
-      // @ts-expect-error Propery is used before it is assigned
-      this.initialValue,
-      this.defaultSelected,
-      this.selected
-    );
-    this.proxy.disabled = this.disabled;
-  }
-  /**
-   * Updates the ariaChecked property when the checked property changes.
-   *
-   * @param _ - the previous checked value
-   * @param next - the current checked value
-   *
-   * @public
-   */
-  checkedChanged(_, next) {
-    if (typeof next === "boolean") {
-      this.ariaChecked = next ? "true" : "false";
-      return;
-    }
-    this.ariaChecked = null;
-  }
-  defaultSelectedChanged() {
-    if (!this.dirtySelected) {
-      this.selected = this.defaultSelected;
-      if (this.proxy instanceof HTMLOptionElement) {
-        this.proxy.selected = this.defaultSelected;
-      }
-    }
-  }
-  disabledChanged() {
-    this.ariaDisabled = this.disabled ? "true" : "false";
-    if (this.proxy instanceof HTMLOptionElement) {
-      this.proxy.disabled = this.disabled;
-    }
-  }
-  selectedAttributeChanged() {
-    this.defaultSelected = this.selectedAttribute;
-    if (this.proxy instanceof HTMLOptionElement) {
-      this.proxy.defaultSelected = this.defaultSelected;
-    }
-  }
-  selectedChanged() {
-    this.ariaSelected = this.selected ? "true" : "false";
-    if (!this.dirtySelected) {
-      this.dirtySelected = true;
-    }
-    if (this.proxy instanceof HTMLOptionElement) {
-      this.proxy.selected = this.selected;
-    }
-  }
-  initialValueChanged() {
-    if (!this.dirtyValue) {
-      this.value = this.initialValue;
-      this.dirtyValue = false;
-    }
-  }
-  get label() {
-    return this._label ?? this.text;
-  }
-  set label(value) {
-    this._label = value;
-  }
-  set text(value) {
-    this._text = value;
-  }
-  get text() {
-    return this._text ?? "";
-  }
-  set value(next) {
-    const newValue = `${next ?? ""}`;
-    this._value = newValue;
-    this.dirtyValue = true;
-    if (this.proxy instanceof HTMLOptionElement) {
-      this.proxy.value = newValue;
-    }
-    Observable.notify(this, "value");
-  }
-  get value() {
-    Observable.track(this, "value");
-    return this._value ?? this.text;
-  }
-  get form() {
-    return null;
-  }
-  /**
-   * @internal
-   */
-  get _matchedRangeSafe() {
-    return this._matchedRange ?? { from: 0, to: 0 };
-  }
-}
-__decorateClass([
-  observable
-], ListboxOption.prototype, "checked");
-__decorateClass([
-  observable
-], ListboxOption.prototype, "defaultSelected");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  attr({ mode: "boolean" })
-], ListboxOption.prototype, "disabled");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  attr({ attribute: "selected", mode: "boolean" })
-], ListboxOption.prototype, "selectedAttribute");
-__decorateClass([
-  observable
-], ListboxOption.prototype, "selected");
-__decorateClass([
-  attr({ attribute: "value", mode: "fromView" })
-], ListboxOption.prototype, "initialValue");
-__decorateClass([
-  attr({
-    attribute: "label"
-  })
-], ListboxOption.prototype, "_label");
-__decorateClass([
-  attr({
-    attribute: "text"
-  })
-], ListboxOption.prototype, "_text");
-__decorateClass([
-  observable
-], ListboxOption.prototype, "_highlighted");
-__decorateClass([
-  observable
-], ListboxOption.prototype, "_displayCheckmark");
-__decorateClass([
-  observable
-], ListboxOption.prototype, "_matchedRange");
-class DelegatesARIAListboxOption {
-}
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  observable
-], DelegatesARIAListboxOption.prototype, "ariaChecked");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  observable
-], DelegatesARIAListboxOption.prototype, "ariaPosInSet");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  observable
-], DelegatesARIAListboxOption.prototype, "ariaSelected");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  observable
-], DelegatesARIAListboxOption.prototype, "ariaSetSize");
-applyMixins(DelegatesARIAListboxOption, ARIAGlobalStatesAndProperties);
-applyMixins(ListboxOption, AffixIconWithTrailing, DelegatesARIAListboxOption);
-
 const getClasses = (x) => classNames(
   "base",
   ["disabled", x.disabled],
@@ -260,4 +63,4 @@ const listboxOptionDefinition = defineVividComponent(
 );
 const registerOption = createRegisterFunction(listboxOptionDefinition);
 
-export { ListboxOption as L, isListboxOption as i, listboxOptionDefinition as l, registerOption as r };
+export { listboxOptionDefinition as l, registerOption as r };

package/shared/definition4.js

@@ -3,7 +3,7 @@ import { E as Elevation, e as elevationDefinition } from './definition62.js';
 import { V as VividElement, a as attr, n as nullableNumberConverter, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { i as iconDefinition } from './definition27.js';
 import { C as Connotation } from './enums.js';
-import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { L as Localized } from './localized.js';

package/shared/definition42.cjs

@@ -10,9 +10,9 @@ const formAssociated = require('./form-associated.cjs');
 const affix = require('./affix.cjs');
 const localized = require('./localized.cjs');
 const formElements = require('./form-elements.cjs');
-const listbox = require('./listbox2.cjs');
+const listbox = require('./listbox.cjs');
 const applyMixins = require('./apply-mixins.cjs');
-const keyCodes = require('./key-codes2.cjs');
+const foundationElement = require('./foundation-element.cjs');
 const when = require('./when.cjs');
 const ref = require('./ref.cjs');
 const slotted = require('./slotted.cjs');
@@ -831,7 +831,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class OptionTag extends keyCodes.FoundationElement {
+class OptionTag extends foundationElement.FoundationElement {
   constructor() {
     super(...arguments);
     this.removable = false;

package/shared/definition42.js

@@ -5,12 +5,12 @@ import { V as VividElement, O as Observable, D as DOM, a as attr, n as nullableN
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { s as scrollIntoView } from './scrollIntoView.js';
 import { F as FormAssociated } from './form-associated.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 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 { L as Listbox } from './listbox.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { F as FoundationElement } from './key-codes2.js';
+import { F as FoundationElement } from './foundation-element.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

@@ -1,10 +1,9 @@
 'use strict';
 
 const definition = require('./definition63.cjs');
-const definition$3 = require('./definition27.cjs');
-const definition$1 = require('./definition35.cjs');
+const definition$2 = require('./definition27.cjs');
+const definition$3 = require('./definition35.cjs');
 const vividElement = require('./vivid-element.cjs');
-const listbox$1 = require('./listbox2.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');
@@ -666,7 +666,7 @@ let Select = class extends FormAssociatedSelect {
   }
   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
@@ -807,7 +807,7 @@ function renderLabel() {
 	</label>`;
 }
 function renderPlaceholder(context) {
-  const optionTag = context.tagFor(definition$1.ListboxOption);
+  const optionTag = context.tagFor(option.ListboxOption);
   return vividElement.html`
 		<${optionTag} ${ref.ref("placeholderOption")}
 			text="${(x) => x.placeholder}" hidden disabled>
@@ -815,7 +815,7 @@ function renderPlaceholder(context) {
 }
 function selectValue(context) {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  const chevronTemplate = definition$2.chevronTemplateFactory(context);
+  const chevronTemplate = definition$1.chevronTemplateFactory(context);
   return vividElement.html` <div
 		class="control ${getStateClasses}"
 		${ref.ref("_anchor")}
@@ -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"
   })}>
@@ -910,7 +910,7 @@ const selectDefinition = vividElement.defineVividComponent(
   "select",
   Select,
   SelectTemplate,
-  [definition.popupDefinition, definition$3.iconDefinition, definition$1.listboxOptionDefinition],
+  [definition.popupDefinition, definition$2.iconDefinition, definition$3.listboxOptionDefinition],
   {
     styles
   }

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 { 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 Listbox$1 } from './listbox2.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"
   })}>