@fluentui/web-components 2.5.12 → 3.0.0-alpha.10

package/dist/esm/divider/index.js

@@ -1,26 +1,6 @@
-import { Divider, dividerTemplate as template } from '@microsoft/fast-foundation';
-import { dividerStyles as styles } from './divider.styles';
-/**
- * The Fluent Divider Element. Implements {@link @microsoft/fast-foundation#Divider},
- * {@link @microsoft/fast-foundation#dividerTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-divider\>
- */
-export const fluentDivider = Divider.compose({
-    baseName: 'divider',
-    template,
-    styles,
-});
-/**
- * Styles for Divider
- * @public
- */
-export const dividerStyles = styles;
-/**
- * Base class for Fluent Divider
- * @public
- */
-export { Divider };
+export * from './divider.js';
+export * from './divider.options.js';
+export { definition as DividerDefinition } from './divider.definition.js';
+export { template as DividerTemplate } from './divider.template.js';
+export { styles as DividerStyles } from './divider.styles.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/divider/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/esm/fluent-design-system.js

@@ -1,11 +1,6 @@
-import { DesignSystem } from '@microsoft/fast-foundation';
-/**
- * Provides a design system for the specified element either by returning one that was
- * already created for that element or creating one.
- * @param element - The element to root the design system at. By default, this is the body.
- * @returns A Fluent Design System
- * @public
- */
-export function provideFluentDesignSystem(element) {
-    return DesignSystem.getOrCreate(element).withPrefix('fluent');
-}
+export const FluentDesignSystem = Object.freeze({
+    prefix: 'fluent',
+    shadowRootMode: 'open',
+    registry: customElements,
+});
+//# sourceMappingURL=fluent-design-system.js.map

package/dist/esm/fluent-design-system.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fluent-design-system.js","sourceRoot":"","sources":["../../src/fluent-design-system.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC;IAC9C,MAAM,EAAE,QAAQ;IAChB,cAAc,EAAE,MAAM;IACtB,QAAQ,EAAE,cAAc;CACzB,CAAC,CAAC"}

package/dist/esm/image/define.js

@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './image.definition.js';
+definition.define(FluentDesignSystem.registry);
+//# sourceMappingURL=define.js.map

package/dist/esm/image/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/image/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/image/image.definition.js

@@ -0,0 +1,17 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { Image } from './image.js';
+import { template } from './image.template.js';
+import { styles } from './image.styles.js';
+/**
+ * The Fluent Image Element
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-image\>
+ */
+export const definition = Image.compose({
+    name: `${FluentDesignSystem.prefix}-image`,
+    template,
+    styles,
+});
+//# sourceMappingURL=image.definition.js.map

package/dist/esm/image/image.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.definition.js","sourceRoot":"","sources":["../../../src/image/image.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC;IACtC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,QAAQ;IAC1C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}

package/dist/esm/image/image.js

@@ -0,0 +1,24 @@
+import { __decorate } from "tslib";
+import { attr, FASTElement } from '@microsoft/fast-element';
+/**
+ * The base class used for constucting a fluent image custom element
+ * @public
+ */
+export class Image extends FASTElement {
+}
+__decorate([
+    attr({ mode: 'boolean' })
+], Image.prototype, "block", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], Image.prototype, "bordered", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], Image.prototype, "shadow", void 0);
+__decorate([
+    attr
+], Image.prototype, "fit", void 0);
+__decorate([
+    attr
+], Image.prototype, "shape", void 0);
+//# sourceMappingURL=image.js.map

package/dist/esm/image/image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.js","sourceRoot":"","sources":["../../../src/image/image.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;GAGG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;CA8CrC;AArCC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACH;AASvB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACA;AAS1B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;qCACF;AASxB;IADC,IAAI;kCACiB;AAStB;IADC,IAAI;oCACqB"}

package/dist/esm/image/image.options.js

@@ -0,0 +1,21 @@
+/**
+ * Image fit
+ * @public
+ */
+export const ImageFit = {
+    none: 'none',
+    center: 'center',
+    contain: 'contain',
+    cover: 'cover',
+    default: 'default',
+};
+/**
+ * Image shape
+ * @public
+ */
+export const ImageShape = {
+    circular: 'circular',
+    rounded: 'rounded',
+    square: 'square',
+};
+//# sourceMappingURL=image.options.js.map

