@vonage/vivid 5.0.0 → 5.2.0

package/{shared/definition45.cjs → searchable-select/definition.cjs}

@@ -1,27 +1,27 @@
 'use strict';
 
-const definition$1 = require('./definition11.cjs');
-const definition = require('./definition67.cjs');
-const definition$3 = require('./definition28.cjs');
-const definition$2 = require('./definition39.cjs');
-const vividElement = require('./vivid-element.cjs');
-const mixins = require('./mixins.cjs');
-const scrollIntoView = require('./scrollIntoView.cjs');
-const delegatesAria = require('./delegates-aria.cjs');
-const formAssociated = require('./form-associated.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 localized = require('./localized.cjs');
-const option = require('./option.cjs');
-const when = require('./when.cjs');
-const ref = require('./ref.cjs');
-const slotted = require('./slotted.cjs');
-const classNames = require('./class-names.cjs');
-const repeat = require('./repeat.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)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset: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)}.fieldset: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}.fieldset: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)}.fieldset:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{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;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){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));--focus-stroke-gap-color: transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{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));--focus-stroke-gap-color: transparent}}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:min(100px,40%);outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}::slotted([data-vvd-component=option][data-highlighted]){border-radius:8px;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));--focus-stroke-gap-color: transparent}";
+const button_definition = require('../unbundled/definition.cjs');
+const popup_definition = require('../unbundled/definition4.cjs');
+const icon_definition = require('../icon/definition.cjs');
+const progressRing_definition = require('../progress-ring/definition.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const mixins = require('../unbundled/mixins.cjs');
+const fastElement = require('@microsoft/fast-element');
+const scrollIntoView = require('../unbundled/scrollIntoView.cjs');
+const delegatesAria = require('../unbundled/delegates-aria.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 localized = require('../unbundled/localized.cjs');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const option = require('../unbundled/option.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)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.fieldset: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)}.fieldset: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}}.fieldset.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)}.fieldset.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}.fieldset: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)}.fieldset:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.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)}.fieldset.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.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)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.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)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset.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)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{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;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){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));--focus-stroke-gap-color: transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{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));--focus-stroke-gap-color: transparent}}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:min(100px,40%);outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}::slotted([data-vvd-component=option][data-highlighted]){border-radius:8px;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));--focus-stroke-gap-color: transparent}.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}";
 
 const optionTagStyles = ".base.connotation-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: var(--_connotation-color-soft);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base:not(.disabled){--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% )}}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: var(--vvd-color-neutral-200);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base.disabled{--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% )}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--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));position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}";
 
@@ -38,12 +38,14 @@ const TagGapPx = 8;
 const InputMinWidthPx = 100;
 const PageSize = 10;
 const isFormAssociatedTryingToSetFormValue = (value) => typeof value === "string";
