@momentum-design/components 0.118.4 → 0.118.6

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 (30) hide show
  1. package/dist/browser/index.js +259 -263
  2. package/dist/browser/index.js.map +4 -4
  3. package/dist/components/checkbox/checkbox.component.js +2 -2
  4. package/dist/components/checkbox/checkbox.styles.js +13 -8
  5. package/dist/components/combobox/combobox.component.js +1 -1
  6. package/dist/components/formfieldgroup/formfieldgroup.styles.js +0 -4
  7. package/dist/components/formfieldwrapper/formfieldwrapper.component.d.ts +2 -2
  8. package/dist/components/formfieldwrapper/formfieldwrapper.component.js +5 -7
  9. package/dist/components/formfieldwrapper/formfieldwrapper.styles.js +22 -16
  10. package/dist/components/popover/index.js +2 -0
  11. package/dist/components/popover/popover.component.d.ts +44 -8
  12. package/dist/components/popover/popover.component.js +53 -11
  13. package/dist/components/popover/popover.portal.component.d.ts +29 -0
  14. package/dist/components/popover/popover.portal.component.js +37 -0
  15. package/dist/components/popover/popover.utils.d.ts +15 -0
  16. package/dist/components/popover/popover.utils.js +32 -3
  17. package/dist/components/progressbar/progressbar.styles.js +3 -5
  18. package/dist/components/radio/radio.component.js +2 -2
  19. package/dist/components/radio/radio.styles.js +8 -12
  20. package/dist/components/toggle/toggle.component.d.ts +0 -3
  21. package/dist/components/toggle/toggle.component.js +0 -3
  22. package/dist/components/toggle/toggle.styles.js +11 -14
  23. package/dist/custom-elements.json +355 -347
  24. package/dist/react/index.d.ts +2 -2
  25. package/dist/react/index.js +2 -2
  26. package/dist/react/popover/index.d.ts +43 -7
  27. package/dist/react/popover/index.js +43 -7
  28. package/dist/react/toggle/index.d.ts +0 -3
  29. package/dist/react/toggle/index.js +0 -3
  30. package/package.json +1 -1
package/dist/components/radio/radio.styles.js CHANGED
@@ -52,25 +52,21 @@ const styles = [
52
52
  background-color: var(--mdc-radio-control-active-disabled-background);
53
53
  }
54
54
 
