@momentum-design/components 0.25.4 → 0.27.0

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

@@ -0,0 +1,7 @@
+import Spinner from './spinner.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-spinner']: Spinner;
+    }
+}
+export default Spinner;

package/dist/components/spinner/index.js

@@ -0,0 +1,4 @@
+import Spinner from './spinner.component';
+import { TAG_NAME } from './spinner.constants';
+Spinner.register(TAG_NAME);
+export default Spinner;

package/dist/components/spinner/spinner.component.d.ts

@@ -0,0 +1,75 @@
+import { CSSResult } from 'lit';
+import { Component } from '../../models';
+import { SpinnerSize, SpinnerVariant } from './spinner.types';
+/**
+ * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning
+ * it's best for cases where the  progress or duration of a process is variable or unknown.
+ *
+ * Spinner Variants:
+ * - **Standalone (Default)**: Track has a blue color.
+ * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.
+ * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s
+ * icon or label text.
+ *
+ * Spinner Sizes:
+ * - **Large (96px)**: Use when replacing entire regions or pages that are still loading
+ * - **MidSize (48px) (Default)**: Use for most use cases.
+ * - **Small (24px)**: Use for inline with loading text.
+ *
+ * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size
+ * CSS property.
+ *
+ * Spinner Colors:
+ * - **Default**: Use for most use cases.
+ * - **Inverted**: Only to be used within inverted components, such as coachmarks.
+ *
+ * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role
+ * will be unset
+ * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.
+ *
+ * @tagname mdc-spinner
+ *
+ * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.
+ * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.
+ * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.
+ * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.
+ *
+ * @csspart container - The svg which contains the circle spinner.
+ * @csspart circle - The circle of the spinner.
+ */
+declare class Spinner extends Component {
+    /**
+     * The spinner color can be inverted by setting the inverted attribute to true.
+     * @default false
+     */
+    inverted: boolean;
+    /**
+     * Size of the spinner.
+     * Acceptable values include:
+     *
+     * - 'small'
+     * - 'midsize'
+     * - 'large'
+     * - 'undefined'
+     *
+     * @default midsize
+     */
+    size?: SpinnerSize;
+    /**
+     * Aria-label attribute to be set for accessibility
+     */
+    ariaLabel: string | null;
+    /**
+    * There are 2 variants of spinner: default and button. Their coloring is different.
+    * - **Standalone (Default)**: Track has a blue color.
+    * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.
+    * To ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s
+    * icon or label text.
+    * @default standalone
+    */
+    variant: SpinnerVariant;
+    updated(changedProperties: Map<string, any>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Spinner;

package/dist/components/spinner/spinner.component.js

@@ -0,0 +1,117 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './spinner.styles';
+import { Component } from '../../models';
+import { DEFAULTS } from './spinner.constants';
+/**
+ * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning
+ * it's best for cases where the  progress or duration of a process is variable or unknown.
+ *
+ * Spinner Variants:
+ * - **Standalone (Default)**: Track has a blue color.
+ * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.
+ * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s
+ * icon or label text.
+ *
+ * Spinner Sizes:
+ * - **Large (96px)**: Use when replacing entire regions or pages that are still loading
+ * - **MidSize (48px) (Default)**: Use for most use cases.
+ * - **Small (24px)**: Use for inline with loading text.
+ *
+ * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size
+ * CSS property.
+ *
+ * Spinner Colors:
+ * - **Default**: Use for most use cases.
+ * - **Inverted**: Only to be used within inverted components, such as coachmarks.
+ *
+ * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role
+ * will be unset
+ * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.
+ *
+ * @tagname mdc-spinner
+ *
+ * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.
+ * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.
+ * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.
+ * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.
+ *
+ * @csspart container - The svg which contains the circle spinner.
+ * @csspart circle - The circle of the spinner.
+ */
+class Spinner extends Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * The spinner color can be inverted by setting the inverted attribute to true.
+         * @default false
+         */
+        this.inverted = DEFAULTS.INVERTED;
+        /**
+         * Size of the spinner.
+         * Acceptable values include:
+         *
+         * - 'small'
+         * - 'midsize'
+         * - 'large'
+         * - 'undefined'
+         *
+         * @default midsize
+         */
+        this.size = DEFAULTS.SIZE;
+        /**
+         * Aria-label attribute to be set for accessibility
+         */
+        this.ariaLabel = null;
+        /**
+        * There are 2 variants of spinner: default and button. Their coloring is different.
+        * - **Standalone (Default)**: Track has a blue color.
+        * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.
+        * To ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s
+        * icon or label text.
+        * @default standalone
+        */
+        this.variant = DEFAULTS.VARIANT;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('ariaLabel')) {
+            this.role = this.ariaLabel ? 'img' : null;
+            this.ariaHidden = this.ariaLabel ? 'false' : 'true';
+        }
+    }
+    render() {
+        return html `
+      <svg part="container" viewBox="0 0 100 100">
+        <circle part="circle" cx="50" cy="50" r="46"></circle>
+      </svg>
+    `;
+    }
+}
+Spinner.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Spinner.prototype, "inverted", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Spinner.prototype, "size", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-label' }),
+    __metadata("design:type", Object)
+], Spinner.prototype, "ariaLabel", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Spinner.prototype, "variant", void 0);
+export default Spinner;

