@momentum-design/components 0.117.3 → 0.117.4

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

@@ -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/combobox/combobox.component.d.ts

@@ -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/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,28 +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)}"
-              ?disabled="${this.disabled}"
-              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>`;
     }
     /**
@@ -182,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

@@ -14,6 +14,7 @@ declare const DEFAULTS: {
     readonly ICON_SIZE: 20;
     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/input/input.component.d.ts

@@ -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/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 };