@momentum-design/components 0.110.1 → 0.110.2

package/dist/custom-elements.json

@@ -477,157 +477,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/accordiongroup/accordiongroup.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
-          "name": "AccordionGroup",
-          "cssProperties": [
-            {
-              "description": "The border color of the entire accordiongroup",
-              "name": "--mdc-accordiongroup-border-color"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot can contain the `accordion` or `accordionbutton` components.",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "The size of the accordion item.",
-              "default": "'small'",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "Variant"
-              },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
-              "default": "'stacked'",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "allowMultiple",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, multiple accordion items can be visible at the same time.",
-              "attribute": "allow-multiple",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleAccordionExpanded",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  },
-                  "description": "The event object from the 'shown' event."
-                }
-              ],
-              "description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
-            },
-            {
-              "kind": "method",
-              "name": "setChildrenAccordionAttributes",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "attributeName",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The name of the attribute to set."
-                },
-                {
-                  "name": "attributeValue",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The value to set the attribute to."
-                }
-              ],
-              "description": "Sets the given attribute on all child accordion or accordionbutton components."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "The size of the accordion item.",
-              "default": "'small'",
-              "fieldName": "size"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "Variant"
-              },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
-              "default": "'stacked'",
-              "fieldName": "variant"
-            },
-            {
-              "name": "allow-multiple",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, multiple accordion items can be visible at the same time.",
-              "fieldName": "allowMultiple"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-accordiongroup",
-          "jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "AccordionGroup",
-            "module": "components/accordiongroup/accordiongroup.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/accordionbutton/accordionbutton.component.js",
@@ -968,6 +817,157 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/accordiongroup/accordiongroup.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
+          "name": "AccordionGroup",
+          "cssProperties": [
+            {
+              "description": "The border color of the entire accordiongroup",
+              "name": "--mdc-accordiongroup-border-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot can contain the `accordion` or `accordionbutton` components.",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'stacked'",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "allowMultiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, multiple accordion items can be visible at the same time.",
+              "attribute": "allow-multiple",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleAccordionExpanded",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The event object from the 'shown' event."
+                }
+              ],
+              "description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
+            },
+            {
+              "kind": "method",
+              "name": "setChildrenAccordionAttributes",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "attributeName",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The name of the attribute to set."
+                },
+                {
+                  "name": "attributeValue",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The value to set the attribute to."
+                }
+              ],
+              "description": "Sets the given attribute on all child accordion or accordionbutton components."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "fieldName": "size"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'stacked'",
+              "fieldName": "variant"
+            },
+            {
+              "name": "allow-multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, multiple accordion items can be visible at the same time.",
+              "fieldName": "allowMultiple"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-accordiongroup",
+          "jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "AccordionGroup",
+            "module": "components/accordiongroup/accordiongroup.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/alertchip/alertchip.component.js",
@@ -33675,18 +33675,82 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "slider component, which ...",
+          "description": "Slider component is used to select a value or range of values from within a defined range.\nIt provides a visual representation of the current value(s) and allows users to adjust the value(s) by dragging the thumb(s) along the track.\nIt can be used as a single slider or a range slider. This is set by the boolean attribute `range`\nIf the step value is more than 1, tick marks are shown to represent the steps between the min and max values. The slider thumb will snap to the nearest tick mark.",
           "name": "Slider",
           "cssProperties": [
             {
-              "description": "Description of the CSS custom property",
-              "name": "--custom-property-name"
+              "description": "The color of the slider thumb",
+              "name": "--mdc-slider-thumb-color"
+            },
+            {
+              "description": "The color of the slider thumb border",
+              "name": "--mdc-slider-thumb-border-color"
+            },
+            {
+              "description": "The size of the slider thumb",
+              "name": "--mdc-slider-thumb-size"
+            },
+            {
+              "description": "The height of the slider input",
+              "name": "--mdc-slider-input-size"
+            },
+            {
+              "description": "The size of the slider tick marks",
+              "name": "--mdc-slider-tick-size"
+            },
+            {
+              "description": "The height of the slider track",
+              "name": "--mdc-slider-track-height"
+            },
+            {
+              "description": "The color of the slider tick marks",
+              "name": "--mdc-slider-tick-color"
+            },
+            {
+              "description": "The color of the slider progress",
+              "name": "--mdc-slider-progress-color"
+            },
+            {
+              "description": "The color of the slider track",
+              "name": "--mdc-slider-track-color"
+            },
+            {
+              "description": "The left position of the slider tooltip",
+              "name": "--mdc-slider-tooltip-left"
+            },
+            {
+              "description": "The left position of the slider tick marks",
+              "name": "--mdc-slider-tick-left"
             }
           ],
-          "slots": [
+          "cssParts": [
             {
-              "description": "This is a default/unnamed slot",
-              "name": "default"
+              "description": "The tooltip of the slider",
+              "name": "slider-tooltip"
+            },
+            {
+              "description": "The track of the slider",
+              "name": "slider-track"
+            },
+            {
+              "description": "The wrapper around the slider input(s)",
+              "name": "slider-wrapper"
+            },
+            {
+              "description": "The container for the tick marks",
+              "name": "slider-ticks"
+            },
+            {
+              "description": "The individual tick marks",
+              "name": "slider-tick"
+            },
+            {
+              "description": "The input element of the slider",
+              "name": "slider-input"
+            },
+            {
+              "description": "The label of the slider",
+              "name": "slider-label"
             }
           ],
           "members": [
@@ -33697,8 +33761,31 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether or not to show a value range. When false, the slider displays a slide-able handle for the value property; when true, it displays slide-able handles for the valueStart and valueEnd properties.",
-              "attribute": "range"
+              "description": "Indicates whether it is a range slider. When true, the slider displays two handles for selecting a range of values.\nWhen false, the slider displays a single handle for selecting a single value.",
+              "attribute": "range",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "min",
+              "type": {
+                "text": "number"
+              },
+              "description": "The slider minimum value.",
+              "default": "0",
+              "attribute": "min",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "description": "The slider maximum value.",
+              "default": "100",
+              "attribute": "max",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -33706,8 +33793,9 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "Whether the slider is disabled.",
-              "attribute": "disabled"
+              "description": "Whether the slider is disabled. When true, the slider cannot be interacted with.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -33716,7 +33804,8 @@
                 "text": "boolean | undefined"
               },
               "description": "Acts similar to disabled, but component is focusable and tooltip is shown on focus.",
-              "attribute": "soft-disabled"
+              "attribute": "soft-disabled",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -33725,7 +33814,8 @@
                 "text": "string | undefined"
               },
               "description": "Icon that represents the minimum value; ex: muted speaker.",
-              "attribute": "leading-icon"
+              "attribute": "leading-icon",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -33734,27 +33824,8 @@
                 "text": "string | undefined"
               },
               "description": "Icon that represents the maximum value; ex: speaker with full volume.",
