@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
@@ -43,11 +43,11 @@ import AccordionButton from '../accordionbutton/accordionbutton.component';
43
43
  * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.
44
44
  * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.
45
45
  *
46
+ * @csspart body-section - The body section of the accordion.
46
47
  * @csspart header-section - The header section of the accordion.
47
48
  * @csspart leading-header - The leading header of the accordion.
48
49
  * @csspart trailing-header - The trailing header of the accordion.
49
50
  * @csspart trailing-header__button - The trailing header button of the accordion.
50
- * @csspart body-section - The body section of the accordion.
51
51
  */
52
52
  declare class Accordion extends AccordionButton {
53
53
  /** @internal */
@@ -57,11 +57,11 @@ import styles from './accordion.styles';
57
57
  * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.
58
58
  * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.
59
59
  *
60
+ * @csspart body-section - The body section of the accordion.
60
61
  * @csspart header-section - The header section of the accordion.
61
62
  * @csspart leading-header - The leading header of the accordion.
62
63
  * @csspart trailing-header - The trailing header of the accordion.
63
64
  * @csspart trailing-header__button - The trailing header button of the accordion.
64
- * @csspart body-section - The body section of the accordion.
65
65
  */
66
66
  class Accordion extends AccordionButton {
67
67
  /**
@@ -44,12 +44,12 @@ declare const AccordionButton_base: import("../../utils/mixins/index.types").Con
44
44
  * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.
45
45
  * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.
46
46
  *
47
- * @csspart header-section - The header section of the accordion button.
47
+ * @csspart body-section - The body section of the accordion button.
48
48
  * @csspart header-button-section - The header button section of the accordion button.
49
+ * @csspart header-section - The header section of the accordion button.
49
50
  * @csspart leading-header - The leading header of the accordion button.
50
51
  * @csspart trailing-header - The trailing header of the accordion button.
51
52
  * @csspart trailing-header__icon - The trailing header icon of the accordion button.
52
- * @csspart body-section - The body section of the accordion button.
53
53
  */
54
54
  declare class AccordionButton extends AccordionButton_base {
55
55
  /**
@@ -56,12 +56,12 @@ import styles from './accordionbutton.styles';
56
56
  * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.
57
57
  * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.
58
58
  *
59
- * @csspart header-section - The header section of the accordion button.
59
+ * @csspart body-section - The body section of the accordion button.
60
60
  * @csspart header-button-section - The header button section of the accordion button.
61
+ * @csspart header-section - The header section of the accordion button.
61
62
  * @csspart leading-header - The leading header of the accordion button.
62
63
  * @csspart trailing-header - The trailing header of the accordion button.
63
64
  * @csspart trailing-header__icon - The trailing header icon of the accordion button.
64
- * @csspart body-section - The body section of the accordion button.
65
65
  */
66
66
  class AccordionButton extends DisabledMixin(Component) {
67
67
  constructor() {
@@ -1,5 +1,4 @@
1
- import type { PropertyValues, TemplateResult } from 'lit';
2
- import { CSSResult } from 'lit';
1
+ import type { CSSResult, PropertyValues, TemplateResult } from 'lit';
3
2
  import { Component } from '../../models';
4
3
  import type { BadgeType, IconVariant } from './badge.types';
5
4
  declare const Badge_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Component;
@@ -36,6 +35,16 @@ declare const Badge_base: import("../../utils/mixins/index.types").Constructor<i
36
35
  * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.
37
36
  * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.
38
37
  * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.
38
+ *
39
+ * @csspart badge-dot - The dot notification badge.
40
+ * @csspart badge-icon - The icon badge.
41
+ * @csspart badge-icon__error - The error icon badge.
42
+ * @csspart badge-icon__primary - The primary icon badge.
43
+ * @csspart badge-icon__secondary - The secondary icon badge.
44
+ * @csspart badge-icon__success - The success icon badge.
45
+ * @csspart badge-icon__warning - The warning icon badge.
46
+ * @csspart badge-overlay - The overlay badge.
47
+ * @csspart badge-text - The text badge.
39
48
  */
40
49
  declare class Badge extends Badge_base {
41
50
  /**
@@ -84,13 +93,13 @@ declare class Badge extends Badge_base {
84
93
  /**
85
94
  * Method to generate the badge icon.
86
95
  * @param iconName - the name of the icon from the icon set
87
- * @param backgroundClassPostfix - postfix for the class to style the badge icon.
96
+ * @param backgroundPartPostfix - postfix for the part to style the badge icon.
88
97
  * @returns the template result of the icon.
89
98
  */
90
99
  private getBadgeIcon;
91
100
  /**
92
101
  * Method to generate the badge dot template.
93
- * @returns the template result of the dot with mdc-badge-dot class.
102
+ * @returns the template result of the dot with badge-dot part.
94
103
  */
95
104
  private getBadgeDot;
96
105
  /**
@@ -8,7 +8,6 @@ var __metadata = (this && this.__metadata) || function (k, v) {
8
8
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9
9
  };
10
10
  import { html } from 'lit';
11
- import { classMap } from 'lit-html/directives/class-map.js';
12
11
  import { property } from 'lit/decorators.js';
13
12
  import { ifDefined } from 'lit/directives/if-defined.js';
14
13
  import { Component } from '../../models';
@@ -50,6 +49,16 @@ import styles from './badge.styles';
50
49
  * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.
51
50
  * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.
52
51
  * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.
52
+ *
53
+ * @csspart badge-dot - The dot notification badge.
54
+ * @csspart badge-icon - The icon badge.
55
+ * @csspart badge-icon__error - The error icon badge.
56
+ * @csspart badge-icon__primary - The primary icon badge.
57
+ * @csspart badge-icon__secondary - The secondary icon badge.
58
+ * @csspart badge-icon__success - The success icon badge.
59
+ * @csspart badge-icon__warning - The warning icon badge.
60
+ * @csspart badge-overlay - The overlay badge.
61
+ * @csspart badge-text - The text badge.
53
62
  */
54
63
  class Badge extends IconNameMixin(Component) {
55
64
  constructor() {
@@ -104,16 +113,13 @@ class Badge extends IconNameMixin(Component) {
104
113
  /**
105
114
  * Method to generate the badge icon.
106
115
  * @param iconName - the name of the icon from the icon set
107
- * @param backgroundClassPostfix - postfix for the class to style the badge icon.
116
+ * @param backgroundPartPostfix - postfix for the part to style the badge icon.
108
117
  * @returns the template result of the icon.
109
118
  */
110
- getBadgeIcon(iconName, backgroundClassPostfix) {
119
+ getBadgeIcon(iconName, backgroundPartPostfix) {
111
120
  return html `
112
121
  <mdc-icon
113
- class="mdc-badge-icon ${classMap({
114
- 'mdc-badge-overlay': this.overlay,
115
- [`mdc-badge-icon__${backgroundClassPostfix}`]: true,
116
- })}"
122
+ part="badge-icon ${this.overlay ? 'badge-overlay' : ''} badge-icon__${backgroundPartPostfix}"
117
123
  name="${ifDefined(iconName)}"
118
124
  size="${DEFAULTS.ICON_SIZE}"
119
125
  ></mdc-icon>
@@ -121,10 +127,10 @@ class Badge extends IconNameMixin(Component) {
121
127
  }
122
128
  /**
123
129
  * Method to generate the badge dot template.
124
- * @returns the template result of the dot with mdc-badge-dot class.
130
+ * @returns the template result of the dot with badge-dot part.
125
131
  */
126
132
  getBadgeDot() {
127
- return html `<div class="mdc-badge-dot ${classMap({ 'mdc-badge-overlay': this.overlay })}"></div>`;
133
+ return html `<div part="badge-dot ${this.overlay ? 'badge-overlay' : ''}"></div>`;
128
134
  }
129
135
  /**
130
136
  * Method to generate the badge text and counter template.
@@ -135,7 +141,7 @@ class Badge extends IconNameMixin(Component) {
135
141
  <mdc-text
136
142
  type="${FONT_TYPE.BODY_SMALL_MEDIUM}"
137
143
  tagname="${VALID_TEXT_TAGS.DIV}"
138
- class="mdc-badge-text ${classMap({ 'mdc-badge-overlay': this.overlay })}"
144
+ part="badge-text ${this.overlay ? 'badge-overlay' : ''}"
139
145
  >
140
146
  ${this.getCounterText(this.maxCounter, this.counter)}
141
147
  </mdc-text>
@@ -23,10 +23,10 @@ const styles = [
23
23
 
24
24
  color: var(--mdc-badge-primary-foreground-color);
25
25
  }
26
- .mdc-badge-overlay {
26
+ :host::part(badge-overlay) {
27
27
  outline: 0.0625rem solid var(--mdc-badge-overlay-background-color);
28
28
  }
29
- .mdc-badge-text {
29
+ :host::part(badge-text) {
30
30
  padding: 0 0.25rem;
31
31
  border-radius: 6.25rem;
32
32
  min-width: 1rem;
@@ -34,46 +34,46 @@ const styles = [
34
34
  justify-content: center;
35
35
  background-color: var(--mdc-badge-primary-background-color);
36
36
  }
37
- .mdc-badge-dot {
37
+ :host::part(badge-dot) {
38
38
  width: 0.75rem;
39
39
  height: 0.75rem;
40
40
  border-radius: 50%;
41
41
  background-color: var(--mdc-badge-primary-background-color);
42
42
  }
43
- .mdc-badge-icon {
43
+ :host::part(badge-icon) {
44
44
  padding: 2px;
45
45
  border-radius: 50%;
46
46
  }
47
- .mdc-badge-icon__primary {
47
+ :host::part(badge-icon__primary) {
48
48
  background-color: var(--mdc-badge-primary-background-color);
49
49
  color: var(--mdc-badge-primary-foreground-color);
50
50
  }
51
- .mdc-badge-icon__success {
51
+ :host::part(badge-icon__success) {
52
52
  background-color: var(--mdc-badge-success-background-color);
53
53
  color: var(--mdc-badge-success-foreground-color);
54
54
  }
55
- .mdc-badge-icon__warning {
55
+ :host::part(badge-icon__warning) {
56
56
  background-color: var(--mdc-badge-warning-background-color);
57
57
  color: var(--mdc-badge-warning-foreground-color);
58
58
  }
59
- .mdc-badge-icon__error {
59
+ :host::part(badge-icon__error) {
60
60
  background-color: var(--mdc-badge-error-background-color);
61
61
  color: var(--mdc-badge-error-foreground-color);
62
62
  }
63
- .mdc-badge-icon__secondary {
63
+ :host::part(badge-icon__secondary) {
64
64
  background-color: var(--mdc-badge-secondary-background-color);
65
65
  color: var(--mdc-badge-secondary-foreground-color);
66
66
  }
67
67
 
68
68
  /* High Contrast Mode */
69
69
  @media (forced-colors: active) {
70
- .mdc-badge-dot,
71
- .mdc-badge-icon,
72
- .mdc-badge-text {
70
+ :host::part(badge-dot),
71
+ :host::part(badge-icon),
72
+ :host::part(badge-text) {
73
73
  outline: 0.125rem solid;
74
74
  }
75
75
 
76
- .mdc-badge-dot {
76
+ :host::part(badge-dot) {
77
77
  background-color: ButtonText;
78
78
  outline: none;
79
79
  }
@@ -13,6 +13,8 @@ import type { ButtonGroupOrientation, ButtonGroupSize, ButtonGroupVariant } from
13
13
  * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup
14
14
  * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup
15
15
  * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup
16
+ *
17
+ * @csspart container - The container of the buttongroup.
16
18
  */
17
19
  declare class ButtonGroup extends Component {
18
20
  /**
@@ -24,6 +24,8 @@ import styles from './buttongroup.styles';
24
24
  * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup
25
25
  * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup
26
26
  * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup
27
+ *
28
+ * @csspart container - The container of the buttongroup.
27
29
  */
28
30
  class ButtonGroup extends Component {
29
31
  constructor() {
@@ -73,7 +73,7 @@ class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
73
73
  this.renderLabelAndHelperText = () => {
74
74
  if (!this.label)
75
75
  return nothing;
76
- return html `<div class="text-container">${this.renderLabel()} ${this.renderHelperText()}</div>`;
76
+ return html `<div part="text-container">${this.renderLabel()} ${this.renderHelperText()}</div>`;
77
77
  };
78
78
  }
79
79
  connectedCallback() {
@@ -187,7 +187,7 @@ class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
187
187
  <input
188
188
  id="${this.inputId}"
189
189
  type="checkbox"
190
- class="input"
190
+ part="checkbox-input"
191
191
  name="${ifDefined(this.name)}"
192
192
  value="${ifDefined(this.value)}"
193
193
  ?required="${this.required}"
@@ -12,13 +12,18 @@ const styles = [
12
12
  flex-direction: row;
13
13
  align-items: flex-start;
14
14
  }
15
- .mdc-label,
16
- .input {
15
+
16
+ :host::part(label) {
17
+ font-size: var(--mds-font-apps-body-midsize-regular-font-size);
18
+ font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
19
+ line-height: var(--mds-font-apps-body-midsize-regular-line-height);
20
+ }
21
+
22
+ :host::part(label) :host::part(checkbox-input) {
17
23
  cursor: pointer;
18
24
  }
19
25
 
20
- :host([disabled]) .mdc-label,
21
- :host([disabled]) .input {
26
+ :host([disabled])::part(label) :host([disabled])::part(checkbox-input) {
22
27
  cursor: default;
23
28
  }
24
29
 
@@ -51,7 +56,7 @@ const styles = [
51
56
  position: relative;
52
57
  }
53
58
 
54
- .input {
59
+ :host::part(checkbox-input) {
55
60
  margin: 0;
56
61
  padding: 0;
57
62
  position: absolute;
@@ -62,19 +67,19 @@ const styles = [
62
67
  z-index: 1;
63
68
  }
64
69
 
65
- .input {
70
+ :host::part(checkbox-input) {
66
71
  width: 1rem;
67
72
  height: 1rem;
68
73
  border-radius: 0.125rem;
69
74
  }
70
75
 
71
- .text-container {
76
+ :host::part(text-container) {
72
77
  display: flex;
73
78
  flex-direction: column;
74
79
  gap: 0.25rem;
75
80
  }
76
81
 
77
- .mdc-label {
82
+ :host::part(label) {
78
83
  word-break: break-word;
79
84
  white-space: normal;
80
85
  }
@@ -692,7 +692,7 @@ class Combobox extends CaptureDestroyEventForChildElement(AutoFocusOnMountMixin(
692
692
  `;
693
693
  }
694
694
  }
695
- Combobox.styles = [...FormfieldWrapper.styles, ...Input.styles, ...styles];
695
+ Combobox.styles = [...Input.styles, ...FormfieldWrapper.styles, ...styles];
696
696
  __decorate([
697
697
  property({ type: String }),
698
698
  __metadata("design:type", String)
@@ -48,6 +48,13 @@ declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<
48
48
  * @cssproperty --mdc-dialog-width - width of the dialog
49
49
  * @cssproperty --mdc-dialog-height - height of the dialog
50
50
  *
51
+ * @csspart body - The body section of the dialog.
52
+ * @csspart description-text - The description text of the dialog.
53
+ * @csspart dialog-close-btn - The close button of the dialog.
54
+ * @csspart header - The header of the dialog.
55
+ * @csspart header-section - The header section of the dialog.
56
+ * @csspart header-text - The header text of the dialog.
57
+ *
51
58
  * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.
52
59
  * @slot dialog-body - Slot for the dialog body content
53
60
  * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
@@ -66,6 +66,13 @@ import styles from './dialog.styles';
66
66
  * @cssproperty --mdc-dialog-width - width of the dialog
67
67
  * @cssproperty --mdc-dialog-height - height of the dialog
68
68
  *
69
+ * @csspart body - The body section of the dialog.
70
+ * @csspart description-text - The description text of the dialog.
71
+ * @csspart dialog-close-btn - The close button of the dialog.
72
+ * @csspart header - The header of the dialog.
73
+ * @csspart header-section - The header section of the dialog.
74
+ * @csspart header-text - The header text of the dialog.
75
+ *
69
76
  * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.
70
77
  * @slot dialog-body - Slot for the dialog body content
71
78
  * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
@@ -11,9 +11,5 @@ const styles = css `
11
11
  flex-direction: column;
12
12
  gap: 0.25rem;
13
13
  }
14
-
15
- :host::part(label-text) {
16
- font-weight: bold;
17
- }
18
14
  `;
19
15
  export default [styles];
@@ -82,12 +82,12 @@ declare class FormfieldWrapper extends FormfieldWrapper_base {
82
82
  */
83
83
  protected renderHelpText(): import("lit-html").TemplateResult<1> | typeof nothing;
84
84
  /**
85
- * renders the mdc-label-text container that contains the label and labelInfoToggleTip.
85
+ * renders the label container that contains the label and labelInfoToggleTip.
86
86
  * @returns void
87
87
  */
88
88
  protected renderLabel(): import("lit-html").TemplateResult<1> | typeof nothing;
89
89
  /**
90
- * renders the mdc-help-text container that contains the helpertext icon and helpertext.
90
+ * renders the help-text container that contains the helpertext icon and helpertext.
91
91
  * @returns void
92
92
  */
93
93
  protected renderHelperText(): import("lit-html").TemplateResult<1> | typeof nothing;
@@ -72,9 +72,7 @@ class FormfieldWrapper extends DisabledMixin(Component) {
72
72
  return nothing;
73
73
  }
74
74
  return this.shouldRenderLabel
75
- ? html `<label for="${this.inputId}" id="${DEFAULTS.HEADING_ID}" class="mdc-label" part="label"
76
- >${this.label}</label
77
- >`
75
+ ? html `<label for="${this.inputId}" id="${DEFAULTS.HEADING_ID}" part="label">${this.label}</label>`
78
76
  : html ` <mdc-text
79
77
  id="${DEFAULTS.HEADING_ID}"
80
78
  tagname="${MDC_TEXT_OPTIONS.TAGNAME}"
@@ -119,14 +117,14 @@ class FormfieldWrapper extends DisabledMixin(Component) {
119
117
  `;
120
118
  }
121
119
  /**
122
- * renders the mdc-label-text container that contains the label and labelInfoToggleTip.
120
+ * renders the label container that contains the label and labelInfoToggleTip.
123
121
  * @returns void
124
122
  */
125
123
  renderLabel() {
126
124
  if (!this.label)
127
125
  return nothing;
128
126
  const triggerId = `toggletip-trigger-${uuidv4()}`;
129
- return html `<div class="mdc-label-text" part="label-text">
127
+ return html `<div part="label-text">
130
128
  <slot name="label">${this.renderLabelElement()}</slot>
131
129
  ${this.required ? html `<span part="required-indicator">*</span>` : nothing}
132
130
  <slot name="toggletip">
@@ -154,14 +152,14 @@ class FormfieldWrapper extends DisabledMixin(Component) {
154
152
  </div>`;
155
153
  }
156
154
  /**
157
- * renders the mdc-help-text container that contains the helpertext icon and helpertext.
155
+ * renders the help-text container that contains the helpertext icon and helpertext.
158
156
  * @returns void
159
157
  */
160
158
  renderHelperText() {
161
159
  if (!this.helpText) {
162
160
  return nothing;
163
161
  }
164
- return html `<div class="mdc-help-text" part="help-text">
162
+ return html `<div part="help-text-container">
165
163
  <slot name="help-icon">${this.renderHelpTextIcon()}</slot>
166
164
  <slot name="help-text">${this.renderHelpText()}</slot>
167
165
  </div>`;
@@ -9,13 +9,13 @@ const styles = [
9
9
  gap: 0.5rem;
10
10
  }
11
11
  :host([disabled]),
12
- :host([disabled]) .mdc-label,
13
- :host([disabled]) .mdc-help-text,
12
+ :host([disabled])::part(label),
13
+ :host([disabled])::part(help-text-container),
14
14
  :host([disabled])::part(required-indicator),
15
- :host([disabled][help-text-type='error']) .mdc-help-text,
16
- :host([disabled][help-text-type='success']) .mdc-help-text,
17
- :host([disabled][help-text-type='warning']) .mdc-help-text,
18
- :host([disabled][help-text-type='priority']) .mdc-help-text {
15
+ :host([disabled][help-text-type='error'])::part(help-text-container),
16
+ :host([disabled][help-text-type='success'])::part(help-text-container),
17
+ :host([disabled][help-text-type='warning'])::part(help-text-container),
18
+ :host([disabled][help-text-type='priority'])::part(help-text-container) {
19
19
  color: var(--mds-color-theme-text-primary-disabled);
20
20
  }
21
21
 
@@ -23,29 +23,35 @@ const styles = [
23
23
  color: var(--mds-color-theme-text-error-normal);
24
24
  }
25
25
 
26
- .mdc-label-text,
27
- .mdc-help-text {
26
+ :host::part(label-text),
27
+ :host::part(help-text-container) {
28
28
  display: flex;
29
29
  align-items: center;
30
30
  gap: 0.5rem;
31
31
  width: 100%;
32
32
  }
33
33
 
34
- .mdc-label,
35
- .mdc-help-text {
34
+ :host::part(label) {
35
+ font-size: var(--mds-font-apps-body-midsize-medium-font-size);
36
+ font-weight: var(--mds-font-apps-body-midsize-medium-font-weight);
37
+ line-height: var(--mds-font-apps-body-midsize-medium-line-height);
38
+ }
39
+
40
+ :host::part(help-text),
41
+ :host::part(help-text-container) {
36
42
  font-size: var(--mds-font-apps-body-midsize-regular-font-size);
37
43
  font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
38
44
  line-height: var(--mds-font-apps-body-midsize-regular-line-height);
39
45
  }
40
46
 
41
- .mdc-label {
47
+ :host::part(label) {
42
48
  color: var(--mds-color-theme-text-primary-normal);
43
49
  overflow: hidden;
44
50
  text-overflow: ellipsis;
45
51
  white-space: nowrap;
46
52
  }
47
53
 
48
- .mdc-help-text {
54
+ :host::part(help-text-container) {
49
55
  color: var(--mds-color-theme-text-secondary-normal);
50
56
  }
51
57
 
@@ -53,16 +59,16 @@ const styles = [
53
59
  align-self: flex-start;
54
60
  }
55
61
 
56
- :host([help-text-type='error']) .mdc-help-text {
62
+ :host([help-text-type='error'])::part(help-text-container) {
57
63
  color: var(--mds-color-theme-text-error-normal);
58
64
  }
59
- :host([help-text-type='warning']) .mdc-help-text {
65
+ :host([help-text-type='warning'])::part(help-text-container) {
60
66
  color: var(--mds-color-theme-text-warning-normal);
61
67
  }
62
- :host([help-text-type='success']) .mdc-help-text {
68
+ :host([help-text-type='success'])::part(help-text-container) {
63
69
  color: var(--mds-color-theme-text-success-normal);
64
70
  }
65
- :host([help-text-type='priority']) .mdc-help-text {
71
+ :host([help-text-type='priority'])::part(help-text-container) {
66
72
  color: var(--mds-color-theme-text-accent-normal);
67
73
  }
68
74
  `,
@@ -12,6 +12,10 @@ import type { IconNames } from '../icon/icon.types';
12
12
  * @cssproperty --mdc-listheader-height - height of the header
13
13
  * @cssproperty --mdc-listheader-padding - padding around the header content
14
14
  * @cssproperty --mdc-listheader-gap - gap between content
15
+ *
16
+ * @csspart header-text - The header text of list header
17
+ * @csspart postfix-icon - The postfix icon of list header
18
+ * @csspart prefix-icon - The prefix icon of list header
15
19
  */
16
20
  declare class Listheader extends Component {
17
21
  /**
@@ -22,6 +22,10 @@ import styles from './listheader.styles';
22
22
  * @cssproperty --mdc-listheader-height - height of the header
23
23
  * @cssproperty --mdc-listheader-padding - padding around the header content
24
24
  * @cssproperty --mdc-listheader-gap - gap between content
25
+ *
26
+ * @csspart header-text - The header text of list header
27
+ * @csspart postfix-icon - The postfix icon of list header
28
+ * @csspart prefix-icon - The prefix icon of list header
25
29
  */
26
30
  class Listheader extends Component {
27
31
  constructor() {
@@ -46,6 +46,11 @@ declare const ListItem_base: import("../../utils/mixins/index.types").Constructo
46
46
  * @cssproperty --mdc-listitem-width - Allows customization of the width of the list item.
47
47
  * @cssproperty --mdc-listitem-height - Allows customization of the height of the list item.
48
48
  *
49
+ * @csspart leading - Allows customization of the leading part.
50
+ * @csspart leading-text - Allows customization of the leading text part.
51
+ * @csspart trailing - Allows customization of the trailing part.
52
+ * @csspart trailing-text - Allows customization of the trailing text part.
53
+ *
49
54
  * @event click - (React: onClick) This event is dispatched when the listitem is clicked.
50
55
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.
51
56
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.
@@ -62,6 +62,11 @@ import styles from './listitem.styles';
62
62
  * @cssproperty --mdc-listitem-width - Allows customization of the width of the list item.
63
63
  * @cssproperty --mdc-listitem-height - Allows customization of the height of the list item.
64
64
  *
65
+ * @csspart leading - Allows customization of the leading part.
66
+ * @csspart leading-text - Allows customization of the leading text part.
67
+ * @csspart trailing - Allows customization of the trailing part.
68
+ * @csspart trailing-text - Allows customization of the trailing text part.
69
+ *
65
70
  * @event click - (React: onClick) This event is dispatched when the listitem is clicked.
66
71
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.
67
72
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.
@@ -37,6 +37,13 @@ import type { ArrowPositions, ArrowDirections } from './menuitem.types';
37
37
  * @event disabled - (React: onDisabled) This event is dispatched after the menuitem is disabled
38
38
  * @event created - (React: onCreated) This event is dispatched after the menuitem is created (added to the DOM)
39
39
  * @event destroyed - (React: onDestroyed) This event is dispatched after the menuitem is destroyed (removed from the DOM)
40
+ *
41
+ * @csspart leading - Allows customization of the leading part.
42
+ * @csspart leading-arrow - Allows customization of leading arrow icon.
43
+ * @csspart leading-text - Allows customization of the leading text part.
44
+ * @csspart trailing - Allows customization of the trailing part.
45
+ * @csspart trailing-arrow - Allows customization of trailing arrow icon.
46
+ * @csspart trailing-text - Allows customization of the trailing text part.
40
47
  */
41
48
  declare class MenuItem extends ListItem {
42
49
  /**
@@ -51,6 +51,13 @@ import styles from './menuitem.styles';
51
51
  * @event disabled - (React: onDisabled) This event is dispatched after the menuitem is disabled
52
52
  * @event created - (React: onCreated) This event is dispatched after the menuitem is created (added to the DOM)
53
53
  * @event destroyed - (React: onDestroyed) This event is dispatched after the menuitem is destroyed (removed from the DOM)
54
+ *
55
+ * @csspart leading - Allows customization of the leading part.
56
+ * @csspart leading-arrow - Allows customization of leading arrow icon.
57
+ * @csspart leading-text - Allows customization of the leading text part.
58
+ * @csspart trailing - Allows customization of the trailing part.
59
+ * @csspart trailing-arrow - Allows customization of trailing arrow icon.
60
+ * @csspart trailing-text - Allows customization of the trailing text part.
54
61
  */
55
62
  class MenuItem extends ListItem {
56
63
  constructor() {
@@ -44,6 +44,16 @@ declare const MenuItemCheckbox_base: import("../../utils/mixins/index.types").Co
44
44
  * @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.
45
45
  * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.
46
46
  * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.
47
+ *
48
+ * @cssproperty --mdc-listitem-padding-left-and-right - Controls the padding on the left and right of the menuitemcheckbox.
49
+ *
50
+ * @csspart checkmark-icon - Allows customization of the checkmark icon.
51
+ * @csspart leading - Allows customization of the leading part.
52
+ * @csspart leading-arrow - Allows customization of leading arrow icon.
53
+ * @csspart leading-text - Allows customization of the leading text part.
54
+ * @csspart trailing - Allows customization of the trailing part.
55
+ * @csspart trailing-arrow - Allows customization of trailing arrow icon.
56
+ * @csspart trailing-text - Allows customization of the trailing text part.
47
57
  */
48
58
  declare class MenuItemCheckbox extends MenuItemCheckbox_base {
49
59
  /**
@@ -59,6 +59,16 @@ import styles from './menuitemcheckbox.styles';
59
59
  * @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.
60
60
  * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.
61
61
  * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.
62
+ *
63
+ * @cssproperty --mdc-listitem-padding-left-and-right - Controls the padding on the left and right of the menuitemcheckbox.
64
+ *
65
+ * @csspart checkmark-icon - Allows customization of the checkmark icon.
66
+ * @csspart leading - Allows customization of the leading part.
67
+ * @csspart leading-arrow - Allows customization of leading arrow icon.
68
+ * @csspart leading-text - Allows customization of the leading text part.
69
+ * @csspart trailing - Allows customization of the trailing part.
70
+ * @csspart trailing-arrow - Allows customization of trailing arrow icon.
71
+ * @csspart trailing-text - Allows customization of the trailing text part.
62
72
  */
63
73
  class MenuItemCheckbox extends ControlledMixin(MenuItem) {
64
74
  constructor() {