@vonage/vivid 5.2.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;
   }
   /**
@@ -325,7 +323,7 @@ class Select extends mixins.WithLightDOMFeedback(
     if (this.open) {
       this.focusAndScrollOptionIntoView();
       this.indexWhenOpened = this.selectedIndex;
-      fastElement.DOM.queueUpdate(() => this.focus());
+      fastElement.Updates.enqueue(() => this.focus());
       return;
     }
     const didClose = prev === true && next === false;
@@ -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,9 +1,9 @@
-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 { DOM, Observable, observable, attr, volatile, ref, html, when, slotted } from '@microsoft/fast-element';
+import { Updates, Observable, observable, attr, volatile, ref, html, when, slotted } from '@microsoft/fast-element';
 import { uniqueId, inRange, keySpace, keyEscape, keyTab, keyEnd, keyArrowUp, keyArrowDown, keyHome, keyEnter, classNames } from '@microsoft/fast-web-utilities';
 import { L as Listbox } from '../unbundled/listbox.js';
 import { H as HostSemantics, a as applyHostSemantics } from '../unbundled/host-semantics.js';
@@ -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;
   }
   /**
@@ -321,7 +319,7 @@ class Select extends WithLightDOMFeedback(
     if (this.open) {
       this.focusAndScrollOptionIntoView();
       this.indexWhenOpened = this.selectedIndex;
-      DOM.queueUpdate(() => this.focus());
+      Updates.enqueue(() => this.focus());
       return;
     }
     const didClose = prev === true && next === false;
@@ -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.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.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 v=require("../bundled/definition8.cjs"),b=require("../bundled/definition17.cjs"),t=require("../bundled/vivid-element.cjs"),i=require("../bundled/delegates-aria.cjs"),r=require("../bundled/enums.cjs"),u=require("../bundled/class-names.cjs"),f=require("../bundled/when.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.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,p;d>=0;d--)(p=a[d])&&(l=p(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(v.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)}"
@@ -6,7 +6,7 @@
 			connotation="${e=>e.connotation==="cta"?r.Connotation.CTA:r.Connotation.Accent}"
 			:checked="${e=>e.checked}"
 			inert="${e=>e.clickableBox?!0:null}"
-		></${o}>`)} `}function g(a){const o=a.tagFor(b.Radio);return t.html`${f.when(e=>e.controlType==="radio",t.html`
+		></${o}>`)} `}function g(a){const o=a.tagFor(v.Radio);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)}"
@@ -25,4 +25,4 @@
 			${m(a)} ${g(a)}
 			<slot></slot>
 		</div>
-	</template>`,y=t.defineVividComponent("selectable-box",n,$,[v.checkboxDefinition,b.radioDefinition],{styles:x,shadowOptions:{delegatesFocus:!0}}),C=t.createRegisterFunction(y);C();
+	</template>`,y=t.defineVividComponent("selectable-box",n,$,[p.checkboxDefinition,v.radioDefinition],{styles:x,shadowOptions:{delegatesFocus:!0}}),C=t.createRegisterFunction(y);C();

package/selectable-box/index.js

@@ -1,17 +1,17 @@
 import { C as h, c as u } from "../bundled/definition8.js";
-import { R as x, a as m } from "../bundled/definition17.js";
-import { V as _, a as c, h as r, c as k, d as g } from "../bundled/vivid-element.js";
+import { R as x, a as _ } from "../bundled/definition17.js";
+import { V as m, a as c, h as n, c as k, d as g } from "../bundled/vivid-element.js";
 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";
-import { w as b } from "../bundled/when.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.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, n = (a, e, o, s) => {
-  for (var t = void 0, d = a.length - 1, v; d >= 0; d--)
-    (v = a[d]) && (t = v(e, o, t) || t);
+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);
   return t && B(e, o, t), t;
 };
-class l extends $(_) {
+class l extends $(m) {
   constructor() {
     super(...arguments), this.checked = !1, this.clickableBox = !1, this.controlPlacement = "end-stacked", this.tight = !1;
   }
@@ -28,22 +28,22 @@ class l extends $(_) {
     return (e.code === "Space" || e.code === "Enter") && this.clickableBox ? this._handleCheckedChange() : !0;
   }
 }
-n([
+r([
   c({ mode: "boolean" })
 ], l.prototype, "checked");
-n([
+r([
   c({ attribute: "clickable-box", mode: "boolean" })
 ], l.prototype, "clickableBox");
-n([
+r([
   c
 ], l.prototype, "connotation");
-n([
+r([
   c({ attribute: "control-type" })
 ], l.prototype, "controlType");
-n([
+r([
   c({ attribute: "control-placement", mode: "fromView" })
 ], l.prototype, "controlPlacement");
-n([
+r([
   c({ mode: "boolean" })
 ], l.prototype, "tight");
 const w = ({
@@ -66,9 +66,9 @@ function f(a) {
 }
 function T(a) {
   const e = a.tagFor(h);
-  return r`${b(
+  return n`${v(
     (o) => o.controlType !== "radio",
-    r`
+    n`
 		<${e}
 			${p(
       {
@@ -86,9 +86,9 @@ function T(a) {
 }
 function L(a) {
   const e = a.tagFor(x);
-  return r`${b(
+  return n`${v(
     (o) => o.controlType === "radio",
-    r`
+    n`
 		<${e}
 			${p(
       {
@@ -104,7 +104,7 @@ function L(a) {
 		></${e}>`
   )} `;
 }
-const A = (a) => r`<template>
+const A = (a) => n`<template>
 		<div
 			class="${w}"
 			tabindex="${(e) => e.clickableBox ? "0" : null}"
@@ -123,7 +123,7 @@ const A = (a) => r`<template>
   "selectable-box",
   l,
   A,
-  [u, m],
+  [u, _],
   {
     styles: C,
     shadowOptions: {

package/shared/aria/aria-change-subscription.d.ts

@@ -1,6 +1,5 @@
 import type { AriaMixinElement, AriaPropertyName } from './aria-mixin';
 type AriaChangeSubscriber = (source: AriaMixinElement, changedAriaProperty: AriaPropertyName) => void;
 export declare const subscribeToAriaPropertyChanges: (source: AriaMixinElement, listener: AriaChangeSubscriber) => void;
-export declare const unsubscribeFromAriaPropertyChanges: (source: AriaMixinElement, listener: AriaChangeSubscriber) => void;
 export declare const publishAriaPropertyChange: (source: AriaMixinElement, changedAriaProperty: AriaPropertyName) => void;
 export {};

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

@@ -1,17 +1,17 @@
 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) => {
     new (...args: any[]): {
         _vividAriaBehaviour: VividAriaBehaviour;
         connectedCallback(): void;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/shared/aria/delegate-aria-behavior.d.ts

@@ -1,27 +1,22 @@
-import { type Behavior } from '@microsoft/fast-element';
-import type { DelegatesAriaElement } from './delegates-aria';
+import type { ViewBehavior, ViewController } from '@microsoft/fast-element';
 import { type AriaPropertyName } from './aria-mixin';
 type BoundValue = string | null | undefined | boolean | number;
 type AriaBinding<T> = BoundValue | ((x: T) => BoundValue);
 export type BoundAriaProperties<T> = Partial<{
     [Property in AriaPropertyName]: AriaBinding<T>;
 }>;
-export declare class DelegateAriaBehavior<T> implements Behavior {
-    private target;
+export declare class DelegateAriaBehavior<T> implements ViewBehavior {
     private readonly boundProperties;
     private readonly forwardedProperties;
-    constructor(target: HTMLElement, params: {
+    private target;
+    constructor(target: HTMLElement | null, params: {
         boundProperties: BoundAriaProperties<T>;
         forwardedProperties: Set<AriaPropertyName>;
     });
-    private source;
-    bind(source: DelegatesAriaElement): void;
-    unbind(): void;
+    bind(controller: ViewController): void;
     private bindingBehaviours;
     private bindPropertiesToTarget;
-    private releasePropertyBindings;
     private startForwardingPropertiesToTarget;
-    private stopForwardingPropertiesToTarget;
     private onSourceAriaPropertyChanged;
     private forwardPropertyToTarget;
 }

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

@@ -5,15 +5,15 @@ import { type BoundAriaProperties } from './delegate-aria-behavior';
 type DelegateAriaOptions = {
     onlySpecified?: boolean;
 };
-export declare function delegateAria<T>(boundProperties?: BoundAriaProperties<T>, options?: DelegateAriaOptions): CaptureType<T>;
+export declare function delegateAria<T>(boundProperties?: BoundAriaProperties<T>, options?: DelegateAriaOptions): CaptureType<T, any>;
 export declare const DelegatesAria: <T extends Constructor<VividElement>>(Base: T) => {
     new (...args: any[]): {
         _vividAriaBehaviour: "delegate";
         connectedCallback(): void;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/shared/aria/host-semantics-behavior.d.ts

@@ -1,22 +1,19 @@
-import type { Behavior } from '@microsoft/fast-element';
+import type { ViewBehavior, ViewController } from '@microsoft/fast-element';
 import { type AriaPropertyName } from './aria-mixin';
-import type { HostSemanticsElement } from './host-semantics';
 type BoundValue = string | null | undefined | boolean | number;
 type AriaBinding<T> = BoundValue | ((x: T) => BoundValue);
 export type BoundAriaProperties<T> = Partial<{
     [Property in AriaPropertyName]: AriaBinding<T>;
 }>;
-export declare class HostSemanticsBehavior<T> implements Behavior {
-    private target;
+export declare class HostSemanticsBehavior<T> implements ViewBehavior {
     private readonly boundProperties;
-    constructor(target: HTMLElement, params: {
+    private target;
+    constructor(target: HTMLElement | null, params: {
         boundProperties: BoundAriaProperties<T>;
         forwardedProperties: Set<AriaPropertyName>;
     });
-    bind(source: HostSemanticsElement): void;
-    unbind(source: HostSemanticsElement): void;
+    bind(controller: ViewController): void;
     private bindingBehaviours;
     private bindPropertiesToTarget;
-    private releasePropertyBindings;
 }
 export {};

package/shared/aria/host-semantics.d.ts

@@ -2,15 +2,15 @@ import { type CaptureType } from '@microsoft/fast-element';
 import type { Constructor, MixinType } from '../utils/mixins';
 import type { VividElement } from '../foundation/vivid-element/vivid-element';
 import { type BoundAriaProperties } from './host-semantics-behavior';
-export declare function applyHostSemantics<T>(boundProperties?: BoundAriaProperties<T>): CaptureType<T>;
+export declare function applyHostSemantics<T>(boundProperties?: BoundAriaProperties<T>): CaptureType<T, any>;
 export declare const HostSemantics: <T extends Constructor<VividElement>>(Base: T) => {
     new (...args: any[]): {
         _vividAriaBehaviour: "host";
         connectedCallback(): void;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;