@momentum-design/components 0.112.1 → 0.112.2

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

@@ -22,6 +22,11 @@ declare const ButtonLink_base: import("../../utils/mixins/index.types").Construc
  * @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.
  *
+ * @csspart anchor - The anchor element that wraps the buttonlink content.
+ * @csspart prefix-icon - The prefix icon element.
+ * @csspart button-text - The slot containing the buttonlink text.
+ * @csspart postfix-icon - The postfix icon element.
+ *
  */
 declare class ButtonLink extends ButtonLink_base {
     /**

package/dist/components/buttonlink/buttonlink.component.js

@@ -9,10 +9,12 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import Button from '../button/button.component';
 import { ButtonComponentMixin } from '../../utils/mixins/ButtonComponentMixin';
 import { DEFAULTS } from '../button/button.constants';
 import Linksimple from '../linksimple/linksimple.component';
+import styles from './buttonlink.styles';
 /**
  * `mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural
  * features of `mdc-button`. This includes support for variants, sizing, and optional
@@ -33,6 +35,11 @@ import Linksimple from '../linksimple/linksimple.component';
  * @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.
  *
+ * @csspart anchor - The anchor element that wraps the buttonlink content.
+ * @csspart prefix-icon - The prefix icon element.
+ * @csspart button-text - The slot containing the buttonlink text.
+ * @csspart postfix-icon - The postfix icon element.
+ *
  */
 class ButtonLink extends ButtonComponentMixin(Linksimple) {
     constructor() {
@@ -85,18 +92,42 @@ class ButtonLink extends ButtonComponentMixin(Linksimple) {
         }
     }
     render() {
+        var _a;
         return html `
-      ${this.prefixIcon
-            ? html ` <mdc-icon name="${this.prefixIcon}" part="prefix-icon" length-unit="rem"></mdc-icon>`
+      <a
+        class="mdc-focus-ring"
+        part="anchor"
+        href="${this.href}"
+        target="${this.target}"
+        rel="${ifDefined(this.rel)}"
+        download="${ifDefined(this.download)}"
+        ping="${ifDefined(this.ping)}"
+        hreflang="${ifDefined(this.hreflang)}"
+        type="${ifDefined(this.type)}"
+        referrerpolicy="${ifDefined(this.referrerpolicy)}"
+        aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+        tabindex="${this.disabled ? -1 : 0}"
+      >
+        ${this.prefixIcon
+            ? html `<mdc-icon
+              name="${this.prefixIcon}"
+              part="prefix-icon"
+              length-unit="rem"
+            ></mdc-icon>`
             : ''}
-      <slot @slotchange=${this.inferButtonType}></slot>
-      ${this.postfixIcon
-            ? html ` <mdc-icon name="${this.postfixIcon}" part="postfix-icon" length-unit="rem"></mdc-icon>`
+        <slot @slotchange="${this.inferButtonType}" part="button-text"></slot>
+        ${this.postfixIcon
+            ? html `<mdc-icon
+              name="${this.postfixIcon}"
+              part="postfix-icon"
+              length-unit="rem"
+            ></mdc-icon>`
             : ''}
+      </a>
     `;
     }
 }
-ButtonLink.styles = [...Button.styles];
+ButtonLink.styles = [...Button.styles, ...styles];
 __decorate([
     property({ type: Number, reflect: true }),
     __metadata("design:type", Number)

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

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

package/dist/components/buttonlink/buttonlink.styles.js

@@ -0,0 +1,58 @@
+import { css } from 'lit';
+import { hostFocusRingStyles } from '../../utils/styles';
+const styles = css `
+  :host {
+    border: unset;
+  }
+
+  :host([data-btn-type='pill']),
+  :host([data-btn-type='pill-with-icon']) {
+    padding: unset;
+  }
+
+  :host([data-btn-type='pill'][size='24'])::part(anchor),
+  :host([data-btn-type='pill-with-icon'][size='24'])::part(anchor) {
+    padding: 0 0.625rem;
+  }
+
+  :host([data-btn-type='pill'][size='32'])::part(anchor),
+  :host([data-btn-type='pill-with-icon'][size='32'])::part(anchor),
+  :host([data-btn-type='pill'][size='28'])::part(anchor),
+  :host([data-btn-type='pill-with-icon'][size='28'])::part(anchor) {
+    padding: 0 0.75rem;
+  }
+
+  :host([data-btn-type='pill'][size='40'])::part(anchor),
+  :host([data-btn-type='pill-with-icon'][size='40'])::part(anchor) {
+    padding: 0 1rem;
+  }
+
+  :host([disabled]) {
+    cursor: auto;
+    pointer-events: none;
+  }
+
+  /* Anchor inside ButtonLink */
+  :host::part(anchor) {
+    color: inherit;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: inherit;
+    height: 100%;
+    width: 100%;
+    border-radius: inherit;
+    border: 1px solid transparent;
+  }
+
+  :host([variant='secondary'])::part(anchor) {
+    border-color: var(--mdc-button-secondary-border-color);
+  }
+
+  :host([variant='secondary'][disabled])::part(anchor),
+  :host([variant='secondary'][soft-disabled])::part(anchor) {
+    border-color: var(--mdc-button-secondary-disabled-border-color);
+  }
+`;
+export default [styles, ...hostFocusRingStyles(true)];

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

@@ -19,6 +19,9 @@ declare const Link_base: import("../../utils/mixins/index.types").Constructor<im
  * @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.
+ *
+ * @csspart anchor - The anchor element that wraps the link content.
+ * @csspart icon - The icon element.
  */
 declare class Link extends Link_base {
     /**

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

@@ -9,6 +9,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import Linksimple from '../linksimple/linksimple.component';
 import { DEFAULTS, LINK_ICON_SIZES, LINK_SIZES } from './link.constants';
@@ -30,6 +31,9 @@ import styles from './link.styles';
  * @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.
+ *
+ * @csspart anchor - The anchor element that wraps the link content.
+ * @csspart icon - The icon element.
  */
 class Link extends IconNameMixin(Linksimple) {
     constructor() {
@@ -61,11 +65,32 @@ class Link extends IconNameMixin(Linksimple) {
         }
     }
     render() {
+        var _a;
         return html `
-      <slot></slot>
-      ${this.iconName
-            ? html ` <mdc-icon name=${this.iconName} size=${this.getIconSize()} length-unit="rem"></mdc-icon> `
+      <a
+        class="mdc-focus-ring"
+        part="anchor"
+        href="${this.href}"
+        target="${this.target}"
+        rel="${ifDefined(this.rel)}"
+        download="${ifDefined(this.download)}"
+        ping="${ifDefined(this.ping)}"
+        hreflang="${ifDefined(this.hreflang)}"
+        type="${ifDefined(this.type)}"
+        referrerpolicy="${ifDefined(this.referrerpolicy)}"
+        aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+        tabindex="${this.disabled ? -1 : 0}"
+      >
+        <slot></slot>
+        ${this.iconName
+            ? html `<mdc-icon
+              part="icon"
+              name="${this.iconName}"
+              size="${this.getIconSize()}"
+              length-unit="rem"
+            ></mdc-icon>`
             : nothing}
+      </a>
     `;
     }
 }

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

@@ -1,10 +1,12 @@
 import { css } from 'lit';
 const styles = css `
-  :host {
+  :host::part(anchor) {
+    display: flex;
+    align-items: center;
     gap: 0.25rem;
   }
 
-  :host([size='large']) {
+  :host([size='large'])::part(anchor) {
     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);
@@ -12,7 +14,7 @@ const styles = css `
     text-transform: var(--mds-font-apps-body-large-regular-text-case);
   }
 
-  :host([size='midsize']) {
+  :host([size='midsize'])::part(anchor) {
     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);
@@ -20,7 +22,7 @@ const styles = css `
     text-transform: var(--mds-font-apps-body-midsize-regular-text-case);
   }
 
-  :host([size='small']) {
+  :host([size='small'])::part(anchor) {
     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);
@@ -28,9 +30,9 @@ const styles = css `
     text-transform: var(--mds-font-apps-body-small-regular-text-case);
   }
 
-  :host([size='large']:hover),
-  :host([size='large']:active),
-  :host([size='large'][inline]) {
+  :host([size='large']:hover)::part(anchor),
+  :host([size='large']:active)::part(anchor),
+  :host([size='large'][inline])::part(anchor) {
     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);
@@ -38,9 +40,9 @@ const styles = css `
     text-transform: var(--mds-font-apps-body-large-regular-underline-text-case);
   }
 
-  :host([size='midsize']:hover),
-  :host([size='midsize']:active),
-  :host([size='midsize'][inline]) {
+  :host([size='midsize']:hover)::part(anchor),
+  :host([size='midsize']:active)::part(anchor),
+  :host([size='midsize'][inline])::part(anchor) {
     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);
@@ -48,9 +50,9 @@ const styles = css `
     text-transform: var(--mds-font-apps-body-midsize-regular-underline-text-case);
   }
 
-  :host([size='small']:hover),
-  :host([size='small']:active),
-  :host([size='small'][inline]) {
+  :host([size='small']:hover)::part(anchor),
+  :host([size='small']:active)::part(anchor),
+  :host([size='small'][inline])::part(anchor) {
     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);

package/dist/components/linkbutton/linkbutton.component.js

@@ -11,7 +11,7 @@ import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
-import Link from '../link/link.component';
+import Linksimple from '../linksimple/linksimple.component';
 import { DEFAULTS, LINKBUTTON_SIZES } from './linkbutton.constants';
 import { getIconSize } from './linkbutton.utils';
 import styles from './linkbutton.styles';
@@ -95,7 +95,7 @@ class LinkButton extends IconNameMixin(Buttonsimple) {
     `;
     }
 }
-LinkButton.styles = [...Link.styles, ...styles];
+LinkButton.styles = [...Linksimple.styles, ...styles];
 __decorate([
     property({ type: Number, reflect: true }),
     __metadata("design:type", Number)

package/dist/components/linkbutton/linkbutton.styles.js

@@ -1,8 +1,18 @@
 import { css } from 'lit';
+import { hostFocusRingStyles } from '../../utils/styles';
 const styles = css `
   :host {
-    --mdc-link-color-disabled: var(--mds-color-theme-text-primary-disabled);
     gap: 0.25rem;
+    cursor: pointer;
+    text-decoration: none;
+    outline: none;
+    display: inline-flex;
+    align-items: center;
+    color: var(--mdc-link-color-normal);
+  }
+
+  :host([inverted]) {
+    color: var(--mdc-link-inverted-color-normal);
   }
 
   :host([size='16']) {
@@ -59,8 +69,35 @@ const styles = css `
     text-transform: var(--mds-font-apps-body-small-regular-underline-text-case);
   }
 
+  :host(:not([disabled]):hover) {
+    color: var(--mdc-link-color-hover);
+  }
+
+  :host(:not([disabled]):active) {
+    color: var(--mdc-link-color-active);
+  }
+
+  :host([inverted]:not([disabled]):hover) {
+    color: var(--mdc-link-inverted-color-hover);
+  }
+
+  :host([inverted]:not([disabled]):active) {
+    color: var(--mdc-link-inverted-color-active);
+  }
+
+  :host([disabled]) {
+    color: var(--mdc-link-color-disabled);
+    pointer-events: none;
+    text-decoration: none;
+  }
+
+  :host([inverted][disabled]) {
+    color: var(--mdc-link-inverted-color-disabled);
+  }
+
   :host([soft-disabled]) {
     color: var(--mdc-link-color-disabled);
+    pointer-events: none;
   }
 `;
-export default [styles];
+export default [styles, ...hostFocusRingStyles()];

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

@@ -1,6 +1,6 @@
 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;
+declare const Linksimple_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & 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.
@@ -25,6 +25,8 @@ declare const Linksimple_base: import("../../utils/mixins/index.types").Construc
  * @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.
+ *
+ * @csspart anchor - The anchor element that wraps the linksimple content.
  */
 declare class Linksimple extends Linksimple_base {
     /**
@@ -39,10 +41,12 @@ declare class Linksimple extends Linksimple_base {
     inverted: boolean;
     /**
      * Href for navigation. The URL that the hyperlink points to
+     * @default #
      */
     href: string;
     /**
      * Optional target: _blank, _self, _parent, _top and _unfencedTop
+     * @default _self
      */
     target: string;
     /**
@@ -50,14 +54,28 @@ declare class Linksimple extends Linksimple_base {
      */
     rel?: string;
     /**
-     * Stores the previous tabindex if set by user
-     * so it can be restored after disabling
-     * @internal
+     * Optional download attribute to instruct browsers to download the linked resource.
+     */
+    download?: string;
+    /**
+     * Optional ping attribute that defines a space-separated list of URLs to be notified if the link is followed.
+     */
+    ping?: string;
+    /**
+     * Optional hreflang attribute specifying the language of the linked resource.
+     */
+    hreflang?: string;
+    /**
+     * Optional type attribute indicating the MIME type of the linked resource.
+     */
+    type?: string;
+    /**
+     * Optional referrerpolicy attribute specifying how much referrer information to send.
      */
-    private prevTabindex;
+    referrerpolicy?: string;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    private handleNavigation;
+    protected handleNavigation(e: MouseEvent | KeyboardEvent): void;
     /**
      * Sets or removes `aria-disabled` and updates `tabIndex` to reflect
      * the disabled state. When disabled, the element becomes unfocusable;

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

@@ -9,9 +9,10 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { Component } from '../../models';
+import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
-import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
 import { DEFAULTS } from './linksimple.constants';
 import styles from './linksimple.styles';
 /**
@@ -38,8 +39,10 @@ import styles from './linksimple.styles';
  * @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.
+ *
+ * @csspart anchor - The anchor element that wraps the linksimple content.
  */
-class Linksimple extends DisabledMixin(TabIndexMixin(Component)) {
+class Linksimple extends DataAriaLabelMixin(DisabledMixin(Component)) {
     constructor() {
         super(...arguments);
         /**
@@ -54,22 +57,17 @@ class Linksimple extends DisabledMixin(TabIndexMixin(Component)) {
         this.inverted = DEFAULTS.INVERTED;
         /**
          * Href for navigation. The URL that the hyperlink points to
+         * @default #
          */
         this.href = '#';
         /**
          * Optional target: _blank, _self, _parent, _top and _unfencedTop
+         * @default _self
          */
         this.target = '_self';
-        /**
-         * Stores the previous tabindex if set by user
-         * so it can be restored after disabling
-         * @internal
-         */
-        this.prevTabindex = 0;
     }
     connectedCallback() {
         super.connectedCallback();
-        this.setAttribute('role', 'link');
         this.addEventListener('click', this.handleNavigation.bind(this));
         this.addEventListener('keydown', this.handleNavigation.bind(this));
     }
@@ -79,10 +77,9 @@ class Linksimple extends DisabledMixin(TabIndexMixin(Component)) {
         this.removeEventListener('keydown', this.handleNavigation.bind(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);
+        if (this.disabled) {
+            e.preventDefault();
+            e.stopImmediatePropagation();
         }
     }
     /**
@@ -95,13 +92,8 @@ class Linksimple extends DisabledMixin(TabIndexMixin(Component)) {
     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');
         }
     }
@@ -112,7 +104,25 @@ class Linksimple extends DisabledMixin(TabIndexMixin(Component)) {
         }
     }
     render() {
-        return html ` <slot></slot> `;
+        var _a;
+        return html `
+      <a
+        class='mdc-focus-ring'
+        part="anchor"
+        href="${this.href}"
+        target="${this.target}"
+        rel="${ifDefined(this.rel)}"
+        download="${ifDefined(this.download)}"
+        ping="${ifDefined(this.ping)}"
+        hreflang="${ifDefined(this.hreflang)}"
+        type="${ifDefined(this.type)}"
+        referrerpolicy="${ifDefined(this.referrerpolicy)}"
+        aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+        tabindex="${this.disabled ? -1 : 0}"
+      >
+        <slot></slot>
+      </a>
+    `;
     }
 }
 Linksimple.styles = [...Component.styles, ...styles];
@@ -136,4 +146,24 @@ __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)
 ], Linksimple.prototype, "rel", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Linksimple.prototype, "download", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Linksimple.prototype, "ping", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Linksimple.prototype, "hreflang", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Linksimple.prototype, "type", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Linksimple.prototype, "referrerpolicy", void 0);
 export default Linksimple;

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

@@ -15,60 +15,73 @@ const styles = [
       --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);
+      text-underline-offset: auto;
+      text-underline-position: from-font;
     }
 
     :host([inline]) {
       display: inline-flex;
     }
 
-    :host([inverted]) {
+    /* Base anchor styles */
+    :host::part(anchor) {
+      color: var(--mdc-link-color-normal);
+      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-transform: var(--mds-font-apps-body-large-regular-underline-text-case);
+      border-radius: var(--mdc-link-border-radius);
+      outline: none;
+      text-decoration: none; /* Prevent default underline */
+    }
+
+    /* Inverted color base */
+    :host([inverted])::part(anchor) {
       color: var(--mdc-link-inverted-color-normal);
     }
 
-    :host(:hover) {
+    /* Disabled state */
+    :host([disabled])::part(anchor),
+    :host([disabled]) {
+      color: var(--mdc-link-color-disabled);
+      pointer-events: none;
+      text-decoration: none;
+    }
+
+    :host([inverted][disabled])::part(anchor) {
+      color: var(--mdc-link-inverted-color-disabled);
+    }
+
+    /* Hover and active states for enabled links */
+    :host(:not([disabled]):hover)::part(anchor) {
       color: var(--mdc-link-color-hover);
+      text-decoration: var(--mds-font-apps-body-large-regular-underline-text-decoration);
     }
 
-    :host(:active) {
+    :host(:not([disabled]):active)::part(anchor) {
       color: var(--mdc-link-color-active);
       box-shadow: none;
+      text-decoration: var(--mds-font-apps-body-large-regular-underline-text-decoration);
     }
 
-    :host([inverted]:hover) {
+    /* Inverted variants hover & active */
+    :host([inverted]:not([disabled]):hover)::part(anchor) {
       color: var(--mdc-link-inverted-color-hover);
+      text-decoration: var(--mds-font-apps-body-large-regular-underline-text-decoration);
     }
 
-    :host([inverted]:active) {
+    :host([inverted]:not([disabled]):active)::part(anchor) {
       color: var(--mdc-link-inverted-color-active);
+      text-decoration: var(--mds-font-apps-body-large-regular-underline-text-decoration);
     }
 
-    :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);
+    /* Inline variant always shows underline */
+    :host([inline])::part(anchor) {
       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(),
+    ...hostFocusRingStyles(true),
 ];
 export default styles;