@momentum-design/components 0.122.14 → 0.122.15
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 +39 -35
- package/dist/browser/index.js.map +2 -2
- package/dist/components/listitem/listitem.component.d.ts +9 -0
- package/dist/components/listitem/listitem.component.js +5 -1
- package/dist/components/listitem/listitem.styles.js +4 -0
- package/dist/custom-elements.json +5345 -5205
- package/dist/react/index.d.ts +4 -4
- package/dist/react/index.js +4 -4
- package/package.json +1 -1
|
@@ -116,6 +116,15 @@ declare class ListItem extends ListItem_base {
|
|
|
116
116
|
* @default undefined
|
|
117
117
|
*/
|
|
118
118
|
dataIndex?: number;
|
|
119
|
+
/**
|
|
120
|
+
* Indicates whether the list item is active.
|
|
121
|
+
* When set to true, the list item appears in a active state.
|
|
122
|
+
*
|
|
123
|
+
* NOTE: this is a visual state only, it does not affect the behavior or a11y of the list item.
|
|
124
|
+
*
|
|
125
|
+
* @default undefined
|
|
126
|
+
*/
|
|
127
|
+
active?: boolean;
|
|
119
128
|
constructor();
|
|
120
129
|
connectedCallback(): void;
|
|
121
130
|
/**
|
|
@@ -230,7 +230,7 @@ class ListItem extends DisabledMixin(TabIndexMixin(LifeCycleMixin(Component))) {
|
|
|
230
230
|
<div part="leading">
|
|
231
231
|
${this.renderLeadingControls()}
|
|
232
232
|
<div part="leading-text">
|
|
233
|
-
${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
|
|
233
|
+
${this.getText('leading-text-primary-label', this.active ? TYPE.BODY_MIDSIZE_BOLD : TYPE.BODY_MIDSIZE_REGULAR, this.label)}
|
|
234
234
|
${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
|
|
235
235
|
${this.getText('leading-text-tertiary-label', TYPE.BODY_SMALL_REGULAR, this.tertiaryLabel)}
|
|
236
236
|
</div>
|
|
@@ -287,4 +287,8 @@ __decorate([
|
|
|
287
287
|
property({ type: Number, reflect: true, attribute: 'data-index' }),
|
|
288
288
|
__metadata("design:type", Number)
|
|
289
289
|
], ListItem.prototype, "dataIndex", void 0);
|
|
290
|
+
__decorate([
|
|
291
|
+
property({ type: Boolean, reflect: true, attribute: 'active' }),
|
|
292
|
+
__metadata("design:type", Boolean)
|
|
293
|
+
], ListItem.prototype, "active", void 0);
|
|
290
294
|
export default ListItem;
|
|
@@ -3,6 +3,7 @@ import { hostFocusRingStyles } from '../../utils/styles';
|
|
|
3
3
|
const styles = css `
|
|
4
4
|
:host {
|
|
5
5
|
--mdc-listitem-default-background-color: var(--mds-color-theme-background-primary-ghost);
|
|
6
|
+
--mdc-listitem-default-active-background-color: var(--mds-color-theme-background-primary-active);
|
|
6
7
|
--mdc-listitem-background-color-hover: var(--mds-color-theme-background-primary-hover);
|
|
7
8
|
--mdc-listitem-background-color-active: var(--mds-color-theme-background-primary-active);
|
|
8
9
|
--mdc-listitem-primary-label-color: var(--mds-color-theme-text-primary-normal);
|
|
@@ -62,6 +63,9 @@ const styles = css `
|
|
|
62
63
|
color: var(--mdc-listitem-disabled-color);
|
|
63
64
|
cursor: default;
|
|
64
65
|
}
|
|
66
|
+
:host([active]) {
|
|
67
|
+
background-color: var(--mdc-listitem-default-active-background-color);
|
|
68
|
+
}
|
|
65
69
|
:host(:hover) {
|
|
66
70
|
background-color: var(--mdc-listitem-background-color-hover);
|
|
67
71
|
}
|