@vonage/vivid 5.1.0 → 5.3.0

package/combobox/definition.cjs

@@ -12,6 +12,7 @@ const fastElement = require('@microsoft/fast-element');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const listbox = require('../unbundled/listbox.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');
@@ -19,7 +20,7 @@ const affix = require('../unbundled/affix.cjs');
 const index = require('../unbundled/index.cjs');
 const button_definition = require('../unbundled/definition.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{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base: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)}.base: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}}.base.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)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{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;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){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{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base: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)}.base: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}}.base.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)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{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;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){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-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}";
 
 const ComboboxAutocomplete = {
   inline: "inline",
@@ -37,9 +38,11 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Combobox extends mixins.WithFeedback(
-  withErrorText.WithErrorText(
-    withSuccessText.WithSuccessText(formElement.FormElement(affix.AffixIcon(formAssociated.FormAssociated(listbox.Listbox))))
+class Combobox extends withContextualHelp.WithContextualHelp(
+  mixins.WithFeedback(
+    withErrorText.WithErrorText(
+      withSuccessText.WithSuccessText(formElement.FormElement(affix.AffixIcon(formAssociated.FormAssociated(listbox.Listbox))))
+    )
   )
 ) {
   constructor() {
@@ -104,7 +107,7 @@ class Combobox extends mixins.WithFeedback(
   openChanged() {
     if (this.open) {
       this.focusAndScrollOptionIntoView();
-      fastElement.DOM.queueUpdate(() => this.control.focus());
+      fastElement.Updates.enqueue(() => this.control.focus());
       return;
     }
   }
@@ -153,7 +156,7 @@ class Combobox extends mixins.WithFeedback(
    * @internal
    */
   clickHandler(e) {
-    if (this.disabled) {
+    if (this.disabled || this._isFromContextualHelp(e)) {
       return;
     }
     if (this.open) {
@@ -558,6 +561,10 @@ function renderInput(context) {
   const chevronTemplate = button_definition.chevronTemplateFactory(context);
   return fastElement.html` <div class="${getStateClasses}" ${fastElement.ref("_anchor")}>
 		${fastElement.when((x) => x.label, renderLabel())}
+		<slot
+			name="contextual-help"
+			${fastElement.slotted("_contextualHelpSlottedContent")}
+		></slot>
 		<div class="fieldset">
 			${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
 			<div class="wrapper">

package/combobox/definition.js

@@ -4,10 +4,11 @@ import { listboxOptionDefinition } from '../option/definition.js';
 import { s as styles$1 } from '../unbundled/text-field.js';
 import { d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { a as WithFeedback, f as feedbackMessageDefinition } from '../unbundled/mixins.js';
-import { DOM, Observable, attr, observable, ref, slotted, html, when } from '@microsoft/fast-element';
+import { Updates, Observable, attr, observable, ref, slotted, html, when } from '@microsoft/fast-element';
 import { uniqueId, limit, classNames } from '@microsoft/fast-web-utilities';
 import { L as Listbox } from '../unbundled/listbox.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';
@@ -15,7 +16,7 @@ import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from
 import { h as handleEscapeKeyAndStopPropogation } from '../unbundled/index.js';
 import { c as chevronTemplateFactory } from '../unbundled/definition.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{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base: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)}.base: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}}.base.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)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{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;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){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{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base: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)}.base: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}}.base.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)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{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;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){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-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}";
 
 const ComboboxAutocomplete = {
   inline: "inline",
@@ -33,9 +34,11 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Combobox extends WithFeedback(
-  WithErrorText(
-    WithSuccessText(FormElement(AffixIcon(FormAssociated(Listbox))))
+class Combobox extends WithContextualHelp(
+  WithFeedback(
+    WithErrorText(
+      WithSuccessText(FormElement(AffixIcon(FormAssociated(Listbox))))
+    )
   )
 ) {
   constructor() {
@@ -100,7 +103,7 @@ class Combobox extends WithFeedback(
   openChanged() {
     if (this.open) {
       this.focusAndScrollOptionIntoView();
-      DOM.queueUpdate(() => this.control.focus());
+      Updates.enqueue(() => this.control.focus());
       return;
     }
   }
@@ -149,7 +152,7 @@ class Combobox extends WithFeedback(
    * @internal
    */
   clickHandler(e) {
-    if (this.disabled) {
+    if (this.disabled || this._isFromContextualHelp(e)) {
       return;
     }
     if (this.open) {
@@ -554,6 +557,10 @@ function renderInput(context) {
   const chevronTemplate = chevronTemplateFactory(context);
   return html` <div class="${getStateClasses}" ${ref("_anchor")}>
 		${when((x) => x.label, renderLabel())}
+		<slot
+			name="contextual-help"
+			${slotted("_contextualHelpSlottedContent")}
+		></slot>
 		<div class="fieldset">
 			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
 			<div class="wrapper">

package/combobox/index.cjs

@@ -1,9 +1,13 @@
-"use strict";const k=require("../bundled/definition2.cjs"),v=require("../bundled/definition9.cjs"),$=require("../bundled/definition10.cjs"),I=require("../bundled/text-field.cjs"),r=require("../bundled/vivid-element.cjs"),f=require("../bundled/mixins.cjs"),b=require("../bundled/listbox.cjs"),O=require("../bundled/form-associated.cjs"),C=require("../bundled/with-error-text.cjs"),S=require("../bundled/with-success-text.cjs"),A=require("../bundled/form-element.cjs"),h=require("../bundled/affix.cjs"),q=require("../bundled/strings.cjs"),V=require("../bundled/numbers.cjs"),T=require("../bundled/index.cjs"),D=require("../bundled/definition3.cjs"),d=require("../bundled/ref.cjs"),x=require("../bundled/slotted.cjs"),E=require("../bundled/class-names.cjs"),H=require("../bundled/when.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{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base: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)}.base: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}}.base.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)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{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;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){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}',p={inline:"inline",list:"list",both:"both",none:"none"};var F=Object.defineProperty,s=(a,t,e,o)=>{for(var n=void 0,l=a.length-1,c;l>=0;l--)(c=a[l])&&(n=c(t,e,n)||n);return n&&F(t,e,n),n};class i extends f.WithFeedback(C.WithErrorText(S.WithSuccessText(A.FormElement(h.AffixIcon(O.FormAssociated(b.Listbox)))))){constructor(){super(...arguments),this.filteredOptions=[],this.filter="",this.fixedDropdown=!1,this.listboxId=q.uniqueId("listbox-"),this.maxHeight=0,this.open=!1,this.proxy=document.createElement("input")}formResetCallback(){super.formResetCallback(),this.setDefaultSelectedOption(),this.updateValue()}validate(){super.validate(this.control)}get isAutocompleteInline(){return this.autocomplete===p.inline||this.isAutocompleteBoth}get isAutocompleteList(){return this.autocomplete===p.list||this.isAutocompleteBoth}get isAutocompleteBoth(){return this.autocomplete===p.both}openChanged(){if(this.open){this.focusAndScrollOptionIntoView(),r.DOM.queueUpdate(()=>this.control.focus());return}}get options(){return r.Observable.track(this,"options"),this.filteredOptions.length?this.filteredOptions:this._options}set options(t){this._options=t,r.Observable.notify(this,"options")}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}valueChanged(t,e){if(this.$fastController.isConnected&&this.options){const o=this.options.findIndex(c=>c.text.toLowerCase()===e.toLowerCase()),n=this.options[this.selectedIndex]?.text,l=this.options[o]?.text;this.selectedIndex=n!==l?o:this.selectedIndex}super.valueChanged(t,e)}clickHandler(t){if(!this.disabled){if(this.open){const e=t.target.closest("option,[role=option],[data-vvd-component=option]");if(!e||e.disabled)return;this.selectedOptions=[e],this.control.value=e.text,this.clearSelectionRange(),this.updateValue(!0)}return this.open=!this.open,this.open&&this.control.focus(),!0}}_chevronIconClickHandler(t){this.open&&(t.stopPropagation(),this.open=!1)}connectedCallback(){super.connectedCallback(),this.value&&(this.initialValue=this.value),this._popup.anchor=this._anchor}filterOptions(){(!this.autocomplete||this.autocomplete===p.none)&&(this.filter=""),this.filteredOptions=this._options.filter(t=>t.text.toLowerCase().startsWith(this.filter.toLowerCase())),this.isAutocompleteList&&this._options.forEach(t=>{t.hidden=!this.filteredOptions.includes(t)})}focusAndScrollOptionIntoView(){if(this.contains(document.activeElement)){this.control.focus();const t=this.firstSelectedOption;t&&requestAnimationFrame(()=>{t.scrollIntoView({block:"nearest"})})}}focusoutHandler(t){if(this.syncValue(),!this.open)return!0;const e=t.relatedTarget;if(this.isSameNode(e)){this.focus();return}this.open=!1}inputHandler(t){if(this.filter=this.control.value,this.filterOptions(),this.isAutocompleteInline||(this.selectedIndex=this.options.map(e=>e.text).indexOf(this.control.value)),t.inputType.includes("deleteContent")||!this.filter.length)return!0;this.isAutocompleteList&&!this.open&&(this.open=!0),this.isAutocompleteInline&&(this.filteredOptions.length?(this.selectedOptions=[this.filteredOptions[0]],this.selectedIndex=this.options.indexOf(this.firstSelectedOption),this.setInlineSelection()):this.selectedIndex=-1)}keydownHandler(t){const e=t.key;if(t.ctrlKey||t.shiftKey)return!0;switch(e){case"Enter":{this.syncValue(),this.isAutocompleteInline&&(this.filter=this.value),this.open=!1,this.clearSelectionRange();break}case"Escape":{if(this.isAutocompleteInline||(this.selectedIndex=-1),this.open){this.open=!1;break}this.value="",this.control.value="",this.filter="",this.filterOptions();break}case"Tab":{if(this.setInputToSelection(),!this.open)return!0;t.preventDefault(),this.open=!1;break}case"ArrowUp":case"ArrowDown":{if(this.filterOptions(),!this.open){this.open=!0;break}this.filteredOptions.length>0&&super.keydownHandler(t),this.isAutocompleteInline&&this.setInlineSelection();break}default:return!0}}selectedIndexChanged(t,e){if(this.$fastController.isConnected){if(e=V.limit(-1,this.options.length-1,e),e!==this.selectedIndex){this.selectedIndex=e;return}super.selectedIndexChanged(t,e)}}selectPreviousOption(){!this.disabled&&this.selectedIndex>=0&&(this.selectedIndex=this.selectedIndex-1)}setDefaultSelectedOption(){if(this.$fastController.isConnected&&this.options){const t=this.options.findIndex(e=>e.getAttribute("selected")!==null||e.selected);this.selectedIndex=t,!this.dirtyValue&&this.firstSelectedOption&&(this.value=this.firstSelectedOption.text),this.setSelectedOptions()}}setInputToSelection(){this.firstSelectedOption&&(this.control.value=this.firstSelectedOption.text,this.control.focus())}setInlineSelection(){this.firstSelectedOption&&(this.setInputToSelection(),this.control.setSelectionRange(this.filter.length,this.control.value.length,"backward"))}syncValue(){const t=this.firstSelectedOption?.text??this.control.value;this.updateValue(this.value!==t)}selectedOptionsChanged(t,e){this.$fastController.isConnected&&this._options.forEach(o=>{o.selected=e.includes(o)})}slottedOptionsChanged(t,e){super.slottedOptionsChanged(t,e),this.updateValue();const o=this.getAttribute("scale")||this.scale;e.forEach(n=>{o&&(n.setAttribute("scale",o),n.scale=o)})}updateValue(t){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.text||this.control.value,this.control.value=this.value),t&&this.$emit("change")}clearSelectionRange(){const t=this.control.value.length;this.control.setSelectionRange(t,t)}}s([r.attr({attribute:"autocomplete",mode:"fromView"})],i.prototype,"autocomplete");s([r.attr],i.prototype,"appearance");s([r.attr],i.prototype,"shape");s([r.attr()],i.prototype,"scale");s([r.attr],i.prototype,"placement");s([r.attr({mode:"boolean",attribute:"fixed-dropdown"})],i.prototype,"fixedDropdown");s([r.observable],i.prototype,"metaSlottedContent");s([r.observable],i.prototype,"maxHeight");s([r.attr({attribute:"open",mode:"boolean"})],i.prototype,"open");s([r.attr],i.prototype,"placeholder");const L=({icon:a,iconSlottedContent:t,metaSlottedContent:e,errorValidationMessage:o,successText:n,shape:l,scale:c,disabled:m,placeholder:g,label:_,appearance:u,open:w,_activeDescendant:y})=>E.classNames("base",["disabled",m],[`shape-${l}`,!!l],[`size-${c}`,!!c],["placeholder",!!g],[`appearance-${u}`,!!u],["no-label",!_],["has-icon",!!a||!!t?.length],["has-meta",!!e?.length],["has-activedescendant",!!y&&w],["error",!!o],["success",!!n]);function R(){return r.html` <label for="control" class="label">
+"use strict";const $=require("../bundled/definition2.cjs"),v=require("../bundled/definition9.cjs"),k=require("../bundled/definition11.cjs"),C=require("../bundled/text-field.cjs"),r=require("../bundled/vivid-element.cjs"),b=require("../bundled/mixins.cjs"),x=require("../bundled/listbox.cjs"),I=require("../bundled/form-associated.cjs"),O=require("../bundled/with-contextual-help.cjs"),S=require("../bundled/with-error-text.cjs"),A=require("../bundled/with-success-text.cjs"),q=require("../bundled/form-element.cjs"),u=require("../bundled/affix.cjs"),V=require("../bundled/strings.cjs"),T=require("../bundled/numbers.cjs"),H=require("../bundled/index.cjs"),D=require("../bundled/definition3.cjs"),d=require("../bundled/ref.cjs"),h=require("../bundled/slotted.cjs"),E=require("../bundled/when.cjs"),F=require("../bundled/class-names.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{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base: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)}.base: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}}.base.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)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{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;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){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-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}',p={inline:"inline",list:"list",both:"both",none:"none"};var L=Object.defineProperty,s=(a,t,e,o)=>{for(var n=void 0,l=a.length-1,c;l>=0;l--)(c=a[l])&&(n=c(t,e,n)||n);return n&&L(t,e,n),n};class i extends O.WithContextualHelp(b.WithFeedback(S.WithErrorText(A.WithSuccessText(q.FormElement(u.AffixIcon(I.FormAssociated(x.Listbox))))))){constructor(){super(...arguments),this.filteredOptions=[],this.filter="",this.fixedDropdown=!1,this.listboxId=V.uniqueId("listbox-"),this.maxHeight=0,this.open=!1,this.proxy=document.createElement("input")}formResetCallback(){super.formResetCallback(),this.setDefaultSelectedOption(),this.updateValue()}validate(){super.validate(this.control)}get isAutocompleteInline(){return this.autocomplete===p.inline||this.isAutocompleteBoth}get isAutocompleteList(){return this.autocomplete===p.list||this.isAutocompleteBoth}get isAutocompleteBoth(){return this.autocomplete===p.both}openChanged(){if(this.open){this.focusAndScrollOptionIntoView(),r.Updates.enqueue(()=>this.control.focus());return}}get options(){return r.Observable.track(this,"options"),this.filteredOptions.length?this.filteredOptions:this._options}set options(t){this._options=t,r.Observable.notify(this,"options")}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}valueChanged(t,e){if(this.$fastController.isConnected&&this.options){const o=this.options.findIndex(c=>c.text.toLowerCase()===e.toLowerCase()),n=this.options[this.selectedIndex]?.text,l=this.options[o]?.text;this.selectedIndex=n!==l?o:this.selectedIndex}super.valueChanged(t,e)}clickHandler(t){if(!(this.disabled||this._isFromContextualHelp(t))){if(this.open){const e=t.target.closest("option,[role=option],[data-vvd-component=option]");if(!e||e.disabled)return;this.selectedOptions=[e],this.control.value=e.text,this.clearSelectionRange(),this.updateValue(!0)}return this.open=!this.open,this.open&&this.control.focus(),!0}}_chevronIconClickHandler(t){this.open&&(t.stopPropagation(),this.open=!1)}connectedCallback(){super.connectedCallback(),this.value&&(this.initialValue=this.value),this._popup.anchor=this._anchor}filterOptions(){(!this.autocomplete||this.autocomplete===p.none)&&(this.filter=""),this.filteredOptions=this._options.filter(t=>t.text.toLowerCase().startsWith(this.filter.toLowerCase())),this.isAutocompleteList&&this._options.forEach(t=>{t.hidden=!this.filteredOptions.includes(t)})}focusAndScrollOptionIntoView(){if(this.contains(document.activeElement)){this.control.focus();const t=this.firstSelectedOption;t&&requestAnimationFrame(()=>{t.scrollIntoView({block:"nearest"})})}}focusoutHandler(t){if(this.syncValue(),!this.open)return!0;const e=t.relatedTarget;if(this.isSameNode(e)){this.focus();return}this.open=!1}inputHandler(t){if(this.filter=this.control.value,this.filterOptions(),this.isAutocompleteInline||(this.selectedIndex=this.options.map(e=>e.text).indexOf(this.control.value)),t.inputType.includes("deleteContent")||!this.filter.length)return!0;this.isAutocompleteList&&!this.open&&(this.open=!0),this.isAutocompleteInline&&(this.filteredOptions.length?(this.selectedOptions=[this.filteredOptions[0]],this.selectedIndex=this.options.indexOf(this.firstSelectedOption),this.setInlineSelection()):this.selectedIndex=-1)}keydownHandler(t){const e=t.key;if(t.ctrlKey||t.shiftKey)return!0;switch(e){case"Enter":{this.syncValue(),this.isAutocompleteInline&&(this.filter=this.value),this.open=!1,this.clearSelectionRange();break}case"Escape":{if(this.isAutocompleteInline||(this.selectedIndex=-1),this.open){this.open=!1;break}this.value="",this.control.value="",this.filter="",this.filterOptions();break}case"Tab":{if(this.setInputToSelection(),!this.open)return!0;t.preventDefault(),this.open=!1;break}case"ArrowUp":case"ArrowDown":{if(this.filterOptions(),!this.open){this.open=!0;break}this.filteredOptions.length>0&&super.keydownHandler(t),this.isAutocompleteInline&&this.setInlineSelection();break}default:return!0}}selectedIndexChanged(t,e){if(this.$fastController.isConnected){if(e=T.limit(-1,this.options.length-1,e),e!==this.selectedIndex){this.selectedIndex=e;return}super.selectedIndexChanged(t,e)}}selectPreviousOption(){!this.disabled&&this.selectedIndex>=0&&(this.selectedIndex=this.selectedIndex-1)}setDefaultSelectedOption(){if(this.$fastController.isConnected&&this.options){const t=this.options.findIndex(e=>e.getAttribute("selected")!==null||e.selected);this.selectedIndex=t,!this.dirtyValue&&this.firstSelectedOption&&(this.value=this.firstSelectedOption.text),this.setSelectedOptions()}}setInputToSelection(){this.firstSelectedOption&&(this.control.value=this.firstSelectedOption.text,this.control.focus())}setInlineSelection(){this.firstSelectedOption&&(this.setInputToSelection(),this.control.setSelectionRange(this.filter.length,this.control.value.length,"backward"))}syncValue(){const t=this.firstSelectedOption?.text??this.control.value;this.updateValue(this.value!==t)}selectedOptionsChanged(t,e){this.$fastController.isConnected&&this._options.forEach(o=>{o.selected=e.includes(o)})}slottedOptionsChanged(t,e){super.slottedOptionsChanged(t,e),this.updateValue();const o=this.getAttribute("scale")||this.scale;e.forEach(n=>{o&&(n.setAttribute("scale",o),n.scale=o)})}updateValue(t){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.text||this.control.value,this.control.value=this.value),t&&this.$emit("change")}clearSelectionRange(){const t=this.control.value.length;this.control.setSelectionRange(t,t)}}s([r.attr({attribute:"autocomplete",mode:"fromView"})],i.prototype,"autocomplete");s([r.attr],i.prototype,"appearance");s([r.attr],i.prototype,"shape");s([r.attr()],i.prototype,"scale");s([r.attr],i.prototype,"placement");s([r.attr({mode:"boolean",attribute:"fixed-dropdown"})],i.prototype,"fixedDropdown");s([r.observable],i.prototype,"metaSlottedContent");s([r.observable],i.prototype,"maxHeight");s([r.attr({attribute:"open",mode:"boolean"})],i.prototype,"open");s([r.attr],i.prototype,"placeholder");const R=({icon:a,iconSlottedContent:t,metaSlottedContent:e,errorValidationMessage:o,successText:n,shape:l,scale:c,disabled:m,placeholder:g,label:_,appearance:f,open:w,_activeDescendant:y})=>F.classNames("base",["disabled",m],[`shape-${l}`,!!l],[`size-${c}`,!!c],["placeholder",!!g],[`appearance-${f}`,!!f],["no-label",!_],["has-icon",!!a||!!t?.length],["has-meta",!!e?.length],["has-activedescendant",!!y&&w],["error",!!o],["success",!!n]);function z(){return r.html` <label for="control" class="label">
 		${a=>a.label}
-	</label>`}function z(a){return a.open&&a.fixedDropdown?`--_combobox-fixed-width: ${Math.round(a.getBoundingClientRect().width)}px`:null}function P(a){const t=h.affixIconTemplateFactory(a),e=D.chevronTemplateFactory(a);return r.html` <div class="${L}" ${d.ref("_anchor")}>
-		${H.when(o=>o.label,R())}
+	</label>`}function P(a){return a.open&&a.fixedDropdown?`--_combobox-fixed-width: ${Math.round(a.getBoundingClientRect().width)}px`:null}function W(a){const t=u.affixIconTemplateFactory(a),e=D.chevronTemplateFactory(a);return r.html` <div class="${R}" ${d.ref("_anchor")}>
+		${E.when(o=>o.label,z())}
+		<slot
+			name="contextual-help"
+			${h.slotted("_contextualHelpSlottedContent")}
+		></slot>
 		<div class="fieldset">
-			${o=>t(o.icon,h.IconWrapper.Slot)}
+			${o=>t(o.icon,u.IconWrapper.Slot)}
 			<div class="wrapper">
 				<input
 					id="control"
@@ -25,7 +29,7 @@
 				/>
 			</div>
 			<div class="leading-items-wrapper">
-				<slot name="meta" ${x.slotted("metaSlottedContent")}></slot>
+				<slot name="meta" ${h.slotted("metaSlottedContent")}></slot>
 				<div
 					@click="${(o,n)=>o._chevronIconClickHandler(n.event)}"
 				>
@@ -33,17 +37,17 @@
 				</div>
 			</div>
 		</div>
-	</div>`}const W=a=>{const t=a.tagFor(v.Popup);return r.html`
+	</div>`}const K=a=>{const t=a.tagFor(v.Popup);return r.html`
 		<template
 			tabindex="${e=>e.disabled?null:"0"}"
 			@click="${(e,o)=>e.clickHandler(o.event)}"
 			@focusout="${(e,o)=>e.focusoutHandler(o.event)}"
-			@keydown="${(e,{event:o})=>(e.open&&T.handleEscapeKeyAndStopPropogation(o),e.keydownHandler(o))}"
+			@keydown="${(e,{event:o})=>(e.open&&H.handleEscapeKeyAndStopPropogation(o),e.keydownHandler(o))}"
 		>
 			<div class="control-wrapper">
-				${()=>P(a)}
+				${()=>W(a)}
 				<${t} class="popup"
-					style="${z}"
+					style="${P}"
 					?open="${e=>e.open}"
 					placement="${e=>e.placement??"bottom-start"}"
 					strategy="${e=>e.fixedDropdown?"fixed":"absolute"}"
@@ -53,7 +57,7 @@
 						role="listbox"
 						?disabled="${e=>e.disabled}"
 						${d.ref("listbox")}>
-						<slot ${x.slotted({filter:b.Listbox.slottedOptionFilter,flatten:!0,property:"slottedOptions"})}>
+						<slot ${h.slotted({filter:x.Listbox.slottedOptionFilter,flatten:!0,property:"slottedOptions"})}>
 						</slot>
 					</div>
 				</${t}>
@@ -62,4 +66,4 @@
 				${e=>e._getFeedbackTemplate(a)}
 			</div>
     </template>
-	`},M=r.defineVividComponent("combobox",i,W,[k.iconDefinition,v.popupDefinition,$.listboxOptionDefinition,f.feedbackMessageDefinition],{styles:[I.styles,B],shadowOptions:{delegatesFocus:!0}}),K=r.createRegisterFunction(M);K();
+	`},M=r.defineVividComponent("combobox",i,K,[$.iconDefinition,v.popupDefinition,k.listboxOptionDefinition,b.feedbackMessageDefinition],{styles:[C.styles,B],shadowOptions:{delegatesFocus:!0}}),N=r.createRegisterFunction(M);N();

package/combobox/index.js

@@ -1,41 +1,44 @@
 import { i as k } from "../bundled/definition2.js";
-import { P as I, p as $ } from "../bundled/definition9.js";
-import { l as O } from "../bundled/definition10.js";
-import { s as C } from "../bundled/text-field.js";
-import { D as S, O as f, a as l, o as v, h, c as A, d as V } from "../bundled/vivid-element.js";
-import { W as D, f as T } from "../bundled/mixins.js";
-import { L as b } from "../bundled/listbox.js";
-import { F } from "../bundled/form-associated.js";
-import { W as H } from "../bundled/with-error-text.js";
-import { W as B } from "../bundled/with-success-text.js";
-import { F as L } from "../bundled/form-element.js";
-import { b as E, a as R, I as W } from "../bundled/affix.js";
-import { u as P } from "../bundled/strings.js";
-import { l as z } from "../bundled/numbers.js";
-import { h as M } from "../bundled/index.js";
-import { c as q } from "../bundled/definition3.js";
+import { P as $, p as I } from "../bundled/definition9.js";
+import { l as C } from "../bundled/definition11.js";
+import { s as O } from "../bundled/text-field.js";
+import { U as S, O as v, a as l, o as b, h as u, c as A, d as V } from "../bundled/vivid-element.js";
+import { W as H, f as T } from "../bundled/mixins.js";
+import { L as m } from "../bundled/listbox.js";
+import { F as D } from "../bundled/form-associated.js";
+import { W as F } from "../bundled/with-contextual-help.js";
+import { W as B } from "../bundled/with-error-text.js";
+import { W as L } from "../bundled/with-success-text.js";
+import { F as E } from "../bundled/form-element.js";
+import { b as W, a as R, I as P } from "../bundled/affix.js";
+import { u as z } from "../bundled/strings.js";
+import { l as q } from "../bundled/numbers.js";
+import { h as K } from "../bundled/index.js";
+import { c as M } from "../bundled/definition3.js";
 import { r as d } from "../bundled/ref.js";
-import { s as m } from "../bundled/slotted.js";
-import { c as K } from "../bundled/class-names.js";
-import { w as N } from "../bundled/when.js";
-const U = '.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{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base: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)}.base: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}}.base.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)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{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;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){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}', p = {
+import { s as h } from "../bundled/slotted.js";
+import { w as U } from "../bundled/when.js";
+import { c as N } from "../bundled/class-names.js";
+const j = '.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{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base: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)}.base: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}}.base.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)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{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;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){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-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}', p = {
   inline: "inline",
   list: "list",
   both: "both",
   none: "none"
 };
-var j = Object.defineProperty, s = (a, t, e, o) => {
-  for (var r = void 0, n = a.length - 1, c; n >= 0; n--)
-    (c = a[n]) && (r = c(t, e, r) || r);
-  return r && j(t, e, r), r;
+var Y = Object.defineProperty, n = (a, t, e, o) => {
+  for (var r = void 0, s = a.length - 1, c; s >= 0; s--)
+    (c = a[s]) && (r = c(t, e, r) || r);
+  return r && Y(t, e, r), r;
 };
-class i extends D(
+class i extends F(
   H(
-    B(L(E(F(b))))
+    B(
+      L(E(W(D(m))))
+    )
   )
 ) {
   constructor() {
-    super(...arguments), this.filteredOptions = [], this.filter = "", this.fixedDropdown = !1, this.listboxId = P("listbox-"), this.maxHeight = 0, this.open = !1, this.proxy = document.createElement("input");
+    super(...arguments), this.filteredOptions = [], this.filter = "", this.fixedDropdown = !1, this.listboxId = z("listbox-"), this.maxHeight = 0, this.open = !1, this.proxy = document.createElement("input");
   }
   /**
    * Reset the element to its first selectable option when its parent form is reset.
@@ -68,7 +71,7 @@ class i extends D(
    */
   openChanged() {
     if (this.open) {
-      this.focusAndScrollOptionIntoView(), S.queueUpdate(() => this.control.focus());
+      this.focusAndScrollOptionIntoView(), S.enqueue(() => this.control.focus());
       return;
     }
   }
@@ -80,10 +83,10 @@ class i extends D(
    * Overrides `Listbox.options`.
    */
   get options() {
-    return f.track(this, "options"), this.filteredOptions.length ? this.filteredOptions : this._options;
+    return v.track(this, "options"), this.filteredOptions.length ? this.filteredOptions : this._options;
   }
   set options(t) {
-    this._options = t, f.notify(this, "options");
+    this._options = t, v.notify(this, "options");
   }
   /**
    * Updates the placeholder on the proxy element.
@@ -99,8 +102,8 @@ class i extends D(
     if (this.$fastController.isConnected && this.options) {
       const o = this.options.findIndex(
         (c) => c.text.toLowerCase() === e.toLowerCase()
-      ), r = this.options[this.selectedIndex]?.text, n = this.options[o]?.text;
-      this.selectedIndex = r !== n ? o : this.selectedIndex;
+      ), r = this.options[this.selectedIndex]?.text, s = this.options[o]?.text;
+      this.selectedIndex = r !== s ? o : this.selectedIndex;
     }
     super.valueChanged(t, e);
   }
@@ -111,7 +114,7 @@ class i extends D(
    * @internal
    */
   clickHandler(t) {
-    if (!this.disabled) {
+    if (!(this.disabled || this._isFromContextualHelp(t))) {
       if (this.open) {
         const e = t.target.closest(
           "option,[role=option],[data-vvd-component=option]"
@@ -242,7 +245,7 @@ class i extends D(
    */
   selectedIndexChanged(t, e) {
     if (this.$fastController.isConnected) {
-      if (e = z(-1, this.options.length - 1, e), e !== this.selectedIndex) {
+      if (e = q(-1, this.options.length - 1, e), e !== this.selectedIndex) {
         this.selectedIndex = e;
         return;
       }
@@ -351,57 +354,57 @@ class i extends D(
     this.control.setSelectionRange(t, t);
   }
 }
-s([
+n([
   l({ attribute: "autocomplete", mode: "fromView" })
 ], i.prototype, "autocomplete");
-s([
+n([
   l
 ], i.prototype, "appearance");
-s([
+n([
   l
 ], i.prototype, "shape");
-s([
+n([
   l()
 ], i.prototype, "scale");
-s([
+n([
   l
 ], i.prototype, "placement");
-s([
+n([
   l({ mode: "boolean", attribute: "fixed-dropdown" })
 ], i.prototype, "fixedDropdown");
-s([
-  v
+n([
+  b
 ], i.prototype, "metaSlottedContent");
-s([
-  v
+n([
+  b
 ], i.prototype, "maxHeight");
-s([
+n([
   l({ attribute: "open", mode: "boolean" })
 ], i.prototype, "open");
-s([
+n([
   l
 ], i.prototype, "placeholder");
-const Y = ({
+const G = ({
   icon: a,
   iconSlottedContent: t,
   metaSlottedContent: e,
   errorValidationMessage: o,
   successText: r,
-  shape: n,
+  shape: s,
   scale: c,
   disabled: x,
   placeholder: g,
   label: _,
-  appearance: u,
+  appearance: f,
   open: w,
   _activeDescendant: y
-}) => K(
+}) => N(
   "base",
   ["disabled", x],
-  [`shape-${n}`, !!n],
+  [`shape-${s}`, !!s],
   [`size-${c}`, !!c],
   ["placeholder", !!g],
-  [`appearance-${u}`, !!u],
+  [`appearance-${f}`, !!f],
   ["no-label", !_],
   ["has-icon", !!a || !!t?.length],
   ["has-meta", !!e?.length],
@@ -409,22 +412,26 @@ const Y = ({
   ["error", !!o],
   ["success", !!r]
 );
-function G() {
-  return h` <label for="control" class="label">
+function J() {
+  return u` <label for="control" class="label">
 		${(a) => a.label}
 	</label>`;
 }
-function J(a) {
+function Q(a) {
   return a.open && a.fixedDropdown ? `--_combobox-fixed-width: ${Math.round(
     a.getBoundingClientRect().width
   )}px` : null;
 }
-function Q(a) {
-  const t = R(a), e = q(a);
-  return h` <div class="${Y}" ${d("_anchor")}>
-		${N((o) => o.label, G())}
+function X(a) {
+  const t = R(a), e = M(a);
+  return u` <div class="${G}" ${d("_anchor")}>
+		${U((o) => o.label, J())}
+		<slot
+			name="contextual-help"
+			${h("_contextualHelpSlottedContent")}
+		></slot>
 		<div class="fieldset">
-			${(o) => t(o.icon, W.Slot)}
+			${(o) => t(o.icon, P.Slot)}
 			<div class="wrapper">
 				<input
 					id="control"
@@ -446,7 +453,7 @@ function Q(a) {
 				/>
 			</div>
 			<div class="leading-items-wrapper">
-				<slot name="meta" ${m("metaSlottedContent")}></slot>
+				<slot name="meta" ${h("metaSlottedContent")}></slot>
 				<div
 					@click="${(o, r) => o._chevronIconClickHandler(r.event)}"
 				>
@@ -456,19 +463,19 @@ function Q(a) {
 		</div>
 	</div>`;
 }
-const X = (a) => {
-  const t = a.tagFor(I);
-  return h`
+const Z = (a) => {
+  const t = a.tagFor($);
+  return u`
 		<template
 			tabindex="${(e) => e.disabled ? null : "0"}"
 			@click="${(e, o) => e.clickHandler(o.event)}"
 			@focusout="${(e, o) => e.focusoutHandler(o.event)}"
-			@keydown="${(e, { event: o }) => (e.open && M(o), e.keydownHandler(o))}"
+			@keydown="${(e, { event: o }) => (e.open && K(o), e.keydownHandler(o))}"
 		>
 			<div class="control-wrapper">
-				${() => Q(a)}
+				${() => X(a)}
 				<${t} class="popup"
-					style="${J}"
+					style="${Q}"
 					?open="${(e) => e.open}"
 					placement="${(e) => e.placement ?? "bottom-start"}"
 					strategy="${(e) => e.fixedDropdown ? "fixed" : "absolute"}"
@@ -478,8 +485,8 @@ const X = (a) => {
 						role="listbox"
 						?disabled="${(e) => e.disabled}"
 						${d("listbox")}>
-						<slot ${m({
-    filter: b.slottedOptionFilter,
+						<slot ${h({
+    filter: m.slottedOptionFilter,
     flatten: !0,
     property: "slottedOptions"
   })}>
@@ -492,21 +499,21 @@ const X = (a) => {
 			</div>
     </template>
 	`;
-}, Z = V(
+}, ee = V(
   "combobox",
   i,
-  X,
+  Z,
   [
     k,
-    $,
-    O,
+    I,
+    C,
     T
   ],
   {
-    styles: [C, U],
+    styles: [O, j],
     shadowOptions: {
       delegatesFocus: !0
     }
   }
-), ee = A(Z);
-ee();
+), te = A(ee);
+te();

package/contextual-help/index.cjs

@@ -1 +1 @@
-"use strict";const e=require("../bundled/definition11.cjs");e.registerContextualHelp();
+"use strict";const e=require("../bundled/definition12.cjs");e.registerContextualHelp();

package/contextual-help/index.js

@@ -1,2 +1,2 @@
-import { r } from "../bundled/definition11.js";
+import { r } from "../bundled/definition12.js";
 r();