package/dist/esm/image/image.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.options.js","sourceRoot":"","sources":["../../../src/image/image.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;CACV,CAAC;AAOX;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC"}

package/dist/esm/image/image.styles.js

@@ -0,0 +1,52 @@
+import { css } from '@microsoft/fast-element';
+import { borderRadiusCircular, colorNeutralStroke2, shadow4, strokeWidthThin } from '../theme/design-tokens.js';
+/** Image styles
+ *
+ * @public
+ */
+export const styles = css `
+  :host ::slotted(img) {
+    box-sizing: border-box;
+    min-height: 8px;
+    min-width: 8px;
+    display: inline-block;
+  }
+  :host([block]) ::slotted(img) {
+    width: 100%;
+    height: auto;
+  }
+  :host([bordered]) ::slotted(img) {
+    border: ${strokeWidthThin} solid ${colorNeutralStroke2};
+  }
+  :host([fit='none']) ::slotted(img) {
+    object-fit: none;
+    object-position: top left;
+    height: 100%;
+    width: 100%;
+  }
+  :host([fit='center']) ::slotted(img) {
+    object-fit: none;
+    object-position: center;
+    height: 100%;
+    width: 100%;
+  }
+  :host([fit='contain']) ::slotted(img) {
+    object-fit: contain;
+    object-position: center;
+    height: 100%;
+    width: 100%;
+  }
+  :host([fit='cover']) ::slotted(img) {
+    object-fit: cover;
+    object-position: center;
+    height: 100%;
+    width: 100%;
+  }
+  :host([shadow]) ::slotted(img) {
+    box-shadow: ${shadow4};
+  }
+  :host([shape='circular']) ::slotted(img) {
+    border-radius: ${borderRadiusCircular};
+  }
+`;
+//# sourceMappingURL=image.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image.styles.js","sourceRoot":"","sources":["../../../src/image/image.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEhH;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;cAYX,eAAe,UAAU,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA2BxC,OAAO;;;qBAGJ,oBAAoB;;CAExC,CAAC"}

package/dist/esm/image/image.template.js

@@ -0,0 +1,7 @@
+import { html } from '@microsoft/fast-element';
+/**
+ * Template for the Image component
+ * @public
+ */
+export const template = html `<slot></slot>`;
+//# sourceMappingURL=image.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image.template.js","sourceRoot":"","sources":["../../../src/image/image.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpE;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA+B,IAAI,CAAO,eAAe,CAAC"}

package/dist/esm/image/index.js

@@ -0,0 +1,6 @@
+export * from './image.js';
+export * from './image.options.js';
+export { definition as ImageDefinition } from './image.definition.js';
+export { template as ImageTemplate } from './image.template.js';
+export { styles as ImageStyles } from './image.styles.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/image/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/esm/index-rollup.js

@@ -1,12 +1,2 @@
-// TODO: Is exporting Foundation still necessary with the updated API's?
-// export * from "@microsoft/fast-element";
-import { allComponents } from './custom-elements';
-import { provideFluentDesignSystem } from './fluent-design-system';
-export * from './index';
-/**
- * The global Fluent Design System.
- * @remarks
- * Only available if the components are added through a script tag
- * rather than a module/build system.
- */
-export const FluentDesignSystem = provideFluentDesignSystem().register(allComponents);
+export * from './index.js';
+//# sourceMappingURL=index-rollup.js.map

package/dist/esm/index-rollup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-rollup.js","sourceRoot":"","sources":["../../src/index-rollup.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/esm/index.js

