@fluentui/web-components 3.0.0-alpha.2 → 3.0.0-alpha.3

package/dist/dts/index.d.ts

@@ -1,5 +1,6 @@
 export * from './badge/index.js';
 export * from './counter-badge/index.js';
 export * from './progress-bar/index.js';
+export * from './spinner/index.js';
 export * from './text/index.js';
 export * from './theme/index.js';

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+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';

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

@@ -0,0 +1,25 @@
+import { FASTProgressRing } from '@microsoft/fast-foundation';
+import type { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
+/**
+ * The base class used for constructing a fluent-spinner custom element
+ * @public
+ */
+export declare class Spinner extends FASTProgressRing {
+    /**
+     * The size of the spinner
+     *
+     * @public
+     * @default 'medium'
+     * @remarks
+     * HTML Attribute: size
+     */
+    size: SpinnerSize;
+    /**
+     * The appearance of the spinner
+     * @public
+     * @default 'primary'
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance: SpinnerAppearance;
+}

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

@@ -0,0 +1,11 @@
+import { Spinner } from './spinner.js';
+/**
+ * The Fluent Spinner Element. Implements {@link @microsoft/fast-foundation#ProgressRing },
+ * {@link @microsoft/fast-foundation#progress-ringTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-spinner\>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Spinner>;

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

@@ -0,0 +1,32 @@
+import { ValuesOf } from '@microsoft/fast-foundation';
+/**
+ * SpinnerAppearance constants
+ * @public
+ */
+export declare const SpinnerAppearance: {
+    readonly primary: "primary";
+    readonly inverted: "inverted";
+};
+/**
+ * A Spinner's appearance can be either primary or inverted
+ * @public
+ */
+export declare type SpinnerAppearance = ValuesOf<typeof SpinnerAppearance>;
+/**
+ * SpinnerSize constants
+ * @public
+ */
+export declare const SpinnerSize: {
+    readonly tiny: "tiny";
+    readonly extraSmall: "extra-small";
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly extraLarge: "extra-large";
+    readonly huge: "huge";
+};
+/**
+ * A Spinner's size can be either small, tiny, extra-small, medium, large, extra-large, or huge
+ * @public
+ */
+export declare type SpinnerSize = ValuesOf<typeof SpinnerSize>;

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

@@ -0,0 +1,8 @@
+import type { Args, Meta } from '@storybook/html';
+import './define.js';
+declare type SpinnerStoryArgs = Args;
+declare type SpinnerStoryMeta = Meta<SpinnerStoryArgs>;
+declare const _default: SpinnerStoryMeta;
+export default _default;
+export declare const Spinner: any;
+export declare const SpinnerInverted: (args: Args) => Element | DocumentFragment | null;

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

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -0,0 +1,3 @@
+import type { ElementViewTemplate } from '@microsoft/fast-element';
+import { Spinner } from './spinner.js';
+export declare const template: ElementViewTemplate<Spinner>;

package/dist/esm/index.js

@@ -1,5 +1,6 @@
 export * from './badge/index.js';
 export * from './counter-badge/index.js';
 export * from './progress-bar/index.js';
+export * from './spinner/index.js';
 export * from './text/index.js';
 export * from './theme/index.js';

package/dist/esm/spinner/define.js

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

package/dist/esm/spinner/index.js

@@ -0,0 +1,5 @@
+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';

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

@@ -0,0 +1,18 @@
+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,
+});

package/dist/esm/spinner/spinner.js

@@ -0,0 +1,15 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { FASTProgressRing } from '@microsoft/fast-foundation';
+/**
+ * The base class used for constructing a fluent-spinner custom element
+ * @public
+ */
+export class Spinner extends FASTProgressRing {
+}
+__decorate([
+    attr
+], Spinner.prototype, "size", void 0);
+__decorate([
+    attr
+], Spinner.prototype, "appearance", void 0);

package/dist/esm/spinner/spinner.options.js

@@ -0,0 +1,21 @@
+/**
+ * SpinnerAppearance constants
+ * @public
+ */
+export const SpinnerAppearance = {
+    primary: 'primary',
+    inverted: 'inverted',
+};
+/**
+ * SpinnerSize constants
+ * @public
+ */
+export const SpinnerSize = {
+    tiny: 'tiny',
+    extraSmall: 'extra-small',
+    small: 'small',
+    medium: 'medium',
+    large: 'large',
+    extraLarge: 'extra-large',
+    huge: 'huge',
+};

package/dist/esm/spinner/spinner.stories.js

