@momentum-design/components 0.118.2 → 0.118.4

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 (118) hide show
  1. package/dist/browser/index.js +263 -259
  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/dialog/dialog.component.d.ts +7 -0
  13. package/dist/components/dialog/dialog.component.js +7 -0
  14. package/dist/components/listheader/listheader.component.d.ts +4 -0
  15. package/dist/components/listheader/listheader.component.js +4 -0
  16. package/dist/components/listitem/listitem.component.d.ts +5 -0
  17. package/dist/components/listitem/listitem.component.js +5 -0
  18. package/dist/components/menuitem/menuitem.component.d.ts +7 -0
  19. package/dist/components/menuitem/menuitem.component.js +7 -0
  20. package/dist/components/menuitemcheckbox/menuitemcheckbox.component.d.ts +10 -0
  21. package/dist/components/menuitemcheckbox/menuitemcheckbox.component.js +10 -0
  22. package/dist/components/menuitemradio/menuitemradio.component.d.ts +10 -0
  23. package/dist/components/menuitemradio/menuitemradio.component.js +10 -0
  24. package/dist/components/menupopover/menupopover.component.d.ts +4 -0
  25. package/dist/components/menupopover/menupopover.component.js +4 -0
  26. package/dist/components/menusection/menusection.component.d.ts +5 -0
  27. package/dist/components/menusection/menusection.component.js +5 -0
  28. package/dist/components/navmenuitem/navmenuitem.component.d.ts +6 -0
  29. package/dist/components/navmenuitem/navmenuitem.component.js +12 -4
  30. package/dist/components/navmenuitem/navmenuitem.styles.js +4 -4
  31. package/dist/components/optgroup/optgroup.component.d.ts +2 -0
  32. package/dist/components/optgroup/optgroup.component.js +4 -1
  33. package/dist/components/option/option.component.d.ts +8 -0
  34. package/dist/components/option/option.component.js +8 -0
  35. package/dist/components/popover/popover.component.d.ts +3 -0
  36. package/dist/components/popover/popover.component.js +5 -2
  37. package/dist/components/popover/popover.styles.js +4 -4
  38. package/dist/components/presence/presence.component.d.ts +17 -0
  39. package/dist/components/presence/presence.component.js +18 -1
  40. package/dist/components/presence/presence.styles.js +15 -15
  41. package/dist/components/progressbar/progressbar.component.d.ts +8 -0
  42. package/dist/components/progressbar/progressbar.component.js +11 -3
  43. package/dist/components/progressspinner/progressspinner.component.d.ts +6 -0
  44. package/dist/components/progressspinner/progressspinner.component.js +6 -0
  45. package/dist/components/staticcheckbox/staticcheckbox.component.d.ts +1 -0
  46. package/dist/components/staticcheckbox/staticcheckbox.component.js +1 -0
  47. package/dist/components/staticchip/staticchip.component.d.ts +1 -0
  48. package/dist/components/staticchip/staticchip.component.js +1 -0
  49. package/dist/components/tab/tab.component.d.ts +5 -0
  50. package/dist/components/tab/tab.component.js +5 -0
  51. package/dist/components/tablist/tablist.component.d.ts +3 -1
  52. package/dist/components/tablist/tablist.component.js +5 -3
  53. package/dist/components/tablist/tablist.styles.js +1 -1
  54. package/dist/components/textarea/textarea.component.d.ts +2 -0
  55. package/dist/components/textarea/textarea.component.js +3 -1
  56. package/dist/components/typewriter/typewriter.component.d.ts +1 -0
  57. package/dist/components/typewriter/typewriter.component.js +2 -1
  58. package/dist/components/typewriter/typewriter.constants.d.ts +1 -0
  59. package/dist/components/typewriter/typewriter.constants.js +1 -0
  60. package/dist/components/typewriter/typewriter.styles.js +2 -2
  61. package/dist/components/virtualizedlist/virtualizedlist.component.d.ts +3 -0
  62. package/dist/components/virtualizedlist/virtualizedlist.component.js +3 -0
  63. package/dist/custom-elements.json +1222 -442
  64. package/dist/react/accordion/index.d.ts +1 -1
  65. package/dist/react/accordion/index.js +1 -1
  66. package/dist/react/accordionbutton/index.d.ts +2 -2
  67. package/dist/react/accordionbutton/index.js +2 -2
  68. package/dist/react/badge/index.d.ts +10 -0
  69. package/dist/react/badge/index.js +10 -0
  70. package/dist/react/buttongroup/index.d.ts +2 -0
  71. package/dist/react/buttongroup/index.js +2 -0
  72. package/dist/react/dialog/index.d.ts +7 -0
  73. package/dist/react/dialog/index.js +7 -0
  74. package/dist/react/index.d.ts +1 -1
  75. package/dist/react/index.js +1 -1
  76. package/dist/react/listheader/index.d.ts +4 -0
  77. package/dist/react/listheader/index.js +4 -0
  78. package/dist/react/listitem/index.d.ts +5 -0
  79. package/dist/react/listitem/index.js +5 -0
  80. package/dist/react/menuitem/index.d.ts +7 -0
  81. package/dist/react/menuitem/index.js +7 -0
  82. package/dist/react/menuitemcheckbox/index.d.ts +10 -0
  83. package/dist/react/menuitemcheckbox/index.js +10 -0
  84. package/dist/react/menuitemradio/index.d.ts +10 -0
  85. package/dist/react/menuitemradio/index.js +10 -0
  86. package/dist/react/menupopover/index.d.ts +4 -0
  87. package/dist/react/menupopover/index.js +4 -0
  88. package/dist/react/menusection/index.d.ts +5 -0
  89. package/dist/react/menusection/index.js +5 -0
  90. package/dist/react/navmenuitem/index.d.ts +6 -0
  91. package/dist/react/navmenuitem/index.js +6 -0
  92. package/dist/react/optgroup/index.d.ts +2 -0
  93. package/dist/react/optgroup/index.js +2 -0
  94. package/dist/react/option/index.d.ts +8 -0
  95. package/dist/react/option/index.js +8 -0
  96. package/dist/react/popover/index.d.ts +3 -0
  97. package/dist/react/popover/index.js +3 -0
  98. package/dist/react/presence/index.d.ts +17 -0
  99. package/dist/react/presence/index.js +17 -0
  100. package/dist/react/progressbar/index.d.ts +8 -0
  101. package/dist/react/progressbar/index.js +8 -0
  102. package/dist/react/progressspinner/index.d.ts +6 -0
  103. package/dist/react/progressspinner/index.js +6 -0
  104. package/dist/react/staticcheckbox/index.d.ts +1 -0
  105. package/dist/react/staticcheckbox/index.js +1 -0
  106. package/dist/react/staticchip/index.d.ts +1 -0
  107. package/dist/react/staticchip/index.js +1 -0
  108. package/dist/react/tab/index.d.ts +5 -0
  109. package/dist/react/tab/index.js +5 -0
  110. package/dist/react/tablist/index.d.ts +3 -1
  111. package/dist/react/tablist/index.js +3 -1
  112. package/dist/react/textarea/index.d.ts +2 -0
  113. package/dist/react/textarea/index.js +2 -0
  114. package/dist/react/typewriter/index.d.ts +1 -0
  115. package/dist/react/typewriter/index.js +1 -0
  116. package/dist/react/virtualizedlist/index.d.ts +3 -0
  117. package/dist/react/virtualizedlist/index.js +3 -0
  118. package/package.json +1 -1
