@vonage/vivid 3.53.0 → 3.54.0

package/shared/definition5.js

@@ -1,6 +1,7 @@
 import { a as attr, F as FoundationElement, o as observable, h as html, r as registerFactory } from './index.js';
 import { B as Button, a as buttonRegistries } from './definition11.js';
 import { S as Slider, a as sliderRegistries } from './definition46.js';
+import { M as MediaSkipBy } from './enums.js';
 import './affix.js';
 import './index2.js';
 import { L as Localized } from './localized.js';
@@ -22,12 +23,22 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+const validSkipByConverter = {
+  toView(value) {
+    return value;
+  },
+  fromView(value) {
+    return Object.values(MediaSkipBy).includes(value) ? value : void 0;
+  }
+};
 class AudioPlayer extends FoundationElement {
   constructor() {
     super(...arguments);
     this.playButtonAriaLabel = null;
     this.pauseButtonAriaLabel = null;
     this.sliderAriaLabel = null;
+    this.skipForwardButtonAriaLabel = null;
+    this.skipBackwardButtonAriaLabel = null;
     this.disabled = false;
     this.notime = false;
     this.paused = true;
@@ -35,26 +46,18 @@ class AudioPlayer extends FoundationElement {
      * @internal
      */
     this._rewind = () => {
-      this.paused = true;
       if (this._playerEl) {
-        this._playerEl.pause();
         this._playerEl.currentTime = this._playerEl.duration * (Number(this._sliderEl.value) / 100);
       }
     };
   }
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener("keydown", this._rewind);
-    this.addEventListener("mousedown", this._rewind);
-    this.addEventListener("keyup", this._rewind);
     document.addEventListener("mouseup", this._rewind);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener("keydown", this._rewind);
-    this.removeEventListener("mousedown", this._rewind);
-    this.removeEventListener("keyup", this._rewind);
-    document.removeEventListener("mouseup", this._rewind);
+    document.addEventListener("mouseup", this._rewind);
   }
   /**
    * @internal
@@ -68,6 +71,22 @@ class AudioPlayer extends FoundationElement {
     }
     this.paused = !this.paused;
   }
+  /**
+   * @internal
+   */
+  _onSkipButtonClick(isForward) {
+    if (this._playerEl) {
+      const currentTime = this._playerEl.currentTime;
+      const skipDirection = isForward ? 1 : -1;
+      const skipValue = parseInt(this.skipBy) * skipDirection;
+      const newTime = currentTime + skipValue;
+      this._playerEl.currentTime = Math.max(
+        0,
+        Math.min(this._playerEl.duration, newTime)
+      );
+      this._updateProgress();
+    }
+  }
   /**
    * @internal
    */
@@ -101,6 +120,19 @@ class AudioPlayer extends FoundationElement {
         totalTime.textContent = this._formatTime(this._playerEl.duration);
     }
   }
+  /**
+   * @internal
+   */
+  _handleSliderEvent(event) {
+    if (event.target === this._sliderEl) {
+      this.paused = true;
+      if (this._playerEl) {
+        this._playerEl.pause();
+      }
+      this._rewind();
+    }
+    return true;
+  }
   /**
    * @internal
    */
