[Chore]: Create Spinner base class to abstract out style and layout specific api.

change/@fluentui-web-components-b624c7d1-3e25-45ac-9f46-c6d808bbadfb.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: create base class for spinner and remove style and layout specfic api",
+  "packageName": "@fluentui/web-components",
+  "email": "jes@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/docs/api-report.md

@@ -530,6 +530,13 @@ export class BaseProgressBar extends FASTElement {
     protected valueChanged(prev: number | undefined, next: number | undefined): void;
 }
 
+// @public
+export class BaseSpinner extends FASTElement {
+    constructor();
+    // @internal
+    elementInternals: ElementInternals;
+}
+
 // @public
 export const borderRadiusCircular = "var(--borderRadiusCircular)";
 
@@ -3095,12 +3102,9 @@ export const spacingVerticalXXS = "var(--spacingVerticalXXS)";
 export const spacingVerticalXXXL = "var(--spacingVerticalXXXL)";
 
 // @public
-export class Spinner extends FASTElement {
-    constructor();
+export class Spinner extends BaseSpinner {
     appearance?: SpinnerAppearance;
     appearanceChanged(prev: SpinnerAppearance | undefined, next: SpinnerAppearance | undefined): void;
-    // @internal
-    elementInternals: ElementInternals;
     size?: SpinnerSize;
     sizeChanged(prev: SpinnerSize | undefined, next: SpinnerSize | undefined): void;
 }

packages/web-components/src/index.ts

@@ -181,6 +181,7 @@ export {
 } from './slider/index.js';
 export type { SliderConfiguration, SliderOptions } from './slider/index.js';
 export {
+  BaseSpinner,
   Spinner,
   SpinnerAppearance,
   SpinnerDefinition,

packages/web-components/src/spinner/index.ts

@@ -1,4 +1,4 @@
-export { Spinner } from './spinner.js';
+export { BaseSpinner, Spinner } from './spinner.js';
 export { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
 export { template as SpinnerTemplate } from './spinner.template.js';
 export { styles as SpinnerStyles } from './spinner.styles.js';

packages/web-components/src/spinner/spinner.ts

@@ -6,14 +6,27 @@ import type { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
  * The base class used for constructing a fluent-spinner custom element
  * @public
  */
-export class Spinner extends FASTElement {
+export class BaseSpinner extends FASTElement {
   /**
    * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
    *
    * @internal
    */
   public elementInternals: ElementInternals = this.attachInternals();
 
+  constructor() {
+    super();
+    this.elementInternals.role = 'progressbar';
+  }
+}
+
+/**
+ * A Spinner Custom HTML Element.
+ * Based on BaseSpinner and includes style and layout specific attributes
+ *
+ * @public
+ */
+export class Spinner extends BaseSpinner {
   /**
    * The size of the spinner
    *
@@ -60,9 +73,4 @@ export class Spinner extends FASTElement {
       toggleState(this.elementInternals, `${next}`, true);
     }
   }
-
-  constructor() {
-    super();
-    this.elementInternals.role = 'progressbar';
-  }
 }