@vonage/vivid 4.27.0 → 4.29.0

package/shared/option.cjs

@@ -29,11 +29,8 @@ class ListboxOption extends hostSemantics.HostSemantics(
      * @internal
      */
     this.dirtySelected = false;
-    this.selected = this.defaultSelected;
-    /**
-     * Track whether the value has been changed from the initial value
-     */
-    this.dirtyValue = false;
+    // eslint-disable-next-line @repo/repo/no-attribute-default-value
+    this.value = "";
     this._highlighted = false;
     this._displayCheckmark = false;
     this._vvdSearchText = "";
@@ -42,7 +39,7 @@ class ListboxOption extends hostSemantics.HostSemantics(
       this.text = text;
     }
     if (value) {
-      this.initialValue = value;
+      this.value = value;
     }
     if (defaultSelected) {
       this.defaultSelected = defaultSelected;
@@ -52,8 +49,7 @@ class ListboxOption extends hostSemantics.HostSemantics(
     }
     this.proxy = new Option(
       this.text,
-      // @ts-expect-error Propery is used before it is assigned
-      this.initialValue,
+      this.value,
       this.defaultSelected,
       this.selected
     );
@@ -66,17 +62,23 @@ class ListboxOption extends hostSemantics.HostSemantics(
         this.proxy.selected = this.defaultSelected;
       }
     }
+    if (this.proxy instanceof HTMLOptionElement) {
+      this.proxy.defaultSelected = this.defaultSelected;
+    }
   }
   disabledChanged() {
     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;
-    }
+  /**
+   * @deprecated Use `defaultSelected` instead.
+   */
+  get selectedAttribute() {
+    return this.defaultSelected;
+  }
+  set selectedAttribute(value) {
+    this.defaultSelected = value;
   }
   selectedChanged() {
     if (!this.dirtySelected) {
@@ -86,10 +88,13 @@ class ListboxOption extends hostSemantics.HostSemantics(
       this.proxy.selected = this.selected;
     }
   }
-  initialValueChanged() {
-    if (!this.dirtyValue) {
-      this.value = this.initialValue;
-      this.dirtyValue = false;
+  valueChanged() {
+    if (typeof this.value !== "string") {
+      this.value = "";
+      return;
+    }
+    if (this.proxy instanceof HTMLOptionElement) {
+      this.proxy.value = this.value;
     }
   }
   get label() {
@@ -104,19 +109,6 @@ class ListboxOption extends hostSemantics.HostSemantics(
   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;
   }
@@ -134,27 +126,33 @@ class ListboxOption extends hostSemantics.HostSemantics(
     }
     return { from: 0, to: 0 };
   }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.dirtySelected) {
+      this.selected = this.defaultSelected;
+      this.dirtySelected = false;
+    }
+  }
 }
 __decorateClass([
   vividElement.observable
 ], ListboxOption.prototype, "checked", 2);
 __decorateClass([
-  vividElement.observable
+  vividElement.attr({ attribute: "selected", mode: "boolean" })
 ], ListboxOption.prototype, "defaultSelected", 2);
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
   vividElement.attr({ mode: "boolean" })
 ], ListboxOption.prototype, "disabled", 2);