-              "attribute": "trailing-icon"
-            },
-            {
-              "kind": "field",
-              "name": "min",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The slider minimum value.",
-              "attribute": "min"
-            },
-            {
-              "kind": "field",
-              "name": "max",
-              "type": {
-                "text": "number"
-              },
-              "default": "100",
-              "description": "The slider maximum value.",
-              "attribute": "max"
+              "attribute": "trailing-icon",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -33763,7 +33834,8 @@
                 "text": "number | undefined"
               },
               "description": "The slider value displayed when range is false.",
-              "attribute": "value"
+              "attribute": "value",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -33772,7 +33844,8 @@
                 "text": "number | undefined"
               },
               "description": "The slider start value displayed when range is true.",
-              "attribute": "value-start"
+              "attribute": "value-start",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -33781,7 +33854,8 @@
                 "text": "number | undefined"
               },
               "description": "The slider end value displayed when range is true.",
-              "attribute": "value-end"
+              "attribute": "value-end",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -33789,9 +33863,10 @@
               "type": {
                 "text": "number"
               },
+              "description": "The step between values. If defined and greater than 1, we will show tick marks and the stepper will snap to the nearest tick mark.",
               "default": "1",
-              "description": "The step between values. This will show tick marks and the stepper will snap to the nearest tick mark.",
-              "attribute": "step"
+              "attribute": "step",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -33800,7 +33875,8 @@
                 "text": "string | undefined"
               },
               "description": "It represents the label for slider component.",
-              "attribute": "label"
+              "attribute": "label",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -33809,7 +33885,8 @@
                 "text": "string | undefined"
               },
               "description": "The label text is shown below the slider (on leading side) representing the minimum starting value of the slider.",
-              "attribute": "label-start"
+              "attribute": "label-start",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -33818,124 +33895,325 @@
                 "text": "string | undefined"
               },
               "description": "The label text is shown below the slider (on trailing side) representing the maximum starting value of the slider.",
