@momentum-design/components 0.16.13 → 0.16.15

package/dist/custom-elements.json

@@ -2161,150 +2161,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/iconprovider/iconprovider.component.js",
+      "path": "components/formfieldwrapper/formfieldwrapper.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nBundling icons will be up to the consumer of this component, such\nthat only a url has to be passed in from which the icons will be\nfetched.",
-          "name": "IconProvider",
-          "slots": [
-            {
-              "description": "children",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "Context",
-              "privacy": "public",
-              "static": true,
-              "description": "Context object of the IconProvider, to be consumed by child components",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "url",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Url of where icons will be fetched from",
-              "attribute": "url"
-            },
-            {
-              "kind": "field",
-              "name": "fileExtension",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "File extension of icons",
-              "default": "svg",
-              "attribute": "file-extension",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "lengthUnit",
-              "type": {
-                "text": "string"
-              },
-              "description": "Length unit used for sizing of icons",
-              "default": "em",
-              "attribute": "length-unit",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
-              "default": "1",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "updateValuesInContext",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "updateContext",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "url",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Url of where icons will be fetched from",
-              "fieldName": "url"
-            },
-            {
-              "name": "file-extension",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "File extension of icons",
-              "default": "svg",
-              "fieldName": "fileExtension"
-            },
-            {
-              "name": "length-unit",
-              "type": {
-                "text": "string"
-              },
-              "description": "Length unit used for sizing of icons",
-              "default": "em",
-              "fieldName": "lengthUnit"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
-              "default": "1",
-              "fieldName": "size"
-            }
-          ],
-          "superclass": {
-            "name": "Provider",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-iconprovider",
-          "jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Bundling icons will be up to the consumer of this component, such\n * that only a url has to be passed in from which the icons will be\n * fetched.\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "IconProvider",
-            "module": "components/iconprovider/iconprovider.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/labelandhelper/labelandhelper.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "labelandhelper is a component that contains the label and helper/validation text\n that can be configured in various ways to suit different use cases (most of the input related components).\nIt is used as an internal component and is not intended to be used directly by consumers.",
-          "name": "LabelAndHelper",
+          "description": "formfieldwrapper is a component that contains the label and helper/validation text\n that can be configured in various ways to suit different use cases (most of the input related components).\nIt is used as an internal component and is not intended to be used directly by consumers.",
+          "name": "FormfieldWrapper",
           "members": [
             {
               "kind": "field",
@@ -2461,79 +2323,8 @@
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-labelandhelper",
-          "jsDoc": "/**\n * labelandhelper is a component that contains the label and helper/validation text\n *  that can be configured in various ways to suit different use cases (most of the input related components).\n * It is used as an internal component and is not intended to be used directly by consumers.\n *\n * @tagname mdc-labelandhelper\n *\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "LabelAndHelper",
-            "module": "components/labelandhelper/labelandhelper.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/marker/marker.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
-          "name": "Marker",
-          "cssProperties": [
-            {
-              "description": "Allows customization of the default background color in solid variant.",
-              "name": "--mdc-marker-solid-background-color"
-            },
-            {
-              "description": "Allows customization of the default stripes in striped variant.",
-              "name": "--mdc-marker-striped-color"
-            },
-            {
-              "description": "Allows customization of the default background color in striped variant.",
-              "name": "--mdc-marker-striped-background-color"
-            },
-            {
-              "description": "Allows customization of the default width.",
-              "name": "--mdc-marker-width"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "MarkerVariants"
-              },
-              "privacy": "public",
-              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
-              "default": "solid",
-              "attribute": "variant",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "MarkerVariants"
-              },
-              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
-              "default": "solid",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-marker",
-          "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
+          "tagName": "mdc-formfieldwrapper",
+          "jsDoc": "/**\n * formfieldwrapper is a component that contains the label and helper/validation text\n *  that can be configured in various ways to suit different use cases (most of the input related components).\n * It is used as an internal component and is not intended to be used directly by consumers.\n *\n * @tagname mdc-formfieldwrapper\n *\n */",
           "customElement": true
         }
       ],
@@ -2542,8 +2333,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Marker",
-            "module": "components/marker/marker.component.js"
+            "name": "FormfieldWrapper",
+            "module": "components/formfieldwrapper/formfieldwrapper.component.js"
           }
         }
       ]