@@ -1,49 +1,13 @@
-/**
- * Export all custom element definitions.
- */
-export * from './custom-elements';
-export * from './fluent-design-system';
-export * from './accordion/';
-export * from './anchor/';
-export * from './anchored-region';
-export * from './badge/';
-export * from './breadcrumb';
-export * from './breadcrumb-item';
-export * from './button/';
-export * from './card/';
-export * from './checkbox/';
-export * from './combobox/';
-export * from './data-grid';
-export * from './design-system-provider/';
-export * from './dialog/';
-export * from './divider/';
-export * from './flipper/';
-export * from './horizontal-scroll/';
-export * from './listbox';
-export * from './listbox-option';
-export * from './menu/';
-export * from './menu-item/';
-export * from './number-field/';
-export * from './progress/';
-export * from './radio/';
-export * from './radio-group/';
-export * from './search/';
-export * from './select';
-export * from './skeleton/';
-export * from './slider/';
-export * from './slider-label/';
-export * from './switch/';
-export * from './tabs/';
-export * from './text-area/';
-export * from './text-field/';
-export * from './toolbar';
-export * from './tooltip';
-export * from './tree-item/';
-export * from './tree-view/';
-// export styles and utils
-export * from './design-tokens';
-export * from './styles';
-export { PaletteRGB } from './color/palette';
-export { SwatchRGB } from './color/swatch';
-export { isDark } from './color/utilities/is-dark';
-export { StandardLuminance } from './color/utilities/base-layer-luminance';
+export * from './accordion/index.js';
+export * from './accordion-item/index.js';
+export * from './avatar/index.js';
+export * from './badge/index.js';
+export * from './counter-badge/index.js';
+export * from './divider/index.js';
+export * from './image/index.js';
+export * from './progress-bar/index.js';
+export * from './spinner/index.js';
+export * from './switch/index.js';
+export * from './text/index.js';
+export * from './theme/index.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,kBAAkB,CAAC"}

package/dist/esm/progress-bar/define.js

@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './progress-bar.definition.js';
+definition.define(FluentDesignSystem.registry);
+//# sourceMappingURL=define.js.map

package/dist/esm/progress-bar/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/progress-bar/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAE1D,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/progress-bar/index.js

@@ -0,0 +1,6 @@
+export * from './progress-bar.js';
+export * from './progress-bar.options.js';
+export { definition as ProgressBarDefinition } from './progress-bar.definition.js';
+export { styles as ProgressBarStyles } from './progress-bar.styles.js';
+export { template as ProgressBarTemplate } from './progress-bar.template.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/progress-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/progress-bar/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,UAAU,IAAI,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACnF,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,QAAQ,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/esm/progress-bar/progress-bar.definition.js

@@ -0,0 +1,18 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { ProgressBar } from './progress-bar.js';
+import { styles } from './progress-bar.styles.js';
+import { template } from './progress-bar.template.js';
+/**
+ * The Fluent ProgressBar Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-progress-bar\>
+ */
+export const definition = ProgressBar.compose({
+    name: `${FluentDesignSystem.prefix}-progress-bar`,
+    template,
+    styles,
+});
+//# sourceMappingURL=progress-bar.definition.js.map

package/dist/esm/progress-bar/progress-bar.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.definition.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,WAAW,CAAC,OAAO,CAAC;IAC5C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,eAAe;IACjD,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}

package/dist/esm/progress-bar/progress-bar.js

@@ -0,0 +1,29 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { FASTProgress } from '@microsoft/fast-foundation';
+/**
+ * The base class used for constructing a fluent-progress-bar custom element
+ * @public
+ */
+export class ProgressBar extends FASTProgress {
+    constructor() {
+        super(...arguments);
+        /**
+         * The validation state of the progress bar
+         * @public
+         * @remarks
+         * HTML Attribute: validation-state
+         */
+        this.validationState = null;
+    }
+}
+__decorate([
+    attr
+], ProgressBar.prototype, "thickness", void 0);
+__decorate([
+    attr
+], ProgressBar.prototype, "shape", void 0);
+__decorate([
+    attr({ attribute: 'validation-state' })
+], ProgressBar.prototype, "validationState", void 0);
+//# sourceMappingURL=progress-bar.js.map

package/dist/esm/progress-bar/progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG1D;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,YAAY;IAA7C;;QAoBE;;;;;WAKG;QAEI,oBAAe,GAAsC,IAAI,CAAC;IACnE,CAAC;CAAA;AAnBC;IADC,IAAI;8CACmC;AASxC;IADC,IAAI;0CAC2B;AAShC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;oDACyB"}

package/dist/esm/progress-bar/progress-bar.options.js