@@ -41,6 +41,14 @@ import styles from './option.styles';
41
41
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the option.
42
42
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the option.
43
43
  * @event focus - (React: onFocus) This event is dispatched when the option receives focus.
44
+ *
45
+ * @cssproperty --mdc-listitem-column-gap - gap between columns in the option
46
+ * @cssproperty --mdc-option-icon-width - width of the icon in the option
47
+ *
48
+ * @csspart leading - Allows customization of the leading part.
49
+ * @csspart leading-text - Allows customization of the leading text part.
50
+ * @csspart trailing - Allows customization of the trailing part.
51
+ * @csspart trailing-text - Allows customization of the trailing text part.
44
52
  */
45
53
  class Option extends FormInternalsMixin(ListItem) {
46
54
  constructor() {
@@ -36,6 +36,9 @@ declare const Popover_base: import("../../utils/mixins/index.types").Constructor
36
36
  *
37
37
  * @slot - Default slot for the popover content
38
38
  *
39
+ * @csspart popover-close - The close button of the popover.
40
+ * @csspart popover-content - The content of the popover.
41
+ * @csspart popover-hover-bridge - The hover bridge of the popover.
39
42
  */
40
43
  declare class Popover extends Popover_base {
41
44
  /**
@@ -55,6 +55,9 @@ import { PopoverUtils } from './popover.utils';
55
55
  *
56
56
  * @slot - Default slot for the popover content
57
57
  *
58
+ * @csspart popover-close - The close button of the popover.
59
+ * @csspart popover-content - The content of the popover.
60
+ * @csspart popover-hover-bridge - The hover bridge of the popover.
58
61
  */
59
62
  class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component))) {
60
63
  /** @internal */
@@ -817,10 +820,10 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
817
820
  }
