@vonage/vivid 4.12.1 → 4.13.0

package/shared/definition57.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
 const index = require('./index.cjs');
-const definition$1 = require('./definition56.cjs');
+const definition$2 = require('./definition56.cjs');
 const definition = require('./definition64.cjs');
-const definition$2 = require('./definition11.cjs');
+const definition$1 = require('./definition11.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const index$1 = require('./index2.cjs');
 const scrollIntoView = require('./scrollIntoView.cjs');
@@ -11,13 +11,14 @@ const formAssociated = require('./form-associated.cjs');
 const formElements = require('./form-elements.cjs');
 const trappedFocus = require('./trapped-focus.cjs');
 const localized = require('./localized.cjs');
+const textField = require('./text-field2.cjs');
 const ref = require('./ref.cjs');
 const slotted = require('./slotted.cjs');
 const when = require('./when.cjs');
 const repeat = require('./repeat.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:inline-block}.base,.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;border-top:1px solid var(--vvd-color-neutral-200);gap:8px}.time-pickers{display:flex;overflow:hidden;justify-content:center;padding:4px;block-size:188px;gap:4px}.time-pickers .picker{position:relative;display:flex;overflow:hidden;flex-direction:column;padding:0;border-radius:4px;margin:0;gap:4px;inline-size:50px;list-style:none;scrollbar-width:thin}.time-pickers .picker:hover{overflow-y:auto}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:156px;content:\"\"}.time-pickers .picker:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: -2px;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))}.time-pickers .item{--_connotation-color-primary: var(--vvd-time-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-time-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-time-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-time-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-time-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-time-picker-accent-pale, var(--vvd-color-neutral-300))}.time-pickers .item{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.time-pickers .item: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}.time-pickers .item: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}.time-pickers .item:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .item: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}.time-pickers .item:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.time-pickers .item{display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);inline-size:50px}";
+const styles = ":host{display:inline-block}.base,.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;border-top:1px solid var(--vvd-color-neutral-200);gap:8px}.time-pickers{display:flex;overflow:hidden;justify-content:center;padding:4px;block-size:188px;gap:4px}.time-pickers .picker{position:relative;display:flex;overflow:hidden;flex-direction:column;padding:0;border-radius:4px;margin:0;gap:4px;inline-size:50px;list-style:none}.time-pickers .picker:hover{overflow-y:auto}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:156px;content:\"\"}.time-pickers .picker:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: -2px;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))}.time-pickers .item{--_connotation-color-primary: var(--vvd-time-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-time-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-time-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-time-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-time-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-time-picker-accent-pale, var(--vvd-color-neutral-300))}.time-pickers .item{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.time-pickers .item: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}.time-pickers .item: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}.time-pickers .item:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .item: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}.time-pickers .item:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.time-pickers .item{display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);inline-size:50px}";
 
 class _TimePicker extends index.FoundationElement {
 }
@@ -767,8 +768,8 @@ const renderPicker = (id, getLabel, getSelected, setSelected, getOptions) => {
 };
 const TimePickerTemplate = (context, _) => {
   const popupTag = context.tagFor(definition.Popup);
-  const textFieldTag = context.tagFor(definition$1.TextField);
-  const buttonTag = context.tagFor(definition$2.Button$1);
+  const textFieldTag = context.tagFor(textField.TextField);
+  const buttonTag = context.tagFor(definition$1.Button$1);
   return index.html`<div class="base" @keydown="${(x, { event }) => x._onBaseKeyDown(event)}">
 		<${textFieldTag} id="text-field"
 										 ${ref.ref("_textFieldEl")}
@@ -874,9 +875,9 @@ const timePickerDefinition = TimePicker.compose({
 });
 const timePickerRegistries = [
   timePickerDefinition(),
-  ...definition$1.textFieldRegistries,
+  ...definition$2.textFieldRegistries,
   ...definition.popupRegistries,
-  ...definition$2.buttonRegistries
+  ...definition$1.buttonRegistries
 ];
 const registerTimePicker = index.registerFactory(timePickerRegistries);
 

package/shared/definition57.js

@@ -1,5 +1,5 @@
 import { F as FoundationElement, O as Observable, g as defaultExecutionContext, D as DOM, a as attr, n as nullableNumberConverter, v as volatile, o as observable, h as html, r as registerFactory } from './index.js';
-import { T as TextField, a as textFieldRegistries } from './definition56.js';
+import { a as textFieldRegistries } from './definition56.js';
 import { P as Popup, p as popupRegistries } from './definition64.js';
 import { c as Button, a as buttonRegistries } from './definition11.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
@@ -9,13 +9,14 @@ import { F as FormAssociated } from './form-associated.js';
 import { e as errorText, f as formElements, a as FormElementHelperText } from './form-elements.js';
 import { T as TrappedFocus } from './trapped-focus.js';
 import { L as Localized } from './localized.js';
+import { T as TextField } from './text-field2.js';
 import { r as ref } from './ref.js';
 import { s as slotted } from './slotted.js';
 import { w as when } from './when.js';
 import { r as repeat } from './repeat.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:inline-block}.base,.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;border-top:1px solid var(--vvd-color-neutral-200);gap:8px}.time-pickers{display:flex;overflow:hidden;justify-content:center;padding:4px;block-size:188px;gap:4px}.time-pickers .picker{position:relative;display:flex;overflow:hidden;flex-direction:column;padding:0;border-radius:4px;margin:0;gap:4px;inline-size:50px;list-style:none;scrollbar-width:thin}.time-pickers .picker:hover{overflow-y:auto}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:156px;content:\"\"}.time-pickers .picker:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: -2px;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))}.time-pickers .item{--_connotation-color-primary: var(--vvd-time-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-time-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-time-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-time-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-time-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-time-picker-accent-pale, var(--vvd-color-neutral-300))}.time-pickers .item{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.time-pickers .item: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}.time-pickers .item: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}.time-pickers .item:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .item: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}.time-pickers .item:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.time-pickers .item{display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);inline-size:50px}";
+const styles = ":host{display:inline-block}.base,.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;border-top:1px solid var(--vvd-color-neutral-200);gap:8px}.time-pickers{display:flex;overflow:hidden;justify-content:center;padding:4px;block-size:188px;gap:4px}.time-pickers .picker{position:relative;display:flex;overflow:hidden;flex-direction:column;padding:0;border-radius:4px;margin:0;gap:4px;inline-size:50px;list-style:none}.time-pickers .picker:hover{overflow-y:auto}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:156px;content:\"\"}.time-pickers .picker:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: -2px;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))}.time-pickers .item{--_connotation-color-primary: var(--vvd-time-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-time-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-time-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-time-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-time-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-time-picker-accent-pale, var(--vvd-color-neutral-300))}.time-pickers .item{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.time-pickers .item: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}.time-pickers .item: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}.time-pickers .item:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .item: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}.time-pickers .item:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.time-pickers .item{display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);inline-size:50px}";
 
 class _TimePicker extends FoundationElement {
 }

package/shared/definition64.cjs

@@ -1974,11 +1974,9 @@ class Popup extends index.FoundationElement {
   }
   #cleanup;
   openChanged(_, newValue) {
-    newValue ? this.$emit("vwc-popup:open") : this.$emit("vwc-popup:close");
-    index.DOM.queueUpdate(() => {
-      this.#updateAutoUpdate();
-      this.#togglePopover();
-    });
+    this.#togglePopover();
+    this.#updateAutoUpdate();
+    this.$emit(newValue ? "vwc-popup:open" : "vwc-popup:close");
   }
   /**
    * @internal
@@ -1992,11 +1990,15 @@ class Popup extends index.FoundationElement {
   anchorChanged() {
     this.#updateAutoUpdate();
   }
+  /**
+   * @internal
+   */
   strategyChanged() {
     this.#togglePopover();
   }
   connectedCallback() {
     super.connectedCallback();
+    this.#togglePopover();
     this.#updateAutoUpdate();
   }
   disconnectedCallback() {
@@ -2005,6 +2007,9 @@ class Popup extends index.FoundationElement {
   }
   #updateAutoUpdate() {
     this.#cleanup?.();
+    if (this.open && this.controlEl) {
+      this.controlEl.classList.add("open");
+    }
     if (this.anchorEl && this.open && this.popupEl) {
       this.#cleanup = autoUpdate(
         this.anchorEl,
@@ -2070,8 +2075,14 @@ class Popup extends index.FoundationElement {
   get anchorEl() {
     return this.anchor ?? null;
   }
+  /**
+   * Shows the popup.
+   * Unlike toggling the `open` attribute, show() will ensure the popup becomes visible synchronously.
+   */
   show() {
     this.open = true;
+    this.#togglePopover();
+    this.#updateAutoUpdate();
   }
   hide() {
     this.open = false;
@@ -2110,7 +2121,7 @@ __decorateClass([
   index.observable
 ], Popup.prototype, "anchor");
 
-const styles = ":host{display:var(--_popup-display, inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;z-index:var(--_popup-z-index, 10);overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{display:grid;color:var(--vvd-color-canvas-text)}.dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}";
+const styles = ":host{display:var(--_popup-display, inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.popup-wrapper{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.popup-wrapper ::-webkit-scrollbar{width:4px}.popup-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.popup-wrapper ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-thumb-color)}.popup-wrapper{z-index:var(--_popup-z-index, 10);overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{display:grid;color:var(--vvd-color-canvas-text)}.dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}";
 
 const getClasses = ({ open, dismissible, alternate }) => classNames.classNames(
   "control",
@@ -2127,7 +2138,7 @@ const popupTemplate = (context) => {
   return index.html`
   <${elevationTag}>
 		<div popover="${handlePopover}" class="popup-wrapper ${(x) => x.strategy}" ${ref.ref("popupEl")} part="popup-base">
-			<div class="${getClasses}" aria-hidden="${(x) => x.open ? "false" : "true"}"
+			<div ${ref.ref("controlEl")} class="${getClasses}" aria-hidden="${(x) => x.open ? "false" : "true"}"
 				part="${(x) => x.alternate ? "vvd-theme-alternate" : ""}">
 				<div class="popup-content">
 					<slot></slot>

package/shared/definition64.js

@@ -1,4 +1,4 @@
-import { F as FoundationElement, D as DOM, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
+import { F as FoundationElement, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
 import { c as Button, a as buttonRegistries } from './definition11.js';
 import { E as Elevation, e as elevationRegistries } from './definition63.js';
 import { r as ref } from './ref.js';
@@ -1972,11 +1972,9 @@ class Popup extends FoundationElement {
   }
   #cleanup;
   openChanged(_, newValue) {
-    newValue ? this.$emit("vwc-popup:open") : this.$emit("vwc-popup:close");
-    DOM.queueUpdate(() => {
-      this.#updateAutoUpdate();
-      this.#togglePopover();
-    });
+    this.#togglePopover();
+    this.#updateAutoUpdate();
+    this.$emit(newValue ? "vwc-popup:open" : "vwc-popup:close");
   }
   /**
    * @internal
@@ -1990,11 +1988,15 @@ class Popup extends FoundationElement {
   anchorChanged() {
     this.#updateAutoUpdate();
   }
+  /**
+   * @internal
+   */
   strategyChanged() {
     this.#togglePopover();
   }
   connectedCallback() {
     super.connectedCallback();
+    this.#togglePopover();
     this.#updateAutoUpdate();
   }
   disconnectedCallback() {
@@ -2003,6 +2005,9 @@ class Popup extends FoundationElement {
   }
   #updateAutoUpdate() {
     this.#cleanup?.();
+    if (this.open && this.controlEl) {
+      this.controlEl.classList.add("open");
+    }
     if (this.anchorEl && this.open && this.popupEl) {
       this.#cleanup = autoUpdate(
         this.anchorEl,
@@ -2068,8 +2073,14 @@ class Popup extends FoundationElement {
   get anchorEl() {
     return this.anchor ?? null;
   }
+  /**
+   * Shows the popup.
+   * Unlike toggling the `open` attribute, show() will ensure the popup becomes visible synchronously.
+   */
   show() {
     this.open = true;
+    this.#togglePopover();
+    this.#updateAutoUpdate();
   }
   hide() {
     this.open = false;
@@ -2108,7 +2119,7 @@ __decorateClass([
   observable
 ], Popup.prototype, "anchor");
 
-const styles = ":host{display:var(--_popup-display, inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;z-index:var(--_popup-z-index, 10);overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{display:grid;color:var(--vvd-color-canvas-text)}.dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}";
+const styles = ":host{display:var(--_popup-display, inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.popup-wrapper{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.popup-wrapper ::-webkit-scrollbar{width:4px}.popup-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.popup-wrapper ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-thumb-color)}.popup-wrapper{z-index:var(--_popup-z-index, 10);overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{display:grid;color:var(--vvd-color-canvas-text)}.dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}";
 
 const getClasses = ({ open, dismissible, alternate }) => classNames(
   "control",
@@ -2125,7 +2136,7 @@ const popupTemplate = (context) => {
   return html`
   <${elevationTag}>
 		<div popover="${handlePopover}" class="popup-wrapper ${(x) => x.strategy}" ${ref("popupEl")} part="popup-base">
-			<div class="${getClasses}" aria-hidden="${(x) => x.open ? "false" : "true"}"
+			<div ${ref("controlEl")} class="${getClasses}" aria-hidden="${(x) => x.open ? "false" : "true"}"
 				part="${(x) => x.alternate ? "vvd-theme-alternate" : ""}">
 				<div class="popup-content">
 					<slot></slot>

package/shared/listbox.cjs

@@ -2,9 +2,10 @@
 
 const keyCodes$1 = require('./key-codes.cjs');
 const index = require('./index.cjs');
-const listboxOption = require('./listbox-option.cjs');
 const ariaGlobal = require('./aria-global.cjs');
+const startEnd = require('./start-end.cjs');
 const applyMixins = require('./apply-mixins.cjs');
+const dom = require('./dom.cjs');
 const keyCodes = require('./key-codes2.cjs');
 const strings = require('./strings.cjs');
 
@@ -24,6 +25,200 @@ function findLastIndex(array, predicate) {
     return -1;
 }
 
+/**
+ * Determines if the element is a {@link (ListboxOption:class)}
+ *
+ * @param element - the element to test.
+ * @public
+ */
+function isListboxOption(el) {
+    return (dom.isHTMLElement(el) &&
+        (el.getAttribute("role") === "option" ||
+            el instanceof HTMLOptionElement));
+}
+/**
+ * An Option Custom HTML Element.
+ * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option }.
+ *
+ * @slot start - Content which can be provided before the listbox option content
+ * @slot end - Content which can be provided after the listbox option content
+ * @slot - The default slot for listbox option content
+ * @csspart content - Wraps the listbox option content
+ *
+ * @public
+ */
+class ListboxOption extends index.FoundationElement {
+    constructor(text, value, defaultSelected, selected) {
+        super();
+        /**
+         * The defaultSelected state of the option.
+         * @public
+         */
+        this.defaultSelected = false;
+        /**
+         * Tracks whether the "selected" property has been changed.
+         * @internal
+         */
+        this.dirtySelected = false;
+        /**
+         * The checked state of the control.
+         *
+         * @public
+         */
+        this.selected = this.defaultSelected;
+        /**
+         * Track whether the value has been changed from the initial value
+         */
+        this.dirtyValue = false;
+        if (text) {
+            this.textContent = text;
+        }
+        if (value) {
+            this.initialValue = value;
+        }
+        if (defaultSelected) {
+            this.defaultSelected = defaultSelected;
+        }
+        if (selected) {
+            this.selected = selected;
+        }
+        this.proxy = new Option(`${this.textContent}`, this.initialValue, this.defaultSelected, this.selected);
+        this.proxy.disabled = this.disabled;
+    }
+    /**
+     * Updates the ariaChecked property when the checked property changes.
+     *
+     * @param prev - the previous checked value
+     * @param next - the current checked value
+     *
+     * @public
+     */
+    checkedChanged(prev, next) {
+        if (typeof next === "boolean") {
+            this.ariaChecked = next ? "true" : "false";
+            return;
+        }
+        this.ariaChecked = null;
+    }
+    /**
+     * Updates the proxy's text content when the default slot changes.
+     * @param prev - the previous content value
+     * @param next - the current content value
+     *
+     * @internal
+     */
+    contentChanged(prev, next) {
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.textContent = this.textContent;
+        }
+        this.$emit("contentchange", null, { bubbles: true });
+    }
+    defaultSelectedChanged() {
+        if (!this.dirtySelected) {
+            this.selected = this.defaultSelected;
+            if (this.proxy instanceof HTMLOptionElement) {
+                this.proxy.selected = this.defaultSelected;
+            }
+        }
+    }
+    disabledChanged(prev, next) {
+        this.ariaDisabled = this.disabled ? "true" : "false";
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.disabled = this.disabled;
+        }
+    }
+    selectedAttributeChanged() {
+        this.defaultSelected = this.selectedAttribute;
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.defaultSelected = this.defaultSelected;
+        }
+    }
+    selectedChanged() {
+        this.ariaSelected = this.selected ? "true" : "false";
+        if (!this.dirtySelected) {
+            this.dirtySelected = true;
+        }
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.selected = this.selected;
+        }
+    }
+    initialValueChanged(previous, next) {
+        // If the value is clean and the component is connected to the DOM
+        // then set value equal to the attribute value.
+        if (!this.dirtyValue) {
+            this.value = this.initialValue;
+            this.dirtyValue = false;
+        }
+    }
+    get label() {
+        var _a;
+        return (_a = this.value) !== null && _a !== void 0 ? _a : this.text;
+    }
+    get text() {
+        var _a, _b;
+        return (_b = (_a = this.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, " ").trim()) !== null && _b !== void 0 ? _b : "";
+    }
+    set value(next) {
+        const newValue = `${next !== null && next !== void 0 ? next : ""}`;
+        this._value = newValue;
+        this.dirtyValue = true;
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.value = newValue;
+        }
+        index.Observable.notify(this, "value");
+    }
+    get value() {
+        var _a;
+        index.Observable.track(this, "value");
+        return (_a = this._value) !== null && _a !== void 0 ? _a : this.text;
+    }
+    get form() {
+        return this.proxy ? this.proxy.form : null;
+    }
+}
+index.__decorate([
+    index.observable
+], ListboxOption.prototype, "checked", void 0);
+index.__decorate([
+    index.observable
+], ListboxOption.prototype, "content", void 0);
+index.__decorate([
+    index.observable
+], ListboxOption.prototype, "defaultSelected", void 0);
+index.__decorate([
+    index.attr({ mode: "boolean" })
+], ListboxOption.prototype, "disabled", void 0);
+index.__decorate([
+    index.attr({ attribute: "selected", mode: "boolean" })
+], ListboxOption.prototype, "selectedAttribute", void 0);
+index.__decorate([
+    index.observable
+], ListboxOption.prototype, "selected", void 0);
+index.__decorate([
+    index.attr({ attribute: "value", mode: "fromView" })
+], ListboxOption.prototype, "initialValue", void 0);
+/**
+ * States and properties relating to the ARIA `option` role.
+ *
+ * @public
+ */
+class DelegatesARIAListboxOption {
+}
+index.__decorate([
+    index.observable
+], DelegatesARIAListboxOption.prototype, "ariaChecked", void 0);
+index.__decorate([
+    index.observable
+], DelegatesARIAListboxOption.prototype, "ariaPosInSet", void 0);
+index.__decorate([
+    index.observable
+], DelegatesARIAListboxOption.prototype, "ariaSelected", void 0);
+index.__decorate([
+    index.observable
+], DelegatesARIAListboxOption.prototype, "ariaSetSize", void 0);
+applyMixins.applyMixins(DelegatesARIAListboxOption, ariaGlobal.ARIAGlobalStatesAndProperties);
+applyMixins.applyMixins(ListboxOption, startEnd.StartEnd, DelegatesARIAListboxOption);
+
 /**
  * A Listbox Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#listbox | ARIA listbox }.
@@ -457,7 +652,7 @@ let Listbox$1 = class Listbox extends index.FoundationElement {
      */
     slottedOptionsChanged(prev, next) {
         this.options = next.reduce((options, item) => {
-            if (listboxOption.isListboxOption(item)) {
+            if (isListboxOption(item)) {
                 options.push(item);
             }
             return options;
@@ -502,7 +697,7 @@ let Listbox$1 = class Listbox extends index.FoundationElement {
  * @param n - element to filter
  * @public
  */
-Listbox$1.slottedOptionFilter = (n) => listboxOption.isListboxOption(n) && !n.hidden;
+Listbox$1.slottedOptionFilter = (n) => isListboxOption(n) && !n.hidden;
 /**
  * Typeahead timeout in milliseconds.
  *