@momentum-design/components 0.118.3 → 0.118.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.
- package/dist/browser/index.js +325 -325
- package/dist/browser/index.js.map +4 -4
- package/dist/components/accordion/accordion.component.d.ts +1 -1
- package/dist/components/accordion/accordion.component.js +1 -1
- package/dist/components/accordionbutton/accordionbutton.component.d.ts +2 -2
- package/dist/components/accordionbutton/accordionbutton.component.js +2 -2
- package/dist/components/badge/badge.component.d.ts +13 -4
- package/dist/components/badge/badge.component.js +16 -10
- package/dist/components/badge/badge.styles.js +13 -13
- package/dist/components/buttongroup/buttongroup.component.d.ts +2 -0
- package/dist/components/buttongroup/buttongroup.component.js +2 -0
- package/dist/components/checkbox/checkbox.component.js +2 -2
- package/dist/components/checkbox/checkbox.styles.js +13 -8
- package/dist/components/combobox/combobox.component.js +1 -1
- package/dist/components/dialog/dialog.component.d.ts +7 -0
- package/dist/components/dialog/dialog.component.js +7 -0
- package/dist/components/formfieldgroup/formfieldgroup.styles.js +0 -4
- package/dist/components/formfieldwrapper/formfieldwrapper.component.d.ts +2 -2
- package/dist/components/formfieldwrapper/formfieldwrapper.component.js +5 -7
- package/dist/components/formfieldwrapper/formfieldwrapper.styles.js +22 -16
- package/dist/components/listheader/listheader.component.d.ts +4 -0
- package/dist/components/listheader/listheader.component.js +4 -0
- package/dist/components/listitem/listitem.component.d.ts +5 -0
- package/dist/components/listitem/listitem.component.js +5 -0
- package/dist/components/menuitem/menuitem.component.d.ts +7 -0
- package/dist/components/menuitem/menuitem.component.js +7 -0
- package/dist/components/menuitemcheckbox/menuitemcheckbox.component.d.ts +10 -0
- package/dist/components/menuitemcheckbox/menuitemcheckbox.component.js +10 -0
- package/dist/components/menuitemradio/menuitemradio.component.d.ts +10 -0
- package/dist/components/menuitemradio/menuitemradio.component.js +10 -0
- package/dist/components/menupopover/menupopover.component.d.ts +4 -0
- package/dist/components/menupopover/menupopover.component.js +4 -0
- package/dist/components/menusection/menusection.component.d.ts +5 -0
- package/dist/components/menusection/menusection.component.js +5 -0
- package/dist/components/navmenuitem/navmenuitem.component.d.ts +6 -0
- package/dist/components/navmenuitem/navmenuitem.component.js +12 -4
- package/dist/components/navmenuitem/navmenuitem.styles.js +4 -4
- package/dist/components/optgroup/optgroup.component.d.ts +2 -0
- package/dist/components/optgroup/optgroup.component.js +4 -1
- package/dist/components/option/option.component.d.ts +8 -0
- package/dist/components/option/option.component.js +8 -0
- package/dist/components/popover/popover.component.d.ts +3 -0
- package/dist/components/popover/popover.component.js +5 -2
- package/dist/components/popover/popover.styles.js +4 -4
- package/dist/components/presence/presence.component.d.ts +17 -0
- package/dist/components/presence/presence.component.js +18 -1
- package/dist/components/presence/presence.styles.js +15 -15
- package/dist/components/progressbar/progressbar.component.d.ts +8 -0
- package/dist/components/progressbar/progressbar.component.js +11 -3
- package/dist/components/progressbar/progressbar.styles.js +3 -5
- package/dist/components/progressspinner/progressspinner.component.d.ts +6 -0
- package/dist/components/progressspinner/progressspinner.component.js +6 -0
- package/dist/components/radio/radio.component.js +2 -2
- package/dist/components/radio/radio.styles.js +8 -12
- package/dist/components/staticcheckbox/staticcheckbox.component.d.ts +1 -0
- package/dist/components/staticcheckbox/staticcheckbox.component.js +1 -0
- package/dist/components/staticchip/staticchip.component.d.ts +1 -0
- package/dist/components/staticchip/staticchip.component.js +1 -0
- package/dist/components/tab/tab.component.d.ts +5 -0
- package/dist/components/tab/tab.component.js +5 -0
- package/dist/components/tablist/tablist.component.d.ts +3 -1
- package/dist/components/tablist/tablist.component.js +5 -3
- package/dist/components/tablist/tablist.styles.js +1 -1
- package/dist/components/textarea/textarea.component.d.ts +2 -0
- package/dist/components/textarea/textarea.component.js +3 -1
- package/dist/components/toggle/toggle.component.d.ts +0 -3
- package/dist/components/toggle/toggle.component.js +0 -3
- package/dist/components/toggle/toggle.styles.js +11 -14
- package/dist/components/typewriter/typewriter.component.d.ts +1 -0
- package/dist/components/typewriter/typewriter.component.js +2 -1
- package/dist/components/typewriter/typewriter.constants.d.ts +1 -0
- package/dist/components/typewriter/typewriter.constants.js +1 -0
- package/dist/components/typewriter/typewriter.styles.js +2 -2
- package/dist/components/virtualizedlist/virtualizedlist.component.d.ts +3 -0
- package/dist/components/virtualizedlist/virtualizedlist.component.js +3 -0
- package/dist/custom-elements.json +2638 -1870
- package/dist/react/accordion/index.d.ts +1 -1
- package/dist/react/accordion/index.js +1 -1
- package/dist/react/accordionbutton/index.d.ts +2 -2
- package/dist/react/accordionbutton/index.js +2 -2
- package/dist/react/badge/index.d.ts +10 -0
- package/dist/react/badge/index.js +10 -0
- package/dist/react/buttongroup/index.d.ts +2 -0
- package/dist/react/buttongroup/index.js +2 -0
- package/dist/react/dialog/index.d.ts +7 -0
- package/dist/react/dialog/index.js +7 -0
- package/dist/react/index.d.ts +3 -3
- package/dist/react/index.js +3 -3
- package/dist/react/listheader/index.d.ts +4 -0
- package/dist/react/listheader/index.js +4 -0
- package/dist/react/listitem/index.d.ts +5 -0
- package/dist/react/listitem/index.js +5 -0
- package/dist/react/menuitem/index.d.ts +7 -0
- package/dist/react/menuitem/index.js +7 -0
- package/dist/react/menuitemcheckbox/index.d.ts +10 -0
- package/dist/react/menuitemcheckbox/index.js +10 -0
- package/dist/react/menuitemradio/index.d.ts +10 -0
- package/dist/react/menuitemradio/index.js +10 -0
- package/dist/react/menupopover/index.d.ts +4 -0
- package/dist/react/menupopover/index.js +4 -0
- package/dist/react/menusection/index.d.ts +5 -0
- package/dist/react/menusection/index.js +5 -0
- package/dist/react/navmenuitem/index.d.ts +6 -0
- package/dist/react/navmenuitem/index.js +6 -0
- package/dist/react/optgroup/index.d.ts +2 -0
- package/dist/react/optgroup/index.js +2 -0
- package/dist/react/option/index.d.ts +8 -0
- package/dist/react/option/index.js +8 -0
- package/dist/react/popover/index.d.ts +3 -0
- package/dist/react/popover/index.js +3 -0
- package/dist/react/presence/index.d.ts +17 -0
- package/dist/react/presence/index.js +17 -0
- package/dist/react/progressbar/index.d.ts +8 -0
- package/dist/react/progressbar/index.js +8 -0
- package/dist/react/progressspinner/index.d.ts +6 -0
- package/dist/react/progressspinner/index.js +6 -0
- package/dist/react/staticcheckbox/index.d.ts +1 -0
- package/dist/react/staticcheckbox/index.js +1 -0
- package/dist/react/staticchip/index.d.ts +1 -0
- package/dist/react/staticchip/index.js +1 -0
- package/dist/react/tab/index.d.ts +5 -0
- package/dist/react/tab/index.js +5 -0
- package/dist/react/tablist/index.d.ts +3 -1
- package/dist/react/tablist/index.js +3 -1
- package/dist/react/textarea/index.d.ts +2 -0
- package/dist/react/textarea/index.js +2 -0
- package/dist/react/toggle/index.d.ts +0 -3
- package/dist/react/toggle/index.js +0 -3
- package/dist/react/typewriter/index.d.ts +1 -0
- package/dist/react/typewriter/index.js +1 -0
- package/dist/react/virtualizedlist/index.d.ts +3 -0
- package/dist/react/virtualizedlist/index.js +3 -0
- package/package.json +1 -1
@@ -29,6 +29,7 @@ import styles from './staticchip.styles';
|
|
29
29
|
* @cssproperty --mdc-chip-border-color - The border color of the static chip.
|
30
30
|
* @cssproperty --mdc-chip-background-color - The background color of the static chip.
|
31
31
|
*
|
32
|
+
* @csspart label - The label of the static chip.
|
32
33
|
*/
|
33
34
|
class StaticChip extends IconNameMixin(Component) {
|
34
35
|
constructor() {
|
@@ -98,6 +98,11 @@ declare const Tab_base: import("../../utils/mixins/index.types").Constructor<imp
|
|
98
98
|
* @cssproperty --mdc-tab-pill-inactive-background-color-normal - Background color for inactive pill tab in rest state.
|
99
99
|
* @cssproperty --mdc-tab-pill-inactive-color - Text and icon color for inactive pill tab.
|
100
100
|
* @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.
|
101
|
+
*
|
102
|
+
* @csspart container - The container of the tab.
|
103
|
+
* @csspart icon - The icon of the tab.
|
104
|
+
* @csspart indicator - The indicator of the tab.
|
105
|
+
* @csspart text - The text of the tab.
|
101
106
|
*/
|
102
107
|
declare class Tab extends Tab_base {
|
103
108
|
/**
|
@@ -112,6 +112,11 @@ import styles from './tab.styles';
|
|
112
112
|
* @cssproperty --mdc-tab-pill-inactive-background-color-normal - Background color for inactive pill tab in rest state.
|
113
113
|
* @cssproperty --mdc-tab-pill-inactive-color - Text and icon color for inactive pill tab.
|
114
114
|
* @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.
|
115
|
+
*
|
116
|
+
* @csspart container - The container of the tab.
|
117
|
+
* @csspart icon - The icon of the tab.
|
118
|
+
* @csspart indicator - The indicator of the tab.
|
119
|
+
* @csspart text - The text of the tab.
|
115
120
|
*/
|
116
121
|
class Tab extends IconNameMixin(Buttonsimple) {
|
117
122
|
constructor() {
|
@@ -42,7 +42,9 @@ import { Component } from '../../models';
|
|
42
42
|
*
|
43
43
|
* @cssproperty --mdc-tablist-gap - Gap between tabs
|
44
44
|
* @cssproperty --mdc-tablist-width - Width of the tablist
|
45
|
-
* @cssproperty
|
45
|
+
* @cssproperty --mdc-tablist-arrow-button-margin - Margin value for the arrow button
|
46
|
+
*
|
47
|
+
* @csspart container - The tablist container.
|
46
48
|
*/
|
47
49
|
declare class TabList extends Component {
|
48
50
|
/**
|
@@ -58,7 +58,9 @@ import { getFirstTab, getLastTab, getNextTab, getPreviousTab, findTab, getActive
|
|
58
58
|
*
|
59
59
|
* @cssproperty --mdc-tablist-gap - Gap between tabs
|
60
60
|
* @cssproperty --mdc-tablist-width - Width of the tablist
|
61
|
-
* @cssproperty
|
61
|
+
* @cssproperty --mdc-tablist-arrow-button-margin - Margin value for the arrow button
|
62
|
+
*
|
63
|
+
* @csspart container - The tablist container.
|
62
64
|
*/
|
63
65
|
class TabList extends Component {
|
64
66
|
/**
|
@@ -453,7 +455,7 @@ class TabList extends Component {
|
|
453
455
|
></mdc-button>`
|
454
456
|
: nothing}`;
|
455
457
|
return html ` ${arrowButton('backward')}
|
456
|
-
<div
|
458
|
+
<div part="container" role="${ROLE.TABLIST}" tabindex="-1" aria-label="${ifDefined(this.dataAriaLabel)}">
|
457
459
|
<slot></slot>
|
458
460
|
</div>
|
459
461
|
${arrowButton(ARROW_BUTTON_DIRECTION.FORWARD)}`;
|
@@ -469,7 +471,7 @@ __decorate([
|
|
469
471
|
__metadata("design:type", String)
|
470
472
|
], TabList.prototype, "dataAriaLabel", void 0);
|
471
473
|
__decorate([
|
472
|
-
query('
|
474
|
+
query('[part="container"]'),
|
473
475
|
__metadata("design:type", HTMLDivElement)
|
474
476
|
], TabList.prototype, "tabsContainer", void 0);
|
475
477
|
__decorate([
|
@@ -51,6 +51,8 @@ declare const Textarea_base: import("../../utils/mixins/index.types").Constructo
|
|
51
51
|
* @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover
|
52
52
|
* @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused
|
53
53
|
* @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused
|
54
|
+
*
|
55
|
+
* @csspart textarea-container - The textarea container
|
54
56
|
*/
|
55
57
|
declare class Textarea extends Textarea_base {
|
56
58
|
/**
|
@@ -66,6 +66,8 @@ import styles from './textarea.styles';
|
|
66
66
|
* @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover
|
67
67
|
* @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused
|
68
68
|
* @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused
|
69
|
+
*
|
70
|
+
* @csspart textarea-container - The textarea container
|
69
71
|
*/
|
70
72
|
class Textarea extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
|
71
73
|
constructor() {
|
@@ -281,7 +283,7 @@ class Textarea extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
|
|
281
283
|
var _a;
|
282
284
|
return html `
|
283
285
|
${this.renderLabel()}
|
284
|
-
<div class="
|
286
|
+
<div class="mdc-focus-ring" part="textarea-container">
|
285
287
|
<textarea
|
286
288
|
aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
|
287
289
|
part="textarea"
|
@@ -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
|
@@ -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
|
@@ -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
|
-
|
50
|
-
|
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
|
-
|
51
|
+
:host::part(label),
|
58
52
|
:host::part(toggle-input) {
|
59
53
|
cursor: pointer;
|
60
54
|
}
|
61
55
|
|
62
|
-
|
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])
|
64
|
+
:host([disabled])::part(label),
|
68
65
|
:host([disabled])::part(toggle-input) {
|
69
66
|
cursor: default;
|
70
67
|
}
|
71
68
|
|
72
|
-
|
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])
|
93
|
-
:host([disabled])
|
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
|
`,
|
@@ -40,6 +40,7 @@ import type { TextType, TagName, TypewriterSpeed } from './typewriter.types';
|
|
40
40
|
*
|
41
41
|
* @csspart container - Container for the text element
|
42
42
|
* @csspart text - The text element (forwarded to mdc-text)
|
43
|
+
* @csspart typewriter-hidden - The hidden typewriter text
|
43
44
|
*
|
44
45
|
* @event typing-complete - (React: onTypingComplete) Fired when the typewriter finishes typing all content.
|
45
46
|
* Detail: \{ finalContent: string \}
|
@@ -52,6 +52,7 @@ import { DEFAULTS, SPEED } from './typewriter.constants';
|
|
52
52
|
*
|
53
53
|
* @csspart container - Container for the text element
|
54
54
|
* @csspart text - The text element (forwarded to mdc-text)
|
55
|
+
* @csspart typewriter-hidden - The hidden typewriter text
|
55
56
|
*
|
56
57
|
* @event typing-complete - (React: onTypingComplete) Fired when the typewriter finishes typing all content.
|
57
58
|
* Detail: \{ finalContent: string \}
|
@@ -417,7 +418,7 @@ class Typewriter extends Component {
|
|
417
418
|
aria-label="${this.originalText}"
|
418
419
|
>${this.displayedText}</mdc-text
|
419
420
|
>
|
420
|
-
<slot @slotchange=${this.handleSlotChange}
|
421
|
+
<slot @slotchange=${this.handleSlotChange} part="${DEFAULTS.CSS_PART_HIDDEN}"></slot>
|
421
422
|
</div>
|
422
423
|
`;
|
423
424
|
}
|
@@ -11,6 +11,7 @@ declare const DEFAULTS: {
|
|
11
11
|
readonly TEXT_ELEMENT_TAGNAME: "p";
|
12
12
|
readonly CSS_PART_TEXT: "text";
|
13
13
|
readonly CSS_PART_CONTAINER: "container";
|
14
|
+
readonly CSS_PART_HIDDEN: "typewriter-hidden";
|
14
15
|
readonly CHILDREN: "";
|
15
16
|
readonly SPEED: "normal";
|
16
17
|
readonly CUSTOM_EVENT: {
|
@@ -16,6 +16,9 @@ import { SetListDataProps, VirtualizerProps } from './virtualizedlist.types';
|
|
16
16
|
* @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.
|
17
17
|
*
|
18
18
|
* @slot - Client side List with nested list items.
|
19
|
+
*
|
20
|
+
* @csspart container - The container of the virtualized list.
|
21
|
+
* @csspart scroll - The scrollable area of the virtualized list.
|
19
22
|
*/
|
20
23
|
declare class VirtualizedList extends Component {
|
21
24
|
/**
|
@@ -27,6 +27,9 @@ import { DEFAULTS } from './virtualizedlist.constants';
|
|
27
27
|
* @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.
|
28
28
|
*
|
29
29
|
* @slot - Client side List with nested list items.
|
30
|
+
*
|
31
|
+
* @csspart container - The container of the virtualized list.
|
32
|
+
* @csspart scroll - The scrollable area of the virtualized list.
|
30
33
|
*/
|
31
34
|
class VirtualizedList extends Component {
|
32
35
|
constructor() {
|