@vonage/vivid 5.3.0 → 5.4.0

package/select/definition.cjs

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const popup_definition = require('../unbundled/definition4.cjs');
+const popup_definition = require('../unbundled/definition5.cjs');
 const icon_definition = require('../icon/definition.cjs');
-const option_definition = require('../option/definition.cjs');
+const option_definition = require('../unbundled/definition3.cjs');
 const vividElement = require('../unbundled/vivid-element.cjs');
 const mixins = require('../unbundled/mixins.cjs');
 const fastElement = require('@microsoft/fast-element');
@@ -17,7 +17,6 @@ const withErrorText = require('../unbundled/with-error-text.cjs');
 const withSuccessText = require('../unbundled/with-success-text.cjs');
 const formElement = require('../unbundled/form-element.cjs');
 const affix = require('../unbundled/affix.cjs');
-const option = require('../unbundled/option.cjs');
 const button_definition = require('../unbundled/definition.cjs');
 const index = require('../unbundled/index.cjs');
 
@@ -66,7 +65,6 @@ class Select extends mixins.WithLightDOMFeedback(
     this.listboxId = fastWebUtilities.uniqueId("listbox-");
     this.maxHeight = 0;
     this.fixedDropdown = false;
-    this.placeholderOption = null;
     this._feedbackWrapper = null;
   }
   /**
@@ -341,19 +339,13 @@ class Select extends mixins.WithLightDOMFeedback(
    * @internal
    */
   valueChanged(prev, next) {
-    let nextValue = next;
-    if (this.length) {
-      const selectedIndex = this._options.findIndex((el) => el.value === next);
-      const prevSelectedValue = this._options[this.selectedIndex]?.value ?? null;
-      const nextSelectedValue = this._options[selectedIndex]?.value ?? null;
-      if (selectedIndex === -1 || prevSelectedValue !== nextSelectedValue) {
-        nextValue = "";
-        this.selectedIndex = selectedIndex;
-      }
-      nextValue = this.firstSelectedOption?.value ?? nextValue;
+    const nextSelectedIndex = this.options.findIndex((el) => el.value === next);
+    const validNextSelectedIndex = this._validSelectedIndex(nextSelectedIndex);
+    const nextValue = this.options[validNextSelectedIndex]?.value ?? "";
+    if (this.selectedIndex !== validNextSelectedIndex) {
+      this.selectedIndex = validNextSelectedIndex;
     }
     if (next !== nextValue) {
-      this.value = nextValue;
       return;
     }
     super.valueChanged(prev, next);
@@ -643,21 +635,22 @@ class Select extends mixins.WithLightDOMFeedback(
     fastElement.Observable.track(this, "displayValue");
     return this.firstSelectedOption?.getAttribute("label") ?? this.firstSelectedOption?.text ?? this.placeholder ?? "";
   }
-  setDefaultSelectedOption() {
-    const options = Array.from(this.children).filter(
-      listbox.Listbox.slottedOptionFilter
-    );
-    const selectedIndex = options.findIndex(
-      (el) => el.hasAttribute("selected") || el.selected || el.value === this.value
+  _newDefaultSelectedIndex(prev, next, currentSelectIndex) {
+    const defaultSelectedIndex = super._newDefaultSelectedIndex(
+      prev,
+      next,
+      currentSelectIndex
     );
-    if (selectedIndex === -1 && !this.placeholderOption) {
-      this.selectedIndex = 0;
-      return;
-    }
-    if (selectedIndex !== -1 || this.placeholder !== "") {
-      this.selectedIndex = selectedIndex;
-      return;
+    if (defaultSelectedIndex === null && currentSelectIndex === -1 && !this.placeholder) {
+      const firstSelectableIndex = this.getNextSelectableIndex(0);
+      if (firstSelectableIndex !== -1) {
+        return firstSelectableIndex;
+      }
     }
+    return defaultSelectedIndex;
+  }
+  _isDefaultSelected(option) {
+    return super._isDefaultSelected(option) || option.value === this.initialValue;
   }
   /*
    * @internal
@@ -686,13 +679,7 @@ class Select extends mixins.WithLightDOMFeedback(
   }
   formResetCallback() {
     this.setProxyOptions();
-    super.setDefaultSelectedOption();
-    if (this.selectedIndex === -1) {
-      this.selectedIndex = 0;
-    }
-    if (this.placeholder) {
-      this.selectedIndex = -1;
-    }
+    this.selectedIndex = this._newDefaultSelectedIndex([], this.options, -1) ?? -1;
   }
 }
 __decorateClass([
@@ -732,9 +719,6 @@ __decorateClass([
 __decorateClass([
   fastElement.attr
 ], Select.prototype, "placeholder", 2);
-__decorateClass([
-  fastElement.observable
-], Select.prototype, "placeholderOption", 2);
 __decorateClass([
   fastElement.observable
 ], Select.prototype, "_feedbackWrapper", 2);
@@ -772,10 +756,9 @@ function renderLabel() {
 	</label>`;
 }
 function renderPlaceholder(context) {
-  const optionTag = context.tagFor(option.ListboxOption);
+  const optionTag = context.tagFor(option_definition.ListboxOption);
   return fastElement.html`
-		<${optionTag} ${fastElement.ref("placeholderOption")}
-			text="${(x) => x.placeholder}" hidden disabled>
+		<${optionTag} text="${(x) => x.placeholder}" hidden disabled>
 		</${optionTag}>`;
 }
 function selectValue(context) {

package/select/definition.js

@@ -1,6 +1,6 @@
-import { P as Popup, p as popupDefinition } from '../unbundled/definition4.js';
+import { P as Popup, p as popupDefinition } from '../unbundled/definition5.js';
 import { iconDefinition } from '../icon/definition.js';
-import { listboxOptionDefinition } from '../option/definition.js';
+import { L as ListboxOption, l as listboxOptionDefinition } from '../unbundled/definition3.js';
 import { d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { W as WithLightDOMFeedback, f as feedbackMessageDefinition } from '../unbundled/mixins.js';
 import { Updates, Observable, observable, attr, volatile, ref, html, when, slotted } from '@microsoft/fast-element';
@@ -12,8 +12,7 @@ import { W as WithContextualHelp } from '../unbundled/with-contextual-help.js';
 import { W as WithErrorText } from '../unbundled/with-error-text.js';
 import { W as WithSuccessText } from '../unbundled/with-success-text.js';
 import { F as FormElement } from '../unbundled/form-element.js';
-import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
-import { L as ListboxOption } from '../unbundled/option.js';
+import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
 import { c as chevronTemplateFactory } from '../unbundled/definition.js';
 import { h as handleEscapeKeyAndStopPropogation } from '../unbundled/index.js';
 
@@ -62,7 +61,6 @@ class Select extends WithLightDOMFeedback(
     this.listboxId = uniqueId("listbox-");
     this.maxHeight = 0;
     this.fixedDropdown = false;
-    this.placeholderOption = null;
     this._feedbackWrapper = null;
   }
   /**
@@ -337,19 +335,13 @@ class Select extends WithLightDOMFeedback(
    * @internal
    */
   valueChanged(prev, next) {
-    let nextValue = next;
-    if (this.length) {
-      const selectedIndex = this._options.findIndex((el) => el.value === next);
-      const prevSelectedValue = this._options[this.selectedIndex]?.value ?? null;
-      const nextSelectedValue = this._options[selectedIndex]?.value ?? null;
-      if (selectedIndex === -1 || prevSelectedValue !== nextSelectedValue) {
-        nextValue = "";
-        this.selectedIndex = selectedIndex;
-      }
-      nextValue = this.firstSelectedOption?.value ?? nextValue;
+    const nextSelectedIndex = this.options.findIndex((el) => el.value === next);
+    const validNextSelectedIndex = this._validSelectedIndex(nextSelectedIndex);
+    const nextValue = this.options[validNextSelectedIndex]?.value ?? "";
+    if (this.selectedIndex !== validNextSelectedIndex) {
+      this.selectedIndex = validNextSelectedIndex;
     }
     if (next !== nextValue) {
-      this.value = nextValue;
       return;
     }
     super.valueChanged(prev, next);
@@ -639,21 +631,22 @@ class Select extends WithLightDOMFeedback(
     Observable.track(this, "displayValue");
     return this.firstSelectedOption?.getAttribute("label") ?? this.firstSelectedOption?.text ?? this.placeholder ?? "";
   }
-  setDefaultSelectedOption() {
-    const options = Array.from(this.children).filter(
-      Listbox.slottedOptionFilter
-    );
-    const selectedIndex = options.findIndex(
-      (el) => el.hasAttribute("selected") || el.selected || el.value === this.value
+  _newDefaultSelectedIndex(prev, next, currentSelectIndex) {
+    const defaultSelectedIndex = super._newDefaultSelectedIndex(
+      prev,
+      next,
+      currentSelectIndex
     );
-    if (selectedIndex === -1 && !this.placeholderOption) {
-      this.selectedIndex = 0;
-      return;
-    }
-    if (selectedIndex !== -1 || this.placeholder !== "") {
-      this.selectedIndex = selectedIndex;
-      return;
+    if (defaultSelectedIndex === null && currentSelectIndex === -1 && !this.placeholder) {
+      const firstSelectableIndex = this.getNextSelectableIndex(0);
+      if (firstSelectableIndex !== -1) {
+        return firstSelectableIndex;
+      }
     }
+    return defaultSelectedIndex;
+  }
+  _isDefaultSelected(option) {
+    return super._isDefaultSelected(option) || option.value === this.initialValue;
   }
   /*
    * @internal
@@ -682,13 +675,7 @@ class Select extends WithLightDOMFeedback(
   }
   formResetCallback() {
     this.setProxyOptions();
-    super.setDefaultSelectedOption();
-    if (this.selectedIndex === -1) {
-      this.selectedIndex = 0;
-    }
-    if (this.placeholder) {
-      this.selectedIndex = -1;
-    }
+    this.selectedIndex = this._newDefaultSelectedIndex([], this.options, -1) ?? -1;
   }
 }
 __decorateClass([
@@ -728,9 +715,6 @@ __decorateClass([
 __decorateClass([
   attr
 ], Select.prototype, "placeholder", 2);
-__decorateClass([
-  observable
-], Select.prototype, "placeholderOption", 2);
 __decorateClass([
   observable
 ], Select.prototype, "_feedbackWrapper", 2);
@@ -770,8 +754,7 @@ function renderLabel() {
 function renderPlaceholder(context) {
   const optionTag = context.tagFor(ListboxOption);
   return html`
-		<${optionTag} ${ref("placeholderOption")}
-			text="${(x) => x.placeholder}" hidden disabled>
+		<${optionTag} text="${(x) => x.placeholder}" hidden disabled>
 		</${optionTag}>`;
 }
 function selectValue(context) {

package/selectable-box/definition.cjs

@@ -10,7 +10,7 @@ const delegatesAria = require('../unbundled/delegates-aria.cjs');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const enums = require('../unbundled/enums.cjs');
 
-const styles = ":host{display:flex}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-selectable-box-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all: var(--vvd-selectable-box-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--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))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.selected{background-color:var(--selectable-box-checked-bg, var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing, 16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing, 16px)}";
+const styles = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-selectable-box-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all: var(--vvd-selectable-box-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--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))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.selected{background-color:var(--selectable-box-checked-bg, var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing, 16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing, 16px)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/selectable-box/definition.js

@@ -6,7 +6,7 @@ import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-ar
 import { classNames } from '@microsoft/fast-web-utilities';
 import { C as Connotation } from '../unbundled/enums.js';
 
-const styles = ":host{display:flex}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-selectable-box-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all: var(--vvd-selectable-box-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--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))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.selected{background-color:var(--selectable-box-checked-bg, var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing, 16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing, 16px)}";
+const styles = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-selectable-box-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all: var(--vvd-selectable-box-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--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))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.selected{background-color:var(--selectable-box-checked-bg, var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing, 16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing, 16px)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/selectable-box/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const p=require("../bundled/definition8.cjs"),v=require("../bundled/definition17.cjs"),t=require("../bundled/vivid-element.cjs"),i=require("../bundled/delegates-aria.cjs"),r=require("../bundled/enums.cjs"),f=require("../bundled/when.cjs"),u=require("../bundled/class-names.cjs"),x=":host{display:flex}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-selectable-box-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all: var(--vvd-selectable-box-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--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))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.selected{background-color:var(--selectable-box-checked-bg, var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing, 16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing, 16px)}";var _=Object.defineProperty,c=(a,o,e,s)=>{for(var l=void 0,d=a.length-1,b;d>=0;d--)(b=a[d])&&(l=b(o,e,l)||l);return l&&_(o,e,l),l};class n extends i.DelegatesAria(t.VividElement){constructor(){super(...arguments),this.checked=!1,this.clickableBox=!1,this.controlPlacement="end-stacked",this.tight=!1}_handleCheckedChange(){this.controlType==="radio"&&this.checked||(this.checked=!this.checked,this.clickableBox&&this.$emit("change"))}_handleKeydown(o){return(o.code==="Space"||o.code==="Enter")&&this.clickableBox?this._handleCheckedChange():!0}}c([t.attr({mode:"boolean"})],n.prototype,"checked");c([t.attr({attribute:"clickable-box",mode:"boolean"})],n.prototype,"clickableBox");c([t.attr],n.prototype,"connotation");c([t.attr({attribute:"control-type"})],n.prototype,"controlType");c([t.attr({attribute:"control-placement",mode:"fromView"})],n.prototype,"controlPlacement");c([t.attr({mode:"boolean"})],n.prototype,"tight");const k=({connotation:a,tight:o,checked:e,clickableBox:s,controlPlacement:l})=>u.classNames("base",[`connotation-${a}`,!!a],["tight",o],["selected",e],["clickable",s],["readonly",!s],[`control-placement-${l}`,!!l]);function h(a){a.clickableBox||a._handleCheckedChange()}function m(a){const o=a.tagFor(p.Checkbox);return t.html`${f.when(e=>e.controlType!=="radio",t.html`
+"use strict";const p=require("../bundled/definition8.cjs"),v=require("../bundled/definition17.cjs"),t=require("../bundled/vivid-element.cjs"),i=require("../bundled/delegates-aria.cjs"),r=require("../bundled/enums.cjs"),f=require("../bundled/when.cjs"),u=require("../bundled/class-names.cjs"),x=":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-selectable-box-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all: var(--vvd-selectable-box-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--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))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.selected{background-color:var(--selectable-box-checked-bg, var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing, 16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing, 16px)}";var _=Object.defineProperty,c=(a,o,e,s)=>{for(var l=void 0,d=a.length-1,b;d>=0;d--)(b=a[d])&&(l=b(o,e,l)||l);return l&&_(o,e,l),l};class n extends i.DelegatesAria(t.VividElement){constructor(){super(...arguments),this.checked=!1,this.clickableBox=!1,this.controlPlacement="end-stacked",this.tight=!1}_handleCheckedChange(){this.controlType==="radio"&&this.checked||(this.checked=!this.checked,this.clickableBox&&this.$emit("change"))}_handleKeydown(o){return(o.code==="Space"||o.code==="Enter")&&this.clickableBox?this._handleCheckedChange():!0}}c([t.attr({mode:"boolean"})],n.prototype,"checked");c([t.attr({attribute:"clickable-box",mode:"boolean"})],n.prototype,"clickableBox");c([t.attr],n.prototype,"connotation");c([t.attr({attribute:"control-type"})],n.prototype,"controlType");c([t.attr({attribute:"control-placement",mode:"fromView"})],n.prototype,"controlPlacement");c([t.attr({mode:"boolean"})],n.prototype,"tight");const k=({connotation:a,tight:o,checked:e,clickableBox:s,controlPlacement:l})=>u.classNames("base",[`connotation-${a}`,!!a],["tight",o],["selected",e],["clickable",s],["readonly",!s],[`control-placement-${l}`,!!l]);function h(a){a.clickableBox||a._handleCheckedChange()}function m(a){const o=a.tagFor(p.Checkbox);return t.html`${f.when(e=>e.controlType!=="radio",t.html`
 		<${o}
 			${i.delegateAria({ariaLabel:e=>!e.clickableBox&&e.ariaLabel?e.ariaLabel:null},{onlySpecified:!0})}
 			@change="${e=>h(e)}"

package/selectable-box/index.js

@@ -5,7 +5,7 @@ import { D as $, d as p } from "../bundled/delegates-aria.js";
 import { C as i } from "../bundled/enums.js";
 import { w as v } from "../bundled/when.js";
 import { c as y } from "../bundled/class-names.js";
-const C = ":host{display:flex}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-selectable-box-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all: var(--vvd-selectable-box-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--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))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.selected{background-color:var(--selectable-box-checked-bg, var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing, 16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing, 16px)}";
+const C = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-selectable-box-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all: var(--vvd-selectable-box-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--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))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.selected{background-color:var(--selectable-box-checked-bg, var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing, 16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing, 16px)}";
 var B = Object.defineProperty, r = (a, e, o, s) => {
   for (var t = void 0, d = a.length - 1, b; d >= 0; d--)
     (b = a[d]) && (t = b(e, o, t) || t);

package/shared/aria/aria-mixin.d.ts

@@ -1,7 +1,7 @@
 import { type FASTElement } from '@microsoft/fast-element';
 import type { Constructor, MixinType } from '../utils/mixins';
 export declare const ariaMixinProperties: readonly ["role", "ariaAtomic", "ariaAutoComplete", "ariaBusy", "ariaChecked", "ariaColCount", "ariaColIndex", "ariaColIndexText", "ariaColSpan", "ariaCurrent", "ariaDescription", "ariaDisabled", "ariaExpanded", "ariaHasPopup", "ariaHidden", "ariaInvalid", "ariaKeyShortcuts", "ariaLabel", "ariaLevel", "ariaLive", "ariaModal", "ariaMultiLine", "ariaMultiSelectable", "ariaOrientation", "ariaPlaceholder", "ariaPosInSet", "ariaPressed", "ariaReadOnly", "ariaRequired", "ariaRoleDescription", "ariaRowCount", "ariaRowIndex", "ariaRowIndexText", "ariaRowSpan", "ariaSelected", "ariaSetSize", "ariaSort", "ariaValueMax", "ariaValueMin", "ariaValueNow", "ariaValueText", "ariaRelevant"];
-export type AriaPropertyName = typeof ariaMixinProperties[number];
+export type AriaPropertyName = (typeof ariaMixinProperties)[number];
 export declare const ariaAttributeName: (ariaPropertyName: AriaPropertyName) => string;
 export type VividAriaBehaviour = 'default' | 'delegate' | 'host';
 export declare const AriaMixin: <T extends Constructor<FASTElement & HTMLElement>>(Base: T) => {

package/shared/foundation/listbox/listbox.d.ts

@@ -8,6 +8,10 @@ export declare class Listbox extends VividElement {
     selectedIndex: number;
     selectedOptions: ListboxOption[];
     static slottedOptionFilter: (n: HTMLElement) => boolean;
+    protected getNextSelectableIndex(fromIndex: number): number;
+    protected _validSelectedIndex(index: number): number;
     selectFirstOption(): void;
+    protected _newDefaultSelectedIndex(prev: ListboxOption[], next: ListboxOption[], currentSelectedIndex: number): number | null;
+    protected _isDefaultSelected(option: ListboxOption): boolean;
     protected setSelectedOptions(): void;
 }

package/simple-color-picker/definition.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const vividElement = require('../unbundled/vivid-element.cjs');
-const popup_definition = require('../unbundled/definition4.cjs');
+const popup_definition = require('../unbundled/definition5.cjs');
 const icon_definition = require('../icon/definition.cjs');
 const fastElement = require('@microsoft/fast-element');
 const anchored = require('../unbundled/anchored.cjs');

package/simple-color-picker/definition.js

@@ -1,5 +1,5 @@
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { P as Popup, p as popupDefinition } from '../unbundled/definition4.js';
+import { P as Popup, p as popupDefinition } from '../unbundled/definition5.js';
 import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
 import { Updates, attr, nullableNumberConverter, repeat, html } from '@microsoft/fast-element';
 import { A as Anchored, a as anchorSlotTemplateFactory } from '../unbundled/anchored.js';

package/slider/definition.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const popup_definition = require('../unbundled/definition4.cjs');
+const popup_definition = require('../unbundled/definition5.cjs');
 const vividElement = require('../unbundled/vivid-element.cjs');
 const fastElement = require('@microsoft/fast-element');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');

package/slider/definition.js

@@ -1,4 +1,4 @@
-import { p as popupDefinition } from '../unbundled/definition4.js';
+import { p as popupDefinition } from '../unbundled/definition5.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { attr, observable, nullableNumberConverter, volatile } from '@microsoft/fast-element';
 import { Direction, Orientation, keyHome, keyEnd, keyArrowDown, keyArrowUp, limit } from '@microsoft/fast-web-utilities';

package/split-button/definition.js

@@ -1,7 +1,7 @@
 import { iconDefinition } from '../icon/definition.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { attr, html, ref } from '@microsoft/fast-element';
-import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
+import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
 import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
 import { L as Localized } from '../unbundled/localized.js';
 import { classNames } from '@microsoft/fast-web-utilities';

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 16 Oct 2025 10:49:52 GMT
+ * Generated on Tue, 28 Oct 2025 11:07:10 GMT
  */
 .vvd-root {
   background-color: var(--vvd-color-canvas);

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 16 Oct 2025 10:49:52 GMT
+ * Generated on Tue, 28 Oct 2025 11:07:10 GMT
  */
 .vvd-root {
   background-color: var(--vvd-color-canvas);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 16 Oct 2025 10:49:52 GMT
+ * Generated on Tue, 28 Oct 2025 11:07:10 GMT
  */
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Thu, 16 Oct 2025 10:49:52 GMT
+ * Generated on Tue, 28 Oct 2025 11:07:10 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 16 Oct 2025 10:49:52 GMT
+ * Generated on Tue, 28 Oct 2025 11:07:10 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 16 Oct 2025 10:49:52 GMT
+ * Generated on Tue, 28 Oct 2025 11:07:10 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 16 Oct 2025 10:49:52 GMT
+ * Generated on Tue, 28 Oct 2025 11:07:10 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Thu, 16 Oct 2025 10:49:52 GMT
+ * Generated on Tue, 28 Oct 2025 11:07:10 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 16 Oct 2025 10:49:52 GMT
+ * Generated on Tue, 28 Oct 2025 11:07:10 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 16 Oct 2025 10:49:52 GMT
+ * Generated on Tue, 28 Oct 2025 11:07:10 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 16 Oct 2025 10:49:52 GMT
+ * Generated on Tue, 28 Oct 2025 11:07:10 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/vivid-2-compat.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 16 Oct 2025 10:49:52 GMT
+ * Generated on Tue, 28 Oct 2025 11:07:10 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {

package/tab/definition.js

@@ -1,7 +1,7 @@
 import { iconDefinition } from '../icon/definition.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { attr, observable, html } from '@microsoft/fast-element';
-import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
+import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
 import { H as HostSemantics, a as applyHostSemantics } from '../unbundled/host-semantics.js';
 import { L as Localized } from '../unbundled/localized.js';
 import { classNames } from '@microsoft/fast-web-utilities';

package/tag/definition.js

@@ -1,7 +1,7 @@
 import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { attr, when, html } from '@microsoft/fast-element';
-import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
+import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
 import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
 import { L as Localized } from '../unbundled/localized.js';
 import { classNames } from '@microsoft/fast-web-utilities';

package/text-field/definition.js

@@ -11,7 +11,7 @@ import { W as WithContextualHelp } from '../unbundled/with-contextual-help.js';
 import { W as WithErrorText } from '../unbundled/with-error-text.js';
 import { W as WithSuccessText } from '../unbundled/with-success-text.js';
 import { F as FormElement } from '../unbundled/form-element.js';
-import { b as AffixIcon, a as affixIconTemplateFactory } from '../unbundled/affix.js';
+import { A as AffixIcon, a as affixIconTemplateFactory } from '../unbundled/affix.js';
 import { s as styles } from '../unbundled/text-field.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 

package/time-picker/definition.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const textField_definition = require('../text-field/definition.cjs');
-const popup_definition = require('../unbundled/definition4.cjs');
+const popup_definition = require('../unbundled/definition5.cjs');
 const button_definition = require('../unbundled/definition.cjs');
 const vividElement = require('../unbundled/vivid-element.cjs');
 const pickerField_template = require('../unbundled/picker-field.template.cjs');

package/time-picker/definition.js

@@ -1,5 +1,5 @@
 import { textFieldDefinition } from '../text-field/definition.js';
-import { p as popupDefinition } from '../unbundled/definition4.js';
+import { p as popupDefinition } from '../unbundled/definition5.js';
 import { b as buttonDefinition } from '../unbundled/definition.js';
 import { d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { P as PickerFieldTemplate, p as pickerFieldStyles } from '../unbundled/picker-field.template.js';

package/toggletip/definition.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const popup_definition = require('../unbundled/definition4.cjs');
+const popup_definition = require('../unbundled/definition5.cjs');
 const vividElement = require('../unbundled/vivid-element.cjs');
 const fastElement = require('@microsoft/fast-element');
 const anchored = require('../unbundled/anchored.cjs');

package/toggletip/definition.js

@@ -1,4 +1,4 @@
-import { P as Popup, p as popupDefinition } from '../unbundled/definition4.js';
+import { P as Popup, p as popupDefinition } from '../unbundled/definition5.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { Updates, attr, when, html } from '@microsoft/fast-element';
 import { A as Anchored, a as anchorSlotTemplateFactory } from '../unbundled/anchored.js';

package/tooltip/definition.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const popup_definition = require('../unbundled/definition4.cjs');
+const popup_definition = require('../unbundled/definition5.cjs');
 const vividElement = require('../unbundled/vivid-element.cjs');
 const fastElement = require('@microsoft/fast-element');
 const anchored = require('../unbundled/anchored.cjs');

package/tooltip/definition.js

@@ -1,4 +1,4 @@
-import { P as Popup, p as popupDefinition } from '../unbundled/definition4.js';
+import { P as Popup, p as popupDefinition } from '../unbundled/definition5.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { attr, html } from '@microsoft/fast-element';
 import { A as Anchored, a as anchorSlotTemplateFactory } from '../unbundled/anchored.js';

package/tree-item/definition.cjs

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 require('../icon/definition.cjs');
 require('../unbundled/vivid-element.cjs');
-const treeItem_definition = require('../unbundled/definition3.cjs');
+const treeItem_definition = require('../unbundled/definition4.cjs');
 
 
 

package/tree-item/definition.js

@@ -1,3 +1,3 @@
 import '../icon/definition.js';
 import '../unbundled/vivid-element.js';
-export { T as VwcTreeItemElement, r as registerTreeItem, t as treeItemDefinition } from '../unbundled/definition3.js';
+export { T as VwcTreeItemElement, r as registerTreeItem, t as treeItemDefinition } from '../unbundled/definition4.js';