@momentum-design/components 0.80.0 → 0.80.2

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

@@ -8,7 +8,11 @@ import Component from '../../components/checkbox';
  *
  * 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/react/checkbox/index.js

@@ -10,7 +10,11 @@ import { TAG_NAME } from '../../components/checkbox/checkbox.constants';
  *
  * 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/react/formfieldgroup/index.d.ts

@@ -17,6 +17,11 @@ import Component from '../../components/formfieldgroup';
  *
  * @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 const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;

package/dist/react/formfieldgroup/index.js

@@ -20,6 +20,11 @@ import { TAG_NAME } from '../../components/formfieldgroup/formfieldgroup.constan
  *
  * @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.
  */
 const reactWrapper = createComponent({

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

@@ -6,7 +6,11 @@ import Component from '../../components/formfieldwrapper';
  *
  * @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 const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;

package/dist/react/formfieldwrapper/index.js

@@ -9,7 +9,11 @@ import { TAG_NAME } from '../../components/formfieldwrapper/formfieldwrapper.con
  *
  * @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
+ *
  *
  */
 const reactWrapper = createComponent({

package/dist/react/index.d.ts

@@ -44,10 +44,10 @@ export { default as Popover } from './popover';
 export { default as Presence } from './presence';
 export { default as Progressbar } from './progressbar';
 export { default as Progressspinner } from './progressspinner';
-export { default as Radio } from './radio';
 export { default as RadioGroup } from './radiogroup';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Searchfield } from './searchfield';
+export { default as Radio } from './radio';
 export { default as Select } from './select';
 export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';

package/dist/react/index.js

@@ -44,10 +44,10 @@ export { default as Popover } from './popover';
 export { default as Presence } from './presence';
 export { default as Progressbar } from './progressbar';
 export { default as Progressspinner } from './progressspinner';
-export { default as Radio } from './radio';
 export { default as RadioGroup } from './radiogroup';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Searchfield } from './searchfield';
+export { default as Radio } from './radio';
 export { default as Select } from './select';
 export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';

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

@@ -22,6 +22,7 @@ import Component from '../../components/input';
  * @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/react/input/index.js

@@ -24,6 +24,7 @@ import { TAG_NAME } from '../../components/input/input.constants';
  * @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/react/radio/index.d.ts

@@ -5,7 +5,12 @@ import Component from '../../components/radio';
  * 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/react/radio/index.js

@@ -7,7 +7,12 @@ import { TAG_NAME } from '../../components/radio/radio.constants';
  * 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/react/select/index.d.ts

@@ -6,9 +6,11 @@ import Component from '../../components/select';
  * 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
  *

package/dist/react/select/index.js

@@ -8,9 +8,11 @@ import { TAG_NAME } from '../../components/select/select.constants';
  * 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
  *

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

@@ -29,10 +29,10 @@ import Component from '../../components/textarea';
  * @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/react/textarea/index.js

@@ -31,10 +31,10 @@ import { TAG_NAME } from '../../components/textarea/textarea.constants';
  * @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/react/toggle/index.d.ts

@@ -10,8 +10,11 @@ import Component from '../../components/toggle';
  *
  * 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/react/toggle/index.js

@@ -12,8 +12,11 @@ import { TAG_NAME } from '../../components/toggle/toggle.constants';
  *
  * 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/utils/mixins/CardAndDialogFooterMixin.d.ts

@@ -1,9 +1,9 @@
 import { LitElement, TemplateResult } from 'lit';
 import type { Constructor } from './index.types';
 export declare class CardAndDialogFooterMixinInterface {
-    footerLink?: Array<HTMLElement>;
-    footerButtonPrimary?: Array<HTMLElement>;
-    footerButtonSecondary?: Array<HTMLElement>;
+    protected footerLink?: Array<HTMLElement>;
+    protected footerButtonPrimary?: Array<HTMLElement>;
+    protected footerButtonSecondary?: Array<HTMLElement>;
     protected updateFooterButtonColors(variant: string): void;
     protected handleFooterSlot(tagname: string, variant?: string): void;
     protected renderFooter(): TemplateResult;

package/dist/utils/mixins/CardAndDialogFooterMixin.js

@@ -15,11 +15,11 @@ import { BUTTON_COLORS, BUTTON_VARIANTS } from '../../components/button/button.c
 export const CardAndDialogFooterMixin = (superClass) => {
     class InnerMixinClass extends superClass {
         /**
-      * Updates the color of the footer buttons based on the variant.
-      * If the variant is promotional, the color is promotional, else default.
-      *
-      * @internal
-      */
+         * Updates the color of the footer buttons based on the variant.
+         * If the variant is promotional, the color is promotional, else default.
+         *
+         * @internal
+         */
         updateFooterButtonColors(variant) {
             const footerButtons = [...(this.footerButtonPrimary || []), ...(this.footerButtonSecondary || [])];
             footerButtons === null || footerButtons === void 0 ? void 0 : footerButtons.forEach((button) => {
@@ -32,13 +32,13 @@ export const CardAndDialogFooterMixin = (superClass) => {
             });
         }
         /**
-        * Filters and renders only the following content into the footer section and removes anything other than it
-        * - One mdc-link element in the footer-link slot
-        * - One secondary variant of the mdc-button element in the footer-button-secondary slot
-        * - One primary variant of the mdc-button element in the footer-button-primary slot
-        *
-        * @internal
-        */
+         * Filters and renders only the following content into the footer section and removes anything other than it
+         * - One mdc-link element in the footer-link slot
+         * - One secondary variant of the mdc-button element in the footer-button-secondary slot
+         * - One primary variant of the mdc-button element in the footer-button-primary slot
+         *
+         * @internal
+         */
         handleFooterSlot(tagname, variant) {
             var _a, _b, _c;
             let arrayItems = [];
@@ -78,10 +78,14 @@ export const CardAndDialogFooterMixin = (superClass) => {
         renderFooter() {
             return html `<div part="footer">
         <slot name="footer-link" @slotchange=${() => this.handleFooterSlot(DEFAULTS.LINK)}></slot>
-        <slot name="footer-button-secondary" 
-        @slotchange=${() => this.handleFooterSlot(DEFAULTS.BUTTON, BUTTON_VARIANTS.SECONDARY)}></slot>
-        <slot name="footer-button-primary" 
-        @slotchange=${() => this.handleFooterSlot(DEFAULTS.BUTTON, BUTTON_VARIANTS.PRIMARY)}></slot>
+        <slot
+          name="footer-button-secondary"
+          @slotchange=${() => this.handleFooterSlot(DEFAULTS.BUTTON, BUTTON_VARIANTS.SECONDARY)}
+        ></slot>
+        <slot
+          name="footer-button-primary"
+          @slotchange=${() => this.handleFooterSlot(DEFAULTS.BUTTON, BUTTON_VARIANTS.PRIMARY)}
+        ></slot>
       </div>`;
         }
     }

package/package.json

@@ -41,5 +41,5 @@
     "lottie-web": "^5.12.2",
     "uuid": "^11.0.5"
   },
-  "version": "0.80.0"
+  "version": "0.80.2"
 }

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

@@ -1,7 +0,0 @@
-import type Dialog from './dialog.component';
-export declare class DialogUtils {
-    private dialog;
-    constructor(dialog: Dialog);
-    setupAriaAttributes(): void;
-    createBackdrop(): void;
-}

package/dist/components/dialog/dialog.utils.js

@@ -1,33 +0,0 @@
-export class DialogUtils {
-    constructor(dialog) {
-        this.dialog = dialog;
-    }
-    setupAriaAttributes() {
-        if (this.dialog.headerText && !this.dialog.ariaLabel && !this.dialog.ariaLabelledby) {
-            this.dialog.setAttribute('aria-labelledby', this.dialog.headerText);
-        }
-        else if (!this.dialog.headerText && !this.dialog.ariaLabel && !this.dialog.ariaLabelledby) {
-            this.dialog.setAttribute('aria-labelledby', this.dialog.triggerId);
-        }
-    }
-    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.dialog.zIndex - 1};
-      }
-    `;
-        backdrop.appendChild(styleElement);
-        (_a = this.dialog.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(backdrop);
-        this.dialog.backdropElement = backdrop;
-    }
-}