818
821
  render() {
819
822
  return html `
820
- <div class="popover-hover-bridge"></div>
823
+ <div part="popover-hover-bridge"></div>
821
824
  ${this.closeButton
822
825
  ? html ` <mdc-button
823
- class="popover-close"
826
+ part="popover-close"
824
827
  prefix-icon="cancel-bold"
825
828
  variant="tertiary"
826
829
  size="20"
@@ -51,7 +51,7 @@ const styles = css `
51
51
  border-color: var(--mdc-popover-inverted-border-color);
52
52
  }
53
53
 
54
- :host([color='contrast']) .popover-close {
54
+ :host([color='contrast'])::part(popover-close) {
55
55
  color: var(--mdc-popover-inverted-text-color);
56
56
  }
57
57
 
@@ -63,7 +63,7 @@ const styles = css `
63
63
  max-height: var(--mdc-popover-max-height);
64
64
  }
65
65
 
66
- .popover-hover-bridge {
66
+ :host::part(popover-hover-bridge) {
67
67
  position: absolute;
68
68
  transform: translateX(-50%);
69
69
  background: transparent;
@@ -80,7 +80,7 @@ const styles = css `
80
80
  border: var(--mdc-popover-arrow-border);
81
81
  }
82
82
 
83
- .popover-close {
83
+ :host::part(popover-close) {
84
84
  box-sizing: border-box;
85
85
  position: absolute;
86
86
  right: 0.75rem;
@@ -89,7 +89,7 @@ const styles = css `
89
89
  z-index: 9999;
90
90
  }
91
91
 
92
- :host(:dir(rtl)) .popover-close {
92
+ :host(:dir(rtl))::part(popover-close) {
93
93
  right: auto;
94
94
  left: 0.75rem;
95
95
  }
@@ -27,6 +27,23 @@ import type { PresenceType, PresenceSize } from './presence.types';
27
27
  * @cssproperty --mdc-presence-quiet-background-color - The background color of the presence type quiet.
28
28
  * @cssproperty --mdc-presence-scheduled-background-color - The background color of the presence type scheduled.
29
29
  * @cssproperty --mdc-presence-overlay-background-color - The background color of the presence type overlay.
30
+ *
31
+ * @csspart presence-content - The presence content.
32
+ * @csspart mdc-presence-icon - The presence icon.
33
+ * @csspart mdc-presence-icon__active - The presence icon for active.
34
+ * @csspart mdc-presence-icon__away - The presence icon for away.
35
+ * @csspart mdc-presence-icon__away-calling - The presence icon for away-calling.
36
+ * @csspart mdc-presence-icon__busy - The presence icon for busy.
37
+ * @csspart mdc-presence-icon__dnd - The presence icon for dnd.
38
+ * @csspart mdc-presence-icon__meeting - The presence icon for meeting.
39
+ * @csspart mdc-presence-icon__on-call - The presence icon for on-call.
40
+ * @csspart mdc-presence-icon__on-device - The presence icon for on-device.
41
+ * @csspart mdc-presence-icon__on-mobile - The presence icon for on-mobile.
42
+ * @csspart mdc-presence-icon__pause - The presence icon for pause.
43
+ * @csspart mdc-presence-icon__pto - The presence icon for pto.
44
+ * @csspart mdc-presence-icon__presenting - The presence icon for presenting.
45
+ * @csspart mdc-presence-icon__quiet - The presence icon for quiet.
46
+ * @csspart mdc-presence-icon__scheduled - The presence icon for scheduled.
30
47
  */
31
48
  declare class Presence extends Component {
32
49
  /**
@@ -39,6 +39,23 @@ import { getIconValue, getPresenceIconSize } from './presence.utils';
39
39
  * @cssproperty --mdc-presence-quiet-background-color - The background color of the presence type quiet.
40
40
  * @cssproperty --mdc-presence-scheduled-background-color - The background color of the presence type scheduled.
41
41
  * @cssproperty --mdc-presence-overlay-background-color - The background color of the presence type overlay.
42
+ *
43
+ * @csspart presence-content - The presence content.
44
+ * @csspart mdc-presence-icon - The presence icon.
45
+ * @csspart mdc-presence-icon__active - The presence icon for active.
46
+ * @csspart mdc-presence-icon__away - The presence icon for away.
47
+ * @csspart mdc-presence-icon__away-calling - The presence icon for away-calling.
48
+ * @csspart mdc-presence-icon__busy - The presence icon for busy.
49
+ * @csspart mdc-presence-icon__dnd - The presence icon for dnd.
50
+ * @csspart mdc-presence-icon__meeting - The presence icon for meeting.
51
+ * @csspart mdc-presence-icon__on-call - The presence icon for on-call.
52
+ * @csspart mdc-presence-icon__on-device - The presence icon for on-device.
53
+ * @csspart mdc-presence-icon__on-mobile - The presence icon for on-mobile.
54
+ * @csspart mdc-presence-icon__pause - The presence icon for pause.
55
+ * @csspart mdc-presence-icon__pto - The presence icon for pto.
56
+ * @csspart mdc-presence-icon__presenting - The presence icon for presenting.
57
+ * @csspart mdc-presence-icon__quiet - The presence icon for quiet.
58
+ * @csspart mdc-presence-icon__scheduled - The presence icon for scheduled.
42
59
  */
43
60
  class Presence extends Component {
44
61
  constructor() {
@@ -121,7 +138,7 @@ class Presence extends Component {
121
138
  return html `
122
139
  <div part="presence-content">
123
140
  <mdc-icon
124
- class="mdc-presence-icon mdc-presence-icon__${this.currentIconType}"
141
+ part="mdc-presence-icon mdc-presence-icon__${this.currentIconType}"
125
142
  name="${this.icon}"
126
143
  size="${getPresenceIconSize(this.size)}"
127
144
  @load="${this.handleOnLoad}"
@@ -51,49 +51,49 @@ const styles = [
51
51
  height: 2.75rem;
52
52
  }
53
53
 
54
- .mdc-presence-icon {
54
+ :host::part(mdc-presence-icon) {
55
55
  border-radius: 50%;
56
56
  }
57
- .mdc-presence-icon__active {
57
+ :host::part(mdc-presence-icon__active) {
58
58
  color: var(--mdc-presence-active-background-color);
59
59
  }
60
- .mdc-presence-icon__away {
60
+ :host::part(mdc-presence-icon__away) {
61
61
  color: var(--mdc-presence-away-background-color);
62
62
  }
63
- .mdc-presence-icon__away-calling {
63
+ :host::part(mdc-presence-icon__away-calling) {
64
64
  color: var(--mdc-presence-away-calling-background-color);
65
65
  }
66
- .mdc-presence-icon__busy {
66
+ :host::part(mdc-presence-icon__busy) {
67
67
  color: var(--mdc-presence-busy-background-color);
68
68
  }
69
- .mdc-presence-icon__dnd {
69
+ :host::part(mdc-presence-icon__dnd) {
70
70
  color: var(--mdc-presence-dnd-background-color);
71
71
  }
72
- .mdc-presence-icon__meeting {
72
+ :host::part(mdc-presence-icon__meeting) {
73
73
  color: var(--mdc-presence-meeting-background-color);
74
74
  }
75
- .mdc-presence-icon__on-call {
75
+ :host::part(mdc-presence-icon__on-call) {
76
76
  color: var(--mdc-presence-on-call-background-color);
77
77
  }
78
- .mdc-presence-icon__on-device {
78
+ :host::part(mdc-presence-icon__on-device) {
79
79
  color: var(--mdc-presence-on-device-background-color);
80
80
  }
81
- .mdc-presence-icon__on-mobile {
81
+ :host::part(mdc-presence-icon__on-mobile) {
82
82
  color: var(--mdc-presence-on-mobile-background-color);
83
83
  }
84
- .mdc-presence-icon__pause {
84
+ :host::part(mdc-presence-icon__pause) {
85
85
  color: var(--mdc-presence-pause-background-color);
86
86
  }
87
- .mdc-presence-icon__pto {
87
+ :host::part(mdc-presence-icon__pto) {
88
88
  color: var(--mdc-presence-pto-background-color);
89
89
  }
90
- .mdc-presence-icon__presenting {
90
+ :host::part(mdc-presence-icon__presenting) {
91
91
  color: var(--mdc-presence-presenting-background-color);
92
92
  }
93
- .mdc-presence-icon__quiet {
93
+ :host::part(mdc-presence-icon__quiet) {
94
94
  color: var(--mdc-presence-quiet-background-color);
95
95
  }
96
- .mdc-presence-icon__scheduled {
96
+ :host::part(mdc-presence-icon__scheduled) {
97
97
  color: var(--mdc-presence-scheduled-background-color);
98
98
  }
99
99
  `,
@@ -28,6 +28,14 @@ declare const Progressbar_base: import("../../utils/mixins/index.types").Constru
28
28
  * @cssproperty --mdc-progressbar-label-font-size - Font size of the label text.
29
29
  * @cssproperty --mdc-progressbar-label-font-weight - Font weight of the label text.
30
30
  * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.
31
+ *
32
+ * @csspart gap - The gap between the label and the progressbar.
33
+ * @csspart inline-label-container - The container of the label in inline variant.
34
+ * @csspart label-container - The container of the label in inline variant.
35
+ * @csspart percentage - The container of the label in inline variant.
36
+ * @csspart progress-bar - The container of the label in inline variant.
37
+ * @csspart progress-container - The container of the label in inline variant.
38
+ * @csspart remaining - The container of the remaining progressbar portion.
31
39
  */
32
40
  declare class Progressbar extends Progressbar_base {
33
41
  /**
@@ -14,7 +14,7 @@ import FormfieldWrapper from '../formfieldwrapper';
14
14
  import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
15
15
  import { VALIDATION } from '../formfieldwrapper/formfieldwrapper.constants';
16
16
  import { ROLE } from '../../utils/roles';
17
- import { DEFAULTS, VARIANT } from './progressbar.constants';
17
+ import { DEFAULTS, VARIANT, TAG_NAME as PROGRESSBAR_TAGNAME } from './progressbar.constants';
18
18
  import styles from './progressbar.styles';
19
19
  /**
20
20
  * mdc-progressbar component visually represents a progress indicator, typically used to show
@@ -42,6 +42,14 @@ import styles from './progressbar.styles';
42
42
  * @cssproperty --mdc-progressbar-label-font-size - Font size of the label text.
43
43
  * @cssproperty --mdc-progressbar-label-font-weight - Font weight of the label text.
44
44
  * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.
45
+ *
46
+ * @csspart gap - The gap between the label and the progressbar.
47
+ * @csspart inline-label-container - The container of the label in inline variant.
48
+ * @csspart label-container - The container of the label in inline variant.
49
+ * @csspart percentage - The container of the label in inline variant.
50
+ * @csspart progress-bar - The container of the label in inline variant.
51
+ * @csspart progress-container - The container of the label in inline variant.
52
+ * @csspart remaining - The container of the remaining progressbar portion.
45
53
  */
46
54
  class Progressbar extends DataAriaLabelMixin(FormfieldWrapper) {
47
55
  constructor() {
@@ -94,7 +102,7 @@ class Progressbar extends DataAriaLabelMixin(FormfieldWrapper) {
94
102
  }
95
103
  connectedCallback() {
96
104
  super.connectedCallback();
97
- this.id = `mdc-progressbar-${uuidv4()}`;
105
+ this.id = `${PROGRESSBAR_TAGNAME}-${uuidv4()}`;
98
106
  this.disabled = undefined;
99
107
  this.toggletipText = undefined;
100
108
  this.toggletipPlacement = undefined;
@@ -156,7 +164,7 @@ __decorate([
156
164
  __metadata("design:type", String)
157
165
  ], Progressbar.prototype, "value", void 0);
158
166
  __decorate([
159
- property({ type: Boolean, attribute: 'error' }),
167
+ property({ type: Boolean }),
160
168
  __metadata("design:type", Object)
161
169
  ], Progressbar.prototype, "error", void 0);
162
170
  export default Progressbar;
@@ -26,6 +26,12 @@ import Progressbar from '../progressbar/progressbar.component';
26
26
  * @cssproperty --mdc-progress-success-color - The color of the spinner when in success state.
27
27
  * @cssproperty --mdc-progress-error-color - The color of the spinner when in error state.
28
28
  *
29
+ * @csspart error-icon - The error icon of the progressspinner.
30
+ * @csspart spinner-base - The base of the progressspinner.
31
+ * @csspart spinner-container - The container of the progressspinner.
32
+ * @csspart spinner-progress - The progress of the progressspinner.
33
+ * @csspart spinner-track - The track of the progressspinner.
34
+ * @csspart success-icon - The success icon of the progressspinner.
29
35
  */
30
36
  declare class Progressspinner extends Progressbar {
31
37
  connectedCallback(): void;
@@ -31,6 +31,12 @@ import styles from './progressspinner.styles';
31
31
  * @cssproperty --mdc-progress-success-color - The color of the spinner when in success state.
32
32
  * @cssproperty --mdc-progress-error-color - The color of the spinner when in error state.
33
33
  *
34
+ * @csspart error-icon - The error icon of the progressspinner.
35
+ * @csspart spinner-base - The base of the progressspinner.
36
+ * @csspart spinner-container - The container of the progressspinner.
37
+ * @csspart spinner-progress - The progress of the progressspinner.
38
+ * @csspart spinner-track - The track of the progressspinner.
39
+ * @csspart success-icon - The success icon of the progressspinner.
34
40
  */
35
41
  class Progressspinner extends Progressbar {
36
42
  connectedCallback() {
@@ -22,6 +22,7 @@ declare const StaticCheckbox_base: import("../../utils/mixins/index.types").Cons
22
22
  * @cssproperty --mdc-staticcheckbox-icon-border-color - Default background color for an unselected checkbox.
23
23
  * @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.
24
24
  *
25
+ * @csspart icon-container - The container for the checkbox icon.
25
26
  */
26
27
  declare class StaticCheckbox extends StaticCheckbox_base {
27
28
  /**
@@ -34,6 +34,7 @@ import { ICON_NAME } from './staticcheckbox.constants';
34
34
  * @cssproperty --mdc-staticcheckbox-icon-border-color - Default background color for an unselected checkbox.
35
35
  * @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.
36
36
  *
37
+ * @csspart icon-container - The container for the checkbox icon.
37
38
  */
38
39
  class StaticCheckbox extends DisabledMixin(Component) {
39
40
  constructor() {
@@ -18,6 +18,7 @@ declare const StaticChip_base: import("../../utils/mixins/index.types").Construc
18
18
  * @cssproperty --mdc-chip-border-color - The border color of the static chip.
19
19
  * @cssproperty --mdc-chip-background-color - The background color of the static chip.
20
20
  *
21
+ * @csspart label - The label of the static chip.
21
22
  */
22
23
  declare class StaticChip extends StaticChip_base {
23
24
  /**
@@ -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"
@@ -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() {