@momentum-design/components 0.24.1 → 0.25.1

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

@@ -7,6 +7,8 @@ declare const Checkbox_base: import("../../utils/mixins/index.types").Constructo
  *
  * A checkbox component contains an optional label and an optional helper text.
  *
+ * To create a group of checkboxes, use the FormFieldGroup component.
+ *
  * @dependency mdc-icon
  *
  * @tagname mdc-checkbox
@@ -45,8 +47,6 @@ declare class Checkbox extends Checkbox_base {
     /** @internal */
     static formAssociated: boolean;
     /** @internal */
-    static shadowRootOptions: ShadowRootInit;
-    /** @internal */
     get form(): HTMLFormElement | null;
     constructor();
     /**

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

@@ -7,13 +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);
 };
-import { html, LitElement, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { NameMixin } from '../../utils/mixins/NameMixin';
 import { ValueMixin } from '../../utils/mixins/ValueMixin';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
+import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import { ICON_NAME } from './checkbox.constants';
 import styles from './checkbox.styles';
 /**
@@ -22,6 +23,8 @@ import styles from './checkbox.styles';
  *
  * A checkbox component contains an optional label and an optional helper text.
  *
+ * To create a group of checkboxes, use the FormFieldGroup component.
+ *
  * @dependency mdc-icon
  *
  * @tagname mdc-checkbox
@@ -137,6 +140,7 @@ class Checkbox extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)
           .indeterminate="${this.indeterminate}"
           .disabled="${this.disabled}"
           aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+          aria-describedby="${FORMFIELD_DEFAULTS.HELPER_TEXT_ID}"
           @change=${this.handleChange}
           @keydown=${this.handleKeyDown}
         />
@@ -151,11 +155,6 @@ class Checkbox extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)
 }
 /** @internal */
 Checkbox.formAssociated = true;
-/** @internal */
-Checkbox.shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-};
 Checkbox.styles = [...FormfieldWrapper.styles, ...styles];
 __decorate([
     property({ type: Boolean, reflect: true }),

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

@@ -0,0 +1,34 @@
+import type { CSSResult } from 'lit';
+import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
+declare const FormfieldGroup_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+/**
+ * `mdc-formfieldgroup` component, groups the form field components together.
+ * All passed in children will have a gap of 12px (0.75rem) each applied.
+ *
+ * This component is specifically for creating a `checkbox` group and a `toggle` group component.
+ * For the radiogroup use the RadioGroup component instead.
+ *
+ * The header text and description text are displayed above the items with accessible labels.<br/>
+ * The consumer has to provide atleast the header-text or the aria-label,
+ * like one of them <b>has</b> to be passed in always, otherwise its not accessible.
+ *
+ * The role will be set to `group`.
+ * The aria-label will be set with the data-aria-label property.
+ * The aria-labelledby will be set with the header id which contains the header text information.
+ * The aria-describedby will be set with the description id which contains the description text information.
+ *
+ * @tagname mdc-formfieldgroup
+ *
+ * @slot default - This is a default slot for checkbox or toggle components.
+ */
+declare class FormfieldGroup extends FormfieldGroup_base {
+    /**
+     * @internal
+     * This is used to set the role of the component as `radiogroup` if this is true and to 'group' if it is false.
+     */
+    protected isRadio: boolean;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default FormfieldGroup;

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

@@ -0,0 +1,57 @@
+import { html } from 'lit';
+import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
+import { ROLE } from './formfieldgroup.constants';
+import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
+import styles from './formfieldgroup.styles';
+/**
+ * `mdc-formfieldgroup` component, groups the form field components together.
+ * All passed in children will have a gap of 12px (0.75rem) each applied.
+ *
+ * This component is specifically for creating a `checkbox` group and a `toggle` group component.
+ * For the radiogroup use the RadioGroup component instead.
+ *
+ * The header text and description text are displayed above the items with accessible labels.<br/>
+ * The consumer has to provide atleast the header-text or the aria-label,
+ * like one of them <b>has</b> to be passed in always, otherwise its not accessible.
+ *
+ * The role will be set to `group`.
+ * The aria-label will be set with the data-aria-label property.
+ * The aria-labelledby will be set with the header id which contains the header text information.
+ * The aria-describedby will be set with the description id which contains the description text information.
+ *
+ * @tagname mdc-formfieldgroup
+ *
+ * @slot default - This is a default slot for checkbox or toggle components.
+ */
+class FormfieldGroup extends DataAriaLabelMixin(FormfieldWrapper) {
+    constructor() {
+        super();
+        /**
+         * @internal
+         * This is used to set the role of the component as `radiogroup` if this is true and to 'group' if it is false.
+         */
+        this.isRadio = false;
+        this.helpTextType = undefined;
+    }
+    render() {
+        var _a;
+        return html `
+      <div
+        part="container"
+        role="${this.isRadio ? ROLE.RADIOGROUP : ROLE.GROUP}"
+        aria-labelledby="${FORMFIELD_DEFAULTS.LABEL_ID}"
+        aria-describedby="${FORMFIELD_DEFAULTS.HELPER_TEXT_ID}"
+        aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+      >
+        <div part="group-header">
+          ${this.renderLabel()}
+          ${this.renderHelperText()}
+        </div>
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+FormfieldGroup.styles = [...FormfieldWrapper.styles, ...styles];
+export default FormfieldGroup;

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

@@ -0,0 +1,6 @@
+declare const TAG_NAME: "mdc-formfieldgroup";
+declare const ROLE: {
+    readonly RADIOGROUP: "radiogroup";
+    readonly GROUP: "group";
+};
+export { ROLE, TAG_NAME };

package/dist/components/formfieldgroup/formfieldgroup.constants.js

@@ -0,0 +1,7 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('formfieldgroup');
+const ROLE = {
+    RADIOGROUP: 'radiogroup',
+    GROUP: 'group',
+};
+export { ROLE, TAG_NAME };

package/dist/components/formfieldgroup/formfieldgroup.styles.js

@@ -0,0 +1,20 @@
+import { css } from 'lit';
+const styles = css `
+
+  :host::part(container) {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  :host::part(group-header) {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  :host::part(label-text){
+    font-weight: bold;
+  }
+`;
+export default [styles];

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

@@ -0,0 +1,8 @@
+import FormfieldGroup from './formfieldgroup.component';
+import '../text';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-formfieldgroup']: FormfieldGroup;
+    }
+}
+export default FormfieldGroup;

package/dist/components/formfieldgroup/index.js

@@ -0,0 +1,5 @@
+import FormfieldGroup from './formfieldgroup.component';
+import { TAG_NAME } from './formfieldgroup.constants';
+import '../text';
+FormfieldGroup.register(TAG_NAME);
+export default FormfieldGroup;

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

@@ -64,7 +64,7 @@ declare class FormfieldWrapper extends FormfieldWrapper_base {
      * renders the mdc-help-text container that contains the helpertext icon and helpertext.
      * @returns void
      */
-    protected renderHelperText(): import("lit-html").TemplateResult<1>;
+    protected renderHelperText(): import("lit-html").TemplateResult<1> | typeof nothing;
     static styles: Array<CSSResult>;
 }
 export default FormfieldWrapper;

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

@@ -8,13 +8,13 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { html, nothing } from 'lit';
-import { v4 as uuidv4 } from 'uuid';
 import { property } from 'lit/decorators.js';
-import styles from './formfieldwrapper.styles';
+import { v4 as uuidv4 } from 'uuid';
 import { Component } from '../../models';
+import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { DEFAULTS, MDC_TEXT_OPTIONS } from './formfieldwrapper.constants';
+import styles from './formfieldwrapper.styles';
 import { getHelperIcon } from './formfieldwrapper.utils';
-import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 /**
  * formfieldwrapper is a component that contains the label and helper/validation text
  *  that can be configured in various ways to suit different use cases (most of the input related components).
@@ -47,7 +47,7 @@ class FormfieldWrapper extends DisabledMixin(Component) {
         if (!this.label) {
             return nothing;
         }
-        return html `<label for="${this.id}" class="mdc-label" part="label">${this.label}</label>`;
+        return html `<label id="${DEFAULTS.LABEL_ID}" for="${this.id}" class="mdc-label" part="label">${this.label}</label>`;
     }
     renderRequiredLabel() {
         if (!this.requiredLabel) {
@@ -89,6 +89,7 @@ class FormfieldWrapper extends DisabledMixin(Component) {
         }
         return html `
       <mdc-text
+        id="${DEFAULTS.HELPER_TEXT_ID}"
         part="help-text"
         tagname=${MDC_TEXT_OPTIONS.TAGNAME}
         type=${MDC_TEXT_OPTIONS.TYPE}
@@ -113,6 +114,9 @@ class FormfieldWrapper extends DisabledMixin(Component) {
      * @returns void
      */
     renderHelperText() {
+        if (!this.helpText) {
+            return nothing;
+        }
         return html `<div class="mdc-help-text" part="mdc-help-text">
       <slot name="help-icon">${this.renderHelpTextIcon()}</slot>
       <slot name="help-text">${this.renderHelpText()}</slot>

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

@@ -8,6 +8,8 @@ declare const VALIDATION: {
 };
 declare const DEFAULTS: {
     readonly VALIDATION: "default";
+    readonly HELPER_TEXT_ID: "helper-text-id";
+    readonly LABEL_ID: "label-id";
 };
 declare const MDC_TEXT_OPTIONS: {
     TAGNAME: "span";

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

@@ -10,6 +10,8 @@ const VALIDATION = {
 };
 const DEFAULTS = {
     VALIDATION: VALIDATION.DEFAULT,
+    HELPER_TEXT_ID: 'helper-text-id',
+    LABEL_ID: 'label-id',
 };
 const MDC_TEXT_OPTIONS = {
     TAGNAME: VALID_TEXT_TAGS.SPAN,

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

@@ -14,6 +14,7 @@ import styles from './input.styles';
 import FormfieldWrapper from '../formfieldwrapper';
 import { NameMixin } from '../../utils/mixins/NameMixin';
 import { AUTO_CAPITALIZE, DEFAULTS, PREFIX_TEXT_OPTIONS } from './input.constants';
+import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import { ValueMixin } from '../../utils/mixins/ValueMixin';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 /**
@@ -313,6 +314,7 @@ class Input extends DataAriaLabelMixin(ValueMixin(NameMixin(FormfieldWrapper)))
             ?readonly="${this.readonly}"
             ?required="${!!this.requiredLabel}"
             type="text"
+            aria-describedby="${FORMFIELD_DEFAULTS.HELPER_TEXT_ID}"
             placeholder=${ifDefined(this.placeholder)}
             minlength=${ifDefined(this.minlength)}
             maxlength=${ifDefined(this.maxlength)}

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

@@ -15,6 +15,7 @@ import { ValueMixin } from '../../utils/mixins/ValueMixin';
 import styles from './radio.styles';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+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.
  * These are often used in forms, settings, and selection in lists.
@@ -203,6 +204,7 @@ class Radio extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)))
             ?disabled=${this.disabled}
             class="mdc-radio__input"
             aria-checked="${this.checked}"
+            aria-describedby="${FORMFIELD_DEFAULTS.HELPER_TEXT_ID}"
             aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
           />
           <span class="mdc-radio__icon"></span>

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

@@ -8,6 +8,8 @@ declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<
  * where users need to enable or disable a feature.
  * It contains an optional label and an optional helper text.
  *
+ * To create a group of toggles, use the FormFieldGroup component.
+ *
  * Note: It internally renders a checkbox styled as a toggle switch.
  *
  * @dependency mdc-icon

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

@@ -14,6 +14,7 @@ import styles from './toggle.styles';
 import FormfieldWrapper from '../formfieldwrapper';
 import { ValueMixin } from '../../utils/mixins/ValueMixin';
 import { NameMixin } from '../../utils/mixins/NameMixin';
+import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import { DEFAULTS, ICON_NAME, ICON_SIZE_IN_REM, TOGGLE_SIZE } from './toggle.constants';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 /**
@@ -22,6 +23,8 @@ import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
  * where users need to enable or disable a feature.
  * It contains an optional label and an optional helper text.
  *
+ * To create a group of toggles, use the FormFieldGroup component.
+ *
  * Note: It internally renders a checkbox styled as a toggle switch.
  *
  * @dependency mdc-icon
@@ -134,6 +137,7 @@ class Toggle extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)))
             value="${ifDefined(this.value)}"
             .checked="${this.checked}"
             .disabled="${this.disabled}"
+            aria-describedby="${FORMFIELD_DEFAULTS.HELPER_TEXT_ID}"
             aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
             tabindex="${this.disabled ? -1 : 0}"
             @change="${this.handleChange}"