@vonage/vivid 5.1.0 → 5.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "type": "module",
   "module": "./index.js",
   "main": "./index.cjs",

package/searchable-select/definition.cjs

@@ -12,6 +12,7 @@ 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');
@@ -20,7 +21,7 @@ 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}";
+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}";
 
@@ -37,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)))
+          )
         )
       )
     )
@@ -758,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] : [];
   }
@@ -837,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;
     }
@@ -1142,18 +1151,18 @@ function setFixedDropdownVarWidth(x) {
 function renderControl(context) {
   const popupTag = context.tagFor(popup_definition.Popup);
   return fastElement.html`
-		${fastElement.when(
-    (x) => x.label || x.multiple && x.maxSelected && x.maxSelected >= 1,
+		<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.multiple && x.maxSelected && x.maxSelected >= 1,
-      renderSelectionCount()
-    )}
-				</div>
-			`
+					<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>

package/searchable-select/definition.js

@@ -4,10 +4,11 @@ import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
 import { VwcProgressRingElement as ProgressRing, progressRingDefinition } from '../progress-ring/definition.js';
 import { V as VividElement, c as createRegisterFunction, d as defineVividComponent } from '../unbundled/vivid-element.js';
 import { a as WithFeedback, f as feedbackMessageDefinition } from '../unbundled/mixins.js';
-import { Observable, DOM, attr, nullableNumberConverter, observable, html, when, ref, slotted, repeat } from '@microsoft/fast-element';
+import { Observable, DOM, attr, nullableNumberConverter, observable, html, when, slotted, ref, repeat } from '@microsoft/fast-element';
 import { s as scrollIntoView } from '../unbundled/scrollIntoView.js';
 import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.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';
@@ -16,7 +17,7 @@ import { L as Localized } from '../unbundled/localized.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { i as isListboxOption } from '../unbundled/option.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)}: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}";
+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}";
 
@@ -33,12 +34,14 @@ const TagGapPx = 8;
 const InputMinWidthPx = 100;
 const PageSize = 10;
 const isFormAssociatedTryingToSetFormValue = (value) => typeof value === "string";
