@momentum-design/components 0.39.4 → 0.39.6

package/dist/components/progressbar/progressbar.styles.js

@@ -0,0 +1,86 @@
+import { css } from 'lit';
+const styles = [css `
+:host {
+  --mdc-progressbar-background-color: var(--mds-color-theme-control-indicator-inactive-normal);
+  --mdc-progressbar-active-background-color: var(--mds-color-theme-control-active-normal);
+  --mdc-progressbar-success-color: var(--mds-color-theme-indicator-stable);
+  --mdc-progressbar-error-color: var(--mds-color-theme-indicator-attention);
+  --mdc-progressbar-height: 0.25rem;
+  --mdc-progressbar-border: 0.5px solid transparent;
+  --mdc-progressbar-border-radius: var(--mdc-progressbar-height);
+
+  --mdc-progressbar-label-color: var(--mds-color-theme-text-primary-normal);
+  --mdc-progressbar-label-line-height: var(--mds-font-lineheight-body-midsize);
+  --mdc-progressbar-label-font-size: var(--mds-font-size-body-midsize);
+  --mdc-progressbar-label-font-weight: var(--mds-font-weight-regular);
+  --mdc-progressbar-help-text-color: var(--mds-color-theme-text-secondary-normal);
+
+  display: block;
+  width: 100%;
+}
+
+:host::part(label-container) {
+  display: flex;
+  justify-content: space-between;
+}
+
+:host::part(inline-label-container) {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+:host::part(progress-container) {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: var(--mdc-progressbar-height);
+  margin: 0.5rem 0;
+}
+
+:host::part(gap) {
+  gap: 0.25rem;
+}
+
+:host([variant="inline"])::part(label) {
+  overflow: unset;
+}
+
+:host::part(progress-bar) {
+  height: 100%;
+  background-color: var(--mdc-progressbar-active-background-color);
+  border-radius: var(--mdc-progressbar-border-radius);
+  transition: width 0.3s ease-in-out;
+}
+
+:host::part(success) {
+  background-color: var(--mdc-progressbar-success-color);
+}
+
+:host::part(error) {
+  background-color: var(--mdc-progressbar-error-color);
+}
+
+:host::part(remaining) {
+  height: 100%;
+  flex-grow: 1;
+  background-color: var(--mdc-progressbar-background-color);
+  border-radius: var(--mdc-progressbar-border-radius);
+}
+
+:host::part(label-text), :host::part(help-text), :host::part(percentage) {
+  font-size: var(--mdc-progressbar-label-font-size);
+  font-weight: var(--mdc-progressbar-label-font-weight);
+  line-height: var(--mdc-progressbar-label-line-height);
+}
+
+:host([help-text-type="default"])::part(help-text) {
+  color: var(--mdc-progressbar-help-text-color);
+}
+
+@media (forced-colors: active) {
+  :host::part(progress-container), :host::part(progress-bar) {
+    border: var(--mdc-progressbar-border);
+  }
+`];
+export default styles;

package/dist/components/progressbar/progressbar.types.d.ts

@@ -0,0 +1,3 @@
+import type { ValueOf } from '../../utils/types';
+import { VARIANT } from './progressbar.constants';
+export type Variant = ValueOf<typeof VARIANT>;

