@fluentui/web-components 3.0.0-beta.20 → 3.0.0-beta.21

package/dist/web-components.js

@@ -10866,35 +10866,13 @@ const TextInputAppearance = {
   filledDarker: "filled-darker"
 };
 const TextInputType = {
-  /**
-   * An email TextInput
-   */
   email: "email",
-  /**
-   * A password TextInput
-   */
   password: "password",
-  /**
-   * A telephone TextInput
-   */
   tel: "tel",
-  /**
-   * A text TextInput
-   */
   text: "text",
-  /**
-   * A URL TextInput
-   */
   url: "url"
 };
-
-class _TextField extends FASTElement {}
-class FormAssociatedTextField extends FormAssociated(_TextField) {
-  constructor() {
-    super(...arguments);
-    this.proxy = document.createElement("input");
-  }
-}
+const ImplicitSubmissionBlockingTypes = ["date", "datetime-local", "email", "month", "number", "password", "search", "tel", "text", "time", "url", "week"];
 
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
@@ -10904,127 +10882,276 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
   if (kind && result) __defProp$1(target, key, result);
   return result;
 };
-class TextInput extends FormAssociatedTextField {
+class TextInput extends FASTElement {
   constructor() {
     super(...arguments);
     this.type = TextInputType.text;
+    /**
+     * The current value of the input.
+     *
+     * @internal
+     */
+    this._value = this.initialValue;
+    /**
+     * Indicates that the value has been changed by the user.
+     *
+     * @internal
+     */
+    this.dirtyValue = false;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    this.elementInternals = this.attachInternals();
   }
-  readOnlyChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.readOnly = this.readOnly;
-      this.validate();
+  /**
+   * Updates the control label visibility based on the presence of default slotted content.
+   *
+   * @internal
+   */
+  defaultSlottedNodesChanged(prev, next) {
+    if (this.$fastController.isConnected) {
+      this.controlLabel.hidden = !next?.length;
     }
   }
-  autofocusChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.autofocus = this.autofocus;
-      this.validate();
+  /**
+   * Sets the value of the element to the initial value.
+   *
+   * @internal
+   */
+  initialValueChanged() {
+    if (!this.dirtyValue) {
+      this.value = this.initialValue;
     }
   }
-  placeholderChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.placeholder = this.placeholder;
+  /**
+   * Syncs the `ElementInternals.ariaReadOnly` property when the `readonly` property changes.
+   *
+   * @internal
+   */
+  readonlyChanged() {
+    if (this.$fastController.isConnected) {
+      this.elementInternals.ariaReadOnly = `${!!this.readonly}`;
     }
   }
-  typeChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.type = this.type;
-      this.validate();
+  /**
+   * Syncs the element's internal `aria-required` state with the `required` attribute.
+   *
+   * @param previous - the previous required state
+   * @param next - the current required state
+   *
+   * @internal
+   */
+  requiredChanged(previous, next) {
+    if (this.$fastController.isConnected) {
+      this.elementInternals.ariaRequired = `${!!next}`;
     }
   }
-  listChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.setAttribute("list", this.list);
-      this.validate();
-    }
+  /**
+   * The element's validity state.
+   *
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
+   */
+  get validity() {
+    return this.elementInternals.validity;
   }
-  maxlengthChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.maxLength = this.maxlength;
-      this.validate();
-    }
+  /**
+   * The validation message.
+   *
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
+   */
+  get validationMessage() {
+    return this.elementInternals.validationMessage;
   }
-  minlengthChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.minLength = this.minlength;
-      this.validate();
-    }
+  /**
+   * The current value of the input.
+   * @public
+   */
+  get value() {
+    Observable.track(this, "value");
+    return this._value;
   }
-  patternChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.pattern = this.pattern;
-      this.validate();
+  set value(value) {
+    this._value = value;
+    if (this.$fastController.isConnected) {
+      this.control.value = value;
+      this.setFormValue(value);
+      this.setValidity();
+      Observable.notify(this, "value");
     }
   }
