@vonage/vivid 4.13.0 → 4.14.0

package/shared/definition35.js

@@ -1,657 +1,264 @@
-import { F as FoundationElement, _ as __decorate, a as attr, n as nullableNumberConverter, o as observable, D as DOM, h as html, r as registerFactory } from './index.js';
-import { c as Button, a as buttonRegistries } from './definition11.js';
-import { D as Divider, a as dividerRegistries } from './definition22.js';
-import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
-import { F as FormAssociated } from './form-associated.js';
+import { I as Icon, i as iconDefinition } from './definition27.js';
+import { O as Observable, o as observable, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.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 { S as StartEnd } from './start-end.js';
-import { c as keyArrowDown, d 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 { L as Localized } from './localized.js';
-import { S as Shape } from './enums.js';
+import { V as VividElement } from './vivid-element.js';
+import { i as isHTMLElement } from './dom.js';
 import { w as when } from './when.js';
-import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-class _TextField extends FoundationElement {
-}
-/**
- * A form-associated base class for the {@link @microsoft/fast-foundation#(TextField:class)} component.
- *
- * @internal
- */
-class FormAssociatedTextField extends FormAssociated(_TextField) {
-    constructor() {
-        super(...arguments);
-        this.proxy = document.createElement("input");
-    }
-}
-
-/**
- * Text field sub-types
- * @public
- */
-const TextFieldType = {
-    /**
-     * An email TextField
-     */
-    email: "email",
-    /**
-     * A password TextField
-     */
-    password: "password",
-    /**
-     * A telephone TextField
-     */
-    tel: "tel",
-    /**
-     * A text TextField
-     */
-    text: "text",
-    /**
-     * A URL TextField
-     */
-    url: "url",
-};
-
-/**
- * A Text Field Custom HTML Element.
- * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text | <input type="text" /> element }.
- *
- * @slot start - Content which can be provided before the number field input
- * @slot end - Content which can be provided after the number field input
- * @slot - The default slot for the label
- * @csspart label - The label
- * @csspart root - The element wrapping the control, including start and end slots
- * @csspart control - The text field element
- * @fires change - Fires a custom 'change' event when the value has changed
- *
- * @public
- */
-class TextField extends FormAssociatedTextField {
-    constructor() {
-        super(...arguments);
-        /**
-         * Allows setting a type or mode of text.
-         * @public
-         * @remarks
-         * HTML Attribute: type
-         */
-        this.type = TextFieldType.text;
-    }
-    readOnlyChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.readOnly = this.readOnly;
-            this.validate();
-        }
-    }
-    autofocusChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.autofocus = this.autofocus;
-            this.validate();
-        }
-    }
-    placeholderChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.placeholder = this.placeholder;
-        }
-    }
-    typeChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.type = this.type;
-            this.validate();
-        }
-    }
-    listChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.setAttribute("list", this.list);
-            this.validate();
-        }
-    }
-    maxlengthChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.maxLength = this.maxlength;
-            this.validate();
-        }
-    }
-    minlengthChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.minLength = this.minlength;
-            this.validate();
-        }
-    }
-    patternChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.pattern = this.pattern;
-            this.validate();
-        }
-    }
-    sizeChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.size = this.size;
-        }
-    }
-    spellcheckChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.spellcheck = this.spellcheck;
-        }
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        this.proxy.setAttribute("type", this.type);
-        this.validate();
-        if (this.autofocus) {
-            DOM.queueUpdate(() => {
-                this.focus();
-            });
-        }
-    }
-    /**
-     * Selects all the text in the text field
-     *
-     * @public
-     */
-    select() {
-        this.control.select();
-        /**
-         * The select event does not permeate the shadow DOM boundary.
-         * This fn effectively proxies the select event,
-         * emitting a `select` event whenever the internal
-         * control emits a `select` event
-         */
-        this.$emit("select");
-    }
-    /**
-     * Handles the internal control's `input` event
-     * @internal
-     */
-    handleTextInput() {
-        this.value = this.control.value;
-    }
-    /**
-     * Change event handler for inner control.
-     * @remarks
-     * "Change" events are not `composable` so they will not
-     * permeate the shadow DOM boundary. This fn effectively proxies
-     * the change event, emitting a `change` event whenever the internal
-     * control emits a `change` event
-     * @internal
-     */
-    handleChange() {
-        this.$emit("change");
-    }
-    /** {@inheritDoc (FormAssociated:interface).validate} */
-    validate() {
-        super.validate(this.control);
-    }
-}
-__decorate([
-    attr({ attribute: "readonly", mode: "boolean" })
-], TextField.prototype, "readOnly", void 0);
-__decorate([
-    attr({ mode: "boolean" })
-], TextField.prototype, "autofocus", void 0);
-__decorate([
-    attr
-], TextField.prototype, "placeholder", void 0);
-__decorate([
-    attr
-], TextField.prototype, "type", void 0);
-__decorate([
-    attr
-], TextField.prototype, "list", void 0);
-__decorate([
-    attr({ converter: nullableNumberConverter })
-], TextField.prototype, "maxlength", void 0);
-__decorate([
-    attr({ converter: nullableNumberConverter })
-], TextField.prototype, "minlength", void 0);
-__decorate([
-    attr
-], TextField.prototype, "pattern", void 0);
-__decorate([
-    attr({ converter: nullableNumberConverter })
-], TextField.prototype, "size", void 0);
-__decorate([
-    attr({ mode: "boolean" })
-], TextField.prototype, "spellcheck", void 0);
-__decorate([
-    observable
-], TextField.prototype, "defaultSlottedNodes", void 0);
-/**
- * Includes ARIA states and properties relating to the ARIA textbox role
- *
- * @public
- */
-class DelegatesARIATextbox {
-}
-applyMixins(DelegatesARIATextbox, ARIAGlobalStatesAndProperties);
-applyMixins(TextField, StartEnd, DelegatesARIATextbox);
-
-const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:3/4}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.wrapper:focus-within:after{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}";
-
-class _NumberField extends FoundationElement {
-}
-class FormAssociatedNumberField extends FormAssociated(_NumberField) {
-  constructor() {
-    super(...arguments);
-    this.proxy = document.createElement("input");
-  }
-}
-
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
   return result;
 };
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _NumberField_instances, valueToPresentationValue_fn, inputToPresentationValue_fn, presentationValueToValue_fn;
-const STEP_DIRECTION = {
-  up: 1,
-  down: -1
-};
-function makeStep(element, direction) {
-  const value = parseFloat(element.value);
-  const stepUpValue = !isNaN(value) ? value + direction * element.step : element.min > 0 ? element.min : element.max < 0 ? element.max : !element.min ? direction * element.step : 0;
-  element.value = Number(stepUpValue.toFixed(12)).toString();
+function isListboxOption(el) {
+  return isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement);
 }
