@momentum-design/components 0.80.1 → 0.80.2

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

@@ -10,7 +10,11 @@ declare const Checkbox_base: import("../../utils/mixins/index.types").Constructo
  *
  * To create a group of checkboxes, use the FormFieldGroup component.
  *
+ * @dependency mdc-button
  * @dependency mdc-icon
+ * @dependency mdc-staticcheckbox
+ * @dependency mdc-text
+ * @dependency mdc-toggletip
  *
  * @tagname mdc-checkbox
  *

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

@@ -23,7 +23,11 @@ import styles from './checkbox.styles';
  *
  * To create a group of checkboxes, use the FormFieldGroup component.
  *
+ * @dependency mdc-button
  * @dependency mdc-icon
+ * @dependency mdc-staticcheckbox
+ * @dependency mdc-text
+ * @dependency mdc-toggletip
  *
  * @tagname mdc-checkbox
  *

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

@@ -1,6 +1,9 @@
-import Checkbox from './checkbox.component';
+import '../button';
 import '../icon';
 import '../staticcheckbox';
+import '../text';
+import '../toggletip';
+import Checkbox from './checkbox.component';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-checkbox']: Checkbox;

package/dist/components/checkbox/index.js

@@ -1,6 +1,9 @@
-import Checkbox from './checkbox.component';
-import { TAG_NAME } from './checkbox.constants';
+import '../button';
 import '../icon';
 import '../staticcheckbox';
+import '../text';
+import '../toggletip';
+import Checkbox from './checkbox.component';
+import { TAG_NAME } from './checkbox.constants';
 Checkbox.register(TAG_NAME);
 export default Checkbox;

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

@@ -19,6 +19,11 @@ declare const FormfieldGroup_base: import("../../utils/mixins/index.types").Cons
  *
  * @tagname mdc-formfieldgroup
  *
