@vonage/vivid 4.31.0 → 5.1.0

package/{shared → unbundled}/delegates-aria.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
+const fastElement = require('@microsoft/fast-element');
 const attributeBindingBehaviour = require('./attribute-binding-behaviour.cjs');
 const vividElement = require('./vivid-element.cjs');
 
@@ -9,7 +10,6 @@ class DelegateAriaBehavior {
     this.source = null;
     this.bindingBehaviours = [];
     this.onSourceAriaPropertyChanged = (source, property) => {
-      this.mitigateAccessibilityIssues(source);
       if (!this.forwardedProperties.has(property)) {
         return;
       }
@@ -17,7 +17,6 @@ class DelegateAriaBehavior {
     };
     this.boundProperties = params.boundProperties;
     this.forwardedProperties = params.forwardedProperties;
-    this.isMitigationDisabled = params.disableAccessibilityMitigation;
   }
   bind(source) {
     this.source = source;
@@ -27,7 +26,6 @@ class DelegateAriaBehavior {
       this.forwardedProperties,
       this.target
     );
-    this.mitigateAccessibilityIssues(source);
   }
   unbind() {
     if (this.source === null) {
@@ -44,7 +42,7 @@ class DelegateAriaBehavior {
         new attributeBindingBehaviour.AttributeBindingBehavior(
           target,
           bindingFn,
-          vividElement.Observable.isVolatileBinding(bindingFn),
+          fastElement.Observable.isVolatileBinding(bindingFn),
           vividElement.ariaAttributeName(property)
         )
       );
@@ -68,40 +66,22 @@ class DelegateAriaBehavior {
     );
   }
   forwardPropertyToTarget(target, property, value) {
-    vividElement.DOM.setAttribute(target, vividElement.ariaAttributeName(property), value);
-  }
-  /**
-   * Sets role to presentation unless there are properties present that prohibit it.
-   * Using role="presentation" will cause non-global states or properties to be ignored.
-   * See: https://www.w3.org/TR/wai-aria-1.3/#conflict_resolution_presentation_none
-   */
-  mitigateAccessibilityIssues(source) {
-    if (this.isMitigationDisabled) {
-      return;
-    }
-    const hasProhibitedProperties = Boolean(
-      source.ariaLabel || source.ariaBrailleLabel || source.ariaChecked
-    );
-    if (hasProhibitedProperties) {
-      source.removeAttribute("role");
-    } else {
-      source.setAttribute("role", "presentation");
-    }
+    fastElement.DOM.setAttribute(target, vividElement.ariaAttributeName(property), value);
   }
 }
 
 function delegateAria(boundProperties = {}, options = {}) {
   const forwardedProperties = new Set(
-    (options.onlySpecified ? [] : vividElement.ariaMixinProperties).filter((p) => p !== "role").filter((p) => !(p in boundProperties))
+    (options.onlySpecified ? [] : vividElement.ariaMixinProperties).filter(
+      (p) => !(p in boundProperties)
+    )
   );
-  const disableAccessibilityMitigation = boundProperties.role instanceof Function;
-  return new vividElement.AttachedBehaviorHTMLDirective(
+  return new fastElement.AttachedBehaviorHTMLDirective(
     "vvd-delegate-aria",
     DelegateAriaBehavior,
     {
       boundProperties,
-      forwardedProperties,
-      disableAccessibilityMitigation
+      forwardedProperties
     }
   );
 }

package/{shared → unbundled}/delegates-aria.js

@@ -1,5 +1,6 @@
+import { Observable, DOM, AttachedBehaviorHTMLDirective } from '@microsoft/fast-element';
 import { A as AttributeBindingBehavior } from './attribute-binding-behaviour.js';
-import { O as Observable, b as ariaAttributeName, s as subscribeToAriaPropertyChanges, u as unsubscribeFromAriaPropertyChanges, D as DOM, c as ariaMixinProperties, A as AttachedBehaviorHTMLDirective } from './vivid-element.js';
+import { a as ariaAttributeName, s as subscribeToAriaPropertyChanges, u as unsubscribeFromAriaPropertyChanges, b as ariaMixinProperties } from './vivid-element.js';
 
 class DelegateAriaBehavior {
   constructor(target, params) {
@@ -7,7 +8,6 @@ class DelegateAriaBehavior {
     this.source = null;
     this.bindingBehaviours = [];
     this.onSourceAriaPropertyChanged = (source, property) => {
-      this.mitigateAccessibilityIssues(source);
       if (!this.forwardedProperties.has(property)) {
         return;
       }
@@ -15,7 +15,6 @@ class DelegateAriaBehavior {
     };
     this.boundProperties = params.boundProperties;
     this.forwardedProperties = params.forwardedProperties;
-    this.isMitigationDisabled = params.disableAccessibilityMitigation;
   }
   bind(source) {
     this.source = source;
@@ -25,7 +24,6 @@ class DelegateAriaBehavior {
       this.forwardedProperties,
       this.target
     );
-    this.mitigateAccessibilityIssues(source);
   }
   unbind() {
     if (this.source === null) {
@@ -68,38 +66,20 @@ class DelegateAriaBehavior {
   forwardPropertyToTarget(target, property, value) {
     DOM.setAttribute(target, ariaAttributeName(property), value);
   }
-  /**
-   * Sets role to presentation unless there are properties present that prohibit it.
-   * Using role="presentation" will cause non-global states or properties to be ignored.
-   * See: https://www.w3.org/TR/wai-aria-1.3/#conflict_resolution_presentation_none
-   */
-  mitigateAccessibilityIssues(source) {
-    if (this.isMitigationDisabled) {
-      return;
-    }
-    const hasProhibitedProperties = Boolean(
-      source.ariaLabel || source.ariaBrailleLabel || source.ariaChecked
-    );
-    if (hasProhibitedProperties) {
-      source.removeAttribute("role");
-    } else {
-      source.setAttribute("role", "presentation");
-    }
-  }
 }
 
 function delegateAria(boundProperties = {}, options = {}) {
   const forwardedProperties = new Set(
-    (options.onlySpecified ? [] : ariaMixinProperties).filter((p) => p !== "role").filter((p) => !(p in boundProperties))
+    (options.onlySpecified ? [] : ariaMixinProperties).filter(
+      (p) => !(p in boundProperties)
+    )
   );
-  const disableAccessibilityMitigation = boundProperties.role instanceof Function;
   return new AttachedBehaviorHTMLDirective(
     "vvd-delegate-aria",
     DelegateAriaBehavior,
     {
       boundProperties,
-      forwardedProperties,
-      disableAccessibilityMitigation
+      forwardedProperties
     }
   );
 }

package/{shared → unbundled}/divider.cjs

@@ -1,9 +1,10 @@
 'use strict';
 
+const fastElement = require('@microsoft/fast-element');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const enums = require('./enums.cjs');
 const vividElement = require('./vivid-element.cjs');
 const hostSemantics = require('./host-semantics.cjs');
-const aria = require('./aria.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -27,19 +28,24 @@ const DividerRole = {
 class Divider extends hostSemantics.HostSemantics(vividElement.VividElement) {
   constructor() {
     super(...arguments);
+    /**
+     * The role of the element. This property will be removed
+     *
+     * @deprecated This property will be deprecated, as divider shouldn't be announced by screen readers. Please update your usages.
+     * @public
+     * @remarks
+     * HTML Attribute: role
+     */
     this.role = DividerRole.separator;
-    this.orientation = aria.Orientation.horizontal;
+    this.orientation = fastWebUtilities.Orientation.horizontal;
     this.appearance = enums.Appearance.Ghost;
   }
 }
 __decorateClass([
-  vividElement.attr
-], Divider.prototype, "role");
-__decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Divider.prototype, "orientation");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Divider.prototype, "appearance");
 
 exports.Divider = Divider;

package/{shared → unbundled}/divider.js

@@ -1,7 +1,8 @@
+import { attr } from '@microsoft/fast-element';
+import { Orientation } from '@microsoft/fast-web-utilities';
 import { A as Appearance } from './enums.js';
-import { V as VividElement, a as attr } from './vivid-element.js';
+import { V as VividElement } from './vivid-element.js';
 import { H as HostSemantics } from './host-semantics.js';
-import { O as Orientation } from './aria.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -25,14 +26,19 @@ const DividerRole = {
 class Divider extends HostSemantics(VividElement) {
   constructor() {
     super(...arguments);
+    /**
+     * The role of the element. This property will be removed
+     *
+     * @deprecated This property will be deprecated, as divider shouldn't be announced by screen readers. Please update your usages.
+     * @public
+     * @remarks
+     * HTML Attribute: role
+     */
     this.role = DividerRole.separator;
     this.orientation = Orientation.horizontal;
     this.appearance = Appearance.Ghost;
   }
 }
-__decorateClass([
-  attr
-], Divider.prototype, "role");
 __decorateClass([
   attr
 ], Divider.prototype, "orientation");

package/{shared → unbundled}/form-associated.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-const vividElement = require('./vivid-element.cjs');
-const keyCodes = require('./key-codes.cjs');
+const fastElement = require('@microsoft/fast-element');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -94,7 +94,7 @@ const FormAssociated = (Base) => {
         );
         return Object.freeze(forLabels.concat(Array.from(parentLabels)));
       } else {
-        return vividElement.emptyArray;
+        return fastElement.emptyArray;
       }
     }
     /**
@@ -133,7 +133,7 @@ const FormAssociated = (Base) => {
       if (this.proxy instanceof HTMLElement) {
         this.proxy.disabled = this.disabled;
       }
-      vividElement.DOM.queueUpdate(() => this.classList.toggle("disabled", this.disabled));
+      fastElement.DOM.queueUpdate(() => this.classList.toggle("disabled", this.disabled));
     }
     /**
      * @internal
@@ -150,7 +150,7 @@ const FormAssociated = (Base) => {
       if (this.proxy instanceof HTMLElement) {
         this.proxy.required = this.required;
       }
-      vividElement.DOM.queueUpdate(() => this.classList.toggle("required", this.required));
+      fastElement.DOM.queueUpdate(() => this.classList.toggle("required", this.required));
       this.validate();
     }
     /**
@@ -321,7 +321,7 @@ const FormAssociated = (Base) => {
      */
     _keypressHandler(e) {
       switch (e.key) {
-        case keyCodes.keyEnter:
+        case fastWebUtilities.keyEnter:
           if (this.form instanceof HTMLFormElement) {
             const defaultButton = this.form.querySelector(
               "[type=submit]"
@@ -341,19 +341,19 @@ const FormAssociated = (Base) => {
     }
   }
   __decorateClass([
-    vividElement.attr({ attribute: "current-value" })
+    fastElement.attr({ attribute: "current-value" })
   ], FormAssociatedElement.prototype, "value");
   __decorateClass([
-    vividElement.attr({ mode: "fromView", attribute: "value" })
+    fastElement.attr({ mode: "fromView", attribute: "value" })
   ], FormAssociatedElement.prototype, "initialValue");
   __decorateClass([
-    vividElement.attr({ mode: "boolean" })
+    fastElement.attr({ mode: "boolean" })
   ], FormAssociatedElement.prototype, "disabled");
   __decorateClass([
-    vividElement.attr
+    fastElement.attr
   ], FormAssociatedElement.prototype, "name");
   __decorateClass([
-    vividElement.attr({ mode: "boolean" })
+    fastElement.attr({ mode: "boolean" })
   ], FormAssociatedElement.prototype, "required");
   return FormAssociatedElement;
 };
@@ -448,13 +448,13 @@ const CheckableFormAssociated = (Base) => {
     }
   }
   __decorateClass([
-    vividElement.attr({
+    fastElement.attr({
       attribute: "checked",
       mode: "boolean"
     })
   ], CheckableFormAssociatedElement.prototype, "defaultChecked");
   __decorateClass([
-    vividElement.attr({ attribute: "current-checked", converter: currentCheckedConverter })
+    fastElement.attr({ attribute: "current-checked", converter: currentCheckedConverter })
   ], CheckableFormAssociatedElement.prototype, "checked");
   return CheckableFormAssociatedElement;
 };

package/{shared → unbundled}/form-associated.js

@@ -1,5 +1,5 @@
-import { a as attr, e as emptyArray, D as DOM } from './vivid-element.js';
-import { k as keyEnter } from './key-codes.js';
+import { attr, emptyArray, DOM } from '@microsoft/fast-element';
+import { keyEnter } from '@microsoft/fast-web-utilities';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/{shared → unbundled}/form-element.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const vividElement = require('./vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -73,10 +73,10 @@ const FormElement = (Base) => {
     }
   }
   __decorateClass([
-    vividElement.attr
+    fastElement.attr
   ], FormElementElement.prototype, "label");
   __decorateClass([
-    vividElement.observable
+    fastElement.observable
   ], FormElementElement.prototype, "errorValidationMessage");
   return FormElementElement;
 };

package/{shared → unbundled}/form-element.js

@@ -1,4 +1,4 @@
-import { a as attr, o as observable } from './vivid-element.js';
+import { attr, observable } from '@microsoft/fast-element';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/{shared → unbundled}/host-semantics.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
+const fastElement = require('@microsoft/fast-element');
 const vividElement = require('./vivid-element.cjs');
 const attributeBindingBehaviour = require('./attribute-binding-behaviour.cjs');
 
@@ -42,7 +43,7 @@ function applyHostSemantics(boundProperties = {}) {
   const forwardedProperties = new Set(
     vividElement.ariaMixinProperties.filter((p) => !(p in boundProperties))
   );
-  return new vividElement.AttachedBehaviorHTMLDirective(
+  return new fastElement.AttachedBehaviorHTMLDirective(
     "vvd-host-semantics",
     HostSemanticsBehavior,
     {

package/{shared → unbundled}/host-semantics.js

@@ -1,4 +1,5 @@
-import { b as ariaAttributeName, c as ariaMixinProperties, A as AttachedBehaviorHTMLDirective } from './vivid-element.js';
+import { AttachedBehaviorHTMLDirective } from '@microsoft/fast-element';
+import { a as ariaAttributeName, b as ariaMixinProperties } from './vivid-element.js';
 import { A as AttributeBindingBehavior } from './attribute-binding-behaviour.js';
 
 class HostSemanticsBehavior {

package/unbundled/key-codes.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+/**
+ * String values for use with KeyboardEvent.key
+ */
+const keyArrowLeft = "ArrowLeft";
+const keyArrowRight = "ArrowRight";
+
+exports.keyArrowLeft = keyArrowLeft;
+exports.keyArrowRight = keyArrowRight;

package/unbundled/key-codes.js

@@ -0,0 +1,7 @@
+/**
+ * String values for use with KeyboardEvent.key
+ */
+const keyArrowLeft = "ArrowLeft";
+const keyArrowRight = "ArrowRight";
+
+export { keyArrowLeft as a, keyArrowRight as k };

package/{shared → unbundled}/linkable.cjs

@@ -1,8 +1,7 @@
 'use strict';
 
+const fastElement = require('@microsoft/fast-element');
 const delegatesAria = require('./delegates-aria.cjs');
-const vividElement = require('./vivid-element.cjs');
-const ref = require('./ref.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -22,7 +21,7 @@ const Linkable = (Base) => {
        * @internal
        */
       this._renderLinkElement = (content, cssClass, boundAriaProperties) => {
-        return vividElement.html`<a
+        return fastElement.html`<a
 				class="${cssClass}"
 				download="${(x) => x.download}"
 				href="${(x) => x.href}"
@@ -32,7 +31,7 @@ const Linkable = (Base) => {
 				rel="${(x) => x.rel}"
 				target="${(x) => x.target}"
 				type="${(x) => x.type}"
-				${ref.ref("control")}
+				${fastElement.ref("control")}
 				${delegatesAria.delegateAria(boundAriaProperties)}
 			>
 				${content}
@@ -41,28 +40,28 @@ const Linkable = (Base) => {
     }
   }
   __decorateClass([
-    vividElement.attr
+    fastElement.attr
   ], LinkableElement.prototype, "download");
   __decorateClass([
-    vividElement.attr
+    fastElement.attr
   ], LinkableElement.prototype, "href");
   __decorateClass([
-    vividElement.attr
+    fastElement.attr
   ], LinkableElement.prototype, "hreflang");
   __decorateClass([
-    vividElement.attr
+    fastElement.attr
   ], LinkableElement.prototype, "ping");
   __decorateClass([
-    vividElement.attr
+    fastElement.attr
   ], LinkableElement.prototype, "referrerpolicy");
   __decorateClass([
-    vividElement.attr
+    fastElement.attr
   ], LinkableElement.prototype, "rel");
   __decorateClass([
-    vividElement.attr
+    fastElement.attr
   ], LinkableElement.prototype, "target");
   __decorateClass([
-    vividElement.attr
+    fastElement.attr
   ], LinkableElement.prototype, "type");
   return LinkableElement;
 };

package/{shared → unbundled}/linkable.js

@@ -1,6 +1,5 @@
+import { attr, ref, html } from '@microsoft/fast-element';
 import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
-import { a as attr, h as html } from './vivid-element.js';
-import { r as ref } from './ref.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/{shared → unbundled}/listbox.cjs

@@ -1,25 +1,9 @@
 'use strict';
 
+const fastElement = require('@microsoft/fast-element');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const option = require('./option.cjs');
 const vividElement = require('./vivid-element.cjs');
-const keyCodes = require('./key-codes.cjs');
-const strings = require('./strings.cjs');
-
-/**
- * Returns the index of the last element in the array where predicate is true, and -1 otherwise.
- *
- * @param array - the array to test
- * @param predicate - find calls predicate once for each element of the array, in descending order, until it finds one where predicate returns true. If such an element is found, findLastIndex immediately returns that element index. Otherwise, findIndex returns -1.
- */
-function findLastIndex(array, predicate) {
-    let k = array.length;
-    while (k--) {
-        if (predicate(array[k], k, array)) {
-            return k;
-        }
-    }
-    return -1;
-}
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -93,12 +77,12 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
    * @public
    */
   get options() {
-    vividElement.Observable.track(this, "options");
+    fastElement.Observable.track(this, "options");
     return this._options;
   }
   set options(value) {
     this._options = value;
-    vividElement.Observable.notify(this, "options");
+    fastElement.Observable.notify(this, "options");
   }
   static {
     /**
@@ -124,7 +108,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
    */
   clickHandler(e) {
     const captured = e.target.closest(
-      `option,[role=option]`
+      `option,[role=option],[data-vvd-component=option]`
     );
     if (captured && !captured.disabled) {
       this.selectedIndex = this.options.indexOf(captured);
@@ -253,40 +237,40 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
     this.shouldSkipFocus = false;
     const key = e.key;
     switch (key) {
-      case keyCodes.keyHome: {
+      case fastWebUtilities.keyHome: {
         if (!e.shiftKey) {
           e.preventDefault();
           this.selectFirstOption();
         }
         break;
       }
-      case keyCodes.keyArrowDown: {
+      case fastWebUtilities.keyArrowDown: {
         if (!e.shiftKey) {
           e.preventDefault();
           this.selectNextOption();
         }
         break;
       }
-      case keyCodes.keyArrowUp: {
+      case fastWebUtilities.keyArrowUp: {
         if (!e.shiftKey) {
           e.preventDefault();
           this.selectPreviousOption();
         }
         break;
       }
-      case keyCodes.keyEnd: {
+      case fastWebUtilities.keyEnd: {
         e.preventDefault();
         this.selectLastOption();
         break;
       }
-      case keyCodes.keyTab: {
+      case fastWebUtilities.keyTab: {
         this.focusAndScrollOptionIntoView();
         return true;
       }
-      case keyCodes.keyEnter:
-      case keyCodes.keyEscape:
+      case fastWebUtilities.keyEnter:
+      case fastWebUtilities.keyEscape:
         return true;
-      case keyCodes.keySpace:
+      case fastWebUtilities.keySpace:
         if (this.typeaheadExpired) {
           return true;
         }
@@ -337,7 +321,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
   selectedOptionsChanged(_, next) {
     const filteredNext = next.filter(_Listbox.slottedOptionFilter);
     this.options.forEach((o) => {
-      const notifier = vividElement.Observable.getNotifier(o);
+      const notifier = fastElement.Observable.getNotifier(o);
       notifier.unsubscribe(this, "selected");
       o.selected = filteredNext.includes(o);
       notifier.subscribe(this, "selected");
@@ -360,7 +344,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
    */
   selectLastOption() {
     if (!this.disabled) {
-      this.selectedIndex = findLastIndex(this.options, (o) => !o.disabled);
+      this.selectedIndex = fastWebUtilities.findLastIndex(this.options, (o) => !o.disabled);
     }
   }
   /**
@@ -418,7 +402,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
     const setSize = `${this.options.length}`;
     this.options.forEach((option, index) => {
       if (!option.id) {
-        option.id = strings.uniqueId("option-");
+        option.id = fastWebUtilities.uniqueId("option-");
       }
       option.ariaPosInSet = `${index + 1}`;
       option.ariaSetSize = setSize;
@@ -448,22 +432,22 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
 };
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], _Listbox.prototype, "disabled");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], _Listbox.prototype, "selectedIndex");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], _Listbox.prototype, "selectedOptions");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], _Listbox.prototype, "slottedOptions");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], _Listbox.prototype, "typeaheadBuffer");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], _Listbox.prototype, "_activeDescendant");
 let Listbox = _Listbox;
 

package/{shared → unbundled}/listbox.js

@@ -1,23 +1,7 @@
+import { Observable, attr, observable } from '@microsoft/fast-element';
+import { keySpace, keyEscape, keyEnter, keyTab, keyEnd, keyArrowUp, keyArrowDown, keyHome, findLastIndex, uniqueId } from '@microsoft/fast-web-utilities';
 import { i as isListboxOption } from './option.js';
-import { V as VividElement, O as Observable, a as attr, o as observable } from './vivid-element.js';
-import { a as keySpace, b as keyEscape, k as keyEnter, c as keyTab, d as keyEnd, e as keyArrowUp, f as keyArrowDown, g as keyHome } from './key-codes.js';
-import { u as uniqueId } from './strings.js';
-
-/**
- * Returns the index of the last element in the array where predicate is true, and -1 otherwise.
- *
- * @param array - the array to test
- * @param predicate - find calls predicate once for each element of the array, in descending order, until it finds one where predicate returns true. If such an element is found, findLastIndex immediately returns that element index. Otherwise, findIndex returns -1.
- */
-function findLastIndex(array, predicate) {
-    let k = array.length;
-    while (k--) {
-        if (predicate(array[k], k, array)) {
-            return k;
-        }
-    }
-    return -1;
-}
+import { V as VividElement } from './vivid-element.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -122,7 +106,7 @@ const _Listbox = class _Listbox extends VividElement {
    */
   clickHandler(e) {
     const captured = e.target.closest(
-      `option,[role=option]`
+      `option,[role=option],[data-vvd-component=option]`
     );
     if (captured && !captured.disabled) {
       this.selectedIndex = this.options.indexOf(captured);