@momentum-design/components 0.52.1 → 0.53.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/browser/index.js +109 -113
  2. package/dist/browser/index.js.map +4 -4
  3. package/dist/components/input/input.styles.js +4 -8
  4. package/dist/components/option/option.component.js +3 -2
  5. package/dist/components/textarea/textarea.styles.js +4 -4
  6. package/dist/custom-elements.json +352 -366
  7. package/dist/react/index.d.ts +1 -1
  8. package/dist/react/index.js +1 -1
  9. package/dist/utils/mixins/FormInternalsMixin.js +16 -12
  10. package/package.json +1 -1
package/dist/components/input/input.styles.js CHANGED
@@ -4,7 +4,7 @@ const styles = [css `
4
4
  :host{
5
5
  --mdc-input-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
6
6
  --mdc-input-disabled-text-color: var(--mds-color-theme-text-primary-disabled);
7
- --mdc-input-disabled-background-color: var(--mds-color-theme-background-primary-disabled);
7
+ --mdc-input-disabled-background-color: var(--mds-color-theme-background-input-disabled);
8
8
  --mdc-input-border-color: var(--mds-color-theme-outline-input-normal);
9
9
  --mdc-input-text-color: var(--mds-color-theme-text-primary-normal);
10
10
  --mdc-input-background-color: var(--mds-color-theme-background-primary-ghost);
@@ -12,7 +12,7 @@ const styles = [css `
12
12
  --mdc-input-selection-text-color: var(--mds-color-theme-inverted-text-primary-normal);
13
13
  --mdc-input-support-text-color: var(--mds-color-theme-text-secondary-normal);
14
14
  --mdc-input-hover-background-color: var(--mds-color-theme-background-primary-hover);
15
- --mdc-input-focused-background-color: var(--mds-color-theme-background-primary-active);
15
+ --mdc-input-focused-background-color: transparent; // TODO: update with token value
16
16
  --mdc-input-focused-border-color: var(--mds-color-theme-outline-input-active);
17
17
  --mdc-input-error-border-color: var(--mds-color-theme-text-error-normal);
18
18
  --mdc-input-warning-border-color: var(--mds-color-theme-text-warning-normal);
@@ -34,19 +34,15 @@ const styles = [css `
34
34
  color: var(--mdc-input-disabled-text-color);
35
35
  }
36
36
 
37
- :host([disabled]) .input,
38
- :host([readonly]) .input{
39
- border-color: var(--mdc-input-disabled-border-color);
40
- background: var(--mdc-input-disabled-background-color);
41
- }
42
-
43
37
  :host([disabled]) .input-container,
38
+ :host([readonly]) .input-container,
44
39
  :host([disabled][help-text-type="default"]) .input-container,
45
40
  :host([disabled][help-text-type="success"]) .input-container,
46
41
  :host([disabled][help-text-type="warning"]) .input-container,
47
42
  :host([disabled][help-text-type="error"]) .input-container,
48
43
  :host([disabled][help-text-type="priority"]) .input-container{
49
44
  border-color: var(--mdc-input-disabled-border-color);
45
+ background: var(--mdc-input-disabled-background-color);
50
46
  }
51
47
 
52
48
  .leading-icon{
package/dist/components/option/option.component.js CHANGED
@@ -11,10 +11,11 @@ import { html, nothing } from 'lit';
11
11
  import { property } from 'lit/decorators.js';
12
12
  import { ifDefined } from 'lit/directives/if-defined.js';
13
13
  import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
14
- import { TAG_NAME as TOOLTIP_TAG_NAME } from '../tooltip/tooltip.constants';
15
14
  import ListItem from '../listitem/listitem.component';
16
15
  import { LISTITEM_VARIANTS } from '../listitem/listitem.constants';
16
+ import { TAG_NAME as SELECT_TAG_NAME } from '../select/select.constants';
17
17
  import { TYPE } from '../text/text.constants';
18
+ import { TAG_NAME as TOOLTIP_TAG_NAME } from '../tooltip/tooltip.constants';
18
19
  import { SELECTED_ICON_NAME, TOOLTIP_ID } from './option.constants';
19
20
  import styles from './option.styles';
20
21
  /**
@@ -98,7 +99,7 @@ class Option extends FormInternalsMixin(ListItem) {
98
99
  tooltip.setAttribute('triggerid', this.id);
99
100
  tooltip.setAttribute('visible', '');
100
101
  // Add tooltip programmatically after the nearest select component or the parent element.
101
- const parent = this.closest('mdc-select') || this.parentElement;
102
+ const parent = this.closest(SELECT_TAG_NAME) || this.parentElement;
102
103
  parent === null || parent === void 0 ? void 0 : parent.after(tooltip);
103
104
  }
104
105
  /**
package/dist/components/textarea/textarea.styles.js CHANGED
@@ -4,7 +4,7 @@ const styles = [css `
4
4
  :host {
5
5
  --mdc-textarea-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
6
6
  --mdc-textarea-disabled-text-color: var(--mds-color-theme-text-primary-disabled);
7
- --mdc-textarea-disabled-background-color: var(--mds-color-theme-background-primary-disabled);
7
+ --mdc-textarea-disabled-background-color: var(--mds-color-theme-background-input-disabled);
8
8
  --mdc-textarea-text-color: var(--mds-color-theme-text-primary-normal);
9
9
  --mdc-textarea-background-color: var(--mds-color-theme-background-primary-ghost);
10
10
  --mdc-textarea-border-color: var(--mds-color-theme-outline-input-normal);
@@ -14,7 +14,7 @@ const styles = [css `
14
14
  --mdc-textarea-success-border-color: var(--mds-color-theme-text-success-normal);
15
15
  --mdc-textarea-primary-border-color: var(--mds-color-theme-text-accent-normal);
16
16
  --mdc-textarea-hover-background-color: var(--mds-color-theme-background-primary-hover);
17
- --mdc-textarea-focused-background-color: var(--mds-color-theme-background-primary-active);
17
+ --mdc-textarea-focused-background-color: transparent;
18
18
  --mdc-textarea-focused-border-color: var(--mds-color-theme-outline-input-active);
19
19
  --mdc-textarea-text-font-size: var(--mds-font-size-body-midsize);
20
20
  --mdc-textarea-text-line-height: var(--mds-font-lineheight-body-midsize);
@@ -25,8 +25,8 @@ const styles = [css `
25
25
  color: var(--mdc-input-disabled-text-color);
26
26
  }
27
27
 
28
- :host([disabled])::part(textarea),
29
- :host([readonly])::part(textarea){
28
+ :host([disabled])::part(textarea-container),
29
+ :host([readonly])::part(textarea-container){
30
30
  border-color: var(--mdc-textarea-disabled-border-color);
31
31
  background: var(--mdc-textarea-disabled-background-color);
32
32
  }