@@ -0,0 +1,45 @@
+import { html } from '@microsoft/fast-element';
+import { renderComponent } from '../__test__/helpers.js';
+import { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
+import './define.js';
+const storyTemplate = html `
+  <fluent-spinner appearance=${x => x.appearance} size=${x => x.size}></fluent-spinner>
+`;
+export default {
+    title: 'Components/Spinner',
+    argTypes: {
+        appearance: {
+            description: 'The appearance of the spinner',
+            table: {
+                defaultValue: { summary: 'primary' },
+            },
+            control: {
+                type: 'select',
+                options: Object.values(SpinnerAppearance),
+            },
+            defaultValue: 'primary',
+        },
+        size: {
+            description: 'The size of the spinner',
+            table: {
+                defaultValue: { summary: 'medium' },
+            },
+            control: {
+                type: 'select',
+                options: Object.values(SpinnerSize),
+            },
+            defaultValue: 'medium',
+        },
+    },
+    parameters: {
+        status: {
+            type: 'experimental',
+        },
+    },
+};
+export const Spinner = renderComponent(storyTemplate).bind({});
+export const SpinnerInverted = renderComponent(html `
+  <div style="background-color: #0f6cbd; padding: 20px;">
+    <fluent-spinner appearance="inverted" size="medium"></fluent-spinner>
+  </div>
+`);

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

@@ -0,0 +1,95 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { colorBrandStroke1, colorBrandStroke2, colorNeutralStrokeOnBrand2 } from '../theme/design-tokens.js';
+export const styles = css `
+  ${display('flex')}
+
+  :host {
+    display: flex;
+    align-items: center;
+    height: 32px;
+    width: 32px;
+  }
+  :host([size='tiny']) {
+    height: 20px;
+    width: 20px;
+  }
+  :host([size='extra-small']) {
+    height: 24px;
+    width: 24px;
+  }
+  :host([size='small']) {
+    height: 28px;
+    width: 28px;
+  }
+  :host([size='large']) {
+    height: 36px;
+    width: 36px;
+  }
+  :host([size='extra-large']) {
+    height: 40px;
+    width: 40px;
+  }
+  :host([size='huge']) {
+    height: 44px;
+    width: 44px;
+  }
+  .progress {
+    height: 100%;
+    width: 100%;
+  }
+
+  .background {
+    fill: none;
+    stroke: ${colorBrandStroke2};
+    stroke-width: 1.5px;
+  }
+
+  :host([appearance='inverted']) .background {
+    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 {
+    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([appearance='inverted']) .indeterminate-indicator-1 {
+    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);
+    }
+  }
+`;

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

@@ -0,0 +1,21 @@
+import { progressRingTemplate } from '@microsoft/fast-foundation';
+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>
+  `,
+});

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

@@ -13434,6 +13434,321 @@
             "endIndex": 4
           }
         },
+        {
+          "kind": "Class",
+          "canonicalReference": "@fluentui/web-components!Spinner:class",
+          "docComment": "/**\n * The base class used for constructing a fluent-spinner custom element\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare class Spinner extends "
+            },
+            {
+              "kind": "Reference",
+              "text": "FASTProgressRing",
+              "canonicalReference": "@microsoft/fast-foundation!FASTProgressRing:class"
+            },
+            {
+              "kind": "Content",
+              "text": " "
+            }
+          ],
+          "releaseTag": "Public",
+          "name": "Spinner",
+          "preserveMemberOrder": false,
+          "members": [
+            {
+              "kind": "Property",
+              "canonicalReference": "@fluentui/web-components!Spinner#appearance:member",
+              "docComment": "/**\n * The appearance of the spinner\n *\n * @default 'primary'\n *\n * @remarks\n *\n * HTML Attribute: appearance\n *\n * @public\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "appearance: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "SpinnerAppearance",
+                  "canonicalReference": "@fluentui/web-components!SpinnerAppearance:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "appearance",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false,
+              "isProtected": false
+            },
+            {
+              "kind": "Property",
+              "canonicalReference": "@fluentui/web-components!Spinner#size:member",
+              "docComment": "/**\n * The size of the spinner\n *\n * @default 'medium'\n *\n * @remarks\n *\n * HTML Attribute: size\n *\n * @public\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "size: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "SpinnerSize",
+                  "canonicalReference": "@fluentui/web-components!SpinnerSize:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "size",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false,
+              "isProtected": false
+            }
+          ],
+          "extendsTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          },
+          "implementsTokenRanges": []
+        },
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@fluentui/web-components!SpinnerAppearance:type",
+          "docComment": "/**\n * A Spinner's appearance can be either primary or inverted\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare type SpinnerAppearance = "
+            },
+            {
+              "kind": "Reference",
+              "text": "ValuesOf",
+              "canonicalReference": "@microsoft/fast-foundation!ValuesOf:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<typeof "
+            },
+            {
+              "kind": "Reference",
+              "text": "SpinnerAppearance",
+              "canonicalReference": "@fluentui/web-components!SpinnerAppearance:var"
+            },
+            {
+              "kind": "Content",
+              "text": ">"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "releaseTag": "Public",
+          "name": "SpinnerAppearance",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 5
+          }
+        },
+        {
+          "kind": "Variable",
+          "canonicalReference": "@fluentui/web-components!SpinnerAppearance:var",
+          "docComment": "/**\n * SpinnerAppearance constants\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "SpinnerAppearance: "
+            },
+            {
+              "kind": "Content",
+              "text": "{\n    readonly primary: \"primary\";\n    readonly inverted: \"inverted\";\n}"
+            }
+          ],
+          "isReadonly": true,
+          "releaseTag": "Public",
+          "name": "SpinnerAppearance",
+          "variableTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          }
+        },
+        {
+          "kind": "Variable",
+          "canonicalReference": "@fluentui/web-components!SpinnerDefinition:var",
+          "docComment": "/**\n * The Fluent Spinner Element. Implements {@link @microsoft/fast-foundation#ProgressRing}, {@link @microsoft/fast-foundation#progress-ringTemplate}\n *\n * @remarks\n *\n * HTML Element: \\<fluent-spinner\\>\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "definition: "
+            },
+            {
+              "kind": "Content",
+              "text": "import(\"@microsoft/fast-element\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "FASTElementDefinition",
+              "canonicalReference": "@microsoft/fast-element!FASTElementDefinition:class"
+            },
+            {
+              "kind": "Content",
+              "text": "<typeof "
+            },
+            {
+              "kind": "Reference",
+              "text": "Spinner",
+              "canonicalReference": "@fluentui/web-components!Spinner:class"
+            },
+            {
+              "kind": "Content",
+              "text": ">"
+            }
+          ],
+          "isReadonly": true,
+          "releaseTag": "Public",
+          "name": "SpinnerDefinition",
+          "variableTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 6
+          }
+        },
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@fluentui/web-components!SpinnerSize:type",
+          "docComment": "/**\n * A Spinner's size can be either small, tiny, extra-small, medium, large, extra-large, or huge\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare type SpinnerSize = "
+            },
+            {
+              "kind": "Reference",
+              "text": "ValuesOf",
+              "canonicalReference": "@microsoft/fast-foundation!ValuesOf:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<typeof "
+            },
+            {
+              "kind": "Reference",
+              "text": "SpinnerSize",
+              "canonicalReference": "@fluentui/web-components!SpinnerSize:var"
+            },
+            {
+              "kind": "Content",
+              "text": ">"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "releaseTag": "Public",
+          "name": "SpinnerSize",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 5
+          }
+        },
+        {
+          "kind": "Variable",
+          "canonicalReference": "@fluentui/web-components!SpinnerSize:var",
+          "docComment": "/**\n * SpinnerSize constants\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "SpinnerSize: "
+            },
+            {
+              "kind": "Content",
+              "text": "{\n    readonly tiny: \"tiny\";\n    readonly extraSmall: \"extra-small\";\n    readonly small: \"small\";\n    readonly medium: \"medium\";\n    readonly large: \"large\";\n    readonly extraLarge: \"extra-large\";\n    readonly huge: \"huge\";\n}"
+            }
+          ],
+          "isReadonly": true,
+          "releaseTag": "Public",
+          "name": "SpinnerSize",
+          "variableTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          }
+        },
+        {
+          "kind": "Variable",
+          "canonicalReference": "@fluentui/web-components!SpinnerStyles:var",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "styles: "
+            },
+            {
+              "kind": "Content",
+              "text": "import(\"@microsoft/fast-element\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "ElementStyles",
+              "canonicalReference": "@microsoft/fast-element!ElementStyles:class"
+            }
+          ],
+          "isReadonly": true,
+          "releaseTag": "Public",
+          "name": "SpinnerStyles",
+          "variableTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 3
+          }
+        },
+        {
+          "kind": "Variable",
+          "canonicalReference": "@fluentui/web-components!SpinnerTemplate:var",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "template: "
+            },
+            {
+              "kind": "Reference",
+              "text": "ElementViewTemplate",
+              "canonicalReference": "@microsoft/fast-element!ElementViewTemplate:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "Spinner",
+              "canonicalReference": "@fluentui/web-components!Spinner:class"
+            },
+            {
+              "kind": "Content",
+              "text": ">"
+            }
+          ],
+          "isReadonly": true,
+          "releaseTag": "Public",
+          "name": "SpinnerTemplate",
+          "variableTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 5
+          }
+        },
         {
           "kind": "Variable",
           "canonicalReference": "@fluentui/web-components!strokeWidthThick:var",