-              "attribute": "label-end"
+              "attribute": "label-end",
+              "reflects": true
             },
             {
               "kind": "field",
               "name": "valueLabel",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "An optional label for the slider's value displayed when range is false; if not set, the label is the value itself.",
-              "attribute": "value-label"
+              "description": "An optional label for the slider's value displayed when range is false; if not set, the label is the 'value' itself.",
+              "attribute": "value-label",
+              "reflects": true
             },
             {
               "kind": "field",
               "name": "valueLabelStart",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "An optional label for the slider's start value displayed when range is true; if not set, the label is the valueStart itself.",
-              "attribute": "value-label-start"
+              "description": "An optional label for the slider's start value displayed when range is true; if not set, the label is the 'valueStart' itself.",
+              "attribute": "value-label-start",
+              "reflects": true
             },
             {
               "kind": "field",
               "name": "valueLabelEnd",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "An optional label for the slider's end value displayed when range is true; if not set, the label is the valueEnd itself.",
-              "attribute": "value-label-end"
+              "description": "An optional label for the slider's end value displayed when range is true; if not set, the label is the 'valueEnd' itself.",
+              "attribute": "value-label-end",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "ariaLabelStart",
+              "name": "name",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Aria label for the slider's start handle displayed when range is true.",
-              "attribute": "aria-label-start"
+              "description": "Name attribute for the slider (single value).",
+              "attribute": "name",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "ariaValuetextStart",
+              "name": "nameStart",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Aria value text for the slider's start value displayed when range is true.",
-              "attribute": "aria-valuetext-start"
+              "description": "Name attribute for the slider's start handle when range is true.",
+              "attribute": "name-start",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "ariaLabelEnd",
+              "name": "nameEnd",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Aria label for the slider's end handle displayed when range is true.",
-              "attribute": "aria-label-end"
+              "description": "Name attribute for the slider's end handle when range is true.",
+              "attribute": "name-end",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "ariaValuetextEnd",
+              "name": "dataAriaLabel",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Aria value text for the slider's end value displayed when range is true.",
-              "attribute": "aria-valuetext-end"
+              "description": "Aria label for the slider's handle displayed when range is false.",
+              "attribute": "data-aria-label",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "startAriaLabel",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Name attribute for the slider (single value).",
-              "attribute": "name"
+              "description": "Aria label for the slider's start handle displayed when range is true.",
+              "attribute": "start-aria-label",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "nameStart",
+              "name": "endAriaLabel",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Name attribute for the slider's start handle (range).",
-              "attribute": "name-start"
+              "description": "Aria label for the slider's end handle displayed when range is true.",
+              "attribute": "end-aria-label",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "nameEnd",
+              "name": "dataAriaValuetext",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Name attribute for the slider's end handle (range).",
-              "attribute": "name-end"
+              "description": "Aria value text for the slider's value displayed when range is false.",
+              "attribute": "data-aria-valuetext",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "dataAriaValuetext",
+              "name": "startAriaValuetext",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Aria value text for the slider's value displayed when range is false.",
-              "attribute": "data-aria-valuetext"
+              "description": "Aria value text for the slider's start value displayed when range is true.",
+              "attribute": "start-aria-valuetext",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "dataAriaLabel",
+              "name": "endAriaValueText",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Aria label for the slider's handle displayed when range is false.",
-              "attribute": "data-aria-label"
+              "description": "Aria value text for the slider's end value displayed when range is true.",
+              "attribute": "end-aria-valuetext",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "preventChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The event to prevent."
+                }
+              ],
+              "description": "Prevents default behavior for mouse and keyboard events.\nThis prevents user interaction with the slider when it is soft-disabled."
+            },
+            {
+              "kind": "method",
+              "name": "setSoftDisabled",
+              "privacy": "private",
+              "description": "Sets the soft-disabled state for the slider.\nApplies the appropriate ARIA attributes."
+            },
+            {
+              "kind": "method",
+              "name": "initializeRangeSlider",
+              "privacy": "private",
+              "description": "Initializes the range slider by setting default values for the start and end handles.\nUpdates the slider's input elements to reflect the current values."
+            },
+            {
+              "kind": "method",
+              "name": "handleInput",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "thumbIndex",
+                  "type": {
+                    "text": "0 | 1"
+                  },
+                  "description": "0 for start thumb, 1 for end thumb."
+                }
+              ],
+              "description": "Handles input changes for either the start or end thumb of the range slider.\nEnsures thumbs do not cross over each other."
+            },
+            {
+              "kind": "method",
+              "name": "iconTemplate",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "icon",
+                  "type": {
+                    "text": "string | undefined"
+                  },
+                  "description": "The name of the icon to render."
+                },
+                {
+                  "name": "part",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The part attribute for the icon element."
+                }
+              ],
+              "description": "Renders an icon element.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "tooltipTemplate",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "label",
+                  "type": {
+                    "text": "string | undefined"
+                  },
+                  "description": "The label to display in the tooltip."
+                },
+                {
+                  "name": "source",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The source of the tooltip (e.g., 'start' or 'end')."
+                }
+              ],
+              "description": "Renders a visual representation of tooltip element and places it exactly above the slider thumb.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updateTrackStyling",
+              "description": "Updates the styling of the slider track.\nThe progress value is calculated and updated using appropriate tokens\nIn a range slider, both thumbs are considered.\nThe track is filled between the two thumbs."
+            },
+            {
+              "kind": "method",
+              "name": "onInput",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The input event."
+                }
+              ],
+              "description": "Handles the input event for the single value slider."
+            },
+            {
+              "kind": "method",
+              "name": "onChange",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The change event."
+                }
+              ],
+              "description": "Handles the change event for the single value slider."
+            },
+            {
+              "kind": "method",
+              "name": "onChangeStart",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The change event."
+                }
+              ],
+              "description": "Handles the change event for the start thumb of the range slider."
+            },
+            {
+              "kind": "method",
+              "name": "onChangeEnd",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The change event."
+                }
+              ],
+              "description": "Handles the change event for the end thumb of the range slider."
+            },
+            {
+              "kind": "method",
+              "name": "getTickStyles",
+              "parameters": [
+                {
+                  "name": "tick",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The tick value."
+                }
+              ],
+              "description": "Get the styles for the tick marks.\nSince the ticks are placed above the slider, we need to hide the tick that is placed exactly where the slider thumb is.\nBased on this condition, it renders the styles appropriately.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderTicks",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the slider value is committed",
+              "reactName": "onChange"
+            },
+            {
+              "description": "Fired when the slider value changes",
+              "name": "input",
+              "reactName": "onInput"
             }
           ],
           "attributes": [
@@ -33945,15 +34223,33 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether or not to show a value range. When false, the slider displays a slide-able handle for the value property; when true, it displays slide-able handles for the valueStart and valueEnd properties.",
+              "description": "Indicates whether it is a range slider. When true, the slider displays two handles for selecting a range of values.\nWhen false, the slider displays a single handle for selecting a single value.",
               "fieldName": "range"
             },