package/dist/components/spinner/spinner.constants.d.ts

@@ -0,0 +1,16 @@
+declare const TAG_NAME: "mdc-spinner";
+declare const SPINNER_SIZES: {
+    readonly LARGE: "large";
+    readonly MIDSIZE: "midsize";
+    readonly SMALL: "small";
+};
+declare const SPINNER_VARIANT: {
+    readonly STANDALONE: "standalone";
+    readonly BUTTON: "button";
+};
+declare const DEFAULTS: {
+    VARIANT: "standalone";
+    SIZE: "midsize";
+    INVERTED: boolean;
+};
+export { TAG_NAME, SPINNER_SIZES, SPINNER_VARIANT, DEFAULTS };

package/dist/components/spinner/spinner.constants.js

@@ -0,0 +1,17 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('spinner');
+const SPINNER_SIZES = {
+    LARGE: 'large',
+    MIDSIZE: 'midsize',
+    SMALL: 'small',
+};
+const SPINNER_VARIANT = {
+    STANDALONE: 'standalone',
+    BUTTON: 'button',
+};
+const DEFAULTS = {
+    VARIANT: SPINNER_VARIANT.STANDALONE,
+    SIZE: SPINNER_SIZES.MIDSIZE,
+    INVERTED: false,
+};
+export { TAG_NAME, SPINNER_SIZES, SPINNER_VARIANT, DEFAULTS };

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

@@ -0,0 +1,2 @@
+declare const styles: import("lit").CSSResult[];
+export default styles;

package/dist/components/spinner/spinner.styles.js

@@ -0,0 +1,66 @@
+import { css } from 'lit';
+import { hostFitContentStyles } from '../../utils/styles';
+const styles = [hostFitContentStyles, css `
+  :host {
+    --mdc-spinner-default-color: var(--mds-color-theme-control-active-normal);
+    --mdc-spinner-inverted-color: var(--mds-color-theme-inverted-control-active-normal);
+    --mdc-spinner-button-variant-color: currentColor;
+    --mdc-spinner-color: var(--mdc-spinner-default-color);
+    --mdc-spinner-size: 100%;
+  }
+
+  :host([inverted]) {
+    --mdc-spinner-color: var(--mdc-spinner-inverted-color);
+  }
+
+  :host([size="large"]) {
+    --mdc-spinner-size: 6rem;
+  }
+
+  :host([size="midsize"]) {
+    --mdc-spinner-size: 3rem;
+  }
+
+  :host([size="small"]) {
+    --mdc-spinner-size: 1.5rem;
+  }
+
+  :host([variant="button"]) {
+    --mdc-spinner-color: var(--mdc-spinner-button-variant-color);
+  }
+
+  :host::part(container) {
+    width: var(--mdc-spinner-size);
+    height: var(--mdc-spinner-size);
+    animation: rotate 1.5s linear infinite;
+  }
+
+  :host::part(circle) {
+    fill: none;
+    stroke: var(--mdc-spinner-color);
+    stroke-width: 8%;
+    stroke-linecap: round;
+    animation: dash 1.5s ease-in-out infinite;
+    transform: rotate(-90deg);
+    transform-origin: center;
+  }
+
+  @keyframes rotate {
+    100% { transform: rotate(360deg); }
+  }
+
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 470;
+    }
+    50% {
+      stroke-dasharray: 209, 470;
+      stroke-dashoffset: -83;
+    }
+    100% {
+      stroke-dasharray: 209, 470;
+      stroke-dashoffset: -292;
+    }
+  }
+`];
+export default styles;

