@momentum-design/components 0.129.30 → 0.129.32

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

@@ -2,7 +2,7 @@ import { CSSResult, PropertyValueMap } from 'lit';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
 import FormfieldWrapper from '../formfieldwrapper';
 import type { ToggleSize } from './toggle.types';
-declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ControlTypeMixin").ControlTypeMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
  * The Toggle component is an interactive control used to switch between two mutually exclusive states,
  * such as On/Off or Active/Inactive. It is commonly used in settings panels, forms, and preference selections
@@ -88,7 +88,7 @@ declare class Toggle extends Toggle_base implements AssociatedFormControl {
     private setFormValue;
     /**
      * Toggles the state of the toggle element.
-     * If the element is not disabled, soft-disabled, or readonly, then the checked property is toggled.
+     * If the element is not disabled, soft-disabled, or readonly, then the checked property is toggled if uncontrolled.
      * @internal
      */
     private toggleState;
@@ -119,5 +119,13 @@ declare class Toggle extends Toggle_base implements AssociatedFormControl {
     private renderLabelAndHelperText;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
 }
 export default Toggle;

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

@@ -12,6 +12,7 @@ import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { KEYS } from '../../utils/keys';
 import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
+import { ControlTypeMixin } from '../../utils/mixins/ControlTypeMixin';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import { ROLE } from '../../utils/roles';
@@ -63,7 +64,7 @@ import styles from './toggle.styles';
  * @csspart static-toggle - The statictoggle that provides the visual toggle switch appearance.
  * @csspart toggle-input - The native input element with switch role that provides the interactive functionality.
  */
-class Toggle extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
+class Toggle extends ControlTypeMixin(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)))) {
     constructor() {
         super(...arguments);
         /**
@@ -154,12 +155,14 @@ class Toggle extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
     }
     /**
      * Toggles the state of the toggle element.
-     * If the element is not disabled, soft-disabled, or readonly, then the checked property is toggled.
+     * If the element is not disabled, soft-disabled, or readonly, then the checked property is toggled if uncontrolled.
      * @internal
      */
     toggleState() {
         if (!this.disabled && !this.softDisabled && !this.readonly) {
-            this.checked = !this.checked;
+            if (this.controlType !== 'controlled') {
+                this.checked = !this.checked;
+            }
         }
     }
     /**
@@ -243,6 +246,7 @@ class Toggle extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
     }
 }
 Toggle.styles = [...FormfieldWrapper.styles, ...styles];
+Toggle.shadowRootOptions = { ...FormfieldWrapper.shadowRootOptions, delegatesFocus: true };
 __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)

package/dist/custom-elements.json

@@ -48506,6 +48506,32 @@
                 "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "controlType",
+              "type": {
+                "text": "ControlType | undefined"
+              },
+              "privacy": "public",
+              "description": "Indicates whether the component is controlled or uncontrolled.\n- 'controlled' it will not handle any interaction itself, e.g. toggling a checkbox.\n- 'uncontrolled' it will handle interactions\n- undefined it will get the value from controltypeprovider, or default to 'uncontrolled'",
+              "default": "undefined",
+              "attribute": "control-type",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ControlTypeMixin",
+                "module": "utils/mixins/ControlTypeMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "controlTypeProviderContext",
+              "privacy": "private",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "ControlTypeMixin",
+                "module": "utils/mixins/ControlTypeMixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "dataAriaLabel",
@@ -48735,6 +48761,15 @@
                 "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ ...FormfieldWrapper.shadowRootOptions, delegatesFocus: true }"
+            },
             {
               "kind": "field",
               "name": "size",
@@ -48892,6 +48927,19 @@
               "default": "default",
               "fieldName": "size"
             },
+            {
+              "name": "control-type",
+              "type": {
+                "text": "ControlType | undefined"
+              },
+              "description": "Indicates whether the component is controlled or uncontrolled.\n- 'controlled' it will not handle any interaction itself, e.g. toggling a checkbox.\n- 'uncontrolled' it will handle interactions\n- undefined it will get the value from controltypeprovider, or default to 'uncontrolled'",
+              "default": "undefined",
+              "fieldName": "controlType",
+              "inheritedFrom": {
+                "name": "ControlTypeMixin",
+                "module": "src/utils/mixins/ControlTypeMixin.ts"
+              }
+            },
             {
               "name": "auto-focus-on-mount",
               "type": {
@@ -49097,6 +49145,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "ControlTypeMixin",
+              "module": "/src/utils/mixins/ControlTypeMixin"
+            },
             {
               "name": "AutoFocusOnMountMixin",
               "module": "/src/utils/mixins/AutoFocusOnMountMixin"

package/package.json

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