-class SearchableSelect extends mixins.WithFeedback(
-  withErrorText.WithErrorText(
-    withSuccessText.WithSuccessText(
-      formElement.FormElement(
-        delegatesAria.DelegatesAria(
-          affix.AffixIconWithTrailing(localized.Localized(formAssociated.FormAssociated(vividElement.VividElement)))
+class SearchableSelect extends withContextualHelp.WithContextualHelp(
+  mixins.WithFeedback(
+    withErrorText.WithErrorText(
+      withSuccessText.WithSuccessText(
+        formElement.FormElement(
+          delegatesAria.DelegatesAria(
+            affix.AffixIconWithTrailing(localized.Localized(formAssociated.FormAssociated(vividElement.VividElement)))
+          )
         )
       )
     )
@@ -329,14 +331,14 @@ class SearchableSelect extends mixins.WithFeedback(
     if (oldValue) {
       this._slottedDisabledOptions = [];
       for (const option of oldValue) {
-        const notifier = vividElement.Observable.getNotifier(option);
+        const notifier = fastElement.Observable.getNotifier(option);
         notifier.unsubscribe(this.#slottedOptionsChangeHandler, "selected");
       }
     }
     if (newValue) {
       for (const option of newValue) {
         option._displayCheckmark = true;
-        const notifier = vividElement.Observable.getNotifier(option);
+        const notifier = fastElement.Observable.getNotifier(option);
         notifier.subscribe(this.#slottedOptionsChangeHandler, "selected");
       }
     }
@@ -382,7 +384,11 @@ class SearchableSelect extends mixins.WithFeedback(
       this.open = false;
     }
     this.#updateValuesThroughUserInteraction(newValues);
-    const optionMessage = isSelection ? this.locale.searchableSelect.optionSelectedMessage(option.text) : this.locale.searchableSelect.optionDeselectedMessage(option.text);
+    const optionMessage = isSelection ? this.locale.searchableSelect.optionSelectedMessage(
+      option._getAccessibleName()
+    ) : this.locale.searchableSelect.optionDeselectedMessage(
+      option._getAccessibleName()
+    );
     const maxSelectedMessage = this.multiple && this.maxSelected && this.maxSelected >= 1 ? this.locale.searchableSelect.maxSelectedMessage(
       this.values.length,
       this.maxSelected
@@ -472,7 +478,7 @@ class SearchableSelect extends mixins.WithFeedback(
       highlightedOption.setAttribute("data-highlighted", "");
       scrollIntoView.scrollIntoView(highlightedOption, this._listbox, "nearest");
       this._changeDescription = this.locale.searchableSelect.optionFocusedMessage(
-        highlightedOption.text,
+        highlightedOption._getAccessibleName(),
         this._highlightedOptionIndex + 1,
         this._filteredEnabledOptions.length,
         highlightedOption.selected
@@ -656,7 +662,7 @@ class SearchableSelect extends mixins.WithFeedback(
       case "Enter":
       case " ": {
         this._onTagRemoved(this.values[tagIndex]);
-        vividElement.DOM.processUpdates();
+        fastElement.DOM.processUpdates();
         this.#moveTagFocusTo(this.#nextTagIndexForRemoved(tagIndex));
         break;
       }
@@ -755,6 +761,12 @@ class SearchableSelect extends mixins.WithFeedback(
       }
     }
   }
+  /**
+   * @internal
+   */
+  get _hasSelectionCount() {
+    return this.multiple && this.maxSelected && this.maxSelected >= 1;
+  }
   #determineInitialValues() {
     return this.initialValues.length ? this.initialValues : this.initialValue ? [this.initialValue] : [];
   }
@@ -834,7 +846,7 @@ class SearchableSelect extends mixins.WithFeedback(
    */
   _onMouseDown(event) {
     const originalTarget = event.composedPath()[0];
-    if (!event.defaultPrevented && originalTarget !== this._input) {
+    if (!event.defaultPrevented && originalTarget !== this._input && !this._isFromContextualHelp(event)) {
       this._input.focus();
       return false;
     }
@@ -842,90 +854,90 @@ class SearchableSelect extends mixins.WithFeedback(
   }
 }
 __decorateClass$1([
-  vividElement.attr
+  fastElement.attr
 ], SearchableSelect.prototype, "appearance");
 __decorateClass$1([
-  vividElement.attr
+  fastElement.attr
 ], SearchableSelect.prototype, "shape");
 __decorateClass$1([
-  vividElement.attr({ mode: "boolean", attribute: "fixed-dropdown" })
+  fastElement.attr({ mode: "boolean", attribute: "fixed-dropdown" })
 ], SearchableSelect.prototype, "fixedDropdown");
 __decorateClass$1([
-  vividElement.attr
+  fastElement.attr
 ], SearchableSelect.prototype, "placeholder");
 __decorateClass$1([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], SearchableSelect.prototype, "open");
 __decorateClass$1([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], SearchableSelect.prototype, "multiple");
 __decorateClass$1([
-  vividElement.attr({ attribute: "external-tags", mode: "boolean" })
+  fastElement.attr({ attribute: "external-tags", mode: "boolean" })
 ], SearchableSelect.prototype, "externalTags");
 __decorateClass$1([
-  vividElement.attr({ attribute: "max-lines", converter: vividElement.nullableNumberConverter })
+  fastElement.attr({ attribute: "max-lines", converter: fastElement.nullableNumberConverter })
 ], SearchableSelect.prototype, "maxLines");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], SearchableSelect.prototype, "values");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], SearchableSelect.prototype, "initialValues");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], SearchableSelect.prototype, "_input");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], SearchableSelect.prototype, "_currentSearchText");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], SearchableSelect.prototype, "_slottedOptions");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], SearchableSelect.prototype, "optionFilter");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], SearchableSelect.prototype, "_filteredOptions");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], SearchableSelect.prototype, "_filteredEnabledOptions");
 __decorateClass$1([
-  vividElement.attr({
+  fastElement.attr({
     mode: "boolean"
   })
 ], SearchableSelect.prototype, "loading");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], SearchableSelect.prototype, "_highlightedOptionIndex");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], SearchableSelect.prototype, "_contentArea");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], SearchableSelect.prototype, "_numElidedTags");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], SearchableSelect.prototype, "_tagRows");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], SearchableSelect.prototype, "_lastTagRow");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], SearchableSelect.prototype, "_listbox");
 __decorateClass$1([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], SearchableSelect.prototype, "clearable");
 __decorateClass$1([
-  vividElement.attr({ attribute: "max-selected", converter: vividElement.nullableNumberConverter })
+  fastElement.attr({ attribute: "max-selected", converter: fastElement.nullableNumberConverter })
 ], SearchableSelect.prototype, "maxSelected");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], SearchableSelect.prototype, "_slottedDisabledOptions");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], SearchableSelect.prototype, "_changeDescription");
 __decorateClass$1([
-  vividElement.observable
+  fastElement.observable
 ], SearchableSelect.prototype, "_anchor");
 
 var __defProp = Object.defineProperty;
