@momentum-design/components 0.30.1 → 0.31.1

package/dist/custom-elements.json

@@ -5835,244 +5835,6 @@
         }
       ]
     },
-    {
-      "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": "dataRole",
-              "type": {
-                "text": "HTMLElement['role']"
-              },
-              "description": "Role of the modalcontainer",
-              "default": "dialog",
-              "attribute": "data-role",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "dataAriaModal",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Aria modal of the modalcontainer",
-              "default": "false",
-              "attribute": "data-aria-modal",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "dataAriaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "dataAriaLabelledby",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines an ID reference to one or more elements that label the current element.\nThe `aria-labelledby` attribute to be set for accessibility.",
-              "attribute": "data-aria-labelledby",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DataAriaLabelledbyMixin",
-                "module": "utils/mixins/DataAriaLabelledbyMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "dataAriaDescribedby",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines an ID reference to one or more elements that provide additional\ndescriptive information for the current element.\nThe `aria-describedby` attribute to be set for accessibility.",
-              "attribute": "data-aria-describedby",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DataAriaDescribedbyMixin",
-                "module": "utils/mixins/DataAriaDescribedbyMixin.js"
-              }
-            }
-          ],
-          "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": "data-role",
-              "type": {
-                "text": "HTMLElement['role']"
-              },
-              "description": "Role of the modalcontainer",
-              "default": "dialog",
-              "fieldName": "dataRole"
-            },
-            {
-              "name": "data-aria-modal",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Aria modal of the modalcontainer",
-              "default": "false",
-              "fieldName": "dataAriaModal"
-            },
-            {
-              "name": "data-aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
-              }
-            },
-            {
-              "name": "data-aria-labelledby",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines an ID reference to one or more elements that label the current element.\nThe `aria-labelledby` attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabelledby",
-              "inheritedFrom": {
-                "name": "DataAriaLabelledbyMixin",
-                "module": "src/utils/mixins/DataAriaLabelledbyMixin.ts"
-              }
-            },
-            {
-              "name": "data-aria-describedby",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines an ID reference to one or more elements that provide additional\ndescriptive information for the current element.\nThe `aria-describedby` attribute to be set for accessibility.",
-              "fieldName": "dataAriaDescribedby",
-              "inheritedFrom": {
-                "name": "DataAriaDescribedbyMixin",
-                "module": "src/utils/mixins/DataAriaDescribedbyMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
-            },
-            {
-              "name": "DataAriaLabelledbyMixin",
-              "module": "/src/utils/mixins/DataAriaLabelledbyMixin"
-            },
-            {
-              "name": "DataAriaDescribedbyMixin",
-              "module": "/src/utils/mixins/DataAriaDescribedbyMixin"
-            }
-          ],
-          "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/popover/popover.component.js",
@@ -6094,6 +5856,10 @@
               "description": "primary background color of the popover",
               "name": "--mdc-popover-primary-background-color"
             },
+            {
+              "description": "border color of the popover",
+              "name": "--mdc-popover-border-color"
+            },
             {
               "description": "inverted background color of the popover",
               "name": "--mdc-popover-inverted-background-color"
@@ -6105,11 +5871,15 @@
             {
               "description": "inverted text color of the popover",
               "name": "--mdc-popover-inverted-text-color"
+            },
+            {
+              "description": "elevation of the popover",
+              "name": "--mdc-popover-elevation-3"
             }
           ],
           "slots": [
             {
-              "description": "Default slot for modal container",
+              "description": "Default slot for the popover content",
               "name": ""
             }
           ],
@@ -6160,7 +5930,7 @@
               "kind": "field",
               "name": "color",
               "type": {
-                "text": "ModalContainerColor"
+                "text": "PopoverColor"
               },
               "description": "Color of the popover\n- **tonal**\n- **contrast**",
               "default": "tonal",
@@ -6365,13 +6135,35 @@
             },
             {
               "kind": "field",
-              "name": "dataRole",
+              "name": "role",
               "type": {
                 "text": "HTMLElement['role']"
               },
               "description": "Role of the popover",
               "default": "dialog",
-              "attribute": "data-role",
+              "attribute": "role",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabelledby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "aria-labelledby for an interactive popover only, defaults to the trigger component id.\nUsed in nested cases where the triggerComponent isn't the actual button.",
+              "attribute": "aria-labelledby",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "ariaDescribedby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "aria-describedby of the popover.",
+              "attribute": "aria-describedby",
               "reflects": true
             },
             {
@@ -6500,51 +6292,6 @@
               "name": "utils",
               "default": "new PopoverUtils(this)"
             },
