@momentum-design/components 0.120.1 → 0.120.3

package/dist/components/checkbox/checkbox.component.d.ts

@@ -31,6 +31,17 @@ declare const Checkbox_base: import("../../utils/mixins/index.types").Constructo
  * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
  * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
  * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
+ *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @csspart help-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
+ * @csspart help-text-container - The container for the helper/validation icon and text elements.
+ * @csspart checkbox-input - The native checkbox input element.
+ * @csspart text-container - The container for the label and helper text elements.
  */
 declare class Checkbox extends Checkbox_base implements AssociatedFormControl {
     /**

package/dist/components/checkbox/checkbox.component.js

@@ -46,6 +46,17 @@ import styles from './checkbox.styles';
  * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
  * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
  * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
+ *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @csspart help-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
+ * @csspart help-text-container - The container for the helper/validation icon and text elements.
+ * @csspart checkbox-input - The native checkbox input element.
+ * @csspart text-container - The container for the label and helper text elements.
  */
 class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
     constructor() {

package/dist/components/combobox/combobox.component.d.ts

@@ -61,8 +61,16 @@ declare const Combobox_base: import("../../utils/mixins/index.types").Constructo
  * @cssproperty --mdc-combobox-text-color-disabled - The text color of the combobox when disabled
  * @cssproperty --mdc-combobox-focused-border-color - The border color of the combobox when focused
  *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @csspart help-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
+ * @csspart help-text-container - The container for the helper/validation icon and text elements.
  * @csspart internal-native-input - The internal native input element of the combobox.
- * @csspart mdc-input - The input element of the combobox.
+ * @csspart input-text - The input element of the combobox.
  * @csspart no-result-text - The no result text element of the combobox.
  * @csspart combobox__base - The base container element of the combobox.
  * @csspart combobox__button - The button element of the combobox.

package/dist/components/combobox/combobox.component.js

@@ -87,8 +87,16 @@ import styles from './combobox.styles';
  * @cssproperty --mdc-combobox-text-color-disabled - The text color of the combobox when disabled
  * @cssproperty --mdc-combobox-focused-border-color - The border color of the combobox when focused
  *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @csspart help-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
+ * @csspart help-text-container - The container for the helper/validation icon and text elements.
  * @csspart internal-native-input - The internal native input element of the combobox.
- * @csspart mdc-input - The input element of the combobox.
+ * @csspart input-text - The input element of the combobox.
  * @csspart no-result-text - The no result text element of the combobox.
  * @csspart combobox__base - The base container element of the combobox.
  * @csspart combobox__button - The button element of the combobox.
@@ -602,8 +610,7 @@ class Combobox extends CaptureDestroyEventForChildElement(AutoFocusOnMountMixin(
         ?disabled="${this.disabled}"
         .value="${live(this.filteredValue)}"
         autocomplete="${AUTO_COMPLETE.OFF}"
-        class="input"
-        part="mdc-input"
+        part="input-text"
         placeholder="${ifDefined(this.placeholder)}"
         role="${ROLE.COMBOBOX}"
         ?readonly="${this.readonly}"

package/dist/components/combobox/combobox.styles.js

@@ -74,7 +74,7 @@ const styles = css `
   :host([disabled])::part(combobox__button) {
     border-left: 1px solid var(--mdc-combobox-text-color-disabled);
   }
-  :host::part(mdc-input) {
+  :host::part(input-text) {
     width: calc(100% - 1.5rem);
   }
   :host::part(combobox__button-icon) {

package/dist/components/formfieldgroup/formfieldgroup.component.d.ts

@@ -29,6 +29,17 @@ declare const FormfieldGroup_base: import("../../utils/mixins/index.types").Cons
  * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
  * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
  * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
+ *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @csspart help-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
+ * @csspart help-text-container - The container for the helper/validation icon and text elements.
+ * @csspart container - Formfieldgroup host container
+ * @csspart group-header - This contains the label and help text for the group
  */
 declare class FormfieldGroup extends FormfieldGroup_base {
     /**

package/dist/components/formfieldgroup/formfieldgroup.component.js

@@ -33,6 +33,17 @@ import styles from './formfieldgroup.styles';
  * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
  * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
  * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
+ *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @csspart help-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
+ * @csspart help-text-container - The container for the helper/validation icon and text elements.
+ * @csspart container - Formfieldgroup host container
+ * @csspart group-header - This contains the label and help text for the group
  */
 class FormfieldGroup extends DataAriaLabelMixin(FormfieldWrapper) {
     constructor() {

package/dist/components/formfieldwrapper/formfieldwrapper.component.d.ts

@@ -19,6 +19,15 @@ declare const FormfieldWrapper_base: import("../../utils/mixins/index.types").Co
  * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
  * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
  * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
+ *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @csspart help-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
+ * @csspart help-text-container - The container for the helper/validation icon and text elements.
  */
 declare class FormfieldWrapper extends FormfieldWrapper_base {
     /**

package/dist/components/formfieldwrapper/formfieldwrapper.component.js

@@ -33,6 +33,15 @@ import { getHelperIcon } from './formfieldwrapper.utils';
  * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
  * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
  * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
+ *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @csspart help-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
+ * @csspart help-text-container - The container for the helper/validation icon and text elements.
  */
 class FormfieldWrapper extends DisabledMixin(Component) {
     constructor() {

package/dist/components/input/input.component.d.ts

@@ -55,6 +55,20 @@ declare const Input_base: import("../../utils/mixins/index.types").Constructor<i
  * @cssproperty --mdc-input-success-border-color - Border color for the input container when success
  * @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary
  *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @csspart help-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
+ * @csspart help-text-container - The container for the helper/validation icon and text elements.
+ * @csspart leading-icon - The leading icon element that is displayed before the input field.
+ * @csspart prefix-text - The prefix text element that is displayed before the input field.
+ * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.
+ * @csspart input-section - The container for the input field, leading icon, and prefix text elements.
+ * @csspart input-text - The input field element.
+ * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.
  */
 declare class Input extends Input_base implements AssociatedFormControl {
     /**

package/dist/components/input/input.component.js

@@ -70,6 +70,20 @@ import styles from './input.styles';
  * @cssproperty --mdc-input-success-border-color - Border color for the input container when success
  * @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary
  *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @csspart help-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
+ * @csspart help-text-container - The container for the helper/validation icon and text elements.
+ * @csspart leading-icon - The leading icon element that is displayed before the input field.
+ * @csspart prefix-text - The prefix text element that is displayed before the input field.
+ * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.
+ * @csspart input-section - The container for the input field, leading icon, and prefix text elements.
+ * @csspart input-text - The input field element.
+ * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.
  */
 class Input extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
     constructor() {
@@ -225,7 +239,6 @@ class Input extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
         }
         return html `
       <mdc-icon
-        class="leading-icon"
         part="leading-icon"
         name=${this.leadingIcon}
         size="${DEFAULTS.ICON_SIZE_VALUE}"
@@ -250,7 +263,7 @@ class Input extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
         }
         return html `
       <mdc-text
-        class="prefix-text"
+        part="prefix-text"
         tagname="${DEFAULTS.PREFIX_TEXT_TAG}"
         type="${DEFAULTS.PREFIX_TEXT_TYPE}"
         aria-hidden="true"
@@ -296,8 +309,7 @@ class Input extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
         const placeholderText = hidePlaceholder ? '' : this.placeholder;
         return html `<input
       aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
-      class="input"
-      part="mdc-input"
+      part="input-text"
       id="${this.inputId}"
       name="${this.name}"
       .value="${live(this.value)}"
@@ -324,9 +336,9 @@ class Input extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
     render() {
         return html `
       ${this.renderLabel()}
-      <div class="input-container mdc-focus-ring" part="input-container">
+      <div class="mdc-focus-ring" part="input-container">
         <slot name="input-leading-icon">${this.renderLeadingIcon()}</slot>
-        <div class="input-section" part="input-section">
+        <div part="input-section">
           <slot name="input-prefix-text">${this.renderPrefixText()}</slot>
           <slot name="input">${this.renderInputElement(DEFAULTS.INPUT_TYPE)}</slot>
         </div>

package/dist/components/input/input.styles.js

@@ -21,9 +21,9 @@ const styles = [
       --mdc-input-primary-border-color: var(--mds-color-theme-text-accent-normal);
     }
     :host,
-    .input-container,
-    .input-section,
-    .input {
+    :host::part(input-container),
+    :host::part(input-section),
+    :host::part(input-text) {
       width: 100%;
     }
 
@@ -31,42 +31,42 @@ const styles = [
       font-family: inherit;
     }
 
-    :host .input-container:hover {
+    :host::part(input-container):hover {
       background-color: var(--mdc-input-hover-background-color);
     }
 
-    :host .input-container:active,
-    :host .input-container:focus-within {
+    :host::part(input-container):active,
+    :host::part(input-container):focus-within {
       background-color: var(--mdc-input-focused-background-color);
       border-color: var(--mdc-input-focused-border-color);
     }
 
-    :host([readonly]) .leading-icon {
+    :host([readonly])::part(leading-icon) {
       color: var(--mdc-input-support-text-color);
     }
 
-    :host([disabled]) .input,
-    :host([disabled]) .input::placeholder,
-    :host([disabled]) .prefix-text {
+    :host([disabled])::part(input-text),
+    :host([disabled]) input::placeholder,
+    :host([disabled])::part(prefix-text) {
       color: var(--mdc-input-disabled-text-color);
     }
 
-    :host([disabled]) .input-container,
-    :host([readonly]) .input-container,
-    :host([disabled][help-text-type='default']) .input-container,
-    :host([disabled][help-text-type='success']) .input-container,
-    :host([disabled][help-text-type='warning']) .input-container,
-    :host([disabled][help-text-type='error']) .input-container,
-    :host([disabled][help-text-type='priority']) .input-container {
+    :host([disabled])::part(input-container),
+    :host([readonly])::part(input-container),
+    :host([disabled][help-text-type='default'])::part(input-container),
+    :host([disabled][help-text-type='success'])::part(input-container),
+    :host([disabled][help-text-type='warning'])::part(input-container),
+    :host([disabled][help-text-type='error'])::part(input-container),
+    :host([disabled][help-text-type='priority'])::part(input-container) {
       border-color: var(--mdc-input-disabled-border-color);
       background: var(--mdc-input-disabled-background-color);
     }
 
-    .leading-icon {
+    :host::part(leading-icon) {
       aspect-ratio: 1;
     }
 
-    .input-container {
+    :host::part(input-container) {
       height: 2rem;
       border-radius: 0.5rem;
       border: 0.0625rem solid var(--mdc-input-border-color);
@@ -77,46 +77,46 @@ const styles = [
       min-width: 3.25rem;
     }
 
-    .input-section {
+    :host::part(input-section) {
       display: flex;
       gap: 0.25rem;
     }
 
-    .input {
+    :host::part(input-text) {
       border: none;
       color: var(--mdc-input-text-color);
       background-color: var(--mdc-input-background-color);
       outline: none;
     }
 
-    .input::selection {
+    input::selection {
       background-color: var(--mdc-input-selection-background-color);
       color: var(--mdc-input-selection-text-color);
     }
 
-    .prefix-text {
+    :host::part(prefix-text) {
       color: var(--mdc-input-support-text-color);
       white-space: nowrap; /* restrict prefix text to be in one line */
     }
 
-    .input::placeholder {
+    input::placeholder {
       color: var(--mdc-input-support-text-color);
     }
 
-    :host([help-text-type='error']) .input-container,
-    :host([help-text-type='error']) .input-container:focus-within {
+    :host([help-text-type='error'])::part(input-container),
+    :host([help-text-type='error'])::part(input-container):focus-within {
       border-color: var(--mdc-input-error-border-color);
     }
-    :host([help-text-type='warning']) .input-container,
-    :host([help-text-type='warning']) .input-container:focus-within {
+    :host([help-text-type='warning'])::part(input-container),
+    :host([help-text-type='warning'])::part(input-container):focus-within {
       border-color: var(--mdc-input-warning-border-color);
     }
-    :host([help-text-type='success']) .input-container,
-    :host([help-text-type='success']) .input-container:focus-within {
+    :host([help-text-type='success'])::part(input-container),
+    :host([help-text-type='success'])::part(input-container):focus-within {
       border-color: var(--mdc-input-success-border-color);
     }
-    :host([help-text-type='priority']) .input-container,
-    :host([help-text-type='priority']) input-container:focus-within {
+    :host([help-text-type='priority'])::part(input-container),
+    :host([help-text-type='priority'])::part(input-container):focus-within {
       border-color: var(--mdc-input-primary-border-color);
     }
 

package/dist/components/password/password.component.d.ts

@@ -42,6 +42,18 @@ import type { ValidationType } from '../formfieldwrapper/formfieldwrapper.types'
  * @cssproperty --mdc-input-success-border-color - Border color for the password container when success
  * @cssproperty --mdc-input-primary-border-color - Border color for the password container when primary
  *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @csspart help-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
+ * @csspart help-text-container - The container for the helper/validation icon and text elements.
+ * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.
+ * @csspart input-section - The container for the input field, leading icon, and prefix text elements.
+ * @csspart input-text - The input field element.
+ * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.
  */
 declare class Password extends Input {
     /**

package/dist/components/password/password.component.js

@@ -54,6 +54,18 @@ import { PASSWORD_VISIBILITY_ICONS } from './password.constants';
  * @cssproperty --mdc-input-success-border-color - Border color for the password container when success
  * @cssproperty --mdc-input-primary-border-color - Border color for the password container when primary
  *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @csspart help-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
+ * @csspart help-text-container - The container for the helper/validation icon and text elements.
+ * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.
+ * @csspart input-section - The container for the input field, leading icon, and prefix text elements.
+ * @csspart input-text - The input field element.
+ * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.
  */
 class Password extends Input {
     constructor() {

package/dist/components/popover/popover.component.js

@@ -635,7 +635,7 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
                 }));
             }
             if (this.showArrow) {
-                this.arrowElement = this.renderRoot.querySelector('.popover-arrow');
+                this.arrowElement = this.renderRoot.querySelector('div[part="popover-arrow"]');
                 if (this.arrowElement) {
                     const arrowLen = this.arrowElement.offsetHeight;
                     const arrowOffset = Math.sqrt(2 * arrowLen ** 2) / 2;
@@ -873,7 +873,7 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
             @click="${this.hide}"
           ></mdc-button>`
             : nothing}
-      ${this.showArrow ? html `<div class="popover-arrow"></div>` : nothing}
+      ${this.showArrow ? html `<div class="popover-arrow" part="popover-arrow"></div>` : nothing}
       <div part="popover-content">
         <slot></slot>
       </div>

package/dist/components/popover/popover.portal.component.js

@@ -24,6 +24,7 @@ export class PopoverPortal extends Component {
         super.connectedCallback();
         // We don't want the portal to be focusable or visible for screen readers
         this.ariaHidden = 'true';
+        this.style.display = 'none';
     }
     /**
      * When the portal removed from the DOM, we remove the popover from the container as well.

package/dist/components/popover/popover.styles.js

@@ -70,7 +70,7 @@ const styles = css `
     pointer-events: auto;
   }
 
-  .popover-arrow {
+  :host::part(popover-arrow) {
     position: absolute;
     width: 1rem;
     height: 1rem;

package/dist/components/progressbar/progressbar.component.d.ts

@@ -29,6 +29,12 @@ declare const Progressbar_base: import("../../utils/mixins/index.types").Constru
  * @cssproperty --mdc-progressbar-label-font-weight - Font weight of the label text.
  * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.
  *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart help-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
+ * @csspart help-text-container - The container for the helper/validation icon and text elements.
  * @csspart gap - The gap between the label and the progressbar.
  * @csspart inline-label-container - The container of the label in inline variant.
  * @csspart label-container - The container of the label in inline variant.

package/dist/components/progressbar/progressbar.component.js

@@ -43,6 +43,12 @@ import styles from './progressbar.styles';
  * @cssproperty --mdc-progressbar-label-font-weight - Font weight of the label text.
  * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.
  *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart help-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
+ * @csspart help-text-container - The container for the helper/validation icon and text elements.
  * @csspart gap - The gap between the label and the progressbar.
  * @csspart inline-label-container - The container of the label in inline variant.
  * @csspart label-container - The container of the label in inline variant.

package/dist/components/radio/radio.component.d.ts

@@ -28,6 +28,16 @@ declare const Radio_base: import("../../utils/mixins/index.types").Constructor<i
  * @cssproperty --mdc-radio-control-active-disabled-background - color of the radio button when active and disabled
  * @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive and disabled
  *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @csspart help-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
+ * @csspart help-text-container - The container for the helper/validation icon and text elements.
+ * @csspart radio-input - The native radio input element.
+ * @csspart text-container - The container for the label and helper text elements.
  */
 declare class Radio extends Radio_base implements AssociatedFormControl {
     /**

package/dist/components/radio/radio.component.js

@@ -45,6 +45,16 @@ import styles from './radio.styles';
  * @cssproperty --mdc-radio-control-active-disabled-background - color of the radio button when active and disabled
  * @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive and disabled
  *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @csspart help-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
+ * @csspart help-text-container - The container for the helper/validation icon and text elements.
+ * @csspart radio-input - The native radio input element.
+ * @csspart text-container - The container for the label and helper text elements.
  */
 class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
     constructor() {

package/dist/components/searchfield/searchfield.component.d.ts

@@ -16,6 +16,14 @@ import Input from '../input/input.component';
  * @event clear - (React: onClear) This event is dispatched when the input text is cleared.
  *
  * @slot filters - Slot for input chips
+ *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart leading-icon - The leading icon element that is displayed before the input field.
+ * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.
+ * @csspart input-section - The container for the input field, leading icon, and prefix text elements.
+ * @csspart input-text - The input field element.
+ * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.
  */
 declare class Searchfield extends Input {
     inputChips?: Array<HTMLElement>;

package/dist/components/searchfield/searchfield.component.js

@@ -30,6 +30,14 @@ import { DEFAULTS } from './searchfield.constants';
  * @event clear - (React: onClear) This event is dispatched when the input text is cleared.
  *
  * @slot filters - Slot for input chips
+ *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart leading-icon - The leading icon element that is displayed before the input field.
+ * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.
+ * @csspart input-section - The container for the input field, leading icon, and prefix text elements.
+ * @csspart input-text - The input field element.
+ * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.
  */
 class Searchfield extends Input {
     constructor() {
@@ -107,7 +115,6 @@ class Searchfield extends Input {
       ${this.renderLabelElement()}
       <div
         class="${classMap({
-            'input-container': true,
             'mdc-focus-ring': this.isInputFocused,
         })}"
         part="input-container"

package/dist/components/select/select.component.d.ts

@@ -50,6 +50,21 @@ declare const Select_base: import("../../utils/mixins/index.types").Constructor<
  * @cssproperty --mdc-select-width - The width of the select.
  * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
  * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
+ *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @csspart help-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
+ * @csspart help-text-container - The container for the helper/validation icon and text elements.
+ * @csspart container - The container element that wraps the visual combobox and the dropdown icon.
+ * @csspart base-container - The container element that wraps the visual combobox, dropdown icon, and the popover.
+ * @csspart selected-icon - The icon element that is displayed next to the selected option in the dropdown list.
+ * @csspart base-text - The text element that displays the selected option or placeholder in the visual combobox.
+ * @csspart icon-container - The container element that wraps the dropdown icon.
+ * @csspart native-input - The native hidden input element.
  */
 declare class Select extends Select_base implements AssociatedFormControl {
     /**

package/dist/components/select/select.component.js

@@ -70,6 +70,21 @@ import styles from './select.styles';
  * @cssproperty --mdc-select-width - The width of the select.
  * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
  * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
+ *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @csspart help-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
+ * @csspart help-text-container - The container for the helper/validation icon and text elements.
+ * @csspart container - The container element that wraps the visual combobox and the dropdown icon.
+ * @csspart base-container - The container element that wraps the visual combobox, dropdown icon, and the popover.
+ * @csspart selected-icon - The icon element that is displayed next to the selected option in the dropdown list.
+ * @csspart base-text - The text element that displays the selected option or placeholder in the visual combobox.
+ * @csspart icon-container - The container element that wraps the dropdown icon.
+ * @csspart native-input - The native hidden input element.
  */
 class Select extends ListNavigationMixin(CaptureDestroyEventForChildElement(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))))) {
     constructor() {

package/dist/components/staticcheckbox/staticcheckbox.component.d.ts

@@ -23,6 +23,9 @@ declare const StaticCheckbox_base: import("../../utils/mixins/index.types").Cons
  * @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.
  *
  * @csspart icon-container - The container for the checkbox icon.
+ * @csspart checkbox-icon - The checkbox icon.
+ *
+ * @slot - Default slot for adding label text.
  */
 declare class StaticCheckbox extends StaticCheckbox_base {
     /**