@momentum-design/components 0.25.3 → 0.26.0

package/dist/custom-elements.json

@@ -2580,6 +2580,22 @@
               "description": "line height of label in the text divider",
               "name": "--mdc-divider-text-line-height"
             },
+            {
+              "description": "background color of the grabber button in rest state",
+              "name": "--mdc-divider-grabber-button-background-color-normal"
+            },
+            {
+              "description": "background color of the grabber button in hover state",
+              "name": "--mdc-divider-grabber-button-background-color-hover"
+            },
+            {
+              "description": "background color of the grabber button in pressed state",
+              "name": "--mdc-divider-grabber-button-background-color-pressed"
+            },
+            {
+              "description": "border color of the grabber button",
+              "name": "--mdc-divider-grabber-button-border-color"
+            },
             {
               "description": "border radius of the grabber button",
               "name": "--mdc-divider-grabber-button-border-radius"
@@ -2754,7 +2770,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-divider",
-          "jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n *  - **Primary**: A simple horizontal or vertical divider.\n *  - **Text**: A horizontal divider with a text label in the center.\n *  - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n *   - `aria-label` should be passed to the `mdc-button`.\n *   - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n *   the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
+          "jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n *  - **Primary**: A simple horizontal or vertical divider.\n *  - **Text**: A horizontal divider with a text label in the center.\n *  - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n *   - `aria-label` should be passed to the `mdc-button`.\n *   - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n *   the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button\n *  in rest state\n * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button\n *  in hover state\n * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button\n *  in pressed state\n * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
           "customElement": true
         }
       ],
@@ -5733,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/divider/index.d.ts

@@ -37,6 +37,13 @@ import Component from '../../components/divider';
  * @cssproperty --mdc-divider-text-color - font color of label in the text divider
  * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider
  * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider
+ * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button
+ *  in rest state
+ * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button
+ *  in hover state
+ * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button
+ *  in pressed state
+ * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button
  * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;

package/dist/react/divider/index.js

@@ -40,6 +40,13 @@ import { TAG_NAME } from '../../components/divider/divider.constants';
  * @cssproperty --mdc-divider-text-color - font color of label in the text divider
  * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider
  * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider
+ * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button
+ *  in rest state
+ * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button
+ *  in hover state
+ * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button
+ *  in pressed state
+ * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button
  * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button
  */
 const reactWrapper = createComponent({

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.3"
+  "version": "0.26.0"
 }