package/dist/components/spinner/spinner.types.d.ts

@@ -0,0 +1,5 @@
+import type { ValueOf } from '../../utils/types';
+import { SPINNER_SIZES, SPINNER_VARIANT } from './spinner.constants';
+type SpinnerSize = ValueOf<typeof SPINNER_SIZES>;
+type SpinnerVariant = ValueOf<typeof SPINNER_VARIANT>;
+export { SpinnerSize, SpinnerVariant, };

package/dist/components/spinner/spinner.types.js

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

package/dist/custom-elements.json

@@ -5749,6 +5749,138 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/spinner/spinner.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\nit's best for cases where the  progress or duration of a process is variable or unknown.\n\nSpinner Variants:\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\nicon or label text.\n\nSpinner Sizes:\n- **Large (96px)**: Use when replacing entire regions or pages that are still loading\n- **MidSize (48px) (Default)**: Use for most use cases.\n- **Small (24px)**: Use for inline with loading text.\n\nCustomisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\nCSS property.\n\nSpinner Colors:\n- **Default**: Use for most use cases.\n- **Inverted**: Only to be used within inverted components, such as coachmarks.\n\nRegarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\nwill be unset\nand aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.",
+          "name": "Spinner",
+          "cssProperties": [
+            {
+              "description": "Allows customization of the default spinner color.",
+              "name": "--mdc-spinner-default-color"
+            },
+            {
+              "description": "Allows customization of the inverted spinner color.",
+              "name": "--mdc-spinner-inverted-color"
+            },
+            {
+              "description": "Allows customization of the spinner Button variant color.",
+              "name": "--mdc-spinner-button-variant-color"
+            },
+            {
+              "description": "Allows customization of the spinner size.",
+              "name": "--mdc-spinner-size"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The svg which contains the circle spinner.",
+              "name": "container"
+            },
+            {
+              "description": "The circle of the spinner.",
+              "name": "circle"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "inverted",
+              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
+              "default": "false",
+              "attribute": "inverted",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "SpinnerSize | undefined"
+              },
+              "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
+              "default": "midsize",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "SpinnerVariant"
+              },
+              "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
+              "default": "standalone",
+              "attribute": "variant"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "inverted",
+              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
+              "default": "false",
+              "fieldName": "inverted"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "SpinnerSize | undefined"
+              },
+              "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
+              "default": "midsize",
+              "fieldName": "size"
+            },
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "SpinnerVariant"
+              },
+              "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
+              "default": "standalone",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-spinner",
+          "jsDoc": "/**\n * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\n * it's best for cases where the  progress or duration of a process is variable or unknown.\n *\n * Spinner Variants:\n * - **Standalone (Default)**: Track has a blue color.\n * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\n * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\n * icon or label text.\n *\n * Spinner Sizes:\n * - **Large (96px)**: Use when replacing entire regions or pages that are still loading\n * - **MidSize (48px) (Default)**: Use for most use cases.\n * - **Small (24px)**: Use for inline with loading text.\n *\n * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\n * CSS property.\n *\n * Spinner Colors:\n * - **Default**: Use for most use cases.\n * - **Inverted**: Only to be used within inverted components, such as coachmarks.\n *\n * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\n * will be unset\n * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.\n *\n * @tagname mdc-spinner\n *\n * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.\n * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.\n * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.\n * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.\n *\n * @csspart container - The svg which contains the circle spinner.\n * @csspart circle - The circle of the spinner.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Spinner",
+            "module": "components/spinner/spinner.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/tab/tab.component.js",

package/dist/index.d.ts

@@ -19,7 +19,8 @@ import VirtualizedList from './components/virtualizedlist';
 import Tab from './components/tab';
 import FormfieldGroup from './components/formfieldgroup';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
