@fluentui/web-components 3.0.0-beta.73 → 3.0.0-beta.75

package/dist/web-components.js

@@ -11751,12 +11751,6 @@ class BaseTextInput 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.
      *
@@ -11770,6 +11764,17 @@ class BaseTextInput extends FASTElement {
      */
     this.elementInternals = this.attachInternals();
   }
+  /**
+   * Tracks the current value of the input.
+   *
+   * @param prev - the previous value
+   * @param next - the next value
+   *
+   * @internal
+   */
+  currentValueChanged(prev, next) {
+    this.value = next;
+  }
   /**
    * Updates the control label visibility based on the presence of default slotted content.
    *
@@ -11839,12 +11844,12 @@ class BaseTextInput extends FASTElement {
    */
   get value() {
     Observable.track(this, "value");
-    return this._value;
+    return this.currentValue;
   }
   set value(value) {
-    this._value = value;
+    this.currentValue = value;
     if (this.$fastController.isConnected) {
-      this.control.value = value;
+      this.control.value = value ?? "";
       this.setFormValue(value);
       this.setValidity();
       Observable.notify(this, "value");
@@ -12064,6 +12069,9 @@ __decorateClass$3([attr], BaseTextInput.prototype, "autocomplete", 2);
 __decorateClass$3([attr({
   mode: "boolean"
 })], BaseTextInput.prototype, "autofocus", 2);
+__decorateClass$3([attr({
+  attribute: "current-value"
+})], BaseTextInput.prototype, "currentValue", 2);
 __decorateClass$3([observable], BaseTextInput.prototype, "defaultSlottedNodes", 2);
 __decorateClass$3([attr], BaseTextInput.prototype, "dirname", 2);
 __decorateClass$3([attr({
@@ -12561,7 +12569,7 @@ const TooltipPositioningOption = {
 const styles = css`
   ${display("inline-flex")}
 
-  :host(:not(:popover-open)){display:none}:host{--position-area:block-start;--position-try-options:flip-block;--block-offset:${spacingVerticalXS};--inline-offset:${spacingHorizontalXS};background:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:1px solid ${colorTransparentStroke};box-sizing:border-box;color:${colorNeutralForeground1};display:inline-flex;filter:drop-shadow(0 0 2px ${colorNeutralShadowAmbient}) drop-shadow(0 4px 8px ${colorNeutralShadowKey});font-family:${fontFamilyBase};font-size:${fontSizeBase200};inset:unset;line-height:${lineHeightBase200};margin:unset;max-width:240px;padding:4px ${spacingHorizontalMNudge} 6px;position:absolute;position-area:var(--position-area);position-try-options:var(--position-try-options);width:auto;z-index:1}@supports (inset-area:block-start){:host{inset-area:var(--position-area);position-try-fallbacks:var(--position-try-options)}}:host(:is([positioning^='above'],[positioning^='below'],:not([positioning]))){margin-block:var(--block-offset)}:host(:is([positioning^='before'],[positioning^='after'])){margin-inline:var(--inline-offset);--position-try-options:flip-inline}:host([positioning='above-start']){--position-area:${TooltipPositioningOption["above-start"]}}:host([positioning='above']){--position-area:${TooltipPositioningOption.above}}:host([positioning='above-end']){--position-area:${TooltipPositioningOption["above-end"]}}:host([positioning='below-start']){--position-area:${TooltipPositioningOption["below-start"]}}:host([positioning='below']){--position-area:${TooltipPositioningOption.below}}:host([positioning='below-end']){--position-area:${TooltipPositioningOption.below}}:host([positioning='before-top']){--position-area:${TooltipPositioningOption["before-top"]}}:host([positioning='before']){--position-area:${TooltipPositioningOption.before}}:host([positioning='before-bottom']){--position-area:${TooltipPositioningOption["before-bottom"]}}:host([positioning='after-top']){--position-area:${TooltipPositioningOption["after-top"]}}:host([positioning='after']){--position-area:${TooltipPositioningOption.after}}:host([positioning='after-bottom']){--position-area:${TooltipPositioningOption["after-bottom"]}}`;
+  :host(:not(:popover-open)){display:none}:host{--position-area:block-start;--position-try-options:flip-block;--block-offset:${spacingVerticalXS};--inline-offset:${spacingHorizontalXS};background:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:1px solid ${colorTransparentStroke};box-sizing:border-box;color:${colorNeutralForeground1};display:inline-flex;filter:drop-shadow(0 0 2px ${colorNeutralShadowAmbient}) drop-shadow(0 4px 8px ${colorNeutralShadowKey});font-family:${fontFamilyBase};font-size:${fontSizeBase200};inset:unset;line-height:${lineHeightBase200};margin:unset;max-width:240px;overflow:visible;padding:4px ${spacingHorizontalMNudge} 6px;position:absolute;position-area:var(--position-area);position-try-options:var(--position-try-options);width:auto;z-index:1}@supports (inset-area:block-start){:host{inset-area:var(--position-area);position-try-fallbacks:var(--position-try-options)}}:host(:is([positioning^='above'],[positioning^='below'],:not([positioning]))){margin-block:var(--block-offset)}:host(:is([positioning^='before'],[positioning^='after'])){margin-inline:var(--inline-offset);--position-try-options:flip-inline}:host([positioning='above-start']){--position-area:${TooltipPositioningOption["above-start"]}}:host([positioning='above']){--position-area:${TooltipPositioningOption.above}}:host([positioning='above-end']){--position-area:${TooltipPositioningOption["above-end"]}}:host([positioning='below-start']){--position-area:${TooltipPositioningOption["below-start"]}}:host([positioning='below']){--position-area:${TooltipPositioningOption.below}}:host([positioning='below-end']){--position-area:${TooltipPositioningOption["below-end"]}}:host([positioning='before-top']){--position-area:${TooltipPositioningOption["before-top"]}}:host([positioning='before']){--position-area:${TooltipPositioningOption.before}}:host([positioning='before-bottom']){--position-area:${TooltipPositioningOption["before-bottom"]}}:host([positioning='after-top']){--position-area:${TooltipPositioningOption["after-top"]}}:host([positioning='after']){--position-area:${TooltipPositioningOption.after}}:host([positioning='after-bottom']){--position-area:${TooltipPositioningOption["after-bottom"]}}`;
 
 const template = html`<template popover aria-hidden="true"><slot></slot></template>`;