-const buildNumberPatterns = (decimalSeparator) => {
-  const ds = decimalSeparator.source;
-  return {
-    invalidCharacters: new RegExp(`[^0-9\\-+e${ds}]`, "g"),
-    additionalDecimalSeparators: new RegExp(`(?<=${ds}.*)${ds}`, "g"),
-    trailingDecimalSeparator: new RegExp(`${ds}$`),
-    decimalSeparator
-  };
-};
-const numberPatternsWithPeriod = buildNumberPatterns(/\./);
-const numberPatternsWithComma = buildNumberPatterns(/,/);
-const validNumber = /^-?((\d*\.\d+)|(\d+))$/;
-let NumberField = class extends FormAssociatedNumberField {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _NumberField_instances);
-    this.readOnly = false;
-    this.autofocus = false;
-    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
-    this.step = 1;
+class ListboxOption extends VividElement {
+  constructor(text, value, defaultSelected, selected) {
+    super();
+    this.defaultSelected = false;
     /**
-     * Flag to indicate that the value change is from the user input
+     * Tracks whether the "selected" property has been changed.
      * @internal
      */
-    this.isUserInput = false;
-    this._presentationValue = "";
-    this.incrementButtonAriaLabel = null;
-    this.decrementButtonAriaLabel = null;
-  }
-  stepChanged(_, next) {
-    this.proxy.setAttribute(
-      "step",
-      Number.isFinite(next) ? next.toString() : ""
+    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;
   }
   /**
-   * Ensures that the max is greater than the min and that the value
-   *  is less than the max
+   * Updates the ariaChecked property when the checked property changes.
    *
-   * @internal
-   */
-  maxChanged(_, next) {
-    this.max = Math.max(next, this.min ?? next);
-    this.proxy.max = this.max.toString();
-    this.validate();
-  }
-  /**
-   * Ensures that the min is less than the max and that the value
-   *  is greater than the min
-   *
-   * @internal
-   */
-  minChanged(_, next) {
-    this.min = Math.min(next, this.max ?? next);
-    this.proxy.min = this.min.toString();
-    this.validate();
-  }
-  /**
-   * The value property, typed as a number.
+   * @param _ - the previous checked value
+   * @param next - the current checked value
    *
    * @public
    */
-  get valueAsNumber() {
-    return parseFloat(super.value);
-  }
-  set valueAsNumber(next) {
-    this.value = next.toString();
-  }
-  /**
-   * @internal
-   */
-  valueChanged(previous, next) {
-    this.value = validNumber.test(next) ? next : "";
-    if (next !== this.value) {
+  checkedChanged(_, next) {
+    if (typeof next === "boolean") {
+      this.ariaChecked = next ? "true" : "false";
       return;
     }
-    if (this.control && !this.isUserInput) {
-      this._presentationValue = __privateMethod(this, _NumberField_instances, valueToPresentationValue_fn).call(this, this.value);
+    this.ariaChecked = null;
+  }
+  defaultSelectedChanged() {
+    if (!this.dirtySelected) {
+      this.selected = this.defaultSelected;
+      if (this.proxy instanceof HTMLOptionElement) {
+        this.proxy.selected = this.defaultSelected;
+      }
     }
-    super.valueChanged(previous, this.value);
-    if (previous !== void 0 && !this.isUserInput) {
-      this.$emit("input");
-      this.$emit("change");
+  }
+  disabledChanged() {
+    this.ariaDisabled = this.disabled ? "true" : "false";
+    if (this.proxy instanceof HTMLOptionElement) {
+      this.proxy.disabled = this.disabled;
     }
   }
-  /**
-   * @internal
-   */
-  get _numberPatterns() {
-    return this.locale.common.useCommaAsDecimalSeparator ? numberPatternsWithComma : numberPatternsWithPeriod;
+  selectedAttributeChanged() {
+    this.defaultSelected = this.selectedAttribute;
+    if (this.proxy instanceof HTMLOptionElement) {
+      this.proxy.defaultSelected = this.defaultSelected;
+    }
   }
-  /** {@inheritDoc (FormAssociated:interface).validate} */
-  validate() {
-    super.validate(this.control);
+  selectedChanged() {
+    this.ariaSelected = this.selected ? "true" : "false";
+    if (!this.dirtySelected) {
+      this.dirtySelected = true;
+    }
+    if (this.proxy instanceof HTMLOptionElement) {
+      this.proxy.selected = this.selected;
+    }
   }
-  /**
-   * Increments the value using the step value
-   *
-   * @public
-   */
-  stepUp() {
-    makeStep(this, STEP_DIRECTION.up);
+  initialValueChanged() {
+    if (!this.dirtyValue) {
+      this.value = this.initialValue;
+      this.dirtyValue = false;
+    }
   }
-  /**
-   * Decrements the value using the step value
-   *
-   * @public
-   */
-  stepDown() {
-    makeStep(this, STEP_DIRECTION.down);
+  get label() {
+    return this._label ?? this.text;
   }
-  /**
-   * Sets up the initial state of the number field
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this.proxy.setAttribute("type", "number");
-    this.validate();
-    this._presentationValue = __privateMethod(this, _NumberField_instances, valueToPresentationValue_fn).call(this, this.value);
-    if (this.autofocus) {
-      DOM.queueUpdate(() => {
-        this.focus();
-      });
-    }
+  set label(value) {
+    this._label = value;
   }
-  /**
-   * Selects all the text in the number field
-   *
-   * @public
-   */
-  select() {
-    this.control.select();
-    this.$emit("select");
+  set text(value) {
+    this._text = value;
   }
-  /**
-   * Handles the internal control's `input` event
-   * @internal
-   */
-  handleTextInput() {
-    this._presentationValue = __privateMethod(this, _NumberField_instances, inputToPresentationValue_fn).call(this, this.control.value);
-    if (this.control.value !== this._presentationValue) {
-      this.control.value = this._presentationValue;
+  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;
     }
-    this.isUserInput = true;
-    this.value = __privateMethod(this, _NumberField_instances, presentationValueToValue_fn).call(this, this._presentationValue);
-    this.isUserInput = false;
+    Observable.notify(this, "value");
   }
-  /**
-   * Change event handler for inner control.
-   * @remarks
-   * "Change" events are not `composable` so they will not
-   * permeate the shadow DOM boundary. This fn effectively proxies
-   * the change event, emitting a `change` event whenever the internal
-   * control emits a `change` event
-   * @internal
-   */
-  handleChange() {
-    this.$emit("change");
+  get value() {
+    Observable.track(this, "value");
+    return this._value ?? this.text;
+  }
+  get form() {
+    return null;
   }
   /**
-   * Handles the internal control's `keydown` event
    * @internal
    */
-  handleKeyDown(e) {
-    const key = e.key;
-    switch (key) {
-      case keyArrowUp:
-        this.stepUp();
-        return false;
-      case keyArrowDown:
-        this.stepDown();
-        return false;
-    }
-    return true;
+  get _matchedRangeSafe() {
+    return this._matchedRange ?? { from: 0, to: 0 };
   }
-};
-_NumberField_instances = new WeakSet();
-valueToPresentationValue_fn = function(value) {
-  return value.replace(
-    ".",
-    this.locale.common.useCommaAsDecimalSeparator ? "," : "."
-  );
-};
-inputToPresentationValue_fn = function(input) {
-  return input.replace(this._numberPatterns.invalidCharacters, "").replace(this._numberPatterns.additionalDecimalSeparators, "");
-};
-presentationValueToValue_fn = function(presentationValue) {
-  const candidate = presentationValue.replace(this._numberPatterns.trailingDecimalSeparator, "").replace(this._numberPatterns.decimalSeparator, ".");
-  return validNumber.test(candidate) ? candidate : "";
-};
-__decorateClass([
-  attr({ attribute: "readonly", mode: "boolean" })
-], NumberField.prototype, "readOnly", 2);
-__decorateClass([
-  attr({ mode: "boolean" })
-], NumberField.prototype, "autofocus", 2);
-__decorateClass([
-  attr
-], NumberField.prototype, "placeholder", 2);
+}
 __decorateClass([
-  attr
-], NumberField.prototype, "list", 2);
+  observable
+], ListboxOption.prototype, "checked");
 __decorateClass([
-  attr({ converter: nullableNumberConverter })
-], NumberField.prototype, "maxlength", 2);
+  observable
+], ListboxOption.prototype, "defaultSelected");
+// @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  attr({ converter: nullableNumberConverter })
-], NumberField.prototype, "minlength", 2);
+  attr({ mode: "boolean" })
+], ListboxOption.prototype, "disabled");
+// @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  attr({ converter: nullableNumberConverter })
-], NumberField.prototype, "size", 2);
+  attr({ attribute: "selected", mode: "boolean" })
+], ListboxOption.prototype, "selectedAttribute");
 __decorateClass([
-  attr()
-], NumberField.prototype, "scale", 2);
+  observable
+], ListboxOption.prototype, "selected");
 __decorateClass([
-  attr({ converter: nullableNumberConverter })
-], NumberField.prototype, "step", 2);
+  attr({ attribute: "value", mode: "fromView" })
+], ListboxOption.prototype, "initialValue");
 __decorateClass([
-  attr({ converter: nullableNumberConverter })
-], NumberField.prototype, "max", 2);
+  attr({
+    attribute: "label"
+  })
+], ListboxOption.prototype, "_label");
 __decorateClass([
-  attr({ converter: nullableNumberConverter })
-], NumberField.prototype, "min", 2);
+  attr({
+    attribute: "text"
+  })
+], ListboxOption.prototype, "_text");
 __decorateClass([
   observable
-], NumberField.prototype, "defaultSlottedNodes", 2);
+], ListboxOption.prototype, "_highlighted");
 __decorateClass([
   observable
-], NumberField.prototype, "_presentationValue", 2);
+], ListboxOption.prototype, "_displayCheckmark");
 __decorateClass([
-  attr({ attribute: "increment-button-aria-label" })
-], NumberField.prototype, "incrementButtonAriaLabel", 2);
+  observable
+], ListboxOption.prototype, "_matchedRange");
+class DelegatesARIAListboxOption {
+}
+// @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  attr({ attribute: "decrement-button-aria-label" })
-], NumberField.prototype, "decrementButtonAriaLabel", 2);
+  observable
+], DelegatesARIAListboxOption.prototype, "ariaChecked");
+// @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  attr
-], NumberField.prototype, "appearance", 2);
+  observable
+], DelegatesARIAListboxOption.prototype, "ariaPosInSet");
+// @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  attr
-], NumberField.prototype, "shape", 2);
+  observable
+], DelegatesARIAListboxOption.prototype, "ariaSelected");
+// @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  attr
-], NumberField.prototype, "autoComplete", 2);
-NumberField = __decorateClass([
-  errorText,
-  formElements
-], NumberField);
-applyMixinsWithObservables(
-  NumberField,
-  Localized,
-  AffixIcon,
-  FormElementCharCount,
-  FormElementHelperText,
-  FormElementSuccessText,
-  DelegatesARIATextbox
-);
+  observable
+], DelegatesARIAListboxOption.prototype, "ariaSetSize");
+applyMixins(DelegatesARIAListboxOption, ARIAGlobalStatesAndProperties);
+applyMixins(ListboxOption, AffixIconWithTrailing, DelegatesARIAListboxOption);
 
