@vonage/vivid 5.0.0 → 5.2.0

package/{shared → unbundled}/mixins.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
+const fastElement = require('@microsoft/fast-element');
+const uuid = require('uuid');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const icon_definition = require('../icon/definition.cjs');
 const vividElement = require('./vivid-element.cjs');
-const definition = require('./definition28.cjs');
-const definition$1 = require('./definition66.cjs');
-const classNames = require('./class-names.cjs');
-const when = require('./when.cjs');
+const visuallyHidden_definition = require('../visually-hidden/definition.cjs');
 const localized = require('./localized.cjs');
-const slotted = require('./slotted.cjs');
 
 const styles = ":host{display:contents}.message{display:flex;contain:inline-size;font:var(--vvd-typography-base-condensed);gap:4px;grid-column:1/-1}.message.none-message{display:none}.message.helper-message{color:var(--_low-ink-color)}.message.error-message,.message.success-message{color:var(--vvd-color-canvas-text)}slot{display:inline}.icon{font-size:16px}.error-message .icon{color:var(--vvd-color-alert-500)}.success-message .icon{color:var(--vvd-color-success-500)}.announcement{display:contents}";
 
@@ -26,11 +26,11 @@ class FeedbackMessage extends localized.Localized(vividElement.VividElement) {
   }
 }
 __decorateClass$1([
-  vividElement.attr
+  fastElement.attr
 ], FeedbackMessage.prototype, "type");
 function iconTemplate(context, icon, textI18nKey) {
-  const iconTag = context.tagFor(definition.Icon);
-  return vividElement.html`<${iconTag} class="icon" name="${icon}" label="${(x) => x.locale.feedbackMessage[textI18nKey]}"></${iconTag}>`;
+  const iconTag = context.tagFor(icon_definition.VwcIconElement);
+  return fastElement.html`<${iconTag} class="icon" name="${icon}" label="${(x) => x.locale.feedbackMessage[textI18nKey]}"></${iconTag}>`;
 }
 function iconForType(context) {
   const iconTemplateForType = {
@@ -39,25 +39,25 @@ function iconForType(context) {
     error: iconTemplate(context, "info-line", "errorIconText"),
     success: iconTemplate(context, "check-circle-line", "successIconText")
   };
-  return vividElement.html`${(x) => iconTemplateForType[x.type]}`;
+  return fastElement.html`${(x) => iconTemplateForType[x.type]}`;
 }
 const shouldAnnounce = (type) => type === "error";
 const FeedbackMessageTemplate = (ctx) => {
-  const message = vividElement.html`<div
-		class="${(x) => classNames.classNames("message", `${x.type}-message`)}"
+  const message = fastElement.html`<div
+		class="${(x) => fastWebUtilities.classNames("message", `${x.type}-message`)}"
 	>
 		${iconForType(ctx)}<slot></slot>
 	</div>`;
-  return vividElement.html`${when.when((x) => !shouldAnnounce(x.type), message)}
+  return fastElement.html`${fastElement.when((x) => !shouldAnnounce(x.type), message)}
 		<span class="announcement" role="status" aria-live="polite">
-			${when.when((x) => shouldAnnounce(x.type), message)}
+			${fastElement.when((x) => shouldAnnounce(x.type), message)}
 		</span>`;
 };
 const feedbackMessageDefinition = vividElement.defineVividComponent(
   "feedback-message",
   FeedbackMessage,
   FeedbackMessageTemplate,
-  [definition.iconDefinition, definition$1.visuallyHiddenDefinition],
+  [icon_definition.iconDefinition, visuallyHidden_definition.visuallyHiddenDefinition],
   {
     styles
   }
@@ -66,7 +66,7 @@ const feedbackMessageDefinition = vividElement.defineVividComponent(
 class RenderInLightDomBehaviour {
   constructor(templateBinding, isTemplateBindingVolatile) {
     this.source = null;
-    this.templateBindingObserver = vividElement.Observable.binding(
+    this.templateBindingObserver = fastElement.Observable.binding(
       templateBinding,
       this,
       isTemplateBindingVolatile
@@ -103,12 +103,12 @@ class RenderInLightDomBehaviour {
     this.view.insertBefore(this.insertionPoint);
   }
 }
-class RenderInLightDomDirective extends vividElement.HTMLDirective {
+class RenderInLightDomDirective extends fastElement.HTMLDirective {
   constructor(templateBinding) {
     super();
     this.templateBinding = templateBinding;
-    this.createPlaceholder = vividElement.DOM.createBlockPlaceholder;
-    this.isTemplateBindingVolatile = vividElement.Observable.isVolatileBinding(templateBinding);
+    this.createPlaceholder = fastElement.DOM.createBlockPlaceholder;
+    this.isTemplateBindingVolatile = fastElement.Observable.isVolatileBinding(templateBinding);
   }
   createBehavior() {
     return new RenderInLightDomBehaviour(
@@ -122,63 +122,7 @@ function renderInLightDOM(templateOrTemplateBinding) {
   return new RenderInLightDomDirective(templateBinding);
 }
 
-const byteToHex = [];
-for (let i = 0; i < 256; ++i) {
-    byteToHex.push((i + 0x100).toString(16).slice(1));
-}
-function unsafeStringify(arr, offset = 0) {
-    return (byteToHex[arr[offset + 0]] +
-        byteToHex[arr[offset + 1]] +
-        byteToHex[arr[offset + 2]] +
-        byteToHex[arr[offset + 3]] +
-        '-' +
-        byteToHex[arr[offset + 4]] +
-        byteToHex[arr[offset + 5]] +
-        '-' +
-        byteToHex[arr[offset + 6]] +
-        byteToHex[arr[offset + 7]] +
-        '-' +
-        byteToHex[arr[offset + 8]] +
-        byteToHex[arr[offset + 9]] +
-        '-' +
-        byteToHex[arr[offset + 10]] +
-        byteToHex[arr[offset + 11]] +
-        byteToHex[arr[offset + 12]] +
-        byteToHex[arr[offset + 13]] +
-        byteToHex[arr[offset + 14]] +
-        byteToHex[arr[offset + 15]]).toLowerCase();
-}
-
-let getRandomValues;
-const rnds8 = new Uint8Array(16);
-function rng() {
-    if (!getRandomValues) {
-        if (typeof crypto === 'undefined' || !crypto.getRandomValues) {
-            throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
-        }
-        getRandomValues = crypto.getRandomValues.bind(crypto);
-    }
-    return getRandomValues(rnds8);
-}
-
-const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
-const native = { randomUUID };
-
-function v4(options, buf, offset) {
-    if (native.randomUUID && true && !options) {
-        return native.randomUUID();
-    }
-    options = options || {};
-    const rnds = options.random ?? options.rng?.() ?? rng();
-    if (rnds.length < 16) {
-        throw new Error('Random bytes length must be >= 16');
-    }
-    rnds[6] = (rnds[6] & 0x0f) | 0x40;
-    rnds[8] = (rnds[8] & 0x3f) | 0x80;
-    return unsafeStringify(rnds);
-}
-
-const generateRandomId = () => v4();
+const generateRandomId = () => uuid.v4();
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -223,7 +167,7 @@ const WithFeedback = (Base) => {
      */
     _getFeedbackTemplate(ctx) {
       const feedbackTag = ctx.tagFor(FeedbackMessage);
-      return vividElement.html`
+      return fastElement.html`
 				<${feedbackTag} id="feedback" :type="${(x) => x._internalFeedback().type}">
 					${(x) => x._internalFeedback().message}
 				</${feedbackTag}>
@@ -231,16 +175,16 @@ const WithFeedback = (Base) => {
 					id="slotted-helper-text-feedback"
 					:type="${(x) => x._slottedHelperTextFeedbackType()}"
 				>
-					<slot name="helper-text" ${slotted.slotted("_helperTextSlottedContent")}></slot>
+					<slot name="helper-text" ${fastElement.slotted("_helperTextSlottedContent")}></slot>
 				</${feedbackTag}>
 			`;
     }
   }
   __decorateClass([
-    vividElement.attr({ attribute: "helper-text" })
+    fastElement.attr({ attribute: "helper-text" })
   ], ElementWithFeedback.prototype, "helperText");
   __decorateClass([
-    vividElement.observable
+    fastElement.observable
   ], ElementWithFeedback.prototype, "_helperTextSlottedContent");
   return ElementWithFeedback;
 };
@@ -278,9 +222,9 @@ const WithLightDOMFeedback = (Base) => {
      */
     _getFeedbackTemplate(ctx) {
       const feedbackTag = ctx.tagFor(FeedbackMessage);
-      return vividElement.html`
+      return fastElement.html`
 				<slot name="_feedback"></slot>
-				${renderInLightDOM(vividElement.html`<${feedbackTag}
+				${renderInLightDOM(fastElement.html`<${feedbackTag}
 					slot="_feedback"
 					id="${(x) => x._feedbackId}"
 					:type="${(x) => x._internalFeedback().type}"
@@ -290,14 +234,14 @@ const WithLightDOMFeedback = (Base) => {
 				<${feedbackTag} :type="${(x) => x._slottedHelperTextFeedbackType()}">
 					<slot
 						name="helper-text"
-						${slotted.slotted("_helperTextSlottedContent")}
+						${fastElement.slotted("_helperTextSlottedContent")}
 					></slot>
 				</${feedbackTag}>
 			`;
     }
   }
   __decorateClass([
-    vividElement.observable
+    fastElement.observable
   ], ElementWithLightDOMFeedback.prototype, "_slottedHelperTextIds");
   return ElementWithLightDOMFeedback;
 };

package/{shared → unbundled}/mixins.js

@@ -1,10 +1,10 @@
-import { f as defineVividComponent, h as html, V as VividElement, a as attr, H as HTMLDirective, D as DOM, O as Observable, o as observable } from './vivid-element.js';
-import { i as iconDefinition, I as Icon } from './definition28.js';
-import { v as visuallyHiddenDefinition } from './definition66.js';
-import { c as classNames } from './class-names.js';
-import { w as when } from './when.js';
+import { html, when, attr, HTMLDirective, DOM, Observable, observable, slotted } from '@microsoft/fast-element';
+import { v4 } from 'uuid';
+import { classNames } from '@microsoft/fast-web-utilities';
+import { iconDefinition, VwcIconElement as Icon } from '../icon/definition.js';
+import { d as defineVividComponent, V as VividElement } from './vivid-element.js';
+import { visuallyHiddenDefinition } from '../visually-hidden/definition.js';
 import { L as Localized } from './localized.js';
-import { s as slotted } from './slotted.js';
 
 const styles = ":host{display:contents}.message{display:flex;contain:inline-size;font:var(--vvd-typography-base-condensed);gap:4px;grid-column:1/-1}.message.none-message{display:none}.message.helper-message{color:var(--_low-ink-color)}.message.error-message,.message.success-message{color:var(--vvd-color-canvas-text)}slot{display:inline}.icon{font-size:16px}.error-message .icon{color:var(--vvd-color-alert-500)}.success-message .icon{color:var(--vvd-color-success-500)}.announcement{display:contents}";
 
@@ -120,62 +120,6 @@ function renderInLightDOM(templateOrTemplateBinding) {
   return new RenderInLightDomDirective(templateBinding);
 }
 
-const byteToHex = [];
-for (let i = 0; i < 256; ++i) {
-    byteToHex.push((i + 0x100).toString(16).slice(1));
-}
-function unsafeStringify(arr, offset = 0) {
-    return (byteToHex[arr[offset + 0]] +
-        byteToHex[arr[offset + 1]] +
-        byteToHex[arr[offset + 2]] +
-        byteToHex[arr[offset + 3]] +
-        '-' +
-        byteToHex[arr[offset + 4]] +
-        byteToHex[arr[offset + 5]] +
-        '-' +
-        byteToHex[arr[offset + 6]] +
-        byteToHex[arr[offset + 7]] +
-        '-' +
-        byteToHex[arr[offset + 8]] +
-        byteToHex[arr[offset + 9]] +
-        '-' +
-        byteToHex[arr[offset + 10]] +
-        byteToHex[arr[offset + 11]] +
-        byteToHex[arr[offset + 12]] +
-        byteToHex[arr[offset + 13]] +
-        byteToHex[arr[offset + 14]] +
-        byteToHex[arr[offset + 15]]).toLowerCase();
-}
-
-let getRandomValues;
-const rnds8 = new Uint8Array(16);
-function rng() {
-    if (!getRandomValues) {
-        if (typeof crypto === 'undefined' || !crypto.getRandomValues) {
-            throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
-        }
-        getRandomValues = crypto.getRandomValues.bind(crypto);
-    }
-    return getRandomValues(rnds8);
-}
-
-const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
-const native = { randomUUID };
-
-function v4(options, buf, offset) {
-    if (native.randomUUID && true && !options) {
-        return native.randomUUID();
-    }
-    options = options || {};
-    const rnds = options.random ?? options.rng?.() ?? rng();
-    if (rnds.length < 16) {
-        throw new Error('Random bytes length must be >= 16');
-    }
-    rnds[6] = (rnds[6] & 0x0f) | 0x40;
-    rnds[8] = (rnds[8] & 0x3f) | 0x80;
-    return unsafeStringify(rnds);
-}
-
 const generateRandomId = () => v4();
 
 var __defProp = Object.defineProperty;

package/{shared → unbundled}/option.cjs

@@ -1,9 +1,10 @@
 'use strict';
 
+const fastElement = require('@microsoft/fast-element');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const affix = require('./affix.cjs');
 const vividElement = require('./vivid-element.cjs');
 const hostSemantics = require('./host-semantics.cjs');
-const dom = require('./dom.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -16,7 +17,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 function isListboxOption(el) {
-  return dom.isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement || el instanceof ListboxOption);
+  return fastWebUtilities.isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement || el instanceof ListboxOption);
 }
 class ListboxOption extends hostSemantics.HostSemantics(
   affix.AffixIconWithTrailing(vividElement.VividElement)
@@ -109,6 +110,14 @@ class ListboxOption extends hostSemantics.HostSemantics(
   get text() {
     return this._text ?? "";
   }
+  /**
+   * Provides an accessible name for use by parent components.
+   * Note: Does not implement full accessible name computation, e.g. slotted content is missed.
+   * @internal
+   */
+  _getAccessibleName() {
+    return this.ariaLabel || `${this.text}${this.textSecondary ? ` ${this.textSecondary}` : ""}`;
+  }
   get form() {
     return null;
   }
@@ -138,7 +147,7 @@ class ListboxOption extends hostSemantics.HostSemantics(
   }
 }
 __decorateClass([
-  vividElement.attr({
+  fastElement.attr({
     converter: {
       fromView: (value) => {
         if (value === true || value === "true") {
@@ -154,51 +163,54 @@ __decorateClass([
   })
 ], ListboxOption.prototype, "checked", 2);
 __decorateClass([
-  vividElement.attr({ attribute: "selected", mode: "boolean" })
+  fastElement.attr({ attribute: "selected", mode: "boolean" })
 ], ListboxOption.prototype, "defaultSelected", 2);
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], ListboxOption.prototype, "disabled", 2);
 __decorateClass([
-  vividElement.attr({ attribute: "current-selected", mode: "boolean" })
+  fastElement.attr({ attribute: "current-selected", mode: "boolean" })
 ], ListboxOption.prototype, "selected", 2);
 __decorateClass([
-  vividElement.attr({ attribute: "value" })
+  fastElement.attr({ attribute: "value" })
 ], ListboxOption.prototype, "value", 2);
 __decorateClass([
-  vividElement.attr({
+  fastElement.attr({
     attribute: "label"
   })
 ], ListboxOption.prototype, "_label", 2);
 __decorateClass([
-  vividElement.attr({
+  fastElement.attr({
     attribute: "text"
   })
 ], ListboxOption.prototype, "_text", 2);
 __decorateClass([
-  vividElement.observable
+  fastElement.attr({ attribute: "text-secondary" })
+], ListboxOption.prototype, "textSecondary", 2);
+__decorateClass([
+  fastElement.observable
 ], ListboxOption.prototype, "_highlighted", 2);
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], ListboxOption.prototype, "_displayCheckmark", 2);
 __decorateClass([
-  vividElement.attr({ attribute: "matched-text" })
+  fastElement.attr({ attribute: "matched-text" })
 ], ListboxOption.prototype, "matchedText", 2);
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], ListboxOption.prototype, "_vvdSearchText", 2);
 __decorateClass([
-  vividElement.volatile
+  fastElement.volatile
 ], ListboxOption.prototype, "_hasMatchedText", 1);
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], ListboxOption.prototype, "_isNotMatching", 2);
 __decorateClass([
-  vividElement.volatile
+  fastElement.volatile
 ], ListboxOption.prototype, "_matchedRange", 1);
 __decorateClass([
-  vividElement.attr({ attribute: "tag-connotation" })
+  fastElement.attr({ attribute: "tag-connotation" })
 ], ListboxOption.prototype, "tagConnotation", 2);
 
 exports.ListboxOption = ListboxOption;

package/{shared → unbundled}/option.js

@@ -1,7 +1,8 @@
+import { attr, observable, volatile } from '@microsoft/fast-element';
+import { isHTMLElement } from '@microsoft/fast-web-utilities';
 import { A as AffixIconWithTrailing } from './affix.js';
-import { V as VividElement, a as attr, o as observable, v as volatile } from './vivid-element.js';
+import { V as VividElement } from './vivid-element.js';
 import { H as HostSemantics } from './host-semantics.js';
-import { i as isHTMLElement } from './dom.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -107,6 +108,14 @@ class ListboxOption extends HostSemantics(
   get text() {
     return this._text ?? "";
   }
+  /**
+   * Provides an accessible name for use by parent components.
+   * Note: Does not implement full accessible name computation, e.g. slotted content is missed.
+   * @internal
+   */
+  _getAccessibleName() {
+    return this.ariaLabel || `${this.text}${this.textSecondary ? ` ${this.textSecondary}` : ""}`;
+  }
   get form() {
     return null;
   }
@@ -174,6 +183,9 @@ __decorateClass([
     attribute: "text"
   })
 ], ListboxOption.prototype, "_text", 2);
+__decorateClass([
+  attr({ attribute: "text-secondary" })
+], ListboxOption.prototype, "textSecondary", 2);
 __decorateClass([
   observable
 ], ListboxOption.prototype, "_highlighted", 2);

package/{shared → unbundled}/picker-field.template.cjs

@@ -1,18 +1,18 @@
 'use strict';
 
+const fastElement = require('@microsoft/fast-element');
 const index = require('./index.cjs');
 const mixins = require('./mixins.cjs');
 const formAssociated = require('./form-associated.cjs');
 const vividElement = require('./vivid-element.cjs');
+const withContextualHelp = require('./with-contextual-help.cjs');
 const withErrorText = require('./with-error-text.cjs');
 const formElement = require('./form-element.cjs');
 const localized = require('./localized.cjs');
-const definition = require('./definition67.cjs');
-const definition$1 = require('./definition58.cjs');
-const definition$2 = require('./definition11.cjs');
-const ref = require('./ref.cjs');
-const slotted = require('./slotted.cjs');
-const classNames = require('./class-names.cjs');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const popup_definition = require('./definition4.cjs');
+const textField_definition = require('../text-field/definition.cjs');
+const button_definition = require('./definition.cjs');
 
 const ignoredEvents = /* @__PURE__ */ new WeakSet();
 const ignoreEventInFocusTraps = (event) => {
@@ -58,9 +58,11 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class PickerField extends mixins.WithFeedback(
-  withErrorText.WithErrorText(
-    formElement.FormElement(TrappedFocus(localized.Localized(formAssociated.FormAssociated(vividElement.VividElement))))
+class PickerField extends withContextualHelp.WithContextualHelp(
+  mixins.WithFeedback(
+    withErrorText.WithErrorText(
+      formElement.FormElement(TrappedFocus(localized.Localized(formAssociated.FormAssociated(vividElement.VividElement))))
+    )
   )
 ) {
   // --- Core ---
@@ -140,11 +142,11 @@ class PickerField extends mixins.WithFeedback(
   #localeChangeHandler;
   #localeChangeObserver;
   #startObservingLocaleChanges() {
-    this.#localeChangeObserver = vividElement.Observable.binding(
+    this.#localeChangeObserver = fastElement.Observable.binding(
       () => this.locale,
       this.#localeChangeHandler
     );
-    this.#localeChangeObserver.observe(this, vividElement.defaultExecutionContext);
+    this.#localeChangeObserver.observe(this, fastElement.defaultExecutionContext);
   }
   #stopObservingLocaleChanges() {
     this.#localeChangeObserver.disconnect();
@@ -217,23 +219,23 @@ class PickerField extends mixins.WithFeedback(
   }
 }
 __decorateClass([
-  vividElement.attr({ attribute: "readonly", mode: "boolean" })
+  fastElement.attr({ attribute: "readonly", mode: "boolean" })
 ], PickerField.prototype, "readOnly");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], PickerField.prototype, "_popupOpen");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], PickerField.prototype, "_presentationValue");
 
 const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, padded }) => {
-  const popupTag = context.tagFor(definition.Popup);
-  const textFieldTag = context.tagFor(definition$1.TextField);
-  const buttonTag = context.tagFor(definition$2.Button);
-  return vividElement.html`
+  const popupTag = context.tagFor(popup_definition.Popup);
+  const textFieldTag = context.tagFor(textField_definition.VwcTextFieldElement);
+  const buttonTag = context.tagFor(button_definition.Button);
+  return fastElement.html`
 		<div class='base' @keydown='${(x, { event }) => x._onBaseKeyDown(event)}'>
 			<${textFieldTag} id='text-field'
-				${ref.ref("_textFieldEl")}
+				${fastElement.ref("_textFieldEl")}
 				class='control'
 				label='${(x) => x.label}'
 				helper-text='${(x) => x.helperText}'
@@ -249,11 +251,16 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
 				<slot
 					slot='${(x) => x._helperTextSlottedContent?.length ? "helper-text" : void 0}'
 					name='helper-text'
-					${slotted.slotted("_helperTextSlottedContent")}
+					${fastElement.slotted("_helperTextSlottedContent")}
+				></slot>
+				<slot
+					slot='${(x) => x._contextualHelpSlottedContent?.length ? "contextual-help" : void 0}'
+					name='contextual-help'
+					${fastElement.slotted("_contextualHelpSlottedContent")}
 				></slot>
 				<${buttonTag}
 					id='picker-button'
-					${ref.ref("_pickerButtonEl")}
+					${fastElement.ref("_pickerButtonEl")}
 					slot='action-items'
 					size='condensed'
 					icon='${(x) => x._pickerButtonIcon}'
@@ -269,15 +276,16 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
 				offset='${(x) => x._helperTextSlottedContent?.length || x.helperText || x.errorValidationMessage ? 8 : null}'
 				placement='bottom-start'
 				class='popup'>
-				<div class="${() => classNames.classNames("dialog", [
+				<div class="${() => fastWebUtilities.classNames("dialog", [
     "dialog--padded",
     padded
-  ])}" role='dialog' ${ref.ref(
+  ])}" role='dialog' ${fastElement.ref(
     "_dialogEl"
   )} aria-modal='true' aria-label='${(x) => x._dialogLabel}'>
 					${() => popupContentTemplate}
-					<div class="${() => classNames.classNames("footer", ["footer--with-separator", withSeparator])}">
+					<div class="${() => fastWebUtilities.classNames("footer", ["footer--with-separator", withSeparator])}">
 						<${buttonTag}
+							id='clear-button'
 							tabindex='3'
 							class='vwc-button'
 							size='condensed'

package/{shared → unbundled}/picker-field.template.js

@@ -1,16 +1,16 @@
+import { Observable, defaultExecutionContext, attr, observable, ref, slotted, html } from '@microsoft/fast-element';
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { a as WithFeedback } from './mixins.js';
 import { F as FormAssociated } from './form-associated.js';
-import { V as VividElement, O as Observable, i as defaultExecutionContext, a as attr, o as observable, h as html } from './vivid-element.js';
+import { V as VividElement } from './vivid-element.js';
+import { W as WithContextualHelp } from './with-contextual-help.js';
 import { W as WithErrorText } from './with-error-text.js';
 import { F as FormElement } from './form-element.js';
 import { L as Localized } from './localized.js';
-import { P as Popup } from './definition67.js';
-import { T as TextField } from './definition58.js';
-import { B as Button } from './definition11.js';
-import { r as ref } from './ref.js';
-import { s as slotted } from './slotted.js';
-import { c as classNames } from './class-names.js';
+import { classNames } from '@microsoft/fast-web-utilities';
+import { P as Popup } from './definition4.js';
+import { VwcTextFieldElement as TextField } from '../text-field/definition.js';
+import { B as Button } from './definition.js';
 
 const ignoredEvents = /* @__PURE__ */ new WeakSet();
 const ignoreEventInFocusTraps = (event) => {
@@ -56,9 +56,11 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class PickerField extends WithFeedback(
-  WithErrorText(
-    FormElement(TrappedFocus(Localized(FormAssociated(VividElement))))
+class PickerField extends WithContextualHelp(
+  WithFeedback(
+    WithErrorText(
+      FormElement(TrappedFocus(Localized(FormAssociated(VividElement))))
+    )
   )
 ) {
   // --- Core ---
@@ -249,6 +251,11 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
 					name='helper-text'
 					${slotted("_helperTextSlottedContent")}
 				></slot>
+				<slot
+					slot='${(x) => x._contextualHelpSlottedContent?.length ? "contextual-help" : void 0}'
+					name='contextual-help'
+					${slotted("_contextualHelpSlottedContent")}
+				></slot>
 				<${buttonTag}
 					id='picker-button'
 					${ref("_pickerButtonEl")}
@@ -276,6 +283,7 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
 					${() => popupContentTemplate}
 					<div class="${() => classNames("footer", ["footer--with-separator", withSeparator])}">
 						<${buttonTag}
+							id='clear-button'
 							tabindex='3'
 							class='vwc-button'
 							size='condensed'