@@ -951,25 +963,25 @@ class OptionTag extends localized.Localized(vividElement.VividElement) {
   }
 }
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], OptionTag.prototype, "shape");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], OptionTag.prototype, "connotation");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], OptionTag.prototype, "label");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], OptionTag.prototype, "removable");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], OptionTag.prototype, "disabled");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], OptionTag.prototype, "hasIconPlaceholder");
 
-const getStateClasses = (x) => classNames.classNames(
+const getStateClasses = (x) => fastWebUtilities.classNames(
   ["disabled", x.disabled],
   [`appearance-${x.appearance}`, Boolean(x.appearance)],
   [`shape-${x.shape}`, Boolean(x.shape)],
@@ -978,12 +990,12 @@ const getStateClasses = (x) => classNames.classNames(
   ["has-highlighted-option", x._highlightedOptionIndex !== null]
 );
 function renderLabel() {
-  return vividElement.html`
+  return fastElement.html`
 		<label for="control" class="label" id="label"> ${(x) => x.label} </label>
 	`;
 }
 function renderSelectionCount() {
-  return vividElement.html`
+  return fastElement.html`
 		<span
 			id="selection-count"
 			class="selection-count"
@@ -997,7 +1009,7 @@ function renderSelectionCount() {
 }
 const tagTemplateFactory = (context, getComponent) => {
   const optionTagTag = context.tagFor(OptionTag);
-  return vividElement.html`
+  return fastElement.html`
 		<div class="tag-wrapper">
 			<${optionTagTag}
 				class="tag"
@@ -1018,7 +1030,7 @@ const tagTemplateFactory = (context, getComponent) => {
 };
 const elidedTagTemplateFactory = (context, getComponent) => {
   const optionTagTag = context.tagFor(OptionTag);
-  return vividElement.html`
+  return fastElement.html`
 		<${optionTagTag}
 			class="tag"
 			tabindex="-1"
@@ -1030,10 +1042,10 @@ const elidedTagTemplateFactory = (context, getComponent) => {
 	`;
 };
 function renderFieldset(context) {
-  const buttonTag = context.tagFor(definition$1.Button);
-  const progressRingTag = context.tagFor(definition$2.ProgressRing);
+  const buttonTag = context.tagFor(button_definition.Button);
+  const progressRingTag = context.tagFor(progressRing_definition.VwcProgressRingElement);
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  const chevronTemplate = definition$1.chevronTemplateFactory(context);
+  const chevronTemplate = button_definition.chevronTemplateFactory(context);
   const tagTemplate = tagTemplateFactory(context, (c) => c.parent);
   const nestedTagTemplate = tagTemplateFactory(
     context,
@@ -1044,38 +1056,38 @@ function renderFieldset(context) {
     context,
     (_, c) => c.parent
   );
-  return vividElement.html`
+  return fastElement.html`
 		<div
 			class="fieldset ${getStateClasses}"
 			@click="${(x, c) => x._onFieldsetClick(c.event)}"
-			${ref.ref("_anchor")}
+			${fastElement.ref("_anchor")}
 		>
 			${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
-			<div class="content-area" ${ref.ref("_contentArea")}>
-				${repeat.repeat(
+			<div class="content-area" ${fastElement.ref("_contentArea")}>
+				${fastElement.repeat(
     (x) => x._tagRows,
-    vividElement.html`
+    fastElement.html`
 						<div class="tag-row">
-							${when.when(
+							${fastElement.when(
       (_, c) => c.isFirst && c.parent._numElidedTags,
       nestedElidedTagTemplate
     )}
-							${repeat.repeat((x) => x, nestedTagTemplate)}
+							${fastElement.repeat((x) => x, nestedTagTemplate)}
 						</div>
 					`,
     { positioning: true }
   )}
 				<div
-					class="tag-row ${(x) => classNames.classNames([
+					class="tag-row ${(x) => fastWebUtilities.classNames([
     "contains-only-input",
     x._tagRows.length > 0 && x._lastTagRow.length === 0
   ])}"
 				>
-					${when.when(
+					${fastElement.when(
     (x) => x._tagRows.length === 0 && x._numElidedTags,
     elidedTagTemplate
   )}
-					${repeat.repeat((x) => x._lastTagRow, tagTemplate)}
+					${fastElement.repeat((x) => x._lastTagRow, tagTemplate)}
 					<input
 						id="control"
 						class="control"
@@ -1102,14 +1114,14 @@ function renderFieldset(context) {
 						@focus="${(x, c) => x._onInputFocus(c.event)}"
 						@blur="${(x, c) => x._onInputBlur(c.event)}"
 						@keydown="${(x, c) => x._onInputKeydown(c.event)}"
-						${ref.ref("_input")}
+						${fastElement.ref("_input")}
 					/>
 				</div>
 			</div>
 			<slot name="meta"></slot>
-			${when.when(
+			${fastElement.when(
     (x) => x._shouldShowClearButton,
-    vividElement.html`<${buttonTag}
+    fastElement.html`<${buttonTag}
 					aria-label="${(x) => x.locale.searchableSelect.clearButtonLabel}"
 					@click="${(x) => x._onClearButtonClick()}"
 					@mousedown="${() => false}"
@@ -1122,11 +1134,11 @@ function renderFieldset(context) {
 				></${buttonTag}>`
   )}
 			<div @mousedown="${() => false}" @click="${(x) => x._onChevronClick()}">
-				${when.when(
+				${fastElement.when(
     (x) => x.loading,
-    vividElement.html`<${progressRingTag} indeterminate size="-6" aria-hidden="true"></${progressRingTag}>`
+    fastElement.html`<${progressRingTag} indeterminate size="-6" aria-hidden="true"></${progressRingTag}>`
   )}
-				${when.when((x) => !x.loading, chevronTemplate)}
+				${fastElement.when((x) => !x.loading, chevronTemplate)}
 			</div>
 		</div>
 	`;
@@ -1137,20 +1149,20 @@ function setFixedDropdownVarWidth(x) {
   )}px` : null;
 }
 function renderControl(context) {
-  const popupTag = context.tagFor(definition.Popup);
-  return vividElement.html`
-		${when.when(
-    (x) => x.label || x.multiple && x.maxSelected && x.maxSelected >= 1,
-    vividElement.html`
-				<div>
-					${when.when((x) => x.label, renderLabel())}
-					${when.when(
-      (x) => x.multiple && x.maxSelected && x.maxSelected >= 1,
-      renderSelectionCount()
-    )}
-				</div>
-			`
+  const popupTag = context.tagFor(popup_definition.Popup);
+  return fastElement.html`
+		<div class="label-wrapper" ?hidden=${(x) => !x.label && !x._hasContextualHelp && !x._hasSelectionCount}>
+			${fastElement.when(
+    (x) => x.label || x._hasSelectionCount,
+    fastElement.html`
+					<div>
+						${fastElement.when((x) => x.label, renderLabel())}
+						${fastElement.when((x) => x._hasSelectionCount, renderSelectionCount())}
+					</div>
+				`
   )}
+			<slot name="contextual-help" ${fastElement.slotted("_contextualHelpSlottedContent")}></slot>
+		</div>
 		<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
 			${(x) => x._changeDescription}
 		</span>
@@ -1169,35 +1181,35 @@ function renderControl(context) {
 						role="listbox"
 						aria-multiselectable="${(x) => x.multiple}"
 						aria-required="${(x) => x.required}"
-						${ref.ref("_listbox")}
+						${fastElement.ref("_listbox")}
 						@click="${(x, c) => x._onListboxClick(c.event)}"
 						@mousedown="${() => false}"
 					>
 						<slot
-							${slotted.slotted({
+							${fastElement.slotted({
     filter: option.isListboxOption,
     flatten: true,
     property: "_slottedOptions"
   })}>
 						</slot>
-						${when.when(
+						${fastElement.when(
     (x) => x._filteredOptions.length === 0,
-    vividElement.html`<div class="empty-message">
-								${when.when(
+    fastElement.html`<div class="empty-message">
+								${fastElement.when(
       (x) => x.loading,
-      vividElement.html`<slot name="loading-options">
+      fastElement.html`<slot name="loading-options">
 										${(x) => x.locale.searchableSelect.loadingOptionsMessage}
 									</slot>`
     )}
-								${when.when(
+								${fastElement.when(
       (x) => !x.loading && x.searchText === "",
-      vividElement.html`<slot name="no-options">
+      fastElement.html`<slot name="no-options">
 										${(x) => x.locale.searchableSelect.noOptionsMessage}
 									</slot>`
     )}
-								${when.when(
+								${fastElement.when(
       (x) => !x.loading && x.searchText !== "",
-      vividElement.html`<slot name="no-matches">
+      fastElement.html`<slot name="no-matches">
 										${(x) => x.locale.searchableSelect.noMatchesMessage}
 									</slot>`
     )}
@@ -1211,7 +1223,7 @@ function renderControl(context) {
 }
 const SearchableSelectTemplate = (context) => {
   const optionTagTag = context.tagFor(OptionTag);
-  return vividElement.html`
+  return fastElement.html`
 		<template
 			:_optionTagTagName="${() => optionTagTag}"
 			@mousedown="${(x, c) => x._onMouseDown(c.event)}"
@@ -1223,7 +1235,7 @@ const SearchableSelectTemplate = (context) => {
 	`;
 };
 
-const getClasses = ({ shape, connotation, disabled, removable }) => classNames.classNames(
+const getClasses = ({ shape, connotation, disabled, removable }) => fastWebUtilities.classNames(
   "base",
   ["disabled", disabled],
   ["removable", removable],
@@ -1231,7 +1243,7 @@ const getClasses = ({ shape, connotation, disabled, removable }) => classNames.c
   [`connotation-${connotation}`, Boolean(connotation)]
 );
 function renderRemoveButton(iconTag) {
-  return vividElement.html`
+  return fastElement.html`
 		<span
 			class="remove-button"
 			aria-label="${(x) => x.locale.searchableSelect.removeTagButtonLabel(x.label)}"
@@ -1244,19 +1256,19 @@ function renderRemoveButton(iconTag) {
 	`;
 }
 const optionTagTemplate = (context) => {
-  const iconTag = context.tagFor(definition$3.Icon);
-  return vividElement.html`<span class="${getClasses}" aria-disabled="${(x) => x.disabled}">
+  const iconTag = context.tagFor(icon_definition.VwcIconElement);
+  return fastElement.html`<span class="${getClasses}" aria-disabled="${(x) => x.disabled}">
 		<slot name="icon" aria-hidden="true">
-			${when.when(
+			${fastElement.when(
     (x) => x.hasIconPlaceholder,
-    vividElement.html`<div class="icon-placeholder"></div>`
+    fastElement.html`<div class="icon-placeholder"></div>`
   )}
 		</slot>
-		${when.when(
+		${fastElement.when(
     (x) => x.label,
-    (x) => vividElement.html`<span class="label">${x.label}</span>`
+    (x) => fastElement.html`<span class="label">${x.label}</span>`
   )}
-		${when.when((x) => x.removable, renderRemoveButton(iconTag))}
+		${fastElement.when((x) => x.removable, renderRemoveButton(iconTag))}
 	</span>`;
 };
 
@@ -1264,7 +1276,7 @@ const optionTagDefinition = vividElement.defineVividComponent(
   "option-tag",
   OptionTag,
   optionTagTemplate,
-  [definition$3.iconDefinition],
+  [icon_definition.iconDefinition],
   {
     styles: [optionTagStyles],
     shadowOptions: {
@@ -1277,11 +1289,11 @@ const searchableSelectDefinition = vividElement.defineVividComponent(
   SearchableSelect,
   SearchableSelectTemplate,
   [
-    definition$1.buttonDefinition,
-    definition.popupDefinition,
-    definition$3.iconDefinition,
+    button_definition.buttonDefinition,
+    popup_definition.popupDefinition,
+    icon_definition.iconDefinition,
     optionTagDefinition,
-    definition$2.progressRingDefinition,
+    progressRing_definition.progressRingDefinition,
     mixins.feedbackMessageDefinition
   ],
   {
@@ -1292,5 +1304,5 @@ const registerSearchableSelect = vividElement.createRegisterFunction(
   searchableSelectDefinition
 );
 
-exports.SearchableSelect = SearchableSelect;
+exports.VwcSearchableSelectElement = SearchableSelect;
 exports.registerSearchableSelect = registerSearchableSelect;