@momentum-design/components 0.28.1 → 0.28.3

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

@@ -7,15 +7,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
+/* eslint-disable no-param-reassign */
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { v4 as uuidv4 } from 'uuid';
-import { NameMixin } from '../../utils/mixins/NameMixin';
-import { ValueMixin } from '../../utils/mixins/ValueMixin';
 import styles from './radio.styles';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 /**
  * Radio allow users to select single options from a list or turn an item/feature on or off.
@@ -47,11 +46,7 @@ import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwra
  *  when active and disabled
  *
  */
-class Radio extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper))) {
-    /** @internal */
-    get form() {
-        return this.internals.form;
-    }
+class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     constructor() {
         super();
         /**
@@ -66,41 +61,117 @@ class Radio extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)))
         * @default false
         */
         this.readonly = false;
-        /** @internal */
-        this.internals = this.attachInternals();
-        this.id = `mdc-input-${uuidv4()}`;
-    }
-    /**
-     * Updates the form value to reflect the current state of the radio.
-     * If checked, the value is set to the user-provided value.
-     * If unchecked, the value is set to null.
-     */
-    setFormValue() {
-        this.internals.setFormValue(this.checked ? this.value : null);
+        /**
+       * Automatically focus on the element when the page loads.
+       * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
+       * @default false
+       */
+        this.autofocus = false;
+        // Radio does not contain helpTextType property.
+        this.helpTextType = undefined;
     }
     firstUpdated() {
         this.updateTabIndex();
     }
     /**
-     * Returns all radios within the same group (name).
-     */
+   * Returns all radios within the same group (name).
+   */
     getAllRadiosWithinSameGroup() {
         return Array.from(document.querySelectorAll(`mdc-radio[name="${this.name}"]`));
     }
     /**
-     * The 'change' event does not bubble up through the shadow DOM as it was not composed.
-     * Therefore, we need to re-dispatch the same event to ensure it is propagated correctly.
-     * Read more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
-     */
+   * The 'change' event does not bubble up through the shadow DOM as it was not composed.
+   * Therefore, we need to re-dispatch the same event to ensure it is propagated correctly.
+   * Read more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
+   */
     dispatchChangeEvent(event) {
         const EventConstructor = event.constructor;
         this.dispatchEvent(new EventConstructor(event.type, event));
     }
+    /** @internal */
+    formResetCallback() {
+        const radios = this.getAllRadiosWithinSameGroup();
+        radios.forEach((radio) => {
+            radio.checked = false;
+        });
+        this.updateComplete.then(() => {
+            this.setActualFormValue();
+        }).catch((error) => {
+            if (this.onerror) {
+                this.onerror(error);
+            }
+        });
+    }
+    /** @internal */
+    formStateRestoreCallback(state) {
+        if (this.value === state && state !== '') {
+            this.checked = true;
+        }
+    }
+    /**
+   * @internal
+   */
+    setComponentValidity(isValid) {
+        if (isValid) {
+            this.internals.setValidity({});
+        }
+        else if (this.requiredLabel && !this.checked) {
+            if (this.validationMessage) {
+                this.inputElement.setCustomValidity(this.validationMessage);
+            }
+            else {
+                this.inputElement.setCustomValidity('');
+            }
+            this.setValidity();
+        }
+        this.updateTabIndex();
+    }
     /**
-     * Handles the change event on the radio element.
-     * This will toggle the state of the radio element.
-     * Dispatches the change event.
+     * Sets the validity of the group of radios.
+     * @param radios - Array of radios of the same group
+     * @param isValid - Boolean value to set the validity of the group
      */
+    setGroupValidity(radios, isValid) {
+        this.updateComplete.then(() => {
+            radios.forEach((radio) => {
+                radio.setComponentValidity(isValid);
+            });
+        }).catch((error) => {
+            if (this.onerror) {
+                this.onerror(error);
+            }
+        });
+    }
+    /**
+   * Updates the form value to reflect the current state of the radio.
+   * If checked, the value is set to the user-provided value.
+   * If unchecked, the value is set to null.
+   */
+    setActualFormValue() {
+        let actualValue = '';
+        if (this.checked) {
+            actualValue = !this.value ? 'on' : this.value;
+        }
+        else {
+            actualValue = null;
+        }
+        const radios = this.getAllRadiosWithinSameGroup();
+        if (this.checked) {
+            this.setGroupValidity(radios, true);
+        }
+        else {
+            const anyRequired = radios.some((r) => r.requiredLabel);
+            const anyChecked = !!radios.find((r) => r.checked);
+            const isInvalid = anyRequired && !anyChecked;
+            this.setGroupValidity(radios, !isInvalid);
+        }
+        this.internals.setFormValue(actualValue);
+    }
+    /**
+   * Handles the change event on the radio element.
+   * This will toggle the state of the radio element.
+   * Dispatches the change event.
+   */
     handleChange(event) {
         var _a;
         if (this.disabled || this.readonly)
@@ -113,7 +184,6 @@ class Radio extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)))
             */
             const radioElement = (_a = radio.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
             if (radioElement) {
-                // eslint-disable-next-line no-param-reassign
                 radio.checked = false;
                 radioElement.checked = false;
             }
@@ -123,26 +193,26 @@ class Radio extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)))
         if (inputElement) {
             inputElement.checked = true;
         }