-// @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  vividElement.attr({ attribute: "selected", mode: "boolean" })
-], ListboxOption.prototype, "selectedAttribute", 2);
-__decorateClass([
-  vividElement.observable
+  vividElement.attr({ attribute: "current-selected", mode: "boolean" })
 ], ListboxOption.prototype, "selected", 2);
 __decorateClass([
-  vividElement.attr({ attribute: "value", mode: "fromView" })
-], ListboxOption.prototype, "initialValue", 2);
+  vividElement.attr({ attribute: "value" })
+], ListboxOption.prototype, "value", 2);
 __decorateClass([
   vividElement.attr({
     attribute: "label"

package/shared/option.js

@@ -1,5 +1,5 @@
 import { A as AffixIconWithTrailing } from './affix.js';
-import { O as Observable, V as VividElement, o as observable, a as attr, v as volatile } from './vivid-element.js';
+import { V as VividElement, o as observable, a as attr, v as volatile } from './vivid-element.js';
 import { H as HostSemantics } from './host-semantics.js';
 import { i as isHTMLElement } from './dom.js';
 
@@ -27,11 +27,8 @@ class ListboxOption extends HostSemantics(
      * @internal
      */
     this.dirtySelected = false;
-    this.selected = this.defaultSelected;
-    /**
-     * Track whether the value has been changed from the initial value
-     */
-    this.dirtyValue = false;
+    // eslint-disable-next-line @repo/repo/no-attribute-default-value
+    this.value = "";
     this._highlighted = false;
     this._displayCheckmark = false;
     this._vvdSearchText = "";
@@ -40,7 +37,7 @@ class ListboxOption extends HostSemantics(
       this.text = text;
     }
     if (value) {
-      this.initialValue = value;
+      this.value = value;
     }
     if (defaultSelected) {
       this.defaultSelected = defaultSelected;
@@ -50,8 +47,7 @@ class ListboxOption extends HostSemantics(
     }
     this.proxy = new Option(
       this.text,
-      // @ts-expect-error Propery is used before it is assigned
-      this.initialValue,
+      this.value,
       this.defaultSelected,
       this.selected
     );
@@ -64,17 +60,23 @@ class ListboxOption extends HostSemantics(
         this.proxy.selected = this.defaultSelected;
       }
     }
+    if (this.proxy instanceof HTMLOptionElement) {
+      this.proxy.defaultSelected = this.defaultSelected;
+    }
   }
   disabledChanged() {
     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;
-    }
+  /**
+   * @deprecated Use `defaultSelected` instead.
+   */
+  get selectedAttribute() {
+    return this.defaultSelected;
+  }
+  set selectedAttribute(value) {
+    this.defaultSelected = value;
   }
   selectedChanged() {
     if (!this.dirtySelected) {
@@ -84,10 +86,13 @@ class ListboxOption extends HostSemantics(
       this.proxy.selected = this.selected;
     }
   }
-  initialValueChanged() {
-    if (!this.dirtyValue) {
-      this.value = this.initialValue;
-      this.dirtyValue = false;
+  valueChanged() {
+    if (typeof this.value !== "string") {
+      this.value = "";
+      return;
+    }
+    if (this.proxy instanceof HTMLOptionElement) {
+      this.proxy.value = this.value;
     }
   }
   get label() {
@@ -102,19 +107,6 @@ class ListboxOption extends HostSemantics(
   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;
   }
@@ -132,27 +124,33 @@ class ListboxOption extends HostSemantics(
     }
     return { from: 0, to: 0 };
   }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.dirtySelected) {
+      this.selected = this.defaultSelected;
+      this.dirtySelected = false;
+    }
+  }
 }
 __decorateClass([
   observable
 ], ListboxOption.prototype, "checked", 2);
 __decorateClass([
-  observable
+  attr({ attribute: "selected", mode: "boolean" })
 ], ListboxOption.prototype, "defaultSelected", 2);
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
   attr({ mode: "boolean" })
 ], ListboxOption.prototype, "disabled", 2);
-// @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  attr({ attribute: "selected", mode: "boolean" })
-], ListboxOption.prototype, "selectedAttribute", 2);
-__decorateClass([
-  observable
+  attr({ attribute: "current-selected", mode: "boolean" })
 ], ListboxOption.prototype, "selected", 2);
 __decorateClass([
-  attr({ attribute: "value", mode: "fromView" })
-], ListboxOption.prototype, "initialValue", 2);
+  attr({ attribute: "value" })
+], ListboxOption.prototype, "value", 2);
 __decorateClass([
   attr({
     attribute: "label"

package/shared/picker-field/mixins/inline-time-picker/inline-time-picker.d.ts

@@ -345,6 +345,7 @@ export declare class InlineTimePicker extends InlineTimePicker_base {
     clock: '12h' | '24h';
     min?: string;
     max?: string;
+    focusedPickerClass: string;
     scrollSelectedOptionsToTop(): void;
     focus(options?: FocusOptions): void;
 }

package/shared/picker-field/mixins/single-date-picker.d.ts

@@ -811,10 +811,12 @@ export declare const SingleDatePickerMixin: <T_6 extends AbstractConstructor<{
     _isValidValue(value: string): boolean;
     _toPresentationValue(value: string): string;
     _parsePresentationValue(presentationValue: string): string;
+    _isInternalValueUpdate: boolean;
     valueChanged(previous: string, next: string): void;
     _updatePresentationValue(): void;
     _updateValueDueToUserInteraction(newValue: string): void;
     _onTextFieldChange(): void;
+    _onTextFieldInput(event: Event): void;
     _isPresentationValueInvalid(): boolean;
     _onClearClick(): void;
     readOnly: boolean;
@@ -846,7 +848,6 @@ export declare const SingleDatePickerMixin: <T_6 extends AbstractConstructor<{
     _presentationValueChanged(): void;
     readonly _textFieldPlaceholder: string;
     _textFieldSize?: string | undefined;
-    _onTextFieldInput(event: Event): void;
     readonly _pickerButtonLabel: string;
     readonly _pickerButtonIcon: string;
     _onPickerButtonClick(): void;
@@ -1654,7 +1655,7 @@ export declare const SingleDatePickerMixin: <T_6 extends AbstractConstructor<{
     _updatePresentationValue: (() => void) & (() => void);
     readonly _textFieldPlaceholder: string;
     _textFieldSize?: string | undefined;
-    _onTextFieldInput(event: Event): void;
+    _onTextFieldInput: ((event: Event) => void) & ((event: Event) => void);
     _onTextFieldChange: (() => void) & (() => void);
     readonly _pickerButtonLabel: string;
     readonly _pickerButtonIcon: string;
@@ -2389,6 +2390,7 @@ export declare const SingleDatePickerMixin: <T_6 extends AbstractConstructor<{
     _isValidValue(value: string): boolean;
     _toPresentationValue(value: string): string;
     _parsePresentationValue(presentationValue: string): string;
+    _isInternalValueUpdate: boolean;
     _updateValueDueToUserInteraction(newValue: string): void;
     _isPresentationValueInvalid(): boolean;
 }) & T_6;

package/shared/picker-field/mixins/single-value-picker.d.ts

@@ -4,10 +4,12 @@ export declare const SingleValuePicker: <T extends AbstractConstructor<PickerFie
     _isValidValue(value: string): boolean;
     _toPresentationValue(value: string): string;
     _parsePresentationValue(presentationValue: string): string;
+    _isInternalValueUpdate: boolean;
     valueChanged(previous: string, next: string): void;
     _updatePresentationValue(): void;
     _updateValueDueToUserInteraction(newValue: string): void;
     _onTextFieldChange(): void;
+    _onTextFieldInput(event: Event): void;
     _isPresentationValueInvalid(): boolean;
     _onClearClick(): void;
     readOnly: boolean;
@@ -39,7 +41,6 @@ export declare const SingleValuePicker: <T extends AbstractConstructor<PickerFie
     _presentationValueChanged(): void;
     readonly _textFieldPlaceholder: string;
     _textFieldSize?: string | undefined;
-    _onTextFieldInput(event: Event): void;
     readonly _pickerButtonLabel: string;
     readonly _pickerButtonIcon: string;
     _onPickerButtonClick(): void;

package/shared/picker-field/mixins/time-selection-picker.d.ts

@@ -6,10 +6,12 @@ export declare const TimeSelectionPicker: <T_5 extends AbstractConstructor<{
     _isValidValue(value: string): boolean;
     _toPresentationValue(value: string): string;
     _parsePresentationValue(presentationValue: string): string;
+    _isInternalValueUpdate: boolean;
     valueChanged(previous: string, next: string): void;
     _updatePresentationValue(): void;
     _updateValueDueToUserInteraction(newValue: string): void;
     _onTextFieldChange(): void;
+    _onTextFieldInput(event: Event): void;
     _isPresentationValueInvalid(): boolean;
     _onClearClick(): void;
     readOnly: boolean;
@@ -41,7 +43,6 @@ export declare const TimeSelectionPicker: <T_5 extends AbstractConstructor<{
     _presentationValueChanged(): void;
     readonly _textFieldPlaceholder: string;
     _textFieldSize?: string | undefined;
-    _onTextFieldInput(event: Event): void;
     readonly _pickerButtonLabel: string;
     readonly _pickerButtonIcon: string;
     _onPickerButtonClick(): void;
@@ -798,10 +799,12 @@ export declare const TimeSelectionPicker: <T_5 extends AbstractConstructor<{
     _isValidValue(value: string): boolean;
     _toPresentationValue(value: string): string;
     _parsePresentationValue(presentationValue: string): string;
+    _isInternalValueUpdate: boolean;
     valueChanged: ((previous: string, next: string) => void) & ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
     _updatePresentationValue: (() => void) & (() => void);
     _updateValueDueToUserInteraction(newValue: string): void;
     _onTextFieldChange: (() => void) & (() => void);
+    _onTextFieldInput: ((event: Event) => void) & ((event: Event) => void);
     _isPresentationValueInvalid(): boolean;
     _onClearClick: (() => void) & (() => void);
     readOnly: boolean;
@@ -831,7 +834,6 @@ export declare const TimeSelectionPicker: <T_5 extends AbstractConstructor<{
     _presentationValueChanged(): void;
     readonly _textFieldPlaceholder: string;
     _textFieldSize?: string | undefined;
-    _onTextFieldInput(event: Event): void;
     readonly _pickerButtonLabel: string;
     readonly _pickerButtonIcon: string;
     _onOkClick(): void;

package/shared/picker-field/mixins/time-selection-picker.template.d.ts

@@ -26,10 +26,12 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     _isValidValue(value: string): boolean;
     _toPresentationValue(value: string): string;
     _parsePresentationValue(presentationValue: string): string;
+    _isInternalValueUpdate: boolean;
     valueChanged: ((previous: string, next: string) => void) & ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
     _updatePresentationValue: (() => void) & (() => void);
     _updateValueDueToUserInteraction(newValue: string): void;
     _onTextFieldChange: (() => void) & (() => void);
+    _onTextFieldInput: ((event: Event) => void) & ((event: Event) => void);
     _isPresentationValueInvalid(): boolean;
     _onClearClick: (() => void) & (() => void);
     readOnly: boolean;
@@ -59,7 +61,6 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     _presentationValueChanged(): void;
     readonly _textFieldPlaceholder: string;
     _textFieldSize?: string | undefined;
-    _onTextFieldInput(event: Event): void;
     readonly _pickerButtonLabel: string;
     readonly _pickerButtonIcon: string;
     _onOkClick(): void;
@@ -793,10 +794,12 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     _isValidValue(value: string): boolean;
     _toPresentationValue(value: string): string;
     _parsePresentationValue(presentationValue: string): string;
+    _isInternalValueUpdate: boolean;
     valueChanged(previous: string, next: string): void;
     _updatePresentationValue(): void;
     _updateValueDueToUserInteraction(newValue: string): void;
     _onTextFieldChange(): void;
+    _onTextFieldInput(event: Event): void;
     _isPresentationValueInvalid(): boolean;
     _onClearClick(): void;
     readOnly: boolean;
@@ -828,7 +831,6 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     _presentationValueChanged(): void;
     readonly _textFieldPlaceholder: string;
     _textFieldSize?: string | undefined;
-    _onTextFieldInput(event: Event): void;
     readonly _pickerButtonLabel: string;
     readonly _pickerButtonIcon: string;
     _onPickerButtonClick(): void;

package/shared/single-value-picker.cjs

@@ -2,6 +2,13 @@
 
 const SingleValuePicker = (Base) => {
   class SingleValuePickerElement extends Base {
+    constructor() {
+      super(...arguments);
+      /**
+       * @internal
+       */
+      this._isInternalValueUpdate = false;
+    }
     /**
      * @internal
      */
@@ -13,7 +20,9 @@ const SingleValuePicker = (Base) => {
           return;
         }
       }
-      this._updatePresentationValue();
+      if (!this._isInternalValueUpdate) {
+        this._updatePresentationValue();
+      }
     }
     /**
      * @internal
@@ -38,20 +47,45 @@ const SingleValuePicker = (Base) => {
      */
     _onTextFieldChange() {
       if (this._presentationValue === "") {
-        this._updateValueDueToUserInteraction("");
+        this.value = "";
+        this.$emit("change");
         return;
       }
       try {
-        this._updateValueDueToUserInteraction(
-          this._parsePresentationValue(this._presentationValue)
-        );
+        this.value = this._parsePresentationValue(this._presentationValue);
+        this.$emit("change");
       } catch (_) {
         const invalidPresentationValue = this._presentationValue;
-        this._updateValueDueToUserInteraction("");
+        this.value = "";
+        this.$emit("change");
         this._presentationValue = invalidPresentationValue;
         return;
       }
     }
+    /**
+     * @internal
+     */
+    _onTextFieldInput(event) {
+      super._onTextFieldInput(event);
+      this._isInternalValueUpdate = true;
+      if (this._presentationValue === "") {
+        this.value = "";
+        this.$emit("input");
+        return;
+      }
+      try {
+        const parsedValue = this._parsePresentationValue(
+          this._presentationValue
+        );
+        if (this.value !== parsedValue) {
+          this.value = parsedValue;
+          this.$emit("input");
+        }
+      } catch (_) {
+        return;
+      }
+      this._isInternalValueUpdate = false;
+    }
     /**
      * @internal
      */

package/shared/single-value-picker.js

@@ -1,5 +1,12 @@
 const SingleValuePicker = (Base) => {
   class SingleValuePickerElement extends Base {
+    constructor() {
+      super(...arguments);
+      /**
+       * @internal
+       */
+      this._isInternalValueUpdate = false;
+    }
     /**
      * @internal
      */
@@ -11,7 +18,9 @@ const SingleValuePicker = (Base) => {
           return;
         }
       }
-      this._updatePresentationValue();
+      if (!this._isInternalValueUpdate) {
+        this._updatePresentationValue();
+      }
     }
     /**
      * @internal
@@ -36,20 +45,45 @@ const SingleValuePicker = (Base) => {
      */
     _onTextFieldChange() {
       if (this._presentationValue === "") {
-        this._updateValueDueToUserInteraction("");
+        this.value = "";
+        this.$emit("change");
         return;
       }
       try {
-        this._updateValueDueToUserInteraction(
-          this._parsePresentationValue(this._presentationValue)
-        );
+        this.value = this._parsePresentationValue(this._presentationValue);
+        this.$emit("change");
       } catch (_) {
         const invalidPresentationValue = this._presentationValue;
-        this._updateValueDueToUserInteraction("");
+        this.value = "";
+        this.$emit("change");
         this._presentationValue = invalidPresentationValue;
         return;
       }
     }
+    /**
+     * @internal
+     */
+    _onTextFieldInput(event) {
+      super._onTextFieldInput(event);
+      this._isInternalValueUpdate = true;
+      if (this._presentationValue === "") {
+        this.value = "";
+        this.$emit("input");
+        return;
+      }
+      try {
+        const parsedValue = this._parsePresentationValue(
+          this._presentationValue
+        );
+        if (this.value !== parsedValue) {
+          this.value = parsedValue;
+          this.$emit("input");
+        }
+      } catch (_) {
+        return;
+      }
+      this._isInternalValueUpdate = false;
+    }
     /**
      * @internal
      */

package/shared/text-field.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-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(--vvd-color-neutral-500)}.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(--vvd-color-neutral-700)}.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:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - 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}";
+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(--vvd-color-neutral-500)}.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(--vvd-color-neutral-700)}.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(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - 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}";
 
 exports.styles = styles;