@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.
Files changed (133) hide show
  1. package/dist/browser/index.js +325 -325
  2. package/dist/browser/index.js.map +4 -4
  3. package/dist/components/accordion/accordion.component.d.ts +1 -1
  4. package/dist/components/accordion/accordion.component.js +1 -1
  5. package/dist/components/accordionbutton/accordionbutton.component.d.ts +2 -2
  6. package/dist/components/accordionbutton/accordionbutton.component.js +2 -2
  7. package/dist/components/badge/badge.component.d.ts +13 -4
  8. package/dist/components/badge/badge.component.js +16 -10
  9. package/dist/components/badge/badge.styles.js +13 -13
  10. package/dist/components/buttongroup/buttongroup.component.d.ts +2 -0
  11. package/dist/components/buttongroup/buttongroup.component.js +2 -0
  12. package/dist/components/checkbox/checkbox.component.js +2 -2
  13. package/dist/components/checkbox/checkbox.styles.js +13 -8
  14. package/dist/components/combobox/combobox.component.js +1 -1
  15. package/dist/components/dialog/dialog.component.d.ts +7 -0
  16. package/dist/components/dialog/dialog.component.js +7 -0
  17. package/dist/components/formfieldgroup/formfieldgroup.styles.js +0 -4
  18. package/dist/components/formfieldwrapper/formfieldwrapper.component.d.ts +2 -2
  19. package/dist/components/formfieldwrapper/formfieldwrapper.component.js +5 -7
  20. package/dist/components/formfieldwrapper/formfieldwrapper.styles.js +22 -16
  21. package/dist/components/listheader/listheader.component.d.ts +4 -0
  22. package/dist/components/listheader/listheader.component.js +4 -0
  23. package/dist/components/listitem/listitem.component.d.ts +5 -0
  24. package/dist/components/listitem/listitem.component.js +5 -0
  25. package/dist/components/menuitem/menuitem.component.d.ts +7 -0
  26. package/dist/components/menuitem/menuitem.component.js +7 -0
  27. package/dist/components/menuitemcheckbox/menuitemcheckbox.component.d.ts +10 -0
  28. package/dist/components/menuitemcheckbox/menuitemcheckbox.component.js +10 -0
  29. package/dist/components/menuitemradio/menuitemradio.component.d.ts +10 -0
  30. package/dist/components/menuitemradio/menuitemradio.component.js +10 -0
  31. package/dist/components/menupopover/menupopover.component.d.ts +4 -0
  32. package/dist/components/menupopover/menupopover.component.js +4 -0
  33. package/dist/components/menusection/menusection.component.d.ts +5 -0
  34. package/dist/components/menusection/menusection.component.js +5 -0
  35. package/dist/components/navmenuitem/navmenuitem.component.d.ts +6 -0
  36. package/dist/components/navmenuitem/navmenuitem.component.js +12 -4
  37. package/dist/components/navmenuitem/navmenuitem.styles.js +4 -4
  38. package/dist/components/optgroup/optgroup.component.d.ts +2 -0
  39. package/dist/components/optgroup/optgroup.component.js +4 -1
  40. package/dist/components/option/option.component.d.ts +8 -0
  41. package/dist/components/option/option.component.js +8 -0
  42. package/dist/components/popover/popover.component.d.ts +3 -0
  43. package/dist/components/popover/popover.component.js +5 -2
  44. package/dist/components/popover/popover.styles.js +4 -4
  45. package/dist/components/presence/presence.component.d.ts +17 -0
  46. package/dist/components/presence/presence.component.js +18 -1
  47. package/dist/components/presence/presence.styles.js +15 -15
  48. package/dist/components/progressbar/progressbar.component.d.ts +8 -0
  49. package/dist/components/progressbar/progressbar.component.js +11 -3
  50. package/dist/components/progressbar/progressbar.styles.js +3 -5
  51. package/dist/components/progressspinner/progressspinner.component.d.ts +6 -0
  52. package/dist/components/progressspinner/progressspinner.component.js +6 -0
  53. package/dist/components/radio/radio.component.js +2 -2
  54. package/dist/components/radio/radio.styles.js +8 -12
  55. package/dist/components/staticcheckbox/staticcheckbox.component.d.ts +1 -0
  56. package/dist/components/staticcheckbox/staticcheckbox.component.js +1 -0
  57. package/dist/components/staticchip/staticchip.component.d.ts +1 -0
  58. package/dist/components/staticchip/staticchip.component.js +1 -0
  59. package/dist/components/tab/tab.component.d.ts +5 -0
  60. package/dist/components/tab/tab.component.js +5 -0
  61. package/dist/components/tablist/tablist.component.d.ts +3 -1
  62. package/dist/components/tablist/tablist.component.js +5 -3
  63. package/dist/components/tablist/tablist.styles.js +1 -1
  64. package/dist/components/textarea/textarea.component.d.ts +2 -0
  65. package/dist/components/textarea/textarea.component.js +3 -1
  66. package/dist/components/toggle/toggle.component.d.ts +0 -3
  67. package/dist/components/toggle/toggle.component.js +0 -3
  68. package/dist/components/toggle/toggle.styles.js +11 -14
  69. package/dist/components/typewriter/typewriter.component.d.ts +1 -0
  70. package/dist/components/typewriter/typewriter.component.js +2 -1
  71. package/dist/components/typewriter/typewriter.constants.d.ts +1 -0
  72. package/dist/components/typewriter/typewriter.constants.js +1 -0
  73. package/dist/components/typewriter/typewriter.styles.js +2 -2
  74. package/dist/components/virtualizedlist/virtualizedlist.component.d.ts +3 -0
  75. package/dist/components/virtualizedlist/virtualizedlist.component.js +3 -0
  76. package/dist/custom-elements.json +2638 -1870
  77. package/dist/react/accordion/index.d.ts +1 -1
  78. package/dist/react/accordion/index.js +1 -1
  79. package/dist/react/accordionbutton/index.d.ts +2 -2
  80. package/dist/react/accordionbutton/index.js +2 -2
  81. package/dist/react/badge/index.d.ts +10 -0
  82. package/dist/react/badge/index.js +10 -0
  83. package/dist/react/buttongroup/index.d.ts +2 -0
  84. package/dist/react/buttongroup/index.js +2 -0
  85. package/dist/react/dialog/index.d.ts +7 -0
  86. package/dist/react/dialog/index.js +7 -0
  87. package/dist/react/index.d.ts +3 -3
  88. package/dist/react/index.js +3 -3
  89. package/dist/react/listheader/index.d.ts +4 -0
  90. package/dist/react/listheader/index.js +4 -0
  91. package/dist/react/listitem/index.d.ts +5 -0
  92. package/dist/react/listitem/index.js +5 -0
  93. package/dist/react/menuitem/index.d.ts +7 -0
  94. package/dist/react/menuitem/index.js +7 -0
  95. package/dist/react/menuitemcheckbox/index.d.ts +10 -0
  96. package/dist/react/menuitemcheckbox/index.js +10 -0
  97. package/dist/react/menuitemradio/index.d.ts +10 -0
  98. package/dist/react/menuitemradio/index.js +10 -0
  99. package/dist/react/menupopover/index.d.ts +4 -0
  100. package/dist/react/menupopover/index.js +4 -0
  101. package/dist/react/menusection/index.d.ts +5 -0
  102. package/dist/react/menusection/index.js +5 -0
  103. package/dist/react/navmenuitem/index.d.ts +6 -0
  104. package/dist/react/navmenuitem/index.js +6 -0
  105. package/dist/react/optgroup/index.d.ts +2 -0
  106. package/dist/react/optgroup/index.js +2 -0
  107. package/dist/react/option/index.d.ts +8 -0
  108. package/dist/react/option/index.js +8 -0
  109. package/dist/react/popover/index.d.ts +3 -0
  110. package/dist/react/popover/index.js +3 -0
  111. package/dist/react/presence/index.d.ts +17 -0
  112. package/dist/react/presence/index.js +17 -0
  113. package/dist/react/progressbar/index.d.ts +8 -0
  114. package/dist/react/progressbar/index.js +8 -0
  115. package/dist/react/progressspinner/index.d.ts +6 -0
  116. package/dist/react/progressspinner/index.js +6 -0
  117. package/dist/react/staticcheckbox/index.d.ts +1 -0
  118. package/dist/react/staticcheckbox/index.js +1 -0
  119. package/dist/react/staticchip/index.d.ts +1 -0
  120. package/dist/react/staticchip/index.js +1 -0
  121. package/dist/react/tab/index.d.ts +5 -0
  122. package/dist/react/tab/index.js +5 -0
  123. package/dist/react/tablist/index.d.ts +3 -1
  124. package/dist/react/tablist/index.js +3 -1
  125. package/dist/react/textarea/index.d.ts +2 -0
  126. package/dist/react/textarea/index.js +2 -0
  127. package/dist/react/toggle/index.d.ts +0 -3
  128. package/dist/react/toggle/index.js +0 -3
  129. package/dist/react/typewriter/index.d.ts +1 -0
  130. package/dist/react/typewriter/index.js +1 -0
  131. package/dist/react/virtualizedlist/index.d.ts +3 -0
  132. package/dist/react/virtualizedlist/index.js +3 -0
  133. 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 --mdc-tablist-arrow-button-margin - Margin value for the arrow button
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 --mdc-tablist-arrow-button-margin - Margin value for the arrow button
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 class="container" role="${ROLE.TABLIST}" tabindex="-1" aria-label="${ifDefined(this.dataAriaLabel)}">
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('.container'),
474
+ query('[part="container"]'),
473
475
  __metadata("design:type", HTMLDivElement)
