@momentum-design/components 0.53.8 → 0.54.0

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

@@ -18,18 +18,10 @@ declare const Checkbox_base: import("../../utils/mixins/index.types").Constructo
  * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.
  *
  * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.
- * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.
- * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.
  * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.
  * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.
- * @cssproperty --mdc-checkbox-disabled-background-color - Background color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.
- * @cssproperty --mdc-checkbox-disabled-icon-color - Icon color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-icon-background-color - Background color for an unselected checkbox.
- * @cssproperty --mdc-checkbox-icon-border-color - Default background color for an unselected checkbox.
- * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.
  * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
+ * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.
  */
 declare class Checkbox extends Checkbox_base implements AssociatedFormControl {
     /**

package/dist/components/checkbox/checkbox.component.js

@@ -14,7 +14,6 @@ import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
-import { ICON_NAME } from './checkbox.constants';
 import styles from './checkbox.styles';
 /**
  * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.
@@ -32,18 +31,10 @@ import styles from './checkbox.styles';
  * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.
  *
  * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.
- * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.
- * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.
  * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.
  * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.
- * @cssproperty --mdc-checkbox-disabled-background-color - Background color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.
- * @cssproperty --mdc-checkbox-disabled-icon-color - Icon color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-icon-background-color - Background color for an unselected checkbox.
- * @cssproperty --mdc-checkbox-icon-border-color - Default background color for an unselected checkbox.
- * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.
  * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
+ * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.
  */
 class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     constructor() {
@@ -169,16 +160,12 @@ class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
     }
     render() {
         var _a;
-        const checkboxIconContent = (this.checked || this.indeterminate) ? html `
-      <mdc-icon
-        class="icon"
-        name="${this.indeterminate ? ICON_NAME.INDETERMINATE : ICON_NAME.CHECKED}"
-        size="1"
-        length-unit="rem"
-      ></mdc-icon>
-    ` : nothing;
         return html `
-      <div class="container mdc-focus-ring">
+      <mdc-staticcheckbox 
+      class="mdc-focus-ring"
+      ?checked="${this.checked}" 
+      ?indeterminate="${this.indeterminate}" 
+      ?disabled="${this.disabled}">
         <input
           id="${this.id}"
           type="checkbox"
@@ -197,8 +184,7 @@ class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
           @change=${this.handleChange}
           @keydown=${this.handleKeyDown}
         />
-        <div class="icon-container">${checkboxIconContent}</div>
-      </div>
+      </mdc-staticcheckbox>
       ${this.renderLabelAndHelperText()}
     `;
     }

package/dist/components/checkbox/checkbox.styles.js

@@ -3,59 +3,48 @@ import { hostFocusRingStyles } from '../../utils/styles';
 const styles = [css `
   :host {
     --mdc-checkbox-background-color-hover: var(--mds-color-theme-control-inactive-hover);
-    --mdc-checkbox-border-color: var(--mds-color-theme-outline-button-normal);
-    --mdc-checkbox-checked-background-color-hover: var(--mds-color-theme-control-active-hover);
-    --mdc-checkbox-checked-background-color: var(--mds-color-theme-control-active-normal);
+    --mdc-checkbox-pressed-icon-color: var(--mds-color-theme-control-inactive-pressed);
     --mdc-checkbox-checked-pressed-icon-color: var(--mds-color-theme-control-active-pressed);
-    --mdc-checkbox-disabled-background-color: var(--mds-color-theme-control-inactive-disabled);
-    --mdc-checkbox-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
+    --mdc-checkbox-checked-background-color-hover: var(--mds-color-theme-control-active-hover);
     --mdc-checkbox-disabled-checked-icon-color: var(--mds-color-theme-control-active-disabled);
-    --mdc-checkbox-disabled-icon-color: var(--mds-color-theme-text-primary-disabled);
-    --mdc-checkbox-icon-background-color: var(--mds-color-theme-control-inactive-normal);
-    --mdc-checkbox-icon-border-color: var(--mds-color-theme-outline-input-normal);
-    --mdc-checkbox-icon-color: var(--mds-color-theme-inverted-text-primary-normal);
-    --mdc-checkbox-pressed-icon-color: var(--mds-color-theme-control-inactive-pressed);
-
+    
     flex-direction: row;
     align-items: flex-start;
   }
   .mdc-label, .input {
     cursor: pointer;
   }
-  :host([checked]) .icon-container,
-  :host([indeterminate]) .icon-container {
-    background: var(--mdc-checkbox-checked-background-color);
-    border: unset;
-  }
-  :host([checked]) .container:hover .icon-container,
-  :host([indeterminate]) .container:hover .icon-container {
-    background: var(--mdc-checkbox-checked-background-color-hover);
-  }
-  :host([checked]) .container:active .icon-container,
-  :host([indeterminate]) .container:active .icon-container {
-    background: var(--mdc-checkbox-checked-pressed-icon-color);
-  }
+
   :host([disabled]) .mdc-label,
   :host([disabled]) .input {
     cursor: default;
   }
-  :host([disabled]) .container:hover {
-    background: unset;
+
+  :host(:hover) mdc-staticcheckbox{
+    background: var(--mdc-checkbox-background-color-hover);
   }
-  :host([disabled]) .icon-container {
-    border-color: var(--mdc-checkbox-disabled-border-color);
-    background: var(--mdc-checkbox-disabled-background-color);
+  :host(:active) mdc-staticcheckbox{
+    background: var(--mdc-checkbox-pressed-icon-color);
   }
-  :host([disabled]) .icon {
-    --mdc-icon-fill-color: var(--mdc-checkbox-disabled-icon-color);
+
+  :host([checked]:hover)::part(icon-container),
+  :host([indeterminate]:hover)::part(icon-container) {
+    background: var(--mdc-checkbox-checked-background-color-hover);
   }
-  :host([disabled][checked]) .icon-container,
-  :host([disabled][indeterminate]) .icon-container,
-  :host([disabled][checked]) .container:hover .icon-container,
-  :host([disabled][indeterminate]) .container:hover .icon-container {
-    background: var(--mdc-checkbox-disabled-checked-icon-color);
-    border: 0.0625rem solid var(--mdc-checkbox-disabled-border-color);
+  :host([checked]:active)::part(icon-container),
+  :host([indeterminate]:active)::part(icon-container) {
+    background: var(--mdc-checkbox-checked-pressed-icon-color);
   }
+
+  :host([disabled])  mdc-staticcheckbox {
+    background: unset;
+  }
+
+  :host([disabled][checked])::part(icon-container),
+  :host([disabled][indeterminate])::part(icon-container) {
+    background-color: var(--mdc-checkbox-disabled-checked-icon-color);
+  }
+
   .input {
     margin: 0;
     padding: 0;
@@ -64,45 +53,19 @@ const styles = [css `
     overflow: visible;
     z-index: 1;
   }
-  .icon-container {
-    display: flex;
-    align-items: center;
-    border: 0.0625rem solid var(--mdc-checkbox-icon-border-color);
-    background: var(--mdc-checkbox-icon-background-color);
-  }
-  .container:hover {
-    background: var(--mdc-checkbox-background-color-hover);
-  }
-  .container:active {
-    background: var(--mdc-checkbox-pressed-icon-color);
-  }
-  .input, .icon-container {
+
+  .input {
     width: 1rem;
     height: 1rem;
-  }
-  .input,
-  .icon-container,
-  .container {
     border-radius: 0.125rem;
   }
-  .icon {
-    --mdc-icon-fill-color: var(--mdc-checkbox-icon-color);
-  }
-  .container {
-    margin: 0.125rem 0;
-  }
+ 
   .text-container {
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
   }
   
-  /* High Contrast Mode */
-  @media (forced-colors: active) {
-    :host([checked]) .icon-container,
-    :host([indeterminate]) .icon-container {
-      border: 0.0625rem solid var(--mdc-checkbox-border-color);
-    }
-  }
+
 `, ...hostFocusRingStyles(true)];
 export default styles;

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

@@ -1,5 +1,6 @@
 import Checkbox from './checkbox.component';
 import '../icon';
+import '../staticcheckbox';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-checkbox']: Checkbox;

package/dist/components/checkbox/index.js

@@ -1,5 +1,6 @@
 import Checkbox from './checkbox.component';
 import { TAG_NAME } from './checkbox.constants';
 import '../icon';
+import '../staticcheckbox';
 Checkbox.register(TAG_NAME);
 export default Checkbox;

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

@@ -1,15 +1,13 @@
-import type { PropertyValues } from 'lit';
-import { CSSResult } from 'lit';
+import { PropertyValues, CSSResult } from 'lit';
 import { Component } from '../../models';
 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/IconNameMixin").IconNameMixinInterface> & typeof Component;
+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;
 /**
  * `mdc-link` component can be used to navigate to a different page
  * within the application or to an external site. It can be used to link to
  * emails or phone numbers.
  *
- * The `children` of the link component is expected to be an anchor element
- * containing the text, href, and other attributes.
+ * The `children` of the link component is expected to be the text content.
  *
  * For `icon`, the `mdc-icon` component is used to render the icon.
  *
@@ -17,6 +15,11 @@ 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
@@ -52,31 +55,39 @@ declare class Link extends Link_base {
      */
     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.
+     * 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;
     /**
-     * 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.
+     * 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 - The disabled state of icon
+     * @param disabled - Whether the element should be disabled
      */
     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: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;

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

@@ -7,20 +7,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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 { 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';
 /**
  * `mdc-link` component can be used to navigate to a different page
  * within the application or to an external site. It can be used to link to
  * emails or phone numbers.
  *
- * The `children` of the link component is expected to be an anchor element
- * containing the text, href, and other attributes.
+ * The `children` of the link component is expected to be the text content.
  *
  * For `icon`, the `mdc-icon` component is used to render the icon.
  *
@@ -28,6 +28,11 @@ import styles from './link.styles';
  *
  * @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
@@ -40,7 +45,7 @@ import styles from './link.styles';
  * @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(IconNameMixin(Component)) {
+class Link extends DisabledMixin(TabIndexMixin(IconNameMixin(Component))) {
     constructor() {
         super(...arguments);
         /**
@@ -65,11 +70,37 @@ class Link extends DisabledMixin(IconNameMixin(Component)) {
          */
         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.
+         * 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 = null;
+        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.
@@ -86,45 +117,25 @@ class Link extends DisabledMixin(IconNameMixin(Component)) {
         }
     }
     /**
-     * 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.
+     * 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 - The disabled state of icon
+     * @param disabled - Whether the element should be disabled
      */
     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');
+            this.prevTabindex = this.tabIndex;
+            this.tabIndex = -1;
         }
         else {
-            this.tabIndex = this.prevTabindex;
+            if (this.tabIndex === -1) {
+                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')) {
@@ -133,9 +144,14 @@ class Link extends DisabledMixin(IconNameMixin(Component)) {
     }
     render() {
         return html `
-      <div part='link-container' class='mdc-focus-ring'>
-        <slot @slotchange=${this.updateTrailingIcon}></slot>
-      </div>
+      <slot></slot>
+      ${this.iconName ? html `
+        <mdc-icon
+          name=${this.iconName}
+          size=${this.getIconSize()}
+          length-unit="rem"
+        ></mdc-icon>
+      ` : nothing}
     `;
     }
 }
@@ -152,4 +168,16 @@ __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.styles.js

@@ -1,9 +1,7 @@
 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);
@@ -15,49 +13,50 @@ const styles = [hostFitContentStyles, css `
     --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;
-  }
 
-  :host::part(link-container){
     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;
+    cursor: pointer;
   }
 
-  :host(:hover)::part(link-container) {
-    color: var(--mdc-link-color-hover);
+  :host([inline]) {
+    display: inline-flex;
   }
 
-  :host(:active)::part(link-container) {
-    color: var(--mdc-link-color-active);
+  :host(:hover) {
+    color: var(--mdc-link-color-hover);
   }
 
-  :host([inline]) {
-    display: inline-flex;
+  :host(:active) {
+    color: var(--mdc-link-color-active);
+    box-shadow: none;
   }
 
-  :host([inverted])::part(link-container) {
+  :host([inverted]) {
     color: var(--mdc-link-inverted-color-normal);
   }
 
-  :host([inverted]:hover)::part(link-container) {
+  :host([inverted]:hover) {
     color: var(--mdc-link-inverted-color-hover);
   }
 
-  :host([inverted]:active)::part(link-container) {
+  :host([inverted]:active) {
     color: var(--mdc-link-inverted-color-active);
   }
 
-  :host([size="large"])::part(link-container) {
+  :host([disabled]) {
+    color: var(--mdc-link-color-disabled);
+    pointer-events: none;
+  }
+
+  :host([inverted][disabled]) {
+    color: var(--mdc-link-inverted-color-disabled);
+  }
+
+  :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);
@@ -65,7 +64,7 @@ const styles = [hostFitContentStyles, css `
     text-transform: var(--mds-font-apps-body-large-regular-text-case);
   }
 
-  :host([size="midsize"])::part(link-container) {
+  :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);
@@ -73,7 +72,7 @@ const styles = [hostFitContentStyles, css `
     text-transform: var(--mds-font-apps-body-midsize-regular-text-case);
   }
 
-  :host([size="small"])::part(link-container) {
+  :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);
@@ -81,9 +80,9 @@ const styles = [hostFitContentStyles, css `
     text-transform: var(--mds-font-apps-body-small-regular-text-case);
   }
 
-  :host([size="large"]:hover)::part(link-container),
-  :host([size="large"]:active)::part(link-container),
-  :host([size="large"][inline])::part(link-container) {
+  :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);
@@ -91,9 +90,9 @@ const styles = [hostFitContentStyles, css `
     text-transform: var(--mds-font-apps-body-large-regular-underline-text-case);
   }
 
-  :host([size="midsize"]:hover)::part(link-container),
-  :host([size="midsize"]:active)::part(link-container),
-  :host([size="midsize"][inline])::part(link-container) {
+  :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);
@@ -101,28 +100,15 @@ const styles = [hostFitContentStyles, css `
     text-transform: var(--mds-font-apps-body-midsize-regular-underline-text-case);
   }
 
-  :host([size="small"]:hover)::part(link-container),
-  :host([size="small"]:active)::part(link-container),
-  :host([size="small"][inline])::part(link-container) {
+  :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])::part(link-container) {
-    color: var(--mdc-link-color-disabled);
-    pointer-events: none;
-  }
-
-  :host([inverted][disabled])::part(link-container) {
-    color: var(--mdc-link-inverted-color-disabled);
-  }
-`, ...hostFocusRingStyles(true),
-    css `
-  :host(:active)::part(link-container) {
-    box-shadow: none;
-  }
-`];
+`, ...hostFocusRingStyles(),
+];
 export default styles;

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

@@ -1,4 +1,10 @@
 import type { ValueOf } from '../../utils/types';
 import { LINK_SIZES } from './link.constants';
 type LinkSize = ValueOf<typeof LINK_SIZES>;
-export type { LinkSize };
+interface Events {
+    onClickEvent: MouseEvent;
+    onBlurEvent: Event;
+    onKeyDownEvent: KeyboardEvent;
+    onFocusEvent: FocusEvent;
+}
+export type { LinkSize, Events };

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

@@ -1,4 +1,5 @@
 import Radio from './radio.component';
+import '../staticradio';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-radio']: Radio;