@vonage/vivid 4.28.0 → 4.30.0

package/shared/definition67.cjs

@@ -51,8 +51,9 @@ function getOppositeAxis(axis) {
 function getAxisLength(axis) {
   return axis === 'y' ? 'height' : 'width';
 }
+const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
 function getSideAxis(placement) {
-  return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
+  return yAxisSides.has(getSide(placement)) ? 'y' : 'x';
 }
 function getAlignmentAxis(placement) {
   return getOppositeAxis(getSideAxis(placement));
@@ -77,19 +78,19 @@ function getExpandedPlacements(placement) {
 function getOppositeAlignmentPlacement(placement) {
   return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
 }
+const lrPlacement = ['left', 'right'];
+const rlPlacement = ['right', 'left'];
+const tbPlacement = ['top', 'bottom'];
+const btPlacement = ['bottom', 'top'];
 function getSideList(side, isStart, rtl) {
-  const lr = ['left', 'right'];
-  const rl = ['right', 'left'];
-  const tb = ['top', 'bottom'];
-  const bt = ['bottom', 'top'];
   switch (side) {
     case 'top':
     case 'bottom':
-      if (rtl) return isStart ? rl : lr;
-      return isStart ? lr : rl;
+      if (rtl) return isStart ? rlPlacement : lrPlacement;
+      return isStart ? lrPlacement : rlPlacement;
     case 'left':
     case 'right':
-      return isStart ? tb : bt;
+      return isStart ? tbPlacement : btPlacement;
     default:
       return [];
   }
@@ -873,6 +874,8 @@ const inline$1 = function (options) {
   };
 };
 
+const originSides = /*#__PURE__*/new Set(['left', 'top']);
+
 // For type backwards-compatibility, the `OffsetOptions` type was also
 // Derivable.
 
@@ -886,7 +889,7 @@ async function convertValueToCoords(state, options) {
   const side = getSide(placement);
   const alignment = getAlignment(placement);
   const isVertical = getSideAxis(placement) === 'y';
-  const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
+  const mainAxisMulti = originSides.has(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
   const rawValue = evaluate(options, state);
 
@@ -1085,6 +1088,7 @@ function isShadowRoot(value) {
   }
   return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
 }
+const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
 function isOverflowElement(element) {
   const {
     overflow,
@@ -1092,27 +1096,32 @@ function isOverflowElement(element) {
     overflowY,
     display
   } = getComputedStyle(element);
-  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
 }
+const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
 function isTableElement(element) {
-  return ['table', 'td', 'th'].includes(getNodeName(element));
+  return tableElements.has(getNodeName(element));
 }
+const topLayerSelectors = [':popover-open', ':modal'];
 function isTopLayer(element) {
-  return [':popover-open', ':modal'].some(selector => {
+  return topLayerSelectors.some(selector => {
     try {
       return element.matches(selector);
-    } catch (e) {
+    } catch (_e) {
       return false;
     }
   });
 }
+const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
+const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
+const containValues = ['paint', 'layout', 'strict', 'content'];
 function isContainingBlock(elementOrCss) {
   const webkit = isWebKit();
   const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   // https://drafts.csswg.org/css-transforms-2/#individual-transforms
-  return ['transform', 'translate', 'scale', 'rotate', 'perspective'].some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
+  return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
@@ -1130,8 +1139,9 @@ function isWebKit() {
   if (typeof CSS === 'undefined' || !CSS.supports) return false;
   return CSS.supports('-webkit-backdrop-filter', 'none');
 }
+const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
 function isLastTraversableNode(node) {
-  return ['html', 'body', '#document'].includes(getNodeName(node));
+  return lastTraversableNodeNames.has(getNodeName(node));
 }
 function getComputedStyle(element) {
   return getWindow(element).getComputedStyle(element);
@@ -1436,6 +1446,7 @@ function getViewportRect(element, strategy) {
   };
 }
 
+const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
 // Returns the inner client rect, subtracting scrollbars if present.
 function getInnerBoundingClientRect(element, strategy) {
   const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
@@ -1500,7 +1511,7 @@ function getClippingElementAncestors(element, cache) {
     if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
       currentContainingBlockComputedStyle = null;
     }
-    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
     if (shouldDropCurrentNode) {
       // Drop non-containing blocks.
       result = result.filter(ancestor => ancestor !== currentNode);

package/shared/definition67.js

@@ -49,8 +49,9 @@ function getOppositeAxis(axis) {
 function getAxisLength(axis) {
   return axis === 'y' ? 'height' : 'width';
 }
+const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
 function getSideAxis(placement) {
-  return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
+  return yAxisSides.has(getSide(placement)) ? 'y' : 'x';
 }
 function getAlignmentAxis(placement) {
   return getOppositeAxis(getSideAxis(placement));
@@ -75,19 +76,19 @@ function getExpandedPlacements(placement) {
 function getOppositeAlignmentPlacement(placement) {
   return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
 }
+const lrPlacement = ['left', 'right'];
+const rlPlacement = ['right', 'left'];
+const tbPlacement = ['top', 'bottom'];
+const btPlacement = ['bottom', 'top'];
 function getSideList(side, isStart, rtl) {
-  const lr = ['left', 'right'];
-  const rl = ['right', 'left'];
-  const tb = ['top', 'bottom'];
-  const bt = ['bottom', 'top'];
   switch (side) {
     case 'top':
     case 'bottom':
-      if (rtl) return isStart ? rl : lr;
-      return isStart ? lr : rl;
+      if (rtl) return isStart ? rlPlacement : lrPlacement;
+      return isStart ? lrPlacement : rlPlacement;
     case 'left':
     case 'right':
-      return isStart ? tb : bt;
+      return isStart ? tbPlacement : btPlacement;
     default:
       return [];
   }
@@ -871,6 +872,8 @@ const inline$1 = function (options) {
   };
 };
 
+const originSides = /*#__PURE__*/new Set(['left', 'top']);
+
 // For type backwards-compatibility, the `OffsetOptions` type was also
 // Derivable.
 
@@ -884,7 +887,7 @@ async function convertValueToCoords(state, options) {
   const side = getSide(placement);
   const alignment = getAlignment(placement);
   const isVertical = getSideAxis(placement) === 'y';
-  const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
+  const mainAxisMulti = originSides.has(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
   const rawValue = evaluate(options, state);
 
@@ -1083,6 +1086,7 @@ function isShadowRoot(value) {
   }
   return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
 }
+const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
 function isOverflowElement(element) {
   const {
     overflow,
@@ -1090,27 +1094,32 @@ function isOverflowElement(element) {
     overflowY,
     display
   } = getComputedStyle(element);
-  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
 }
+const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
 function isTableElement(element) {
-  return ['table', 'td', 'th'].includes(getNodeName(element));
+  return tableElements.has(getNodeName(element));
 }
+const topLayerSelectors = [':popover-open', ':modal'];
 function isTopLayer(element) {
-  return [':popover-open', ':modal'].some(selector => {
+  return topLayerSelectors.some(selector => {
     try {
       return element.matches(selector);
-    } catch (e) {
+    } catch (_e) {
       return false;
     }
   });
 }
+const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
+const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
+const containValues = ['paint', 'layout', 'strict', 'content'];
 function isContainingBlock(elementOrCss) {
   const webkit = isWebKit();
   const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   // https://drafts.csswg.org/css-transforms-2/#individual-transforms
-  return ['transform', 'translate', 'scale', 'rotate', 'perspective'].some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
+  return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
@@ -1128,8 +1137,9 @@ function isWebKit() {
   if (typeof CSS === 'undefined' || !CSS.supports) return false;
   return CSS.supports('-webkit-backdrop-filter', 'none');
 }
+const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
 function isLastTraversableNode(node) {
-  return ['html', 'body', '#document'].includes(getNodeName(node));
+  return lastTraversableNodeNames.has(getNodeName(node));
 }
 function getComputedStyle(element) {
   return getWindow(element).getComputedStyle(element);
@@ -1434,6 +1444,7 @@ function getViewportRect(element, strategy) {
   };
 }
 
+const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
 // Returns the inner client rect, subtracting scrollbars if present.
 function getInnerBoundingClientRect(element, strategy) {
   const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
@@ -1498,7 +1509,7 @@ function getClippingElementAncestors(element, cache) {
     if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
       currentContainingBlockComputedStyle = null;
     }
-    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
     if (shouldDropCurrentNode) {
       // Drop non-containing blocks.
       result = result.filter(ancestor => ancestor !== currentNode);

package/shared/divider.cjs

@@ -1,7 +1,8 @@
 'use strict';
 
+const enums = require('./enums.cjs');
 const vividElement = require('./vivid-element.cjs');
-const delegatesAria = require('./delegates-aria.cjs');
+const hostSemantics = require('./host-semantics.cjs');
 const aria = require('./aria.cjs');
 
 var __defProp = Object.defineProperty;
@@ -23,11 +24,12 @@ const DividerRole = {
    */
   presentation: "presentation"
 };
-class Divider extends delegatesAria.DelegatesAria(vividElement.VividElement) {
+class Divider extends hostSemantics.HostSemantics(vividElement.VividElement) {
   constructor() {
     super(...arguments);
     this.role = DividerRole.separator;
     this.orientation = aria.Orientation.horizontal;
+    this.appearance = enums.Appearance.Ghost;
   }
 }
 __decorateClass([
@@ -36,6 +38,9 @@ __decorateClass([
 __decorateClass([
   vividElement.attr
 ], Divider.prototype, "orientation");
+__decorateClass([
+  vividElement.attr
+], Divider.prototype, "appearance");
 
 exports.Divider = Divider;
 exports.DividerRole = DividerRole;

package/shared/divider.js

@@ -1,5 +1,6 @@
+import { A as Appearance } from './enums.js';
 import { V as VividElement, a as attr } from './vivid-element.js';
-import { D as DelegatesAria } from './delegates-aria.js';
+import { H as HostSemantics } from './host-semantics.js';
 import { O as Orientation } from './aria.js';
 
 var __defProp = Object.defineProperty;
@@ -21,11 +22,12 @@ const DividerRole = {
    */
   presentation: "presentation"
 };
-class Divider extends DelegatesAria(VividElement) {
+class Divider extends HostSemantics(VividElement) {
   constructor() {
     super(...arguments);
     this.role = DividerRole.separator;
     this.orientation = Orientation.horizontal;
+    this.appearance = Appearance.Ghost;
   }
 }
 __decorateClass([
@@ -34,5 +36,8 @@ __decorateClass([
 __decorateClass([
   attr
 ], Divider.prototype, "orientation");
+__decorateClass([
+  attr
+], Divider.prototype, "appearance");
 
 export { Divider as D, DividerRole as a };

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