55
- :host([readonly]) .mdc-radio__input,
56
- :host([disabled]) .mdc-radio__input,
57
- :host([disabled]) .mdc-label,
58
- :host([readonly]) .mdc-label {
55
+ :host([readonly])::part(radio-input) :host([disabled])::part(radio-input) :host([disabled])::part(label),
56
+ :host([readonly])::part(label) {
59
57
  cursor: default;
60
58
  }
61
59
 
62
- .mdc-label {
60
+ :host::part(label) {
63
61
  cursor: pointer;
64
62
  word-break: break-word;
65
63
  white-space: normal;
64
+ font-size: var(--mds-font-apps-body-midsize-regular-font-size);
65
+ font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
66
+ line-height: var(--mds-font-apps-body-midsize-regular-line-height);
66
67
  }
67
68
 
68
- :host([disabled]) .mdc-radio__label-text,
69
- :host([disabled]) .mdc-radio__help-text {
70
- color: var(--mdc-radio-text-disabled-color);
71
- }
72
-
73
- .mdc-radio__input {
69
+ :host::part(radio-input) {
74
70
  position: absolute;
75
71
  opacity: 0;
76
72
  margin: 0;
@@ -80,7 +76,7 @@ const styles = [
80
76
  z-index: 2;
81
77
  }
82
78
 
83
- .mdc-radio__label-container {
79
+ :host::part(text-container) {
84
80
  display: flex;
85
81
  flex-direction: column;
86
82
  justify-content: center;
package/dist/components/toggle/toggle.component.d.ts CHANGED
@@ -28,9 +28,6 @@ declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<
28
28
  * @cssproperty --mdc-toggle-height - Height of the toggle
29
29
  * @cssproperty --mdc-toggle-width-compact - Width of the toggle when it's size is compact
30
30
  * @cssproperty --mdc-toggle-height-compact - Height of the toggle when it's size is compact
31
- * @cssproperty --mdc-toggle-label-lineheight - Line height of the toggle label
32
- * @cssproperty --mdc-toggle-label-fontsize - Font size of the toggle label
33
- * @cssproperty --mdc-toggle-label-fontweight - Font weight of the toggle label
34
31
  * @cssproperty --mdc-toggle-label-color-disabled - Color of the toggle label and help text in disabled state
35
32
  * @cssproperty --mdc-toggle-help-text-color - Color of the help text label
36
33
  * @cssproperty --mdc-toggle-active-hover-color - Background color of the active toggle in hover state
package/dist/components/toggle/toggle.component.js CHANGED
@@ -44,9 +44,6 @@ import styles from './toggle.styles';
44
44
  * @cssproperty --mdc-toggle-height - Height of the toggle
45
45
  * @cssproperty --mdc-toggle-width-compact - Width of the toggle when it's size is compact
46
46
  * @cssproperty --mdc-toggle-height-compact - Height of the toggle when it's size is compact
47
- * @cssproperty --mdc-toggle-label-lineheight - Line height of the toggle label
48
- * @cssproperty --mdc-toggle-label-fontsize - Font size of the toggle label
49
- * @cssproperty --mdc-toggle-label-fontweight - Font weight of the toggle label
50
47
  * @cssproperty --mdc-toggle-label-color-disabled - Color of the toggle label and help text in disabled state
51
48
  * @cssproperty --mdc-toggle-help-text-color - Color of the help text label
52
49
  * @cssproperty --mdc-toggle-active-hover-color - Background color of the active toggle in hover state
package/dist/components/toggle/toggle.styles.js CHANGED
@@ -9,9 +9,6 @@ const styles = [
9
9
  --mdc-toggle-width-compact: 2rem;
10
10
  --mdc-toggle-height-compact: 1rem;
11
11
 
12
- --mdc-toggle-label-lineheight: var(--mds-font-lineheight-body-midsize);
13
- --mdc-toggle-label-fontsize: var(--mds-font-size-body-midsize);
14
- --mdc-toggle-label-fontweight: 400;
15
12
  --mdc-toggle-label-color-disabled: var(--mds-color-theme-text-primary-disabled);
16
13
  --mdc-toggle-help-text-color: var(--mds-color-theme-text-secondary-normal);
17
14
 
@@ -46,30 +43,30 @@ const styles = [
46
43
  height: var(--mdc-toggle-height);
47
44
  }
48
45
 
49
- .mdc-label-text,
50
- .mdc-help-text {
51
- font-size: var(--mdc-toggle-label-fontsize);
52
- font-weight: var(--mdc-toggle-label-fontweight);
53
- line-height: var(--mdc-toggle-label-lineheight);
46
+ :host::part(label-text),
47
+ :host::part(help-text-container) {
54
48
  grid-column: 2;
55
49
  }
56
50
 
57
- .mdc-label,
51
+ :host::part(label),
58
52
  :host::part(toggle-input) {
59
53
  cursor: pointer;
60
54
  }
61
55
 
62
- .mdc-label {
56
+ :host::part(label) {
63
57
  word-break: break-word;
64
58
  white-space: normal;
59
+ font-size: var(--mds-font-apps-body-midsize-regular-font-size);
60
+ font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
61
+ line-height: var(--mds-font-apps-body-midsize-regular-line-height);
65
62
  }
66
63
 
67
- :host([disabled]) .mdc-label,
64
+ :host([disabled])::part(label),
68
65
  :host([disabled])::part(toggle-input) {
69
66
  cursor: default;
70
67
  }
71
68
 
72
- .mdc-help-text {
69
+ :host::part(help-text) {
73
70
  color: var(--mdc-toggle-help-text-color);
74
71
  }
75
72
 
@@ -89,8 +86,8 @@ const styles = [
89
86
  background-color: var(--mdc-toggle-active-pressed-color);
90
87
  }
91
88
 
92
- :host([disabled]) .mdc-label-text,
93
- :host([disabled]) .mdc-help-text {
89
+ :host([disabled])::part(label-text),
90
+ :host([disabled])::part(help-text) {
94
91
  color: var(--mdc-toggle-label-color-disabled);
95
92
  }
96
93
  `,