@momentum-design/components 0.28.3 → 0.28.5

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 (15) hide show
  1. package/dist/browser/index.js +96 -79
  2. package/dist/browser/index.js.map +2 -2
  3. package/dist/components/avatar/avatar.component.js +4 -4
  4. package/dist/components/avatar/avatar.styles.js +20 -20
  5. package/dist/components/input/input.component.js +1 -1
  6. package/dist/components/input/input.styles.js +3 -3
  7. package/dist/components/link/link.component.js +5 -1
  8. package/dist/components/link/link.styles.js +23 -15
  9. package/dist/components/virtualizedlist/virtualizedlist.component.js +2 -2
  10. package/dist/components/virtualizedlist/virtualizedlist.styles.js +9 -11
  11. package/dist/custom-elements.json +246 -246
  12. package/dist/react/index.d.ts +1 -1
  13. package/dist/react/index.js +1 -1
  14. package/dist/utils/styles/index.js +9 -2
  15. package/package.json +1 -1
package/dist/components/avatar/avatar.component.js CHANGED
@@ -74,7 +74,7 @@ class Avatar extends AvatarComponentMixin(IconNameMixin(Component)) {
74
74
  }
75
75
  if (this.presence) {
76
76
  return html `
77
- <mdc-presence class="presence" type="${this.presence}" size="${getPresenceSize(this.size)}"></mdc-presence>
77
+ <mdc-presence part="presence" type="${this.presence}" size="${getPresenceSize(this.size)}"></mdc-presence>
78
78
  `;
79
79
  }
80
80
  return nothing;
