@momentum-design/components 0.138.0 → 0.139.1

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

@@ -13,6 +13,7 @@ declare const Checkbox_base: import("../../utils/mixins/index.types").Constructo
  * - Use `mdc-checkbox` when the user can select **any number** of options from a list (zero, one, or many).
  * - Use a single `mdc-checkbox` for a binary choice that does not need to take effect immediately (for example agreeing to terms before submitting a form).
  * - Use `mdc-checkbox` inside `mdc-formfieldgroup` when several checkboxes belong to the same labeled group.
+ * - Use `mdc-checkbox` with a leading visual when an avatar or icon helps users distinguish otherwise similar options.
  * 
  * **When not to use**
  * 
@@ -32,6 +33,8 @@ declare const Checkbox_base: import("../../utils/mixins/index.types").Constructo
  * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.
  * 
+ * @slot leading-visual - A decorative visual, such as an avatar or icon, displayed between the checkbox and text content.
+ * 
  * @csspart label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.
  * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
@@ -65,6 +68,8 @@ declare class Checkbox extends Checkbox_base implements AssociatedFormControl {
      * @default false
      */
     indeterminate: boolean;
+    /** @internal */
+    private hasLeadingVisual;
     /**
      * Determines the visual style of the helper text.
      * - **default**: Standard helper text appearance
@@ -114,6 +119,10 @@ declare class Checkbox extends Checkbox_base implements AssociatedFormControl {
      * @internal
      */
     handleChange(event: Event): void;
+    /** @internal */
+    private handleLeadingVisualClick;
+    /** @internal */
+    private handleLeadingVisualSlotChange;
     update(changedProperties: PropertyValues): void;
     /** @internal */
     private renderLabelAndHelperText;

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

@@ -8,7 +8,7 @@ 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 { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
@@ -32,6 +32,8 @@ import { CHECKBOX_VALIDATION } from './checkbox.constants';
  * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.
  *
+ * @slot leading-visual - A decorative visual, such as an avatar or icon, displayed between the checkbox and text content.
+ *
  * @csspart label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.
  * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
@@ -67,6 +69,8 @@ class Checkbox extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixi
          * @default false
          */
         this.indeterminate = false;
+        /** @internal */
+        this.hasLeadingVisual = false;
         /**
          * Determines the visual style of the helper text.
          * - **default**: Standard helper text appearance
@@ -201,6 +205,18 @@ class Checkbox extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixi
         const EventConstructor = event.constructor;
         this.dispatchEvent(new EventConstructor(event.type, event));
     }
+    /** @internal */
+    handleLeadingVisualClick() {
+        const hasBeenToggled = this.toggleState();
+        if (hasBeenToggled) {
+            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+        }
+    }
+    /** @internal */
+    handleLeadingVisualSlotChange(event) {
+        const slot = event.currentTarget;
+        this.hasLeadingVisual = slot.assignedElements({ flatten: true }).length > 0;
+    }
     update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('checked')) {
@@ -231,6 +247,7 @@ class Checkbox extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixi
         ?disabled="${this.disabled}"
         ?readonly="${this.readonly}"
         ?soft-disabled="${this.softDisabled}"
+        ?data-leading-visual="${this.hasLeadingVisual}"
       >
         <input
           id="${this.inputId}"
@@ -251,6 +268,12 @@ class Checkbox extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixi
           @keydown=${this.handleKeyDown}
         />
       </mdc-staticcheckbox>
+      <slot
+        name="leading-visual"
+        ?hidden="${!this.hasLeadingVisual}"
+        @click=${this.handleLeadingVisualClick}
+        @slotchange=${this.handleLeadingVisualSlotChange}
+      ></slot>
       ${this.renderLabelAndHelperText()}
     `;
     }
@@ -273,6 +296,10 @@ __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
 ], Checkbox.prototype, "indeterminate", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Checkbox.prototype, "hasLeadingVisual", void 0);
 __decorate([
     property({ type: String, reflect: true, attribute: 'help-text-type' }),
     __metadata("design:type", String)

package/dist/components/checkbox/checkbox.styles.js

@@ -39,6 +39,21 @@ const styles = [
       white-space: normal;
     }
 
+    slot[name='leading-visual'] {
+      align-self: center;
+      cursor: pointer;
+      display: flex;
+      margin-inline: 0.25rem;
+    }
+
+    slot[name='leading-visual'][hidden] {
+      display: none;
+    }
+
+    [part='static-checkbox'][data-leading-visual] {
+      align-self: center;
+    }
+
     :host::part(label),
     :host::part(checkbox-input) {
       cursor: pointer;

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

@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { ROLE } from '../../utils/roles';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import styles from './formfieldgroup.styles';
@@ -69,7 +69,9 @@ class FormfieldGroup extends FormfieldWrapper {
     }
     render() {
         return html `
-      <div part="group-header">${this.renderLabel()} ${this.renderHelperText()}</div>
+      ${this.label || this.helpText
+            ? html `<div part="group-header">${this.renderLabel()} ${this.renderHelperText()}</div>`
+            : nothing}
       <slot></slot>
     `;
     }

package/dist/custom-elements.json

@@ -173,8 +173,8 @@
               "attribute": "disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "AccordionButton",
-                "module": "components/accordionbutton/accordionbutton.component.js"
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
             },
             {
@@ -493,8 +493,8 @@
               "default": "undefined",
               "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "AccordionButton",
-                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
             },
             {
@@ -10802,6 +10802,44 @@
               "name": "static-checkbox"
             }
           ],
+          "slots": [
+            {
+              "description": "A decorative visual, such as an avatar or icon, displayed between the checkbox and text content.",
+              "name": "leading-visual"
+            },
+            {
+              "description": "Slot for the label element. If not provided, the `label` property will be used to render the label.",
+              "name": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.",
+              "name": "toggletip",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.",
+              "name": "help-icon",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.",
+              "name": "help-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -11504,7 +11542,7 @@
             "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
           "tagName": "mdc-checkbox",
-          "jsDoc": "/**\n * @tagname mdc-checkbox\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart checkbox-input - The native checkbox input element that provides the interactive functionality.\n * @csspart text-container - The container for the label and helper text elements.\n * @csspart static-checkbox - The staticcheckbox that provides the visual checkbox appearance.\n *\n * @cssstate checked - Active when the checkbox is checked.\n */",
+          "jsDoc": "/**\n * @tagname mdc-checkbox\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.\n *\n * @slot leading-visual - A decorative visual, such as an avatar or icon, displayed between the checkbox and text content.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart checkbox-input - The native checkbox input element that provides the interactive functionality.\n * @csspart text-container - The container for the label and helper text elements.\n * @csspart static-checkbox - The staticcheckbox that provides the visual checkbox appearance.\n *\n * @cssstate checked - Active when the checkbox is checked.\n */",
           "cssCustomStates": [
             {
               "name": "checked",
@@ -11512,40 +11550,6 @@
             }
           ],
           "customElement": true,
-          "slots": [
-            {
-              "description": "Slot for the label element. If not provided, the `label` property will be used to render the label.",
-              "name": "label",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.",
-              "name": "toggletip",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.",
-              "name": "help-icon",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.",
-              "name": "help-text",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            }
-          ],
           "cssProperties": [
             {
               "description": "Font size for the label text.",

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

@@ -11,6 +11,7 @@ import type { Events } from '../../components/checkbox/checkbox.types';
  * - Use `mdc-checkbox` when the user can select **any number** of options from a list (zero, one, or many).
  * - Use a single `mdc-checkbox` for a binary choice that does not need to take effect immediately (for example agreeing to terms before submitting a form).
  * - Use `mdc-checkbox` inside `mdc-formfieldgroup` when several checkboxes belong to the same labeled group.
+ * - Use `mdc-checkbox` with a leading visual when an avatar or icon helps users distinguish otherwise similar options.
  * 
  * **When not to use**
  * 
@@ -30,6 +31,8 @@ import type { Events } from '../../components/checkbox/checkbox.types';
  * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.
  * 
+ * @slot leading-visual - A decorative visual, such as an avatar or icon, displayed between the checkbox and text content.
+ * 
  * @csspart label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.
  * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.

package/dist/react/checkbox/index.js

@@ -14,6 +14,8 @@ import { TAG_NAME } from '../../components/checkbox/checkbox.constants';
  * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.
  *
+ * @slot leading-visual - A decorative visual, such as an avatar or icon, displayed between the checkbox and text content.
+ *
  * @csspart label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.
  * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.138.0",
+  "version": "0.139.1",
   "engines": {
     "node": ">=24.0.0",
     "npm": ">=8.0.0"