+            {
+              "name": "min",
+              "type": {
+                "text": "number"
+              },
+              "description": "The slider minimum value.",
+              "default": "0",
+              "fieldName": "min"
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "description": "The slider maximum value.",
+              "default": "100",
+              "fieldName": "max"
+            },
             {
               "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "Whether the slider is disabled.",
+              "description": "Whether the slider is disabled. When true, the slider cannot be interacted with.",
               "fieldName": "disabled"
             },
             {
@@ -33980,24 +34276,6 @@
               "description": "Icon that represents the maximum value; ex: speaker with full volume.",
               "fieldName": "trailingIcon"
             },
-            {
-              "name": "min",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The slider minimum value.",
-              "fieldName": "min"
-            },
-            {
-              "name": "max",
-              "type": {
-                "text": "number"
-              },
-              "default": "100",
-              "description": "The slider maximum value.",
-              "fieldName": "max"
-            },
             {
               "name": "value",
               "type": {
@@ -34027,8 +34305,8 @@
               "type": {
                 "text": "number"
               },
+              "description": "The step between values. If defined and greater than 1, we will show tick marks and the stepper will snap to the nearest tick mark.",
               "default": "1",
-              "description": "The step between values. This will show tick marks and the stepper will snap to the nearest tick mark.",
               "fieldName": "step"
             },
             {
@@ -34058,107 +34336,98 @@
             {
               "name": "value-label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "An optional label for the slider's value displayed when range is false; if not set, the label is the value itself.",
+              "description": "An optional label for the slider's value displayed when range is false; if not set, the label is the 'value' itself.",
               "fieldName": "valueLabel"
             },
             {
               "name": "value-label-start",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "An optional label for the slider's start value displayed when range is true; if not set, the label is the valueStart itself.",
+              "description": "An optional label for the slider's start value displayed when range is true; if not set, the label is the 'valueStart' itself.",
               "fieldName": "valueLabelStart"
             },
             {
               "name": "value-label-end",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "An optional label for the slider's end value displayed when range is true; if not set, the label is the valueEnd itself.",
+              "description": "An optional label for the slider's end value displayed when range is true; if not set, the label is the 'valueEnd' itself.",
               "fieldName": "valueLabelEnd"
             },
             {
-              "name": "aria-label-start",
+              "name": "name",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Aria label for the slider's start handle displayed when range is true.",
-              "fieldName": "ariaLabelStart"
+              "description": "Name attribute for the slider (single value).",
+              "fieldName": "name"
             },
             {
-              "name": "aria-valuetext-start",
+              "name": "name-start",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Aria value text for the slider's start value displayed when range is true.",
-              "fieldName": "ariaValuetextStart"
+              "description": "Name attribute for the slider's start handle when range is true.",
+              "fieldName": "nameStart"
             },
             {
-              "name": "aria-label-end",
+              "name": "name-end",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Aria label for the slider's end handle displayed when range is true.",
-              "fieldName": "ariaLabelEnd"
+              "description": "Name attribute for the slider's end handle when range is true.",
+              "fieldName": "nameEnd"
             },
             {
-              "name": "aria-valuetext-end",
+              "name": "data-aria-label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Aria value text for the slider's end value displayed when range is true.",
-              "fieldName": "ariaValuetextEnd"
+              "description": "Aria label for the slider's handle displayed when range is false.",
+              "fieldName": "dataAriaLabel"
             },
             {
-              "name": "name",
+              "name": "start-aria-label",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Name attribute for the slider (single value).",
-              "fieldName": "name"
+              "description": "Aria label for the slider's start handle displayed when range is true.",
+              "fieldName": "startAriaLabel"
             },
             {
-              "name": "name-start",
+              "name": "end-aria-label",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Name attribute for the slider's start handle (range).",
-              "fieldName": "nameStart"
+              "description": "Aria label for the slider's end handle displayed when range is true.",
+              "fieldName": "endAriaLabel"
             },
             {
-              "name": "name-end",
+              "name": "data-aria-valuetext",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Name attribute for the slider's end handle (range).",
-              "fieldName": "nameEnd"
+              "description": "Aria value text for the slider's value displayed when range is false.",
+              "fieldName": "dataAriaValuetext"
             },
             {
-              "name": "data-aria-valuetext",
+              "name": "start-aria-valuetext",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Aria value text for the slider's value displayed when range is false.",
-              "fieldName": "dataAriaValuetext"
+              "description": "Aria value text for the slider's start value displayed when range is true.",
+              "fieldName": "startAriaValuetext"
             },
             {
-              "name": "data-aria-label",
+              "name": "end-aria-valuetext",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Aria label for the slider's handle displayed when range is false.",
-              "fieldName": "dataAriaLabel"
+              "description": "Aria value text for the slider's end value displayed when range is true.",
+              "fieldName": "endAriaValueText"
             }
           ],
           "superclass": {
@@ -34166,7 +34435,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-slider",
-          "jsDoc": "/**\n * slider component, which ...\n *\n * @tagname mdc-slider\n *\n * @slot default - This is a default/unnamed slot\n *\n * @cssproperty --custom-property-name - Description of the CSS custom property\n */",
+          "jsDoc": "/**\n * Slider component is used to select a value or range of values from within a defined range.\n * It provides a visual representation of the current value(s) and allows users to adjust the value(s) by dragging the thumb(s) along the track.\n * It can be used as a single slider or a range slider. This is set by the boolean attribute `range`\n * If the step value is more than 1, tick marks are shown to represent the steps between the min and max values. The slider thumb will snap to the nearest tick mark.\n *\n * @tagname mdc-slider\n *\n * @dependency mdc-icon\n *\n * @csspart slider-tooltip - The tooltip of the slider\n * @csspart slider-track - The track of the slider\n * @csspart slider-wrapper - The wrapper around the slider input(s)\n * @csspart slider-ticks - The container for the tick marks\n * @csspart slider-tick - The individual tick marks\n * @csspart slider-input - The input element of the slider\n * @csspart slider-label - The label of the slider\n *\n * @event input - Fired when the slider value changes\n * @event change - Fired when the slider value is committed\n *\n * @cssproperty --mdc-slider-thumb-color - The color of the slider thumb\n * @cssproperty --mdc-slider-thumb-border-color - The color of the slider thumb border\n * @cssproperty --mdc-slider-thumb-size - The size of the slider thumb\n * @cssproperty --mdc-slider-input-size - The height of the slider input\n * @cssproperty --mdc-slider-tick-size - The size of the slider tick marks\n * @cssproperty --mdc-slider-track-height - The height of the slider track\n * @cssproperty --mdc-slider-tick-color - The color of the slider tick marks\n * @cssproperty --mdc-slider-progress-color - The color of the slider progress\n * @cssproperty --mdc-slider-track-color - The color of the slider track\n * @cssproperty --mdc-slider-tooltip-left - The left position of the slider tooltip\n * @cssproperty --mdc-slider-tick-left - The left position of the slider tick marks\n */",
           "customElement": true
         }
       ],