@momentum-design/components 0.28.4 → 0.28.5

package/dist/components/input/input.component.js

@@ -282,7 +282,7 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         return html `
       <mdc-button 
         part='trailing-button'
-        class='${!this.value ? 'hidden' : ''}'
+        class='own-focus-ring ${!this.value ? 'hidden' : ''}'
         prefix-icon='${DEFAULTS.CLEAR_BUTTON_ICON}'
         variant='${DEFAULTS.CLEAR_BUTTON_VARIANT}'
         size="${DEFAULTS.CLEAR_BUTTON_SIZE}"

package/dist/components/input/input.styles.js

@@ -82,7 +82,7 @@ const styles = [css `
 
   .prefix-text{
     color: var(--mdc-input-support-text-color);
-    white-space: nowrap; // restirct prefix text to be in one line
+    white-space: nowrap; // restrict prefix text to be in one line
   }
 
   :host(:not([disabled])) .input-container:hover{
@@ -91,7 +91,7 @@ const styles = [css `
 
   :host(:not([disabled])) .input-container:active, :host(:not([disabled])) .input-container:focus-within{
     background-color: var(--mdc-input-focused-background-color);
-    border-color:  var(--mdc-input-focused-border-color);
+    border-color: var(--mdc-input-focused-border-color);
   }
 
   .input::placeholder{
@@ -115,5 +115,5 @@ const styles = [css `
     opacity: 0;
     pointer-events: none;
   }
-  `, ...hostFocusRingStyles(true)];
+`, ...hostFocusRingStyles(true)];
 export default styles;

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

@@ -132,7 +132,11 @@ class Link extends DisabledMixin(IconNameMixin(Component)) {
         }
     }
     render() {
-        return html `<slot @slotchange=${this.updateTrailingIcon}></slot>`;
+        return html `
+      <div part='link-container' class='mdc-focus-ring'>
+        <slot @slotchange=${this.updateTrailingIcon}></slot>
+      </div>
+    `;
     }
 }
 Link.styles = [...Component.styles, ...styles];

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

@@ -15,7 +15,9 @@ 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);
   }
@@ -31,11 +33,11 @@ const styles = [hostFitContentStyles, css `
     text-underline-position: from-font;
   }
 
-  :host(:hover) {
+  :host(:hover)::part(link-container) {
     color: var(--mdc-link-color-hover);
   }
 
-  :host(:active) {
+  :host(:active)::part(link-container) {
     color: var(--mdc-link-color-active);
   }
 
@@ -43,19 +45,19 @@ const styles = [hostFitContentStyles, css `
     display: inline-flex;
   }
 
-  :host([inverted]) {
+  :host([inverted])::part(link-container) {
     color: var(--mdc-link-inverted-color-normal);
   }
 
-  :host([inverted]:hover) {
+  :host([inverted]:hover)::part(link-container) {
     color: var(--mdc-link-inverted-color-hover);
   }
 
-  :host([inverted]:active) {
+  :host([inverted]:active)::part(link-container) {
     color: var(--mdc-link-inverted-color-active);
   }
 
-  :host([size="large"]) {
+  :host([size="large"])::part(link-container) {
     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);
@@ -63,7 +65,7 @@ const styles = [hostFitContentStyles, css `
     text-transform: var(--mds-font-apps-body-large-regular-text-case);
   }
 
-  :host([size="midsize"]) {
+  :host([size="midsize"])::part(link-container) {
     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);
@@ -71,7 +73,7 @@ const styles = [hostFitContentStyles, css `
     text-transform: var(--mds-font-apps-body-midsize-regular-text-case);
   }
 
-  :host([size="small"]) {
+  :host([size="small"])::part(link-container) {
     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);
@@ -79,7 +81,9 @@ const styles = [hostFitContentStyles, 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(link-container),
+  :host([size="large"]:active)::part(link-container),
+  :host([size="large"][inline])::part(link-container) {
     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);
@@ -87,7 +91,9 @@ const styles = [hostFitContentStyles, 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(link-container),
+  :host([size="midsize"]:active)::part(link-container),
+  :host([size="midsize"][inline])::part(link-container) {
     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);
@@ -95,7 +101,9 @@ const styles = [hostFitContentStyles, 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(link-container),
+  :host([size="small"]:active)::part(link-container),
+  :host([size="small"][inline])::part(link-container) {
     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);
@@ -103,17 +111,17 @@ const styles = [hostFitContentStyles, css `
     text-transform: var(--mds-font-apps-body-small-regular-underline-text-case);
   }
 
-  :host([disabled]) {
+  :host([disabled])::part(link-container) {
     color: var(--mdc-link-color-disabled);
     pointer-events: none;
   }
 
-  :host([inverted][disabled]) {
+  :host([inverted][disabled])::part(link-container) {
     color: var(--mdc-link-inverted-color-disabled);
   }
-`, ...hostFocusRingStyles(),
+`, ...hostFocusRingStyles(true),
     css `
-  :host(:active) {
+  :host(:active)::part(link-container) {
     box-shadow: none;
   }
 `];