package/dist/components/progressbar/progressbar.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -51,7 +51,7 @@ declare class Radio extends Radio_base implements AssociatedFormControl {
    * @default false
    */
     autofocus: boolean;
-    constructor();
+    connectedCallback(): void;
     firstUpdated(): void;
     /**
    * Returns all radios within the same group (name).

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

@@ -48,7 +48,7 @@ import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwra
  */
 class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     constructor() {
-        super();
+        super(...arguments);
         /**
         * Determines whether the radio is selected or unselected.
         *
@@ -75,6 +75,9 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
       ${this.renderHelperText()}
     </div>`;
         };
+    }
+    connectedCallback() {
+        super.connectedCallback();
         // Radio does not contain helpTextType property.
         this.helpTextType = undefined;
     }

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

@@ -112,7 +112,7 @@ declare class Tab extends Tab_base {
      * @internal
      */
     private prevIconName?;
-    constructor();
+    connectedCallback(): void;
     /**
      * Modifies the icon name based on the active state.
      * If the tab is active, the icon name is suffixed with '-filled'.

package/dist/components/tab/tab.component.js

@@ -106,7 +106,7 @@ import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
  */
 class Tab extends IconNameMixin(Buttonsimple) {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * Tab can have three variants:
          * - `glass`
@@ -117,6 +117,9 @@ class Tab extends IconNameMixin(Buttonsimple) {
          * @default pill
          */
         this.variant = DEFAULTS.VARIANT;
+    }
+    connectedCallback() {
+        super.connectedCallback();
         this.role = 'tab';
         this.softDisabled = undefined;
         this.size = undefined;

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

@@ -115,7 +115,6 @@ declare class Textarea extends Textarea_base {
     inputElement: HTMLTextAreaElement;
     private characterLimitExceedingFired;
     protected get textarea(): HTMLTextAreaElement;
-    constructor();
     connectedCallback(): void;
     private setTextareaValidity;
     /** @internal */

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

@@ -67,12 +67,8 @@ import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
  * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused
  */
 class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
-    get textarea() {
-        return this.inputElement;
-    }
     constructor() {
-        var _a;
-        super();
+        super(...arguments);
         /**
          * readonly attribute of the textarea field. If true, the textarea field is read-only.
          * @default false
@@ -109,11 +105,15 @@ class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
          */
         this.autofocus = false;
         this.characterLimitExceedingFired = false;
-        // Set the default value to the textarea field if the value is set through the text content directly
-        this.value = ((_a = this.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || this.value;
+    }
+    get textarea() {
+        return this.inputElement;
     }
     connectedCallback() {
+        var _a;
         super.connectedCallback();
+        // Set the default value to the textarea field if the value is set through the text content directly
+        this.value = ((_a = this.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || this.value;
         this.updateComplete.then(() => {
             if (this.textarea) {
                 this.textarea.checkValidity();

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

@@ -58,7 +58,7 @@ declare class Toggle extends Toggle_base implements AssociatedFormControl {
    * @default false
    */
     autofocus: boolean;
-    constructor();
+    connectedCallback(): void;
     /** @internal
    * Resets the checkbox to its initial state.
    * The checked property is set to false.

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

@@ -54,7 +54,7 @@ import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
  */
 class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     constructor() {
-        super();
+        super(...arguments);
         /**
         * Determines whether the toggle is active or inactive.
         * @default false
@@ -73,6 +73,9 @@ class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
        * @default false
        */
         this.autofocus = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
         // Toggle does not contain helpTextType property.
         this.helpTextType = undefined;
     }

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

@@ -31,7 +31,7 @@ declare class Tooltip extends Popover {
      */
     tooltipType: TooltipType;
     private defaultSlotNodes;
-    constructor();
+    connectedCallback(): void;
     /**
      * @returns The tooltip text.
      */

package/dist/components/tooltip/tooltip.component.js

@@ -34,7 +34,7 @@ import { POPOVER_PLACEMENT } from '../popover/popover.constants';
  */
 class Tooltip extends Popover {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * The type of tooltip.
          * - **description** sets aria-describedby on the trigger component which refers to the tooltip id.
@@ -43,8 +43,10 @@ class Tooltip extends Popover {
          * @default 'description'
          */
         this.tooltipType = DEFAULTS.TOOLTIP_TYPE;
+    }
+    connectedCallback() {
+        super.connectedCallback();
         this.backdrop = false;
-        this.color = DEFAULTS.COLOR;
         this.delay = DEFAULTS.DELAY;
         this.focusTrap = false;
         this.hideOnBlur = true;
@@ -55,7 +57,6 @@ class Tooltip extends Popover {
         this.role = 'tooltip';
         this.showArrow = true;
         this.trigger = 'mouseenter focusin';
-        this.visible = false;
         this.enabledFocusTrap = false;
         this.enabledPreventScroll = false;
         this.flip = true;

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

@@ -6,7 +6,6 @@ declare const TOOLTIP_TYPES: {
 };
 declare const DEFAULTS: {
     BACKDROP: boolean;
-    COLOR: "tonal";
     DELAY: string;
     OFFSET: number;
     PLACEMENT: "top";

package/dist/components/tooltip/tooltip.constants.js

@@ -1,5 +1,5 @@
 import utils from '../../utils/tag-name';
-import { COLOR, POPOVER_PLACEMENT } from '../popover/popover.constants';
+import { POPOVER_PLACEMENT } from '../popover/popover.constants';
 const TAG_NAME = utils.constructTagName('tooltip');
 const TOOLTIP_TYPES = {
     DESCRIPTION: 'description',
@@ -8,7 +8,6 @@ const TOOLTIP_TYPES = {
 };
 const DEFAULTS = {
     BACKDROP: false,
-    COLOR: COLOR.TONAL,
     DELAY: '0,0',
     OFFSET: 4,
     PLACEMENT: POPOVER_PLACEMENT.TOP,