@@ -2769,6 +2560,334 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/iconprovider/iconprovider.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nBundling icons will be up to the consumer of this component, such\nthat only a url has to be passed in from which the icons will be\nfetched.",
+          "name": "IconProvider",
+          "slots": [
+            {
+              "description": "children",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "Context",
+              "privacy": "public",
+              "static": true,
+              "description": "Context object of the IconProvider, to be consumed by child components",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "url",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Url of where icons will be fetched from",
+              "attribute": "url"
+            },
+            {
+              "kind": "field",
+              "name": "fileExtension",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "File extension of icons",
+              "default": "svg",
+              "attribute": "file-extension",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "lengthUnit",
+              "type": {
+                "text": "string"
+              },
+              "description": "Length unit used for sizing of icons",
+              "default": "em",
+              "attribute": "length-unit",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
+              "default": "1",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "updateValuesInContext",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "updateContext",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "url",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Url of where icons will be fetched from",
+              "fieldName": "url"
+            },
+            {
+              "name": "file-extension",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "File extension of icons",
+              "default": "svg",
+              "fieldName": "fileExtension"
+            },
+            {
+              "name": "length-unit",
+              "type": {
+                "text": "string"
+              },
+              "description": "Length unit used for sizing of icons",
+              "default": "em",
+              "fieldName": "lengthUnit"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
+              "default": "1",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "Provider",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-iconprovider",
+          "jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Bundling icons will be up to the consumer of this component, such\n * that only a url has to be passed in from which the icons will be\n * fetched.\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "IconProvider",
+            "module": "components/iconprovider/iconprovider.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/marker/marker.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+          "name": "Marker",
+          "cssProperties": [
+            {
+              "description": "Allows customization of the default background color in solid variant.",
+              "name": "--mdc-marker-solid-background-color"
+            },
+            {
+              "description": "Allows customization of the default stripes in striped variant.",
+              "name": "--mdc-marker-striped-color"
+            },
+            {
+              "description": "Allows customization of the default background color in striped variant.",
+              "name": "--mdc-marker-striped-background-color"
+            },
+            {
+              "description": "Allows customization of the default width.",
+              "name": "--mdc-marker-width"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "MarkerVariants"
+              },
+              "privacy": "public",
+              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+              "default": "solid",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "MarkerVariants"
+              },
+              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+              "default": "solid",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-marker",
+          "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Marker",
+            "module": "components/marker/marker.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/modalcontainer/modalcontainer.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-modalcontainer` component is an element used to\ndisplay a modal container that can further be used in popover.",
+          "name": "Modalcontainer",
+          "cssProperties": [
+            {
+              "description": "primary background color of the modalcontainer",
+              "name": "--mdc-modalcontainer-primary-background-color"
+            },
+            {
+              "description": "border color of the modalcontainer",
+              "name": "--mdc-modalcontainer-border-color"
+            },
+            {
+              "description": "inverted background color of the modalcontainer",
+              "name": "--mdc-modalcontainer-inverted-background-color"
+            },
+            {
+              "description": "inverted border color of the modalcontainer",
+              "name": "--mdc-modalcontainer-inverted-border-color"
+            },
+            {
+              "description": "inverted text color of the modalcontainer",
+              "name": "--mdc-modalcontainer-inverted-text-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot for modal container",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "ModalContainerColor"
+              },
+              "description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
+              "default": "tonal",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "elevation",
+              "type": {
+                "text": "ModalContainerElevation"
+              },
+              "description": "Elevation of the modalcontainer where each value corresponds to a different drop shadow.\n- **0**\n- **1**\n- **2**\n- **3**\n- **4**",
+              "default": "0",
+              "attribute": "elevation",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "ModalContainerRole"
+              },
+              "description": "Role of the modalcontainer",
+              "default": "dialog",
+              "attribute": "role"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "color",
+              "type": {
+                "text": "ModalContainerColor"
+              },
+              "description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
+              "default": "tonal",
+              "fieldName": "color"
+            },
+            {
+              "name": "elevation",
+              "type": {
+                "text": "ModalContainerElevation"
+              },
+              "description": "Elevation of the modalcontainer where each value corresponds to a different drop shadow.\n- **0**\n- **1**\n- **2**\n- **3**\n- **4**",
+              "default": "0",
+              "fieldName": "elevation"
+            },
+            {
+              "name": "role",
+              "type": {
+                "text": "ModalContainerRole"
+              },
+              "description": "Role of the modalcontainer",
+              "default": "dialog",
+              "fieldName": "role"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-modalcontainer",
+          "jsDoc": "/**\n * The `mdc-modalcontainer` component is an element used to\n * display a modal container that can further be used in popover.\n *\n * @tagname mdc-modalcontainer\n *\n * @cssproperty --mdc-modalcontainer-primary-background-color - primary background color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-border-color - border color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-background-color - inverted background color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-border-color - inverted border color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-text-color - inverted text color of the modalcontainer\n *\n * @slot - Default slot for modal container\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Modalcontainer",
+            "module": "components/modalcontainer/modalcontainer.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/presence/presence.component.js",

package/dist/index.d.ts

@@ -9,8 +9,9 @@ import Button from './components/button';
 import Bullet from './components/bullet';
 import Marker from './components/marker';
 import Divider from './components/divider';
+import Modalcontainer from './components/modalcontainer';
 import Buttonsimple from './components/buttonsimple';
 import Avatarbutton from './components/avatarbutton';
 import type { TextType } from './components/text/text.types';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, Buttonsimple, Avatarbutton, };
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, Modalcontainer, Buttonsimple, Avatarbutton, };
 export type { TextType, };

