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

package/dist/web-components.d.ts

@@ -1050,7 +1050,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 +1568,54 @@ 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 Tabs component that wraps a collection of tab and tab panel elements.
  *
@@ -4576,33 +4624,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 +4665,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;
 }
 
 /**

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);
@@ -9408,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`,