@momentum-design/components 0.56.1 → 0.57.0

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

@@ -1,7 +1,7 @@
-import { PropertyValues, CSSResult } from 'lit';
-import { Component } from '../../models';
+import { CSSResult } from 'lit';
 import type { LinkSize } from './link.types';
-declare const Link_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Component;
+import Linksimple from '../linksimple/linksimple.component';
+declare const Link_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Linksimple;
 /**
  * `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
@@ -15,34 +15,12 @@ declare const Link_base: import("../../utils/mixins/index.types").Constructor<im
  *
  * @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
- * @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
+ * @event click - (React: onClick) Fired when the user activates the Link using a mouse or assistive technology.
+ * @event keydown - (React: onKeyDown) Fired when the user presses a key while the Link has focus.
+ * @event focus - (React: onFocus) Fired when the Link receives keyboard or mouse focus.
+ * @event blur - (React: onBlur) Fired when the Link loses keyboard or mouse focus.
  */
 declare class Link extends Link_base {
-    /**
-     * 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:
@@ -54,41 +32,11 @@ declare class Link extends Link_base {
      * @default large
      */
     size: LinkSize;
-    /**
-     * Href for navigation. The URL that the hyperlink points to
-     */
-    href: string;
-    /**
-     * Optional target: _blank, _self, _parent, _top and _unfencedTop
-     */
-    target: string;
-    /**
-     * Optional rel attribute that defines the relationship of the linked URL as space-separated link types.
-     */
-    rel?: string;
-    /**
-     * Stores the previous tabindex if set by user
-     * so it can be restored after disabling
-     * @internal
-     */
-    private prevTabindex;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private handleNavigation;
     /**
      * Method to get the size of the trailing icon based on the link size.
      * @returns The icon size value and units.
      */
     private getIconSize;
-    /**
-     * Sets or removes `aria-disabled` and updates `tabIndex` to reflect
-     * the disabled state. When disabled, the element becomes unfocusable;
-     * when enabled, the previous `tabIndex` is restored.
-     *
-     * @param disabled - Whether the element should be disabled
-     */
-    private setDisabled;
-    update(changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

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

@@ -9,12 +9,10 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-import { Component } from '../../models';
-import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import { DEFAULTS, LINK_ICON_SIZES, LINK_SIZES } from './link.constants';
 import styles from './link.styles';
-import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
+import Linksimple from '../linksimple/linksimple.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
@@ -28,36 +26,14 @@ import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
  *
  * @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
- * @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
+ * @event click - (React: onClick) Fired when the user activates the Link using a mouse or assistive technology.
+ * @event keydown - (React: onKeyDown) Fired when the user presses a key while the Link has focus.
+ * @event focus - (React: onFocus) Fired when the Link receives keyboard or mouse focus.
+ * @event blur - (React: onBlur) Fired when the Link loses keyboard or mouse focus.
  */
-class Link extends DisabledMixin(TabIndexMixin(IconNameMixin(Component))) {
+class Link extends IconNameMixin(Linksimple) {
     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:
@@ -69,38 +45,6 @@ class Link extends DisabledMixin(TabIndexMixin(IconNameMixin(Component))) {
          * @default large
          */
         this.size = DEFAULTS.LINK_SIZE;
-        /**
-         * Href for navigation. The URL that the hyperlink points to
-         */
-        this.href = '#';
-        /**
-         * Optional target: _blank, _self, _parent, _top and _unfencedTop
-         */
-        this.target = '_self';
-        /**
-         * Stores the previous tabindex if set by user
-         * so it can be restored after disabling
-         * @internal
-         */
-        this.prevTabindex = 0;
-        this.handleNavigation = (e) => {
-            if ((e.type === 'click' || (e instanceof KeyboardEvent && e.key === 'Enter')) && this.href) {
-                if (this.disabled)
-                    return;
-                window.open(this.href, this.target, this.rel);
-            }
-        };
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.setAttribute('role', 'link');
-        this.addEventListener('click', this.handleNavigation);
-        this.addEventListener('keydown', this.handleNavigation);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('click', this.handleNavigation);
-        this.removeEventListener('keydown', this.handleNavigation);
     }
     /**
      * Method to get the size of the trailing icon based on the link size.
@@ -116,32 +60,6 @@ class Link extends DisabledMixin(TabIndexMixin(IconNameMixin(Component))) {
                 return LINK_ICON_SIZES.LARGE;
         }
     }
-    /**
-     * Sets or removes `aria-disabled` and updates `tabIndex` to reflect
-     * the disabled state. When disabled, the element becomes unfocusable;
-     * when enabled, the previous `tabIndex` is restored.
-     *
-     * @param disabled - Whether the element should be disabled
-     */
-    setDisabled(disabled) {
-        if (disabled) {
-            this.setAttribute('aria-disabled', 'true');
-            this.prevTabindex = this.tabIndex;
-            this.tabIndex = -1;
-        }
-        else {
-            if (this.tabIndex === -1) {
-                this.tabIndex = this.prevTabindex;
-            }
-            this.removeAttribute('aria-disabled');
-        }
-    }
-    update(changedProperties) {
-        super.update(changedProperties);
-        if (changedProperties.has('disabled')) {
-            this.setDisabled(this.disabled);
-        }
-    }
     render() {
         return html `
       <slot></slot>
@@ -155,29 +73,9 @@ class Link extends DisabledMixin(TabIndexMixin(IconNameMixin(Component))) {
     `;
     }
 }
-Link.styles = [...Component.styles, ...styles];
-__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);
+Link.styles = [...Linksimple.styles, ...styles];
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)
 ], Link.prototype, "size", void 0);
