@momentum-design/components 0.16.16 → 0.16.18

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

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

package/dist/components/link/link.styles.js

@@ -0,0 +1,116 @@
+import { css } from 'lit';
+import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
+const styles = [hostFitContentStyles, css `
+
+  :host {
+
+    --mdc-link-border-radius: 0.25rem;
+    --mdc-link-color-active: var(--mds-color-theme-text-accent-active);
+    --mdc-link-color-disabled: var(--mds-color-theme-text-primary-disabled);
+    --mdc-link-color-hover: var(--mds-color-theme-text-accent-hover);
+    --mdc-link-color-normal: var(--mds-color-theme-text-accent-normal);
+    --mdc-link-icon-margin-left: 0.25rem;
+    --mdc-link-inverted-color-active: var(--mds-color-theme-inverted-text-accent-active);
+    --mdc-link-inverted-color-disabled: var(--mds-color-theme-inverted-text-primary-disabled);
+    --mdc-link-inverted-color-hover: var(--mds-color-theme-inverted-text-accent-hover);
+    --mdc-link-inverted-color-normal: var(--mds-color-theme-inverted-text-accent-normal);
+    --mdc-link-text-decoration-disabled: underline;
+
+    border-radius: var(--mdc-link-border-radius);
+    color: var(--mdc-link-color-normal);
+  }
+
+  ::slotted(a) {
+    outline: none;
+    align-items: center;
+    color: inherit;
+    display: flex;
+    gap: var(--mdc-link-icon-margin-left);
+    text-decoration: inherit;
+    text-underline-offset: auto;
+    text-underline-position: from-font;
+  }
+
+  :host(:hover) {
+    color: var(--mdc-link-color-hover);
+  }
+
+  :host(:active) {
+    color: var(--mdc-link-color-active);
+  }
+
+  :host([inline]) {
+    display: inline-flex;
+  }
+
+  :host([inverted]) {
+    color: var(--mdc-link-inverted-color-normal);
+  }
+
+  :host([inverted]:hover) {
+    color: var(--mdc-link-inverted-color-hover);
+  }
+
+  :host([inverted]:active) {
+    color: var(--mdc-link-inverted-color-active);
+  }
+
+  :host([size="large"]) {
+    font-size: var(--mds-font-apps-body-large-regular-font-size);
+    font-weight: var(--mds-font-apps-body-large-regular-font-weight);
+    line-height: var(--mds-font-apps-body-large-regular-line-height);
+    text-decoration: var(--mds-font-apps-body-large-regular-text-decoration);
+    text-transform: var(--mds-font-apps-body-large-regular-text-case);
+  }
+
+  :host([size="midsize"]) {
+    font-size: var(--mds-font-apps-body-midsize-regular-font-size);
+    font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
+    line-height: var(--mds-font-apps-body-midsize-regular-line-height);
+    text-decoration: var(--mds-font-apps-body-midsize-regular-text-decoration);
+    text-transform: var(--mds-font-apps-body-midsize-regular-text-case);
+  }
+
+  :host([size="small"]) {
+    font-size: var(--mds-font-apps-body-small-regular-font-size);
+    font-weight: var(--mds-font-apps-body-small-regular-font-weight);
+    line-height: var(--mds-font-apps-body-small-regular-line-height);
+    text-decoration: var(--mds-font-apps-body-small-regular-text-decoration);
+    text-transform: var(--mds-font-apps-body-small-regular-text-case);
+  }
+
+  :host([size="large"]:hover), :host([size="large"]:active), :host([size="large"][inline]) {
+    font-size: var(--mds-font-apps-body-large-regular-underline-font-size);
+    font-weight: var(--mds-font-apps-body-large-regular-underline-font-weight);
+    line-height: var(--mds-font-apps-body-large-regular-underline-line-height);
+    text-decoration: var(--mds-font-apps-body-large-regular-underline-text-decoration);
+    text-transform: var(--mds-font-apps-body-large-regular-underline-text-case);
+  }
+
+  :host([size="midsize"]:hover), :host([size="midsize"]:active), :host([size="midsize"][inline]) {
+    font-size: var(--mds-font-apps-body-midsize-regular-underline-font-size);
+    font-weight: var(--mds-font-apps-body-midsize-regular-underline-font-weight);
+    line-height: var(--mds-font-apps-body-midsize-regular-underline-line-height);
+    text-decoration: var(--mds-font-apps-body-midsize-regular-underline-text-decoration);
+    text-transform: var(--mds-font-apps-body-midsize-regular-underline-text-case);
+  }
+
+  :host([size="small"]:hover), :host([size="small"]:active), :host([size="small"][inline]) {
+    font-size: var(--mds-font-apps-body-small-regular-underline-font-size);
+    font-weight: var(--mds-font-apps-body-small-regular-underline-font-weight);
+    line-height: var(--mds-font-apps-body-small-regular-underline-line-height);
+    text-decoration: var(--mds-font-apps-body-small-regular-underline-text-decoration);
+    text-transform: var(--mds-font-apps-body-small-regular-underline-text-case);
+  }
+
+  :host([disabled]) {
+    color: var(--mdc-link-color-disabled);
+    pointer-events: none;
+    text-decoration: var(--mdc-link-text-decoration-disabled);
+  }
+
+  :host([inverted][disabled]) {
+    color: var(--mdc-link-inverted-color-disabled);
+  }
+`, ...hostFocusRingStyles()];
+export default styles;

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