@@ -0,0 +1,26 @@
+/**
+ * ProgressBarThickness Constants
+ * @public
+ */
+export const ProgressBarThickness = {
+    medium: 'medium',
+    large: 'large',
+};
+/**
+ * ProgressBarShape Constants
+ * @public
+ */
+export const ProgressBarShape = {
+    rounded: 'rounded',
+    square: 'square',
+};
+/**
+ * ProgressBarValidationState Constants
+ * @public
+ */
+export const ProgressBarValidationState = {
+    success: 'success',
+    warning: 'warning',
+    error: 'error',
+};
+//# sourceMappingURL=progress-bar.options.js.map

package/dist/esm/progress-bar/progress-bar.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.options.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACxC,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;CACN,CAAC"}

package/dist/esm/progress-bar/progress-bar.styles.js

@@ -0,0 +1,156 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { borderRadiusMedium, colorBrandBackground2, colorCompoundBrandBackground, colorNeutralBackground6, colorPaletteDarkOrangeBackground2, colorPaletteDarkOrangeBackground3, colorPaletteGreenBackground2, colorPaletteGreenBackground3, colorPaletteRedBackground2, colorPaletteRedBackground3, } from '../theme/design-tokens.js';
+/** Text styles
+ * @public
+ */
+export const styles = css `
+  ${display('flex')}
+
+  :host {
+    align-items: center;
+    height: 2px;
+    overflow-x: hidden;
+    border-radius: ${borderRadiusMedium};
+  }
+
+  :host([thickness='large']),
+  :host([thickness='large']) .progress,
+  :host([thickness='large']) .determinate {
+    height: 4px;
+  }
+
+  :host([shape='square']),
+  :host([shape='square']) .progress,
+  :host([shape='square']) .determinate {
+    border-radius: 0;
+  }
+
+  :host([validation-state='error']) .determinate {
+    background-color: ${colorPaletteRedBackground3};
+  }
+
+  :host([validation-state='error']) .indeterminate-indicator-1,
+  :host([validation-state='error']) .indeterminate-indicator-2 {
+    background: linear-gradient(
+      to right,
+      ${colorPaletteRedBackground2} 0%,
+      ${colorPaletteRedBackground3} 50%,
+      ${colorPaletteRedBackground2}
+    );
+  }
+
+  :host([validation-state='warning']) .determinate {
+    background-color: ${colorPaletteDarkOrangeBackground3};
+  }
+
+  :host([validation-state='warning']) .indeterminate-indicator-1,
+  :host([validation-state='warning']) .indeterminate-indicator-2 {
+    background: linear-gradient(
+      to right,
+      ${colorPaletteDarkOrangeBackground2} 0%,
+      ${colorPaletteDarkOrangeBackground3} 50%,
+      ${colorPaletteDarkOrangeBackground2}
+    );
+  }
+
+  :host([validation-state='success']) .determinate {
+    background-color: ${colorPaletteGreenBackground3};
+  }
+
+  :host([validation-state='success']) .indeterminate-indicator-1,
+  :host([validation-state='success']) .indeterminate-indicator-2 {
+    background: linear-gradient(
+      to right,
+      ${colorPaletteGreenBackground2} 0%,
+      ${colorPaletteGreenBackground3} 50%,
+      ${colorPaletteGreenBackground2}
+    );
+  }
+
+  .progress {
+    background-color: ${colorNeutralBackground6};
+    border-radius: ${borderRadiusMedium};
+    width: 100%;
+    height: 2px;
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+
+  .determinate {
+    background-color: ${colorCompoundBrandBackground};
+    border-radius: ${borderRadiusMedium};
+    height: 2px;
+    transition: all 0.2s ease-in-out;
+    display: flex;
+  }
+
+  .indeterminate-indicator-1 {
+    position: absolute;
+    opacity: 0;
+    height: 100%;
+    background: linear-gradient(
+      to right,
+      ${colorBrandBackground2} 0%,
+      ${colorCompoundBrandBackground} 50%,
+      ${colorBrandBackground2}
+    );
+    border-radius: ${borderRadiusMedium};
+    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+    width: 40%;
+    animation: indeterminate-1 3s infinite;
+  }
+
+  .indeterminate-indicator-2 {
+    position: absolute;
+    opacity: 0;
+    height: 100%;
+    background: linear-gradient(
+      to right,
+      ${colorBrandBackground2} 0%,
+      ${colorCompoundBrandBackground} 50%,
+      ${colorBrandBackground2}
+    );
+    border-radius: ${borderRadiusMedium};
+    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+    width: 60%;
+    animation: indeterminate-2 3s infinite;
+  }
+
+  @keyframes indeterminate-1 {
+    0% {
+      opacity: 1;
+      transform: translateX(-100%);
+    }
+    70% {
+      opacity: 1;
+      transform: translateX(300%);
+    }
+    70.01% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 0;
+      transform: translateX(300%);
+    }
+  }
+  @keyframes indeterminate-2 {
+    0% {
+      opacity: 0;
+      transform: translateX(-150%);
+    }
+    29.99% {
+      opacity: 0;
+    }
+    30% {
+      opacity: 1;
+      transform: translateX(-150%);
+    }
+    100% {
+      transform: translateX(166.66%);
+      opacity: 1;
+    }
+  }
+`;
+//# sourceMappingURL=progress-bar.styles.js.map