-__decorate([
-    property({ type: String, reflect: true }),
-    __metadata("design:type", Object)
-], Link.prototype, "href", void 0);
-__decorate([
-    property({ type: String, reflect: true }),
-    __metadata("design:type", Object)
-], Link.prototype, "target", void 0);
-__decorate([
-    property({ type: String, reflect: true }),
-    __metadata("design:type", String)
-], Link.prototype, "rel", void 0);
 export default Link;

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

@@ -10,8 +10,6 @@ declare const LINK_ICON_SIZES: {
     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

@@ -11,8 +11,6 @@ const LINK_ICON_SIZES = {
     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

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

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

@@ -1,59 +1,7 @@
 import { css } from 'lit';
-import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
-const styles = [hostFitContentStyles, css `
+const styles = 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);
-    gap: var(--mdc-link-icon-margin-left);
-    text-underline-offset: auto;
-    text-underline-position: from-font;
-    cursor: pointer;
-  }
-
-  :host([inline]) {
-    display: inline-flex;
-  }
-
-  :host(:hover) {
-    color: var(--mdc-link-color-hover);
-  }
-
-  :host(:active) {
-    color: var(--mdc-link-color-active);
-    box-shadow: none;
-  }
-
-  :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([disabled]) {
-    color: var(--mdc-link-color-disabled);
-    pointer-events: none;
-  }
-
-  :host([inverted][disabled]) {
-    color: var(--mdc-link-inverted-color-disabled);
+    gap: 0.25rem;
   }
 
   :host([size="large"]) {
@@ -109,6 +57,5 @@ const styles = [hostFitContentStyles, css `
     text-decoration: var(--mds-font-apps-body-small-regular-underline-text-decoration);
     text-transform: var(--mds-font-apps-body-small-regular-underline-text-case);
   }
-`, ...hostFocusRingStyles(),
-];
-export default styles;
+`;
+export default [styles];

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

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

package/dist/components/linksimple/index.js

@@ -0,0 +1,4 @@
+import Linksimple from './linksimple.component';
+import { TAG_NAME } from './linksimple.constants';
+Linksimple.register(TAG_NAME);
+export default Linksimple;

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

@@ -0,0 +1,73 @@
+import { PropertyValues, CSSResult } from 'lit';
+import { Component } from '../../models';
+declare const Linksimple_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & typeof Component;
+/**
+ * `mdc-linksimple` is a lightweight link component that can be used to navigate
+ * within the application or to an external URL. It does not have any predefined default size.
+ *
+ * The `children` of the `mdc-linksimple` component can be customized to suit
+ * different use cases, including text, icons, or other inline content. For the child to be an icon,
+ * the `mdc-icon` component should be used to render.
+ *
+ * @tagname mdc-linksimple
+ *
+ * @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 - Color of the link’s child content in the active state.
+ * @cssproperty --mdc-link-color-disabled - Color of the link’s child content in the disabled state.
+ * @cssproperty --mdc-link-color-hover - Color of the link’s child content in the hover state.
+ * @cssproperty --mdc-link-color-normal - Color of the link’s child content in the normal state.
+ * @cssproperty --mdc-link-inverted-color-active - Color of the inverted link’s child content in the active state.
+ * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted link’s child content in the disabled state.
+ * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted link’s child content in the hover state.
+ * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted link’s child content in the normal state.
+ */
+declare class Linksimple extends Linksimple_base {
+    /**
+     * 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;
+    /**
+     * Href for navigation. The URL that the hyperlink points to
+     */
+    href: string;
+    /**
+     * Optional target: _blank, _self, _parent, _top and _unfencedTop
+     */
+    target: string;
+    /**
+     * Optional rel attribute that defines the relationship of the linked URL as space-separated link types.
+     */
+    rel?: string;
+    /**
+     * Stores the previous tabindex if set by user
+     * so it can be restored after disabling
+     * @internal
+     */
+    private prevTabindex;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleNavigation;
+    /**
+     * Sets or removes `aria-disabled` and updates `tabIndex` to reflect
+     * the disabled state. When disabled, the element becomes unfocusable;
+     * when enabled, the previous `tabIndex` is restored.
+     *
+     * @param disabled - Whether the element should be disabled
+     */
+    private setDisabled;
+    update(changedProperties: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Linksimple;

package/dist/components/linksimple/linksimple.component.js

@@ -0,0 +1,141 @@
+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 { DisabledMixin } from '../../utils/mixins/DisabledMixin';
+import { DEFAULTS } from './linksimple.constants';
+import styles from './linksimple.styles';
+import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
+/**
+ * `mdc-linksimple` is a lightweight link component that can be used to navigate
+ * within the application or to an external URL. It does not have any predefined default size.
+ *
+ * The `children` of the `mdc-linksimple` component can be customized to suit
+ * different use cases, including text, icons, or other inline content. For the child to be an icon,
+ * the `mdc-icon` component should be used to render.
+ *
+ * @tagname mdc-linksimple
+ *
+ * @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 - Color of the link’s child content in the active state.
+ * @cssproperty --mdc-link-color-disabled - Color of the link’s child content in the disabled state.
+ * @cssproperty --mdc-link-color-hover - Color of the link’s child content in the hover state.
+ * @cssproperty --mdc-link-color-normal - Color of the link’s child content in the normal state.
+ * @cssproperty --mdc-link-inverted-color-active - Color of the inverted link’s child content in the active state.
+ * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted link’s child content in the disabled state.
+ * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted link’s child content in the hover state.
+ * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted link’s child content in the normal state.
+ */
+class Linksimple extends DisabledMixin(TabIndexMixin(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;
+        /**
+         * Href for navigation. The URL that the hyperlink points to
+         */
+        this.href = '#';
+        /**
+         * Optional target: _blank, _self, _parent, _top and _unfencedTop
+         */
+        this.target = '_self';
+        /**
+         * Stores the previous tabindex if set by user
+         * so it can be restored after disabling
+         * @internal
+         */
+        this.prevTabindex = 0;
+        this.handleNavigation = (e) => {
+            if ((e.type === 'click' || (e instanceof KeyboardEvent && e.key === 'Enter')) && this.href) {
+                if (this.disabled)
+                    return;
+                window.open(this.href, this.target, this.rel);
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'link');
+        this.addEventListener('click', this.handleNavigation);
+        this.addEventListener('keydown', this.handleNavigation);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.handleNavigation);
+        this.removeEventListener('keydown', this.handleNavigation);
+    }
+    /**
+     * Sets or removes `aria-disabled` and updates `tabIndex` to reflect
+     * the disabled state. When disabled, the element becomes unfocusable;
+     * when enabled, the previous `tabIndex` is restored.
+     *
+     * @param disabled - Whether the element should be disabled
+     */
+    setDisabled(disabled) {
+        if (disabled) {
+            this.setAttribute('aria-disabled', 'true');
+            this.prevTabindex = this.tabIndex;
+            this.tabIndex = -1;
+        }
+        else {
+            if (this.tabIndex === -1) {
+                this.tabIndex = this.prevTabindex;
+            }
+            this.removeAttribute('aria-disabled');
+        }
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('disabled')) {
+            this.setDisabled(this.disabled);
+        }
+    }
+    render() {
+        return html `
+      <slot></slot>
+    `;
+    }
+}
+Linksimple.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Linksimple.prototype, "inline", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Linksimple.prototype, "inverted", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], Linksimple.prototype, "href", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], Linksimple.prototype, "target", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Linksimple.prototype, "rel", void 0);
+export default Linksimple;

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

