@fluentui/web-components 3.0.0-beta.46 → 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';
 
 /**
@@ -1050,7 +1049,7 @@ declare class BaseAnchor extends FASTElement {
  *
  * @public
  */
-declare class BaseButton extends FASTElement {
+export declare class BaseButton extends FASTElement {
     /**
      * Indicates the button should be focused when the page is loaded.
      * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#autofocus | `autofocus`} attribute
@@ -1568,6 +1567,140 @@ declare class BaseCheckbox extends FASTElement {
     toggleChecked(force?: boolean): void;
 }
 
+/**
+ * A Divider Custom HTML Element.
+ * A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and headers to organize content in your layout.
+ *
+ * @public
+ */
+export declare class BaseDivider extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The role of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: role
+     */
+    role: DividerRole;
+    /**
+     * The orientation of the divider.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    orientation?: DividerOrientation;
+    connectedCallback(): void;
+    /**
+     * Sets the element's internal role when the role attribute changes.
+     *
+     * @param previous - the previous role value
+     * @param next - the current role value
+     * @internal
+     */
+    roleChanged(previous: string | null, next: string | null): void;
+    /**
+     * Sets the element's internal orientation when the orientation attribute changes.
+     *
+     * @param previous - the previous orientation value
+     * @param next - the current orientation value
+     * @internal
+     */
+    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.
  *
@@ -4576,33 +4709,11 @@ export declare function display(displayValue: CSSDisplayPropertyValue): string;
 
 /**
  * A Divider Custom HTML Element.
+ * Based on BaseDivider and includes style and layout specific attributes
  *
- * @remarks
- * A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and headers to organize content in your layout.
+ * @public
  */
-export declare class Divider extends FASTElement {
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    elementInternals: ElementInternals;
-    /**
-     * The role of the element.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: role
-     */
-    role: DividerRole;
-    /**
-     * The orientation of the divider.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: orientation
-     */
-    orientation?: DividerOrientation;
+export declare class Divider extends BaseDivider {
     /**
      * @public
      * @remarks
@@ -4639,23 +4750,6 @@ export declare class Divider extends FASTElement {
      * @param next - the next state
      */
     insetChanged(prev: boolean, next: boolean): void;
-    connectedCallback(): void;
-    /**
-     * Sets the element's internal role when the role attribute changes.
-     *
-     * @param previous - the previous role value
-     * @param next - the current role value
-     * @internal
-     */
-    roleChanged(previous: string | null, next: string | null): void;
-    /**
-     * Sets the element's internal orientation when the orientation attribute changes.
-     *
-     * @param previous - the previous orientation value
-     * @param next - the current orientation value
-     * @internal
-     */
-    orientationChanged(previous: string | null, next: string | null): void;
 }
 
 /**
@@ -6358,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
      *
@@ -6395,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();
 }
 
 /**
@@ -7734,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
      *
@@ -7771,7 +7798,6 @@ export declare class Spinner extends FASTElement {
      * @param next - the next state
      */
     appearanceChanged(prev: SpinnerAppearance | undefined, next: SpinnerAppearance | undefined): void;
-    constructor();
 }
 
 /**
@@ -8807,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

@@ -6278,7 +6278,7 @@ var __decorateClass$j = (decorators, target, key, kind) => {
   if (kind && result) __defProp$j(target, key, result);
   return result;
 };
-class Divider extends FASTElement {
+class BaseDivider extends FASTElement {
   constructor() {
     super(...arguments);
     /**
@@ -6287,41 +6287,6 @@ class Divider extends FASTElement {
      * @internal
      */
     this.elementInternals = this.attachInternals();
-    this.inset = false;
-  }
-  /**
-   * Handles changes to align-content attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  alignContentChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `align-${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `align-${next}`, true);
-    }
-  }
-  /**
-   * 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 inset custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  insetChanged(prev, next) {
-    toggleState(this.elementInternals, "inset", next);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -6362,8 +6327,48 @@ class Divider extends FASTElement {
     }
   }
 }
-__decorateClass$j([attr], Divider.prototype, "role", 2);
-__decorateClass$j([attr], Divider.prototype, "orientation", 2);
+__decorateClass$j([attr], BaseDivider.prototype, "role", 2);
+__decorateClass$j([attr], BaseDivider.prototype, "orientation", 2);
+class Divider extends BaseDivider {
+  constructor() {
+    super(...arguments);
+    this.inset = false;
+  }
+  /**
+   * Handles changes to align-content attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  alignContentChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `align-${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `align-${next}`, true);
+    }
+  }
+  /**
+   * 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 inset custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  insetChanged(prev, next) {
+    toggleState(this.elementInternals, "inset", next);
+  }
+}
 __decorateClass$j([attr({
   attribute: "align-content"
 })], Divider.prototype, "alignContent", 2);
@@ -7956,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();
     /**
@@ -7968,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
@@ -8042,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")}
@@ -9366,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();
     /**
@@ -9377,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
@@ -9408,11 +9417,12 @@ __decorateClass$5([attr], Spinner.prototype, "size", 2);
 __decorateClass$5([attr], Spinner.prototype, "appearance", 2);
 
 const styles$7 = css`
-  ${display("flex")}
+  ${display("inline-flex")}
 
-  :host{display:flex;align-items:center;height:32px;width:32px;contain:content}:host(${tinyState}){height:20px;width:20px}:host(${extraSmallState}){height:24px;width:24px}:host(${smallState}){height:28px;width:28px}:host(${largeState}){height:36px;width:36px}:host(${extraLargeState}){height:40px;width:40px}:host(${hugeState}){height:44px;width:44px}.progress{height:100%;width:100%}.background{fill:none;stroke:${colorBrandStroke2};stroke-width:1.5px}:host(${invertedState}) .background{stroke:rgba(255,255,255,0.2)}.indicator{stroke:${colorBrandStroke1};fill:none;stroke-width:1.5px;stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg);transition:all 0.2s ease-in-out;animation:spin-infinite 3s cubic-bezier(0.53,0.21,0.29,0.67) infinite}:host(${invertedState}) .indicator{stroke:${colorNeutralStrokeOnBrand2}}@keyframes spin-infinite{0%{stroke-dasharray:0.01px 43.97px;transform:rotate(0deg)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}100%{stroke-dasharray:0.01px 43.97px;transform:rotate(1080deg)}}`;
+  :host{--duration:1.5s;--indicatorSize:${strokeWidthThicker};--size:32px;height:var(--size);width:var(--size);contain:strict;content-visibility:auto}:host(${tinyState}){--indicatorSize:${strokeWidthThick};--size:20px}:host(${extraSmallState}){--indicatorSize:${strokeWidthThick};--size:24px}:host(${smallState}){--indicatorSize:${strokeWidthThick};--size:28px}:host(${largeState}){--indicatorSize:${strokeWidthThicker};--size:36px}:host(${extraLargeState}){--indicatorSize:${strokeWidthThicker};--size:40px}:host(${hugeState}){--indicatorSize:${strokeWidthThickest};--size:44px}.progress,.background,.spinner,.start,.end,.indicator{position:absolute;inset:0}.progress,.spinner,.indicator{animation:none var(--duration) infinite ${curveEasyEase}}.progress{animation-timing-function:linear;animation-name:spin-linear}.background{border:var(--indicatorSize) solid ${colorBrandStroke2};border-radius:50%}:host(${invertedState}) .background{border-color:rgba(255,255,255,0.2)}.spinner{animation-name:spin-swing}.start{overflow:hidden;inset-inline-end:50%}.end{overflow:hidden;inset-inline-start:50%}.indicator{color:${colorBrandStroke1};box-sizing:border-box;border-radius:50%;border:var(--indicatorSize) solid transparent;border-block-start-color:currentcolor;border-inline-end-color:currentcolor}:host(${invertedState}) .indicator{color:${colorNeutralStrokeOnBrand2}}.start .indicator{rotate:135deg;inset:0 -100% 0 0;animation-name:spin-start}.end .indicator{rotate:135deg;inset:0 0 0 -100%;animation-name:spin-end}@keyframes spin-linear{100%{transform:rotate(360deg)}}@keyframes spin-swing{0%{transform:rotate(-135deg)}50%{transform:rotate(0deg)}100%{transform:rotate(225deg)}}@keyframes spin-start{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-80deg)}}@keyframes spin-end{0%,100%{transform:rotate(0deg)}50%{transform:rotate(70deg)}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    .background{display:none}.indicator{border-color:Canvas;border-block-start-color:Highlight;border-inline-end-color:Highlight}`));
 
-const template$7 = html`<slot name="indicator"><svg class="progress" part="progress" viewBox="0 0 16 16"><circle class="background" cx="8px" cy="8px" r="7px"></circle><circle class="indicator" cx="8px" cy="8px" r="7px"></circle></svg></slot>`;
+const template$7 = html`<slot name="indicator"><div class="background"></div><div class="progress"><div class="spinner"><div class="start"><div class="indicator"></div></div><div class="end"><div class="indicator"></div></div></div></div></slot>`;
 
 const definition$7 = Spinner.compose({
   name: `${FluentDesignSystem.prefix}-spinner`,