@momentum-design/components 0.53.7 → 0.53.9

package/dist/custom-elements.json

@@ -138,8 +138,11 @@
             {
               "kind": "field",
               "name": "ariaStateKey",
+              "type": {
+                "text": "string | undefined"
+              },
               "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed'",
+              "default": "'aria-pressed' (when)",
               "attribute": "ariaStateKey",
               "reflects": true,
               "inheritedFrom": {
@@ -405,8 +408,11 @@
             },
             {
               "name": "ariaStateKey",
+              "type": {
+                "text": "string | undefined"
+              },
               "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed'",
+              "default": "'aria-pressed' (when)",
               "fieldName": "ariaStateKey",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -1004,8 +1010,11 @@
             {
               "kind": "field",
               "name": "ariaStateKey",
+              "type": {
+                "text": "string | undefined"
+              },
               "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed'",
+              "default": "'aria-pressed' (when)",
               "attribute": "ariaStateKey",
               "reflects": true,
               "inheritedFrom": {
@@ -1373,8 +1382,11 @@
             },
             {
               "name": "ariaStateKey",
+              "type": {
+                "text": "string | undefined"
+              },
               "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed'",
+              "default": "'aria-pressed' (when)",
               "fieldName": "ariaStateKey",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -2141,8 +2153,11 @@
             {
               "kind": "field",
               "name": "ariaStateKey",
+              "type": {
+                "text": "string | undefined"
+              },
               "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed'",
+              "default": "'aria-pressed' (when)",
               "attribute": "ariaStateKey",
               "reflects": true,
               "inheritedFrom": {
@@ -2427,8 +2442,11 @@
             },
             {
               "name": "ariaStateKey",
+              "type": {
+                "text": "string | undefined"
+              },
               "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed'",
+              "default": "'aria-pressed' (when)",
               "fieldName": "ariaStateKey",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -2559,8 +2577,11 @@
             {
               "kind": "field",
               "name": "ariaStateKey",
+              "type": {
+                "text": "string | undefined"
+              },
               "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed'",
+              "default": "'aria-pressed' (when)",
               "attribute": "ariaStateKey",
               "reflects": true
             },
@@ -2778,8 +2799,11 @@
             },
             {
               "name": "ariaStateKey",
+              "type": {
+                "text": "string | undefined"
+              },
               "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed'",
+              "default": "'aria-pressed' (when)",
               "fieldName": "ariaStateKey"
             },
             {
@@ -3664,8 +3688,11 @@
             {
               "kind": "field",
               "name": "ariaStateKey",
+              "type": {
+                "text": "string | undefined"
+              },
               "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed'",
+              "default": "'aria-pressed' (when)",
               "attribute": "ariaStateKey",
               "reflects": true,
               "inheritedFrom": {
@@ -3943,8 +3970,11 @@
             },
             {
               "name": "ariaStateKey",
+              "type": {
+                "text": "string | undefined"
+              },
               "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed'",
+              "default": "'aria-pressed' (when)",
               "fieldName": "ariaStateKey",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -6077,8 +6107,11 @@
             {
               "kind": "field",
               "name": "ariaStateKey",
+              "type": {
+                "text": "string | undefined"
+              },
               "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed'",
+              "default": "'aria-pressed' (when)",
               "attribute": "ariaStateKey",
               "reflects": true,
               "inheritedFrom": {
@@ -6364,8 +6397,11 @@
             },
             {
               "name": "ariaStateKey",
+              "type": {
+                "text": "string | undefined"
+              },
               "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed'",
+              "default": "'aria-pressed' (when)",
               "fieldName": "ariaStateKey",
               "inheritedFrom": {
                 "name": "Buttonsimple",
@@ -8608,7 +8644,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-link` component can be used to navigate to a different page\nwithin the application or to an external site. It can be used to link to\nemails or phone numbers.\n\nThe `children` of the link component is expected to be an anchor element\ncontaining the text, href, and other attributes.\n\nFor `icon`, the `mdc-icon` component is used to render the icon.",
+          "description": "`mdc-link` component can be used to navigate to a different page\nwithin the application or to an external site. It can be used to link to\nemails or phone numbers.\n\nThe `children` of the link component is expected to be the text content.\n\nFor `icon`, the `mdc-icon` component is used to render the icon.",
           "name": "Link",
           "cssProperties": [
             {
@@ -8690,6 +8726,43 @@
               "attribute": "size",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "'#'",
+              "description": "Href for navigation. The URL that the hyperlink points to",
+              "attribute": "href",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "default": "'_self'",
+              "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
+              "attribute": "target",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "rel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
+              "attribute": "rel",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "handleNavigation",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "getIconSize",
@@ -8711,16 +8784,10 @@
                   "type": {
                     "text": "boolean"
                   },
-                  "description": "The disabled state of icon"
+                  "description": "Whether the element should be disabled"
                 }
               ],
-              "description": "Updates the tabindex of the host element to disable or enable the link.\nWhen disabled, the link is not focusable or clickable, and tabindex is set to -1\nand aria-disabled attribute is set to true\nWhen link is not disabled, the previous tabindex of the host element is restored\nand aria-disabled attribute is removed."
-            },
-            {
-              "kind": "method",
-              "name": "updateTrailingIcon",
-              "privacy": "private",
-              "description": "Method to create and append trailing icon to the first anchor element in the slot.\nIf no icon name is provided, no icon will be rendered."
+              "description": "Sets or removes `aria-disabled` and updates `tabIndex` to reflect\nthe disabled state. When disabled, the element becomes unfocusable;\nwhen enabled, the previous `tabIndex` is restored."
             },
             {
               "kind": "field",
@@ -8737,6 +8804,21 @@
                 "module": "utils/mixins/DisabledMixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "iconName",
@@ -8751,6 +8833,28 @@
               }
             }
           ],
+          "events": [
+            {
+              "description": "(React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.",
+              "name": "click",
+              "reactName": "onClick"
+            },
+            {
+              "description": "(React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.",
+              "name": "keydown",
+              "reactName": "onKeyDown"
+            },
+            {
+              "description": "(React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.",
+              "name": "focus",
+              "reactName": "onFocus"
+            },
+            {
+              "description": "(React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.",
+              "name": "blur",
+              "reactName": "onBlur"
+            }
+          ],
           "attributes": [
             {
               "name": "inline",
@@ -8779,6 +8883,32 @@
               "default": "large",
               "fieldName": "size"
             },
+            {
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "'#'",
+              "description": "Href for navigation. The URL that the hyperlink points to",
+              "fieldName": "href"
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "default": "'_self'",
+              "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
+              "fieldName": "target"
+            },
+            {
+              "name": "rel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
+              "fieldName": "rel"
+            },
             {
               "name": "disabled",
               "type": {
@@ -8792,6 +8922,19 @@
                 "module": "src/utils/mixins/DisabledMixin.ts"
               }
             },
+            {
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
+              }
+            },
             {
               "name": "icon-name",
               "type": {
@@ -8810,6 +8953,10 @@
               "name": "DisabledMixin",
               "module": "/src/utils/mixins/DisabledMixin"
             },
+            {
+              "name": "TabIndexMixin",
+              "module": "/src/utils/mixins/TabIndexMixin"
+            },
             {
               "name": "IconNameMixin",
               "module": "/src/utils/mixins/IconNameMixin"
@@ -8820,7 +8967,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-link",
-          "jsDoc": "/**\n * `mdc-link` component can be used to navigate to a different page\n * within the application or to an external site. It can be used to link to\n * emails or phone numbers.\n *\n * The `children` of the link component is expected to be an anchor element\n * containing the text, href, and other attributes.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-link\n *\n * @cssproperty --mdc-link-border-radius - Border radius of the link\n * @cssproperty --mdc-link-color-active - Text and icon color of the link in active state\n * @cssproperty --mdc-link-color-disabled - Text and icon color of the link in disabled state\n * @cssproperty --mdc-link-color-hover - Text and icon color of the link in hover state\n * @cssproperty --mdc-link-color-normal - Text and icon color of the link in normal state\n * @cssproperty --mdc-link-icon-margin-left - Gap between the text and icon (only applicable when an icon is set)\n * @cssproperty --mdc-link-inverted-color-active - Text and icon color of the inverted link in active state\n * @cssproperty --mdc-link-inverted-color-disabled - Text and icon color of the inverted link in disabled state\n * @cssproperty --mdc-link-inverted-color-hover - Text and icon color of the inverted link in hover state\n * @cssproperty --mdc-link-inverted-color-normal - Text and icon color of the inverted link in normal state\n * @cssproperty --mdc-link-text-decoration-disabled - Text decoration of the link in disabled state for all variants\n */",
+          "jsDoc": "/**\n * `mdc-link` component can be used to navigate to a different page\n * within the application or to an external site. It can be used to link to\n * emails or phone numbers.\n *\n * The `children` of the link component is expected to be the text content.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-link\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n * @cssproperty --mdc-link-border-radius - Border radius of the link\n * @cssproperty --mdc-link-color-active - Text and icon color of the link in active state\n * @cssproperty --mdc-link-color-disabled - Text and icon color of the link in disabled state\n * @cssproperty --mdc-link-color-hover - Text and icon color of the link in hover state\n * @cssproperty --mdc-link-color-normal - Text and icon color of the link in normal state\n * @cssproperty --mdc-link-icon-margin-left - Gap between the text and icon (only applicable when an icon is set)\n * @cssproperty --mdc-link-inverted-color-active - Text and icon color of the inverted link in active state\n * @cssproperty --mdc-link-inverted-color-disabled - Text and icon color of the inverted link in disabled state\n * @cssproperty --mdc-link-inverted-color-hover - Text and icon color of the inverted link in hover state\n * @cssproperty --mdc-link-inverted-color-normal - Text and icon color of the inverted link in normal state\n * @cssproperty --mdc-link-text-decoration-disabled - Text decoration of the link in disabled state for all variants\n */",
           "customElement": true
         }
       ],
@@ -16722,8 +16869,11 @@
             {
               "kind": "field",
               "name": "ariaStateKey",
+              "type": {
+                "text": "string | undefined"
+              },
               "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed'",
+              "default": "'aria-pressed' (when)",
               "attribute": "ariaStateKey",
               "reflects": true,
               "inheritedFrom": {
@@ -17016,8 +17166,11 @@
             },
             {
               "name": "ariaStateKey",
+              "type": {
+                "text": "string | undefined"
+              },
               "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed'",
+              "default": "'aria-pressed' (when)",
               "fieldName": "ariaStateKey",
               "inheritedFrom": {
                 "name": "Buttonsimple",

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

@@ -1,11 +1,11 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/link';
 /**
  * `mdc-link` component can be used to navigate to a different page
  * within the application or to an external site. It can be used to link to
  * emails or phone numbers.
  *
- * The `children` of the link component is expected to be an anchor element
- * containing the text, href, and other attributes.
+ * The `children` of the link component is expected to be the text content.
  *
  * For `icon`, the `mdc-icon` component is used to render the icon.
  *
@@ -13,6 +13,11 @@ import Component from '../../components/link';
  *
  * @tagname mdc-link
  *
+ * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.
+ * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.
+ * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.
+ * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.
+ *
  * @cssproperty --mdc-link-border-radius - Border radius of the link
  * @cssproperty --mdc-link-color-active - Text and icon color of the link in active state
  * @cssproperty --mdc-link-color-disabled - Text and icon color of the link in disabled state
@@ -25,5 +30,10 @@ import Component from '../../components/link';
  * @cssproperty --mdc-link-inverted-color-normal - Text and icon color of the inverted link in normal state
  * @cssproperty --mdc-link-text-decoration-disabled - Text decoration of the link in disabled state for all variants
  */
-declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: EventName<MouseEvent>;
+    onKeyDown: EventName<KeyboardEvent>;
+    onFocus: EventName<FocusEvent>;
+    onBlur: EventName<Event>;
+}>;
 export default reactWrapper;

package/dist/react/link/index.js

@@ -7,8 +7,7 @@ import { TAG_NAME } from '../../components/link/link.constants';
  * within the application or to an external site. It can be used to link to
  * emails or phone numbers.
  *
- * The `children` of the link component is expected to be an anchor element
- * containing the text, href, and other attributes.
+ * The `children` of the link component is expected to be the text content.
  *
  * For `icon`, the `mdc-icon` component is used to render the icon.
  *
@@ -16,6 +15,11 @@ import { TAG_NAME } from '../../components/link/link.constants';
  *
  * @tagname mdc-link
  *
+ * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.
+ * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.
+ * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.
+ * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.
+ *
  * @cssproperty --mdc-link-border-radius - Border radius of the link
  * @cssproperty --mdc-link-color-active - Text and icon color of the link in active state
  * @cssproperty --mdc-link-color-disabled - Text and icon color of the link in disabled state
@@ -32,7 +36,12 @@ const reactWrapper = createComponent({
     tagName: TAG_NAME,
     elementClass: Component,
     react: React,
-    events: {},
+    events: {
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onFocus: 'focus',
+        onBlur: 'blur',
+    },
     displayName: 'Link',
 });
 export default reactWrapper;

package/package.json

@@ -39,5 +39,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.53.7"
+  "version": "0.53.9"
 }