package/dist/index.js

@@ -9,6 +9,7 @@ import Button from './components/button';
 import Bullet from './components/bullet';
 import Marker from './components/marker';
 import Divider from './components/divider';
+import Modalcontainer from './components/modalcontainer';
 import Buttonsimple from './components/buttonsimple';
 import Avatarbutton from './components/avatarbutton';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, Buttonsimple, Avatarbutton, };
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, Modalcontainer, Buttonsimple, Avatarbutton, };

package/dist/react/{labelandhelper → formfieldwrapper}/index.d.ts

@@ -1,10 +1,10 @@
-import Component from '../../components/labelandhelper';
+import Component from '../../components/formfieldwrapper';
 /**
- * labelandhelper is a component that contains the label and helper/validation text
+ * formfieldwrapper is a component that contains the label and helper/validation text
  *  that can be configured in various ways to suit different use cases (most of the input related components).
  * It is used as an internal component and is not intended to be used directly by consumers.
  *
- * @tagname mdc-labelandhelper
+ * @tagname mdc-formfieldwrapper
  *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;

package/dist/react/{labelandhelper → formfieldwrapper}/index.js

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { createComponent } from '@lit/react';
-import Component from '../../components/labelandhelper';
-import { TAG_NAME } from '../../components/labelandhelper/labelandhelper.constants';
+import Component from '../../components/formfieldwrapper';
+import { TAG_NAME } from '../../components/formfieldwrapper/formfieldwrapper.constants';
 /**
- * labelandhelper is a component that contains the label and helper/validation text
+ * formfieldwrapper is a component that contains the label and helper/validation text
  *  that can be configured in various ways to suit different use cases (most of the input related components).
  * It is used as an internal component and is not intended to be used directly by consumers.
  *
- * @tagname mdc-labelandhelper
+ * @tagname mdc-formfieldwrapper
  *
  */
 const reactWrapper = createComponent({
@@ -15,6 +15,6 @@ const reactWrapper = createComponent({
     elementClass: Component,
     react: React,
     events: {},
-    displayName: 'LabelAndHelper',
+    displayName: 'FormfieldWrapper',
 });
 export default reactWrapper;

package/dist/react/index.d.ts

@@ -5,10 +5,11 @@ export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Divider } from './divider';
+export { default as FormfieldWrapper } from './formfieldwrapper';
+export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
-export { default as LabelAndHelper } from './labelandhelper';
 export { default as Marker } from './marker';
-export { default as Icon } from './icon';
+export { default as Modalcontainer } from './modalcontainer';
 export { default as Presence } from './presence';
 export { default as Text } from './text';
 export { default as ThemeProvider } from './themeprovider';