@@ -0,0 +1,4 @@
+import type { ValueOf } from '../../utils/types';
+import { LINK_SIZES } from './link.constants';
+type LinkSize = ValueOf<typeof LINK_SIZES>;
+export { LinkSize, };

package/dist/components/link/link.types.js

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

package/dist/custom-elements.json

@@ -2167,6 +2167,12 @@
           "kind": "class",
           "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",
+          "slots": [
+            {
+              "description": "slot to add the label info icon",
+              "name": "label-info"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -2205,14 +2211,6 @@
               "attribute": "help-text",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "labelInfoText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "label-info-text"
-            },
             {
               "kind": "method",
               "name": "renderLabelElement",
@@ -2224,17 +2222,6 @@
                 }
               }
             },
-            {
-              "kind": "method",
-              "name": "renderLabelInfoToggleTip",
-              "privacy": "protected",
-              "description": "displays a info icon, which when hovered over, displays the labelInfoText.\nThis is in beta and is subject to change once the toggletip component is ready.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
             {
               "kind": "method",
               "name": "renderHelpTextIcon",
@@ -2310,13 +2297,6 @@
               },
               "description": "The help text that is displayed below the input field.",
               "fieldName": "helpText"
-            },
-            {
-              "name": "label-info-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "labelInfoText"
             }
           ],
           "superclass": {
@@ -2324,7 +2304,7 @@
             "module": "/src/models"
           },
           "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 */",
+          "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 * @slot label-info - slot to add the label info icon\n *\n */",
           "customElement": true
         }
       ],
@@ -2698,6 +2678,227 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/link/link.component.js",
+      "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.",
+          "name": "Link",
+          "cssProperties": [
+            {
+              "description": "Border radius of the link",
+              "name": "--mdc-link-border-radius"
+            },
+            {
+              "description": "Text and icon color of the link in active state",
+              "name": "--mdc-link-color-active"
+            },
+            {
+              "description": "Text and icon color of the link in disabled state",
+              "name": "--mdc-link-color-disabled"
+            },
+            {
+              "description": "Text and icon color of the link in hover state",
+              "name": "--mdc-link-color-hover"
+            },
+            {
+              "description": "Text and icon color of the link in normal state",
+              "name": "--mdc-link-color-normal"
+            },
+            {
+              "description": "Gap between the text and icon (only applicable when an icon is set)",
+              "name": "--mdc-link-icon-margin-left"
+            },
+            {
+              "description": "Text and icon color of the inverted link in active state",
+              "name": "--mdc-link-inverted-color-active"
+            },
+            {
+              "description": "Text and icon color of the inverted link in disabled state",
+              "name": "--mdc-link-inverted-color-disabled"
+            },
+            {
+              "description": "Text and icon color of the inverted link in hover state",
+              "name": "--mdc-link-inverted-color-hover"
+            },
+            {
+              "description": "Text and icon color of the inverted link in normal state",
+              "name": "--mdc-link-inverted-color-normal"
+            },
+            {
+              "description": "Text decoration of the link in disabled state for all variants",
+              "name": "--mdc-link-text-decoration-disabled"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "iconName",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename) to be used as trailing icon for link.\n\nIf no `icon` is provided, no icon will be rendered.",
+              "attribute": "icon-name"
+            },
+            {
+              "kind": "field",
+              "name": "inline",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The link can be inline or standalone.",
+              "default": "false",
+              "attribute": "inline",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The link color can be inverted by setting the inverted attribute to true.",
+              "default": "false",
+              "attribute": "inverted",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "LinkSize"
+              },
+              "description": "Size of the link.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'",
+              "default": "large",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "getIconSize",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Method to get the size of the trailing icon based on the link size."
+            },
+            {
+              "kind": "method",
+              "name": "setDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The disabled state of icon"
+                }
+              ],
+              "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."
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "icon-name",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename) to be used as trailing icon for link.\n\nIf no `icon` is provided, no icon will be rendered.",
+              "fieldName": "iconName"
+            },
+            {
+              "name": "inline",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The link can be inline or standalone.",
+              "default": "false",
+              "fieldName": "inline"
+            },
+            {
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The link color can be inverted by setting the inverted attribute to true.",
+              "default": "false",
+              "fieldName": "inverted"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "LinkSize"
+              },
+              "description": "Size of the link.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'",
+              "default": "large",
+              "fieldName": "size"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "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 */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Link",
+            "module": "components/link/link.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/marker/marker.component.js",