-const getStateClasses = ({
-  errorValidationMessage,
-  disabled,
-  value,
-  readOnly,
-  placeholder,
-  appearance,
-  shape,
-  label,
-  successText,
-  scale
-}) => classNames(
-  ["error", Boolean(errorValidationMessage)],
-  ["disabled", disabled],
-  ["has-value", Boolean(value)],
-  ["readonly", readOnly],
-  ["placeholder", Boolean(placeholder)],
-  [`appearance-${appearance}`, Boolean(appearance)],
-  [`shape-${shape}`, Boolean(shape)],
-  ["no-label", !label],
-  ["success", !!successText],
-  [`size-${scale}`, Boolean(scale)]
+const getClasses = (x) => classNames(
+  "base",
+  ["disabled", x.disabled],
+  ["selected", Boolean(x.selected)],
+  ["hover", Boolean(x._highlighted)],
+  ["active", Boolean(x.checked)],
+  ["icon", Boolean(x.icon)]
 );
-function renderLabel() {
-  return html` <label for="control" class="label">
-		${(x) => x.label}
-	</label>`;
-}
-function setControlButtonShape(numberField) {
-  return numberField.shape === Shape.Pill ? Shape.Pill : null;
-}
-function getTabIndex(numberField) {
-  return numberField.disabled || numberField.readOnly ? "-1" : null;
-}
-function numberControlButtons(context) {
-  const buttonTag = context.tagFor(Button);
-  const dividerTag = context.tagFor(Divider);
-  return html`
-			<div class="control-buttons"
-			     ?inert="${(x) => x.disabled || x.readOnly}">
-				<${buttonTag} id="subtract" icon="minus-line"
-								?disabled="${(x) => x.disabled || x.readOnly}"
-								aria-label=${(x) => x.decrementButtonAriaLabel || x.locale.numberField.decrementButtonLabel}
-					            shape="${setControlButtonShape}"
-								type="button"
-					            size="${(x) => x.scale === "condensed" ? "super-condensed" : "condensed"}"
-								tabindex="${getTabIndex}"
-					            @click="${(x) => x.stepDown()}"></${buttonTag}>
-				<${dividerTag} class="divider" orientation="vertical"></${dividerTag}>
-				<${buttonTag} id="add" icon="plus-line"
-								?disabled="${(x) => x.disabled || x.readOnly}"
-								aria-label=${(x) => x.incrementButtonAriaLabel || x.locale.numberField.incrementButtonLabel}
-					            shape="${setControlButtonShape}"
-								type="button"
-					            size="${(x) => x.scale === "condensed" ? "super-condensed" : "condensed"}"
-								tabindex="${getTabIndex}"
-					            @click="${(x) => x.stepUp()}"></${buttonTag}>
-		    </div>
-	`;
-}
-const NumberFieldTemplate = (context) => {
+const ListboxOptionTemplate = (context) => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const iconTag = context.tagFor(Icon);
   return html`
-		<div class="base ${getStateClasses}">
-			${when((x) => x.label, renderLabel())}
-			<div class="fieldset">
-				<div class="wrapper">
-					<input
-						class="control"
-						id="control"
-						@input="${(x) => x.handleTextInput()}"
-						@change="${(x) => x.handleChange()}"
-						@keydown="${(x, c) => x.handleKeyDown(c.event)}"
-						?autofocus="${(x) => x.autofocus}"
-						?disabled="${(x) => x.disabled}"
-						list="${(x) => x.list}"
-						maxlength="${(x) => x.maxlength}"
-						minlength="${(x) => x.minlength}"
-						placeholder="${(x) => x.placeholder}"
-						?readonly="${(x) => x.readOnly}"
-						?required="${(x) => x.required}"
-						size="${(x) => x.size}"
-						autocomplete="${(x) => x.autoComplete}"
-						name="${(x) => x.name}"
-						?spellcheck="${(x) => x.spellcheck}"
-						:value="${(x) => x._presentationValue}"
-						type="text"
-						aria-atomic="${(x) => x.ariaAtomic}"
-						aria-busy="${(x) => x.ariaBusy}"
-						aria-current="${(x) => x.ariaCurrent}"
-						aria-details="${(x) => x.ariaDetails}"
-						aria-disabled="${(x) => x.ariaDisabled}"
-						aria-errormessage="${(x) => x.ariaErrormessage}"
-						aria-haspopup="${(x) => x.ariaHaspopup}"
-						aria-hidden="${(x) => x.ariaHidden}"
-						aria-invalid="${(x) => x.ariaInvalid}"
-						aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
-						aria-label="${(x) => x.ariaLabel}"
-						aria-live="${(x) => x.ariaLive}"
-						aria-relevant="${(x) => x.ariaRelevant}"
-						aria-roledescription="${(x) => x.ariaRoledescription}"
-						${ref("control")}
-					/>
-				</div>
-				${() => numberControlButtons(context)}
+		<template
+			aria-checked="${(x) => x.ariaChecked}"
+			aria-disabled="${(x) => x.ariaDisabled}"
+			aria-posinset="${(x) => x.ariaPosInSet}"
+			aria-selected="${(x) => x.ariaSelected}"
+			aria-setsize="${(x) => x.ariaSetSize}"
+			role="option"
+		>
+			<div class="${getClasses}">
+				${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
+				${when(
+    (x) => x.text,
+    html`<div class="text">
+						${when(
+      (x) => x._matchedRange,
+      html`${(x) => x.text.slice(0, x._matchedRangeSafe.from)}<span class="match"
+									>${(x) => x.text.slice(
+        x._matchedRangeSafe.from,
+        x._matchedRangeSafe.to
+      )}</span
+								>`
+    )}${(x) => x.text.slice(x._matchedRangeSafe.to)}
+					</div>`
+  )}
+				${when(
+    (x) => x._displayCheckmark && x.selected,
+    html`<${iconTag} class="checkmark" name="check-line"></${iconTag}>`
+  )}
 			</div>
-			${getFeedbackTemplate(context)}
-		</div>
+		</template>
 	`;
 };
 
-const numberFieldDefinition = NumberField.compose({
-  baseName: "number-field",
-  template: NumberFieldTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
+const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.text{font:var(--vvd-typography-base)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{margin-left:auto;font-size:var(--_option-icon-size)}";
+
+const listboxOptionDefinition = defineVividComponent(
+  "option",
+  ListboxOption,
+  ListboxOptionTemplate,
+  [iconDefinition],
+  {
+    styles
   }
-});
-const numberFieldRegistries = [
-  numberFieldDefinition(),
-  ...buttonRegistries,
-  ...dividerRegistries
-];
-const registerNumberField = registerFactory(numberFieldRegistries);
+);
+const registerOption = createRegisterFunction(listboxOptionDefinition);
 
-export { numberFieldRegistries as a, numberFieldDefinition as n, registerNumberField as r };
+export { ListboxOption as L, isListboxOption as i, listboxOptionDefinition as l, registerOption as r };