@fluentui/web-components 3.0.0-beta.47 → 3.0.0-beta.49

package/dist/web-components.js

@@ -4559,7 +4559,7 @@ var __decorateClass$q = (decorators, target, key, kind) => {
   if (kind && result) __defProp$q(target, key, result);
   return result;
 };
-const _Avatar = class _Avatar extends FASTElement {
+class BaseAvatar extends FASTElement {
   constructor() {
     super();
     /**
@@ -4601,7 +4601,7 @@ const _Avatar = class _Avatar extends FASTElement {
     const colorful = this.color === AvatarColor.colorful;
     const prev = this.currentColor;
     toggleState(this.elementInternals, `${prev}`, false);
-    this.currentColor = colorful && this.colorId ? this.colorId : colorful ? _Avatar.colors[getHashCode(this.name ?? "") % _Avatar.colors.length] : this.color ?? AvatarColor.neutral;
+    this.currentColor = colorful && this.colorId ? this.colorId : colorful ? Avatar.colors[getHashCode(this.name ?? "") % Avatar.colors.length] : this.color ?? AvatarColor.neutral;
     toggleState(this.elementInternals, `${this.currentColor}`, true);
   }
   /**
@@ -4617,24 +4617,24 @@ const _Avatar = class _Avatar extends FASTElement {
       firstInitialOnly: size <= 16
     });
   }
-};
+}
 /**
  * An array of the available Avatar named colors
  */
-_Avatar.colors = Object.values(AvatarNamedColor);
-__decorateClass$q([attr], _Avatar.prototype, "name", 2);
-__decorateClass$q([attr], _Avatar.prototype, "initials", 2);
+BaseAvatar.colors = Object.values(AvatarNamedColor);
+__decorateClass$q([attr], BaseAvatar.prototype, "name", 2);
+__decorateClass$q([attr], BaseAvatar.prototype, "initials", 2);
 __decorateClass$q([attr({
   converter: nullableNumberConverter
-})], _Avatar.prototype, "size", 2);
-__decorateClass$q([attr], _Avatar.prototype, "shape", 2);
-__decorateClass$q([attr], _Avatar.prototype, "active", 2);
-__decorateClass$q([attr], _Avatar.prototype, "appearance", 2);
-__decorateClass$q([attr], _Avatar.prototype, "color", 2);
+})], BaseAvatar.prototype, "size", 2);
+__decorateClass$q([attr], BaseAvatar.prototype, "active", 2);
+__decorateClass$q([attr], BaseAvatar.prototype, "color", 2);
 __decorateClass$q([attr({
   attribute: "color-id"
-})], _Avatar.prototype, "colorId", 2);
-let Avatar = _Avatar;
+})], BaseAvatar.prototype, "colorId", 2);
+class Avatar extends BaseAvatar {}
+__decorateClass$q([attr], Avatar.prototype, "shape", 2);
+__decorateClass$q([attr], Avatar.prototype, "appearance", 2);
 const getHashCode = str => {
   let hashCode = 0;
   for (let len = str.length - 1; len >= 0; len--) {
@@ -7961,7 +7961,7 @@ var __decorateClass$9 = (decorators, target, key, kind) => {
   if (kind && result) __defProp$9(target, key, result);
   return result;
 };
-class ProgressBar extends FASTElement {
+class BaseProgressBar extends FASTElement {
   constructor() {
     super();
     /**
@@ -7973,32 +7973,6 @@ class ProgressBar extends FASTElement {
     this.validationState = null;
     this.elementInternals.role = "progressbar";
   }
-  /**
-   * Handles changes to thickness attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  thicknessChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
-  }
-  /**
-   * Handles changes to shape attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  shapeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
-  }
   /**
    * Handles changes to validation-state attribute custom states
    * @param prev - the previous state
@@ -8047,21 +8021,49 @@ class ProgressBar extends FASTElement {
     return range === 0 ? 0 : Math.fround((value - min) / range * 100);
   }
 }
-__decorateClass$9([attr], ProgressBar.prototype, "thickness", 2);
-__decorateClass$9([attr], ProgressBar.prototype, "shape", 2);
 __decorateClass$9([attr({
   attribute: "validation-state"
-})], ProgressBar.prototype, "validationState", 2);
+})], BaseProgressBar.prototype, "validationState", 2);
 __decorateClass$9([attr({
   converter: nullableNumberConverter
-})], ProgressBar.prototype, "value", 2);
+})], BaseProgressBar.prototype, "value", 2);
 __decorateClass$9([attr({
   converter: nullableNumberConverter
-})], ProgressBar.prototype, "min", 2);
+})], BaseProgressBar.prototype, "min", 2);
 __decorateClass$9([attr({
   converter: nullableNumberConverter
-})], ProgressBar.prototype, "max", 2);
-__decorateClass$9([volatile], ProgressBar.prototype, "percentComplete", 1);
+})], BaseProgressBar.prototype, "max", 2);
+__decorateClass$9([volatile], BaseProgressBar.prototype, "percentComplete", 1);
+class ProgressBar extends BaseProgressBar {
+  /**
+   * Handles changes to thickness attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  thicknessChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  /**
+   * Handles changes to shape attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  shapeChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+}
+__decorateClass$9([attr], ProgressBar.prototype, "thickness", 2);
+__decorateClass$9([attr], ProgressBar.prototype, "shape", 2);
 
 const styles$c = css`
   ${display("block")}
@@ -9371,7 +9373,7 @@ var __decorateClass$5 = (decorators, target, key, kind) => {
   if (kind && result) __defProp$5(target, key, result);
   return result;
 };
-class Spinner extends FASTElement {
+class BaseSpinner extends FASTElement {
   constructor() {
     super();
     /**
@@ -9382,6 +9384,8 @@ class Spinner extends FASTElement {
     this.elementInternals = this.attachInternals();
     this.elementInternals.role = "progressbar";
   }
+}
+class Spinner extends BaseSpinner {
   /**
    * Handles changes to size attribute custom states
    * @param prev - the previous state
@@ -9951,7 +9955,7 @@ var __decorateClass$2 = (decorators, target, key, kind) => {
   if (kind && result) __defProp$2(target, key, result);
   return result;
 };
-class TextInput extends FASTElement {
+class BaseTextInput extends FASTElement {
   constructor() {
     super(...arguments);
     this.type = TextInputType.text;
@@ -9974,32 +9978,6 @@ class TextInput extends FASTElement {
      */
     this.elementInternals = this.attachInternals();
   }
-  /**
-   * Handles changes to appearance attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  appearanceChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
-  }
-  /**
-   * Handles changes to `control-size` attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  controlSizeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
-  }
   /**
    * Updates the control label visibility based on the presence of default slotted content.
    *
@@ -10289,58 +10267,86 @@ class TextInput extends FASTElement {
  *
  * @public
  */
-TextInput.formAssociated = true;
-__decorateClass$2([attr], TextInput.prototype, "appearance", 2);
-__decorateClass$2([attr], TextInput.prototype, "autocomplete", 2);
+BaseTextInput.formAssociated = true;
+__decorateClass$2([attr], BaseTextInput.prototype, "autocomplete", 2);
 __decorateClass$2([attr({
   mode: "boolean"
-})], TextInput.prototype, "autofocus", 2);
-__decorateClass$2([attr({
-  attribute: "control-size"
-})], TextInput.prototype, "controlSize", 2);
-__decorateClass$2([observable], TextInput.prototype, "defaultSlottedNodes", 2);
-__decorateClass$2([attr], TextInput.prototype, "dirname", 2);
+})], BaseTextInput.prototype, "autofocus", 2);
+__decorateClass$2([observable], BaseTextInput.prototype, "defaultSlottedNodes", 2);
+__decorateClass$2([attr], BaseTextInput.prototype, "dirname", 2);
 __decorateClass$2([attr({
   mode: "boolean"
-})], TextInput.prototype, "disabled", 2);
+})], BaseTextInput.prototype, "disabled", 2);
 __decorateClass$2([attr({
   attribute: "form"
-})], TextInput.prototype, "formAttribute", 2);
+})], BaseTextInput.prototype, "formAttribute", 2);
 __decorateClass$2([attr({
   attribute: "value",
   mode: "fromView"
-})], TextInput.prototype, "initialValue", 2);
-__decorateClass$2([attr], TextInput.prototype, "list", 2);
+})], BaseTextInput.prototype, "initialValue", 2);
+__decorateClass$2([attr], BaseTextInput.prototype, "list", 2);
 __decorateClass$2([attr({
   converter: nullableNumberConverter
-})], TextInput.prototype, "maxlength", 2);
+})], BaseTextInput.prototype, "maxlength", 2);
 __decorateClass$2([attr({
   converter: nullableNumberConverter
-})], TextInput.prototype, "minlength", 2);
+})], BaseTextInput.prototype, "minlength", 2);
 __decorateClass$2([attr({
   mode: "boolean"
-})], TextInput.prototype, "multiple", 2);
-__decorateClass$2([attr], TextInput.prototype, "name", 2);
-__decorateClass$2([attr], TextInput.prototype, "pattern", 2);
-__decorateClass$2([attr], TextInput.prototype, "placeholder", 2);
+})], BaseTextInput.prototype, "multiple", 2);
+__decorateClass$2([attr], BaseTextInput.prototype, "name", 2);
+__decorateClass$2([attr], BaseTextInput.prototype, "pattern", 2);
+__decorateClass$2([attr], BaseTextInput.prototype, "placeholder", 2);
 __decorateClass$2([attr({
   attribute: "readonly",
   mode: "boolean"
-})], TextInput.prototype, "readOnly", 2);
+})], BaseTextInput.prototype, "readOnly", 2);
 __decorateClass$2([attr({
   mode: "boolean"
-})], TextInput.prototype, "required", 2);
+})], BaseTextInput.prototype, "required", 2);
 __decorateClass$2([attr({
   converter: nullableNumberConverter
-})], TextInput.prototype, "size", 2);
+})], BaseTextInput.prototype, "size", 2);
 __decorateClass$2([attr({
   converter: {
     fromView: value => typeof value === "string" ? ["true", ""].includes(value.trim().toLowerCase()) : null,
     toView: value => value.toString()
   }
-})], TextInput.prototype, "spellcheck", 2);
-__decorateClass$2([attr], TextInput.prototype, "type", 2);
-__decorateClass$2([observable], TextInput.prototype, "controlLabel", 2);
+})], BaseTextInput.prototype, "spellcheck", 2);
+__decorateClass$2([attr], BaseTextInput.prototype, "type", 2);
+__decorateClass$2([observable], BaseTextInput.prototype, "controlLabel", 2);
+class TextInput extends BaseTextInput {
+  /**
+   * Handles changes to appearance attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  appearanceChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  /**
+   * Handles changes to `control-size` attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  controlSizeChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+}
+__decorateClass$2([attr], TextInput.prototype, "appearance", 2);
+__decorateClass$2([attr({
+  attribute: "control-size"
+})], TextInput.prototype, "controlSize", 2);
 applyMixins(TextInput, StartEnd);
 
 const styles$2 = css`