@momentum-design/components 0.80.0 → 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/dialog/dialog.component.d.ts

@@ -56,8 +56,10 @@ declare class Dialog extends Dialog_base {
     id: string;
     /**
      * The ID of the element that triggers the dialog
+     *
+     * @default undefined
      */
-    triggerId: string;
+    triggerId?: string;
     /**
      * The visibility of the dialog
      * @default false
@@ -73,6 +75,10 @@ declare class Dialog extends Dialog_base {
      * @default small
      */
     size: DialogSize;
+    /**
+     * The variant of the dialog, can be 'default' or 'promotional'
+     * @default default
+     */
     variant: DialogVariant;
     /**
      * Defines a string value for the aria-label attribute for close button accessibility
@@ -90,11 +96,11 @@ declare class Dialog extends Dialog_base {
     /**
      * Defines a string value to display as the title of the dialog
      */
-    headerText: string;
+    headerText?: string;
     /**
      * Defines a string value to display as the under-header description of the dialog
      */
-    descriptionText: string;
+    descriptionText?: string;
     /**
      * The html tag to be used for the header text
      */
@@ -109,14 +115,25 @@ declare class Dialog extends Dialog_base {
      */
     role: DialogRole;
     /** @internal */
-    triggerElement: HTMLElement | null;
+    protected triggerElement: HTMLElement | null;
     /** @internal */
-    private utils;
+    protected backdropElement: HTMLElement | null;
     /** @internal */
-    backdropElement: HTMLElement | null;
-    /** @internal */
-    private lastActiveElement;
+    protected lastActiveElement: HTMLElement | null;
     constructor();
+    /**
+     * Sets up the aria attributes for the dialog based on the header text and aria attributes.
+     * If no header text or aria attributes are provided, it will use the triggerId if available.
+     * @internal
+     */
+    private setupAriaAttributes;
+    /**
+     * Creates a backdrop element for the dialog.
+     * The backdrop is a full-screen overlay that appears behind the dialog when it is open.
+     * It prevents interaction with the rest of the application while the dialog is open.
+     * @internal
+     */
+    private createBackdrop;
     protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
     disconnectedCallback(): Promise<void>;
     /**

package/dist/components/dialog/dialog.component.js

@@ -14,7 +14,6 @@ import styles from './dialog.styles';
 import { Component } from '../../models';
 import { FocusTrapMixin } from '../../utils/mixins/FocusTrapMixin';
 import { DEFAULTS } from './dialog.constants';
-import { DialogUtils } from './dialog.utils';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { DialogEventManager } from './dialog.events';
 import { BUTTON_VARIANTS, ICON_BUTTON_SIZES } from '../button/button.constants';
@@ -73,10 +72,6 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
          * The unique ID of the dialog
          */
         this.id = '';
-        /**
-         * The ID of the element that triggers the dialog
-         */
-        this.triggerId = '';
         /**
          * The visibility of the dialog
          * @default false
@@ -92,6 +87,10 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
          * @default small
          */
         this.size = DEFAULTS.SIZE;
+        /**
+         * The variant of the dialog, can be 'default' or 'promotional'
+         * @default default
+         */
         this.variant = DEFAULTS.VARIANT;
         /**
          * Defines a string value for the aria-label attribute for close button accessibility
@@ -106,14 +105,6 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
          * Defines a string value for the aria-label attribute when header is not used
          */
         this.ariaLabel = null;
-        /**
-         * Defines a string value to display as the title of the dialog
-         */
-        this.headerText = '';
-        /**
-         * Defines a string value to display as the under-header description of the dialog
-         */
-        this.descriptionText = '';
         /**
          * The html tag to be used for the header text
          */
@@ -159,14 +150,53 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
         this.showDialog = () => {
             this.visible = true;
         };
-        /** @internal */
-        this.utils = new DialogUtils(this);
         document.addEventListener('keydown', this.onEscapeKeydown);
     }
+    /**
+     * Sets up the aria attributes for the dialog based on the header text and aria attributes.
+     * If no header text or aria attributes are provided, it will use the triggerId if available.
+     * @internal
+     */
+    setupAriaAttributes() {
+        if (this.headerText && !this.ariaLabel && !this.ariaLabelledby) {
+            this.setAttribute('aria-labelledby', this.headerText);
+        }
+        else if (!this.headerText && !this.ariaLabel && !this.ariaLabelledby) {
+            if (this.triggerId) {
+                this.setAttribute('aria-labelledby', this.triggerId);
+            }
+        }
+    }
+    /**
+     * Creates a backdrop element for the dialog.
+     * The backdrop is a full-screen overlay that appears behind the dialog when it is open.
+     * It prevents interaction with the rest of the application while the dialog is open.
+     * @internal
+     */
+    createBackdrop() {
+        var _a;
+        const backdrop = document.createElement('div');
+        backdrop.classList.add('dialog-backdrop');
+        const styleElement = document.createElement('style');
+        styleElement.textContent = `
+      .dialog-backdrop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: var(--mds-color-theme-common-overlays-secondary-normal);
+        z-index: ${this.zIndex - 1};
+      }
+    `;
+        backdrop.appendChild(styleElement);
+        (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(backdrop);
+        this.backdropElement = backdrop;
+    }
     async firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
         this.setupTriggerListener();
-        this.utils.setupAriaAttributes();
+        this.setupAriaAttributes();
         this.style.zIndex = `${this.zIndex}`;
         DialogEventManager.onCreatedDialog(this);
         if (this.visible) {
@@ -212,7 +242,7 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
         }
         if (changedProperties.has('aria-label')
             || changedProperties.has('aria-labelledby')) {
-            this.utils.setupAriaAttributes();
+            this.setupAriaAttributes();
         }
     }
     /**
@@ -232,7 +262,7 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
             this.lastActiveElement = document.activeElement;
             this.enabledFocusTrap = true;
             this.enabledPreventScroll = true;
-            this.utils.createBackdrop();
+            this.createBackdrop();
             await this.handleCreateDialogFirstUpdate();
             // If we have a trigger element, update its attributes
             if (this.triggerElement) {
@@ -264,8 +294,9 @@ class Dialog extends FocusTrapMixin(CardAndDialogFooterMixin(Component)) {
     async handleCreateDialogFirstUpdate() {
         var _a, _b;
         if (this.visible) {
-            (_a = this.setFocusableElements) === null || _a === void 0 ? void 0 : _a.call(this);
+            // Wait for the first update to complete before setting focusable elements
             await this.updateComplete;
+            (_a = this.setFocusableElements) === null || _a === void 0 ? void 0 : _a.call(this);
             (_b = this.setInitialFocus) === null || _b === void 0 ? void 0 : _b.call(this);
         }
     }

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
@@ -512,8 +507,9 @@ class Popover extends FocusTrapMixin(Component) {
     async handleCreatePopoverFirstUpdate() {
         var _a, _b;
         if (this.visible && this.interactive) {
-            (_a = this.setFocusableElements) === null || _a === void 0 ? void 0 : _a.call(this);
+            // Wait for the first update to complete before setting focusable elements
             await this.updateComplete;
+            (_a = this.setFocusableElements) === null || _a === void 0 ? void 0 : _a.call(this);
             (_b = this.setInitialFocus) === null || _b === void 0 ? void 0 : _b.call(this);
         }
     }

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