-class SearchableSelect extends WithFeedback(
-  WithErrorText(
-    WithSuccessText(
-      FormElement(
-        DelegatesAria(
-          AffixIconWithTrailing(Localized(FormAssociated(VividElement)))
+class SearchableSelect extends WithContextualHelp(
+  WithFeedback(
+    WithErrorText(
+      WithSuccessText(
+        FormElement(
+          DelegatesAria(
+            AffixIconWithTrailing(Localized(FormAssociated(VividElement)))
+          )
         )
       )
     )
@@ -754,6 +757,12 @@ class SearchableSelect extends WithFeedback(
       }
     }
   }
+  /**
+   * @internal
+   */
+  get _hasSelectionCount() {
+    return this.multiple && this.maxSelected && this.maxSelected >= 1;
+  }
   #determineInitialValues() {
     return this.initialValues.length ? this.initialValues : this.initialValue ? [this.initialValue] : [];
   }
@@ -833,7 +842,7 @@ class SearchableSelect extends 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;
     }
@@ -1138,18 +1147,18 @@ function setFixedDropdownVarWidth(x) {
 function renderControl(context) {
   const popupTag = context.tagFor(Popup);
   return html`
-		${when(
-    (x) => x.label || x.multiple && x.maxSelected && x.maxSelected >= 1,
+		<div class="label-wrapper" ?hidden=${(x) => !x.label && !x._hasContextualHelp && !x._hasSelectionCount}>
+			${when(
+    (x) => x.label || x._hasSelectionCount,
     html`
-				<div>
-					${when((x) => x.label, renderLabel())}
-					${when(
-      (x) => x.multiple && x.maxSelected && x.maxSelected >= 1,
-      renderSelectionCount()
-    )}
-				</div>
-			`
+					<div>
+						${when((x) => x.label, renderLabel())}
+						${when((x) => x._hasSelectionCount, renderSelectionCount())}
+					</div>
+				`
   )}
+			<slot name="contextual-help" ${slotted("_contextualHelpSlottedContent")}></slot>
+		</div>
 		<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
 			${(x) => x._changeDescription}
 		</span>

package/searchable-select/index.cjs

@@ -1,13 +1,13 @@
-"use strict";const x=require("../bundled/definition3.cjs"),C=require("../bundled/definition9.cjs"),y=require("../bundled/definition2.cjs"),I=require("../bundled/definition15.cjs"),s=require("../bundled/vivid-element.cjs"),F=require("../bundled/mixins.cjs"),V=require("../bundled/scrollIntoView.cjs"),D=require("../bundled/delegates-aria.cjs"),z=require("../bundled/form-associated.cjs"),E=require("../bundled/with-error-text.cjs"),q=require("../bundled/with-success-text.cjs"),P=require("../bundled/form-element.cjs"),w=require("../bundled/affix.cjs"),R=require("../bundled/localized.cjs"),L=require("../bundled/option.cjs"),u=require("../bundled/when.cjs"),_=require("../bundled/ref.cjs"),M=require("../bundled/slotted.cjs"),$=require("../bundled/class-names.cjs"),m=require("../bundled/repeat.cjs"),A=".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}",B='.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}';var N=Object.defineProperty,c=(l,t,e,a)=>{for(var i=void 0,n=l.length-1,v;n>=0;n--)(v=l[n])&&(i=v(t,e,i)||i);return i&&N(t,e,i),i};const g=8,W=100,O=10,K=l=>typeof l=="string";class r extends F.WithFeedback(E.WithErrorText(q.WithSuccessText(P.FormElement(D.DelegatesAria(w.AffixIconWithTrailing(R.Localized(z.FormAssociated(s.VividElement)))))))){constructor(){super(...arguments),this.fixedDropdown=!1,this.open=!1,this.multiple=!1,this.externalTags=!1,this.maxLines=null,this.values=[],this.initialValues=[],this._currentSearchText=null,this._areOptionsInitialized=!1,this.#s={handleChange:(t,e)=>{t.selected&&!this.values.includes(t.value)?this.values=[...this.values,t.value]:!t.selected&&this.values.includes(t.value)&&(this.values=this.values.filter(a=>a!==t.value))}},this.#t=new Map,this._filteredOptions=[],this._filteredEnabledOptions=[],this.loading=!1,this._highlightedOptionIndex=null,this._numElidedTags=0,this._tagRows=[],this._lastTagRow=[],this.clearable=!1,this.maxSelected=null,this._slottedDisabledOptions=[],this.proxy=document.createElement("input"),this.setFormValue=(t,e)=>{K(t)||super.setFormValue(t,e)},this._changeDescription="",this.#d=new ResizeObserver(()=>{this.#u()})}openChanged(){this.open||this.#e(null)}valuesChanged(){if(this._areOptionsInitialized){if(!this.multiple&&this.values.length>1){this.values=[this.values[0]];return}if(this.values.some(t=>!this.#h(t))){this.values=this.values.filter(t=>this.#h(t));return}this.value=this.values.length?this.values[0]:"",this.#c(),this.#_(),this.$fastController.isConnected&&this.#u(),this.#g()}}#a(t){this.values=t,this.$emit("change",void 0,{bubbles:!1}),this.$emit("input",void 0,{bubbles:!1})}#b(t){const e=new Set(this.values),a=new Set(t);this.values=[...this.values].filter(i=>a.has(i)).concat([...t].filter(i=>!e.has(i)))}initialValuesChanged(){this.dirtyValue||(this.values=this.initialValues,this.dirtyValue=!1)}#h(t){return this._slottedOptions.some(e=>e.value===t)}valueChanged(t,e){if(super.valueChanged(t,e),!this._areOptionsInitialized)return;const a=this._slottedOptions.some(i=>i.value===e);this.values[0]!==e&&(this.values=a?[e]:[])}get selectedIndex(){return this.values.length?this._slottedOptions.findIndex(t=>t.value===this.values[0]):-1}set selectedIndex(t){this.value=this._slottedOptions[t]?.value??""}get options(){return[...this._slottedOptions]}get selectedOptions(){return this._slottedOptions.filter(t=>this.values.includes(t.value))}_currentSearchTextChanged(){this.#o(),this.$emit("search-text-change",void 0,{bubbles:!1,composed:!1})}get searchText(){return this._currentSearchText??""}get _inputValue(){return this._currentSearchText??(!this.multiple&&this.value!==""?this.#k(this.value)??"":"")}_onInputInput(t){this._currentSearchText=t.target.value}_onInputFocus(t){this.#o()}_onInputBlur(t){this.open=!1,this._currentSearchText=null,this._changeDescription=""}_onInputKeydown(t){if(t.ctrlKey||t.shiftKey)return!0;switch(t.key){case"Enter":return this.#x(),this._inputValue===""&&(this.open=!this.open),!1;case"Escape":this.open=!1;break;case"Home":if(!this.open){this.open=!0;break}return this.#w(),!1;case"End":if(!this.open){this.open=!0;break}return this.#y(),!1;case"PageUp":if(!this.open){this.open=!0;break}return this.#$(),!1;case"PageDown":if(!this.open){this.open=!0;break}return this.#T(),!1;case"ArrowUp":if(!this.open){this.open=!0;break}return this.#O(),!1;case"ArrowDown":if(!this.open){this.open=!0;break}return this.#S(),!1;case"ArrowLeft":return this.multiple&&this._inputValue===""&&this.values.length&&!this.externalTags?(this.#i(this.#r(this.values.length)),!1):!0;case"Backspace":return this.multiple&&this._inputValue===""&&this.values.length?(this._onTagRemoved(this.values[this.values.length-1]),!1):!0;default:return this.open||(this.open=!0),!0}return!0}_slottedOptionsChanged(t,e){const a=!!this.querySelectorAll(":not([slot])").length;if(!e.length&&a)return;if(this._areOptionsInitialized=!0,t){this._slottedDisabledOptions=[];for(const n of t)s.Observable.getNotifier(n).unsubscribe(this.#s,"selected")}if(e)for(const n of e)n._displayCheckmark=!0,s.Observable.getNotifier(n).subscribe(this.#s,"selected");const i=[];for(const n of this._slottedOptions)(n.selected||n.value===this.value||this.values.includes(n.value))&&i.push(n.value),n.disabled&&this._slottedDisabledOptions.push(n);this.#b(i),this.#o(),this.#c()}#s;#_(){for(const t of this._slottedOptions)t.selected=this.values.includes(t.value),this.#m(t)}#p(t){const e=t.value;let a,i=!1;const n=!this.values.includes(e);this.multiple?(n?a=[...this.values,e]:a=this.values.filter(p=>p!==e),i=!0):(n?(a=[e],i=!0):a=[],this.open=!1),this.#a(a);const v=n?this.locale.searchableSelect.optionSelectedMessage(t._getAccessibleName()):this.locale.searchableSelect.optionDeselectedMessage(t._getAccessibleName()),h=this.multiple&&this.maxSelected&&this.maxSelected>=1?this.locale.searchableSelect.maxSelectedMessage(this.values.length,this.maxSelected):"";this._changeDescription=`${v} ${h}`,i&&(this._currentSearchText=null)}#t;#l(t){return t.querySelector('[slot="tag-icon"]')}_tagIconSlotName(t){return`_tag-icon-${this.values.indexOf(t)}`}#m(t){if(t.selected&&this.#l(t)){let e=this.#t.get(t);e||(e=this.#l(t).cloneNode(!0),this.#t.set(t,e)),e.slot=this._tagIconSlotName(t.value),this.appendChild(e)}else{const e=this.#t.get(t);e&&(e.remove(),this.#t.delete(t))}}optionFilterChanged(){this.#o()}loadingChanged(t,e){this._changeDescription=this.locale.searchableSelect.loadingOptionsMessage,t&&!e&&(this._changeDescription="")}#o(){const t=[],e=this.optionFilter??((a,i)=>a.text.toLowerCase().includes(i.toLowerCase()));for(const a of this._slottedOptions??[]){a._vvdSearchText=this.searchText;const i=!this.searchText||e(a,this.searchText);a._isNotMatching=!i,!a.hidden&&i&&t.push(a)}this.#e(null),this._filteredOptions=t,this._filteredEnabledOptions=t.filter(a=>!a.disabled)}#e(t){if(typeof this._highlightedOptionIndex=="number"){const e=this._filteredEnabledOptions[this._highlightedOptionIndex];e._highlighted=!1,e.removeAttribute("data-highlighted")}if(typeof t=="number"&&(this._filteredEnabledOptions.length?t=Math.max(0,Math.min(this._filteredEnabledOptions.length-1,t)):t=null),this._highlightedOptionIndex=t,typeof this._highlightedOptionIndex=="number"){const e=this._filteredEnabledOptions[this._highlightedOptionIndex];e._highlighted=!0,e.setAttribute("data-highlighted",""),V.scrollIntoView(e,this._listbox,"nearest"),this._changeDescription=this.locale.searchableSelect.optionFocusedMessage(e._getAccessibleName(),this._highlightedOptionIndex+1,this._filteredEnabledOptions.length,e.selected)}}#x(){this._highlightedOptionIndex!==null&&this.#p(this._filteredEnabledOptions[this._highlightedOptionIndex])}#w(){this.#e(0)}#y(){this.#e(this._filteredEnabledOptions.length-1)}#$(){this.#e((this._highlightedOptionIndex??this._filteredEnabledOptions.length)-O)}#T(){this.#e((this._highlightedOptionIndex??-1)+O)}#O(){this.#e((this._highlightedOptionIndex??this._filteredEnabledOptions.length)-1)}#S(){this.#e((this._highlightedOptionIndex??-1)+1)}_tagLabelForValue(t){return this._slottedOptions.find(a=>a.value===t).label}_tagConnotationForValue(t){return this._slottedOptions.find(a=>a.value===t).tagConnotation}_isTagDisabled(t){const e=this._slottedOptions.find(a=>a.value===t);return this.disabled||e.disabled}#k(t){return this._slottedOptions?.find(a=>a.value===t)?.label}#n(t,e,a){const i=document.createElement(this._optionTagTagName);i.label=t,i.removable=e,i.style.cssText="position: absolute; visibility: hidden;",i.hasIconPlaceholder=a,this.shadowRoot.appendChild(i);const n=i.getBoundingClientRect().width;return i.remove(),n}#u(){if(!this.multiple){this._numElidedTags=0,this._tagRows=[],this._lastTagRow=[];return}if(this.externalTags){this._numElidedTags=this.values.length,this._tagRows=[],this._lastTagRow=[];return}const t=this._contentArea.getBoundingClientRect().width,e=[[]];let a=0,i=W,n;for(n=this.values.length-1;n>=0;n--){const h=this.maxLines&&a===this.maxLines-1,p=this.#n(this._tagLabelForValue(this.values[n]),!0,this.#l(this.selectedOptions[n])!==null),o={value:this.values[n],width:p};let d=0;if(h){const T=n;T&&(d=g+this.#n(T.toString(),!1,!1))}if(i+g+p+d>t){if(h)if(n===this.values.length-1)e[a].unshift(o),i+=g+p;else break;else e.push([]),a++,e[a].unshift(o),i=p;continue}e[a].unshift(o),i+=g+p}this._numElidedTags=n+1,e.reverse();for(let h=0;h<e.length-1;h++){let p=e[h].map(o=>o.width).reduce((o,d)=>o+d,0)+(e[h].length-1)*g;for(h===0&&this._numElidedTags&&(p+=g+this.#n(this._numElidedTags.toString(),!1,!1));e[h+1].length&&p+g+e[h+1][0].width<=t;){const o=e[h+1].shift();e[h].push(o),p+=g+o.width}}const v=e.map(h=>h.map(p=>p.value));this._tagRows=v.slice(0,-1),this._lastTagRow=v.slice(-1)[0]}_onTagRemoved(t){this.#a(this.values.filter(e=>e!==t)),this.#o()}_onTagKeydown(t){const e=parseInt(t.target.dataset.index);switch(t.key){case"Backspace":case"Delete":case"Enter":case" ":{this._onTagRemoved(this.values[e]),s.DOM.processUpdates(),this.#i(this.#C(e));break}case"ArrowLeft":this.#i(this.#r(e)??e);break;case"ArrowRight":this.#i(this.#v(e));break}return!0}#i(t){t===null?this._input.focus():this.shadowRoot.querySelector(`[data-index="${t}"]`)?.focus()}#r(t){if(!this.values.length)return null;for(let e=t-1;e>=0;e--)if(!this._isTagDisabled(this.values[e]))return e;return null}#v(t){if(!this.values.length)return null;for(let e=t+1;e<this.values.length;e++)if(!this._isTagDisabled(this.values[e]))return e;return null}#C(t){return this.#v(t-1)??this.#r(t)}_onListboxClick(t){if(this.disabled)return;const e=t.target.closest("option,[role=option],[data-vvd-component=option]");e&&!e.disabled&&this.#p(e)}get _shouldShowClearButton(){return this.clearable&&this.values.length>0}_onClearButtonClick(){this.#a(this.selectedOptions.filter(t=>t.disabled).map(t=>t.value))}maxSelectedChanged(){this.#c()}#c(){if(!this.multiple||!this._slottedOptions||typeof this.maxSelected!="number"||this.maxSelected<=0)return;const t=this._slottedOptions.filter(e=>!this._slottedDisabledOptions.includes(e));if(this.values.length>=this.maxSelected){const e=t.filter(a=>!this.selectedOptions.includes(a));for(const a of e)a.disabled=!0}else for(const e of t)e.disabled=!1}#f(){return this.initialValues.length?this.initialValues:this.initialValue?[this.initialValue]:[]}nameChanged(t,e){super.nameChanged(t,e),this.#g()}#g(){if(!this.name)this.setFormValue(null);else{const t=new FormData;for(const e of this.values)t.append(this.name,e);this.setFormValue(t)}}formResetCallback(){super.formResetCallback(),this.#a(this.#f())}#d;_onFieldsetClick(t){this.disabled||t.defaultPrevented||(this._input.focus(),this.open=!0)}_onChevronClick(){return this.open?(this.open=!1,!1):!0}connectedCallback(){super.connectedCallback(),this.values.length||(this.values=this.#f()),this.#d.observe(this._contentArea)}disconnectedCallback(){super.disconnectedCallback(),this.#d.disconnect()}validate(){super.validate(this._input??void 0)}focus(t){this._input?.focus(t)}_onMouseDown(t){const e=t.composedPath()[0];return!t.defaultPrevented&&e!==this._input?(this._input.focus(),!1):!0}}c([s.attr],r.prototype,"appearance");c([s.attr],r.prototype,"shape");c([s.attr({mode:"boolean",attribute:"fixed-dropdown"})],r.prototype,"fixedDropdown");c([s.attr],r.prototype,"placeholder");c([s.attr({mode:"boolean"})],r.prototype,"open");c([s.attr({mode:"boolean"})],r.prototype,"multiple");c([s.attr({attribute:"external-tags",mode:"boolean"})],r.prototype,"externalTags");c([s.attr({attribute:"max-lines",converter:s.nullableNumberConverter})],r.prototype,"maxLines");c([s.observable],r.prototype,"values");c([s.observable],r.prototype,"initialValues");c([s.observable],r.prototype,"_input");c([s.observable],r.prototype,"_currentSearchText");c([s.observable],r.prototype,"_slottedOptions");c([s.observable],r.prototype,"optionFilter");c([s.observable],r.prototype,"_filteredOptions");c([s.observable],r.prototype,"_filteredEnabledOptions");c([s.attr({mode:"boolean"})],r.prototype,"loading");c([s.observable],r.prototype,"_highlightedOptionIndex");c([s.observable],r.prototype,"_contentArea");c([s.observable],r.prototype,"_numElidedTags");c([s.observable],r.prototype,"_tagRows");c([s.observable],r.prototype,"_lastTagRow");c([s.observable],r.prototype,"_listbox");c([s.attr({mode:"boolean"})],r.prototype,"clearable");c([s.attr({attribute:"max-selected",converter:s.nullableNumberConverter})],r.prototype,"maxSelected");c([s.observable],r.prototype,"_slottedDisabledOptions");c([s.observable],r.prototype,"_changeDescription");c([s.observable],r.prototype,"_anchor");var H=Object.defineProperty,b=(l,t,e,a)=>{for(var i=void 0,n=l.length-1,v;n>=0;n--)(v=l[n])&&(i=v(t,e,i)||i);return i&&H(t,e,i),i};class f extends R.Localized(s.VividElement){constructor(){super(...arguments),this.removable=!1,this.disabled=!1,this.hasIconPlaceholder=!1}_onClickRemove(){this.$emit("remove",void 0,{bubbles:!1})}}b([s.attr],f.prototype,"shape");b([s.observable],f.prototype,"connotation");b([s.attr],f.prototype,"label");b([s.attr({mode:"boolean"})],f.prototype,"removable");b([s.attr({mode:"boolean"})],f.prototype,"disabled");b([s.observable],f.prototype,"hasIconPlaceholder");const j=l=>$.classNames(["disabled",l.disabled],[`appearance-${l.appearance}`,!!l.appearance],[`shape-${l.shape}`,!!l.shape],["error",!!l.errorValidationMessage],["success",!!l.successText],["has-highlighted-option",l._highlightedOptionIndex!==null]);function U(){return s.html`
+"use strict";const x=require("../bundled/definition3.cjs"),I=require("../bundled/definition9.cjs"),y=require("../bundled/definition2.cjs"),F=require("../bundled/definition15.cjs"),s=require("../bundled/vivid-element.cjs"),D=require("../bundled/mixins.cjs"),z=require("../bundled/scrollIntoView.cjs"),R=require("../bundled/delegates-aria.cjs"),E=require("../bundled/form-associated.cjs"),q=require("../bundled/with-contextual-help.cjs"),P=require("../bundled/with-error-text.cjs"),L=require("../bundled/with-success-text.cjs"),M=require("../bundled/form-element.cjs"),w=require("../bundled/affix.cjs"),V=require("../bundled/localized.cjs"),A=require("../bundled/option.cjs"),u=require("../bundled/when.cjs"),O=require("../bundled/slotted.cjs"),_=require("../bundled/ref.cjs"),$=require("../bundled/class-names.cjs"),m=require("../bundled/repeat.cjs"),B=".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}",N='.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}';var W=Object.defineProperty,c=(l,t,e,a)=>{for(var i=void 0,n=l.length-1,v;n>=0;n--)(v=l[n])&&(i=v(t,e,i)||i);return i&&W(t,e,i),i};const g=8,H=100,S=10,K=l=>typeof l=="string";class r extends q.WithContextualHelp(D.WithFeedback(P.WithErrorText(L.WithSuccessText(M.FormElement(R.DelegatesAria(w.AffixIconWithTrailing(V.Localized(E.FormAssociated(s.VividElement))))))))){constructor(){super(...arguments),this.fixedDropdown=!1,this.open=!1,this.multiple=!1,this.externalTags=!1,this.maxLines=null,this.values=[],this.initialValues=[],this._currentSearchText=null,this._areOptionsInitialized=!1,this.#s={handleChange:(t,e)=>{t.selected&&!this.values.includes(t.value)?this.values=[...this.values,t.value]:!t.selected&&this.values.includes(t.value)&&(this.values=this.values.filter(a=>a!==t.value))}},this.#t=new Map,this._filteredOptions=[],this._filteredEnabledOptions=[],this.loading=!1,this._highlightedOptionIndex=null,this._numElidedTags=0,this._tagRows=[],this._lastTagRow=[],this.clearable=!1,this.maxSelected=null,this._slottedDisabledOptions=[],this.proxy=document.createElement("input"),this.setFormValue=(t,e)=>{K(t)||super.setFormValue(t,e)},this._changeDescription="",this.#d=new ResizeObserver(()=>{this.#u()})}openChanged(){this.open||this.#e(null)}valuesChanged(){if(this._areOptionsInitialized){if(!this.multiple&&this.values.length>1){this.values=[this.values[0]];return}if(this.values.some(t=>!this.#p(t))){this.values=this.values.filter(t=>this.#p(t));return}this.value=this.values.length?this.values[0]:"",this.#c(),this.#_(),this.$fastController.isConnected&&this.#u(),this.#g()}}#a(t){this.values=t,this.$emit("change",void 0,{bubbles:!1}),this.$emit("input",void 0,{bubbles:!1})}#b(t){const e=new Set(this.values),a=new Set(t);this.values=[...this.values].filter(i=>a.has(i)).concat([...t].filter(i=>!e.has(i)))}initialValuesChanged(){this.dirtyValue||(this.values=this.initialValues,this.dirtyValue=!1)}#p(t){return this._slottedOptions.some(e=>e.value===t)}valueChanged(t,e){if(super.valueChanged(t,e),!this._areOptionsInitialized)return;const a=this._slottedOptions.some(i=>i.value===e);this.values[0]!==e&&(this.values=a?[e]:[])}get selectedIndex(){return this.values.length?this._slottedOptions.findIndex(t=>t.value===this.values[0]):-1}set selectedIndex(t){this.value=this._slottedOptions[t]?.value??""}get options(){return[...this._slottedOptions]}get selectedOptions(){return this._slottedOptions.filter(t=>this.values.includes(t.value))}_currentSearchTextChanged(){this.#o(),this.$emit("search-text-change",void 0,{bubbles:!1,composed:!1})}get searchText(){return this._currentSearchText??""}get _inputValue(){return this._currentSearchText??(!this.multiple&&this.value!==""?this.#k(this.value)??"":"")}_onInputInput(t){this._currentSearchText=t.target.value}_onInputFocus(t){this.#o()}_onInputBlur(t){this.open=!1,this._currentSearchText=null,this._changeDescription=""}_onInputKeydown(t){if(t.ctrlKey||t.shiftKey)return!0;switch(t.key){case"Enter":return this.#x(),this._inputValue===""&&(this.open=!this.open),!1;case"Escape":this.open=!1;break;case"Home":if(!this.open){this.open=!0;break}return this.#w(),!1;case"End":if(!this.open){this.open=!0;break}return this.#y(),!1;case"PageUp":if(!this.open){this.open=!0;break}return this.#$(),!1;case"PageDown":if(!this.open){this.open=!0;break}return this.#T(),!1;case"ArrowUp":if(!this.open){this.open=!0;break}return this.#O(),!1;case"ArrowDown":if(!this.open){this.open=!0;break}return this.#S(),!1;case"ArrowLeft":return this.multiple&&this._inputValue===""&&this.values.length&&!this.externalTags?(this.#i(this.#r(this.values.length)),!1):!0;case"Backspace":return this.multiple&&this._inputValue===""&&this.values.length?(this._onTagRemoved(this.values[this.values.length-1]),!1):!0;default:return this.open||(this.open=!0),!0}return!0}_slottedOptionsChanged(t,e){const a=!!this.querySelectorAll(":not([slot])").length;if(!e.length&&a)return;if(this._areOptionsInitialized=!0,t){this._slottedDisabledOptions=[];for(const n of t)s.Observable.getNotifier(n).unsubscribe(this.#s,"selected")}if(e)for(const n of e)n._displayCheckmark=!0,s.Observable.getNotifier(n).subscribe(this.#s,"selected");const i=[];for(const n of this._slottedOptions)(n.selected||n.value===this.value||this.values.includes(n.value))&&i.push(n.value),n.disabled&&this._slottedDisabledOptions.push(n);this.#b(i),this.#o(),this.#c()}#s;#_(){for(const t of this._slottedOptions)t.selected=this.values.includes(t.value),this.#m(t)}#h(t){const e=t.value;let a,i=!1;const n=!this.values.includes(e);this.multiple?(n?a=[...this.values,e]:a=this.values.filter(h=>h!==e),i=!0):(n?(a=[e],i=!0):a=[],this.open=!1),this.#a(a);const v=n?this.locale.searchableSelect.optionSelectedMessage(t._getAccessibleName()):this.locale.searchableSelect.optionDeselectedMessage(t._getAccessibleName()),p=this.multiple&&this.maxSelected&&this.maxSelected>=1?this.locale.searchableSelect.maxSelectedMessage(this.values.length,this.maxSelected):"";this._changeDescription=`${v} ${p}`,i&&(this._currentSearchText=null)}#t;#l(t){return t.querySelector('[slot="tag-icon"]')}_tagIconSlotName(t){return`_tag-icon-${this.values.indexOf(t)}`}#m(t){if(t.selected&&this.#l(t)){let e=this.#t.get(t);e||(e=this.#l(t).cloneNode(!0),this.#t.set(t,e)),e.slot=this._tagIconSlotName(t.value),this.appendChild(e)}else{const e=this.#t.get(t);e&&(e.remove(),this.#t.delete(t))}}optionFilterChanged(){this.#o()}loadingChanged(t,e){this._changeDescription=this.locale.searchableSelect.loadingOptionsMessage,t&&!e&&(this._changeDescription="")}#o(){const t=[],e=this.optionFilter??((a,i)=>a.text.toLowerCase().includes(i.toLowerCase()));for(const a of this._slottedOptions??[]){a._vvdSearchText=this.searchText;const i=!this.searchText||e(a,this.searchText);a._isNotMatching=!i,!a.hidden&&i&&t.push(a)}this.#e(null),this._filteredOptions=t,this._filteredEnabledOptions=t.filter(a=>!a.disabled)}#e(t){if(typeof this._highlightedOptionIndex=="number"){const e=this._filteredEnabledOptions[this._highlightedOptionIndex];e._highlighted=!1,e.removeAttribute("data-highlighted")}if(typeof t=="number"&&(this._filteredEnabledOptions.length?t=Math.max(0,Math.min(this._filteredEnabledOptions.length-1,t)):t=null),this._highlightedOptionIndex=t,typeof this._highlightedOptionIndex=="number"){const e=this._filteredEnabledOptions[this._highlightedOptionIndex];e._highlighted=!0,e.setAttribute("data-highlighted",""),z.scrollIntoView(e,this._listbox,"nearest"),this._changeDescription=this.locale.searchableSelect.optionFocusedMessage(e._getAccessibleName(),this._highlightedOptionIndex+1,this._filteredEnabledOptions.length,e.selected)}}#x(){this._highlightedOptionIndex!==null&&this.#h(this._filteredEnabledOptions[this._highlightedOptionIndex])}#w(){this.#e(0)}#y(){this.#e(this._filteredEnabledOptions.length-1)}#$(){this.#e((this._highlightedOptionIndex??this._filteredEnabledOptions.length)-S)}#T(){this.#e((this._highlightedOptionIndex??-1)+S)}#O(){this.#e((this._highlightedOptionIndex??this._filteredEnabledOptions.length)-1)}#S(){this.#e((this._highlightedOptionIndex??-1)+1)}_tagLabelForValue(t){return this._slottedOptions.find(a=>a.value===t).label}_tagConnotationForValue(t){return this._slottedOptions.find(a=>a.value===t).tagConnotation}_isTagDisabled(t){const e=this._slottedOptions.find(a=>a.value===t);return this.disabled||e.disabled}#k(t){return this._slottedOptions?.find(a=>a.value===t)?.label}#n(t,e,a){const i=document.createElement(this._optionTagTagName);i.label=t,i.removable=e,i.style.cssText="position: absolute; visibility: hidden;",i.hasIconPlaceholder=a,this.shadowRoot.appendChild(i);const n=i.getBoundingClientRect().width;return i.remove(),n}#u(){if(!this.multiple){this._numElidedTags=0,this._tagRows=[],this._lastTagRow=[];return}if(this.externalTags){this._numElidedTags=this.values.length,this._tagRows=[],this._lastTagRow=[];return}const t=this._contentArea.getBoundingClientRect().width,e=[[]];let a=0,i=H,n;for(n=this.values.length-1;n>=0;n--){const p=this.maxLines&&a===this.maxLines-1,h=this.#n(this._tagLabelForValue(this.values[n]),!0,this.#l(this.selectedOptions[n])!==null),o={value:this.values[n],width:h};let d=0;if(p){const T=n;T&&(d=g+this.#n(T.toString(),!1,!1))}if(i+g+h+d>t){if(p)if(n===this.values.length-1)e[a].unshift(o),i+=g+h;else break;else e.push([]),a++,e[a].unshift(o),i=h;continue}e[a].unshift(o),i+=g+h}this._numElidedTags=n+1,e.reverse();for(let p=0;p<e.length-1;p++){let h=e[p].map(o=>o.width).reduce((o,d)=>o+d,0)+(e[p].length-1)*g;for(p===0&&this._numElidedTags&&(h+=g+this.#n(this._numElidedTags.toString(),!1,!1));e[p+1].length&&h+g+e[p+1][0].width<=t;){const o=e[p+1].shift();e[p].push(o),h+=g+o.width}}const v=e.map(p=>p.map(h=>h.value));this._tagRows=v.slice(0,-1),this._lastTagRow=v.slice(-1)[0]}_onTagRemoved(t){this.#a(this.values.filter(e=>e!==t)),this.#o()}_onTagKeydown(t){const e=parseInt(t.target.dataset.index);switch(t.key){case"Backspace":case"Delete":case"Enter":case" ":{this._onTagRemoved(this.values[e]),s.DOM.processUpdates(),this.#i(this.#C(e));break}case"ArrowLeft":this.#i(this.#r(e)??e);break;case"ArrowRight":this.#i(this.#v(e));break}return!0}#i(t){t===null?this._input.focus():this.shadowRoot.querySelector(`[data-index="${t}"]`)?.focus()}#r(t){if(!this.values.length)return null;for(let e=t-1;e>=0;e--)if(!this._isTagDisabled(this.values[e]))return e;return null}#v(t){if(!this.values.length)return null;for(let e=t+1;e<this.values.length;e++)if(!this._isTagDisabled(this.values[e]))return e;return null}#C(t){return this.#v(t-1)??this.#r(t)}_onListboxClick(t){if(this.disabled)return;const e=t.target.closest("option,[role=option],[data-vvd-component=option]");e&&!e.disabled&&this.#h(e)}get _shouldShowClearButton(){return this.clearable&&this.values.length>0}_onClearButtonClick(){this.#a(this.selectedOptions.filter(t=>t.disabled).map(t=>t.value))}maxSelectedChanged(){this.#c()}#c(){if(!this.multiple||!this._slottedOptions||typeof this.maxSelected!="number"||this.maxSelected<=0)return;const t=this._slottedOptions.filter(e=>!this._slottedDisabledOptions.includes(e));if(this.values.length>=this.maxSelected){const e=t.filter(a=>!this.selectedOptions.includes(a));for(const a of e)a.disabled=!0}else for(const e of t)e.disabled=!1}get _hasSelectionCount(){return this.multiple&&this.maxSelected&&this.maxSelected>=1}#f(){return this.initialValues.length?this.initialValues:this.initialValue?[this.initialValue]:[]}nameChanged(t,e){super.nameChanged(t,e),this.#g()}#g(){if(!this.name)this.setFormValue(null);else{const t=new FormData;for(const e of this.values)t.append(this.name,e);this.setFormValue(t)}}formResetCallback(){super.formResetCallback(),this.#a(this.#f())}#d;_onFieldsetClick(t){this.disabled||t.defaultPrevented||(this._input.focus(),this.open=!0)}_onChevronClick(){return this.open?(this.open=!1,!1):!0}connectedCallback(){super.connectedCallback(),this.values.length||(this.values=this.#f()),this.#d.observe(this._contentArea)}disconnectedCallback(){super.disconnectedCallback(),this.#d.disconnect()}validate(){super.validate(this._input??void 0)}focus(t){this._input?.focus(t)}_onMouseDown(t){const e=t.composedPath()[0];return!t.defaultPrevented&&e!==this._input&&!this._isFromContextualHelp(t)?(this._input.focus(),!1):!0}}c([s.attr],r.prototype,"appearance");c([s.attr],r.prototype,"shape");c([s.attr({mode:"boolean",attribute:"fixed-dropdown"})],r.prototype,"fixedDropdown");c([s.attr],r.prototype,"placeholder");c([s.attr({mode:"boolean"})],r.prototype,"open");c([s.attr({mode:"boolean"})],r.prototype,"multiple");c([s.attr({attribute:"external-tags",mode:"boolean"})],r.prototype,"externalTags");c([s.attr({attribute:"max-lines",converter:s.nullableNumberConverter})],r.prototype,"maxLines");c([s.observable],r.prototype,"values");c([s.observable],r.prototype,"initialValues");c([s.observable],r.prototype,"_input");c([s.observable],r.prototype,"_currentSearchText");c([s.observable],r.prototype,"_slottedOptions");c([s.observable],r.prototype,"optionFilter");c([s.observable],r.prototype,"_filteredOptions");c([s.observable],r.prototype,"_filteredEnabledOptions");c([s.attr({mode:"boolean"})],r.prototype,"loading");c([s.observable],r.prototype,"_highlightedOptionIndex");c([s.observable],r.prototype,"_contentArea");c([s.observable],r.prototype,"_numElidedTags");c([s.observable],r.prototype,"_tagRows");c([s.observable],r.prototype,"_lastTagRow");c([s.observable],r.prototype,"_listbox");c([s.attr({mode:"boolean"})],r.prototype,"clearable");c([s.attr({attribute:"max-selected",converter:s.nullableNumberConverter})],r.prototype,"maxSelected");c([s.observable],r.prototype,"_slottedDisabledOptions");c([s.observable],r.prototype,"_changeDescription");c([s.observable],r.prototype,"_anchor");var j=Object.defineProperty,b=(l,t,e,a)=>{for(var i=void 0,n=l.length-1,v;n>=0;n--)(v=l[n])&&(i=v(t,e,i)||i);return i&&j(t,e,i),i};class f extends V.Localized(s.VividElement){constructor(){super(...arguments),this.removable=!1,this.disabled=!1,this.hasIconPlaceholder=!1}_onClickRemove(){this.$emit("remove",void 0,{bubbles:!1})}}b([s.attr],f.prototype,"shape");b([s.observable],f.prototype,"connotation");b([s.attr],f.prototype,"label");b([s.attr({mode:"boolean"})],f.prototype,"removable");b([s.attr({mode:"boolean"})],f.prototype,"disabled");b([s.observable],f.prototype,"hasIconPlaceholder");const U=l=>$.classNames(["disabled",l.disabled],[`appearance-${l.appearance}`,!!l.appearance],[`shape-${l.shape}`,!!l.shape],["error",!!l.errorValidationMessage],["success",!!l.successText],["has-highlighted-option",l._highlightedOptionIndex!==null]);function G(){return s.html`
 		<label for="control" class="label" id="label"> ${l=>l.label} </label>
-	`}function G(){return s.html`
+	`}function J(){return s.html`
 		<span
 			id="selection-count"
 			class="selection-count"
 			aria-label="${l=>l.locale.searchableSelect.maxSelectedMessage(l.values.length,l.maxSelected)}"
 			>(${l=>`${l.values.length}/${l.maxSelected}`})</span
 		>
-	`}const S=(l,t)=>{const e=l.tagFor(f);return s.html`
+	`}const k=(l,t)=>{const e=l.tagFor(f);return s.html`
 		<div class="tag-wrapper">
 			<${e}
 				class="tag"
@@ -24,7 +24,7 @@
 				<slot slot="icon" name="${(a,i)=>t(i)._tagIconSlotName(a)}"></slot>
 			</${e}>
 		</div>
-	`},k=(l,t)=>{const e=l.tagFor(f);return s.html`
+	`},C=(l,t)=>{const e=l.tagFor(f);return s.html`
 		<${e}
 			class="tag"
 			tabindex="-1"
@@ -33,9 +33,9 @@
 			?disabled="${(a,i)=>t(a,i).disabled}"
 			@mousedown="${()=>!1}">
 		</${e}>
-	`};function J(l){const t=l.tagFor(x.Button),e=l.tagFor(I.ProgressRing),a=w.affixIconTemplateFactory(l),i=x.chevronTemplateFactory(l),n=S(l,o=>o.parent),v=S(l,o=>o.parentContext.parent),h=k(l,(o,d)=>o),p=k(l,(o,d)=>d.parent);return s.html`
+	`};function Q(l){const t=l.tagFor(x.Button),e=l.tagFor(F.ProgressRing),a=w.affixIconTemplateFactory(l),i=x.chevronTemplateFactory(l),n=k(l,o=>o.parent),v=k(l,o=>o.parentContext.parent),p=C(l,(o,d)=>o),h=C(l,(o,d)=>d.parent);return s.html`
 		<div
-			class="fieldset ${j}"
+			class="fieldset ${U}"
 			@click="${(o,d)=>o._onFieldsetClick(d.event)}"
 			${_.ref("_anchor")}
 		>
@@ -43,14 +43,14 @@
 			<div class="content-area" ${_.ref("_contentArea")}>
 				${m.repeat(o=>o._tagRows,s.html`
 						<div class="tag-row">
-							${u.when((o,d)=>d.isFirst&&d.parent._numElidedTags,p)}
+							${u.when((o,d)=>d.isFirst&&d.parent._numElidedTags,h)}
 							${m.repeat(o=>o,v)}
 						</div>
 					`,{positioning:!0})}
 				<div
 					class="tag-row ${o=>$.classNames(["contains-only-input",o._tagRows.length>0&&o._lastTagRow.length===0])}"
 				>
-					${u.when(o=>o._tagRows.length===0&&o._numElidedTags,h)}
+					${u.when(o=>o._tagRows.length===0&&o._numElidedTags,p)}
 					${m.repeat(o=>o._lastTagRow,n)}
 					<input
 						id="control"
@@ -58,7 +58,7 @@
 						autocomplete="off"
 						aria-controls="listbox"
 						aria-describedby="${o=>o._feedbackDescribedBy} ${o=>o.multiple&&o.maxSelected&&o.maxSelected>=1?"selection-count":null}"
-						${D.delegateAria({role:"combobox",ariaAutoComplete:"list",ariaHasPopup:"listbox",ariaExpanded:o=>o.open})}
+						${R.delegateAria({role:"combobox",ariaAutoComplete:"list",ariaHasPopup:"listbox",ariaExpanded:o=>o.open})}
 						placeholder="${o=>o.multiple&&o.values.length?"":o.placeholder}"
 						type="text"
 						?disabled="${o=>o.disabled}"
@@ -89,25 +89,28 @@
 				${u.when(o=>!o.loading,i)}
 			</div>
 		</div>
-	`}function Q(l){return l.open&&l.fixedDropdown?`--_searchable-select-fixed-width: ${Math.round(l.getBoundingClientRect().width)}px`:null}function X(l){const t=l.tagFor(C.Popup);return s.html`
-		${u.when(e=>e.label||e.multiple&&e.maxSelected&&e.maxSelected>=1,s.html`
-				<div>
-					${u.when(e=>e.label,U())}
-					${u.when(e=>e.multiple&&e.maxSelected&&e.maxSelected>=1,G())}
-				</div>
-			`)}
+	`}function X(l){return l.open&&l.fixedDropdown?`--_searchable-select-fixed-width: ${Math.round(l.getBoundingClientRect().width)}px`:null}function Y(l){const t=l.tagFor(I.Popup);return s.html`
+		<div class="label-wrapper" ?hidden=${e=>!e.label&&!e._hasContextualHelp&&!e._hasSelectionCount}>
+			${u.when(e=>e.label||e._hasSelectionCount,s.html`
+					<div>
+						${u.when(e=>e.label,G())}
+						${u.when(e=>e._hasSelectionCount,J())}
+					</div>
+				`)}
+			<slot name="contextual-help" ${O.slotted("_contextualHelpSlottedContent")}></slot>
+		</div>
 		<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
 			${e=>e._changeDescription}
 		</span>
 		<div>
-			${J(l)}
+			${Q(l)}
 			<div class="popup-wrapper">
 				<${t}
 					:anchor="${e=>e._anchor}"
 					:open="${e=>e.open}"
 					class="popup"
 					placement="bottom-start"
-					style="${Q}"
+					style="${X}"
 					strategy="${e=>e.fixedDropdown?"fixed":"absolute"}">
 					<div
 						class="listbox"
@@ -119,7 +122,7 @@
 						@mousedown="${()=>!1}"
 					>
 						<slot
-							${M.slotted({filter:L.isListboxOption,flatten:!0,property:"_slottedOptions"})}>
+							${O.slotted({filter:A.isListboxOption,flatten:!0,property:"_slottedOptions"})}>
 						</slot>
 						${u.when(e=>e._filteredOptions.length===0,s.html`<div class="empty-message">
 								${u.when(e=>e.loading,s.html`<slot name="loading-options">
@@ -136,16 +139,16 @@
 				</${t}>
 			</div>
 		</div>
-	`}const Y=l=>{const t=l.tagFor(f);return s.html`
+	`}const Z=l=>{const t=l.tagFor(f);return s.html`
 		<template
 			:_optionTagTagName="${()=>t}"
 			@mousedown="${(e,a)=>e._onMouseDown(a.event)}"
 		>
 			<div class="control-wrapper">
-				${X(l)} ${e=>e._getFeedbackTemplate(l)}
+				${Y(l)} ${e=>e._getFeedbackTemplate(l)}
 			</div>
 		</template>
-	`},Z=({shape:l,connotation:t,disabled:e,removable:a})=>$.classNames("base",["disabled",e],["removable",a],[`shape-${l}`,!!l],[`connotation-${t}`,!!t]);function ee(l){return s.html`
+	`},ee=({shape:l,connotation:t,disabled:e,removable:a})=>$.classNames("base",["disabled",e],["removable",a],[`shape-${l}`,!!l],[`connotation-${t}`,!!t]);function te(l){return s.html`
 		<span
 			class="remove-button"
 			aria-label="${t=>t.locale.searchableSelect.removeTagButtonLabel(t.label)}"
@@ -155,10 +158,10 @@
 		>
 			<${l} name="close-line"></${l}>
 		</span>
-	`}const te=l=>{const t=l.tagFor(y.Icon);return s.html`<span class="${Z}" aria-disabled="${e=>e.disabled}">
+	`}const oe=l=>{const t=l.tagFor(y.Icon);return s.html`<span class="${ee}" aria-disabled="${e=>e.disabled}">
 		<slot name="icon" aria-hidden="true">
 			${u.when(e=>e.hasIconPlaceholder,s.html`<div class="icon-placeholder"></div>`)}
 		</slot>
 		${u.when(e=>e.label,e=>s.html`<span class="label">${e.label}</span>`)}
-		${u.when(e=>e.removable,ee(t))}
-	</span>`},oe=s.defineVividComponent("option-tag",f,te,[y.iconDefinition],{styles:[B],shadowOptions:{delegatesFocus:!0}}),ae=s.defineVividComponent("searchable-select",r,Y,[x.buttonDefinition,C.popupDefinition,y.iconDefinition,oe,I.progressRingDefinition,F.feedbackMessageDefinition],{styles:A}),ie=s.createRegisterFunction(ae);ie();
+		${u.when(e=>e.removable,te(t))}
+	</span>`},ae=s.defineVividComponent("option-tag",f,oe,[y.iconDefinition],{styles:[N],shadowOptions:{delegatesFocus:!0}}),ie=s.defineVividComponent("searchable-select",r,Z,[x.buttonDefinition,I.popupDefinition,y.iconDefinition,ae,F.progressRingDefinition,D.feedbackMessageDefinition],{styles:B}),se=s.createRegisterFunction(ie);se();