From 3b8da69e2da826a6d2abdfd0c647772f449f9795 Mon Sep 17 00:00:00 2001
From: jeff smith <jes@microsoft.com>
Date: Mon, 22 Jul 2024 17:43:21 -0600
Subject: [PATCH 1/2] chore: create base class for spinner and remove style and
 layout specfic api

---
 packages/web-components/docs/api-report.md    | 12 +++++++----
 packages/web-components/src/index.ts          |  1 +
 packages/web-components/src/spinner/index.ts  |  2 +-
 .../web-components/src/spinner/spinner.ts     | 20 +++++++++++++------
 4 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
index d6b0785e62146c..8f6857a647d971 100644
--- a/packages/web-components/docs/api-report.md
+++ b/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;
 }
diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts
index 19256952fc70b1..e4528a30133803 100644
--- a/packages/web-components/src/index.ts
+++ b/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,
diff --git a/packages/web-components/src/spinner/index.ts b/packages/web-components/src/spinner/index.ts
index af6b25e2892ebf..aacaf6c879237e 100644
--- a/packages/web-components/src/spinner/index.ts
+++ b/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';
diff --git a/packages/web-components/src/spinner/spinner.ts b/packages/web-components/src/spinner/spinner.ts
index c7a734d8991135..856609aa8e7ced 100644
--- a/packages/web-components/src/spinner/spinner.ts
+++ b/packages/web-components/src/spinner/spinner.ts
@@ -6,7 +6,7 @@ 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.
    *
@@ -14,6 +14,19 @@ export class Spinner extends FASTElement {
    */
   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';
-  }
 }

From 30a43b5c7ddda0d1348f1b05e1726bb561866f32 Mon Sep 17 00:00:00 2001
From: jeff smith <jes@microsoft.com>
Date: Mon, 22 Jul 2024 17:44:19 -0600
Subject: [PATCH 2/2] change files

---
 ...eb-components-b624c7d1-3e25-45ac-9f46-c6d808bbadfb.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-web-components-b624c7d1-3e25-45ac-9f46-c6d808bbadfb.json

diff --git a/change/@fluentui-web-components-b624c7d1-3e25-45ac-9f46-c6d808bbadfb.json b/change/@fluentui-web-components-b624c7d1-3e25-45ac-9f46-c6d808bbadfb.json
new file mode 100644
index 00000000000000..a5d7744c69ea0c
--- /dev/null
+++ b/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"
+}