@fluentui/web-components 3.0.0-beta.16 → 3.0.0-beta.18

package/CHANGELOG.md

@@ -1,12 +1,31 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Thu, 16 May 2024 04:06:56 GMT and should not be manually modified.
+This log was last generated on Mon, 20 May 2024 04:06:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-beta.18](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.18)
+
+Mon, 20 May 2024 04:06:59 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.17..@fluentui/web-components_v3.0.0-beta.18)
+
+### Changes
+
+- adds high contrast styles to badge web component ([PR #31234](https://github.com/microsoft/fluentui/pull/31234) by ryanmerrill@microsoft.com)
+
+## [3.0.0-beta.17](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.17)
+
+Fri, 17 May 2024 04:06:08 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.16..@fluentui/web-components_v3.0.0-beta.17)
+
+### Changes
+
+- fix(web-components): remove determinate from spinner implementation ([PR #31404](https://github.com/microsoft/fluentui/pull/31404) by 13071055+chrisdholt@users.noreply.github.com)
+- Fix compound disabled selector in fluent-button and fluent-anchor-button ([PR #31302](https://github.com/microsoft/fluentui/pull/31302) by rupertdavid@microsoft.com)
+
 ## [3.0.0-beta.16](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.16)
 
-Thu, 16 May 2024 04:06:56 GMT 
+Thu, 16 May 2024 04:07:03 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.15..@fluentui/web-components_v3.0.0-beta.16)
 
 ### Changes

package/dist/dts/index.d.ts

@@ -19,7 +19,7 @@ export { ProgressBar, ProgressOptions, ProgressBarShape, ProgressBarThickness, P
 export { Radio, RadioControl, RadioOptions, RadioDefinition, RadioStyles, RadioTemplate } from './radio/index.js';
 export { RadioGroup, RadioGroupOrientation, RadioGroupDefinition, RadioGroupStyles, RadioGroupTemplate, } from './radio-group/index.js';
 export { Slider, SliderConfiguration, SliderMode, SliderOptions, SliderOrientation, SliderSize, SliderDefinition, SliderStyles, SliderTemplate, } from './slider/index.js';
-export { Spinner, SpinnerAppearance, SpinnerSize, SpinnerOptions, SpinnerTemplate, SpinnerStyles, SpinnerDefinition, } from './spinner/index.js';
+export { Spinner, SpinnerAppearance, SpinnerSize, SpinnerTemplate, SpinnerStyles, SpinnerDefinition, } from './spinner/index.js';
 export { Switch, SwitchOptions, SwitchLabelPosition, SwitchDefinition, SwitchStyles, SwitchTemplate, } from './switch/index.js';
 export { Tab, TabOptions, TabTemplate, TabStyles, TabDefinition } from './tab/index.js';
 export { TabPanel, TabPanelTemplate, TabPanelStyles, TabPanelDefinition } from './tab-panel/index.js';

package/dist/dts/spinner/index.d.ts

@@ -1,4 +1,4 @@
-export { Spinner, SpinnerOptions } from './spinner.js';
+export { 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';

package/dist/dts/spinner/spinner.d.ts

@@ -1,18 +1,16 @@
-import { BaseProgress } from '../progress-bar/base-progress.js';
-import { StaticallyComposableHTML } from '../utils/template-helpers.js';
+import { FASTElement } from '@microsoft/fast-element';
 import type { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
-/**
- * Progress configuration options
- * @public
- */
-export declare type SpinnerOptions = {
-    indeterminateIndicator?: StaticallyComposableHTML<Spinner>;
-};
 /**
  * The base class used for constructing a fluent-spinner custom element
  * @public
  */
-export declare class Spinner extends BaseProgress {
+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
+     */
+    protected elementInternals: ElementInternals;
     /**
      * The size of the spinner
      *
@@ -30,4 +28,5 @@ export declare class Spinner extends BaseProgress {
      * HTML Attribute: appearance
      */
     appearance?: SpinnerAppearance;
+    constructor();
 }

package/dist/dts/spinner/spinner.template.d.ts

@@ -1,4 +1,2 @@
-import type { ElementViewTemplate } from '@microsoft/fast-element';
-import { Spinner, SpinnerOptions } from './spinner.js';
-export declare function progressRingTemplate<T extends Spinner>(options?: SpinnerOptions): ElementViewTemplate<T>;
-export declare const template: ElementViewTemplate<Spinner>;
+import { Spinner } from './spinner.js';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<Spinner, any>;

package/dist/esm/anchor-button/anchor-button.styles.js

@@ -160,9 +160,9 @@ export const styles = css `
     box-shadow: ${shadow2}, 0 0 0 2px ${colorStrokeFocus2};
   }
 
-  :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"])) .control,
-  :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"]):hover) .control,
-  :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"]):hover:active) .control {
+  :host(:is([disabled][appearance='primary'], [disabled-focusabale][appearance='primary'])) .control,
+  :host(:is([disabled][appearance='primary'], [disabled-focusabale][appearance='primary']):hover) .control,
+  :host(:is([disabled][appearance='primary'], [disabled-focusabale][appearance='primary']):hover:active) .control {
     border-color: transparent;
   }
 
@@ -178,9 +178,9 @@ export const styles = css `
     background-color: ${colorTransparentBackgroundPressed};
   }
 
-  :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"])) .control,
-  :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"]):hover) .control,
-  :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"]):hover:active) .control {
+  :host(:is([disabled][appearance='outline'], [disabled-focusabale][appearance='outline'])) .control,
+  :host(:is([disabled][appearance='outline'], [disabled-focusabale][appearance='outline']):hover) .control,
+  :host(:is([disabled][appearance='outline'], [disabled-focusabale][appearance='outline']):hover:active) .control {
     background-color: ${colorTransparentBackground};
   }
 
@@ -202,9 +202,9 @@ export const styles = css `
     border-color: transparent;
   }
 
-  :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"])) .control,
-  :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"]):hover) .control,
-  :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"]):hover:active) .control {
+  :host(:is([disabled][appearance='subtle'], [disabled-focusabale][appearance='subtle'])) .control,
+  :host(:is([disabled][appearance='subtle'], [disabled-focusabale][appearance='subtle']):hover) .control,
+  :host(:is([disabled][appearance='subtle'], [disabled-focusabale][appearance='subtle']):hover:active) .control {
     background-color: ${colorTransparentBackground};
     border-color: transparent;
   }
@@ -238,9 +238,10 @@ export const styles = css `
     border-color: transparent;
   }
 
-  :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"])) .control,
-  :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"]):hover) .control,
-  :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"]):hover:active) .control {
+  :host(:is([disabled][appearance='transparent'], [disabled-focusabale][appearance='transparent'])) .control,
+  :host(:is([disabled][appearance='transparent'], [disabled-focusabale][appearance='transparent']):hover) .control,
+  :host(:is([disabled][appearance='transparent'], [disabled-focusabale][appearance='transparent']):hover:active)
+    .control {
     border-color: transparent;
     background-color: ${colorTransparentBackground};
   }

package/dist/esm/anchor-button/anchor-button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"anchor-button.styles.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,EACpB,yBAAyB,EACzB,2BAA2B,EAC3B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,6BAA6B,EAC7B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,0BAA0B,EAC1B,iBAAiB,EACjB,qBAAqB,EACrB,0BAA0B,EAC1B,4BAA4B,EAC5B,0BAA0B,EAC1B,+BAA+B,EAC/B,iCAAiC,EACjC,sBAAsB,EACtB,aAAa,EACb,cAAc,EACd,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,OAAO,EACP,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,8BAA8B,EAAE,MAAM,uDAAuD,CAAC;AACvG,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;sBAGJ,uBAAuB;;;;;;;;;;;;;;wBAcrB,uBAAuB;aAClC,uBAAuB;cACtB,eAAe,UAAU,mBAAmB;iBACzC,kBAAkB;;qBAEd,kBAAkB;iBACtB,eAAe;mBACb,cAAc;mBACd,kBAAkB;mBAClB,iBAAiB;2BACT,cAAc;;kCAEP,aAAa;;;;;;;;;;wBAUvB,4BAA4B;aACvC,4BAA4B;oBACrB,wBAAwB;;;;wBAIpB,8BAA8B;oBAClC,0BAA0B;aACjC,8BAA8B;;;;;oBAKvB,sBAAsB;eAC3B,gBAAgB,WAAW,sBAAsB;kBAC9C,OAAO,eAAe,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA8BnC,mBAAmB;;;;;;iBAMxB,kBAAkB;qBACd,iBAAiB;iBACrB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;;;;;qBAUf,iBAAiB;iBACrB,kBAAkB;iBAClB,eAAe;mBACb,iBAAiB;;;;;;;;;;;;;;;;qBAgBf,oBAAoB;;;;;qBAKpB,gBAAgB;;;;wBAIb,oBAAoB;aAC/B,6BAA6B;;;;;wBAKlB,yBAAyB;;;;;;aAMpC,6BAA6B;;;;wBAIlB,2BAA2B;;;;oBAI/B,6BAA6B;kBAC/B,OAAO,eAAe,iBAAiB;;;;;;;;;;wBAUjC,0BAA0B;;;;wBAI1B,+BAA+B;;;;wBAI/B,iCAAiC;;;;;;wBAMjC,0BAA0B;;;;wBAI1B,qBAAqB;aAChC,uBAAuB;;;;;wBAKZ,0BAA0B;aACrC,4BAA4B;;;;;wBAKjB,4BAA4B;aACvC,8BAA8B;;;;;;;wBAOnB,0BAA0B;;;;;YAKtC,iCAAiC;;;;YAIjC,mCAAmC;;;;wBAIvB,0BAA0B;aACrC,uBAAuB;;;;wBAIZ,+BAA+B;aAC1C,iCAAiC;;;;wBAItB,iCAAiC;aAC5C,mCAAmC;;;;;;;;;;;;;wBAaxB,0BAA0B;;;;;;;wBAO1B,8BAA8B;oBAClC,0BAA0B;aACjC,8BAA8B;;;CAG1C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;GAIjC,CAAC,CACH,CAAC"}
+{"version":3,"file":"anchor-button.styles.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.styles.ts"],"names":[],"mappings":"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"}

package/dist/esm/badge/badge.styles.js

@@ -1,4 +1,5 @@
 import { css } from '@microsoft/fast-element';
+import { forcedColorsStylesheetBehavior } from '../utils/index.js';
 import { badgeBaseStyles, badgeFilledStyles, badgeGhostStyles, badgeOutlineStyles, badgeSizeStyles, badgeTintStyles, } from '../styles/index.js';
 import { borderRadiusMedium, borderRadiusNone, borderRadiusSmall } from '../theme/design-tokens.js';
 // why is the border not showing up?
@@ -26,5 +27,11 @@ export const styles = css `
   ${badgeOutlineStyles}
   ${badgeTintStyles}
   ${badgeBaseStyles}
-`;
+`.withBehaviors(forcedColorsStylesheetBehavior(css `
+    :host,
+    :host([appearance='outline']),
+    :host([appearance='tint']) {
+      border-color: CanvasText;
+    }
+  `));
 //# sourceMappingURL=badge.styles.js.map

package/dist/esm/badge/badge.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../../src/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACpG,oCAAoC;AACpC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;qBAEJ,gBAAgB;;;;qBAIhB,kBAAkB;;;;;;qBAMlB,iBAAiB;;;IAGlC,eAAe;IACf,iBAAiB;IACjB,gBAAgB;IAChB,kBAAkB;IAClB,eAAe;IACf,eAAe;CAClB,CAAC"}
+{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../../src/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACpG,oCAAoC;AACpC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;qBAEJ,gBAAgB;;;;qBAIhB,kBAAkB;;;;;;qBAMlB,iBAAiB;;;IAGlC,eAAe;IACf,iBAAiB;IACjB,gBAAgB;IAChB,kBAAkB;IAClB,eAAe;IACf,eAAe;CAClB,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;GAMjC,CAAC,CACH,CAAC"}

package/dist/esm/button/button.styles.js

@@ -157,9 +157,9 @@ export const styles = css `
     box-shadow: ${shadow2}, 0 0 0 2px ${colorStrokeFocus2};
   }
 
-  :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"])),
-  :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"]):hover),
-  :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"]):hover:active) {
+  :host(:is([disabled][appearance='primary'], [disabled-focusabale][appearance='primary'])),
+  :host(:is([disabled][appearance='primary'], [disabled-focusabale][appearance='primary']):hover),
+  :host(:is([disabled][appearance='primary'], [disabled-focusabale][appearance='primary']):hover:active) {
     border-color: transparent;
   }
 
@@ -175,9 +175,9 @@ export const styles = css `
     background-color: ${colorTransparentBackgroundPressed};
   }
 
-  :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"])),
-  :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"]):hover),
-  :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"]):hover:active) {
+  :host(:is([disabled][appearance='outline'], [disabled-focusabale][appearance='outline'])),
+  :host(:is([disabled][appearance='outline'], [disabled-focusabale][appearance='outline']):hover),
+  :host(:is([disabled][appearance='outline'], [disabled-focusabale][appearance='outline']):hover:active) {
     background-color: ${colorTransparentBackground};
   }
 
@@ -199,9 +199,9 @@ export const styles = css `
     border-color: transparent;
   }
 
-  :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"])),
-  :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"]):hover),
-  :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"]):hover:active) {
+  :host(:is([disabled][appearance='subtle'], [disabled-focusabale][appearance='subtle'])),
+  :host(:is([disabled][appearance='subtle'], [disabled-focusabale][appearance='subtle']):hover),
+  :host(:is([disabled][appearance='subtle'], [disabled-focusabale][appearance='subtle']):hover:active) {
     background-color: ${colorTransparentBackground};
     border-color: transparent;
   }
@@ -235,9 +235,9 @@ export const styles = css `
     border-color: transparent;
   }
 
-  :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"])),
-  :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"]):hover),
-  :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"]):hover:active) {
+  :host(:is([disabled][appearance='transparent'], [disabled-focusabale][appearance='transparent'])),
+  :host(:is([disabled][appearance='transparent'], [disabled-focusabale][appearance='transparent']):hover),
+  :host(:is([disabled][appearance='transparent'], [disabled-focusabale][appearance='transparent']):hover:active) {
     border-color: transparent;
     background-color: ${colorTransparentBackground};
   }

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,mBAAmB,GACpB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,aAAa,EAEb,iBAAiB,EACjB,+BAA+B,EAC/B,qBAAqB,EACrB,mBAAmB,EACnB,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,YAAY,EAEZ,sBAAsB,EACtB,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,EACZ,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,MAAM,EACN,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,cAAc,EACd,YAAY,EACZ,gBAAgB,GACjB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,KAAK,EACL,eAAe,EACf,UAAU,EACV,UAAU,EACV,SAAS,EACT,aAAa,EACb,WAAW,EACX,eAAe,GAChB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,UAAU,EAEV,cAAc,EACd,YAAY,EACZ,gBAAgB,GACjB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,QAAQ,EAER,qBAAqB,EACrB,aAAa,EACb,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAChB,cAAc,GACf,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,cAAc,EACd,wBAAwB,EACxB,mBAAmB,EACnB,kBAAkB,EAClB,sBAAsB,EACtB,oBAAoB,EACpB,wBAAwB,GACzB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,YAAY,EACZ,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,gBAAgB,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC5G,OAAO,EACL,OAAO,EACP,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,EAClB,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,aAAa,GACd,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,eAAe,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC5G,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC9G,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjF,OAAO,EACL,UAAU,EACV,oBAAoB,EACpB,eAAe,EACf,cAAc,EAEd,kBAAkB,EAClB,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,QAAQ,EAGR,YAAY,EACZ,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,kBAAkB,GACnB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACtG,OAAO,EACL,WAAW,EAEX,gBAAgB,EAChB,oBAAoB,EACpB,0BAA0B,EAC1B,qBAAqB,EACrB,iBAAiB,EACjB,mBAAmB,GACpB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,KAAK,EAA8B,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAClH,OAAO,EACL,UAAU,EACV,qBAAqB,EACrB,oBAAoB,EACpB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,MAAM,EAEN,UAAU,EAEV,iBAAiB,EACjB,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,cAAc,GACf,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,OAAO,EACP,iBAAiB,EACjB,WAAW,EAEX,eAAe,EACf,aAAa,EACb,iBAAiB,GAClB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,MAAM,EAEN,mBAAmB,EACnB,gBAAgB,EAChB,YAAY,EACZ,cAAc,GACf,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,GAAG,EAAc,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACxF,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACtG,OAAO,EACL,IAAI,EACJ,cAAc,EAEd,eAAe,EACf,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,cAAc,GACf,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,UAAU,EACV,cAAc,GACf,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAEL,SAAS,EACT,aAAa,EACb,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,EACf,mBAAmB,GACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,YAAY,EACZ,sBAAsB,EAEtB,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,qBAAqB,EACrB,2BAA2B,EAC3B,6BAA6B,EAC7B,qBAAqB,EACrB,8BAA8B,EAC9B,gCAAgC,EAChC,wBAAwB,EACxB,8BAA8B,EAC9B,wBAAwB,EACxB,uBAAuB,EACvB,0BAA0B,EAC1B,yBAAyB,EACzB,iCAAiC,EACjC,yBAAyB,EACzB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,0CAA0C,CAAC;AAElD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EACL,8BAA8B,EAC9B,kBAAkB,EAClB,4BAA4B,EAE5B,0BAA0B,EAC1B,2BAA2B,GAC5B,MAAM,sDAAsD,CAAC;AAE9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEzD,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/spinner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAkB,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/esm/spinner/spinner.js

@@ -4,13 +4,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { attr } from '@microsoft/fast-element';
-import { BaseProgress } from '../progress-bar/base-progress.js';
+import { attr, FASTElement } from '@microsoft/fast-element';
 /**
  * The base class used for constructing a fluent-spinner custom element
  * @public
  */
-export class Spinner extends BaseProgress {
+export class Spinner extends FASTElement {
+    constructor() {
+        super();
+        /**
+         * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+         *
+         * @internal
+         */
+        this.elementInternals = this.attachInternals();
+        this.elementInternals.role = 'progressbar';
+    }
 }
 __decorate([
     attr

package/dist/esm/spinner/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/spinner/spinner.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAYhE;;;GAGG;AACH,MAAM,OAAO,OAAQ,SAAQ,YAAY;CAqBxC;AAXC;IADC,IAAI;qCACqB;AAU1B;IADC,IAAI;2CACiC"}
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/spinner/spinner.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;GAGG;AACH,MAAM,OAAO,OAAQ,SAAQ,WAAW;IA6BtC;QACE,KAAK,EAAE,CAAC;QA7BV;;;;WAIG;QACO,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAyBpE,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,aAAa,CAAC;IAC7C,CAAC;CACF;AAhBC;IADC,IAAI;qCACqB;AAU1B;IADC,IAAI;2CACiC"}

package/dist/esm/spinner/spinner.styles.js

@@ -50,21 +50,7 @@ export const styles = css `
     stroke: rgba(255, 255, 255, 0.2);
   }
 