-  sizeChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.size = this.size;
-    }
+  /**
+   * Determines if the control can be submitted for constraint validation.
+   *
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/willValidate | `ElementInternals.willValidate`} property.
+   */
+  get willValidate() {
+    return this.elementInternals.willValidate;
   }
-  spellcheckChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.spellcheck = this.spellcheck;
-    }
+  /**
+   * The associated form element.
+   *
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/form | `ElementInternals.form`} property.
+   */
+  get form() {
+    return this.elementInternals.form;
   }
   /**
+   * Change event handler for inner control.
+   *
    * @internal
-   */
+   * @privateRemarks
+   * "Change" events are not `composable` so they will not permeate the shadow DOM boundary. This function effectively
+   * proxies the change event, emitting a `change` event whenever the internal control emits a `change` event.
+   */
+  changeHandler(e) {
+    e.preventDefault();
+    this.setValidity();
+    this.$emit("change", e, {
+      bubbles: true,
+      cancelable: false,
+      composed: false
+    });
+  }
   connectedCallback() {
     super.connectedCallback();
-    this.proxy.setAttribute("type", this.type);
-    this.validate();
-    if (this.autofocus) {
-      Updates.enqueue(() => {
-        this.focus();
-      });
+    this.addEventListener("keypress", this.keypressHandler);
+    this.setFormValue(this.value);
+    this.setValidity();
+  }
+  disconnectedCallback() {
+    this.removeEventListener("keypress", this.keypressHandler);
+    super.disconnectedCallback();
+  }
+  /**
+   * Resets the value to its initial value when the form is reset.
+   *
+   * @internal
+   */
+  formResetCallback() {
+    this.value = this.initialValue;
+    this.dirtyValue = false;
+  }
+  /**
+   * Handles implicit form submission when the user presses the "Enter" key.
+   *
+   * @internal
+   */
+  implicitSubmit() {
+    if (!this.elementInternals.form) {
+      return;
     }
+    if (this.elementInternals.form.elements.length === 1) {
+      this.elementInternals.form.requestSubmit();
+      return;
+    }
+    const formElements = [...this.elementInternals.form.elements];
+    const submitButton = formElements.find(x => x.getAttribute("type") === "submit");
+    if (submitButton) {
+      submitButton.click();
+      return;
+    }
+    const filteredElements = formElements.filter(x => ImplicitSubmissionBlockingTypes.includes(x.getAttribute("type") ?? ""));
+    if (filteredElements.length > 1) {
+      return;
+    }
+    this.elementInternals.form.requestSubmit();
   }
   /**
-   * Selects all the text in the text field
+   * Handles the internal control's `input` event.
+   *
+   * @internal
+   */
+  inputHandler(e) {
+    this.dirtyValue = true;
+    this.value = this.control.value;
+    return true;
+  }
+  /**
+   * Handles the internal control's `keypress` event.
+   *
+   * @internal
+   */
+  keypressHandler(e) {
+    if (e.key === keyEnter) {
+      this.implicitSubmit();
+    }
+    return true;
+  }
+  /**
+   * Selects all the text in the text field.
    *
    * @public
+   * @privateRemarks
+   * The `select` event does not permeate the shadow DOM boundary. This function effectively proxies the event,
+   * emitting a `select` event whenever the internal control emits a `select` event
+   *
    */
   select() {
     this.control.select();
     this.$emit("select");
   }
   /**
-   * Handles the internal control's `input` event
+   * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+   *
    * @internal
    */
-  handleTextInput() {
-    this.value = this.control.value;
+  setFormValue(value, state) {
+    this.elementInternals.setFormValue(value, value ?? state);
   }
   /**
-   * 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
+   * Sets the validity of the control.
+   *
+   * @param flags - Validity flags. If not provided, the control's `validity` will be used.
+   * @param message - Optional message to supply. If not provided, the control's `validationMessage` will be used. If the control does not have a `validationMessage`, the message will be empty.
+   * @param anchor - Optional anchor to use for the validation message. If not provided, the control will be used.
+   *
    * @internal
    */
-  handleChange() {
-    this.$emit("change");
-  }
-  /** {@inheritDoc (FormAssociated:interface).validate} */
-  validate() {
-    super.validate(this.control);
+  setValidity(flags = this.control.validity, message = this.control.validationMessage, anchor = this.control) {
+    if (this.disabled) {
+      this.elementInternals.setValidity({});
+      return;
+    }
+    this.elementInternals.setValidity(flags, message ?? "", anchor);
   }
 }
+/**
+ * The form-associated flag.
+ * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+ *
+ * @public
+ */
+TextInput.formAssociated = true;
+__decorateClass$1([attr], TextInput.prototype, "appearance", 2);
+__decorateClass$1([attr], TextInput.prototype, "autocomplete", 2);
+__decorateClass$1([attr({
+  mode: "boolean"
+})], TextInput.prototype, "autofocus", 2);
 __decorateClass$1([attr({
   attribute: "control-size"
 })], TextInput.prototype, "controlSize", 2);
-__decorateClass$1([attr], TextInput.prototype, "appearance", 2);
+__decorateClass$1([observable], TextInput.prototype, "defaultSlottedNodes", 2);
+__decorateClass$1([attr], TextInput.prototype, "dirname", 2);
 __decorateClass$1([attr({
-  attribute: "readonly",
   mode: "boolean"
-})], TextInput.prototype, "readOnly", 2);
+})], TextInput.prototype, "disabled", 2);
 __decorateClass$1([attr({
-  mode: "boolean"
-})], TextInput.prototype, "autofocus", 2);
-__decorateClass$1([attr], TextInput.prototype, "placeholder", 2);
-__decorateClass$1([attr], TextInput.prototype, "type", 2);
+  attribute: "form"
+})], TextInput.prototype, "formAttribute", 2);
+__decorateClass$1([attr({
+  attribute: "value",
+  mode: "fromView"
+})], TextInput.prototype, "initialValue", 2);
 __decorateClass$1([attr], TextInput.prototype, "list", 2);
 __decorateClass$1([attr({
   converter: nullableNumberConverter
@@ -11032,30 +11159,44 @@ __decorateClass$1([attr({
 __decorateClass$1([attr({
   converter: nullableNumberConverter
 })], TextInput.prototype, "minlength", 2);
+__decorateClass$1([attr({
+  mode: "boolean"
+})], TextInput.prototype, "multiple", 2);
+__decorateClass$1([attr], TextInput.prototype, "name", 2);
 __decorateClass$1([attr], TextInput.prototype, "pattern", 2);
+__decorateClass$1([attr], TextInput.prototype, "placeholder", 2);
+__decorateClass$1([attr({
+  attribute: "readonly",
+  mode: "boolean"
+})], TextInput.prototype, "readonly", 2);
+__decorateClass$1([attr({
+  mode: "boolean"
+})], TextInput.prototype, "required", 2);
 __decorateClass$1([attr({
   converter: nullableNumberConverter
 })], TextInput.prototype, "size", 2);
 __decorateClass$1([attr({
-  mode: "boolean"
+  converter: {
+    fromView: value => typeof value === "string" ? ["true", ""].includes(value.trim().toLowerCase()) : null,
+    toView: value => value.toString()
+  }
 })], TextInput.prototype, "spellcheck", 2);
-__decorateClass$1([observable], TextInput.prototype, "defaultSlottedNodes", 2);
-class DelegatesARIATextbox {}
-applyMixins(DelegatesARIATextbox, ARIAGlobalStatesAndProperties);
-applyMixins(TextInput, StartEnd, DelegatesARIATextbox);
-
-function textFieldTemplate(options = {}) {
-  return html`<label part="label" for="control" class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length ? "label" : "label label__hidden"}"><slot ${slotted({
-    property: "defaultSlottedNodes",
-    filter: whitespaceFilter
-  })}></slot></label><div class="root" part="root">${startSlotTemplate(options)}<input class="control" part="control" id="control" @input="${x => x.handleTextInput()}" @change="${x => x.handleChange()}" ?autofocus="${x => x.autofocus}" ?disabled="${x => x.disabled}" list="${x => x.list}" maxlength="${x => x.maxlength}" name="${x => x.name}" minlength="${x => x.minlength}" pattern="${x => x.pattern}" placeholder="${x => x.placeholder}" ?readonly="${x => x.readOnly}" ?required="${x => x.required}" size="${x => x.size}" ?spellcheck="${x => x.spellcheck}" :value="${x => x.value}" type="${x => x.type}" aria-atomic="${x => x.ariaAtomic}" aria-busy="${x => x.ariaBusy}" aria-controls="${x => x.ariaControls}" aria-current="${x => x.ariaCurrent}" aria-describedby="${x => x.ariaDescribedby}" aria-details="${x => x.ariaDetails}" aria-disabled="${x => x.ariaDisabled}" aria-errormessage="${x => x.ariaErrormessage}" aria-flowto="${x => x.ariaFlowto}" aria-haspopup="${x => x.ariaHaspopup}" aria-hidden="${x => x.ariaHidden}" aria-invalid="${x => x.ariaInvalid}" aria-keyshortcuts="${x => x.ariaKeyshortcuts}" aria-label="${x => x.ariaLabel}" aria-labelledby="${x => x.ariaLabelledby}" aria-live="${x => x.ariaLive}" aria-owns="${x => x.ariaOwns}" aria-relevant="${x => x.ariaRelevant}" aria-roledescription="${x => x.ariaRoledescription}" ${ref("control")} />${endSlotTemplate(options)}</div>`;
-}
-const template$1 = textFieldTemplate();
+__decorateClass$1([attr], TextInput.prototype, "type", 2);
+__decorateClass$1([observable], TextInput.prototype, "controlLabel", 2);
+applyMixins(TextInput, StartEnd);
 
 const styles$1 = css`
   ${display("block")}
 
-  :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};max-width:400px}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label__hidden{display:none}.root{position:relative;box-sizing:border-box;height:32px;display:inline-flex;align-items:center;flex-direction:row;width:100%;padding:0 ${spacingHorizontalMNudge};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};gap:${spacingHorizontalXXS}}.root::after{box-sizing:border-box;content:'';position:absolute;left:-1px;bottom:0px;right:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{width:100%;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};border:none;background:transparent;vertical-align:center}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot='start']),:host ::slotted([slot='end']){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3};font-size:${fontSizeBase500}}:host ::slotted([slot='start']){padding-right:${spacingHorizontalXXS}}:host ::slotted([slot='end']){padding-left:${spacingHorizontalXXS};gap:${spacingHorizontalXS}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root:after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host([appearance='outline']:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host(:focus-within) .control{color:${colorNeutralForeground1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot='start']),:host([disabled]) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}:host([control-size='small']) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host([control-size='small']) .root{height:24px;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalSNudge}}:host([control-size='small']) ::slotted([slot='start']),:host([control-size='small']) ::slotted([slot='end']){font-size:${fontSizeBase400}}:host([control-size='large']) .control{font-size:${fontSizeBase400};font-weight:${fontWeightRegular};line-height:${lineHeightBase400}}:host([control-size='large']) .root{height:40px;gap:${spacingHorizontalS};padding:0 ${spacingHorizontalM}}:host([control-size='large']) ::slotted([slot='start']),:host([control-size='large']) ::slotted([slot='end']){font-size:${fontSizeBase600}}:host([appearance='underline']) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host([appearance='underline']:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='underline']:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance='underline']:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance='underline'][disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host([appearance='filled-lighter']) .root,:host([appearance='filled-darker']) .root{border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:${shadow2}}:host([appearance='filled-lighter']) .root{background:${colorNeutralBackground1}}:host([appearance='filled-darker']) .root{background:${colorNeutralBackground3}}:host([appearance='filled-lighter']:hover) .root,:host([appearance='filled-darker']:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host([appearance='filled-lighter']:active) .root,:host([appearance='filled-darker']:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
+  :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};max-width:400px}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label[hidden],:host(:empty) .label{display:none}.root{position:relative;box-sizing:border-box;height:32px;display:inline-flex;align-items:center;flex-direction:row;width:100%;padding:0 ${spacingHorizontalMNudge};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};gap:${spacingHorizontalXXS}}.root::after{box-sizing:border-box;content:'';position:absolute;left:-1px;bottom:0px;right:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{width:100%;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};border:none;background:transparent;vertical-align:center}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot='start']),:host ::slotted([slot='end']){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3};font-size:${fontSizeBase500}}:host ::slotted([slot='start']){padding-right:${spacingHorizontalXXS}}:host ::slotted([slot='end']){padding-left:${spacingHorizontalXXS};gap:${spacingHorizontalXS}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root:after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host([appearance='outline']:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host(:focus-within) .control{color:${colorNeutralForeground1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot='start']),:host([disabled]) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}:host([control-size='small']) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host([control-size='small']) .root{height:24px;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalSNudge}}:host([control-size='small']) ::slotted([slot='start']),:host([control-size='small']) ::slotted([slot='end']){font-size:${fontSizeBase400}}:host([control-size='large']) .control{font-size:${fontSizeBase400};font-weight:${fontWeightRegular};line-height:${lineHeightBase400}}:host([control-size='large']) .root{height:40px;gap:${spacingHorizontalS};padding:0 ${spacingHorizontalM}}:host([control-size='large']) ::slotted([slot='start']),:host([control-size='large']) ::slotted([slot='end']){font-size:${fontSizeBase600}}:host([appearance='underline']) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host([appearance='underline']:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='underline']:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance='underline']:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance='underline'][disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host([appearance='filled-lighter']) .root,:host([appearance='filled-darker']) .root{border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:${shadow2}}:host([appearance='filled-lighter']) .root{background:${colorNeutralBackground1}}:host([appearance='filled-darker']) .root{background:${colorNeutralBackground3}}:host([appearance='filled-lighter']:hover) .root,:host([appearance='filled-darker']:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host([appearance='filled-lighter']:active) .root,:host([appearance='filled-darker']:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
+
+function textInputTemplate(options = {}) {
+  return html`<label part="label" for="control" class="label" ${ref("controlLabel")}><slot ${slotted({
+    property: "defaultSlottedNodes",
+    filter: whitespaceFilter
+  })}></slot></label><div class="root" part="root">${startSlotTemplate(options)}<input class="control" part="control" id="control" @change="${(x, c) => x.changeHandler(c.event)}" @input="${(x, c) => x.inputHandler(c.event)}" ?autofocus="${x => x.autofocus}" autocomplete="${x => x.autocomplete}" ?disabled="${x => x.disabled}" list="${x => x.list}" maxlength="${x => x.maxlength}" minlength="${x => x.minlength}" ?multiple="${x => x.multiple}" name="${x => x.name}" pattern="${x => x.pattern}" placeholder="${x => x.placeholder}" ?readonly="${x => x.readonly}" ?required="${x => x.required}" size="${x => x.size}" spellcheck="${x => x.spellcheck}" type="${x => x.type}" value="${x => x.initialValue}" ${ref("control")} />${endSlotTemplate(options)}</div>`;
+}
+const template$1 = textInputTemplate();
 
 const definition$1 = TextInput.compose({
   name: `${FluentDesignSystem.prefix}-text-input`,