package/dist/index.d.ts

@@ -12,6 +12,7 @@ import Divider from './components/divider';
 import Modalcontainer from './components/modalcontainer';
 import Buttonsimple from './components/buttonsimple';
 import Avatarbutton from './components/avatarbutton';
+import Link from './components/link';
 import type { TextType } from './components/text/text.types';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, Modalcontainer, Buttonsimple, Avatarbutton, };
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, Modalcontainer, Buttonsimple, Avatarbutton, Link, };
 export type { TextType, };

package/dist/index.js

@@ -12,4 +12,5 @@ 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, Modalcontainer, Buttonsimple, Avatarbutton, };
+import Link from './components/link';
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, Modalcontainer, Buttonsimple, Avatarbutton, Link, };

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

@@ -6,6 +6,8 @@ import Component from '../../components/formfieldwrapper';
  *
  * @tagname mdc-formfieldwrapper
  *
+ * @slot label-info - slot to add the label info icon
+ *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/formfieldwrapper/index.js

@@ -9,6 +9,8 @@ import { TAG_NAME } from '../../components/formfieldwrapper/formfieldwrapper.con
  *
  * @tagname mdc-formfieldwrapper
  *
+ * @slot label-info - slot to add the label info icon
+ *
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/react/index.d.ts

@@ -8,6 +8,7 @@ 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 Link } from './link';
 export { default as Marker } from './marker';
 export { default as Modalcontainer } from './modalcontainer';
 export { default as Presence } from './presence';

package/dist/react/index.js

@@ -8,6 +8,7 @@ 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 Link } from './link';
 export { default as Marker } from './marker';
 export { default as Modalcontainer } from './modalcontainer';
 export { default as Presence } from './presence';

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

@@ -0,0 +1,29 @@
+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.
+ *
+ * For `icon`, the `mdc-icon` component is used to render the icon.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-link
+ *
+ * @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
+ * @cssproperty --mdc-link-color-hover - Text and icon color of the link in hover state
+ * @cssproperty --mdc-link-color-normal - Text and icon color of the link in normal state
+ * @cssproperty --mdc-link-icon-margin-left - Gap between the text and icon (only applicable when an icon is set)
+ * @cssproperty --mdc-link-inverted-color-active - Text and icon color of the inverted link in active state
+ * @cssproperty --mdc-link-inverted-color-disabled - Text and icon color of the inverted link in disabled state
+ * @cssproperty --mdc-link-inverted-color-hover - Text and icon color of the inverted link in hover state
+ * @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, {}>;
+export default reactWrapper;

package/dist/react/link/index.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/link';
+import { TAG_NAME } from '../../components/link/link.constants';
+/**
+ * `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.
+ *
+ * For `icon`, the `mdc-icon` component is used to render the icon.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-link
+ *
+ * @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
+ * @cssproperty --mdc-link-color-hover - Text and icon color of the link in hover state
+ * @cssproperty --mdc-link-color-normal - Text and icon color of the link in normal state
+ * @cssproperty --mdc-link-icon-margin-left - Gap between the text and icon (only applicable when an icon is set)
+ * @cssproperty --mdc-link-inverted-color-active - Text and icon color of the inverted link in active state
+ * @cssproperty --mdc-link-inverted-color-disabled - Text and icon color of the inverted link in disabled state
+ * @cssproperty --mdc-link-inverted-color-hover - Text and icon color of the inverted link in hover state
+ * @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
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Link',
+});
+export default reactWrapper;

package/dist/utils/styles/index.js

@@ -56,13 +56,13 @@ const hostFocusRingStyles = (applyFocusRingOnClass = false) => {
       :host([disabled]:focus) {
         box-shadow: none;
       }
-      :host(:focus) {
+      :host(:focus), :host(:focus-within) {
         position: relative;
         box-shadow: ${boxShadow};
       }
       /* High Contrast Mode */
       @media (forced-colors: active) {
-        :host(:focus) {
+        :host(:focus), :host(:focus-within) {
           outline: 0.125rem solid var(--mds-color-theme-focus-default-0);
         }
       }

package/package.json

@@ -36,5 +36,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.16.16"
+  "version": "0.16.18"
 }