-  .determinate {
-    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;
-  }
-
-  :host([appearance='inverted']) .determinite {
-    stroke: ${colorNeutralStrokeOnBrand2};
-  }
-
-  .indeterminate-indicator-1 {
+  .indicator {
     stroke: ${colorBrandStroke1};
     fill: none;
     stroke-width: 1.5px;
@@ -75,7 +61,7 @@ export const styles = css `
     animation: spin-infinite 3s cubic-bezier(0.53, 0.21, 0.29, 0.67) infinite;
   }
 
-  :host([appearance='inverted']) .indeterminate-indicator-1 {
+  :host([appearance='inverted']) .indicator {
     stroke: ${colorNeutralStrokeOnBrand2};
   }
 

package/dist/esm/spinner/spinner.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.styles.js","sourceRoot":"","sources":["../../../src/spinner/spinner.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAE7G,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAwCL,iBAAiB;;;;;;;;;cASjB,iBAAiB;;;;;;;;;;cAUjB,0BAA0B;;;;cAI1B,iBAAiB;;;;;;;;;;;cAWjB,0BAA0B;;;;;;;;;;;;;;;;;CAiBvC,CAAC"}
+{"version":3,"file":"spinner.styles.js","sourceRoot":"","sources":["../../../src/spinner/spinner.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAE7G,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAwCL,iBAAiB;;;;;;;;;cASjB,iBAAiB;;;;;;;;;;;cAWjB,0BAA0B;;;;;;;;;;;;;;;;;CAiBvC,CAAC"}

package/dist/esm/spinner/spinner.template.js

@@ -1,48 +1,9 @@
-import { html, when } from '@microsoft/fast-element';
-import { staticallyCompose } from '../utils/index.js';
-const progressSegments = 44;
-export function progressRingTemplate(options = {}) {
-    return html `
-    <template
-      role="progressbar"
-      aria-valuenow="${x => x.value}"
-      aria-valuemin="${x => x.min}"
-      aria-valuemax="${x => x.max}"
-    >
-      ${when(x => typeof x.value === 'number', html `
-          <svg class="progress" part="progress" viewBox="0 0 16 16" slot="determinate">
-            <circle class="background" part="background" cx="8px" cy="8px" r="7px"></circle>
-            <circle
-              class="determinate"
-              part="determinate"
-              style="stroke-dasharray: ${x => (progressSegments * x.percentComplete) / 100}px ${progressSegments}px"
-              cx="8px"
-              cy="8px"
-              r="7px"
-            ></circle>
-          </svg>
-        `, html ` <slot name="indeterminate"> ${staticallyCompose(options.indeterminateIndicator)} </slot> `)}
-    </template>
-  `;
-}
-export const template = progressRingTemplate({
-    indeterminateIndicator: `
-    <svg class="progress" part="progress" viewBox="0 0 16 16">
-        <circle
-            class="background"
-            part="background"
-            cx="8px"
-            cy="8px"
-            r="7px"
-        ></circle>
-        <circle
-            class="indeterminate-indicator-1"
-            part="indeterminate-indicator-1"
-            cx="8px"
-            cy="8px"
-            r="7px"
-        ></circle>
-    </svg>
-  `,
-});
+import { html } from '@microsoft/fast-element';
+export const template = 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>
+`;
 //# sourceMappingURL=spinner.template.js.map

package/dist/esm/spinner/spinner.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.template.js","sourceRoot":"","sources":["../../../src/spinner/spinner.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAErD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAGtD,MAAM,gBAAgB,GAAW,EAAE,CAAC;AAEpC,MAAM,UAAU,oBAAoB,CAAoB,UAA0B,EAAE;IAClF,OAAO,IAAI,CAAG;;;uBAGO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;uBACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG;uBACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG;;QAEzB,IAAI,CACJ,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,KAAK,KAAK,QAAQ,EAChC,IAAI,CAAG;;;;;;yCAM0B,CAAC,CAAC,EAAE,CAAC,CAAC,gBAAgB,GAAG,CAAC,CAAC,eAAe,CAAC,GAAG,GAAG,MAAM,gBAAgB;;;;;;SAMvG,EACD,IAAI,CAAG,gCAAgC,iBAAiB,CAAC,OAAO,CAAC,sBAAsB,CAAC,WAAW,CACpG;;GAEJ,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAiC,oBAAoB,CAAC;IACzE,sBAAsB,EAAE;;;;;;;;;;;;;;;;;GAiBvB;CACF,CAAC,CAAC"}
+{"version":3,"file":"spinner.template.js","sourceRoot":"","sources":["../../../src/spinner/spinner.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAS;;;;;;CAMpC,CAAC"}

package/dist/fluent-web-components.api.json

@@ -25286,8 +25286,8 @@
             },
             {
               "kind": "Reference",
-              "text": "BaseProgress",
-              "canonicalReference": "@fluentui/web-components!~BaseProgress:class"
+              "text": "FASTElement",
+              "canonicalReference": "@microsoft/fast-element!FASTElement:interface"
             },
             {
               "kind": "Content",
@@ -25298,6 +25298,21 @@
           "name": "Spinner",
           "preserveMemberOrder": false,
           "members": [
+            {
+              "kind": "Constructor",
+              "canonicalReference": "@fluentui/web-components!Spinner:constructor(1)",
+              "docComment": "/**\n * Constructs a new instance of the `Spinner` class\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "constructor();"
+                }
+              ],
+              "releaseTag": "Public",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": []
+            },
             {
               "kind": "Property",
               "canonicalReference": "@fluentui/web-components!Spinner#appearance:member",
@@ -25466,49 +25481,6 @@
             "endIndex": 6
           }
         },
-        {
-          "kind": "TypeAlias",
-          "canonicalReference": "@fluentui/web-components!SpinnerOptions:type",
-          "docComment": "/**\n * Progress configuration options\n *\n * @public\n */\n",
-          "excerptTokens": [
-            {
-              "kind": "Content",
-              "text": "export declare type SpinnerOptions = "
-            },
-            {
-              "kind": "Content",
-              "text": "{\n    indeterminateIndicator?: "
-            },
-            {
-              "kind": "Reference",
-              "text": "StaticallyComposableHTML",
-              "canonicalReference": "@fluentui/web-components!~StaticallyComposableHTML:type"
-            },
-            {
-              "kind": "Content",
-              "text": "<"
-            },
-            {
-              "kind": "Reference",
-              "text": "Spinner",
-              "canonicalReference": "@fluentui/web-components!Spinner:class"
-            },
-            {
-              "kind": "Content",
-              "text": ">;\n}"
-            },
-            {
-              "kind": "Content",
-              "text": ";"
-            }
-          ],
-          "releaseTag": "Public",
-          "name": "SpinnerOptions",
-          "typeTokenRange": {
-            "startIndex": 1,
-            "endIndex": 6
-          }
-        },
         {
           "kind": "TypeAlias",
           "canonicalReference": "@fluentui/web-components!SpinnerSize:type",
@@ -25606,10 +25578,14 @@
               "kind": "Content",
               "text": "template: "
             },
+            {
+              "kind": "Content",
+              "text": "import(\"@microsoft/fast-element\")."
+            },
             {
               "kind": "Reference",
-              "text": "ElementViewTemplate",
-              "canonicalReference": "@microsoft/fast-element!ElementViewTemplate:interface"
+              "text": "ViewTemplate",
+              "canonicalReference": "@microsoft/fast-element!ViewTemplate:class"
             },
             {
               "kind": "Content",
@@ -25622,7 +25598,7 @@
             },
             {
               "kind": "Content",
-              "text": ">"
+              "text": ", any>"
             }
           ],
           "isReadonly": true,