+ * @dependency mdc-button
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-toggletip
+ *
  * @slot default - This is a default slot for checkbox or toggle components.
  */
 declare class FormfieldGroup extends FormfieldGroup_base {

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

@@ -23,6 +23,11 @@ import styles from './formfieldgroup.styles';
  *
  * @tagname mdc-formfieldgroup
  *
+ * @dependency mdc-button
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-toggletip
+ *
  * @slot default - This is a default slot for checkbox or toggle components.
  */
 class FormfieldGroup extends DataAriaLabelMixin(FormfieldWrapper) {

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

@@ -1,6 +1,8 @@
-import FormfieldGroup from './formfieldgroup.component';
-import '../text';
+import '../button';
 import '../icon';
+import '../text';
+import '../toggletip';
+import FormfieldGroup from './formfieldgroup.component';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-formfieldgroup']: FormfieldGroup;

package/dist/components/formfieldgroup/index.js

@@ -1,6 +1,8 @@
+import '../button';
+import '../icon';
+import '../text';
+import '../toggletip';
 import FormfieldGroup from './formfieldgroup.component';
 import { TAG_NAME } from './formfieldgroup.constants';
-import '../text';
-import '../icon';
 FormfieldGroup.register(TAG_NAME);
 export default FormfieldGroup;

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

@@ -1,5 +1,6 @@
 import { CSSResult, nothing } from 'lit';
 import { Component } from '../../models';
+import type { PopoverPlacement } 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;
 /**
@@ -9,7 +10,11 @@ declare const FormfieldWrapper_base: import("../../utils/mixins/index.types").Co
  *
  * @tagname mdc-formfieldwrapper
  *
- * @slot label-info - slot to add the label info icon
+ * @dependency mdc-text
+ * @dependency mdc-icon
+ * @dependency mdc-button
+ * @dependency mdc-toggletip
+ *
  *
  */
 declare class FormfieldWrapper extends FormfieldWrapper_base {
@@ -36,6 +41,21 @@ declare class FormfieldWrapper extends FormfieldWrapper_base {
      * The help text that is displayed below the input field.
      */
     helpText?: string;
+    /**
+     * The toggletip text that is displayed when the label is hovered.
+     * It is used to provide additional information about the label.
+     */
+    toggletipText?: string;
+    /**
+     * The placement of the toggletip that is displayed when the info icon is hovered.
+     * @default 'top'
+     */
+    toggletipPlacement: PopoverPlacement;
+    /**
+     * 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.
+     */
+    infoIconAriaLabel?: string;
     /** @internal */
     protected shouldRenderLabel: Boolean;
     /**

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

@@ -9,9 +9,11 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { Component } from '../../models';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { DEFAULTS, MDC_TEXT_OPTIONS } from './formfieldwrapper.constants';
+import { BUTTON_VARIANTS } from '../button/button.constants';
 import styles from './formfieldwrapper.styles';
 import { getHelperIcon } from './formfieldwrapper.utils';
 /**
@@ -21,7 +23,11 @@ import { getHelperIcon } from './formfieldwrapper.utils';
  *
  * @tagname mdc-formfieldwrapper
  *
- * @slot label-info - slot to add the label info icon
+ * @dependency mdc-text
+ * @dependency mdc-icon
+ * @dependency mdc-button
+ * @dependency mdc-toggletip
+ *
  *
  */
 class FormfieldWrapper extends DisabledMixin(Component) {
@@ -42,6 +48,11 @@ class FormfieldWrapper extends DisabledMixin(Component) {
          * The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.
          */
         this.helpTextType = DEFAULTS.VALIDATION;
+        /**
+         * The placement of the toggletip that is displayed when the info icon is hovered.
+         * @default 'top'
+         */
+        this.toggletipPlacement = DEFAULTS.TOGGLETIP_PLACEMENT;
         /** @internal */
         this.shouldRenderLabel = true;
     }
@@ -109,7 +120,22 @@ class FormfieldWrapper extends DisabledMixin(Component) {
         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}
-      <slot name="label-info"></slot>
+      ${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
+      >` : nothing}
     </div>`;
     }
     /**
@@ -147,4 +173,16 @@ __decorate([
     property({ type: String, reflect: true, attribute: 'help-text' }),
     __metadata("design:type", String)
 ], FormfieldWrapper.prototype, "helpText", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'toggletip-text' }),
+    __metadata("design:type", String)
+], FormfieldWrapper.prototype, "toggletipText", void 0);
+__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: 'info-icon-aria-label' }),
+    __metadata("design:type", String)
+], FormfieldWrapper.prototype, "infoIconAriaLabel", void 0);
 export default FormfieldWrapper;

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

@@ -10,6 +10,9 @@ declare const DEFAULTS: {
     readonly VALIDATION: "default";
     readonly HELPER_TEXT_ID: "helper-text-id";
     readonly HEADING_ID: "heading-id";
+    readonly ICON_SIZE: 20;
+    readonly INFO_ICON: "info-badge-filled";
+    readonly TOGGLETIP_PLACEMENT: "top";
 };
 declare const MDC_TEXT_OPTIONS: {
     TAGNAME: "span";

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

@@ -12,6 +12,9 @@ const DEFAULTS = {
     VALIDATION: VALIDATION.DEFAULT,
     HELPER_TEXT_ID: 'helper-text-id',
     HEADING_ID: 'heading-id',
+    ICON_SIZE: 20,
+    INFO_ICON: 'info-badge-filled',
+    TOGGLETIP_PLACEMENT: 'top',
 };
 const MDC_TEXT_OPTIONS = {
     TAGNAME: VALID_TEXT_TAGS.SPAN,

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

@@ -1,6 +1,8 @@
-import FormfieldWrapper from './formfieldwrapper.component';
+import '../button';
 import '../icon';
 import '../text';
+import '../toggletip';
+import FormfieldWrapper from './formfieldwrapper.component';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-formfieldwrapper']: FormfieldWrapper;

package/dist/components/formfieldwrapper/index.js

@@ -1,6 +1,8 @@
-import FormfieldWrapper from './formfieldwrapper.component';
-import { TAG_NAME } from './formfieldwrapper.constants';
+import '../button';
 import '../icon';
 import '../text';
+import '../toggletip';
+import FormfieldWrapper from './formfieldwrapper.component';
+import { TAG_NAME } from './formfieldwrapper.constants';
 FormfieldWrapper.register(TAG_NAME);
 export default FormfieldWrapper;

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

@@ -1,7 +1,8 @@
-import Input from './input.component';
 import '../button';
 import '../icon';
 import '../text';
+import '../toggletip';
+import Input from './input.component';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-input']: Input;

package/dist/components/input/index.js

@@ -1,7 +1,8 @@
-import Input from './input.component';
-import { TAG_NAME } from './input.constants';
 import '../button';
 import '../icon';
 import '../text';
+import '../toggletip';
+import Input from './input.component';
+import { TAG_NAME } from './input.constants';
 Input.register(TAG_NAME);
 export default Input;

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

@@ -26,6 +26,7 @@ declare const Input_base: import("../../utils/mixins/index.types").Constructor<i
  * @dependency mdc-icon
  * @dependency mdc-text
  * @dependency mdc-button
+ * @dependency mdc-toggletip
  *
  * @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

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

@@ -38,6 +38,7 @@ import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
  * @dependency mdc-icon
  * @dependency mdc-text
  * @dependency mdc-button
+ * @dependency mdc-toggletip
  *
  * @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

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

@@ -23,7 +23,7 @@ declare const DEFAULTS: {
     VALIDATION: "default";
     ICON_SIZE_VALUE: number;
     ICON_SIZE_UNIT: string;
-    CLEAR_BUTTON_ICON: string;
+    CLEAR_BUTTON_ICON: "cancel-bold";
     CLEAR_BUTTON_VARIANT: "tertiary";
     CLEAR_BUTTON_SIZE: 20;
     PREFIX_TEXT_TYPE: "body-midsize-regular";

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

@@ -163,7 +163,7 @@ declare class Popover extends Popover_base {
      * Element ID that the popover append to.
      * @default ''
      */
-    appendTo: string;
+    appendTo?: string;
     /**
      * aria-label attribute to be set for close button accessibility.
      * @default null

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

@@ -177,11 +177,6 @@ class Popover extends FocusTrapMixin(Component) {
          * @default 1000
          */
         this.zIndex = DEFAULTS.Z_INDEX;
-        /**
-         * Element ID that the popover append to.
-         * @default ''
-         */
-        this.appendTo = '';
         /**
          * aria-label attribute to be set for close button accessibility.
          * @default null

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

@@ -95,6 +95,8 @@ class Progressbar extends DataAriaLabelMixin(FormfieldWrapper) {
         super.connectedCallback();
         this.id = `mdc-progressbar-${uuidv4()}`;
         this.disabled = undefined;
+        this.toggletipText = undefined;
+        this.toggletipPlacement = undefined;
     }
     /**
      * Ensures that the value is clamped between 0 and 100

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

@@ -1,5 +1,9 @@
-import Radio from './radio.component';
+import '../button';
+import '../icon';
 import '../staticradio';
+import '../text';
+import '../tooltip';
+import Radio from './radio.component';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-radio']: Radio;

package/dist/components/radio/index.js

@@ -1,5 +1,9 @@
+import '../button';
+import '../icon';
+import '../staticradio';
+import '../text';
+import '../tooltip';
 import Radio from './radio.component';
 import { TAG_NAME } from './radio.constants';
-import '../staticradio';
 Radio.register(TAG_NAME);
 export default Radio;

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

@@ -7,7 +7,12 @@ declare const Radio_base: import("../../utils/mixins/index.types").Constructor<i
  * These are often used in forms, settings, and selection in lists.
  *
  * A radio component contains an optional label, optional info icon and an optional helper text.
- * @dependency mdc-formfieldwrapper
+ *
+ * @dependency mdc-button
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-staticradio
+ * @dependency mdc-toggletip
  *
  * @tagname mdc-radio
  *

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

@@ -21,7 +21,12 @@ import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwra
  * These are often used in forms, settings, and selection in lists.
  *
  * A radio component contains an optional label, optional info icon and an optional helper text.
- * @dependency mdc-formfieldwrapper
+ *
+ * @dependency mdc-button
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-staticradio
+ * @dependency mdc-toggletip
  *
  * @tagname mdc-radio
  *

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

@@ -1,6 +1,8 @@
+import '../button';
 import '../icon';
 import '../popover';
 import '../text';
+import '../toggletip';
 import Select from './select.component';
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/select/index.js

@@ -1,6 +1,8 @@
+import '../button';
 import '../icon';
 import '../popover';
 import '../text';
+import '../toggletip';
 import Select from './select.component';
 import { TAG_NAME } from './select.constants';
 Select.register(TAG_NAME);

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

@@ -10,9 +10,11 @@ declare const Select_base: import("../../utils/mixins/index.types").Constructor<
  * The component ensures accessibility and usability while handling various use cases,
  * including long text truncation with tooltip support.
  *
+ * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-popover
  * @dependency mdc-text
+ * @dependency mdc-toggletip
  *
  * @tagname mdc-select
  *
@@ -61,7 +63,6 @@ declare class Select extends Select_base implements AssociatedFormControl {
      */
     inputElement: HTMLInputElement;
     connectedCallback(): void;
-    disconnectedCallback(): void;
     /**
      * A helper function which returns a flattened array of all valid options from the assigned slot.
      * It takes care of the edge cases where the option is either a direct child or a

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

@@ -26,9 +26,11 @@ import styles from './select.styles';
  * The component ensures accessibility and usability while handling various use cases,
  * including long text truncation with tooltip support.
  *
+ * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-popover
  * @dependency mdc-text
+ * @dependency mdc-toggletip
  *
  * @tagname mdc-select
  *
@@ -68,11 +70,6 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         super.connectedCallback();
         // select will only contain name and value will be defined in the options.
         this.value = undefined;
-        this.addEventListener('keydown', this.handleKeydown);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('keydown', this.handleKeydown);
     }
     /**
      * A helper function which returns a flattened array of all valid options from the assigned slot.
@@ -94,6 +91,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     handlePopoverOpen() {
         this.displayPopover = true;
         this.baseIconName = ARROW_ICON.ARROW_UP;
+        this.updateActivedescendant();
     }
     handlePopoverClose() {
         this.displayPopover = false;
@@ -343,7 +341,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     updateActivedescendant(target) {
         var _a, _b;
         const currentIndex = this.getAllValidOptions().findIndex((option) => option === target);
-        this.activeDescendant = (_b = (_a = this.getAllValidOptions()[currentIndex]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '';
+        this.activeDescendant = ((_a = this.getAllValidOptions()[currentIndex]) === null || _a === void 0 ? void 0 : _a.id) || ((_b = this.getAllValidOptions()[0]) === null || _b === void 0 ? void 0 : _b.id);
     }
     resetActivedescendant() {
         this.activeDescendant = '';
@@ -452,6 +450,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
       <mdc-popover
         id="options-popover"
         triggerid="select-base-triggerid"
+        @keydown="${this.handleKeydown}"
         interactive
         ?visible="${this.displayPopover}"
         hide-on-outside-click
@@ -482,6 +481,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         <div
           id="select-base-triggerid"
           part="base-container"
+          @keydown="${this.handleKeydown}"
           tabindex="${this.disabled ? '-1' : '0'}"
           class="${this.disabled ? '' : 'mdc-focus-ring'}"
           role="combobox"
@@ -490,6 +490,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
           aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
           aria-labelledby="${this.label ? FORMFIELD_DEFAULTS.HEADING_ID : ''}"
           aria-expanded="${this.displayPopover ? 'true' : 'false'}"
+          aria-controls="options-popover"
         >
       ${this.selectedIcon
             ? html `<mdc-icon length-unit="rem" size="1" name="${this.selectedIcon}" part="selected-icon"></mdc-icon>`

package/dist/components/textarea/index.d.ts

@@ -2,6 +2,7 @@ import Textarea from './textarea.component';
 import '../button';
 import '../icon';
 import '../text';
+import '../toggletip';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-textarea']: Textarea;

package/dist/components/textarea/index.js

@@ -3,5 +3,6 @@ import { TAG_NAME } from './textarea.constants';
 import '../button';
 import '../icon';
 import '../text';
+import '../toggletip';
 Textarea.register(TAG_NAME);
 export default Textarea;

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

@@ -32,10 +32,10 @@ declare const Textarea_base: import("../../utils/mixins/index.types").Constructo
  * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit
  * exceeds or restored.
  *
- *
+ * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-text
- * @dependency mdc-button
+ * @dependency mdc-toggletip
  *
  * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled
  * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled

package/dist/components/textarea/textarea.component.js

@@ -46,10 +46,10 @@ import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
  * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit
  * exceeds or restored.
  *
- *
+ * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-text
- * @dependency mdc-button
+ * @dependency mdc-toggletip
  *
  * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled
  * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled

package/dist/components/toggle/index.d.ts

@@ -1,5 +1,8 @@
+import '../button';
 import '../icon';
 import '../statictoggle';
+import '../text';
+import '../toggletip';
 import Toggle from './toggle.component';
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/toggle/index.js

@@ -1,5 +1,8 @@
+import '../button';
 import '../icon';
 import '../statictoggle';
+import '../text';
+import '../toggletip';
 import Toggle from './toggle.component';
 import { TAG_NAME } from './toggle.constants';
 Toggle.register(TAG_NAME);

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

@@ -13,8 +13,11 @@ declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<
  *
  * Note: It internally renders a checkbox styled as a toggle switch.
  *
+ * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-statictoggle
+ * @dependency mdc-text
+ * @dependency mdc-toggletip
  *
  * @tagname mdc-toggle
  *

package/dist/components/toggle/toggle.component.js

@@ -26,8 +26,11 @@ import styles from './toggle.styles';
  *
  * Note: It internally renders a checkbox styled as a toggle switch.
  *
+ * @dependency mdc-button
  * @dependency mdc-icon
  * @dependency mdc-statictoggle
+ * @dependency mdc-text
+ * @dependency mdc-toggletip
  *
  * @tagname mdc-toggle
  *

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

@@ -47,7 +47,7 @@ declare class ToggleTip extends Popover {
       *
       * Please refer to the `mdc-screenreaderannouncer` component for more details.
     */
-    screenreaderAnnouncerIdentity: string;
+    screenreaderAnnouncerIdentity?: string;
     connectedCallback(): void;
     /**
      * @returns The text content of all the nodes in the default slot, joined by a space.