@vonage/vivid 4.31.0 → 5.1.0

package/text-area/index.js

@@ -1,3 +1,293 @@
-import { r as registerTextArea } from '../shared/definition57.js';
-
-registerTextArea();
+import { O as p, D as d, V as b, a as l, n as i, o as x, h, c as m, d as f } from "../bundled/vivid-element.js";
+import { W as _, f as g } from "../bundled/mixins.js";
+import { v as y } from "../bundled/definition12.js";
+import { c as k } from "../bundled/definition11.js";
+import { D as w, d as C } from "../bundled/delegates-aria.js";
+import { F as $ } from "../bundled/form-associated.js";
+import { W as T } from "../bundled/with-contextual-help.js";
+import { W as z } from "../bundled/char-count.js";
+import { W as A } from "../bundled/with-error-text.js";
+import { W as H } from "../bundled/with-success-text.js";
+import { F as E } from "../bundled/form-element.js";
+import { c as D } from "../bundled/class-names.js";
+import { w as u } from "../bundled/when.js";
+import { s as O } from "../bundled/slotted.js";
+import { r as W } from "../bundled/ref.js";
+const L = ".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}:host{display:inline-block}.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.connotation-success{--_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-text-area-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-text-area-success-fierce, var(--vvd-color-success-700));--_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-text-area-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-text-area-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-area-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-area-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100))}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base);grid-column:1/2;grid-row:1;line-height:20px}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.control{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.control{box-sizing:border-box;padding:8px 16px;border:0 none;border-radius:8px;appearance:none;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);grid-column:1/-1;min-block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}@supports selector(::-webkit-resizer){.control::-webkit-resizer{background-image:linear-gradient(315deg,transparent 0,transparent 2px,var(--vvd-color-canvas-text) 2px,var(--vvd-color-canvas-text) 3px,transparent 3px,transparent 5px,var(--vvd-color-canvas-text) 5px,var(--vvd-color-canvas-text) 6px,transparent 6px,transparent 8px,transparent 100%);background-repeat:no-repeat;background-size:10px 10px;block-size:10px;inline-size:10px}}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control:focus-visible{--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))}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}";
+class M {
+  #e = /* @__PURE__ */ new Map();
+  #r;
+  #a;
+  constructor(e, a) {
+    this.#r = e, this.#a = a;
+  }
+  attribute(e, a) {
+    this.#o(e, {
+      type: "attribute",
+      destination: a
+    });
+  }
+  booleanAttribute(e, a) {
+    this.#o(e, {
+      type: "boolean-attribute",
+      destination: a
+    });
+  }
+  property(e, a, n = !1) {
+    this.#o(e, {
+      type: "property",
+      destination: a,
+      skipIfEqual: n
+    });
+  }
+  destroy() {
+    const e = p.getNotifier(this.#r);
+    for (const a of this.#e.keys())
+      e.unsubscribe(this.#t, a);
+    this.#e.clear();
+  }
+  #o(e, a) {
+    this.#e.set(e, a), p.getNotifier(this.#r).subscribe(this.#t, e), this.#t.handleChange(this.#r, e);
+  }
+  #t = {
+    handleChange: (e, a) => {
+      const n = this.#e.get(a), o = e[a];
+      switch (n.type) {
+        case "boolean-attribute":
+          d.setBooleanAttribute(
+            this.#a,
+            n.destination,
+            !!o
+          );
+          break;
+        case "attribute":
+          d.setAttribute(this.#a, n.destination, o);
+          break;
+        case "property":
+          if (n.skipIfEqual && this.#a[n.destination] === o)
+            return;
+          this.#a[n.destination] = o;
+          break;
+      }
+    }
+  };
+}
+var F = Object.defineProperty, t = (c, e, a, n) => {
+  for (var o = void 0, s = c.length - 1, v; s >= 0; s--)
+    (v = c[s]) && (o = v(e, a, o) || o);
+  return o && F(e, a, o), o;
+};
+const B = {
+  /**
+   * No resize.
+   */
+  none: "none"
+};
+class r extends T(
+  _(
+    z(
+      A(
+        H(
+          E(w($(b)))
+        )
+      )
+    )
+  )
+) {
+  constructor() {
+    super(...arguments), this.proxy = document.createElement("textarea"), this.resize = B.none, this.cols = 20, this.handleTextInput = () => {
+      this.value = this.control.value;
+    };
+  }
+  /**
+   * @internal
+   */
+  readOnlyChanged() {
+    this.proxy instanceof HTMLTextAreaElement && (this.proxy.readOnly = this.readOnly);
+  }
+  /**
+   * @internal
+   */
+  autofocusChanged() {
+    this.proxy instanceof HTMLTextAreaElement && (this.proxy.autofocus = this.autofocus);
+  }
+  /**
+   * @internal
+   */
+  listChanged() {
+    this.proxy instanceof HTMLTextAreaElement && this.proxy.setAttribute("list", this.list);
+  }
+  /**
+   * @internal
+   */
+  maxlengthChanged() {
+    this.proxy instanceof HTMLTextAreaElement && (this.proxy.maxLength = this.maxlength);
+  }
+  /**
+   * @internal
+   */
+  minlengthChanged() {
+    this.proxy instanceof HTMLTextAreaElement && (this.proxy.minLength = this.minlength);
+  }
+  /**
+   * @internal
+   */
+  spellcheckChanged() {
+    this.proxy instanceof HTMLTextAreaElement && (this.proxy.spellcheck = this.spellcheck);
+  }
+  /**
+   * Selects all the text in the text area
+   *
+   * @public
+   */
+  select() {
+    this.control.select();
+  }
+  /**
+   * @internal
+   */
+  valueChanged(e, a) {
+    super.valueChanged(e, a), this.charCount && this.maxlength && this._updateCharCountRemaining();
+  }
+  /**
+   * Change event handler for inner control.
+   * @remarks
+   * "Change" events are not `composable` so they will not
+   * permeate the shadow DOM boundary. This fn effectively proxies
+   * the change event, emitting a `change` event whenever the internal
+   * control emits a `change` event
+   * @internal
+   */
+  handleChange() {
+    this.$emit("change");
+  }
+  /** {@inheritDoc (FormAssociated:interface).validate} */
+  validate() {
+    super.validate(this.control);
+  }
+  #e;
+  connectedCallback() {
+    super.connectedCallback(), this.#e = new M(this, this.control), this.#e.property("value", "value", !0), this._renderCharCountRemaining();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.#e.destroy();
+  }
+}
+t([
+  l({ mode: "boolean" })
+], r.prototype, "readOnly");
+t([
+  l
+], r.prototype, "resize");
+t([
+  l({ mode: "boolean" })
+], r.prototype, "autofocus");
+t([
+  l({ attribute: "form" })
+], r.prototype, "formId");
+t([
+  l
+], r.prototype, "list");
+t([
+  l({ converter: i })
+], r.prototype, "maxlength");
+t([
+  l({ converter: i })
+], r.prototype, "minlength");
+t([
+  l
+], r.prototype, "placeholder");
+t([
+  l({ converter: i, mode: "fromView" })
+], r.prototype, "cols");
+t([
+  l({ converter: i, mode: "fromView" })
+], r.prototype, "rows");
+t([
+  l({ mode: "boolean" })
+], r.prototype, "spellcheck");
+t([
+  x
+], r.prototype, "defaultSlottedNodes");
+t([
+  l
+], r.prototype, "wrap");
+const S = ({
+  value: c,
+  errorValidationMessage: e,
+  disabled: a,
+  placeholder: n,
+  readOnly: o,
+  successText: s
+}) => D(
+  "base",
+  ["readonly", o],
+  ["placeholder", !!n],
+  ["disabled", a],
+  ["error", !!e],
+  ["has-value", !!c],
+  ["success", !!s]
+);
+function R() {
+  return h` <label for="control" class="label">
+		${(c) => c.label}
+	</label>`;
+}
+const P = (c) => h`
+		<div class="${S}">
+			<div
+				class="label-suffix"
+				?hidden=${(e) => !(e.charCount && e.maxlength) && !e._hasContextualHelp}
+			>
+				${u(
+  (e) => e.charCount && e.maxlength,
+  (e) => e._getCharCountTemplate(c)
+)}
+				<slot
+					name="contextual-help"
+					${O("_contextualHelpSlottedContent")}
+				></slot>
+			</div>
+			${u((e) => e.label, R())}
+			<textarea
+				class="control"
+				id="control"
+				?autofocus="${(e) => e.autofocus}"
+				placeholder="${(e) => e.placeholder ? e.placeholder : null}"
+				name="${(e) => e.name ? e.name : null}"
+				list="${(e) => e.list}"
+				minlength="${(e) => e.minlength ? e.minlength : null}"
+				maxlength="${(e) => e.maxlength ? e.maxlength : null}"
+				rows="${(e) => e.rows ? e.rows : null}"
+				cols="${(e) => e.cols ? e.cols : null}"
+				wrap="${(e) => e.wrap ? e.wrap : null}"
+				?readonly="${(e) => e.readOnly}"
+				?disabled="${(e) => e.disabled}"
+				?required="${(e) => e.required}"
+				?spellcheck="${(e) => e.spellcheck}"
+				aria-describedby="${(e) => e._feedbackDescribedBy} ${(e) => e.charCount && e.maxlength ? e._charCountDescribedBy : null}"
+				${C()}
+				@input="${(e) => e.handleTextInput()}"
+				@change="${(e) => e.handleChange()}"
+				${W("control")}
+			>
+			</textarea>
+			${(e) => e._getFeedbackTemplate(c)}
+		</div>
+	`, V = f(
+  "text-area",
+  r,
+  P,
+  [
+    g,
+    y,
+    k
+  ],
+  {
+    styles: L,
+    shadowOptions: {
+      delegatesFocus: !0
+    }
+  }
+), I = m(V);
+I();

package/{shared/definition58.cjs → text-field/definition.cjs}

@@ -1,21 +1,23 @@
 'use strict';
 
-const definition = require('./definition28.cjs');
-const vividElement = require('./vivid-element.cjs');
-const mixins = require('./mixins.cjs');
-const definition$1 = require('./definition66.cjs');
-const delegatesAria = require('./delegates-aria.cjs');
-const formAssociated = require('./form-associated.cjs');
-const charCount = require('./char-count.cjs');
-const withErrorText = require('./with-error-text.cjs');
-const withSuccessText = require('./with-success-text.cjs');
-const formElement = require('./form-element.cjs');
-const affix = require('./affix.cjs');
-const textField = require('./text-field.cjs');
-const classNames = require('./class-names.cjs');
-const when = require('./when.cjs');
-const slotted = require('./slotted.cjs');
-const ref = require('./ref.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const icon_definition = require('../icon/definition.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const mixins = require('../unbundled/mixins.cjs');
+const visuallyHidden_definition = require('../visually-hidden/definition.cjs');
+const contextualHelp_definition = require('../contextual-help/definition.cjs');
+const fastElement = require('@microsoft/fast-element');
+const delegatesAria = require('../unbundled/delegates-aria.cjs');
+const formAssociated = require('../unbundled/form-associated.cjs');
+const withContextualHelp = require('../unbundled/with-contextual-help.cjs');
+const charCount = require('../unbundled/char-count.cjs');
+const withErrorText = require('../unbundled/with-error-text.cjs');
+const withSuccessText = require('../unbundled/with-success-text.cjs');
+const formElement = require('../unbundled/form-element.cjs');
+const affix = require('../unbundled/affix.cjs');
+const textField = require('../unbundled/text-field.cjs');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -32,7 +34,7 @@ const TextFieldType = {
    */
   text: "text"};
 const safariWorkaroundClassName = "_vvd-3-text-field-safari-workaround";
-const safariWorkaroundStyles = vividElement.ElementStyles.create([
+const safariWorkaroundStyles = fastElement.ElementStyles.create([
   `
 	.${safariWorkaroundClassName}::placeholder {
 		opacity: 1 !important;
@@ -46,11 +48,13 @@ const installSafariWorkaroundStyleIfNeeded = (forElement) => {
     safariWorkaroundStyles.addStylesTo(root);
   }
 };
-class TextField extends mixins.WithLightDOMFeedback(
-  charCount.WithCharCount(
-    withErrorText.WithErrorText(
-      withSuccessText.WithSuccessText(
-        formElement.FormElement(affix.AffixIcon(delegatesAria.DelegatesAria(formAssociated.FormAssociated(vividElement.VividElement))))
+class TextField extends withContextualHelp.WithContextualHelp(
+  mixins.WithLightDOMFeedback(
+    charCount.WithCharCount(
+      withErrorText.WithErrorText(
+        withSuccessText.WithSuccessText(
+          formElement.FormElement(affix.AffixIcon(delegatesAria.DelegatesAria(formAssociated.FormAssociated(vividElement.VividElement))))
+        )
       )
     )
   )
@@ -209,7 +213,7 @@ class TextField extends mixins.WithLightDOMFeedback(
     this.proxy.setAttribute("type", this.type);
     this.validate();
     if (this.autofocus) {
-      vividElement.DOM.queueUpdate(() => {
+      fastElement.DOM.queueUpdate(() => {
         this.focus();
       });
     }
@@ -229,55 +233,55 @@ class TextField extends mixins.WithLightDOMFeedback(
   }
 }
 __decorateClass([
-  vividElement.attr({ attribute: "readonly", mode: "boolean" })
+  fastElement.attr({ attribute: "readonly", mode: "boolean" })
 ], TextField.prototype, "readOnly");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], TextField.prototype, "autofocus");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], TextField.prototype, "placeholder");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], TextField.prototype, "type");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], TextField.prototype, "list");
 __decorateClass([
-  vividElement.attr({ converter: vividElement.nullableNumberConverter })
+  fastElement.attr({ converter: fastElement.nullableNumberConverter })
 ], TextField.prototype, "maxlength");
 __decorateClass([
-  vividElement.attr({ converter: vividElement.nullableNumberConverter })
+  fastElement.attr({ converter: fastElement.nullableNumberConverter })
 ], TextField.prototype, "minlength");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], TextField.prototype, "pattern");
 __decorateClass([
-  vividElement.attr({ converter: vividElement.nullableNumberConverter })
+  fastElement.attr({ converter: fastElement.nullableNumberConverter })
 ], TextField.prototype, "size");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], TextField.prototype, "spellcheck");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], TextField.prototype, "appearance");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], TextField.prototype, "shape");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], TextField.prototype, "autoComplete");
 __decorateClass([
-  vividElement.attr()
+  fastElement.attr()
 ], TextField.prototype, "scale");
 __decorateClass([
-  vividElement.attr({ attribute: "inputmode" })
+  fastElement.attr({ attribute: "inputmode" })
 ], TextField.prototype, "inputMode");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], TextField.prototype, "actionItemsSlottedContent");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], TextField.prototype, "leadingActionItemsSlottedContent");
 
 const getControlId = (id) => `vvd-text-field-control-${id}`;
@@ -295,7 +299,7 @@ const getStateClasses = ({
   leadingActionItemsSlottedContent,
   icon,
   scale
-}) => classNames.classNames(
+}) => fastWebUtilities.classNames(
   ["error", Boolean(errorValidationMessage)],
   ["disabled", disabled],
   ["has-value", Boolean(value)],
@@ -313,17 +317,26 @@ const getStateClasses = ({
 );
 const TextfieldTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return vividElement.html`
+  return fastElement.html`
 		<div class="base ${getStateClasses}">
-			${when.when(
+			<div
+				class="label-suffix"
+				?hidden=${(x) => !(x.charCount && x.maxlength) && !x._hasContextualHelp}
+			>
+				${fastElement.when(
     (x) => x.charCount && x.maxlength,
     (x) => x._getCharCountTemplate(context)
   )}
+				<slot
+					name="contextual-help"
+					${fastElement.slotted("_contextualHelpSlottedContent")}
+				></slot>
+			</div>
 			<slot class="label" name="_label"></slot>
-			${mixins.renderInLightDOM(vividElement.html`
-				${when.when(
+			${mixins.renderInLightDOM(fastElement.html`
+				${fastElement.when(
     (x) => x.label,
-    vividElement.html`
+    fastElement.html`
 						<label slot="_label" for="${(x) => getControlId(x._uniqueId)}">
 							${(x) => x.label}
 						</label>
@@ -334,14 +347,14 @@ const TextfieldTemplate = (context) => {
 				<div class="leading-items-wrapper">
 					<slot
 						name="leading-action-items"
-						${slotted.slotted("leadingActionItemsSlottedContent")}
+						${fastElement.slotted("leadingActionItemsSlottedContent")}
 					></slot>
 					${(x) => affixIconTemplate(x.icon)}
 				</div>
 				<div class="wrapper">
 					<slot class="control" name="_control"></slot>
 					${mixins.renderInLightDOM(
-    vividElement.html`<input
+    fastElement.html`<input
 							slot="_control"
 							id="${(x) => getControlId(x._uniqueId)}"
 							class="_vvd-3-text-field-safari-workaround"
@@ -370,14 +383,14 @@ const TextfieldTemplate = (context) => {
 							aria-describedby="${(x) => x._feedbackDescribedBy} ${(x) => x.charCount && x.maxlength ? x._charCountDescribedBy : null}"
 							value="${(x) => x.initialValue}"
 							${delegatesAria.delegateAria()}
-							${ref.ref("control")}
+							${fastElement.ref("control")}
 						/>`
   )}
 				</div>
 				<div class="action-items-wrapper">
 					<slot
 						name="action-items"
-						${slotted.slotted("actionItemsSlottedContent")}
+						${fastElement.slotted("actionItemsSlottedContent")}
 					></slot>
 				</div>
 			</div>
@@ -390,7 +403,12 @@ const textFieldDefinition = vividElement.defineVividComponent(
   "text-field",
   TextField,
   TextfieldTemplate,
-  [definition.iconDefinition, mixins.feedbackMessageDefinition, definition$1.visuallyHiddenDefinition],
+  [
+    icon_definition.iconDefinition,
+    mixins.feedbackMessageDefinition,
+    visuallyHidden_definition.visuallyHiddenDefinition,
+    contextualHelp_definition.contextualHelpDefinition
+  ],
   {
     styles: textField.styles,
     shadowOptions: {
@@ -400,6 +418,6 @@ const textFieldDefinition = vividElement.defineVividComponent(
 );
 const registerTextField = vividElement.createRegisterFunction(textFieldDefinition);
 
-exports.TextField = TextField;
+exports.VwcTextFieldElement = TextField;
 exports.registerTextField = registerTextField;
 exports.textFieldDefinition = textFieldDefinition;

package/{shared/definition58.js → text-field/definition.js}

@@ -1,19 +1,19 @@
-import { i as iconDefinition } from './definition28.js';
-import { D as DOM, E as ElementStyles, V as VividElement, a as attr, n as nullableNumberConverter, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { W as WithLightDOMFeedback, g as generateRandomId, r as renderInLightDOM, f as feedbackMessageDefinition } from './mixins.js';
-import { v as visuallyHiddenDefinition } from './definition66.js';
-import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
-import { F as FormAssociated } from './form-associated.js';
-import { W as WithCharCount } from './char-count.js';
-import { W as WithErrorText } from './with-error-text.js';
-import { W as WithSuccessText } from './with-success-text.js';
-import { F as FormElement } from './form-element.js';
-import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
-import { s as styles } from './text-field.js';
-import { c as classNames } from './class-names.js';
-import { w as when } from './when.js';
-import { s as slotted } from './slotted.js';
-import { r as ref } from './ref.js';
+import { iconDefinition } from '../icon/definition.js';
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { W as WithLightDOMFeedback, g as generateRandomId, r as renderInLightDOM, f as feedbackMessageDefinition } from '../unbundled/mixins.js';
+import { visuallyHiddenDefinition } from '../visually-hidden/definition.js';
+import { contextualHelpDefinition } from '../contextual-help/definition.js';
+import { DOM, ElementStyles, attr, nullableNumberConverter, observable, when, slotted, html, ref } from '@microsoft/fast-element';
+import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
+import { F as FormAssociated } from '../unbundled/form-associated.js';
+import { W as WithContextualHelp } from '../unbundled/with-contextual-help.js';
+import { W as WithCharCount } from '../unbundled/char-count.js';
+import { W as WithErrorText } from '../unbundled/with-error-text.js';
+import { W as WithSuccessText } from '../unbundled/with-success-text.js';
+import { F as FormElement } from '../unbundled/form-element.js';
+import { b as AffixIcon, a as affixIconTemplateFactory } from '../unbundled/affix.js';
+import { s as styles } from '../unbundled/text-field.js';
+import { classNames } from '@microsoft/fast-web-utilities';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -44,11 +44,13 @@ const installSafariWorkaroundStyleIfNeeded = (forElement) => {
     safariWorkaroundStyles.addStylesTo(root);
   }
 };
-class TextField extends WithLightDOMFeedback(
-  WithCharCount(
-    WithErrorText(
-      WithSuccessText(
-        FormElement(AffixIcon(DelegatesAria(FormAssociated(VividElement))))
+class TextField extends WithContextualHelp(
+  WithLightDOMFeedback(
+    WithCharCount(
+      WithErrorText(
+        WithSuccessText(
+          FormElement(AffixIcon(DelegatesAria(FormAssociated(VividElement))))
+        )
       )
     )
   )
@@ -313,10 +315,19 @@ const TextfieldTemplate = (context) => {
   const affixIconTemplate = affixIconTemplateFactory(context);
   return html`
 		<div class="base ${getStateClasses}">
-			${when(
+			<div
+				class="label-suffix"
+				?hidden=${(x) => !(x.charCount && x.maxlength) && !x._hasContextualHelp}
+			>
+				${when(
     (x) => x.charCount && x.maxlength,
     (x) => x._getCharCountTemplate(context)
   )}
+				<slot
+					name="contextual-help"
+					${slotted("_contextualHelpSlottedContent")}
+				></slot>
+			</div>
 			<slot class="label" name="_label"></slot>
 			${renderInLightDOM(html`
 				${when(
@@ -388,7 +399,12 @@ const textFieldDefinition = defineVividComponent(
   "text-field",
   TextField,
   TextfieldTemplate,
-  [iconDefinition, feedbackMessageDefinition, visuallyHiddenDefinition],
+  [
+    iconDefinition,
+    feedbackMessageDefinition,
+    visuallyHiddenDefinition,
+    contextualHelpDefinition
+  ],
   {
     styles,
     shadowOptions: {
@@ -398,4 +414,4 @@ const textFieldDefinition = defineVividComponent(
 );
 const registerTextField = createRegisterFunction(textFieldDefinition);
 
-export { TextField as T, registerTextField as r, textFieldDefinition as t };
+export { TextField as VwcTextFieldElement, registerTextField, textFieldDefinition };

package/text-field/index.cjs

@@ -1,5 +1 @@
-'use strict';
-
-const definition = require('../shared/definition58.cjs');
-
-definition.registerTextField();
+"use strict";const e=require("../bundled/definition13.cjs");e.registerTextField();

package/text-field/index.js

@@ -1,3 +1,2 @@
-import { r as registerTextField } from '../shared/definition58.js';
-
-registerTextField();
+import { r } from "../bundled/definition13.js";
+r();