@vonage/vivid 5.0.0 → 5.2.0

package/{shared/definition46.cjs → select/definition.cjs}

@@ -1,29 +1,27 @@
 'use strict';
 
-const definition = require('./definition67.cjs');
-const definition$2 = require('./definition28.cjs');
-const definition$3 = require('./definition37.cjs');
-const vividElement = require('./vivid-element.cjs');
-const mixins = require('./mixins.cjs');
-const listbox = require('./listbox.cjs');
-const hostSemantics = require('./host-semantics.cjs');
-const formAssociated = require('./form-associated.cjs');
-const numbers = require('./numbers.cjs');
-const withErrorText = require('./with-error-text.cjs');
-const withSuccessText = require('./with-success-text.cjs');
-const formElement = require('./form-element.cjs');
-const affix = require('./affix.cjs');
-const strings = require('./strings.cjs');
-const keyCodes = require('./key-codes.cjs');
-const option = require('./option.cjs');
-const definition$1 = require('./definition11.cjs');
-const index = require('./index.cjs');
-const ref = require('./ref.cjs');
-const when = require('./when.cjs');
-const slotted = require('./slotted.cjs');
-const classNames = require('./class-names.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.control:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.control:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control{border-radius:var(--_select-control-border-radius);block-size:var(--_select-block-size);padding-inline:var(--_select-padding-inline)}.control{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_select-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;transition:box-shadow .2s,background-color .2s}.control.size-condensed{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_select-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.control.size-condensed:not(.shape-pill){--_select-control-border-radius: 4px}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}:host(:focus-visible) .control{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))}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{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));border-radius:8px}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.control.shows-placeholder .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 var(--_select-icon-size);font-size:var(--_select-icon-size);line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}";
+const popup_definition = require('../unbundled/definition4.cjs');
+const icon_definition = require('../icon/definition.cjs');
+const option_definition = require('../option/definition.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const mixins = require('../unbundled/mixins.cjs');
+const fastElement = require('@microsoft/fast-element');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const listbox = require('../unbundled/listbox.cjs');
+const hostSemantics = require('../unbundled/host-semantics.cjs');
+const formAssociated = require('../unbundled/form-associated.cjs');
+const withContextualHelp = require('../unbundled/with-contextual-help.cjs');
+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');
+
+const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.control.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.control.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control{border-radius:var(--_select-control-border-radius);block-size:var(--_select-block-size);padding-inline:var(--_select-padding-inline)}.control{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_select-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;transition:box-shadow .2s,background-color .2s}.control.size-condensed{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_select-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.control.size-condensed:not(.shape-pill){--_select-control-border-radius: 4px}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}:host(:focus-visible) .control{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))}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{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));border-radius:8px}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.control.shows-placeholder .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 var(--_select-icon-size);font-size:var(--_select-icon-size);line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}.label-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--label-wrapper-gap, 8px)}.label-wrapper[hidden]{display:none}.label-wrapper .label{flex:1 1 auto}.label-wrapper slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){margin-inline-start:auto}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -36,9 +34,13 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 class Select extends mixins.WithLightDOMFeedback(
-  withErrorText.WithErrorText(
-    withSuccessText.WithSuccessText(
-      formElement.FormElement(hostSemantics.HostSemantics(affix.AffixIconWithTrailing(formAssociated.FormAssociated(listbox.Listbox))))
+  withContextualHelp.WithContextualHelp(
+    withErrorText.WithErrorText(
+      withSuccessText.WithSuccessText(
+        formElement.FormElement(
+          hostSemantics.HostSemantics(affix.AffixIconWithTrailing(formAssociated.FormAssociated(listbox.Listbox)))
+        )
+      )
     )
   )
 ) {
@@ -61,7 +63,7 @@ class Select extends mixins.WithLightDOMFeedback(
      *
      * @internal
      */
-    this.listboxId = strings.uniqueId("listbox-");
+    this.listboxId = fastWebUtilities.uniqueId("listbox-");
     this.maxHeight = 0;
     this.fixedDropdown = false;
     this.placeholderOption = null;
@@ -130,7 +132,7 @@ class Select extends mixins.WithLightDOMFeedback(
         this.rangeStartIndex = this.activeIndex + 1;
       }
       this.options.forEach((o, i) => {
-        o.checked = numbers.inRange(i, this.rangeStartIndex);
+        o.checked = fastWebUtilities.inRange(i, this.rangeStartIndex);
       });
     } else {
       this.uncheckAllOptions();
@@ -154,7 +156,7 @@ class Select extends mixins.WithLightDOMFeedback(
         this.rangeStartIndex = this.activeIndex;
       }
       this.options.forEach((o, i) => {
-        o.checked = numbers.inRange(i, this.rangeStartIndex, this.length);
+        o.checked = fastWebUtilities.inRange(i, this.rangeStartIndex, this.length);
       });
     } else {
       this.uncheckAllOptions();
@@ -178,7 +180,7 @@ class Select extends mixins.WithLightDOMFeedback(
         this.rangeStartIndex = this.activeIndex;
       }
       this.options.forEach((o, i) => {
-        o.checked = numbers.inRange(i, this.rangeStartIndex, this.activeIndex + 1);
+        o.checked = fastWebUtilities.inRange(i, this.rangeStartIndex, this.activeIndex + 1);
       });
     } else {
       this.uncheckAllOptions();
@@ -205,7 +207,7 @@ class Select extends mixins.WithLightDOMFeedback(
         this.rangeStartIndex += 1;
       }
       this.options.forEach((o, i) => {
-        o.checked = numbers.inRange(i, this.activeIndex, this.rangeStartIndex);
+        o.checked = fastWebUtilities.inRange(i, this.activeIndex, this.rangeStartIndex);
       });
     } else {
       this.uncheckAllOptions();
@@ -323,7 +325,7 @@ class Select extends mixins.WithLightDOMFeedback(
     if (this.open) {
       this.focusAndScrollOptionIntoView();
       this.indexWhenOpened = this.selectedIndex;
-      vividElement.DOM.queueUpdate(() => this.focus());
+      fastElement.DOM.queueUpdate(() => this.focus());
       return;
     }
     const didClose = prev === true && next === false;
@@ -395,7 +397,7 @@ class Select extends mixins.WithLightDOMFeedback(
    * @internal
    */
   clickHandler(e) {
-    if (this.disabled) {
+    if (this.disabled || this._isFromContextualHelp(e)) {
       return;
     }
     const clickedOption = e.target.closest(
@@ -526,32 +528,32 @@ class Select extends mixins.WithLightDOMFeedback(
     const { key, shiftKey } = e;
     this.shouldSkipFocus = false;
     switch (key) {
-      case keyCodes.keyHome: {
+      case fastWebUtilities.keyHome: {
         this.checkFirstOption(shiftKey);
         return;
       }
-      case keyCodes.keyArrowDown: {
+      case fastWebUtilities.keyArrowDown: {
         this.checkNextOption(shiftKey);
         return;
       }
-      case keyCodes.keyArrowUp: {
+      case fastWebUtilities.keyArrowUp: {
         this.checkPreviousOption(shiftKey);
         return;
       }
-      case keyCodes.keyEnd: {
+      case fastWebUtilities.keyEnd: {
         this.checkLastOption(shiftKey);
         return;
       }
-      case keyCodes.keyTab: {
+      case fastWebUtilities.keyTab: {
         this.focusAndScrollOptionIntoView();
         return;
       }
-      case keyCodes.keyEscape: {
+      case fastWebUtilities.keyEscape: {
         this.uncheckAllOptions();
         this.checkActiveIndex();
         return;
       }
-      case keyCodes.keySpace: {
+      case fastWebUtilities.keySpace: {
         e.preventDefault();
         if (this.typeaheadExpired) {
           this.toggleSelectedForAllCheckedOptions();
@@ -581,31 +583,31 @@ class Select extends mixins.WithLightDOMFeedback(
     }
     const key = e.key;
     switch (key) {
-      case keyCodes.keySpace: {
+      case fastWebUtilities.keySpace: {
         e.preventDefault();
         if (this.collapsible && this.typeaheadExpired) {
           this.open = !this.open;
         }
         break;
       }
-      case keyCodes.keyHome:
-      case keyCodes.keyEnd: {
+      case fastWebUtilities.keyHome:
+      case fastWebUtilities.keyEnd: {
         e.preventDefault();
         break;
       }
-      case keyCodes.keyEnter: {
+      case fastWebUtilities.keyEnter: {
         e.preventDefault();
         this.open = !this.open;
         break;
       }
-      case keyCodes.keyEscape: {
+      case fastWebUtilities.keyEscape: {
         if (this.collapsible && this.open) {
           e.preventDefault();
           this.open = false;
         }
         break;
       }
-      case keyCodes.keyTab: {
+      case fastWebUtilities.keyTab: {
         if (this.collapsible && this.open) {
           e.preventDefault();
           this.open = false;
@@ -616,7 +618,7 @@ class Select extends mixins.WithLightDOMFeedback(
     if (this.collapsible && !this.open && this.selectedIndex !== selectedIndexBefore) {
       this.updateValue(true);
     }
-    return !(e.key === keyCodes.keyArrowDown || e.key === keyCodes.keyArrowUp);
+    return !(e.key === fastWebUtilities.keyArrowDown || e.key === fastWebUtilities.keyArrowUp);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -634,11 +636,11 @@ class Select extends mixins.WithLightDOMFeedback(
    */
   updateDisplayValue() {
     if (this.collapsible) {
-      vividElement.Observable.notify(this, "displayValue");
+      fastElement.Observable.notify(this, "displayValue");
     }
   }
   get displayValue() {
-    vividElement.Observable.track(this, "displayValue");
+    fastElement.Observable.track(this, "displayValue");
     return this.firstSelectedOption?.getAttribute("label") ?? this.firstSelectedOption?.text ?? this.placeholder ?? "";
   }
   setDefaultSelectedOption() {
@@ -662,12 +664,12 @@ class Select extends mixins.WithLightDOMFeedback(
    */
   slottedOptionsChanged(prev, next) {
     this.options.forEach((o) => {
-      const notifier = vividElement.Observable.getNotifier(o);
+      const notifier = fastElement.Observable.getNotifier(o);
       notifier.unsubscribe(this, "value");
     });
     super.slottedOptionsChanged(prev, next);
     this.options.forEach((o) => {
-      const notifier = vividElement.Observable.getNotifier(o);
+      const notifier = fastElement.Observable.getNotifier(o);
       notifier.subscribe(this, "value");
     });
     this.setProxyOptions();
@@ -694,50 +696,50 @@ class Select extends mixins.WithLightDOMFeedback(
   }
 }
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], Select.prototype, "activeIndex", 2);
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], Select.prototype, "multiple", 2);
 __decorateClass([
-  vividElement.attr({ attribute: "open", mode: "boolean" })
+  fastElement.attr({ attribute: "open", mode: "boolean" })
 ], Select.prototype, "open", 2);
 __decorateClass([
-  vividElement.volatile
+  fastElement.volatile
 ], Select.prototype, "collapsible", 1);
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], Select.prototype, "control", 2);
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], Select.prototype, "maxHeight", 2);
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], Select.prototype, "_anchor", 2);
 __decorateClass([
-  vividElement.attr()
+  fastElement.attr()
 ], Select.prototype, "scale", 2);
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Select.prototype, "appearance", 2);
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Select.prototype, "shape", 2);
 __decorateClass([
-  vividElement.attr({ mode: "boolean", attribute: "fixed-dropdown" })
+  fastElement.attr({ mode: "boolean", attribute: "fixed-dropdown" })
 ], Select.prototype, "fixedDropdown", 2);
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Select.prototype, "placeholder", 2);
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], Select.prototype, "placeholderOption", 2);
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], Select.prototype, "_feedbackWrapper", 2);
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], Select.prototype, "metaSlottedContent", 2);
 
 const getStateClasses = ({
@@ -750,7 +752,7 @@ const getStateClasses = ({
   placeholder,
   value,
   scale
-}) => classNames.classNames(
+}) => fastWebUtilities.classNames(
   ["disabled", disabled],
   [`appearance-${appearance}`, Boolean(appearance)],
   [`shape-${shape}`, Boolean(shape)],
@@ -761,7 +763,7 @@ const getStateClasses = ({
   [`size-${scale}`, Boolean(scale)]
 );
 function renderLabel() {
-  return vividElement.html` <label
+  return fastElement.html` <label
 		for="${(x) => x.multiple ? null : "control"}"
 		class="label"
 		id="label"
@@ -771,24 +773,24 @@ function renderLabel() {
 }
 function renderPlaceholder(context) {
   const optionTag = context.tagFor(option.ListboxOption);
-  return vividElement.html`
-		<${optionTag} ${ref.ref("placeholderOption")}
+  return fastElement.html`
+		<${optionTag} ${fastElement.ref("placeholderOption")}
 			text="${(x) => x.placeholder}" hidden disabled>
 		</${optionTag}>`;
 }
 function selectValue(context) {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  const chevronTemplate = definition$1.chevronTemplateFactory(context);
-  return vividElement.html` <div
+  const chevronTemplate = button_definition.chevronTemplateFactory(context);
+  return fastElement.html` <div
 		class="control ${getStateClasses}"
-		${ref.ref("_anchor")}
+		${fastElement.ref("_anchor")}
 		id="control"
 		?disabled="${(x) => x.disabled}"
 	>
 		<div class="selected-value">
 			${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
 			<span class="text">${(x) => x.displayValue}</span>
-			<slot name="meta" ${slotted.slotted("metaSlottedContent")}></slot>
+			<slot name="meta" ${fastElement.slotted("metaSlottedContent")}></slot>
 		</div>
 		${chevronTemplate}
 	</div>`;
@@ -797,11 +799,14 @@ function setFixedDropdownVarWidth(x) {
   return x.open && x.fixedDropdown ? `--_select-fixed-width: ${Math.round(x.getBoundingClientRect().width)}px` : null;
 }
 function renderControl(context) {
-  const popupTag = context.tagFor(definition.Popup);
-  return vividElement.html`
-			${when.when((x) => x.label, renderLabel())}
+  const popupTag = context.tagFor(popup_definition.Popup);
+  return fastElement.html`
+			<div class="label-wrapper" ?hidden=${(x) => !x.label && !x._hasContextualHelp}>
+				${fastElement.when((x) => x.label, renderLabel())}
+				<slot name="contextual-help" ${fastElement.slotted("_contextualHelpSlottedContent")}></slot>
+			</div>
 			<div class="control-wrapper">
-				${when.when((x) => !x.multiple, selectValue(context))}
+				${fastElement.when((x) => !x.multiple, selectValue(context))}
 				<${popupTag} class="popup"
 					style="${setFixedDropdownVarWidth}"
 					?open="${(x) => x.collapsible ? x.open : true}"
@@ -816,10 +821,10 @@ function renderControl(context) {
 						aria-labelledby="${(x) => x.multiple && x.label ? "label" : null}"
 						?disabled="${(x) => x.disabled}"
 						?hidden="${(x) => x.collapsible ? !x.open : false}"
-						${ref.ref("listbox")}>
-						${when.when((x) => x.placeholder, renderPlaceholder(context))}
+						${fastElement.ref("listbox")}>
+						${fastElement.when((x) => x.placeholder, renderPlaceholder(context))}
 						<slot
-							${slotted.slotted({
+							${fastElement.slotted({
     filter: listbox.Listbox.slottedOptionFilter,
     flatten: true,
     property: "slottedOptions"
@@ -839,7 +844,7 @@ function ifNotFromFeedback(handler) {
   };
 }
 const SelectTemplate = (context) => {
-  return vividElement.html`
+  return fastElement.html`
 		<template
 			class="base"
 			${hostSemantics.applyHostSemantics({
@@ -867,7 +872,7 @@ const SelectTemplate = (context) => {
   )}"
 		>
 			${renderControl(context)}
-			<div class="feedback-wrapper" ${ref.ref("_feedbackWrapper")}>
+			<div class="feedback-wrapper" ${fastElement.ref("_feedbackWrapper")}>
 				${(x) => x._getFeedbackTemplate(context)}
 			</div>
 		</template>
@@ -879,9 +884,9 @@ const selectDefinition = vividElement.defineVividComponent(
   Select,
   SelectTemplate,
   [
-    definition.popupDefinition,
-    definition$2.iconDefinition,
-    definition$3.listboxOptionDefinition,
+    popup_definition.popupDefinition,
+    icon_definition.iconDefinition,
+    option_definition.listboxOptionDefinition,
     mixins.feedbackMessageDefinition
   ],
   {
@@ -890,6 +895,6 @@ const selectDefinition = vividElement.defineVividComponent(
 );
 const registerSelect = vividElement.createRegisterFunction(selectDefinition);
 
-exports.Select = Select;
+exports.VwcSelectElement = Select;
 exports.registerSelect = registerSelect;
 exports.selectDefinition = selectDefinition;

package/{shared/definition46.js → select/definition.js}

@@ -1,27 +1,23 @@
-import { P as Popup, p as popupDefinition } from './definition67.js';
-import { i as iconDefinition } from './definition28.js';
-import { l as listboxOptionDefinition } from './definition37.js';
-import { D as DOM, O as Observable, o as observable, a as attr, v as volatile, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { W as WithLightDOMFeedback, f as feedbackMessageDefinition } from './mixins.js';
-import { L as Listbox } from './listbox.js';
-import { H as HostSemantics, a as applyHostSemantics } from './host-semantics.js';
-import { F as FormAssociated } from './form-associated.js';
-import { i as inRange } from './numbers.js';
-import { W as WithErrorText } from './with-error-text.js';
-import { W as WithSuccessText } from './with-success-text.js';
-import { F as FormElement } from './form-element.js';
-import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { u as uniqueId } from './strings.js';
-import { a as keySpace, b as keyEscape, c as keyTab, d as keyEnd, e as keyArrowUp, f as keyArrowDown, g as keyHome, k as keyEnter } from './key-codes.js';
-import { L as ListboxOption } from './option.js';
-import { c as chevronTemplateFactory } from './definition11.js';
-import { h as handleEscapeKeyAndStopPropogation } from './index.js';
-import { r as ref } from './ref.js';
-import { w as when } from './when.js';
-import { s as slotted } from './slotted.js';
-import { c as classNames } from './class-names.js';
+import { P as Popup, p as popupDefinition } from '../unbundled/definition4.js';
+import { iconDefinition } from '../icon/definition.js';
+import { listboxOptionDefinition } from '../option/definition.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 { 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';
+import { F as FormAssociated } from '../unbundled/form-associated.js';
+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 { c as chevronTemplateFactory } from '../unbundled/definition.js';
+import { h as handleEscapeKeyAndStopPropogation } from '../unbundled/index.js';
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.control:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.control:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control{border-radius:var(--_select-control-border-radius);block-size:var(--_select-block-size);padding-inline:var(--_select-padding-inline)}.control{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_select-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;transition:box-shadow .2s,background-color .2s}.control.size-condensed{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_select-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.control.size-condensed:not(.shape-pill){--_select-control-border-radius: 4px}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}:host(:focus-visible) .control{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))}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{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));border-radius:8px}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.control.shows-placeholder .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 var(--_select-icon-size);font-size:var(--_select-icon-size);line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}";
+const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.control.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.control.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control{border-radius:var(--_select-control-border-radius);block-size:var(--_select-block-size);padding-inline:var(--_select-padding-inline)}.control{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_select-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;transition:box-shadow .2s,background-color .2s}.control.size-condensed{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_select-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.control.size-condensed:not(.shape-pill){--_select-control-border-radius: 4px}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}:host(:focus-visible) .control{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))}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{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));border-radius:8px}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.control.shows-placeholder .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 var(--_select-icon-size);font-size:var(--_select-icon-size);line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}.label-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--label-wrapper-gap, 8px)}.label-wrapper[hidden]{display:none}.label-wrapper .label{flex:1 1 auto}.label-wrapper slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){margin-inline-start:auto}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -34,9 +30,13 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 class Select extends WithLightDOMFeedback(
-  WithErrorText(
-    WithSuccessText(
-      FormElement(HostSemantics(AffixIconWithTrailing(FormAssociated(Listbox))))
+  WithContextualHelp(
+    WithErrorText(
+      WithSuccessText(
+        FormElement(
+          HostSemantics(AffixIconWithTrailing(FormAssociated(Listbox)))
+        )
+      )
     )
   )
 ) {
@@ -393,7 +393,7 @@ class Select extends WithLightDOMFeedback(
    * @internal
    */
   clickHandler(e) {
-    if (this.disabled) {
+    if (this.disabled || this._isFromContextualHelp(e)) {
       return;
     }
     const clickedOption = e.target.closest(
@@ -797,7 +797,10 @@ function setFixedDropdownVarWidth(x) {
 function renderControl(context) {
   const popupTag = context.tagFor(Popup);
   return html`
-			${when((x) => x.label, renderLabel())}
+			<div class="label-wrapper" ?hidden=${(x) => !x.label && !x._hasContextualHelp}>
+				${when((x) => x.label, renderLabel())}
+				<slot name="contextual-help" ${slotted("_contextualHelpSlottedContent")}></slot>
+			</div>
 			<div class="control-wrapper">
 				${when((x) => !x.multiple, selectValue(context))}
 				<${popupTag} class="popup"
@@ -888,4 +891,4 @@ const selectDefinition = defineVividComponent(
 );
 const registerSelect = createRegisterFunction(selectDefinition);
 
-export { Select as S, registerSelect as r, selectDefinition as s };
+export { Select as VwcSelectElement, registerSelect, selectDefinition };

package/select/index.cjs

@@ -1,5 +1 @@
-'use strict';
-
-const definition = require('../shared/definition46.cjs');
-
-definition.registerSelect();
+"use strict";const e=require("../bundled/definition19.cjs");e.registerSelect();

package/select/index.js

@@ -1,3 +1,2 @@
-import { r as registerSelect } from '../shared/definition46.js';
-
-registerSelect();
+import { r } from "../bundled/definition19.js";
+r();