package/dist/esm/progress-bar/progress-bar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.styles.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,4BAA4B,EAC5B,uBAAuB,EACvB,iCAAiC,EACjC,iCAAiC,EACjC,4BAA4B,EAC5B,4BAA4B,EAC5B,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;qBAME,kBAAkB;;;;;;;;;;;;;;;;wBAgBf,0BAA0B;;;;;;;QAO1C,0BAA0B;QAC1B,0BAA0B;QAC1B,0BAA0B;;;;;wBAKV,iCAAiC;;;;;;;QAOjD,iCAAiC;QACjC,iCAAiC;QACjC,iCAAiC;;;;;wBAKjB,4BAA4B;;;;;;;QAO5C,4BAA4B;QAC5B,4BAA4B;QAC5B,4BAA4B;;;;;wBAKZ,uBAAuB;qBAC1B,kBAAkB;;;;;;;;;wBASf,4BAA4B;qBAC/B,kBAAkB;;;;;;;;;;;;QAY/B,qBAAqB;QACrB,4BAA4B;QAC5B,qBAAqB;;qBAER,kBAAkB;;;;;;;;;;;;QAY/B,qBAAqB;QACrB,4BAA4B;QAC5B,qBAAqB;;qBAER,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCtC,CAAC"}

package/dist/esm/progress-bar/progress-bar.template.js

@@ -0,0 +1,6 @@
+import { progressTemplate } from '@microsoft/fast-foundation';
+export const template = progressTemplate({
+    indeterminateIndicator1: `<span class="indeterminate-indicator-1" part="indeterminate-indicator-1></span>`,
+    indeterminateIndicator2: `<span class="indeterminate-indicator-2" part="indeterminate-indicator-2"></span>`,
+});
+//# sourceMappingURL=progress-bar.template.js.map

package/dist/esm/progress-bar/progress-bar.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.template.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAG9D,MAAM,CAAC,MAAM,QAAQ,GAAqC,gBAAgB,CAAC;IACzE,uBAAuB,EAAE,iFAAiF;IAC1G,uBAAuB,EAAE,kFAAkF;CAC5G,CAAC,CAAC"}

package/dist/esm/spinner/define.js

@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './spinner.definition.js';
+definition.define(FluentDesignSystem.registry);
+//# sourceMappingURL=define.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/spinner/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/spinner/index.js

@@ -0,0 +1,6 @@
+export * from './spinner.js';
+export * from './spinner.options.js';
+export { template as SpinnerTemplate } from './spinner.template.js';
+export { styles as SpinnerStyles } from './spinner.styles.js';
+export { definition as SpinnerDefinition } from './spinner.definition.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/spinner/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,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.definition.js

@@ -0,0 +1,19 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { Spinner } from './spinner.js';
+import { styles } from './spinner.styles.js';
+import { template } from './spinner.template.js';
+/**
+ * The Fluent Spinner Element. Implements {@link @microsoft/fast-foundation#ProgressRing },
+ * {@link @microsoft/fast-foundation#progress-ringTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-spinner\>
+ */
+export const definition = Spinner.compose({
+    name: `${FluentDesignSystem.prefix}-spinner`,
+    template,
+    styles,
+});
+//# sourceMappingURL=spinner.definition.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.definition.js","sourceRoot":"","sources":["../../../src/spinner/spinner.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC;IACxC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,UAAU;IAC5C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}