@@ -0,0 +1,6 @@
+declare const TAG_NAME: "mdc-linksimple";
+declare const DEFAULTS: {
+    INLINE: boolean;
+    INVERTED: boolean;
+};
+export { DEFAULTS, TAG_NAME };

package/dist/components/linksimple/linksimple.constants.js

@@ -0,0 +1,7 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('linksimple');
+const DEFAULTS = {
+    INLINE: false,
+    INVERTED: false,
+};
+export { DEFAULTS, TAG_NAME };

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

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

package/dist/components/linksimple/linksimple.styles.js

@@ -0,0 +1,72 @@
+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-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);
+
+    border-radius: var(--mdc-link-border-radius);
+    color: var(--mdc-link-color-normal);
+    text-underline-offset: auto;
+    text-underline-position: from-font;
+    cursor: pointer;
+    
+    /* based on default linksimple size (large) */
+    line-height: var(--mds-font-apps-body-large-regular-line-height);
+  }
+
+  :host([inline]) {
+    display: inline-flex;
+  }
+
+  :host([inverted]) {
+    color: var(--mdc-link-inverted-color-normal);
+  }
+
+  :host(:hover) {
+    color: var(--mdc-link-color-hover);
+  }
+
+  :host(:active) {
+    color: var(--mdc-link-color-active);
+    box-shadow: none;
+  }
+
+  :host([inverted]:hover) {
+    color: var(--mdc-link-inverted-color-hover);
+  }
+
+  :host([inverted]:active) {
+    color: var(--mdc-link-inverted-color-active);
+  }
+
+  :host([disabled]) {
+    color: var(--mdc-link-color-disabled);
+    pointer-events: none;
+  }
+
+  :host([inverted][disabled]) {
+    color: var(--mdc-link-inverted-color-disabled);
+  }
+
+  /* based on default linksimple size (large) */
+  :host(:hover),
+  :host(:active),
+  :host([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);
+  }
+
+`, ...hostFocusRingStyles(),
+];
+export default styles;