-        this.updateTabIndex();
         this.dispatchChangeEvent(event);
     }
     /**
-     * Updates the state of the radio button at the specified index within the enabled radios.
-     * Focuses the radio button and triggers the change event if the radio button is not read-only.
-     *
-     * @param enabledRadios - An array of enabled radio buttons within the same group.
-     * @param index - The index of the radio button to be updated within the enabled radios array.
-     * @param event - The event that triggered the update.
-     */
+   * Updates the state of the radio button at the specified index within the enabled radios.
+   * Focuses the radio button and triggers the change event if the radio button is not read-only.
+   *
+   * @param enabledRadios - An array of enabled radio buttons within the same group.
+   * @param index - The index of the radio button to be updated within the enabled radios array.
+   * @param event - The event that triggered the update.
+   */
     updateRadio(enabledRadios, index, event) {
         var _a, _b;
         (_b = (_a = enabledRadios[index].shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.focus();
         enabledRadios[index].handleChange(event);
     }
     /**
-     * Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element.
-     */
+   * Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element.
+   */
     handleKeyDown(event) {
+        var _a;
         if (this.disabled)
             return;
         const radios = this.getAllRadiosWithinSameGroup();
@@ -158,13 +228,19 @@ class Radio extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)))
             const prevIndex = (currentIndex - 1 + enabledRadios.length) % enabledRadios.length;
             this.updateRadio(enabledRadios, prevIndex, event);
         }
+        else if (event.key === ' ') {
+            this.updateRadio(enabledRadios, currentIndex, event);
+        }
         this.updateTabIndex();
+        if (event.key === 'Enter') {
+            (_a = this.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
+        }
     }
     /**
-     * Update tab index for all radios in the same group (name)
-     * If any radio group is checked, it will have a tab index of 0
-     * If no radio group is checked, the first enabled radio will have a tab index of 0
-     */
+   * Update tab index for all radios in the same group (name)
+   * If any radio group is checked, it will have a tab index of 0
+   * If no radio group is checked, the first enabled radio will have a tab index of 0
+   */
     updateTabIndex() {
         const radios = this.getAllRadiosWithinSameGroup();
         const checked = radios.find((radio) => radio.checked);
@@ -186,7 +262,7 @@ class Radio extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)))
     update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('checked')) {
-            this.setFormValue();
+            this.setActualFormValue();
         }
     }
     render() {
@@ -199,8 +275,10 @@ class Radio extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)))
             id="${this.id}"
             type="radio"
             role="radio"
+            ?autofocus="${this.autofocus}"
             name="${ifDefined(this.name)}"
             value="${ifDefined(this.value)}"
+            ?required="${!!this.requiredLabel}"
             @change=${this.handleChange}
             @keydown=${this.handleKeyDown}
             ?checked=${this.checked}
@@ -221,8 +299,6 @@ class Radio extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)))
     `;
     }
 }
-/** @internal */
-Radio.formAssociated = true;
 Radio.styles = [...FormfieldWrapper.styles, ...styles];
 __decorate([
     property({ type: Boolean, reflect: true }),
@@ -232,4 +308,8 @@ __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
 ], Radio.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Radio.prototype, "autofocus", void 0);
 export default Radio;

package/dist/components/radio/radio.styles.js

@@ -158,5 +158,9 @@ const styles = [hostFitContentStyles, css `
     justify-content: center;
     gap: 0.25rem;
   }
+  :host::part(required-label){
+    display: none;
+  }
+
 `, ...hostFocusRingStyles(true)];
 export default styles;

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

@@ -1,6 +1,5 @@
 import { CSSResult } from 'lit';
 import FormfieldGroup from '../formfieldgroup';
-declare const RadioGroup_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/NameMixin").NameMixinInterface> & typeof FormfieldGroup;
 /**
  * `mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.
  * It can have a header text and a description. It enables users to select a single option from a set of options.