@@ -119,6 +151,12 @@ __decorateClass([
 __decorateClass([
   attr({ attribute: "slider-aria-label" })
 ], AudioPlayer.prototype, "sliderAriaLabel", 2);
+__decorateClass([
+  attr({ attribute: "skip-forward-aria-label" })
+], AudioPlayer.prototype, "skipForwardButtonAriaLabel", 2);
+__decorateClass([
+  attr({ attribute: "skip-backward-aria-label" })
+], AudioPlayer.prototype, "skipBackwardButtonAriaLabel", 2);
 __decorateClass([
   attr
 ], AudioPlayer.prototype, "connotation", 2);
@@ -131,6 +169,12 @@ __decorateClass([
 __decorateClass([
   attr({ mode: "boolean" })
 ], AudioPlayer.prototype, "notime", 2);
+__decorateClass([
+  attr({
+    attribute: "skip-by",
+    converter: validSkipByConverter
+  })
+], AudioPlayer.prototype, "skipBy", 2);
 __decorateClass([
   observable
 ], AudioPlayer.prototype, "paused", 2);
@@ -143,19 +187,43 @@ const getClasses = ({ disabled, duration }) => classNames(["disabled", Boolean(d
 function renderButton(context) {
   const buttonTag = context.tagFor(Button);
   return html`<${buttonTag} class="pause" @click="${(x) => x._togglePlay()}"
-	icon="${(x) => x.paused ? "play-solid" : "pause-solid"}" 
-	aria-label="${(x) => x.paused ? x.playButtonAriaLabel || x.locale.audioPlayer.playButtonLabel : x.pauseButtonAriaLabel || x.locale.audioPlayer.playButtonLabel}" 
-	size='condensed' 
+	icon="${(x) => x.paused ? "play-solid" : "pause-solid"}"
+	aria-label="${(x) => x.paused ? x.playButtonAriaLabel || x.locale.audioPlayer.playButtonLabel : x.pauseButtonAriaLabel || x.locale.audioPlayer.pauseButtonLabel}"
+	size='condensed'
 	connotation="${(x) => x.connotation}"
-	?disabled="${(x) => x.disabled || !x.duration}" 
+	?disabled="${(x) => x.disabled || !x.duration}"
   ></${buttonTag}>`;
 }
+function renderBackwardSkipButtons(context) {
+  const buttonTag = context.tagFor(Button);
+  return html`
+		<${buttonTag} class="skip backward" @click="${(x) => x._onSkipButtonClick(false)}"
+		icon="${(x) => x.skipBy == MediaSkipBy.Five ? "5-sec-backward-line" : x.skipBy == MediaSkipBy.Thirty ? "30-sec-backward-line" : "10-sec-backward-line"}"
+		size='condensed'
+		aria-label="${(x) => x.skipBackwardButtonAriaLabel || x.locale.audioPlayer.skipBackwardButton}"
+		connotation="${(x) => x.connotation}"
+		?disabled="${(x) => x.disabled || !x.duration}"
+		></${buttonTag}>
+	`;
+}
+function renderForwardSkipButtons(context) {
+  const buttonTag = context.tagFor(Button);
+  return html`
+		<${buttonTag} class="skip forward" @click="${(x) => x._onSkipButtonClick(true)}"
+		icon="${(x) => x.skipBy == MediaSkipBy.Five ? "5-sec-forward-line" : x.skipBy == MediaSkipBy.Thirty ? "30-sec-forward-line" : "10-sec-forward-line"}"
+		size='condensed'
+		aria-label="${(x) => x.skipForwardButtonAriaLabel || x.locale.audioPlayer.skipForwardButton}"
+		connotation="${(x) => x.connotation}"
+		?disabled="${(x) => x.disabled || !x.duration}"
+		></${buttonTag}>
+	`;
+}
 function renderSlider(context) {
   const sliderTag = context.tagFor(Slider);
   return html`<${sliderTag}
-	${ref("_sliderEl")} class="slider" 
+	${ref("_sliderEl")} class="slider"
 	aria-label="${(x) => x.sliderAriaLabel || x.locale.audioPlayer.sliderLabel}"
-	value="0" max="100" 
+	value="0" max="100"
 	connotation="${(x) => x.connotation}"
 	?disabled="${(x) => x.disabled || !x.duration}">
 	</${sliderTag}>`;
@@ -168,10 +236,23 @@ function renderTimestamp() {
 	</div>`;
 }
 const AudioPlayerTemplate = (context) => {
-  return html` <div class="base ${getClasses}">
+  return html` <div
+		class="base ${getClasses}"
+		@keyup="${(x, c) => x._handleSliderEvent(c.event)}"
+		@keydown="${(x, c) => x._handleSliderEvent(c.event)}"
+		@mousedown="${(x, c) => x._handleSliderEvent(c.event)}"
+	>
 		<div class="controls">
-			${renderButton(context)} ${when((x) => !x.notime, renderTimestamp())}
-			${renderSlider(context)}
+			${when(
+    (x) => x.skipBy && x.skipBy != MediaSkipBy.Zero,
+    renderBackwardSkipButtons(context)
+  )}
+			${renderButton(context)}
+			${when(
+    (x) => x.skipBy && x.skipBy != MediaSkipBy.Zero,
+    renderForwardSkipButtons(context)
+  )}
+			${when((x) => !x.notime, renderTimestamp())} ${renderSlider(context)}
 		</div>
 		<audio
 			${ref("_playerEl")}

package/shared/definition55.cjs

@@ -113,7 +113,7 @@ var __privateMethod = (obj, member, method) => {
   __accessCheck(obj, member, "access private method");
   return method;
 };
-var _handleLabelChange, handleLabelChange_fn, _reflectToInput;
+var _handleLabelChange, handleLabelChange_fn, _reflectToInput, _helperTextMirrorEl, _helperTextSlotMutationObserver, _updateHelperTextMutationObserver, updateHelperTextMutationObserver_fn, _updateMirroredHelperText, updateMirroredHelperText_fn;
 const safariWorkaroundClassName = "_vvd-3-text-field-safari-workaround";
 const getSafariWorkaroundStyleSheet = icon.memoizeWith(
   () => "",
@@ -148,11 +148,15 @@ exports.TextField = class TextField extends textField.TextField {
   constructor() {
     super(...arguments);
     __privateAdd(this, _handleLabelChange);
+    __privateAdd(this, _updateHelperTextMutationObserver);
+    __privateAdd(this, _updateMirroredHelperText);
     /**
      * @internal
      */
     this._labelEl = null;
     __privateAdd(this, _reflectToInput, void 0);
+    __privateAdd(this, _helperTextMirrorEl, void 0);
+    __privateAdd(this, _helperTextSlotMutationObserver, void 0);
   }
   /**
    * @internal
@@ -167,42 +171,12 @@ exports.TextField = class TextField extends textField.TextField {
     if (!this.control) {
       const uniqueId = this.id || generateRandomId();
       const controlId = `vvd-text-field-control-${uniqueId}`;
+      const helperTextId = `vvd-text-field-helper-text-${uniqueId}`;
       const input = document.createElement("input");
       input.slot = "_control";
       input.id = controlId;
       input.className = safariWorkaroundClassName;
       this.control = input;
-      __privateSet(this, _reflectToInput, new Reflector.Reflector(this, input));
-      __privateGet(this, _reflectToInput).booleanAttribute("autofocus", "autofocus");
-      __privateGet(this, _reflectToInput).booleanAttribute("disabled", "disabled");
-      __privateGet(this, _reflectToInput).booleanAttribute("readOnly", "readonly");
-      __privateGet(this, _reflectToInput).booleanAttribute("required", "required");
-      __privateGet(this, _reflectToInput).booleanAttribute("spellcheck", "spellcheck");
-      __privateGet(this, _reflectToInput).attribute("list", "list");
-      __privateGet(this, _reflectToInput).attribute("maxlength", "maxlength");
-      __privateGet(this, _reflectToInput).attribute("minlength", "minlength");
-      __privateGet(this, _reflectToInput).attribute("pattern", "pattern");
-      __privateGet(this, _reflectToInput).attribute("placeholder", "placeholder");
-      __privateGet(this, _reflectToInput).attribute("size", "size");
-      __privateGet(this, _reflectToInput).attribute("autoComplete", "autocomplete");
-      __privateGet(this, _reflectToInput).attribute("type", "type");
-      __privateGet(this, _reflectToInput).attribute("ariaAtomic", "aria-atomic");
-      __privateGet(this, _reflectToInput).attribute("ariaBusy", "aria-busy");
-      __privateGet(this, _reflectToInput).attribute("ariaCurrent", "aria-current");
-      __privateGet(this, _reflectToInput).attribute("ariaDetails", "aria-details");
-      __privateGet(this, _reflectToInput).attribute("ariaDisabled", "aria-disabled");
-      __privateGet(this, _reflectToInput).attribute("ariaHaspopup", "aria-haspopup");
-      __privateGet(this, _reflectToInput).attribute("ariaHidden", "aria-hidden");
-      __privateGet(this, _reflectToInput).attribute("ariaInvalid", "aria-invalid");
-      __privateGet(this, _reflectToInput).attribute("ariaKeyshortcuts", "aria-keyshortcuts");
-      __privateGet(this, _reflectToInput).attribute("ariaLabel", "aria-label");
-      __privateGet(this, _reflectToInput).attribute("ariaLive", "aria-live");
-      __privateGet(this, _reflectToInput).attribute("ariaRelevant", "aria-relevant");
-      __privateGet(this, _reflectToInput).attribute(
-        "ariaRoledescription",
-        "aria-roledescription"
-      );
-      __privateGet(this, _reflectToInput).property("value", "value", true);
       input.addEventListener("input", () => {
         this.handleTextInput();
       });
@@ -221,16 +195,68 @@ exports.TextField = class TextField extends textField.TextField {
       label.htmlFor = controlId;
       this._labelEl = label;
       __privateMethod(this, _handleLabelChange, handleLabelChange_fn).call(this, label);
+      __privateSet(this, _helperTextMirrorEl, document.createElement("div"));
+      __privateGet(this, _helperTextMirrorEl).id = helperTextId;
+      __privateGet(this, _helperTextMirrorEl).slot = "_mirrored-helper-text";
+      __privateMethod(this, _updateMirroredHelperText, updateMirroredHelperText_fn).call(this);
+      this.appendChild(__privateGet(this, _helperTextMirrorEl));
       installSafariWorkaroundStyle(this);
     }
+    __privateSet(this, _reflectToInput, new Reflector.Reflector(this, this.control));
+    __privateGet(this, _reflectToInput).booleanAttribute("autofocus", "autofocus");
+    __privateGet(this, _reflectToInput).booleanAttribute("disabled", "disabled");
+    __privateGet(this, _reflectToInput).booleanAttribute("readOnly", "readonly");
+    __privateGet(this, _reflectToInput).booleanAttribute("required", "required");
+    __privateGet(this, _reflectToInput).booleanAttribute("spellcheck", "spellcheck");
+    __privateGet(this, _reflectToInput).attribute("list", "list");
+    __privateGet(this, _reflectToInput).attribute("maxlength", "maxlength");
+    __privateGet(this, _reflectToInput).attribute("minlength", "minlength");
+    __privateGet(this, _reflectToInput).attribute("pattern", "pattern");
+    __privateGet(this, _reflectToInput).attribute("placeholder", "placeholder");
+    __privateGet(this, _reflectToInput).attribute("size", "size");
+    __privateGet(this, _reflectToInput).attribute("autoComplete", "autocomplete");
+    __privateGet(this, _reflectToInput).attribute("type", "type");
+    __privateGet(this, _reflectToInput).attribute("ariaAtomic", "aria-atomic");
+    __privateGet(this, _reflectToInput).attribute("ariaBusy", "aria-busy");
+    __privateGet(this, _reflectToInput).attribute("ariaCurrent", "aria-current");
+    __privateGet(this, _reflectToInput).attribute("ariaDetails", "aria-details");
+    __privateGet(this, _reflectToInput).attribute("ariaDisabled", "aria-disabled");
+    __privateGet(this, _reflectToInput).attribute("ariaHaspopup", "aria-haspopup");
+    __privateGet(this, _reflectToInput).attribute("ariaHidden", "aria-hidden");
+    __privateGet(this, _reflectToInput).attribute("ariaInvalid", "aria-invalid");
+    __privateGet(this, _reflectToInput).attribute("ariaKeyshortcuts", "aria-keyshortcuts");
+    __privateGet(this, _reflectToInput).attribute("ariaLabel", "aria-label");
+    __privateGet(this, _reflectToInput).attribute("ariaLive", "aria-live");
+    __privateGet(this, _reflectToInput).attribute("ariaRelevant", "aria-relevant");
+    __privateGet(this, _reflectToInput).attribute(
+      "ariaRoledescription",
+      "aria-roledescription"
+    );
+    __privateGet(this, _reflectToInput).property("value", "value", true);
+    __privateMethod(this, _updateHelperTextMutationObserver, updateHelperTextMutationObserver_fn).call(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     __privateGet(this, _reflectToInput).destroy();
+    __privateSet(this, _reflectToInput, void 0);
+    __privateMethod(this, _updateHelperTextMutationObserver, updateHelperTextMutationObserver_fn).call(this);
   }
   focus() {
     this.control?.focus();
   }
+  /**
+   * @internal
+   */
+  helperTextChanged() {
+    __privateMethod(this, _updateMirroredHelperText, updateMirroredHelperText_fn).call(this);
+  }
+  /**
+   * @internal
+   */
+  _helperTextSlottedContentChanged() {
+    __privateMethod(this, _updateMirroredHelperText, updateMirroredHelperText_fn).call(this);
+    __privateMethod(this, _updateHelperTextMutationObserver, updateHelperTextMutationObserver_fn).call(this);
+  }
 };
 _handleLabelChange = new WeakSet();
 handleLabelChange_fn = function(labelEl) {
@@ -244,6 +270,47 @@ handleLabelChange_fn = function(labelEl) {
   }
 };
 _reflectToInput = new WeakMap();
+_helperTextMirrorEl = new WeakMap();
+_helperTextSlotMutationObserver = new WeakMap();
+_updateHelperTextMutationObserver = new WeakSet();
+updateHelperTextMutationObserver_fn = function() {
+  const usesHelperTextSlot = this._helperTextSlottedContent.length;
+  const shouldHaveMutationObserver = usesHelperTextSlot && this.isConnected;
+  if (shouldHaveMutationObserver && !__privateGet(this, _helperTextSlotMutationObserver)) {
+    __privateSet(this, _helperTextSlotMutationObserver, new MutationObserver((records) => {
+      if (records.some((record) => record.target !== __privateGet(this, _helperTextMirrorEl))) {
+        __privateMethod(this, _updateMirroredHelperText, updateMirroredHelperText_fn).call(this);
+      }
+    }));
+    __privateGet(this, _helperTextSlotMutationObserver).observe(this, {
+      subtree: true,
+      childList: true,
+      characterData: true
+    });
+  }
+  if (!shouldHaveMutationObserver && __privateGet(this, _helperTextSlotMutationObserver)) {
+    __privateGet(this, _helperTextSlotMutationObserver).disconnect();
+    __privateSet(this, _helperTextSlotMutationObserver, void 0);
+  }
+};
+_updateMirroredHelperText = new WeakSet();
+updateMirroredHelperText_fn = function() {
+  let helperText = this.helperText ?? "";
+  if (this._helperTextSlottedContent?.length) {
+    helperText = this._helperTextSlottedContent.map((node) => node.innerText).join(" ");
+  }
+  if (__privateGet(this, _helperTextMirrorEl)) {
+    __privateGet(this, _helperTextMirrorEl).textContent = helperText;
+    if (helperText) {
+      this.control.setAttribute(
+        "aria-describedby",
+        __privateGet(this, _helperTextMirrorEl).id
+      );
+    } else {
+      this.control.removeAttribute("aria-describedby");
+    }
+  }
+};
 __decorateClass([
   index.attr
 ], exports.TextField.prototype, "appearance", 2);
@@ -309,29 +376,30 @@ function renderCharCount() {
 const TextfieldTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
   return index.html` <div class="base ${getStateClasses}">
-		${when.when((x) => x.charCount && x.maxlength, renderCharCount())}
-		<slot class="label" name="_label"></slot>
-		<div class="fieldset">
-			<div class="leading-items-wrapper">
-				<slot
-					name="leading-action-items"
-					${slotted.slotted("leadingActionItemsSlottedContent")}
-				></slot>
-				${(x) => affixIconTemplate(x.icon)}
-			</div>
+			${when.when((x) => x.charCount && x.maxlength, renderCharCount())}
+			<slot class="label" name="_label"></slot>
+			<div class="fieldset">
+				<div class="leading-items-wrapper">
+					<slot
+						name="leading-action-items"
+						${slotted.slotted("leadingActionItemsSlottedContent")}
+					></slot>
+					${(x) => affixIconTemplate(x.icon)}
+				</div>
 
-			<div class="wrapper">
-				<slot class="control" name="_control"></slot>
-			</div>
-			<div class="action-items-wrapper">
-				<slot
-					name="action-items"
-					${slotted.slotted("actionItemsSlottedContent")}
-				></slot>
+				<div class="wrapper">
+					<slot class="control" name="_control"></slot>
+				</div>
+				<div class="action-items-wrapper">
+					<slot
+						name="action-items"
+						${slotted.slotted("actionItemsSlottedContent")}
+					></slot>
+				</div>
 			</div>
+			${index$1.getFeedbackTemplate(context)}
 		</div>
-		${index$1.getFeedbackTemplate(context)}
-	</div>`;
+		<slot name="_mirrored-helper-text"></slot>`;
 };
 
 const textFieldDefinition = exports.TextField.compose({

package/shared/definition55.js

@@ -111,7 +111,7 @@ var __privateMethod = (obj, member, method) => {
   __accessCheck(obj, member, "access private method");
   return method;
 };
-var _handleLabelChange, handleLabelChange_fn, _reflectToInput;
+var _handleLabelChange, handleLabelChange_fn, _reflectToInput, _helperTextMirrorEl, _helperTextSlotMutationObserver, _updateHelperTextMutationObserver, updateHelperTextMutationObserver_fn, _updateMirroredHelperText, updateMirroredHelperText_fn;
 const safariWorkaroundClassName = "_vvd-3-text-field-safari-workaround";
 const getSafariWorkaroundStyleSheet = memoizeWith(
   () => "",
@@ -146,11 +146,15 @@ let TextField = class extends TextField$1 {
   constructor() {
     super(...arguments);
     __privateAdd(this, _handleLabelChange);
+    __privateAdd(this, _updateHelperTextMutationObserver);
+    __privateAdd(this, _updateMirroredHelperText);
     /**
      * @internal
      */
     this._labelEl = null;
     __privateAdd(this, _reflectToInput, void 0);
+    __privateAdd(this, _helperTextMirrorEl, void 0);
+    __privateAdd(this, _helperTextSlotMutationObserver, void 0);
   }
   /**
    * @internal
@@ -165,42 +169,12 @@ let TextField = class extends TextField$1 {
     if (!this.control) {
       const uniqueId = this.id || generateRandomId();
       const controlId = `vvd-text-field-control-${uniqueId}`;
+      const helperTextId = `vvd-text-field-helper-text-${uniqueId}`;
       const input = document.createElement("input");
       input.slot = "_control";
       input.id = controlId;
       input.className = safariWorkaroundClassName;
       this.control = input;
-      __privateSet(this, _reflectToInput, new Reflector(this, input));
-      __privateGet(this, _reflectToInput).booleanAttribute("autofocus", "autofocus");
-      __privateGet(this, _reflectToInput).booleanAttribute("disabled", "disabled");
-      __privateGet(this, _reflectToInput).booleanAttribute("readOnly", "readonly");
-      __privateGet(this, _reflectToInput).booleanAttribute("required", "required");
-      __privateGet(this, _reflectToInput).booleanAttribute("spellcheck", "spellcheck");
-      __privateGet(this, _reflectToInput).attribute("list", "list");
-      __privateGet(this, _reflectToInput).attribute("maxlength", "maxlength");
-      __privateGet(this, _reflectToInput).attribute("minlength", "minlength");
-      __privateGet(this, _reflectToInput).attribute("pattern", "pattern");
-      __privateGet(this, _reflectToInput).attribute("placeholder", "placeholder");
-      __privateGet(this, _reflectToInput).attribute("size", "size");
-      __privateGet(this, _reflectToInput).attribute("autoComplete", "autocomplete");
-      __privateGet(this, _reflectToInput).attribute("type", "type");
-      __privateGet(this, _reflectToInput).attribute("ariaAtomic", "aria-atomic");
-      __privateGet(this, _reflectToInput).attribute("ariaBusy", "aria-busy");
-      __privateGet(this, _reflectToInput).attribute("ariaCurrent", "aria-current");
-      __privateGet(this, _reflectToInput).attribute("ariaDetails", "aria-details");
-      __privateGet(this, _reflectToInput).attribute("ariaDisabled", "aria-disabled");
-      __privateGet(this, _reflectToInput).attribute("ariaHaspopup", "aria-haspopup");
-      __privateGet(this, _reflectToInput).attribute("ariaHidden", "aria-hidden");
-      __privateGet(this, _reflectToInput).attribute("ariaInvalid", "aria-invalid");
-      __privateGet(this, _reflectToInput).attribute("ariaKeyshortcuts", "aria-keyshortcuts");
-      __privateGet(this, _reflectToInput).attribute("ariaLabel", "aria-label");
-      __privateGet(this, _reflectToInput).attribute("ariaLive", "aria-live");
-      __privateGet(this, _reflectToInput).attribute("ariaRelevant", "aria-relevant");
-      __privateGet(this, _reflectToInput).attribute(
-        "ariaRoledescription",
-        "aria-roledescription"
-      );
-      __privateGet(this, _reflectToInput).property("value", "value", true);
       input.addEventListener("input", () => {
         this.handleTextInput();
       });
@@ -219,16 +193,68 @@ let TextField = class extends TextField$1 {
       label.htmlFor = controlId;
       this._labelEl = label;
       __privateMethod(this, _handleLabelChange, handleLabelChange_fn).call(this, label);
+      __privateSet(this, _helperTextMirrorEl, document.createElement("div"));
+      __privateGet(this, _helperTextMirrorEl).id = helperTextId;
+      __privateGet(this, _helperTextMirrorEl).slot = "_mirrored-helper-text";
+      __privateMethod(this, _updateMirroredHelperText, updateMirroredHelperText_fn).call(this);
+      this.appendChild(__privateGet(this, _helperTextMirrorEl));
       installSafariWorkaroundStyle(this);
     }
+    __privateSet(this, _reflectToInput, new Reflector(this, this.control));
+    __privateGet(this, _reflectToInput).booleanAttribute("autofocus", "autofocus");
+    __privateGet(this, _reflectToInput).booleanAttribute("disabled", "disabled");
+    __privateGet(this, _reflectToInput).booleanAttribute("readOnly", "readonly");
+    __privateGet(this, _reflectToInput).booleanAttribute("required", "required");
+    __privateGet(this, _reflectToInput).booleanAttribute("spellcheck", "spellcheck");
+    __privateGet(this, _reflectToInput).attribute("list", "list");
+    __privateGet(this, _reflectToInput).attribute("maxlength", "maxlength");
+    __privateGet(this, _reflectToInput).attribute("minlength", "minlength");
+    __privateGet(this, _reflectToInput).attribute("pattern", "pattern");
+    __privateGet(this, _reflectToInput).attribute("placeholder", "placeholder");
+    __privateGet(this, _reflectToInput).attribute("size", "size");
+    __privateGet(this, _reflectToInput).attribute("autoComplete", "autocomplete");
+    __privateGet(this, _reflectToInput).attribute("type", "type");
+    __privateGet(this, _reflectToInput).attribute("ariaAtomic", "aria-atomic");
+    __privateGet(this, _reflectToInput).attribute("ariaBusy", "aria-busy");
+    __privateGet(this, _reflectToInput).attribute("ariaCurrent", "aria-current");
+    __privateGet(this, _reflectToInput).attribute("ariaDetails", "aria-details");
+    __privateGet(this, _reflectToInput).attribute("ariaDisabled", "aria-disabled");
+    __privateGet(this, _reflectToInput).attribute("ariaHaspopup", "aria-haspopup");
+    __privateGet(this, _reflectToInput).attribute("ariaHidden", "aria-hidden");
+    __privateGet(this, _reflectToInput).attribute("ariaInvalid", "aria-invalid");
+    __privateGet(this, _reflectToInput).attribute("ariaKeyshortcuts", "aria-keyshortcuts");
+    __privateGet(this, _reflectToInput).attribute("ariaLabel", "aria-label");
+    __privateGet(this, _reflectToInput).attribute("ariaLive", "aria-live");
+    __privateGet(this, _reflectToInput).attribute("ariaRelevant", "aria-relevant");
+    __privateGet(this, _reflectToInput).attribute(
+      "ariaRoledescription",
+      "aria-roledescription"
+    );
+    __privateGet(this, _reflectToInput).property("value", "value", true);
+    __privateMethod(this, _updateHelperTextMutationObserver, updateHelperTextMutationObserver_fn).call(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     __privateGet(this, _reflectToInput).destroy();
+    __privateSet(this, _reflectToInput, void 0);
+    __privateMethod(this, _updateHelperTextMutationObserver, updateHelperTextMutationObserver_fn).call(this);
   }
   focus() {
     this.control?.focus();
   }
+  /**
+   * @internal
+   */
+  helperTextChanged() {
+    __privateMethod(this, _updateMirroredHelperText, updateMirroredHelperText_fn).call(this);
+  }
+  /**
+   * @internal
+   */
+  _helperTextSlottedContentChanged() {
+    __privateMethod(this, _updateMirroredHelperText, updateMirroredHelperText_fn).call(this);
+    __privateMethod(this, _updateHelperTextMutationObserver, updateHelperTextMutationObserver_fn).call(this);
+  }
 };
 _handleLabelChange = new WeakSet();
 handleLabelChange_fn = function(labelEl) {
@@ -242,6 +268,47 @@ handleLabelChange_fn = function(labelEl) {
   }
 };
 _reflectToInput = new WeakMap();
+_helperTextMirrorEl = new WeakMap();
+_helperTextSlotMutationObserver = new WeakMap();
+_updateHelperTextMutationObserver = new WeakSet();
+updateHelperTextMutationObserver_fn = function() {
+  const usesHelperTextSlot = this._helperTextSlottedContent.length;
+  const shouldHaveMutationObserver = usesHelperTextSlot && this.isConnected;
+  if (shouldHaveMutationObserver && !__privateGet(this, _helperTextSlotMutationObserver)) {
+    __privateSet(this, _helperTextSlotMutationObserver, new MutationObserver((records) => {
+      if (records.some((record) => record.target !== __privateGet(this, _helperTextMirrorEl))) {
+        __privateMethod(this, _updateMirroredHelperText, updateMirroredHelperText_fn).call(this);
+      }
+    }));
+    __privateGet(this, _helperTextSlotMutationObserver).observe(this, {
+      subtree: true,
+      childList: true,
+      characterData: true
+    });
+  }
+  if (!shouldHaveMutationObserver && __privateGet(this, _helperTextSlotMutationObserver)) {
+    __privateGet(this, _helperTextSlotMutationObserver).disconnect();
+    __privateSet(this, _helperTextSlotMutationObserver, void 0);
+  }
+};
+_updateMirroredHelperText = new WeakSet();
+updateMirroredHelperText_fn = function() {
+  let helperText = this.helperText ?? "";
+  if (this._helperTextSlottedContent?.length) {
+    helperText = this._helperTextSlottedContent.map((node) => node.innerText).join(" ");
+  }
+  if (__privateGet(this, _helperTextMirrorEl)) {
+    __privateGet(this, _helperTextMirrorEl).textContent = helperText;
+    if (helperText) {
+      this.control.setAttribute(
+        "aria-describedby",
+        __privateGet(this, _helperTextMirrorEl).id
+      );
+    } else {
+      this.control.removeAttribute("aria-describedby");
+    }
+  }
+};
 __decorateClass([
   attr
 ], TextField.prototype, "appearance", 2);
@@ -307,29 +374,30 @@ function renderCharCount() {
 const TextfieldTemplate = (context) => {
   const affixIconTemplate = affixIconTemplateFactory(context);
   return html` <div class="base ${getStateClasses}">
-		${when((x) => x.charCount && x.maxlength, renderCharCount())}
-		<slot class="label" name="_label"></slot>
-		<div class="fieldset">
-			<div class="leading-items-wrapper">
-				<slot
-					name="leading-action-items"
-					${slotted("leadingActionItemsSlottedContent")}
-				></slot>
-				${(x) => affixIconTemplate(x.icon)}
-			</div>
+			${when((x) => x.charCount && x.maxlength, renderCharCount())}
+			<slot class="label" name="_label"></slot>
+			<div class="fieldset">
+				<div class="leading-items-wrapper">
+					<slot
+						name="leading-action-items"
+						${slotted("leadingActionItemsSlottedContent")}
+					></slot>
+					${(x) => affixIconTemplate(x.icon)}
+				</div>
 
-			<div class="wrapper">
-				<slot class="control" name="_control"></slot>
-			</div>
-			<div class="action-items-wrapper">
-				<slot
-					name="action-items"
-					${slotted("actionItemsSlottedContent")}
-				></slot>
+				<div class="wrapper">
+					<slot class="control" name="_control"></slot>
+				</div>
+				<div class="action-items-wrapper">
+					<slot
+						name="action-items"
+						${slotted("actionItemsSlottedContent")}
+					></slot>
+				</div>
 			</div>
+			${getFeedbackTemplate(context)}
 		</div>
-		${getFeedbackTemplate(context)}
-	</div>`;
+		<slot name="_mirrored-helper-text"></slot>`;
 };
 
 const textFieldDefinition = TextField.compose({