@@ -112,7 +112,7 @@ class Avatar extends AvatarComponentMixin(IconNameMixin(Component)) {
112
112
  photoTemplate() {
113
113
  return html `
114
114
  <img
115
- class="photo"
115
+ part="photo"
116
116
  src="${ifDefined(this.src)}"
117
117
  aria-hidden="true"
118
118
  ?hidden="${!this.isPhotoLoaded}"
@@ -262,7 +262,7 @@ class Avatar extends AvatarComponentMixin(IconNameMixin(Component)) {
262
262
  if (!this.isTyping) {
263
263
  return nothing;
264
264
  }
265
- return html `<div class="loading__wrapper"><div class="loader"></div></div>`;
265
+ return html `<div part="loading-wrapper"><div part="loader"></div></div>`;
266
266
  }
267
267
  /**
268
268
  * @internal
@@ -297,7 +297,7 @@ class Avatar extends AvatarComponentMixin(IconNameMixin(Component)) {
297
297
  render() {
298
298
  const type = this.getTypeBasedOnInputs();
299
299
  return html `
300
- <div class="content" aria-hidden="true">
300
+ <div part="content" aria-hidden="true">
301
301
  ${this.getPhotoPlaceHolderContent(type)}
302
302
  ${this.getTemplateBasedOnType(type)}
303
303
  ${this.getLoadingContent()}
package/dist/components/avatar/avatar.styles.js CHANGED
@@ -8,54 +8,54 @@ const styles = [hostFitContentStyles, css `
8
8
  --mdc-avatar-loading-indicator-foreground-color: var(--mdc-avatar-default-foreground-color);
9
9
  --mdc-avatar-loading-overlay-background-color: var(--mds-color-theme-common-overlays-secondary-normal);
10
10
  }
11
- :host([size="124"]) .content {
11
+ :host([size="124"])::part(content) {
12
12
  width: 7.75rem;
13
13
  height: 7.75rem;
14
14
  }
15
- :host([size="88"]) .content {
15
+ :host([size="88"])::part(content) {
16
16
  width: 5.5rem;
17
17
  height: 5.5rem;
18
18
  }
19
- :host([size="72"]) .content {
19
+ :host([size="72"])::part(content) {
20
20
  width: 4.5rem;
21
21
  height: 4.5rem;
22
22
  }
23
- :host([size="64"]) .content {
23
+ :host([size="64"])::part(content) {
24
24
  width: 4rem;
25
25
  height: 4rem;
26
26
  }
27
- :host([size="48"]) .content {
27
+ :host([size="48"])::part(content) {
28
28
  width: 3rem;
29
29
  height: 3rem;
30
30
  }
31
- :host([size="32"]) .content {
31
+ :host([size="32"])::part(content) {
32
32
  width: 2rem;
33
33
  height: 2rem;
34
34
  }
35
- :host([size="24"]) .content {
35
+ :host([size="24"])::part(content) {
36
36
  width: 1.5rem;
37
37
  height: 1.5rem;
38
38
  }
39
- :host([size="124"]) .content > .loading__wrapper > .loader {
39
+ :host([size="124"])::part(loader) {
40
40
  transform: scale(1.5);
41
41
  }
42
- :host([size="88"]) .content > .loading__wrapper > .loader {
42
+ :host([size="88"])::part(loader) {
43
43
  transform: scale(1.2);
44
44
  }
45
- :host([size="72"]) .content > .loading__wrapper > .loader,
46
- :host([size="64"]) .content > .loading__wrapper > .loader {
45
+ :host([size="72"])::part(loader),
46
+ :host([size="64"])::part(loader) {
47
47
  transform: scale(0.8);
48
48
  }
49
- :host([size="48"]) .content > .loading__wrapper > .loader {
49
+ :host([size="48"])::part(loader) {
50
50
  transform: scale(0.6);
51
51
  }
52
- :host([size="32"]) .content > .loading__wrapper > .loader {
52
+ :host([size="32"])::part(loader) {
53
53
  transform: scale(0.4);
54
54
  }
55
- :host([size="24"]) .content > .loading__wrapper > .loader {
55
+ :host([size="24"])::part(loader) {
56
56
  transform: scale(0.3);
57
57
  }
58
- .content {
58
+ :host::part(content) {
59
59
  width: 2rem;
60
60
  height: 2rem;
61
61
  background-color: var(--mdc-avatar-default-background-color);
@@ -65,19 +65,19 @@ const styles = [hostFitContentStyles, css `
65
65
  display: grid;
66
66
  place-items: center;
67
67
  }
68
- .photo {
68
+ :host::part(photo) {
69
69
  border-radius: 100vh;
70
70
  height: 100%;
71
71
  width: 100%;
72
72
  object-fit: cover;
73
73
  overflow: hidden;
74
74
  }
75
- .presence {
75
+ :host::part(presence) {
76
76
  position: absolute;
77
77
  bottom: 0;
78
78
  right: 0;
79
79
  }
80
- .loading__wrapper {
80
+ :host::part(loading-wrapper) {
81
81
  position: absolute;
82
82
  border-radius: 100vh;
83
83
  width: 100%;
@@ -86,7 +86,7 @@ const styles = [hostFitContentStyles, css `
86
86
  display: grid;
87
87
  place-items: center;
88
88
  }
89
- .loader {
89
+ :host::part(loader) {
90
90
  position: absolute;
91
91
  width: 1rem;
92
92
  transform: scale(0.4);
@@ -119,7 +119,7 @@ const styles = [hostFitContentStyles, css `
119
119
 
120
120
  /* High Contrast Mode */
121
121
  @media (forced-colors: active) {
122
- .content:not(.photo) {
122
+ :host::part(content) {
123
123
  outline: 0.125rem solid;
124
124
  }
125
125
  }
package/dist/components/input/input.component.js CHANGED
@@ -282,7 +282,7 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
282
282
  return html `
283
283
  <mdc-button
284
284
  part='trailing-button'
285
- class='${!this.value ? 'hidden' : ''}'
285
+ class='own-focus-ring ${!this.value ? 'hidden' : ''}'
286
286
  prefix-icon='${DEFAULTS.CLEAR_BUTTON_ICON}'
287
287
  variant='${DEFAULTS.CLEAR_BUTTON_VARIANT}'
288
288
  size="${DEFAULTS.CLEAR_BUTTON_SIZE}"
package/dist/components/input/input.styles.js CHANGED
@@ -82,7 +82,7 @@ const styles = [css `
82
82
 
83
83
  .prefix-text{
84
84
  color: var(--mdc-input-support-text-color);
85
- white-space: nowrap; // restirct prefix text to be in one line
85
+ white-space: nowrap; // restrict prefix text to be in one line
86
86
  }
87
87
 
88
88
  :host(:not([disabled])) .input-container:hover{
@@ -91,7 +91,7 @@ const styles = [css `
91
91
 
92
92
  :host(:not([disabled])) .input-container:active, :host(:not([disabled])) .input-container:focus-within{
93
93
  background-color: var(--mdc-input-focused-background-color);
94
- border-color: var(--mdc-input-focused-border-color);
94
+ border-color: var(--mdc-input-focused-border-color);
95
95
  }
96
96
 
97
97
  .input::placeholder{
@@ -115,5 +115,5 @@ const styles = [css `
115
115
  opacity: 0;
116
116
  pointer-events: none;
117
117
  }
118
- `, ...hostFocusRingStyles(true)];
118
+ `, ...hostFocusRingStyles(true)];
119
119
  export default styles;
package/dist/components/link/link.component.js CHANGED
@@ -132,7 +132,11 @@ class Link extends DisabledMixin(IconNameMixin(Component)) {
132
132
  }
133
133
  }
134
134
  render() {
135
- return html `<slot @slotchange=${this.updateTrailingIcon}></slot>`;
135
+ return html `
136
+ <div part='link-container' class='mdc-focus-ring'>
137
+ <slot @slotchange=${this.updateTrailingIcon}></slot>
138
+ </div>
139
+ `;
136
140
  }
137
141
  }
138
142
  Link.styles = [...Component.styles, ...styles];
package/dist/components/link/link.styles.js CHANGED
@@ -15,7 +15,9 @@ const styles = [hostFitContentStyles, css `
15
15
  --mdc-link-inverted-color-hover: var(--mds-color-theme-inverted-text-accent-hover);
16
16
  --mdc-link-inverted-color-normal: var(--mds-color-theme-inverted-text-accent-normal);
17
17
  --mdc-link-text-decoration-disabled: underline;
18
+ }
18
19
 
20
+ :host::part(link-container){
19
21
  border-radius: var(--mdc-link-border-radius);
20
22
  color: var(--mdc-link-color-normal);
21
23
  }
@@ -31,11 +33,11 @@ const styles = [hostFitContentStyles, css `
31
33
  text-underline-position: from-font;
32
34
  }
33
35
 
34
- :host(:hover) {
36
+ :host(:hover)::part(link-container) {
35
37
  color: var(--mdc-link-color-hover);
36
38
  }
37
39
 
38
- :host(:active) {
40
+ :host(:active)::part(link-container) {
39
41
  color: var(--mdc-link-color-active);
40
42
  }
41
43
 
@@ -43,19 +45,19 @@ const styles = [hostFitContentStyles, css `
43
45
  display: inline-flex;
44
46
  }
45
47
 
46
- :host([inverted]) {
48
+ :host([inverted])::part(link-container) {
47
49
  color: var(--mdc-link-inverted-color-normal);
48
50
  }
49
51
 
50
- :host([inverted]:hover) {
52
+ :host([inverted]:hover)::part(link-container) {
51
53
  color: var(--mdc-link-inverted-color-hover);
52
54
  }
53
55
 
54
- :host([inverted]:active) {
56
+ :host([inverted]:active)::part(link-container) {
55
57
  color: var(--mdc-link-inverted-color-active);
56
58
  }
57
59
 
58
- :host([size="large"]) {
60
+ :host([size="large"])::part(link-container) {
59
61
  font-size: var(--mds-font-apps-body-large-regular-font-size);
60
62
  font-weight: var(--mds-font-apps-body-large-regular-font-weight);
61
63
  line-height: var(--mds-font-apps-body-large-regular-line-height);
@@ -63,7 +65,7 @@ const styles = [hostFitContentStyles, css `
63
65
  text-transform: var(--mds-font-apps-body-large-regular-text-case);
64
66
  }
65
67
 
66
- :host([size="midsize"]) {
68
+ :host([size="midsize"])::part(link-container) {
67
69
  font-size: var(--mds-font-apps-body-midsize-regular-font-size);
68
70
  font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
69
71
  line-height: var(--mds-font-apps-body-midsize-regular-line-height);
@@ -71,7 +73,7 @@ const styles = [hostFitContentStyles, css `
71
73
  text-transform: var(--mds-font-apps-body-midsize-regular-text-case);
72
74
  }
73
75
 
74
- :host([size="small"]) {
76
+ :host([size="small"])::part(link-container) {
75
77
  font-size: var(--mds-font-apps-body-small-regular-font-size);
76
78
  font-weight: var(--mds-font-apps-body-small-regular-font-weight);
77
79
  line-height: var(--mds-font-apps-body-small-regular-line-height);
@@ -79,7 +81,9 @@ const styles = [hostFitContentStyles, css `
79
81
  text-transform: var(--mds-font-apps-body-small-regular-text-case);
80
82
  }
81
83
 
82
- :host([size="large"]:hover), :host([size="large"]:active), :host([size="large"][inline]) {
84
+ :host([size="large"]:hover)::part(link-container),
85
+ :host([size="large"]:active)::part(link-container),
86
+ :host([size="large"][inline])::part(link-container) {
83
87
  font-size: var(--mds-font-apps-body-large-regular-underline-font-size);
84
88
  font-weight: var(--mds-font-apps-body-large-regular-underline-font-weight);
85
89
  line-height: var(--mds-font-apps-body-large-regular-underline-line-height);
@@ -87,7 +91,9 @@ const styles = [hostFitContentStyles, css `
87
91
  text-transform: var(--mds-font-apps-body-large-regular-underline-text-case);
88
92
  }
89
93
 
90
- :host([size="midsize"]:hover), :host([size="midsize"]:active), :host([size="midsize"][inline]) {
94
+ :host([size="midsize"]:hover)::part(link-container),
95
+ :host([size="midsize"]:active)::part(link-container),
96
+ :host([size="midsize"][inline])::part(link-container) {
91
97
  font-size: var(--mds-font-apps-body-midsize-regular-underline-font-size);
92
98
  font-weight: var(--mds-font-apps-body-midsize-regular-underline-font-weight);
93
99
  line-height: var(--mds-font-apps-body-midsize-regular-underline-line-height);
@@ -95,7 +101,9 @@ const styles = [hostFitContentStyles, css `
95
101
  text-transform: var(--mds-font-apps-body-midsize-regular-underline-text-case);
96
102
  }
97
103
 
98
- :host([size="small"]:hover), :host([size="small"]:active), :host([size="small"][inline]) {
104
+ :host([size="small"]:hover)::part(link-container),
105
+ :host([size="small"]:active)::part(link-container),
106
+ :host([size="small"][inline])::part(link-container) {
99
107
  font-size: var(--mds-font-apps-body-small-regular-underline-font-size);
100
108
  font-weight: var(--mds-font-apps-body-small-regular-underline-font-weight);
101
109
  line-height: var(--mds-font-apps-body-small-regular-underline-line-height);
@@ -103,17 +111,17 @@ const styles = [hostFitContentStyles, css `
103
111
  text-transform: var(--mds-font-apps-body-small-regular-underline-text-case);
104
112
  }
105
113
 
106
- :host([disabled]) {
114
+ :host([disabled])::part(link-container) {
107
115
  color: var(--mdc-link-color-disabled);
108
116
  pointer-events: none;
109
117
  }
110
118
 
111
- :host([inverted][disabled]) {
119
+ :host([inverted][disabled])::part(link-container) {
112
120
  color: var(--mdc-link-inverted-color-disabled);
113
121
  }
114
- `, ...hostFocusRingStyles(),
122
+ `, ...hostFocusRingStyles(true),
115
123
  css `
116
- :host(:active) {
124
+ :host(:active)::part(link-container) {
117
125
  box-shadow: none;
118
126
  }
119
127
  `];
package/dist/components/virtualizedlist/virtualizedlist.component.js CHANGED
@@ -104,7 +104,7 @@ class VirtualizedList extends Component {
104
104
  this.setlistdata({ virtualItems, measureElement, listStyle });
105
105
  }
106
106
  return html `<div
107
- class="mdc-virtualizedlist-container"
107
+ part="container"
108
108
  style="height: ${getTotalSize()}px;"
109
109
  >
110
110
  <slot></slot>
@@ -113,7 +113,7 @@ class VirtualizedList extends Component {
113
113
  render() {
114
114
  return html `<div
115
115
  ${ref(this.scrollElementRef)}
116
- class="mdc-virtualizedlist-scroll"
116
+ part="scroll"
117
117
  @scroll=${this.onscroll && this.onscroll}
118
118
  >
119
119
  ${this.virtualizerController ? this.getVirtualizedListWrapper(this.virtualizerController) : html ``}
package/dist/components/virtualizedlist/virtualizedlist.styles.js CHANGED
@@ -1,17 +1,15 @@
1
1
  import { css } from 'lit';
2
2
  const styles = [
3
3
  css `
4
- :host {
5
- .mdc-virtualizedlist-scroll {
6
- height: 100%;
7
- width: 100%;
8
- overflow-y: auto;
9
- }
10
- .mdc-virtualizedlist-container {
11
- position: relative;
12
- width: 100%;
13
- }
14
- }
4
+ :host::part(scroll) {
5
+ height: 100%;
6
+ width: 100%;
7
+ overflow-y: auto;
8
+ }
9
+ :host::part(container) {
10
+ position: relative;
11
+ width: 100%;
12
+ }
15
13
  `,
16
14
  ];
17
15
  export default styles;