@@ -11,7 +10,13 @@ declare const RadioGroup_base: import("../../utils/mixins/index.types").Construc
  * @cssproperty --mdc-radiogroup-description-text-normal - color of the description text
  *
  */
-declare class RadioGroup extends RadioGroup_base {
+declare class RadioGroup extends FormfieldGroup {
+    /**
+     * Name of the radio group.
+     * They are used to group elements in a form together.
+     * @default ''
+     */
+    name: string;
     constructor();
     /**
      * Using name property to group the radio buttons together.

package/dist/components/radiogroup/radiogroup.component.js

@@ -1,4 +1,13 @@
-import { NameMixin } from '../../utils/mixins/NameMixin';
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { property } from 'lit/decorators.js';
 import FormfieldGroup from '../formfieldgroup';
 import { TAG_NAME as RADIO_TAGNAME } from '../radio/radio.constants';
 /**
@@ -11,9 +20,15 @@ import { TAG_NAME as RADIO_TAGNAME } from '../radio/radio.constants';
  * @cssproperty --mdc-radiogroup-description-text-normal - color of the description text
  *
  */
-class RadioGroup extends NameMixin(FormfieldGroup) {
+class RadioGroup extends FormfieldGroup {
     constructor() {
         super();
+        /**
+         * Name of the radio group.
+         * They are used to group elements in a form together.
+         * @default ''
+         */
+        this.name = '';
         // This is used to set the role of the component as `radiogroup`.
         /** @internal */
         this.isRadio = true;
@@ -24,8 +39,16 @@ class RadioGroup extends NameMixin(FormfieldGroup) {
      */
     firstUpdated() {
         var _a, _b, _c, _d, _e;
-        (_e = (_d = (_c = (_b = Array.from(((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('slot')) || [])) === null || _b === void 0 ? void 0 : _b.flatMap((slot) => slot.assignedElements({ flatten: true }))) === null || _c === void 0 ? void 0 : _c.filter((el) => el.tagName.toLowerCase() === RADIO_TAGNAME)) === null || _d === void 0 ? void 0 : _d.filter((radio) => !radio.hasAttribute('name'))) === null || _e === void 0 ? void 0 : _e.forEach((radio) => radio.setAttribute('name', this.name));
+        (_e = (_d = (_c = (_b = Array.from(((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('slot')) || [])) === null || _b === void 0 ? void 0 : _b.flatMap((slot) => slot.assignedElements({ flatten: true }))) === null || _c === void 0 ? void 0 : _c.filter((el) => el.tagName.toLowerCase() === RADIO_TAGNAME)) === null || _d === void 0 ? void 0 : _d.filter((radio) => !radio.hasAttribute('name'))) === null || _e === void 0 ? void 0 : _e.forEach((radio) => {
+            radio.setAttribute('name', this.name);
+            if (this.requiredLabel)
+                radio.setAttribute('required-label', this.requiredLabel);
+        });
     }
 }
 RadioGroup.styles = [...FormfieldGroup.styles];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], RadioGroup.prototype, "name", void 0);
 export default RadioGroup;

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

@@ -24,6 +24,14 @@ import ThemeProviderContext from './themeprovider.context';
  * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`
  * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,
  * default: `-0.25px` (this is to match the old CiscoSans)
+ * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,
+ * default: `"ss02" on`
+ * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.
+ * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.
+ * @cssproperty --mdc-themeprovider-scrollbar-thumb-hover-color - Option to override the color of the
+ * scrollbar thumb on hover. Applicable only on webkit browsers.
+ * @cssproperty --mdc-themeprovider-scrollbar-thumb-active-color - Option to override the color of the
+ * scrollbar thumb on press. Applicable only on webkit browsers.
  */
 declare class ThemeProvider extends Provider<ThemeProviderContext> {
     constructor();

package/dist/components/themeprovider/themeprovider.component.js

@@ -35,6 +35,14 @@ import styles from './themeprovider.styles';
  * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`
  * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,
  * default: `-0.25px` (this is to match the old CiscoSans)
+ * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,
+ * default: `"ss02" on`
+ * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.
+ * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.
+ * @cssproperty --mdc-themeprovider-scrollbar-thumb-hover-color - Option to override the color of the
+ * scrollbar thumb on hover. Applicable only on webkit browsers.
+ * @cssproperty --mdc-themeprovider-scrollbar-thumb-active-color - Option to override the color of the
+ * scrollbar thumb on press. Applicable only on webkit browsers.
  */
 class ThemeProvider extends Provider {
     constructor() {

package/dist/components/themeprovider/themeprovider.styles.js

@@ -9,6 +9,12 @@ const styles = css `
     /* Adjusting font feature settings for accessibility reasons */
     --mdc-themeprovider-font-feature-settings: "ss02" on;
 
+    /* Custom scrollbar variables */
+    --mdc-themeprovider-scrollbar-track-color: var(--mds-color-theme-background-secondary-normal);
+    --mdc-themeprovider-scrollbar-thumb-color: var(--mds-color-theme-scrollbar-button-normal);
+    --mdc-themeprovider-scrollbar-thumb-hover-color: var(--mds-color-theme-scrollbar-button-hover);
+    --mdc-themeprovider-scrollbar-thumb-active-color: var(--mds-color-theme-scrollbar-button-pressed);
+    
     color: var(--mdc-themeprovider-color-default);
     font-family: var(--mdc-themeprovider-font-family);
     font-weight: var(--mdc-themeprovider-font-weight);
@@ -16,5 +22,11 @@ const styles = css `
 
     font-feature-settings: var(--mdc-themeprovider-font-feature-settings);
   }
+   
+/** Scrollbar Theme for Chrome, Edge, and Firefox. This has limited support on other browsers.
+    https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color for more details */
+  * {
+    scrollbar-color: var(--mdc-themeprovider-scrollbar-thumb-color) var(--mdc-themeprovider-scrollbar-track-color);
+  }
 `;
 export default [styles];

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

@@ -1,7 +1,8 @@
 import { CSSResult, PropertyValueMap } from 'lit';
 import FormfieldWrapper from '../formfieldwrapper';
 import { ToggleSize } from './toggle.types';
-declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/NameMixin").NameMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ValueMixin").ValueMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
+declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
  * Toggle Component is an interactive control used to switch between two mutually exclusive options,
  * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections
@@ -38,7 +39,7 @@ declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<
  * @cssproperty --mdc-toggle-label-color-disabled - color of the toggle label and help text in disabled state
  *
  */
-declare class Toggle extends Toggle_base {
+declare class Toggle extends Toggle_base implements AssociatedFormControl {
     /**
     * Determines whether the toggle is active or inactive.
     * @default false
@@ -51,36 +52,54 @@ declare class Toggle extends Toggle_base {
      * @default default
      */
     size: ToggleSize;
-    /** @internal */
-    private internals;
-    /** @internal */
-    static formAssociated: boolean;
-    /** @internal */
-    get form(): HTMLFormElement | null;
+    /**
+   * Automatically focus on the element when the page loads.
+   * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
+   * @default false
+   */
+    autofocus: boolean;
     constructor();
+    /** @internal
+   * Resets the checkbox to its initial state.
+   * The checked property is set to false.
+   */
+    formResetCallback(): void;
+    /** @internal */
+    formStateRestoreCallback(state: string): void;
     /**
-     * Updates the form value to reflect the current state of the toggle.
-     * If toggle is switched on, the value is set to either the user-provided value or 'isActive' if no value is provided.
-     * If toggle is switched off, the value is set to null.
-     */
+   * Manages the required state of the checkbox.
+   * If the checkbox is not checked and the requiredLabel property is set, then the checkbox is invalid.
+   */
+    private manageRequired;
+    /**
+   * Updates the form value to reflect the current state of the toggle.
+   * If toggle is switched on, the value is set to either the user-provided value or 'isActive' if no value is provided.
+   * If toggle is switched off, the value is set to null.
+   */
     private setFormValue;
     /**
-     * Toggles the state of the toggle element.
-     * If the element is not disabled, then the checked property is toggled.
-     */
+   * Toggles the state of the toggle element.
+   * If the element is not disabled, then the checked property is toggled.
+   */
     private toggleState;
     /**
-     * Toggles the state of the toggle element.
-     * and dispatch the new change event.
-     */
+   * Handles the keydown event on the toggle element.
+   * When the user presses Enter, the form is submitted.
+   * @param event - The keyboard event.
+   */
+    private handleKeyDown;
+    /**
+   * Toggles the state of the toggle element.
+   * and dispatch the new change event.
+   */
     private handleChange;
     /**
-     * Sets the size attribute for the toggle component.
-     * If the provided size is not included in the TOGGLE_SIZE,
-     * it defaults to the value specified in DEFAULTS.SIZE.
-     *
-     * @param size - The size to set.
-     */
+   * Sets the size attribute for the toggle component.
+   * If the provided size is not included in the TOGGLE_SIZE,
+   * it defaults to the value specified in DEFAULTS.SIZE.
+   *
+   * @param size - The size to set.
+   */
     private setToggleSize;
     update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;