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

package/dist/web-components.d.ts

@@ -11,7 +11,6 @@ import type { HostController } from '@microsoft/fast-element';
 import { HTMLDirective } from '@microsoft/fast-element';
 import { Orientation } from '@microsoft/fast-web-utilities';
 import type { SyntheticViewTemplate } from '@microsoft/fast-element';
-import type { Theme } from '@fluentui/tokens';
 import { ViewTemplate } from '@microsoft/fast-element';
 
 /**
@@ -1616,6 +1615,92 @@ export declare class BaseDivider extends FASTElement {
     orientationChanged(previous: string | null, next: string | null): void;
 }
 
+/**
+ * A Progress HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ *
+ * @public
+ */
+export declare class BaseProgressBar extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The validation state of the progress bar
+     * @public
+     * HTML Attribute: `validation-state`
+     */
+    validationState: ProgressBarValidationState | null;
+    /**
+     * Handles changes to validation-state attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    validationStateChanged(prev: ProgressBarValidationState | undefined, next: ProgressBarValidationState | undefined): void;
+    /**
+     * The value of the progress
+     * @internal
+     * HTML Attribute: `value`
+     */
+    value?: number;
+    /**
+     * Updates the percent complete when the `value` property changes.
+     *
+     * @internal
+     */
+    protected valueChanged(prev: number | undefined, next: number | undefined): void;
+    /**
+     * The minimum value
+     * @internal
+     * HTML Attribute: `min`
+     */
+    min?: number;
+    /**
+     * Updates the percent complete when the `min` property changes.
+     *
+     * @param prev - The previous min value
+     * @param next - The current min value
+     */
+    protected minChanged(prev: number | undefined, next: number | undefined): void;
+    /**
+     * The maximum value
+     * @internal
+     * HTML Attribute: `max`
+     */
+    max?: number;
+    /**
+     * Updates the percent complete when the `max` property changes.
+     *
+     * @param prev - The previous max value
+     * @param next - The current max value
+     * @internal
+     */
+    protected maxChanged(prev: number | undefined, next: number | undefined): void;
+    /**
+     * Indicates progress in %
+     * @internal
+     */
+    get percentComplete(): number;
+    constructor();
+}
+
+/**
+ * The base class used for constructing a fluent-spinner custom element
+ * @public
+ */
+export declare class BaseSpinner extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    constructor();
+}
+
 /**
  * A Tabs component that wraps a collection of tab and tab panel elements.
  *
@@ -6367,18 +6452,12 @@ export declare const MenuStyles: ElementStyles;
 export declare const MenuTemplate: ElementViewTemplate<Menu>;
 
 /**
- * An Progress HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ * A Progress HTML Element.
+ * Based on BaseProgressBar and includes style and layout specific attributes
  *
  * @public
  */
-export declare class ProgressBar extends FASTElement {
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    elementInternals: ElementInternals;
+export declare class ProgressBar extends BaseProgressBar {
     /**
      * The thickness of the progress bar
      *
@@ -6404,63 +6483,6 @@ export declare class ProgressBar extends FASTElement {
      * @param next - the next state
      */
     shapeChanged(prev: ProgressBarShape | undefined, next: ProgressBarShape | undefined): void;
-    /**
-     * The validation state of the progress bar
-     * @public
-     * HTML Attribute: `validation-state`
-     */
-    validationState: ProgressBarValidationState | null;
-    /**
-     * Handles changes to validation-state attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
-     */
-    validationStateChanged(prev: ProgressBarValidationState | undefined, next: ProgressBarValidationState | undefined): void;
-    /**
-     * The value of the progress
-     * @internal
-     * HTML Attribute: `value`
-     */
-    value?: number;
-    /**
-     * Updates the percent complete when the `value` property changes.
-     *
-     * @internal
-     */
-    protected valueChanged(prev: number | undefined, next: number | undefined): void;
-    /**
-     * The minimum value
-     * @internal
-     * HTML Attribute: `min`
-     */
-    min?: number;
-    /**
-     * Updates the percent complete when the `min` property changes.
-     *
-     * @param prev - The previous min value
-     * @param next - The current min value
-     */
-    protected minChanged(prev: number | undefined, next: number | undefined): void;
-    /**
-     * The maximum value
-     * @internal
-     * HTML Attribute: `max`
-     */
-    max?: number;
-    /**
-     * Updates the percent complete when the `max` property changes.
-     *
-     * @param prev - The previous max value
-     * @param next - The current max value
-     * @internal
-     */
-    protected maxChanged(prev: number | undefined, next: number | undefined): void;
-    /**
-     * Indicates progress in %
-     * @internal
-     */
-    get percentComplete(): number;
-    constructor();
 }
 
 /**
@@ -7743,16 +7765,12 @@ export declare const spacingVerticalXXS = "var(--spacingVerticalXXS)";
 export declare const spacingVerticalXXXL = "var(--spacingVerticalXXXL)";
 
 /**
- * The base class used for constructing a fluent-spinner custom element
+ * A Spinner Custom HTML Element.
+ * Based on BaseSpinner and includes style and layout specific attributes
+ *
  * @public
  */
-export declare class Spinner extends FASTElement {
-    /**
-     * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    elementInternals: ElementInternals;
+export declare class Spinner extends BaseSpinner {
     /**
      * The size of the spinner
      *
@@ -7780,7 +7798,6 @@ export declare class Spinner extends FASTElement {
      * @param next - the next state
      */
     appearanceChanged(prev: SpinnerAppearance | undefined, next: SpinnerAppearance | undefined): void;
-    constructor();
 }
 
 /**
@@ -8816,6 +8833,13 @@ export declare const TextWeight: {
  */
 export declare type TextWeight = ValuesOf<typeof TextWeight>;
 
+/**
+ * Not using the `Theme` type from `@fluentui/tokens` package to allow custom
+ * tokens to be added.
+ * @internal
+ */
+export declare type Theme = Record<string, string | number>;
+
 /**
  * The base class used for constructing a `<fluent-toggle-button>` custom element.
  *

package/dist/web-components.js

@@ -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