474
476
  ], TabList.prototype, "tabsContainer", void 0);
475
477
  __decorate([
@@ -18,7 +18,7 @@ const styles = [
18
18
  width: initial;
19
19
  }
20
20
 
21
- :host .container {
21
+ :host::part(container) {
22
22
  display: flex;
23
23
  overflow-x: hidden;
24
24
  gap: var(--mdc-tablist-gap);
@@ -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="textarea-container mdc-focus-ring" part="textarea-container">
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
- .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
  `,
@@ -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} class="typewriter-hidden"></slot>
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: {
@@ -13,6 +13,7 @@ const DEFAULTS = {
13
13
  TEXT_ELEMENT_TAGNAME: TEXT_DEFAULTS.TEXT_ELEMENT_TAGNAME,
14
14
  CSS_PART_TEXT: 'text',
15
15
  CSS_PART_CONTAINER: 'container',
16
+ CSS_PART_HIDDEN: 'typewriter-hidden',
16
17
  CHILDREN: '',
17
18
  SPEED: 'normal',
18
19
  CUSTOM_EVENT: {
@@ -6,12 +6,12 @@ const styles = [
6
6
  position: relative;
7
7
  }
8
8
 
9
- [part='container'] {
9
+ :host::part(container) {
10
10
  display: flex;
11
11
  align-items: baseline;
12
12
  }
13
13
 
14
- .typewriter-hidden {
14
+ :host::part(typewriter-hidden) {
15
15
  display: none;
16
16
  }
17
17
  `,
@@ -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() {