@momentum-design/components 0.16.17 → 0.16.18

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

@@ -0,0 +1,8 @@
+import Link from './link.component';
+import '../icon';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-link']: Link;
+    }
+}
+export default Link;

package/dist/components/link/index.js

@@ -0,0 +1,5 @@
+import Link from './link.component';
+import { TAG_NAME } from './link.constants';
+import '../icon';
+Link.register(TAG_NAME);
+export default Link;

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

@@ -0,0 +1,90 @@
+import { CSSResult, PropertyValueMap } from 'lit';
+import { Component } from '../../models';
+import { LinkSize } from './link.types';
+import { IconNames } from '../icon/icon.types';
+declare const Link_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
+/**
+ * `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 class Link extends Link_base {
+    /**
+     * Name of the icon (= filename) to be used as trailing icon for link.
+     *
+     * If no `icon` is provided, no icon will be rendered.
+     */
+    iconName?: IconNames;
+    /**
+     * The link can be inline or standalone.
+     * @default false
+     */
+    inline: boolean;
+    /**
+     * The link color can be inverted by setting the inverted attribute to true.
+     * @default false
+     */
+    inverted: boolean;
+    /**
+     * Size of the link.
+     * Acceptable values include:
+     *
+     * - 'small'
+     * - 'midsize'
+     * - 'large'
+     *
+     * @default large
+     */
+    size: LinkSize;
+    /**
+     * Used to store the previous tabindex value of the host element
+     * null value means that the host element did not have a tabindex attribute.
+     * @internal
+     */
+    private prevTabindex;
+    /**
+     * Method to get the size of the trailing icon based on the link size.
+     * @returns The icon size value and units.
+     */
+    private getIconSize;
+    /**
+     * Updates the tabindex of the host element to disable or enable the link.
+     * When disabled, the link is not focusable or clickable, and tabindex is set to -1
+     * and aria-disabled attribute is set to true
+     * When link is not disabled, the previous tabindex of the host element is restored
+     * and aria-disabled attribute is removed.
+     *
+     * @param disabled - The disabled state of icon
+     */
+    private setDisabled;
+    /**
+     * Method to create and append trailing icon to the first anchor element in the slot.
+     * If no icon name is provided, no icon will be rendered.
+     */
+    private updateTrailingIcon;
+    update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Link;

package/dist/components/link/link.component.js

@@ -0,0 +1,154 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Component } from '../../models';
+import { DEFAULTS, LINK_ICON_SIZES, LINK_SIZES } from './link.constants';
+import styles from './link.styles';
+import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
+/**
+ * `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
+ */
+class Link extends DisabledMixin(Component) {
+    constructor() {
+        super(...arguments);
+        /**
+         * The link can be inline or standalone.
+         * @default false
+         */
+        this.inline = DEFAULTS.INLINE;
+        /**
+         * The link color can be inverted by setting the inverted attribute to true.
+         * @default false
+         */
+        this.inverted = DEFAULTS.INVERTED;
+        /**
+         * Size of the link.
+         * Acceptable values include:
+         *
+         * - 'small'
+         * - 'midsize'
+         * - 'large'
+         *
+         * @default large
+         */
+        this.size = DEFAULTS.LINK_SIZE;
+        /**
+         * Used to store the previous tabindex value of the host element
+         * null value means that the host element did not have a tabindex attribute.
+         * @internal
+         */
+        this.prevTabindex = null;
+    }
+    /**
+     * Method to get the size of the trailing icon based on the link size.
+     * @returns The icon size value and units.
+     */
+    getIconSize() {
+        switch (this.size) {
+            case LINK_SIZES.SMALL:
+                return LINK_ICON_SIZES.SMALL;
+            case LINK_SIZES.MIDSIZE:
+                return LINK_ICON_SIZES.MIDSIZE;
+            default:
+                return LINK_ICON_SIZES.LARGE;
+        }
+    }
+    /**
+     * Updates the tabindex of the host element to disable or enable the link.
+     * When disabled, the link is not focusable or clickable, and tabindex is set to -1
+     * and aria-disabled attribute is set to true
+     * When link is not disabled, the previous tabindex of the host element is restored
+     * and aria-disabled attribute is removed.
+     *
+     * @param disabled - The disabled state of icon
+     */
+    setDisabled(disabled) {
+        if (disabled) {
+            this.prevTabindex = this.hasAttribute('tabindex') ? this.tabIndex : null;
+            this.tabIndex = -1;
+            this.setAttribute('aria-disabled', 'true');
+        }
+        else if (this.prevTabindex === null) {
+            this.removeAttribute('tabindex');
+            this.removeAttribute('aria-disabled');
+        }
+        else {
+            this.tabIndex = this.prevTabindex;
+            this.removeAttribute('aria-disabled');
+        }
+    }
+    /**
+     * Method to create and append trailing icon to the first anchor element in the slot.
+     * If no icon name is provided, no icon will be rendered.
+     */
+    updateTrailingIcon() {
+        var _a, _b;
+        const anchorElement = (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) === null || _b === void 0 ? void 0 : _b.assignedElements({ flatten: true }).find((element) => element.tagName === 'A');
+        const iconSize = this.getIconSize();
+        if (this.iconName && anchorElement) {
+            const trailingIcon = document.createElement('mdc-icon');
+            trailingIcon.setAttribute('name', this.iconName);
+            trailingIcon.setAttribute('size', `${iconSize}`);
+            trailingIcon.setAttribute('length-unit', 'rem');
+            anchorElement.appendChild(trailingIcon);
+        }
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('disabled')) {
+            this.setDisabled(this.disabled);
+        }
+    }
+    render() {
+        return html `<slot @slotchange=${this.updateTrailingIcon}></slot>`;
+    }
+}
+Link.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, attribute: 'icon-name' }),
+    __metadata("design:type", String)
+], Link.prototype, "iconName", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Link.prototype, "inline", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Link.prototype, "inverted", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Link.prototype, "size", void 0);
+export default Link;

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

@@ -0,0 +1,17 @@
+declare const TAG_NAME: "mdc-link";
+declare const LINK_SIZES: {
+    readonly LARGE: "large";
+    readonly MIDSIZE: "midsize";
+    readonly SMALL: "small";
+};
+declare const LINK_ICON_SIZES: {
+    readonly LARGE: 1;
+    readonly MIDSIZE: 0.875;
+    readonly SMALL: 0.75;
+};
+declare const DEFAULTS: {
+    INLINE: boolean;
+    INVERTED: boolean;
+    LINK_SIZE: "large";
+};
+export { DEFAULTS, LINK_ICON_SIZES, LINK_SIZES, TAG_NAME, };

package/dist/components/link/link.constants.js

@@ -0,0 +1,18 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('link');
+const LINK_SIZES = {
+    LARGE: 'large',
+    MIDSIZE: 'midsize',
+    SMALL: 'small',
+};
+const LINK_ICON_SIZES = {
+    LARGE: 1,
+    MIDSIZE: 0.875,
+    SMALL: 0.75,
+};
+const DEFAULTS = {
+    INLINE: false,
+    INVERTED: false,
+    LINK_SIZE: LINK_SIZES.LARGE,
+};
+export { DEFAULTS, LINK_ICON_SIZES, LINK_SIZES, TAG_NAME, };

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

@@ -2678,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, };