@momentum-design/components 0.117.2 → 0.117.4

package/dist/components/accordionbutton/accordionbutton.constants.d.ts

@@ -1,7 +1,8 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-accordionbutton";
 declare const ICON_NAME: {
-    readonly ARROW_UP: "arrow-up-bold";
-    readonly ARROW_DOWN: "arrow-down-bold";
+    readonly ARROW_UP: Extract<IconNames, "arrow-up-bold">;
+    readonly ARROW_DOWN: Extract<IconNames, "arrow-down-bold">;
 };
 declare const VARIANT: {
     readonly DEFAULT: "default";

package/dist/components/animation/animation.component.js

@@ -96,7 +96,7 @@ class Animation extends Component {
         }
         if (this.containerRef.value) {
             this.lottieInstance = lottie.loadAnimation({
-                container: this.containerRef.value,
+                container: this.containerRef.value, // the dom element that will contain the animation
                 renderer: 'svg',
                 loop: this.getLoopValue(),
                 autoplay: this.autoplay,

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

@@ -113,7 +113,7 @@ declare class Badge extends Badge_base {
      */
     private getBadgeContentBasedOnType;
     update(changedProperties: PropertyValues): void;
-    render(): TemplateResult<1 | 2 | 3>;
+    render(): TemplateResult;
     static styles: Array<CSSResult>;
 }
 export default Badge;

package/dist/components/cardcheckbox/cardcheckbox.constants.d.ts

@@ -1,7 +1,8 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-cardcheckbox";
 declare const CHECK_MARK: {
-    readonly DEFAULT: "check-circle-bold";
-    readonly CHECKED: "check-circle-filled";
+    readonly DEFAULT: Extract<IconNames, "check-circle-bold">;
+    readonly CHECKED: Extract<IconNames, "check-circle-filled">;
 };
 declare const SELECTION_TYPE: {
     readonly CHECK: "check";

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

@@ -1,7 +1,7 @@
 import { CSSResult, PropertyValueMap, PropertyValues } from 'lit';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
-declare const Checkbox_base: import("../../utils/mixins/index.types").Constructor<import("../../models/component/component.component").default & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+declare const Checkbox_base: import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
  * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.
  * These are often used in forms, settings, and selections in lists.
@@ -26,6 +26,11 @@ declare const Checkbox_base: import("../../utils/mixins/index.types").Constructo
  * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.
  * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
  * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.
+ *
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
+ * @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.
  */
 declare class Checkbox extends Checkbox_base implements AssociatedFormControl {
     /**

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

@@ -41,6 +41,11 @@ import styles from './checkbox.styles';
  * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.
  * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
  * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.
+ *
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
+ * @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.
  */
 class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
     constructor() {

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

@@ -1,6 +1,7 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-checkbox";
 declare const ICON_NAME: {
-    readonly CHECKED: "check-bold";
-    readonly INDETERMINATE: "minus-bold";
+    readonly CHECKED: Extract<IconNames, "check-bold">;
+    readonly INDETERMINATE: Extract<IconNames, "minus-bold">;
 };
 export { TAG_NAME, ICON_NAME };

package/dist/components/checkbox/checkbox.styles.js

@@ -73,6 +73,11 @@ const styles = [
       flex-direction: column;
       gap: 0.25rem;
     }
+
+    .mdc-label {
+      word-break: break-word;
+      white-space: normal;
+    }
   `,
     ...hostFocusRingStyles(true),
 ];

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

@@ -4,7 +4,7 @@ import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import type Option from '../option/option.component';
 import type { PopoverStrategy } from '../popover/popover.types';
 import type { Placement } from './combobox.types';
-declare const Combobox_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/CaptureDestroyEventForChildElement").CaptureDestroyEventForChildElementInterface> & import("../../utils/mixins/index.types").Constructor<import("../../models/component/component.component").default & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+declare const Combobox_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/CaptureDestroyEventForChildElement").CaptureDestroyEventForChildElementInterface> & import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
  * The Combobox component is a text-based dropdown control that allows users to select an option from a predefined list.
  * Users can type text to filter the options and select their desired choice.
@@ -36,6 +36,10 @@ declare const Combobox_base: import("../../utils/mixins/index.types").Constructo
  * @tagname mdc-combobox
  *
  * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
+ * @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.
  *
  * @event click - (React: onClick) This event is dispatched when the combobox is clicked.
  * @event change - (React: onChange) This event is dispatched when the combobox is changed.

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

@@ -62,6 +62,10 @@ import styles from './combobox.styles';
  * @tagname mdc-combobox
  *
  * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
+ * @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.
  *
  * @event click - (React: onClick) This event is dispatched when the combobox is clicked.
  * @event change - (React: onChange) This event is dispatched when the combobox is changed.

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

@@ -1,7 +1,8 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-combobox";
 declare const ICON_NAME: {
-    readonly ARROW_UP: "arrow-up-bold";
-    readonly ARROW_DOWN: "arrow-down-bold";
+    readonly ARROW_UP: Extract<IconNames, "arrow-up-bold">;
+    readonly ARROW_DOWN: Extract<IconNames, "arrow-down-bold">;
 };
 declare const AUTOCOMPLETE_LIST = "list";
 declare const LISTBOX_ID = "combobox-listbox-id";

package/dist/components/dialog/dialog.constants.d.ts

@@ -1,3 +1,4 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-dialog";
 declare const DIALOG_VARIANT: {
     readonly DEFAULT: "default";
@@ -10,7 +11,7 @@ declare const DEFAULTS: {
     readonly SIZE: "small";
     readonly HEADER_TAG_NAME: "h2";
     readonly DESCRIPTION_TAG_NAME: "p";
-    readonly CANCEL_ICON: "cancel-bold";
+    readonly CANCEL_ICON: Extract<IconNames, "cancel-bold">;
     readonly VARIANT: "default";
     readonly DISABLE_ARIA_HAS_POPUP: false;
     readonly FOCUS_TRAP: true;

package/dist/components/filterchip/filterchip.constants.d.ts

@@ -1,6 +1,8 @@
+import type { IconNames } from '../icon/icon.types';
+import { ColorType } from '../chip/chip.types';
 declare const TAG_NAME: "mdc-filterchip";
 declare const DEFAULTS: {
-    readonly ICON_NAME: "check-bold";
-    readonly COLOR: "default";
+    readonly ICON_NAME: Extract<IconNames, "check-bold">;
+    readonly COLOR: Extract<ColorType, "default">;
 };
 export { TAG_NAME, DEFAULTS };

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

@@ -25,6 +25,10 @@ declare const FormfieldGroup_base: import("../../utils/mixins/index.types").Cons
  * @dependency mdc-toggletip
  *
  * @slot default - This is a default slot for checkbox or toggle components.
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
+ * @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.
  */
 declare class FormfieldGroup extends FormfieldGroup_base {
     /**

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

@@ -29,6 +29,10 @@ import styles from './formfieldgroup.styles';
  * @dependency mdc-toggletip
  *
  * @slot default - This is a default slot for checkbox or toggle components.
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
+ * @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.
  */
 class FormfieldGroup extends DataAriaLabelMixin(FormfieldWrapper) {
     constructor() {

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

@@ -1,6 +1,6 @@
 import { CSSResult, nothing } from 'lit';
 import { Component } from '../../models';
-import type { PopoverPlacement } from '../popover/popover.types';
+import type { PopoverPlacement, PopoverStrategy } from '../popover/popover.types';
 import type { ValidationType } from './formfieldwrapper.types';
 declare const FormfieldWrapper_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
 /**
@@ -15,14 +15,17 @@ declare const FormfieldWrapper_base: import("../../utils/mixins/index.types").Co
  * @dependency mdc-button
  * @dependency mdc-toggletip
  *
- *
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
+ * @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.
  */
 declare class FormfieldWrapper extends FormfieldWrapper_base {
     /**
-    * Indicates the unique identifier for the native input element.
-    * Required for acccessibility.
-    * @internal
-    */
+     * Indicates the unique identifier for the native input element.
+     * Required for acccessibility.
+     * @internal
+     */
     protected inputId: string;
     /**
      * The label of the input field. It is linked to the input field using the `for` attribute.
@@ -52,6 +55,7 @@ declare class FormfieldWrapper extends FormfieldWrapper_base {
      * @default 'top'
      */
     toggletipPlacement: PopoverPlacement;
+    toggletipStrategy: PopoverStrategy;
     /**
      * Aria label for the info icon that is displayed next to the label when `toggletipText` is set.
      * This is used for accessibility purposes to provide a description of the icon.

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

@@ -29,16 +29,19 @@ import { getHelperIcon } from './formfieldwrapper.utils';
  * @dependency mdc-button
  * @dependency mdc-toggletip
  *
- *
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
+ * @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.
  */
 class FormfieldWrapper extends DisabledMixin(Component) {
     constructor() {
         super(...arguments);
         /**
-        * Indicates the unique identifier for the native input element.
-        * Required for acccessibility.
-        * @internal
-        */
+         * Indicates the unique identifier for the native input element.
+         * Required for acccessibility.
+         * @internal
+         */
         this.inputId = `mdc-el-${uuidv4()}`;
         /**
          * The required attribute to indicate that the input field is required.
@@ -55,6 +58,7 @@ class FormfieldWrapper extends DisabledMixin(Component) {
          * @default 'top'
          */
         this.toggletipPlacement = DEFAULTS.TOGGLETIP_PLACEMENT;
+        this.toggletipStrategy = DEFAULTS.TOGGLETIP_STRATEGY;
         /** @internal */
         this.shouldRenderLabel = true;
     }
@@ -68,7 +72,9 @@ class FormfieldWrapper extends DisabledMixin(Component) {
             return nothing;
         }
         return this.shouldRenderLabel
-            ? html `<label for="${this.inputId}" id="${DEFAULTS.HEADING_ID}" class="mdc-label" part="label">${this.label}</label>`
+            ? html `<label for="${this.inputId}" id="${DEFAULTS.HEADING_ID}" class="mdc-label" part="label"
+          >${this.label}</label
+        >`
             : html ` <mdc-text
           id="${DEFAULTS.HEADING_ID}"
           tagname="${MDC_TEXT_OPTIONS.TAGNAME}"
@@ -119,27 +125,32 @@ class FormfieldWrapper extends DisabledMixin(Component) {
     renderLabel() {
         if (!this.label)
             return nothing;
+        const triggerId = `toggletip-trigger-${uuidv4()}`;
         return html `<div class="mdc-label-text" part="label-text">
       <slot name="label">${this.renderLabelElement()}</slot>
       ${this.required ? html `<span part="required-indicator">*</span>` : nothing}
-      ${this.toggletipText
+      <slot name="toggletip">
+        ${this.toggletipText
             ? html ` <mdc-button
-              part="info-icon-btn"
-              prefix-icon="${DEFAULTS.INFO_ICON}"
-              size="${DEFAULTS.ICON_SIZE}"
-              variant="${BUTTON_VARIANTS.TERTIARY}"
-              aria-label="${ifDefined(this.infoIconAriaLabel)}"
-              id="info-icon-id"
-            ></mdc-button>
-            <mdc-toggletip
-              part="label-toggletip"
-              triggerid="info-icon-id"
-              id="label-toggletip-id"
-              placement="${this.toggletipPlacement}"
-              show-arrow
-              >${this.toggletipText}</mdc-toggletip
-            >`
+                part="info-icon-btn"
+                prefix-icon="${DEFAULTS.INFO_ICON}"
+                size="${DEFAULTS.ICON_SIZE}"
+                variant="${BUTTON_VARIANTS.TERTIARY}"
+                aria-label="${ifDefined(this.infoIconAriaLabel)}"
+                ?disabled="${this.disabled}"
+                id="${triggerId}"
+              ></mdc-button>
+              <mdc-toggletip
+                part="label-toggletip"
+                triggerid="${triggerId}"
+                id="label-toggletip-id"
+                placement="${this.toggletipPlacement}"
+                strategy="${this.toggletipStrategy}"
+                show-arrow
+                >${this.toggletipText}</mdc-toggletip
+              >`
             : nothing}
+      </slot>
     </div>`;
     }
     /**
@@ -181,6 +192,10 @@ __decorate([
     property({ type: String, reflect: true, attribute: 'toggletip-placement' }),
     __metadata("design:type", String)
 ], FormfieldWrapper.prototype, "toggletipPlacement", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'toggletip-strategy' }),
+    __metadata("design:type", String)
+], FormfieldWrapper.prototype, "toggletipStrategy", void 0);
 __decorate([
     property({ type: String, reflect: true, attribute: 'info-icon-aria-label' }),
     __metadata("design:type", String)

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

@@ -1,3 +1,4 @@
+import { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-formfieldwrapper";
 declare const VALIDATION: {
     readonly DEFAULT: "default";
@@ -11,8 +12,9 @@ declare const DEFAULTS: {
     readonly HELPER_TEXT_ID: "helper-text-id";
     readonly HEADING_ID: "heading-id";
     readonly ICON_SIZE: 20;
-    readonly INFO_ICON: "info-badge-filled";
+    readonly INFO_ICON: Extract<IconNames, "info-badge-filled">;
     readonly TOGGLETIP_PLACEMENT: "top";
+    readonly TOGGLETIP_STRATEGY: "absolute";
 };
 declare const MDC_TEXT_OPTIONS: {
     readonly TAGNAME: "span";

package/dist/components/formfieldwrapper/formfieldwrapper.constants.js

@@ -15,6 +15,7 @@ const DEFAULTS = {
     ICON_SIZE: 20,
     INFO_ICON: 'info-badge-filled',
     TOGGLETIP_PLACEMENT: 'top',
+    TOGGLETIP_STRATEGY: 'absolute',
 };
 const MDC_TEXT_OPTIONS = {
     TAGNAME: VALID_TEXT_TAGS.SPAN,

package/dist/components/formfieldwrapper/formfieldwrapper.styles.js

@@ -49,6 +49,10 @@ const styles = [
       color: var(--mds-color-theme-text-secondary-normal);
     }
 
+    :host::part(info-icon-btn) {
+      align-self: flex-start;
+    }
+
     :host([help-text-type='error']) .mdc-help-text {
       color: var(--mds-color-theme-text-error-normal);
     }

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

@@ -1,3 +1,3 @@
 import type { HelperIconsList, ValidationType } from './formfieldwrapper.types';
-declare const getHelperIcon: (type: ValidationType) => HelperIconsList | '';
+declare const getHelperIcon: (type: ValidationType) => HelperIconsList | "";
 export { getHelperIcon };

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

@@ -3,7 +3,7 @@ import FormfieldWrapper from '../formfieldwrapper';
 import type { IconNames } from '../icon/icon.types';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
 import type { AutoCapitalizeType, AutoCompleteType, InputType } from './input.types';
-declare const Input_base: import("../../utils/mixins/index.types").Constructor<import("../../models/component/component.component").default & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+declare const Input_base: import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
  * mdc-input is a component that allows users to input text.
  *  It contains:
@@ -29,6 +29,15 @@ declare const Input_base: import("../../utils/mixins/index.types").Constructor<i
  * @dependency mdc-button
  * @dependency mdc-toggletip
  *
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
+ * @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.
+ * @slot input - Slot for the input element. If not provided, the input field will be rendered.
+ * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.
+ * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.
+ * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.
+ *
  * @cssproperty --mdc-input-disabled-border-color - Border color for the input container when disabled
  * @cssproperty --mdc-input-disabled-text-color - Text color for the input field when disabled
  * @cssproperty --mdc-input-disabled-background-color - Background color for the input field when disabled

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

@@ -44,6 +44,15 @@ import styles from './input.styles';
  * @dependency mdc-button
  * @dependency mdc-toggletip
  *
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
+ * @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.
+ * @slot input - Slot for the input element. If not provided, the input field will be rendered.
+ * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.
+ * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.
+ * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.
+ *
  * @cssproperty --mdc-input-disabled-border-color - Border color for the input container when disabled
  * @cssproperty --mdc-input-disabled-text-color - Text color for the input field when disabled
  * @cssproperty --mdc-input-disabled-background-color - Background color for the input field when disabled

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

@@ -1,3 +1,4 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-input";
 declare const AUTO_CAPITALIZE: {
     readonly OFF: "off";
@@ -24,7 +25,7 @@ declare const DEFAULTS: {
     readonly VALIDATION: "default";
     readonly ICON_SIZE_VALUE: 1;
     readonly ICON_SIZE_UNIT: "rem";
-    readonly CLEAR_BUTTON_ICON: "cancel-bold";
+    readonly CLEAR_BUTTON_ICON: Extract<IconNames, "cancel-bold">;
     readonly CLEAR_BUTTON_VARIANT: "tertiary";
     readonly CLEAR_BUTTON_SIZE: 20;
     readonly PREFIX_TEXT_TYPE: "body-midsize-regular";

package/dist/components/inputchip/inputchip.constants.d.ts

@@ -1,7 +1,8 @@
+import { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-inputchip";
 declare const DEFAULTS: {
     readonly TEXT_TYPE: "body-midsize-regular";
     readonly TAG_NAME: "span";
-    readonly CLOSE_ICON: "cancel-bold";
+    readonly CLOSE_ICON: Extract<IconNames, "cancel-bold">;
 };
 export { TAG_NAME, DEFAULTS };

package/dist/components/menuitem/menuitem.constants.d.ts

@@ -1,7 +1,8 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-menuitem";
 declare const ARROW_ICONS: {
-    readonly LEFT: "arrow-left-bold";
-    readonly RIGHT: "arrow-right-bold";
+    readonly LEFT: Extract<IconNames, "arrow-left-bold">;
+    readonly RIGHT: Extract<IconNames, "arrow-right-bold">;
 };
 declare const ARROW_DIRECTIONS: {
     readonly POSITIVE: "positive";

package/dist/components/navmenuitem/navmenuitem.constants.d.ts

@@ -1,10 +1,11 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-navmenuitem";
 declare const ALLOWED_BADGE_TYPES: {
     readonly DOT: "dot";
     readonly COUNTER: "counter";
 };
 declare const ICON_NAME: {
-    readonly RIGHT_ARROW: "arrow-right-bold";
+    readonly RIGHT_ARROW: Extract<IconNames, "arrow-right-bold">;
 };
 declare const DEFAULTS: {
     readonly MAX_COUNTER: 99;

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

@@ -1,5 +1,6 @@
+import { IconNames } from '../icon/icon.types';
 export declare const PASSWORD_VISIBILITY_ICONS: {
-    readonly HIDE_BOLD: "hide-bold";
-    readonly SHOW_BOLD: "show-bold";
+    readonly HIDE_BOLD: Extract<IconNames, "hide-bold">;
+    readonly SHOW_BOLD: Extract<IconNames, "show-bold">;
 };
 export declare const TAG_NAME: "mdc-password";

package/dist/components/popover/popover.constants.d.ts

@@ -31,6 +31,7 @@ declare const DEFAULTS: {
     readonly PLACEMENT: "bottom";
     readonly TRIGGER: "click";
     readonly COLOR: "tonal";
+    readonly STRATEGY: "absolute";
     readonly OFFSET: 4;
     readonly BOUNDARY: "clippingAncestors";
     readonly BOUNDARY_ROOT: "viewport";
@@ -54,7 +55,6 @@ declare const DEFAULTS: {
     readonly DISABLE_ARIA_EXPANDED: false;
     readonly PROPAGATE_EVENT_ON_ESCAPE: false;
     readonly KEEP_CONNECTED_TOOLTIP_CLOSED: true;
-    readonly STRATEGY: "absolute";
     readonly IS_BACKDROP_INVISIBLE: true;
 };
 export { TAG_NAME, POPOVER_PLACEMENT, COLOR, STRATEGY, TRIGGER, DEFAULTS };

package/dist/components/popover/popover.constants.js

@@ -33,6 +33,7 @@ const DEFAULTS = {
     PLACEMENT: POPOVER_PLACEMENT.BOTTOM,
     TRIGGER: TRIGGER.CLICK,
     COLOR: COLOR.TONAL,
+    STRATEGY: STRATEGY.ABSOLUTE,
     OFFSET: 4,
     BOUNDARY: 'clippingAncestors',
     BOUNDARY_ROOT: 'viewport',
@@ -56,7 +57,6 @@ const DEFAULTS = {
     DISABLE_ARIA_EXPANDED: false,
     PROPAGATE_EVENT_ON_ESCAPE: false,
     KEEP_CONNECTED_TOOLTIP_CLOSED: true,
-    STRATEGY: 'absolute',
     IS_BACKDROP_INVISIBLE: true,
 };
 export { TAG_NAME, POPOVER_PLACEMENT, COLOR, STRATEGY, TRIGGER, DEFAULTS };

package/dist/components/presence/presence.utils.d.ts

@@ -1,3 +1,3 @@
 import type { PresenceSize, PresenceType } from './presence.types';
-export declare const getIconValue: (type: PresenceType) => "active-presence-small-filled" | "away-calling-presence-filled" | "busy-presence-bold" | "camera-filled" | "dnd-presence-badge-filled" | "generic-device-video-badge-filled" | "handset-filled" | "meetings-presence-badge-filled" | "pause-badge-filled" | "phone-badge-filled" | "pto-presence-filled" | "quiet-hours-presence-filled" | "recents-presence-badge-filled" | "share-screen-badge-filled";
+export declare const getIconValue: (type: PresenceType) => "dnd-presence-badge-filled" | "recents-presence-badge-filled" | "away-calling-presence-filled" | "busy-presence-bold" | "camera-filled" | "handset-filled" | "generic-device-video-badge-filled" | "phone-badge-filled" | "pause-badge-filled" | "pto-presence-filled" | "share-screen-badge-filled" | "quiet-hours-presence-filled" | "meetings-presence-badge-filled" | "active-presence-small-filled";
 export declare const getPresenceIconSize: (size: PresenceSize) => number;

package/dist/components/progressspinner/progressspinner.constants.d.ts

@@ -1,3 +1,4 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-progressspinner";
 declare const DEFAULTS: {
     readonly RADIUS: 20;
@@ -9,7 +10,7 @@ declare const DEFAULTS: {
     readonly ICON_LENGTH_UNIT: "em";
 };
 declare const ICON_NAME: {
-    readonly CHECK_CIRCLE_BOLD: "check-circle-bold";
-    readonly ERROR_LEGACY_FILLED: "error-legacy-filled";
+    readonly CHECK_CIRCLE_BOLD: Extract<IconNames, "check-circle-bold">;
+    readonly ERROR_LEGACY_FILLED: Extract<IconNames, "error-legacy-filled">;
 };
 export { TAG_NAME, DEFAULTS, ICON_NAME };

package/dist/components/progressspinner/progressspinner.constants.js

@@ -3,8 +3,8 @@ const TAG_NAME = utils.constructTagName('progressspinner');
 const DEFAULTS = {
     RADIUS: 20,
     CIRCUMFERENCE: 2 * Math.PI * 20,
-    STROKE_WIDTH: 4,
-    GAP_SIZE: 7.5,
+    STROKE_WIDTH: 4, // Default stroke width or border width
+    GAP_SIZE: 7.5, // Gap size between the spinner and the track
     ERROR_ICON_SIZE: 2,
     SUCCESS_ICON_SIZE: 3,
     ICON_LENGTH_UNIT: 'em',

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

@@ -1,7 +1,7 @@
 import { CSSResult, PropertyValueMap, PropertyValues } from 'lit';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
-declare const Radio_base: import("../../utils/mixins/index.types").Constructor<import("../../models/component/component.component").default & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+declare const Radio_base: import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
  * Radio allow users to select single options from a list or turn an item/feature on or off.
  * These are often used in forms, settings, and selection in lists.

package/dist/components/radio/radio.styles.js

@@ -61,6 +61,8 @@ const styles = [
 
     .mdc-label {
       cursor: pointer;
+      word-break: break-word;
+      white-space: normal;
     }
 
     :host([disabled]) .mdc-radio__label-text,
@@ -83,6 +85,7 @@ const styles = [
       flex-direction: column;
       justify-content: center;
       gap: 0.25rem;
+      flex: 1;
     }
     :host::part(required-indicator) {
       display: none;

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

@@ -1,7 +1,8 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-searchfield";
 declare const DEFAULTS: {
     readonly TYPE: "search";
-    readonly ICON: "search-bold";
+    readonly ICON: Extract<IconNames, "search-bold">;
     readonly CLOSE_BTN: true;
     readonly INPUT_CHIP_TAG: "mdc-inputchip";
 };