+import Spinner from './components/spinner';
 import type { TextType } from './components/text/text.types';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Input, Link, Toggle, Checkbox, Radio, VirtualizedList, Tab, FormfieldGroup, };
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Input, Link, Toggle, Checkbox, Radio, VirtualizedList, Tab, FormfieldGroup, Spinner, };
 export type { TextType, };
 export { inMemoryCache, webAPIIconsCache };

package/dist/index.js

@@ -19,5 +19,6 @@ import VirtualizedList from './components/virtualizedlist';
 import Tab from './components/tab';
 import FormfieldGroup from './components/formfieldgroup';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Input, Link, Toggle, Checkbox, Radio, VirtualizedList, Tab, FormfieldGroup, };
+import Spinner from './components/spinner';
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Input, Link, Toggle, Checkbox, Radio, VirtualizedList, Tab, FormfieldGroup, Spinner, };
 export { inMemoryCache, webAPIIconsCache };

package/dist/react/index.d.ts

@@ -16,6 +16,7 @@ export { default as Marker } from './marker';
 export { default as Modalcontainer } from './modalcontainer';
 export { default as Presence } from './presence';
 export { default as Radio } from './radio';
+export { default as Spinner } from './spinner';
 export { default as Tab } from './tab';
 export { default as Text } from './text';
 export { default as ThemeProvider } from './themeprovider';

package/dist/react/index.js

@@ -16,6 +16,7 @@ export { default as Marker } from './marker';
 export { default as Modalcontainer } from './modalcontainer';
 export { default as Presence } from './presence';
 export { default as Radio } from './radio';
+export { default as Spinner } from './spinner';
 export { default as Tab } from './tab';
 export { default as Text } from './text';
 export { default as ThemeProvider } from './themeprovider';

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

@@ -0,0 +1,39 @@
+import Component from '../../components/spinner';
+/**
+ * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning
+ * it's best for cases where the  progress or duration of a process is variable or unknown.
+ *
+ * Spinner Variants:
+ * - **Standalone (Default)**: Track has a blue color.
+ * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.
+ * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s
+ * icon or label text.
+ *
+ * Spinner Sizes:
+ * - **Large (96px)**: Use when replacing entire regions or pages that are still loading
+ * - **MidSize (48px) (Default)**: Use for most use cases.
+ * - **Small (24px)**: Use for inline with loading text.
+ *
+ * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size
+ * CSS property.
+ *
+ * Spinner Colors:
+ * - **Default**: Use for most use cases.
+ * - **Inverted**: Only to be used within inverted components, such as coachmarks.
+ *
+ * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role
+ * will be unset
+ * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.
+ *
+ * @tagname mdc-spinner
+ *
+ * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.
+ * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.
+ * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.
+ * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.
+ *
+ * @csspart container - The svg which contains the circle spinner.
+ * @csspart circle - The circle of the spinner.
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/spinner/index.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/spinner';
+import { TAG_NAME } from '../../components/spinner/spinner.constants';
+/**
+ * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning
+ * it's best for cases where the  progress or duration of a process is variable or unknown.
+ *
+ * Spinner Variants:
+ * - **Standalone (Default)**: Track has a blue color.
+ * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.
+ * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s
+ * icon or label text.
+ *
+ * Spinner Sizes:
+ * - **Large (96px)**: Use when replacing entire regions or pages that are still loading
+ * - **MidSize (48px) (Default)**: Use for most use cases.
+ * - **Small (24px)**: Use for inline with loading text.
+ *
+ * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size
+ * CSS property.
+ *
+ * Spinner Colors:
+ * - **Default**: Use for most use cases.
+ * - **Inverted**: Only to be used within inverted components, such as coachmarks.
+ *
+ * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role
+ * will be unset
+ * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.
+ *
+ * @tagname mdc-spinner
+ *
+ * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.
+ * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.
+ * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.
+ * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.
+ *
+ * @csspart container - The svg which contains the circle spinner.
+ * @csspart circle - The circle of the spinner.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Spinner',
+});
+export default reactWrapper;

package/package.json

@@ -37,5 +37,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.25.4"
+  "version": "0.27.0"
 }