@momentum-design/components 0.108.3 → 0.109.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.
- package/dist/browser/index.js +33 -24
- package/dist/browser/index.js.map +3 -3
- package/dist/components/listitem/listitem.styles.js +15 -7
- package/dist/components/option/option.component.js +7 -3
- package/dist/components/option/option.styles.js +12 -15
- package/dist/custom-elements.json +977 -977
- package/dist/react/brandvisual/index.d.ts +1 -1
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- package/package.json +1 -1
|
@@ -17,7 +17,6 @@ const styles = css `
|
|
|
17
17
|
}
|
|
18
18
|
:host {
|
|
19
19
|
background-color: var(--mdc-listitem-default-background-color);
|
|
20
|
-
column-gap: var(--mdc-listitem-column-gap);
|
|
21
20
|
display: flex;
|
|
22
21
|
flex-direction: row;
|
|
23
22
|
cursor: var(--mdc-listitem-cursor);
|
|
@@ -31,11 +30,8 @@ const styles = css `
|
|
|
31
30
|
:host([variant='inset-pill']) {
|
|
32
31
|
border-radius: 3.125rem;
|
|
33
32
|
}
|
|
34
|
-
:host::part(leading-text)
|
|
35
|
-
|
|
36
|
-
/** 2x of column gap on both ends of the listitem - 100% width */
|
|
37
|
-
width: calc(100% - (2 * var(--mdc-listitem-padding-left-right)));
|
|
38
|
-
}
|
|
33
|
+
:host::part(leading-text),
|
|
34
|
+
:host::part(trailing-text),
|
|
39
35
|
:host::part(leading-text-primary-label),
|
|
40
36
|
:host::part(leading-text-secondary-label),
|
|
41
37
|
:host::part(leading-text-tertiary-label),
|
|
@@ -77,11 +73,16 @@ const styles = css `
|
|
|
77
73
|
align-items: center;
|
|
78
74
|
column-gap: var(--mdc-listitem-column-gap);
|
|
79
75
|
display: flex;
|
|
80
|
-
width:
|
|
76
|
+
min-width: 0;
|
|
77
|
+
}
|
|
78
|
+
:host::part(leading) {
|
|
79
|
+
flex: 1;
|
|
81
80
|
}
|
|
82
81
|
:host::part(trailing) {
|
|
82
|
+
flex: 0 1 auto;
|
|
83
83
|
justify-content: flex-end;
|
|
84
84
|
}
|
|
85
|
+
|
|
85
86
|
:host::part(leading-text-secondary-label),
|
|
86
87
|
:host::part(leading-text-tertiary-label) {
|
|
87
88
|
color: var(--mdc-listitem-secondary-label-color);
|
|
@@ -94,12 +95,19 @@ const styles = css `
|
|
|
94
95
|
:host::part(trailing-text) {
|
|
95
96
|
text-align: right;
|
|
96
97
|
}
|
|
98
|
+
|
|
99
|
+
:host::part(trailing-text-side-header),
|
|
100
|
+
:host::part(trailing-text-subline) {
|
|
101
|
+
margin-inline-start: var(--mdc-listitem-column-gap);
|
|
102
|
+
}
|
|
103
|
+
|
|
97
104
|
::slotted([slot='leading-controls']),
|
|
98
105
|
::slotted([slot='trailing-controls']) {
|
|
99
106
|
align-items: center;
|
|
100
107
|
column-gap: var(--mdc-listitem-column-gap);
|
|
101
108
|
display: flex;
|
|
102
109
|
flex-direction: row;
|
|
110
|
+
flex-shrink: 0;
|
|
103
111
|
}
|
|
104
112
|
`;
|
|
105
113
|
export default [styles, ...hostFocusRingStyles()];
|
|
@@ -79,8 +79,10 @@ class Option extends FormInternalsMixin(ListItem) {
|
|
|
79
79
|
</div>
|
|
80
80
|
`
|
|
81
81
|
: nothing;
|
|
82
|
-
const
|
|
83
|
-
? html `
|
|
82
|
+
const trailingContent = this.selected
|
|
83
|
+
? html `
|
|
84
|
+
<mdc-icon length-unit="rem" slot="trailing-controls" name="${SELECTED_ICON_NAME}"></mdc-icon>
|
|
85
|
+
`
|
|
84
86
|
: nothing;
|
|
85
87
|
return html `
|
|
86
88
|
${prefixIconContent}
|
|
@@ -88,7 +90,9 @@ class Option extends FormInternalsMixin(ListItem) {
|
|
|
88
90
|
${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
|
|
89
91
|
${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
|
|
90
92
|
</div>
|
|
91
|
-
<div part="trailing"
|
|
93
|
+
<div part="trailing">
|
|
94
|
+
${trailingContent}
|
|
95
|
+
</div>
|
|
92
96
|
`;
|
|
93
97
|
}
|
|
94
98
|
}
|
|
@@ -1,29 +1,26 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
const styles = css `
|
|
3
3
|
:host {
|
|
4
|
+
--mdc-listitem-column-gap: 0.75rem;
|
|
4
5
|
--mdc-option-icon-width: 1rem;
|
|
6
|
+
}
|
|
5
7
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
+
:host::part(leading-icon),
|
|
9
|
+
:host::part(trailing) {
|
|
8
10
|
display: flex;
|
|
9
|
-
flex-direction: row;
|
|
10
11
|
align-items: center;
|
|
12
|
+
width: var(--mdc-option-icon-width);
|
|
11
13
|
}
|
|
12
|
-
|
|
13
|
-
|
|
14
|
+
|
|
15
|
+
:host::part(leading-text) {
|
|
16
|
+
flex: 1;
|
|
14
17
|
}
|
|
15
|
-
|
|
16
|
-
|
|
18
|
+
|
|
19
|
+
:host::part(leading-icon) {
|
|
20
|
+
margin-inline-end: var(--mdc-listitem-column-gap);
|
|
17
21
|
}
|
|
18
|
-
:host::part(leading-icon),
|
|
19
22
|
:host::part(trailing) {
|
|
20
|
-
|
|
21
|
-
max-width: var(--mdc-option-icon-width);
|
|
22
|
-
}
|
|
23
|
-
:host::part(leading-text) {
|
|
24
|
-
flex: 1;
|
|
25
|
-
/** 2x of leading and trailing icon width + 2x of column gap on both sides of the label text */
|
|
26
|
-
width: calc(100% - (2 * var(--mdc-option-icon-width)) - (2 * var(--mdc-listitem-column-gap)));
|
|
23
|
+
margin-inline-start: var(--mdc-listitem-column-gap);
|
|
27
24
|
}
|
|
28
25
|
`;
|
|
29
26
|
export default [styles];
|