-            {
-              "kind": "field",
-              "name": "dataAriaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "dataAriaLabelledby",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines an ID reference to one or more elements that label the current element.\nThe `aria-labelledby` attribute to be set for accessibility.",
-              "attribute": "data-aria-labelledby",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DataAriaLabelledbyMixin",
-                "module": "utils/mixins/DataAriaLabelledbyMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "dataAriaDescribedby",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines an ID reference to one or more elements that provide additional\ndescriptive information for the current element.\nThe `aria-describedby` attribute to be set for accessibility.",
-              "attribute": "data-aria-describedby",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DataAriaDescribedbyMixin",
-                "module": "utils/mixins/DataAriaDescribedbyMixin.js"
-              }
-            },
             {
               "kind": "field",
               "name": "enabledFocusTrap",
@@ -7051,7 +6798,7 @@
             {
               "name": "color",
               "type": {
-                "text": "ModalContainerColor"
+                "text": "PopoverColor"
               },
               "description": "Color of the popover\n- **tonal**\n- **contrast**",
               "default": "tonal",
@@ -7220,52 +6967,31 @@
               "fieldName": "closeButtonAriaLabel"
             },
             {
-              "name": "data-role",
+              "name": "role",
               "type": {
                 "text": "HTMLElement['role']"
               },
               "description": "Role of the popover",
               "default": "dialog",
-              "fieldName": "dataRole"
-            },
-            {
-              "name": "data-aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
-              }
+              "fieldName": "role"
             },
             {
-              "name": "data-aria-labelledby",
+              "name": "aria-labelledby",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
-              "description": "Defines an ID reference to one or more elements that label the current element.\nThe `aria-labelledby` attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabelledby",
-              "inheritedFrom": {
-                "name": "DataAriaLabelledbyMixin",
-                "module": "src/utils/mixins/DataAriaLabelledbyMixin.ts"
-              }
+              "description": "aria-labelledby for an interactive popover only, defaults to the trigger component id.\nUsed in nested cases where the triggerComponent isn't the actual button.",
+              "fieldName": "ariaLabelledby"
             },
             {
-              "name": "data-aria-describedby",
+              "name": "aria-describedby",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
-              "description": "Defines an ID reference to one or more elements that provide additional\ndescriptive information for the current element.\nThe `aria-describedby` attribute to be set for accessibility.",
-              "fieldName": "dataAriaDescribedby",
-              "inheritedFrom": {
-                "name": "DataAriaDescribedbyMixin",
-                "module": "src/utils/mixins/DataAriaDescribedbyMixin.ts"
-              }
+              "description": "aria-describedby of the popover.",
+              "fieldName": "ariaDescribedby"
             },
             {
               "name": "enabledFocusTrap",
@@ -7295,18 +7021,6 @@
             }
           ],
           "mixins": [
-            {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
-            },
-            {
-              "name": "DataAriaLabelledbyMixin",
-              "module": "/src/utils/mixins/DataAriaLabelledbyMixin"
-            },
-            {
-              "name": "DataAriaDescribedbyMixin",
-              "module": "/src/utils/mixins/DataAriaDescribedbyMixin"
-            },
             {
               "name": "FocusTrapMixin",
               "module": "/src/utils/mixins/FocusTrapMixin"
@@ -7317,7 +7031,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-popover",
-          "jsDoc": "/**\n * Popover component is a lightweight floating UI element that displays additional content when triggered.\n * It can be used for tooltips, dropdowns, or contextual menus.\n * The popover automatically positions itself based on available space and\n * supports dynamic height adjustments with scrollable content when needed。\n *\n * @dependency mdc-button\n * @dependency mdc-modalcontainer\n *\n * @tagname mdc-popover\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n *\n * @slot - Default slot for modal container\n *\n */",
+          "jsDoc": "/**\n * Popover component is a lightweight floating UI element that displays additional content when triggered.\n * It can be used for tooltips, dropdowns, or contextual menus.\n * The popover automatically positions itself based on available space and\n * supports dynamic height adjustments with scrollable content when needed。\n *\n * @dependency mdc-button\n *\n * @tagname mdc-popover\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-border-color - border color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n * @cssproperty --mdc-popover-elevation-3 - elevation of the popover\n *\n * @slot - Default slot for the popover content\n *\n */",
           "customElement": true
         }
       ],
