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

package/dist/web-components.js

@@ -5151,7 +5151,7 @@ var __decorateClass$o = (decorators, target, key, kind) => {
   if (kind && result) __defProp$o(target, key, result);
   return result;
 };
-class Button extends FASTElement {
+class BaseButton extends FASTElement {
   constructor() {
     super();
     this.disabledFocusable = false;
@@ -5162,22 +5162,8 @@ class Button extends FASTElement {
      * @internal
      */
     this.elementInternals = this.attachInternals();
-    this.iconOnly = false;
     this.elementInternals.role = "button";
   }
-  /**
-   * 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);
-    }
-  }
   /**
    * Sets the element's internal disabled state when the element is focusable while disabled.
    *
@@ -5198,14 +5184,6 @@ class Button extends FASTElement {
   get form() {
     return this.elementInternals.form;
   }
-  /**
-   * Handles changes to icon only custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  iconOnlyChanged(prev, next) {
-    toggleState(this.elementInternals, "icon", next);
-  }
   /**
    * A reference to all associated label elements.
    *
@@ -5214,32 +5192,6 @@ class Button extends FASTElement {
   get labels() {
     return Object.freeze(Array.from(this.elementInternals.labels));
   }
-  /**
-   * 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 size attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  sizeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
-  }
   /**
    * Removes the form submission fallback control when the type changes.
    *
@@ -5399,52 +5351,105 @@ class Button extends FASTElement {
  *
  * @public
  */
-Button.formAssociated = true;
-__decorateClass$o([attr], Button.prototype, "appearance", 2);
+BaseButton.formAssociated = true;
 __decorateClass$o([attr({
   mode: "boolean"
-})], Button.prototype, "autofocus", 2);
-__decorateClass$o([observable], Button.prototype, "defaultSlottedContent", 2);
+})], BaseButton.prototype, "autofocus", 2);
+__decorateClass$o([observable], BaseButton.prototype, "defaultSlottedContent", 2);
 __decorateClass$o([attr({
   mode: "boolean"
-})], Button.prototype, "disabled", 2);
+})], BaseButton.prototype, "disabled", 2);
 __decorateClass$o([attr({
   attribute: "disabled-focusable",
   mode: "boolean"
-})], Button.prototype, "disabledFocusable", 2);
+})], BaseButton.prototype, "disabledFocusable", 2);
 __decorateClass$o([attr({
   attribute: "tabindex",
   mode: "fromView",
   converter: nullableNumberConverter
-})], Button.prototype, "tabIndex", 2);
+})], BaseButton.prototype, "tabIndex", 2);
 __decorateClass$o([attr({
   attribute: "formaction"
-})], Button.prototype, "formAction", 2);
+})], BaseButton.prototype, "formAction", 2);
 __decorateClass$o([attr({
   attribute: "form"
-})], Button.prototype, "formAttribute", 2);
+})], BaseButton.prototype, "formAttribute", 2);
 __decorateClass$o([attr({
   attribute: "formenctype"
-})], Button.prototype, "formEnctype", 2);
+})], BaseButton.prototype, "formEnctype", 2);
 __decorateClass$o([attr({
   attribute: "formmethod"
-})], Button.prototype, "formMethod", 2);
+})], BaseButton.prototype, "formMethod", 2);
 __decorateClass$o([attr({
   attribute: "formnovalidate",
   mode: "boolean"
-})], Button.prototype, "formNoValidate", 2);
+})], BaseButton.prototype, "formNoValidate", 2);
 __decorateClass$o([attr({
   attribute: "formtarget"
-})], Button.prototype, "formTarget", 2);
+})], BaseButton.prototype, "formTarget", 2);
+__decorateClass$o([attr], BaseButton.prototype, "name", 2);
+__decorateClass$o([attr], BaseButton.prototype, "type", 2);
+__decorateClass$o([attr], BaseButton.prototype, "value", 2);
+class Button extends BaseButton {
+  constructor() {
+    super(...arguments);
+    this.iconOnly = false;
+  }
+  /**
+   * 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 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 size attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  sizeChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  /**
+   * Handles changes to icon only custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  iconOnlyChanged(prev, next) {
+    toggleState(this.elementInternals, "icon", next);
+  }
+}
+__decorateClass$o([attr], Button.prototype, "appearance", 2);
+__decorateClass$o([attr], Button.prototype, "shape", 2);
+__decorateClass$o([attr], Button.prototype, "size", 2);
 __decorateClass$o([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], Button.prototype, "iconOnly", 2);
-__decorateClass$o([attr], Button.prototype, "name", 2);
-__decorateClass$o([attr], Button.prototype, "shape", 2);
-__decorateClass$o([attr], Button.prototype, "size", 2);
-__decorateClass$o([attr], Button.prototype, "type", 2);
-__decorateClass$o([attr], Button.prototype, "value", 2);
 applyMixins(Button, StartEnd);
 
 function buttonTemplate$1(options = {}) {
@@ -6273,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);
     /**
@@ -6282,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();
@@ -6357,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);
@@ -9403,11 +9413,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`,