@@ -25630,7 +25606,7 @@
           "name": "SpinnerTemplate",
           "variableTypeTokenRange": {
             "startIndex": 1,
-            "endIndex": 5
+            "endIndex": 6
           }
         },
         {

package/dist/web-components.d.ts

@@ -11,6 +11,7 @@ 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';
 
 /**
  * An Accordion Custom HTML Element
@@ -4912,7 +4913,13 @@ export declare const spacingVerticalXXXL = "var(--spacingVerticalXXXL)";
  * The base class used for constructing a fluent-spinner custom element
  * @public
  */
-export declare class Spinner extends BaseProgress {
+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
+     */
+    protected elementInternals: ElementInternals;
     /**
      * The size of the spinner
      *
@@ -4930,6 +4937,7 @@ export declare class Spinner extends BaseProgress {
      * HTML Attribute: appearance
      */
     appearance?: SpinnerAppearance;
+    constructor();
 }
 
 /**
@@ -4954,14 +4962,6 @@ export declare type SpinnerAppearance = ValuesOf<typeof SpinnerAppearance>;
  */
 export declare const SpinnerDefinition: FASTElementDefinition<typeof Spinner>;
 
-/**
- * Progress configuration options
- * @public
- */
-export declare type SpinnerOptions = {
-    indeterminateIndicator?: StaticallyComposableHTML<Spinner>;
-};
-
 /**
  * SpinnerSize constants
  * @public
@@ -4984,7 +4984,7 @@ export declare type SpinnerSize = ValuesOf<typeof SpinnerSize>;
 
 export declare const SpinnerStyles: ElementStyles;
 
-export declare const SpinnerTemplate: ElementViewTemplate<Spinner>;
+export declare const SpinnerTemplate: ViewTemplate<Spinner, any>;
 
 /**
  * A mixin class implementing start and end slots.