@@ -10603,59 +10317,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "utils/mixins/DataAriaDescribedbyMixin.js",
-      "declarations": [
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "DataAriaDescribedbyMixin",
-          "members": [
-            {
-              "kind": "field",
-              "name": "dataAriaDescribedby",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines an ID reference to one or more elements that provide additional\ndescriptive information for the current element.\nThe `aria-describedby` attribute to be set for accessibility.",
-              "attribute": "data-aria-describedby",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "data-aria-describedby",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines an ID reference to one or more elements that provide additional\ndescriptive information for the current element.\nThe `aria-describedby` attribute to be set for accessibility.",
-              "fieldName": "dataAriaDescribedby"
-            }
-          ],
-          "parameters": [
-            {
-              "name": "superClass",
-              "type": {
-                "text": "T"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DataAriaDescribedbyMixin",
-          "declaration": {
-            "name": "DataAriaDescribedbyMixin",
-            "module": "utils/mixins/DataAriaDescribedbyMixin.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "utils/mixins/DataAriaLabelMixin.js",
@@ -10709,59 +10370,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "utils/mixins/DataAriaLabelledbyMixin.js",
-      "declarations": [
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "DataAriaLabelledbyMixin",
-          "members": [
-            {
-              "kind": "field",
-              "name": "dataAriaLabelledby",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines an ID reference to one or more elements that label the current element.\nThe `aria-labelledby` attribute to be set for accessibility.",
-              "attribute": "data-aria-labelledby",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "data-aria-labelledby",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines an ID reference to one or more elements that label the current element.\nThe `aria-labelledby` attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabelledby"
-            }
-          ],
-          "parameters": [
-            {
-              "name": "superClass",
-              "type": {
-                "text": "T"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DataAriaLabelledbyMixin",
-          "declaration": {
-            "name": "DataAriaLabelledbyMixin",
-            "module": "utils/mixins/DataAriaLabelledbyMixin.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "utils/mixins/DisabledMixin.js",

package/dist/react/index.d.ts

@@ -15,7 +15,6 @@ export { default as Link } from './link';
 export { default as List } from './list';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
-export { default as Modalcontainer } from './modalcontainer';
 export { default as Popover } from './popover';
 export { default as Presence } from './presence';
 export { default as Radio } from './radio';

package/dist/react/index.js

@@ -15,7 +15,6 @@ export { default as Link } from './link';
 export { default as List } from './list';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
-export { default as Modalcontainer } from './modalcontainer';
 export { default as Popover } from './popover';
 export { default as Presence } from './presence';
 export { default as Radio } from './radio';

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

@@ -6,18 +6,19 @@ import Component from '../../components/popover';
  * supports dynamic height adjustments with scrollable content when needed。
  *
  * @dependency mdc-button
- * @dependency mdc-modalcontainer
  *
  * @tagname mdc-popover
  *
  * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border
  * @cssproperty --mdc-popover-arrow-border - border of the arrow
  * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover
+ * @cssproperty --mdc-popover-border-color - border color of the popover
  * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover
  * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover
  * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover
+ * @cssproperty --mdc-popover-elevation-3 - elevation of the popover
  *
- * @slot - Default slot for modal container
+ * @slot - Default slot for the popover content
  *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;

package/dist/react/popover/index.js

@@ -9,18 +9,19 @@ import { TAG_NAME } from '../../components/popover/popover.constants';
  * supports dynamic height adjustments with scrollable content when needed。
  *
  * @dependency mdc-button
- * @dependency mdc-modalcontainer
  *
  * @tagname mdc-popover
  *
  * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border
  * @cssproperty --mdc-popover-arrow-border - border of the arrow
  * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover
+ * @cssproperty --mdc-popover-border-color - border color of the popover
  * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover
  * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover
  * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover
+ * @cssproperty --mdc-popover-elevation-3 - elevation of the popover
  *
- * @slot - Default slot for modal container
+ * @slot - Default slot for the popover content
  *
  */
 const reactWrapper = createComponent({

package/package.json

@@ -38,5 +38,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.30.1"
+  "version": "0.31.1"
 }

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

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