@arcgis/map-components 5.0.0-next.124 → 5.0.0-next.126

package/dist/docs/docs.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2026-01-14T04:44:14",
+  "timestamp": "2026-01-15T04:41:46",
   "compiler": {
     "name": "@arcgis/lumina-compiler",
-    "version": "5.0.0-next.124",
+    "version": "5.0.0-next.126",
     "typescriptVersion": "5.9.3"
   },
   "components": [
@@ -3963,29 +3963,19 @@
         },
         {
           "name": "defaultCreateOptions",
-          "type": "BookmarkOptions",
+          "type": "{\n    captureRotation?: boolean | undefined;\n    captureScale?: boolean | undefined;\n    captureTimeExtent?: boolean | undefined;\n    captureViewpoint?: boolean | undefined;\n    screenshotSettings?: Partial<UserSettings> | undefined;\n    takeScreenshot?: boolean | undefined;\n}",
           "complexType": {
-            "original": "BookmarkOptions",
-            "resolved": "BookmarkOptions",
-            "references": {
-              "BookmarkOptions": {
-                "location": "local",
-                "path": "dist/components/arcgis-bookmarks/types.d.ts",
-                "id": "notImplemented"
-              }
-            }
+            "original": "{\n    captureRotation?: boolean | undefined;\n    captureScale?: boolean | undefined;\n    captureTimeExtent?: boolean | undefined;\n    captureViewpoint?: boolean | undefined;\n    screenshotSettings?: Partial<UserSettings> | undefined;\n    takeScreenshot?: boolean | undefined;\n}",
+            "resolved": "{\n    captureRotation?: boolean | undefined;\n    captureScale?: boolean | undefined;\n    captureTimeExtent?: boolean | undefined;\n    captureViewpoint?: boolean | undefined;\n    screenshotSettings?: Partial<UserSettings> | undefined;\n    takeScreenshot?: boolean | undefined;\n}",
+            "references": {}
           },
           "mutable": true,
           "reflectToAttr": false,
-          "docs": "Specifies how new bookmarks will be created if [showAddBookmarkButton](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-bookmarks/#showAddBookmarkButton) is set to `true`.\nCan be used to enable or disable taking screenshots or capturing the bookmark's viewpoint based on the current\nview when a bookmark is created. See [BookmarkOptions](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Bookmarks-BookmarksViewModel.html#BookmarkOptions)\nfor the full list of options.",
+          "docs": "Specifies how new bookmarks will be created if [showAddBookmarkButton](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-bookmarks/#showAddBookmarkButton) is set to `true`.\nCan be used to enable or disable taking screenshots or capturing the bookmark's viewpoint based on the current\nview when a bookmark is created.",
           "docsTags": [
             {
               "name": "example",
               "text": "```js\nconst bookmarksElement = document.querySelector(\"arcgis-bookmarks\");\nbookmarksElement.showAddBookmarkButton = true;\nbookmarksElement.defaultCreateOptions = {\n  // whenever a new bookmark is created, a 100x100 px\n  // screenshot of the view will be taken and the rotation, scale, and extent\n  // of the view will not be set as the viewpoint of the new bookmark\n  takeScreenshot: true,\n  captureViewpoint: false,\n  captureTimeExtent: false, // the time extent will not be saved in the bookmark\n  screenshotSettings: {\n    width: 100,\n    height: 100\n  }\n};\n```"
-            },
-            {
-              "name": "since",
-              "text": "4.18"
             }
           ],
           "values": [],
@@ -3994,27 +3984,16 @@
         },
         {
           "name": "defaultEditOptions",
-          "type": "BookmarkOptions",
+          "type": "{\n    captureRotation?: boolean | undefined;\n    captureScale?: boolean | undefined;\n    captureTimeExtent?: boolean | undefined;\n    captureViewpoint?: boolean | undefined;\n    screenshotSettings?: Partial<UserSettings> | undefined;\n    takeScreenshot?: boolean | undefined;\n}",
           "complexType": {
-            "original": "BookmarkOptions",
-            "resolved": "BookmarkOptions",
-            "references": {
-              "BookmarkOptions": {
-                "location": "local",
-                "path": "dist/components/arcgis-bookmarks/types.d.ts",
-                "id": "notImplemented"
-              }
-            }
+            "original": "{\n    captureRotation?: boolean | undefined;\n    captureScale?: boolean | undefined;\n    captureTimeExtent?: boolean | undefined;\n    captureViewpoint?: boolean | undefined;\n    screenshotSettings?: Partial<UserSettings> | undefined;\n    takeScreenshot?: boolean | undefined;\n}",
+            "resolved": "{\n    captureRotation?: boolean | undefined;\n    captureScale?: boolean | undefined;\n    captureTimeExtent?: boolean | undefined;\n    captureViewpoint?: boolean | undefined;\n    screenshotSettings?: Partial<UserSettings> | undefined;\n    takeScreenshot?: boolean | undefined;\n}",
+            "references": {}
           },
           "mutable": true,
           "reflectToAttr": false,
-          "docs": "Specifies how bookmarks will be edited, if [showEditBookmarkButton](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-bookmarks/#showEditBookmarkButton) is set to `true`.\nCan be used to enable or disable taking screenshots or capturing the bookmark's viewpoint based on the current\nview when a bookmark is edited. See [BookmarkOptions](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Bookmarks-BookmarksViewModel.html#BookmarkOptions)\nfor the full list of options.",
-          "docsTags": [
-            {
-              "name": "since",
-              "text": "4.18"
-            }
-          ],
+          "docs": "Specifies how bookmarks will be edited, if [showEditBookmarkButton](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-bookmarks/#showEditBookmarkButton) is set to `true`.\nCan be used to enable or disable taking screenshots or capturing the bookmark's viewpoint based on the current\nview when a bookmark is edited.",
+          "docsTags": [],
           "values": [],
           "optional": true,
           "required": false
@@ -4134,10 +4113,6 @@
           "reflectToAttr": false,
           "docs": "This function provides the ability to override either the\n[MapView goTo()](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#goTo) or\n[SceneView goTo()](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html#goTo) methods.",
           "docsTags": [
-            {
-              "name": "since",
-              "text": "4.8"
-            },
             {
               "name": "see",
               "text": "[MapView#goTo()](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#goTo)"
@@ -4773,18 +4748,12 @@
       "events": [
         {
           "event": "arcgisBookmarkEdit",
-          "detail": "BookmarksViewModelBookmarkEditEvent",
+          "detail": "{ bookmark: Bookmark; }",
           "bubbles": true,
           "complexType": {
-            "original": "BookmarksViewModelBookmarkEditEvent",
-            "resolved": "BookmarksViewModelBookmarkEditEvent",
-            "references": {
-              "BookmarksViewModelBookmarkEditEvent": {
-                "location": "import",
-                "path": "@arcgis/core/widgets/Bookmarks/BookmarksViewModel.d.ts",
-                "id": "notImplemented"
-              }
-            }
+            "original": "{ bookmark: Bookmark; }",
+            "resolved": "{ bookmark: Bookmark; }",
+            "references": {}
           },
           "cancelable": true,
           "composed": true,
@@ -4802,18 +4771,12 @@
         },
         {
           "event": "arcgisBookmarkSelect",
-          "detail": "BookmarksViewModelBookmarkSelectEvent",
+          "detail": "{ bookmark: Bookmark; }",
           "bubbles": true,
           "complexType": {
-            "original": "BookmarksViewModelBookmarkSelectEvent",
-            "resolved": "BookmarksViewModelBookmarkSelectEvent",
-            "references": {
-              "BookmarksViewModelBookmarkSelectEvent": {
-                "location": "import",
-                "path": "@arcgis/core/widgets/Bookmarks/BookmarksViewModel.d.ts",
-                "id": "notImplemented"
-              }
-            }
+            "original": "{ bookmark: Bookmark; }",
+            "resolved": "{ bookmark: Bookmark; }",
+            "references": {}
           },
           "cancelable": true,
           "composed": true,
@@ -4825,7 +4788,7 @@
             },
             {
               "name": "example",
-              "text": "```html\n<arcgis-expand expanded>\n <arcgis-bookmarks></arcgis-bookmarks>\n</arcgis-expand>\n```\n\n```js\nconst bookmarksElement = document.querySelector(\"arcgis-bookmarks\");\nconst expandElement = document.querySelector(\"arcgis-expand\");\n\n// collapses the associated Expand component\n// when a bookmark is selected\nbookmarksElement.addEventListener(\"arcgisBookmarkSelect\", (event) => {\n  expandElement.expanded = false;\n});\n```"
+              "text": "```html\n<arcgis-expand expanded>\n <arcgis-bookmarks></arcgis-bookmarks>\n</arcgis-expand>\n\n<script>\n  const bookmarksElement = document.querySelector(\"arcgis-bookmarks\");\n  const expandElement = document.querySelector(\"arcgis-expand\");\n\n  // collapses the associated Expand component\n  // when a bookmark is selected\n  bookmarksElement.addEventListener(\"arcgisBookmarkSelect\", (event) => {\n    expandElement.expanded = false;\n  });\n</script>\n```"
             }
           ]
         },
@@ -4933,7 +4896,12 @@
           "attr": "heading-level",
           "reflectToAttr": false,
           "docs": "Indicates the heading level to use for the component title.",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "4.28"
+            }
+          ],
           "default": "3",
           "values": [
             {
@@ -4975,8 +4943,13 @@
           "mutable": true,
           "attr": "hide-disciplines",
           "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
+          "docs": "Hides the disciplines tree from the UI.",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "5.0"
+            }
+          ],
           "default": "false",
           "values": [
             {
@@ -4997,8 +4970,13 @@
           "mutable": true,
           "attr": "hide-levels",
           "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
+          "docs": "Hides the levels filter from the UI.",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "5.0"
+            }
+          ],
           "default": "false",
           "values": [
             {
@@ -5019,8 +4997,13 @@
           "mutable": true,
           "attr": "hide-phases",
           "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
+          "docs": "Hides the phases filter from the UI.",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "5.0"
+            }
+          ],
           "default": "false",
           "values": [
             {
@@ -5100,11 +5083,11 @@
           },
           "mutable": true,
           "reflectToAttr": false,
-          "docs": "An array of layers of type [BuildingSceneLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-BuildingSceneLayer.html) that are added to the component for exploration.\n\n[Read more](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BuildingExplorer.html#layers)",
+          "docs": "A list of layers of type [BuildingSceneLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-BuildingSceneLayer.html) that are added to the component for exploration.\n\nThe component UI is only displayed when this property is set. In case of multiple layers, the component will display and apply the filters on all layers.",
           "docsTags": [
             {
               "name": "since",
-              "text": "5.0.0"
+              "text": "5.0"
             }
           ],
           "values": [],
@@ -5126,7 +5109,7 @@
           "docsTags": [
             {
               "name": "since",
-              "text": "5.0.0"
+              "text": "5.0"
             }
           ],
           "values": [
@@ -5147,11 +5130,11 @@
           },
           "mutable": true,
           "reflectToAttr": false,
-          "docs": "Indicates whether the level picker and filter is disabled.",
+          "docs": "Indicates whether the level picker and filter is disabled. If `true`, the filters expression won't be used to filter a [BuildingSceneLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-BuildingSceneLayer.html).",
           "docsTags": [
             {
               "name": "since",
-              "text": "5.0.0"
+              "text": "5.0"
             },
             {
               "name": "readonly",
@@ -5183,11 +5166,11 @@
           },
           "mutable": true,
           "reflectToAttr": false,
-          "docs": "The selectable building levels.",
+          "docs": "List of the building level values which are allowed for the levels filter.",
           "docsTags": [
             {
               "name": "since",
-              "text": "5.0.0"
+              "text": "5.0"
             }
           ],
           "values": [],
@@ -5209,7 +5192,7 @@
           "docsTags": [
             {
               "name": "since",
-              "text": "5.0.0"
+              "text": "5.0"
             }
           ],
           "values": [
@@ -5230,11 +5213,11 @@
           },
           "mutable": true,
           "reflectToAttr": false,
-          "docs": "Indicates whether the phase picker and filter is disabled.",
+          "docs": "Indicates whether the phase picker and filter is disabled. If `true`, the filters expression won't be used to filter a [BuildingSceneLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-BuildingSceneLayer.html).",
           "docsTags": [
             {
               "name": "since",
-              "text": "5.0.0"
+              "text": "5.0"
             },
             {
               "name": "readonly",
@@ -5266,11 +5249,11 @@
           },
           "mutable": true,
           "reflectToAttr": false,
-          "docs": "The selectable construction phases.",
+          "docs": "List of the building phase values which are allowed for the phases filter.",
           "docsTags": [
             {
               "name": "since",
-              "text": "5.0.0"
+              "text": "5.0"
             }
           ],
           "values": [],
@@ -5424,7 +5407,7 @@
           "docsTags": [
             {
               "name": "since",
-              "text": "5.0.0"
+              "text": "5.0"
             }
           ]
         },
@@ -5443,7 +5426,7 @@
           "docsTags": [
             {
               "name": "since",
-              "text": "5.0.0"
+              "text": "5.0"
             }
           ]
         },
@@ -35102,11 +35085,23 @@
       "overview": "",
       "readme": "",
       "usage": {},
-      "docs": "",
+      "docs": "The Measurement component groups and manages multiple measurement tools and allows you to easily switch between them using\nthe [activeTool](#activeTool) property. The tools correspond to the measurement components for area and distance in 2D\n[arcgis-area-measurement-2d](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-area-measurement-2d/), [arcgis-distance-measurement-2d](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-distance-measurement-2d/) and in 3D\n[arcgis-area-measurement-3d](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-area-measurement-3d/), [arcgis-direct-line-measurement-3d](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-direct-line-measurement-3d/).\n\nThis component follows a composite pattern that allows developers to configure the UI to best match their specific requirements.\nThe measurement tools, placements, and icons can all be configured, which offers great flexibility to use with tabbed\ninterfaces or other customized UI.\n\nHow distances, areas, and perimeters are computed depends on the view type and its spatial reference.\n\nIn 2D Maps:\n- In geographic coordinate systems (GCS) and in Web Mercator, they are computed geodetically.\n- In projected coordinate systems (PCS), apart from Web Mercator, they are computed\n  in a Euclidean manner (in their respective PCS).\n\nIn 3D Scenes:\n- In geographic coordinate systems (GCS) and in Web Mercator:\n  - horizontal distance is computed geodetically;\n  - vertical distance is computed as a difference in z-values;\n  - direct distance is computed in a Euclidean manner;\n  - area and perimeter are computed:\n    - in a Euclidean manner if the perimeter is below 100km;\n    - geodetically if the perimeter is above 100km.\n- In projected coordinate systems (PCS), apart from Web Mercator:\n  - all three distances (direct, horizontal, and vertical), areas, and perimeters are computed in a Euclidean manner (in their respective PCS).",
       "docsTags": [
         {
           "name": "internal"
         },
+        {
+          "name": "esriCompatibilityName",
+          "text": "Measurement"
+        },
+        {
+          "name": "since",
+          "text": "5.0"
+        },
+        {
+          "name": "example",
+          "text": "```html\n<arcgis-map basemap=\"hybrid\" center=\"-71.69,43.76\" zoom=\"15\">\n  <arcgis-measurement slot=\"top-right\" active-tool=\"distance\"></arcgis-measurement>\n</arcgis-map>\n<script type=\"module\">\n  // Add the measurement component to the upper right hand corner\n  // with the distance tool active\n  const mapElement = document.querySelector(\"arcgis-map\");\n  const measurementElement = document.querySelector(\"arcgis-measurement\");\n\n  // Switch between area and distance measurement\n  function switchTool() {\n    const tool = measurementElement.activeTool === \"distance\" ? \"area\" : \"distance\";\n    measurementElement.activeTool = tool;\n  }\n</script>\n```"
+        },
         {
           "name": "superclass",
           "text": "{\"name\":\"PublicLitElement\",\"module\":\"PublicLitElement\",\"package\":\"@arcgis/lumina\"}"
@@ -35128,11 +35123,11 @@
           "mutable": true,
           "attr": "active-tool",
           "reflectToAttr": false,
-          "docs": "Specifies the current measurement tool to display. Setting its value to `area` activates\nthe area measurement tool and it works for both [MapView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html) and\n[SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html). To measure distance in a [MapView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html)\nset the property to `distance` and in a [SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html) set it to `direct-line`.\nIf this property is not set, the component will not be displayed.",
+          "docs": "Specifies the current measurement tool to display. Setting its value to `area` activates\nthe area measurement tool and it works in both [arcgis-map](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-map/) and [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/). To measure distance in a [arcgis-map](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-map/),\nset the property to `distance` and in a [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/) set it to `direct-line`.\nIf this property is not set, the component will not be displayed.",
           "docsTags": [
             {
               "name": "example",
-              "text": "// To create the Measurement widget with SceneView's direct-line tool active.\nconst measurement = new Measurement({\n  view: view,\n  activeTool: \"direct-line\"\n});\n\n// To switch between direct line and area measurement tools\nfunction switchTool() {\n const tool = measurement.activeTool === \"direct-line\" ? \"area\" : \"direct-line\";\n measurement.activeTool = tool;\n}"
+              "text": "```js\n// To use the Measurement component with SceneView's direct-line tool active.\nconst measurementElement = document.querySelector(\"arcgis-measurement\");\nmeasurementElement.activeTool = \"direct-line\";\n\n// To switch between direct line and area measurement tools\nfunction switchTool() {\n  const tool = measurementElement.activeTool === \"direct-line\" ? \"area\" : \"direct-line\";\n  measurementElement.activeTool = tool;\n}\n```"
             }
           ],
           "values": [
@@ -35187,7 +35182,7 @@
           "docsTags": [
             {
               "name": "example",
-              "text": "// Print the active widget to the console.\nconst measurement = new Measurement({\n  view: view,\n  activeTool: \"distance\"\n});\nview.ui.add(measurement, \"top-right\");\nconsole.log(\"Active Widget: \", measurement.activeWidget);"
+              "text": "```js\n// Print the active widget to the console.\nconst measurementElement = document.querySelector(\"arcgis-measurement\");\nmeasurementElement.activeTool = \"distance\";\nconsole.log(\"Active Widget: \", measurementElement.activeWidget);\n```"
             },
             {
               "name": "readonly",
@@ -35222,11 +35217,11 @@
           "mutable": true,
           "attr": "area-unit",
           "reflectToAttr": false,
-          "docs": "Unit system (imperial, metric) or specific unit used for displaying the area values.\nPossible values are: `metric`, `imperial`, `square-inches`, `square-feet`, `square-us-feet`, `square-yards`, `square-miles`, `square-nautical-miles`, `square-meters`, `square-kilometers`, `acres`, `ares`, `hectares`.",
+          "docs": "Unit system (imperial, metric) or specific unit used for displaying the area values.",
           "docsTags": [
             {
               "name": "example",
-              "text": "// To create the Measurement widget that displays area in square US feet\nconst measurement = new Measurement({\n  view: view,\n  activeTool: \"area\",\n  areaUnit: \"square-us-feet\"\n});\n\n// To display the current area measurement unit\nconsole.log(\"Current unit: \", measurement.areaUnit);"
+              "text": "```js\n// To use the Measurement component to display area in square US feet\nconst measurementElement = document.querySelector(\"arcgis-measurement\");\nmeasurementElement.activeTool = \"area\";\nmeasurementElement.areaUnit = \"square-us-feet\";\n\n// To display the current area measurement unit\nconsole.log(\"Current unit: \", measurement.areaUnit);\n```"
             }
           ],
           "values": [
@@ -35338,10 +35333,6 @@
           "reflectToAttr": false,
           "docs": "Icon which represents the widget. It is typically used when the widget is controlled by another\none (e.g. in the Expand widget).",
           "docsTags": [
-            {
-              "name": "since",
-              "text": "4.27"
-            },
             {
               "name": "see",
               "text": "[Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)"
@@ -35364,12 +35355,7 @@
           "attr": "label",
           "reflectToAttr": false,
           "docs": "The widget's default label. This property is useful whenever the widget is controlled by another one\n(e.g. [Expand](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Expand.html)).",
-          "docsTags": [
-            {
-              "name": "since",
-              "text": "4.11"
-            }
-          ],
+          "docsTags": [],
           "values": [
             {
               "type": "string"
@@ -35389,11 +35375,11 @@
           "mutable": true,
           "attr": "linear-unit",
           "reflectToAttr": false,
-          "docs": "Unit system (imperial, metric) or specific unit used for displaying the distance values.\nPossible values are: `metric`, `imperial`, `inches`, `feet`, `us-feet`, `yards`, `miles`, `nautical-miles`, `meters`, `kilometers`.",
+          "docs": "Unit system (imperial, metric) or specific unit used for displaying the distance values.",
           "docsTags": [
             {
               "name": "example",
-              "text": "// To create the Measurement widget that displays distance in yards\nconst measurement = new Measurement({\n  view: view,\n  activeTool: \"distance\",\n  linearUnit: \"yards\"\n});\n\n// To display the current linear measurement unit\nconsole.log('Current linear unit: ', measurement.linearUnit);"
+              "text": "```js\n// To use the Measurement component to display distance in yards\nconst measurementElement = document.querySelector(\"arcgis-measurement\");\nmeasurementElement.activeTool = \"distance\";\nmeasurementElement.linearUnit = \"yards\";\n\n// To display the current linear measurement unit\nconsole.log(\"Current linear unit: \", measurementElement.linearUnit);\n```"
             }
           ],
           "values": [
@@ -35518,7 +35504,7 @@
           "docsTags": [
             {
               "name": "example",
-              "text": "// To display the state of the AreaMeasurement2D widget\nlet measurement = new Measurement({\n  view: view,\n  activeTool: \"area\"\n});\nreactiveUtils.watch(\n  () => measurement.viewModel.state,\n  (state) => console.log(\"Current state: \", state)\n);"
+              "text": "```js\n// To display the state of the AreaMeasurement2D component\nconst measurementElement = document.querySelector(\"arcgis-measurement\");\nmeasurementElement.activeTool = \"area\";\n\nmeasurementElement.addEventListener(\"arcgisPropertyChange\", () => {\n  console.log(\"Current state: \", measurementElement.viewModel.state);\n});\n```"
             },
             {
               "name": "readonly",
@@ -35569,12 +35555,7 @@
           "mutable": true,
           "reflectToAttr": false,
           "docs": "The view associated with the component. \n  > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the Measurement component will be associated with a map or scene component rather than using the `view` property.",
-          "docsTags": [
-            {
-              "name": "example",
-              "text": "// To create the Measurement widget for SceneView with the direct-line tool active.\nconst measurement = new Measurement({\n  view: sceneView,\n  activeTool: \"direct-line\"\n});"
-            }
-          ],
+          "docsTags": [],
           "values": [
             {
               "type": "MapView"
@@ -35608,7 +35589,7 @@
           },
           "signature": "clear(): Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Removes all measurement widgets and associated graphics.",
           "docsTags": []
         },
         {
@@ -35686,8 +35667,16 @@
           },
           "signature": "startMeasurement(): Promise<void>",
           "parameters": [],
-          "docs": "",
-          "docsTags": []
+          "docs": "Starts a new measurement for the active measurement widget.",
+          "docsTags": [
+            {
+              "name": "public"
+            },
+            {
+              "name": "example",
+              "text": "```js\nconst measurementElement = document.querySelector(\"arcgis-measurement\");\nmeasurementElement.activeTool = \"distance\";\n\nfunction measure() {\n  measurementElement.startMeasurement();\n}\n\nmeasure();\n```"
+            }
+          ]
         }
       ],
       "events": [
@@ -48984,6 +48973,3779 @@
       "parts": [],
       "listeners": []
     },
+    {
+      "filePath": "src/components/slider-binary-color-size-legacy/slider-binary-color-size-legacy.tsx",
+      "tag": "arcgis-slider-binary-color-size-legacy",
+      "overview": "",
+      "readme": "",
+      "usage": {},
+      "docs": "The Binary Color Size Slider (Legacy) component is intended for authoring and exploring diverging data-driven visualizations in any\nlayer that can be rendered with an above and below theme for a [SizeVariable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-SizeVariable.html).\n\nThe [updateFromRendererResult()](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-BinaryColorSizeSlider.html#fromRendererResult)\nmethod can be used to intelligently populate slider properties including [max](#max), [min](#min), [size visual variable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-SizeVariable.html)\nconfiguration, and the slider's histogram after the renderer has been created from the result of the\n[createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-univariateColorSize.html#createContinuousRenderer) method.\n\n```js\nconst univariateColorSizeRendererCreator = await import(\n  \"@arcgis/core/smartMapping/renderers/univariateColorSize.js\"\n);\nconst viewElement = document.querySelector(\"arcgis-map\")!;\nconst binaryColorSizeSlider = document.querySelector(\"arcgis-slider-binary-color-size\")!;\n\nconst featureLayer = new FeatureLayer({\n  url: \"https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Poverty_by_Age_Boundaries/FeatureServer/1\",\n});\n\nawait viewElement.viewOnReady();\nviewElement.map?.add(featureLayer);\n\nconst params = {\n  layer: featureLayer,\n  field: \"B17020_calc_pctPovE\",\n  view: viewElement.view,\n  theme: \"above-and-below\" as UnivariateTheme,\n};\n\nconst rendererResult = await univariateColorSizeRendererCreator.createContinuousRenderer(params);\n\nfeatureLayer.renderer = rendererResult.renderer;\n\nconst histogramResult = await histogram({\n  ...params,\n  numBins: 30,\n});\n\nawait binaryColorSizeSlider?.updateFromRendererResult(rendererResult, histogramResult);\n```\n\nThis slider should be used to update an above and below (diverging) visualization in a layer's renderer.\nIt is the responsibility of the app developer to set up event listeners on that update the size variable of the appropriate renderer.\n\n```js\nconst updateRendererFromSlider = async () => {\n  const result = await binaryColorSizeSlider.updateRenderer(featureLayer.renderer as ClassBreaksRenderer);\n  featureLayer.renderer = result;\n};\n\nbinaryColorSizeSlider.addEventListener(\"arcgisThumbChange\", updateRendererFromSlider);\nbinaryColorSizeSlider.addEventListener(\"arcgisThumbDrag\", updateRendererFromSlider);\n```",
+      "docsTags": [
+        {
+          "name": "since",
+          "text": "5.0.0"
+        },
+        {
+          "name": "see",
+          "text": "[BinaryColorSizeSliderViewModel](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-BinaryColorSizeSlider-BinaryColorSizeSliderViewModel.html)"
+        },
+        {
+          "name": "see",
+          "text": "[univariateColorSizeRendererCreator](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-univariateColorSize.html)"
+        },
+        {
+          "name": "superclass",
+          "text": "{\"name\":\"PublicLitElement\",\"module\":\"PublicLitElement\",\"package\":\"@arcgis/lumina\"}"
+        }
+      ],
+      "encapsulation": "shadow",
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {},
+      "props": [
+        {
+          "name": "autoDestroyDisabled",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "auto-destroy-disabled",
+          "reflectToAttr": false,
+          "docs": "If true, the component will not be destroyed automatically when it is\ndisconnected from the document. This is useful when you want to move the\ncomponent to a different place on the page, or temporarily hide it. If this\nis set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-binary-color-size-legacy/#destroy) method when you are done to\nprevent memory leaks.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "icon",
+          "type": "IconName",
+          "complexType": {
+            "original": "IconName",
+            "resolved": "IconName",
+            "references": {
+              "IconName": {
+                "location": "import",
+                "path": "@esri/calcite-components/dist/components/calcite-icon/interfaces.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "mutable": true,
+          "reflectToAttr": false,
+          "docs": "Icon which represents the widget. It is typically used when the widget is controlled by another\none (e.g. in the Expand widget).",
+          "docsTags": [
+            {
+              "name": "see",
+              "text": "[Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)"
+            }
+          ],
+          "values": [],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "max",
+          "reflectToAttr": false,
+          "docs": "The maximum value or upper bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the size variable of the appropriate renderer.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nconst updateRendererFromSlider = async () => {\n  const updatedRenderer = await binaryColorSizeSlider.updateRenderer(\n    featureLayer.renderer as ClassBreaksRenderer,\n  );\n  featureLayer.renderer = updatedRenderer;\n};\n\nbinaryColorSizeSlider.addEventListener(\"arcgisPropertyChange\", updateRendererFromSlider);\n```"
+            }
+          ],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "min",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "min",
+          "reflectToAttr": false,
+          "docs": "The minimum value or lower bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the min value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the size variable of the appropriate renderer.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nconst updateRendererFromSlider = async () => {\n  const updatedRenderer = await binaryColorSizeSlider.updateRenderer(\n    featureLayer.renderer as ClassBreaksRenderer,\n  );\n  featureLayer.renderer = updatedRenderer;\n};\n\nbinaryColorSizeSlider.addEventListener(\"arcgisPropertyChange\", updateRendererFromSlider);\n```"
+            }
+          ],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "precision",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "precision",
+          "reflectToAttr": false,
+          "docs": "Defines how slider thumb values should be rounded. This number indicates the number\nof decimal places slider thumb _values_ should round to when they have been moved.\n\nKeep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderViewModel.html#values) and shouldn't be used exclusively\nfor formatting purposes.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nslider.precision = 7;\n```"
+            }
+          ],
+          "default": "4",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "referenceElement",
+          "type": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string",
+          "complexType": {
+            "original": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string",
+            "resolved": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string",
+            "references": {
+              "HTMLArcgisLinkChartElement": {
+                "location": "local",
+                "path": "index.js",
+                "id": "notImplemented"
+              },
+              "HTMLArcgisMapElement": {
+                "location": "local",
+                "path": "index.js",
+                "id": "notImplemented"
+              },
+              "HTMLArcgisSceneElement": {
+                "location": "local",
+                "path": "index.js",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "mutable": true,
+          "attr": "reference-element",
+          "reflectToAttr": false,
+          "docs": "By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.",
+          "docsTags": [
+            {
+              "name": "see",
+              "text": "[Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)"
+            }
+          ],
+          "values": [
+            {
+              "type": "HTMLArcgisLinkChartElement"
+            },
+            {
+              "type": "HTMLArcgisMapElement"
+            },
+            {
+              "type": "HTMLArcgisSceneElement"
+            },
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "state",
+          "type": "\"disabled\" | \"ready\"",
+          "complexType": {
+            "original": "\"disabled\" | \"ready\"",
+            "resolved": "\"disabled\" | \"ready\"",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "state",
+          "reflectToAttr": false,
+          "docs": "The current state of the component.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string",
+              "value": "disabled"
+            },
+            {
+              "type": "string",
+              "value": "ready"
+            }
+          ],
+          "optional": true,
+          "required": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "componentOnReady",
+          "returns": {
+            "type": "Promise<this>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(): Promise<this>",
+            "parameters": [],
+            "return": "Promise<this>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "componentOnReady(): Promise<this>",
+          "parameters": [],
+          "docs": "Create a promise that resolves once component is fully loaded.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nconst arcgisSliderBinaryColorSizeLegacy = document.querySelector(\"arcgis-slider-binary-color-size-legacy\");\ndocument.body.append(arcgisSliderBinaryColorSizeLegacy);\nawait arcgisSliderBinaryColorSizeLegacy.componentOnReady();\nconsole.log(\"arcgis-slider-binary-color-size-legacy is ready to go!\");\n```"
+            },
+            {
+              "name": "inheritedFrom",
+              "text": "{\"name\":\"PublicLitElement\",\"module\":\"PublicLitElement\",\"package\":\"@arcgis/lumina\"}"
+            }
+          ]
+        },
+        {
+          "name": "destroy",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(): Promise<void>",
+            "parameters": [],
+            "return": "Promise<void>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "destroy(): Promise<void>",
+          "parameters": [],
+          "docs": "Permanently destroy the component.",
+          "docsTags": []
+        },
+        {
+          "name": "updateFromRendererResult",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(rendererResult: RendererResult, histogramResult?: HistogramResult): Promise<void>",
+            "parameters": [
+              {
+                "name": "rendererResult",
+                "type": "RendererResult",
+                "docs": ""
+              },
+              {
+                "name": "histogramResult",
+                "type": "HistogramResult | undefined",
+                "docs": ""
+              }
+            ],
+            "return": "Promise<void>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              },
+              "RendererResult": {
+                "location": "import",
+                "path": "@arcgis/core/smartMapping/renderers/univariateColorSize.d.ts",
+                "id": "notImplemented"
+              },
+              "HistogramResult": {
+                "location": "import",
+                "path": "@arcgis/core/smartMapping/statistics/types.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "updateFromRendererResult(rendererResult: RendererResult, histogramResult?: HistogramResult): Promise<void>",
+          "parameters": [
+            {
+              "name": "rendererResult",
+              "type": "RendererResult",
+              "docs": ""
+            },
+            {
+              "name": "histogramResult",
+              "type": "HistogramResult | undefined",
+              "docs": ""
+            }
+          ],
+          "docs": "A convenience function used to update the properties of a BinaryColorSizeSlider component instance from the\n[result](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-univariateColorSize.html#RendererResult) of\nthe [createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-univariateColorSize.html#createContinuousRenderer)\nmethod. This method is useful for cases when the app allows the end user to switch data variables used to render the data.\nNote that this method always expects `rendererResult` to be defined for the slider to function, but `histogramResult` is optional.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "rendererResult - The result object from the [createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-univariateColorSize.html#createContinuousRenderer)\nmethod."
+            },
+            {
+              "name": "param",
+              "text": "histogramResult - The result histogram object from the [histogram()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-statistics-histogram.html#histogram)\nmethod."
+            },
+            {
+              "name": "example",
+              "text": "```js\nconst rendererResult = await univariateColorSizeRendererCreator.createContinuousRenderer(params);\n\nfeatureLayer.renderer = rendererResult.renderer;\n\nconst histogramResult = await histogram({\n  ...params,\n  numBins: 30,\n});\n\nawait binaryColorSizeSlider?.updateFromRendererResult(rendererResult, histogramResult)\n```"
+            }
+          ]
+        },
+        {
+          "name": "updateRenderer",
+          "returns": {
+            "type": "Promise<ClassBreaksRenderer | null | undefined>",
+            "docs": "Returns the updated renderer."
+          },
+          "complexType": {
+            "signature": "(renderer: ClassBreaksRenderer): Promise<ClassBreaksRenderer | nil>",
+            "parameters": [
+              {
+                "name": "renderer",
+                "type": "ClassBreaksRenderer",
+                "docs": ""
+              }
+            ],
+            "return": "Promise<ClassBreaksRenderer | null | undefined>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              },
+              "ClassBreaksRenderer": {
+                "location": "import",
+                "path": "@arcgis/core/renderers/ClassBreaksRenderer.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "updateRenderer(renderer: ClassBreaksRenderer): Promise<ClassBreaksRenderer | nil>",
+          "parameters": [
+            {
+              "name": "renderer",
+              "type": "ClassBreaksRenderer",
+              "docs": ""
+            }
+          ],
+          "docs": "A convenience function used to update the input renderer based on\nthe values of the slider [stops](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-BinaryColorSizeSlider.html#stops).",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "renderer - The renderer\nto update from the slider values."
+            },
+            {
+              "name": "returns",
+              "text": "Returns the updated renderer."
+            },
+            {
+              "name": "example",
+              "text": "```js\nconst updatedRenderer = await binaryColorSizeSlider.updateRenderer(featureLayer.renderer as ClassBreaksRenderer);\nfeatureLayer.renderer = updatedRenderer;\n```"
+            }
+          ]
+        }
+      ],
+      "events": [
+        {
+          "event": "arcgisPropertyChange",
+          "detail": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+          "bubbles": true,
+          "complexType": {
+            "original": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+            "resolved": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the value of a property is changed. Use this to listen to changes to properties.",
+          "docsTags": []
+        },
+        {
+          "event": "arcgisReady",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the component associated with a map or scene view is ready to be interacted with.",
+          "docsTags": []
+        },
+        {
+          "event": "arcgisThumbChange",
+          "detail": "ThumbChangeEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "ThumbChangeEvent",
+            "resolved": "ThumbChangeEvent",
+            "references": {
+              "ThumbChangeEvent": {
+                "location": "import",
+                "path": "@arcgis/core/widgets/Slider/types.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider.",
+          "docsTags": []
+        },
+        {
+          "event": "arcgisThumbDrag",
+          "detail": "ThumbDragEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "ThumbDragEvent",
+            "resolved": "ThumbDragEvent",
+            "references": {
+              "ThumbDragEvent": {
+                "location": "import",
+                "path": "@arcgis/core/widgets/Slider/types.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fires when a user drags a thumb on the component.",
+          "docsTags": []
+        }
+      ],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "listeners": []
+    },
+    {
+      "filePath": "src/components/slider-classed-color-legacy/slider-classed-color-legacy.tsx",
+      "tag": "arcgis-slider-classed-color-legacy",
+      "overview": "",
+      "readme": "",
+      "usage": {},
+      "docs": "The Classed Color Slider (Legacy) component is designed for authoring and exploring data-driven visualizations in any\nlayer that can be rendered with color in a [ClassBreaksRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html).\n\n<span id=\"image-annotations\"></span>\nSee the image below for a summary of the configurable options available on this slider.\n\n![ClassedColorSlider with annotations](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/classedcolorslider-labels.png \"ClassedColorSlider with annotations\")\n\nThe [updateFromRendererResult()](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-ClassedColorSlider.html#fromRendererResult) method can be used to intelligently populate slider properties including\n[max](#max), [min](#min), the [classBreakInfos](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html#classBreakInfos) configuration,\nand the slider's histogram after the renderer has been created from the result of the\n[createClassBreaksRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-color.html#createClassBreaksRenderer) method.\n\n```js\nconst colorRendererCreator = await import(\"@arcgis/core/smartMapping/renderers/color.js\");\nconst viewElement = document.querySelector(\"arcgis-map\")!;\nconst classedColorSlider = document.querySelector(\"arcgis-slider-classed-color\")!;\n\nconst featureLayer = new FeatureLayer({\n  url: \"https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Poverty_by_Age_Boundaries/FeatureServer/1\",\n});\n\nawait viewElement.viewOnReady();\nviewElement.map?.add(featureLayer);\n\nconst params = {\n  layer: featureLayer,\n  field: \"B17020_calc_pctPovE\",\n  view: viewElement.view,\n  numClasses: 4\n};\n\nconst rendererResult = await colorRendererCreator.createClassBreaksRenderer(params);\n\nfeatureLayer.renderer = rendererResult.renderer;\n\nconst histogramResult = await histogram({\n  ...params,\n  numBins: 30,\n});\n\nawait classedColorSlider?.updateFromRendererResult(rendererResult, histogramResult);\n```\n\nThis slider should be used to update the [classBreakInfos](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html#classBreakInfos)\nin a ClassBreaksRenderer. It is the responsibility of the app developer\nto set up event listeners on this slider that update the breaks of the appropriate renderer.\n\n```js\nconst updateRendererFromSlider = async () => {\n  const renderer = featureLayer?.renderer?.clone();\n  if (!renderer || !(\"classBreakInfos\" in renderer) || !renderer.classBreakInfos?.[0]) {\n    return;\n  }\n\n  const updatedClassBreakInfos = await classedColorSlider.updateClassBreakInfos(renderer.classBreakInfos);\n  if (!updatedClassBreakInfos) {\n    return;\n  }\n\n  renderer.classBreakInfos = updatedClassBreakInfos;\n  featureLayer.renderer = renderer;\n};\n\nclassedColorSlider.addEventListener(\"arcgisThumbChange\", updateRendererFromSlider);\nclassedColorSlider.addEventListener(\"arcgisThumbDrag\", updateRendererFromSlider);\n```",
+      "docsTags": [
+        {
+          "name": "since",
+          "text": "5.0.0"
+        },
+        {
+          "name": "see",
+          "text": "[ClassedColorSliderViewModel](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-ClassedColorSlider-ClassedColorSliderViewModel.html)"
+        },
+        {
+          "name": "see",
+          "text": "[colorRendererCreator](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-color.html)"
+        },
+        {
+          "name": "see",
+          "text": "[ClassBreaksRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html)"
+        },
+        {
+          "name": "superclass",
+          "text": "{\"name\":\"PublicLitElement\",\"module\":\"PublicLitElement\",\"package\":\"@arcgis/lumina\"}"
+        }
+      ],
+      "encapsulation": "shadow",
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {},
+      "props": [
+        {
+          "name": "autoDestroyDisabled",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "auto-destroy-disabled",
+          "reflectToAttr": false,
+          "docs": "If true, the component will not be destroyed automatically when it is\ndisconnected from the document. This is useful when you want to move the\ncomponent to a different place on the page, or temporarily hide it. If this\nis set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-classed-color-legacy/#destroy) method when you are done to\nprevent memory leaks.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "icon",
+          "type": "IconName",
+          "complexType": {
+            "original": "IconName",
+            "resolved": "IconName",
+            "references": {
+              "IconName": {
+                "location": "import",
+                "path": "@esri/calcite-components/dist/components/calcite-icon/interfaces.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "mutable": true,
+          "reflectToAttr": false,
+          "docs": "Icon which represents the widget. It is typically used when the widget is controlled by another\none (e.g. in the Expand widget).",
+          "docsTags": [
+            {
+              "name": "see",
+              "text": "[Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)"
+            }
+          ],
+          "values": [],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "max",
+          "reflectToAttr": false,
+          "docs": "The maximum value or upper bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the breaks of the appropriate renderer.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nconst updateRendererFromSlider = async () => {\n  const renderer = featureLayer?.renderer?.clone();\n  if (!renderer || !(\"classBreakInfos\" in renderer) || !renderer.classBreakInfos?.[0]) {\n    return;\n  }\n\n  const updatedClassBreakInfos = await classedColorSlider.updateClassBreakInfos(renderer.classBreakInfos);\n  if (!updatedClassBreakInfos) {\n    return;\n  }\n\n  renderer.classBreakInfos = updatedClassBreakInfos;\n  featureLayer.renderer = renderer;\n};\n\nclassedColorSlider.addEventListener(\"arcgisPropertyChange\", updateRendererFromSlider);\n```"
+            }
+          ],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "min",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "min",
+          "reflectToAttr": false,
+          "docs": "The minimum value or lower bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the min value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the breaks of the appropriate renderer.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nconst updateRendererFromSlider = async () => {\n  const renderer = featureLayer?.renderer?.clone();\n  if (!renderer || !(\"classBreakInfos\" in renderer) || !renderer.classBreakInfos?.[0]) {\n    return;\n  }\n\n  const updatedClassBreakInfos = await classedColorSlider.updateClassBreakInfos(renderer.classBreakInfos);\n  if (!updatedClassBreakInfos) {\n    return;\n  }\n\n  renderer.classBreakInfos = updatedClassBreakInfos;\n  featureLayer.renderer = renderer;\n};\n\nclassedColorSlider.addEventListener(\"arcgisPropertyChange\", updateRendererFromSlider);\n```"
+            }
+          ],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "precision",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "precision",
+          "reflectToAttr": false,
+          "docs": "Defines how slider thumb values should be rounded. This number indicates the number\nof decimal places slider thumb _values_ should round to when they have been moved.\n\nKeep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderViewModel.html#values) and shouldn't be used exclusively\nfor formatting purposes.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nslider.precision = 7;\n```"
+            }
+          ],
+          "default": "4",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "referenceElement",
+          "type": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string",
+          "complexType": {
+            "original": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string",
+            "resolved": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string",
+            "references": {
+              "HTMLArcgisLinkChartElement": {
+                "location": "local",
+                "path": "index.js",
+                "id": "notImplemented"
+              },
+              "HTMLArcgisMapElement": {
+                "location": "local",
+                "path": "index.js",
+                "id": "notImplemented"
+              },
+              "HTMLArcgisSceneElement": {
+                "location": "local",
+                "path": "index.js",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "mutable": true,
+          "attr": "reference-element",
+          "reflectToAttr": false,
+          "docs": "By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.",
+          "docsTags": [
+            {
+              "name": "see",
+              "text": "[Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)"
+            }
+          ],
+          "values": [
+            {
+              "type": "HTMLArcgisLinkChartElement"
+            },
+            {
+              "type": "HTMLArcgisMapElement"
+            },
+            {
+              "type": "HTMLArcgisSceneElement"
+            },
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "state",
+          "type": "\"disabled\" | \"ready\"",
+          "complexType": {
+            "original": "\"disabled\" | \"ready\"",
+            "resolved": "\"disabled\" | \"ready\"",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "state",
+          "reflectToAttr": false,
+          "docs": "The current state of the component.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string",
+              "value": "disabled"
+            },
+            {
+              "type": "string",
+              "value": "ready"
+            }
+          ],
+          "optional": true,
+          "required": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "componentOnReady",
+          "returns": {
+            "type": "Promise<this>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(): Promise<this>",
+            "parameters": [],
+            "return": "Promise<this>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "componentOnReady(): Promise<this>",
+          "parameters": [],
+          "docs": "Create a promise that resolves once component is fully loaded.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nconst arcgisSliderClassedColorLegacy = document.querySelector(\"arcgis-slider-classed-color-legacy\");\ndocument.body.append(arcgisSliderClassedColorLegacy);\nawait arcgisSliderClassedColorLegacy.componentOnReady();\nconsole.log(\"arcgis-slider-classed-color-legacy is ready to go!\");\n```"
+            },
+            {
+              "name": "inheritedFrom",
+              "text": "{\"name\":\"PublicLitElement\",\"module\":\"PublicLitElement\",\"package\":\"@arcgis/lumina\"}"
+            }
+          ]
+        },
+        {
+          "name": "destroy",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(): Promise<void>",
+            "parameters": [],
+            "return": "Promise<void>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "destroy(): Promise<void>",
+          "parameters": [],
+          "docs": "Permanently destroy the component.",
+          "docsTags": []
+        },
+        {
+          "name": "updateClassBreakInfos",
+          "returns": {
+            "type": "Promise<Array<ClassBreakInfo> | null | undefined>",
+            "docs": "The updated classBreakInfos to set\non a ClassBreaksRenderer object."
+          },
+          "complexType": {
+            "signature": "(breakInfos: ClassBreakInfo[]): Promise<ClassBreakInfo[] | nil>",
+            "parameters": [
+              {
+                "name": "breakInfos",
+                "type": "Array<ClassBreakInfo>",
+                "docs": ""
+              }
+            ],
+            "return": "Promise<Array<ClassBreakInfo> | null | undefined>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              },
+              "Array": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              },
+              "ClassBreakInfo": {
+                "location": "import",
+                "path": "@arcgis/core/renderers/support/ClassBreakInfo.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "updateClassBreakInfos(breakInfos: ClassBreakInfo[]): Promise<ClassBreakInfo[] | nil>",
+          "parameters": [
+            {
+              "name": "breakInfos",
+              "type": "Array<ClassBreakInfo>",
+              "docs": ""
+            }
+          ],
+          "docs": "A convenience function used to update the\n[classBreakInfos](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html#classBreakInfos)\nof a [ClassBreaksRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html) associated with this slider.\n\nThe number of breaks from the renderer must match the number of breaks in the slider.\nGenerally, the input breaks for this method should come from the same renderer as one\nused to create the slider with the [fromRendererResult()](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-ClassedColorSlider.html#fromRendererResult) method.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "breakInfos - The classBreakInfos\nfrom a [ClassBreaksRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html) instance to update based on\nthe properties of the slider."
+            },
+            {
+              "name": "returns",
+              "text": "The updated classBreakInfos to set\non a ClassBreaksRenderer object."
+            },
+            {
+              "name": "example",
+              "text": "```js\nconst renderer = featureLayer?.renderer?.clone();\nconst updatedClassBreakInfos = await classedColorSlider.updateClassBreakInfos(renderer.classBreakInfos);\nrenderer.classBreakInfos = updatedClassBreakInfos;\nfeatureLayer.renderer = renderer;\n```"
+            }
+          ]
+        },
+        {
+          "name": "updateFromRendererResult",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(rendererResult: ClassBreaksRendererResult, histogramResult?: HistogramResult): Promise<void>",
+            "parameters": [
+              {
+                "name": "rendererResult",
+                "type": "ClassBreaksRendererResult",
+                "docs": ""
+              },
+              {
+                "name": "histogramResult",
+                "type": "HistogramResult | undefined",
+                "docs": ""
+              }
+            ],
+            "return": "Promise<void>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              },
+              "ClassBreaksRendererResult": {
+                "location": "import",
+                "path": "@arcgis/core/smartMapping/renderers/color.d.ts",
+                "id": "notImplemented"
+              },
+              "HistogramResult": {
+                "location": "import",
+                "path": "@arcgis/core/smartMapping/statistics/types.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "updateFromRendererResult(rendererResult: ClassBreaksRendererResult, histogramResult?: HistogramResult): Promise<void>",
+          "parameters": [
+            {
+              "name": "rendererResult",
+              "type": "ClassBreaksRendererResult",
+              "docs": ""
+            },
+            {
+              "name": "histogramResult",
+              "type": "HistogramResult | undefined",
+              "docs": ""
+            }
+          ],
+          "docs": "A convenience function used to update the properties a ClassedColorSlider from the result\nof the [createClassBreaksRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-color.html#createClassBreaksRenderer) method.\nNote that this method always expects `rendererResult` to be defined for the slider to function, but `histogramResult` is optional.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "rendererResult - The result object from the [createClassBreaksRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-color.html#createClassBreaksRenderer)\nmethod."
+            },
+            {
+              "name": "param",
+              "text": "histogramResult - The result histogram object from the [histogram()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-statistics-histogram.html#histogram)\nmethod."
+            },
+            {
+              "name": "example",
+              "text": "```js\nconst rendererResult = await colorRendererCreator.createClassBreaksRenderer(params);\n\nfeatureLayer.renderer = rendererResult.renderer;\n\nconst histogramResult = await histogram({\n  ...params,\n  numBins: 30,\n});\n\nawait classedColorSlider?.updateFromRendererResult(rendererResult, histogramResult);\n```"
+            }
+          ]
+        }
+      ],
+      "events": [
+        {
+          "event": "arcgisPropertyChange",
+          "detail": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+          "bubbles": true,
+          "complexType": {
+            "original": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+            "resolved": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the value of a property is changed. Use this to listen to changes to properties.",
+          "docsTags": []
+        },
+        {
+          "event": "arcgisReady",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the component associated with a map or scene view is ready to be interacted with.",
+          "docsTags": []
+        },
+        {
+          "event": "arcgisThumbChange",
+          "detail": "ThumbChangeEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "ThumbChangeEvent",
+            "resolved": "ThumbChangeEvent",
+            "references": {
+              "ThumbChangeEvent": {
+                "location": "import",
+                "path": "@arcgis/core/widgets/Slider/types.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider.",
+          "docsTags": []
+        },
+        {
+          "event": "arcgisThumbDrag",
+          "detail": "ThumbDragEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "ThumbDragEvent",
+            "resolved": "ThumbDragEvent",
+            "references": {
+              "ThumbDragEvent": {
+                "location": "import",
+                "path": "@arcgis/core/widgets/Slider/types.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fires when a user drags a thumb on the component.",
+          "docsTags": []
+        }
+      ],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "listeners": []
+    },
+    {
+      "filePath": "src/components/slider-classed-size-legacy/slider-classed-size-legacy.tsx",
+      "tag": "arcgis-slider-classed-size-legacy",
+      "overview": "",
+      "readme": "",
+      "usage": {},
+      "docs": "The Classed Size Slider (Legacy) component is designed for authoring and exploring data-driven visualizations in any\nlayer that can be rendered with size in a [ClassBreaksRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html).\n\n<span id=\"image-annotations\"></span>\nSee the image below for a summary of the configurable options available on this slider.\n\n![ClassedSizeSlider with annotations](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/classedsizeslider-labels.png \"ClassedSizeSlider with annotations\")\n\nThe [updateFromRendererResult()](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-ClassedSizeSlider.html#fromRendererResult) method can be used to intelligently populate slider properties including\n[max](#max), [min](#min), the [classBreakInfos](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html#classBreakInfos) configuration,\nand the slider's histogram after the renderer has been created from the result of the [createClassBreaksRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-size.html#createClassBreaksRenderer)\nmethod.\n\n```js\nconst sizeRendererCreator = await import(\"@arcgis/core/smartMapping/renderers/size.js\");\nconst viewElement = document.querySelector(\"arcgis-map\")!;\nconst classedSizeSlider = document.querySelector(\"arcgis-slider-classed-size\")!;\n\nconst featureLayer = new FeatureLayer({\n  url: \"https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Median_Income_by_Race_and_Age_Selp_Emp_Boundaries/FeatureServer/1\",\n});\n\nawait viewElement.viewOnReady();\nviewElement.map?.add(featureLayer);\n\nconst params = {\n  layer: featureLayer,\n  field: \"B19049_001E\",\n  view: viewElement.view,\n  numClasses: 4,\n};\n\nconst rendererResult = await sizeRendererCreator.createClassBreaksRenderer(params);\n\nfeatureLayer.renderer = rendererResult.renderer;\n\nconst histogramResult = await histogram({\n  ...params,\n  numBins: 30,\n});\n\nawait classedSizeSlider?.updateFromRendererResult(rendererResult, histogramResult);\n```\n\nThis slider should be used to update the [classBreakInfos](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html#classBreakInfos)\nin a ClassBreaksRenderer. It is the responsibility of the app developer\nto set up event listeners on this slider that update the breaks of the appropriate renderer.\n\n```js\nconst updateRendererFromSlider = async () => {\n  const renderer = featureLayer?.renderer?.clone();\n  if (!renderer || !(\"classBreakInfos\" in renderer) || !renderer.classBreakInfos?.[0]) {\n    return;\n  }\n  renderer.classBreakInfos = (await classedSizeSlider.updateClassBreakInfos(renderer.classBreakInfos)) as any;\n  featureLayer.renderer = renderer;\n};\n\nclassedSizeSlider.addEventListener(\"arcgisThumbChange\", updateRendererFromSlider);\nclassedSizeSlider.addEventListener(\"arcgisThumbDrag\", updateRendererFromSlider);\n```",
+      "docsTags": [
+        {
+          "name": "since",
+          "text": "5.0.0"
+        },
+        {
+          "name": "see",
+          "text": "[ClassedSizeSliderViewModel](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-ClassedSizeSlider-ClassedSizeSliderViewModel.html)"
+        },
+        {
+          "name": "see",
+          "text": "[sizeRendererCreator](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-size.html)"
+        },
+        {
+          "name": "see",
+          "text": "[ClassBreaksRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html)"
+        },
+        {
+          "name": "superclass",
+          "text": "{\"name\":\"PublicLitElement\",\"module\":\"PublicLitElement\",\"package\":\"@arcgis/lumina\"}"
+        }
+      ],
+      "encapsulation": "shadow",
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {},
+      "props": [
+        {
+          "name": "autoDestroyDisabled",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "auto-destroy-disabled",
+          "reflectToAttr": false,
+          "docs": "If true, the component will not be destroyed automatically when it is\ndisconnected from the document. This is useful when you want to move the\ncomponent to a different place on the page, or temporarily hide it. If this\nis set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-classed-size-legacy/#destroy) method when you are done to\nprevent memory leaks.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "icon",
+          "type": "IconName",
+          "complexType": {
+            "original": "IconName",
+            "resolved": "IconName",
+            "references": {
+              "IconName": {
+                "location": "import",
+                "path": "@esri/calcite-components/dist/components/calcite-icon/interfaces.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "mutable": true,
+          "reflectToAttr": false,
+          "docs": "Icon which represents the widget. It is typically used when the widget is controlled by another\none (e.g. in the Expand widget).",
+          "docsTags": [
+            {
+              "name": "see",
+              "text": "[Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)"
+            }
+          ],
+          "values": [],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "max",
+          "reflectToAttr": false,
+          "docs": "The maximum value or upper bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the breaks of the appropriate renderer.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nconst updateRendererFromSlider = async () => {\n  const renderer = featureLayer?.renderer?.clone();\n  if (!renderer || !(\"classBreakInfos\" in renderer) || !renderer.classBreakInfos?.[0]) {\n    return;\n  }\n  renderer.classBreakInfos = (await classedSizeSlider.updateClassBreakInfos(renderer.classBreakInfos)) as any;\n  featureLayer.renderer = renderer;\n};\n\nclassedSizeSlider.addEventListener(\"arcgisPropertyChange\", updateRendererFromSlider);\n```"
+            }
+          ],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "min",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "min",
+          "reflectToAttr": false,
+          "docs": "The minimum value or lower bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the min value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the breaks of the appropriate renderer.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nconst updateRendererFromSlider = async () => {\n  const renderer = featureLayer?.renderer?.clone();\n  if (!renderer || !(\"classBreakInfos\" in renderer) || !renderer.classBreakInfos?.[0]) {\n    return;\n  }\n  renderer.classBreakInfos = (await classedSizeSlider.updateClassBreakInfos(renderer.classBreakInfos)) as any;\n  featureLayer.renderer = renderer;\n};\n\nclassedSizeSlider.addEventListener(\"arcgisPropertyChange\", updateRendererFromSlider);\n```"
+            }
+          ],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "precision",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "precision",
+          "reflectToAttr": false,
+          "docs": "Defines how slider thumb values should be rounded. This number indicates the number\nof decimal places slider thumb _values_ should round to when they have been moved.\n\nKeep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderViewModel.html#values) and shouldn't be used exclusively\nfor formatting purposes.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nslider.precision = 7;\n```"
+            }
+          ],
+          "default": "4",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "referenceElement",
+          "type": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string",
+          "complexType": {
+            "original": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string",
+            "resolved": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string",
+            "references": {
+              "HTMLArcgisLinkChartElement": {
+                "location": "local",
+                "path": "index.js",
+                "id": "notImplemented"
+              },
+              "HTMLArcgisMapElement": {
+                "location": "local",
+                "path": "index.js",
+                "id": "notImplemented"
+              },
+              "HTMLArcgisSceneElement": {
+                "location": "local",
+                "path": "index.js",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "mutable": true,
+          "attr": "reference-element",
+          "reflectToAttr": false,
+          "docs": "By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.",
+          "docsTags": [
+            {
+              "name": "see",
+              "text": "[Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)"
+            }
+          ],
+          "values": [
+            {
+              "type": "HTMLArcgisLinkChartElement"
+            },
+            {
+              "type": "HTMLArcgisMapElement"
+            },
+            {
+              "type": "HTMLArcgisSceneElement"
+            },
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "state",
+          "type": "\"disabled\" | \"ready\"",
+          "complexType": {
+            "original": "\"disabled\" | \"ready\"",
+            "resolved": "\"disabled\" | \"ready\"",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "state",
+          "reflectToAttr": false,
+          "docs": "The current state of the component.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string",
+              "value": "disabled"
+            },
+            {
+              "type": "string",
+              "value": "ready"
+            }
+          ],
+          "optional": true,
+          "required": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "componentOnReady",
+          "returns": {
+            "type": "Promise<this>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(): Promise<this>",
+            "parameters": [],
+            "return": "Promise<this>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "componentOnReady(): Promise<this>",
+          "parameters": [],
+          "docs": "Create a promise that resolves once component is fully loaded.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nconst arcgisSliderClassedSizeLegacy = document.querySelector(\"arcgis-slider-classed-size-legacy\");\ndocument.body.append(arcgisSliderClassedSizeLegacy);\nawait arcgisSliderClassedSizeLegacy.componentOnReady();\nconsole.log(\"arcgis-slider-classed-size-legacy is ready to go!\");\n```"
+            },
+            {
+              "name": "inheritedFrom",
+              "text": "{\"name\":\"PublicLitElement\",\"module\":\"PublicLitElement\",\"package\":\"@arcgis/lumina\"}"
+            }
+          ]
+        },
+        {
+          "name": "destroy",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(): Promise<void>",
+            "parameters": [],
+            "return": "Promise<void>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "destroy(): Promise<void>",
+          "parameters": [],
+          "docs": "Permanently destroy the component.",
+          "docsTags": []
+        },
+        {
+          "name": "updateClassBreakInfos",
+          "returns": {
+            "type": "Promise<Array<ClassBreakInfo> | null | undefined>",
+            "docs": "The updated classBreakInfos to set\non a ClassBreaksRenderer object."
+          },
+          "complexType": {
+            "signature": "(breakInfos: ClassBreakInfo[]): Promise<ClassBreakInfo[] | nil>",
+            "parameters": [
+              {
+                "name": "breakInfos",
+                "type": "Array<ClassBreakInfo>",
+                "docs": ""
+              }
+            ],
+            "return": "Promise<Array<ClassBreakInfo> | null | undefined>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              },
+              "Array": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              },
+              "ClassBreakInfo": {
+                "location": "import",
+                "path": "@arcgis/core/renderers/support/ClassBreakInfo.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "updateClassBreakInfos(breakInfos: ClassBreakInfo[]): Promise<ClassBreakInfo[] | nil>",
+          "parameters": [
+            {
+              "name": "breakInfos",
+              "type": "Array<ClassBreakInfo>",
+              "docs": ""
+            }
+          ],
+          "docs": "A convenience function used to update the\n[classBreakInfos](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html#classBreakInfos)\nof a [ClassBreaksRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html) associated with this slider.\n\nThe number of breaks from the renderer must match the number of breaks in the slider.\nGenerally, the input breaks for this method should come from the same renderer as one\nused to create the slider with the [fromRendererResult()](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-ClassedSizeSlider.html#fromRendererResult) method.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "breakInfos - The classBreakInfos\nfrom a [ClassBreaksRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html) instance to update based on\nthe properties of the slider."
+            },
+            {
+              "name": "returns",
+              "text": "The updated classBreakInfos to set\non a ClassBreaksRenderer object."
+            },
+            {
+              "name": "example",
+              "text": "```js\nconst renderer = featureLayer?.renderer?.clone();\nrenderer.classBreakInfos = (await classedSizeSlider.updateClassBreakInfos(renderer.classBreakInfos));\nfeatureLayer.renderer = renderer;\n```"
+            }
+          ]
+        },
+        {
+          "name": "updateFromRendererResult",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(rendererResult: ClassBreaksRendererResult, histogramResult?: HistogramResult): Promise<void>",
+            "parameters": [
+              {
+                "name": "rendererResult",
+                "type": "ClassBreaksRendererResult",
+                "docs": ""
+              },
+              {
+                "name": "histogramResult",
+                "type": "HistogramResult | undefined",
+                "docs": ""
+              }
+            ],
+            "return": "Promise<void>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              },
+              "ClassBreaksRendererResult": {
+                "location": "import",
+                "path": "@arcgis/core/smartMapping/renderers/size.d.ts",
+                "id": "notImplemented"
+              },
+              "HistogramResult": {
+                "location": "import",
+                "path": "@arcgis/core/smartMapping/statistics/types.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "updateFromRendererResult(rendererResult: ClassBreaksRendererResult, histogramResult?: HistogramResult): Promise<void>",
+          "parameters": [
+            {
+              "name": "rendererResult",
+              "type": "ClassBreaksRendererResult",
+              "docs": ""
+            },
+            {
+              "name": "histogramResult",
+              "type": "HistogramResult | undefined",
+              "docs": ""
+            }
+          ],
+          "docs": "A convenience function used to update the properties a ClassedSizeSlider from the result\nof the [createClassBreaksRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-size.html#createClassBreaksRenderer) method.\nThis method is used to configure an empty ClassedSizeSlider to be used with the layer data, and is useful for cases when the app allows the end user to switch data variables.\nNote that this method always expects `rendererResult` to be defined for the slider to function, but `histogramResult` is optional.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "rendererResult - The result object from the [createClassBreaksRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-size.html#createClassBreaksRenderer)\nmethod."
+            },
+            {
+              "name": "param",
+              "text": "histogramResult - The result histogram object from the [histogram()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-statistics-histogram.html#histogram)\nmethod."
+            },
+            {
+              "name": "example",
+              "text": "```js\nconst rendererResult = await sizeRendererCreator.createClassBreaksRenderer(params);\n\nfeatureLayer.renderer = rendererResult.renderer;\n\nconst histogramResult = await histogram({\n  ...params,\n  numBins: 30,\n});\n\nawait classedSizeSlider?.updateFromRendererResult(rendererResult, histogramResult);\n```"
+            }
+          ]
+        }
+      ],
+      "events": [
+        {
+          "event": "arcgisPropertyChange",
+          "detail": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+          "bubbles": true,
+          "complexType": {
+            "original": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+            "resolved": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the value of a property is changed. Use this to listen to changes to properties.",
+          "docsTags": []
+        },
+        {
+          "event": "arcgisReady",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the component associated with a map or scene view is ready to be interacted with.",
+          "docsTags": []
+        },
+        {
+          "event": "arcgisThumbChange",
+          "detail": "ThumbChangeEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "ThumbChangeEvent",
+            "resolved": "ThumbChangeEvent",
+            "references": {
+              "ThumbChangeEvent": {
+                "location": "import",
+                "path": "@arcgis/core/widgets/Slider/types.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider.",
+          "docsTags": []
+        },
+        {
+          "event": "arcgisThumbDrag",
+          "detail": "ThumbDragEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "ThumbDragEvent",
+            "resolved": "ThumbDragEvent",
+            "references": {
+              "ThumbDragEvent": {
+                "location": "import",
+                "path": "@arcgis/core/widgets/Slider/types.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fires when a user drags a thumb on the component.",
+          "docsTags": []
+        }
+      ],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "listeners": []
+    },
+    {
+      "filePath": "src/components/slider-color-legacy/slider-color-legacy.tsx",
+      "tag": "arcgis-slider-color-legacy",
+      "overview": "",
+      "readme": "",
+      "usage": {},
+      "docs": "The Color Slider (Legacy) component is intended for authoring and exploring data-driven visualizations in any\nlayer that can be rendered with a [ColorVariable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-ColorVariable.html).\n\n<span id=\"image-annotations\"></span>\nSee the image below for a summary of the configurable options available on this slider.\n\n![ColorSlider with annotations](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/colorslider-2-labels.png \"ColorSlider with annotations\")\n\nThe [updateFromRendererResult()](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-ColorSlider.html#fromRendererResult) method can be used to intelligently populate slider properties including\n[max](#max), [min](#min), the [color visual variable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-ColorVariable.html) configuration,\nand the slider's histogram after the renderer has been created from the result of the [createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-color.html#createContinuousRenderer) method.\n\n```js\nconst colorRendererCreator = await import(\"@arcgis/core/smartMapping/renderers/color.js\");\nconst viewElement = document.querySelector(\"arcgis-map\")!;\nconst colorSlider = document.querySelector(\"arcgis-slider-color\")!;\n\nconst featureLayer = new FeatureLayer({\n  url: \"https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Poverty_by_Age_Boundaries/FeatureServer/1\",\n});\n\nawait viewElement.viewOnReady();\nviewElement.map?.add(featureLayer);\n\nconst params: ContinuousRendererParameters = {\n  layer: featureLayer,\n  field: \"B17020_calc_pctPovE\",\n  view: viewElement.view,\n  theme: \"above-and-below\",\n};\n\nconst rendererResult = await colorRendererCreator.createContinuousRenderer(params);\n\nfeatureLayer.renderer = rendererResult.renderer;\n\nconst histogramResult = await histogram({\n  ...params,\n  numBins: 30,\n});\n\ncolorSlider.updateFromRendererResult(rendererResult, histogramResult);\n```\n\nThis slider should be used to update a [color visual variable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-ColorVariable.html)\nin a layer's renderer. It is the responsibility of the app developer\nto set up event listeners on this slider that update the color variable of the appropriate renderer.\n\n```js\ncolorSlider.updateFromRendererResult(rendererResult, histogramResult);\n\nconst updateRendererFromSlider = () => {\n  const renderer = featureLayer.renderer?.clone();\n  if (!renderer || !(\"visualVariables\" in renderer) || !renderer.visualVariables?.[0]) {\n    return;\n  }\n\n  const colorVariable = renderer.visualVariables[0].clone() as __esri.ColorVariable;\n  colorVariable.stops = colorSlider.stops;\n\n  renderer.visualVariables = [colorVariable];\n  featureLayer.renderer = renderer;\n};\n\ncolorSlider.addEventListener(\"arcgisThumbChange\", updateRendererFromSlider);\ncolorSlider.addEventListener(\"arcgisThumbDrag\", updateRendererFromSlider);\n```",
+      "docsTags": [
+        {
+          "name": "since",
+          "text": "5.0.0"
+        },
+        {
+          "name": "see",
+          "text": "[ColorSliderViewModel](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-ColorSlider-ColorSliderViewModel.html)"
+        },
+        {
+          "name": "see",
+          "text": "[colorRendererCreator](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-color.html)"
+        },
+        {
+          "name": "superclass",
+          "text": "{\"name\":\"PublicLitElement\",\"module\":\"PublicLitElement\",\"package\":\"@arcgis/lumina\"}"
+        }
+      ],
+      "encapsulation": "shadow",
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {},
+      "props": [
+        {
+          "name": "autoDestroyDisabled",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "auto-destroy-disabled",
+          "reflectToAttr": false,
+          "docs": "If true, the component will not be destroyed automatically when it is\ndisconnected from the document. This is useful when you want to move the\ncomponent to a different place on the page, or temporarily hide it. If this\nis set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-color-legacy/#destroy) method when you are done to\nprevent memory leaks.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "icon",
+          "type": "IconName",
+          "complexType": {
+            "original": "IconName",
+            "resolved": "IconName",
+            "references": {
+              "IconName": {
+                "location": "import",
+                "path": "@esri/calcite-components/dist/components/calcite-icon/interfaces.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "mutable": true,
+          "reflectToAttr": false,
+          "docs": "Icon which represents the component.\nTypically used when the component is controlled by another component (e.g. by the Expand component).",
+          "docsTags": [
+            {
+              "name": "see",
+              "text": "[Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)"
+            }
+          ],
+          "values": [],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "max",
+          "reflectToAttr": false,
+          "docs": "The maximum value or upper bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the color variable of the appropriate renderer.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "const updateRendererFromSlider = () => {\n  const renderer = featureLayer.renderer?.clone();\n  if (!renderer || !(\"visualVariables\" in renderer) || !renderer.visualVariables?.[0]) {\n    return;\n  }\n\n  const colorVariable = renderer.visualVariables[0].clone() as __esri.ColorVariable;\n  colorVariable.stops = colorSlider.stops;\n\n  renderer.visualVariables = [colorVariable];\n  featureLayer.renderer = renderer;\n};\n\ncolorSlider.addEventListener(\"arcgisPropertyChange\", updateRendererFromSlider);"
+            }
+          ],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "min",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "min",
+          "reflectToAttr": false,
+          "docs": "The minimum value or lower bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the min value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the color variable of the appropriate renderer.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "const updateRendererFromSlider = () => {\n  const renderer = featureLayer.renderer?.clone();\n  if (!renderer || !(\"visualVariables\" in renderer) || !renderer.visualVariables?.[0]) {\n    return;\n  }\n\n  const colorVariable = renderer.visualVariables[0].clone() as __esri.ColorVariable;\n  colorVariable.stops = colorSlider.stops;\n\n  renderer.visualVariables = [colorVariable];\n  featureLayer.renderer = renderer;\n};\n\ncolorSlider.addEventListener(\"arcgisPropertyChange\", updateRendererFromSlider);"
+            }
+          ],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "precision",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "precision",
+          "reflectToAttr": false,
+          "docs": "Defines how slider thumb values should be rounded. This number indicates the number\nof decimal places slider thumb _values_ should round to when they have been moved.\n\nKeep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderViewModel.html#values) and shouldn't be used exclusively\nfor formatting purposes.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nslider.precision = 7;\n```"
+            }
+          ],
+          "default": "4",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "referenceElement",
+          "type": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string",
+          "complexType": {
+            "original": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string",
+            "resolved": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string",
+            "references": {
+              "HTMLArcgisLinkChartElement": {
+                "location": "local",
+                "path": "index.js",
+                "id": "notImplemented"
+              },
+              "HTMLArcgisMapElement": {
+                "location": "local",
+                "path": "index.js",
+                "id": "notImplemented"
+              },
+              "HTMLArcgisSceneElement": {
+                "location": "local",
+                "path": "index.js",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "mutable": true,
+          "attr": "reference-element",
+          "reflectToAttr": false,
+          "docs": "By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.",
+          "docsTags": [
+            {
+              "name": "see",
+              "text": "[Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)"
+            }
+          ],
+          "values": [
+            {
+              "type": "HTMLArcgisLinkChartElement"
+            },
+            {
+              "type": "HTMLArcgisMapElement"
+            },
+            {
+              "type": "HTMLArcgisSceneElement"
+            },
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "stops",
+          "type": "Array<ColorStop>",
+          "complexType": {
+            "original": "Array<ColorStop>",
+            "resolved": "Array<ColorStop>",
+            "references": {
+              "Array": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              },
+              "ColorStop": {
+                "location": "import",
+                "path": "@arcgis/core/renderers/visualVariables/support/ColorStop.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "mutable": true,
+          "reflectToAttr": false,
+          "docs": "The color stops from the [ColorVariable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-ColorVariable.html)\nto link to the slider. The colors in these stops will be used\nto render the color gradient on the slider's track. They should match the colors\nrendered in the associated layer's renderer.",
+          "docsTags": [
+            {
+              "name": "readonly",
+              "text": ""
+            }
+          ],
+          "values": [],
+          "optional": true,
+          "required": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "componentOnReady",
+          "returns": {
+            "type": "Promise<this>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(): Promise<this>",
+            "parameters": [],
+            "return": "Promise<this>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "componentOnReady(): Promise<this>",
+          "parameters": [],
+          "docs": "Create a promise that resolves once component is fully loaded.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nconst arcgisSliderColorLegacy = document.querySelector(\"arcgis-slider-color-legacy\");\ndocument.body.append(arcgisSliderColorLegacy);\nawait arcgisSliderColorLegacy.componentOnReady();\nconsole.log(\"arcgis-slider-color-legacy is ready to go!\");\n```"
+            },
+            {
+              "name": "inheritedFrom",
+              "text": "{\"name\":\"PublicLitElement\",\"module\":\"PublicLitElement\",\"package\":\"@arcgis/lumina\"}"
+            }
+          ]
+        },
+        {
+          "name": "destroy",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(): Promise<void>",
+            "parameters": [],
+            "return": "Promise<void>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "destroy(): Promise<void>",
+          "parameters": [],
+          "docs": "Permanently destroy the component.",
+          "docsTags": []
+        },
+        {
+          "name": "updateFromRendererResult",
+          "returns": {
+            "type": "void",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(rendererResult: ContinuousRendererResult, histogramResult?: HistogramResult): void",
+            "parameters": [
+              {
+                "name": "rendererResult",
+                "type": "ContinuousRendererResult",
+                "docs": ""
+              },
+              {
+                "name": "histogramResult",
+                "type": "HistogramResult | undefined",
+                "docs": ""
+              }
+            ],
+            "return": "void",
+            "references": {
+              "ContinuousRendererResult": {
+                "location": "import",
+                "path": "@arcgis/core/smartMapping/renderers/color.d.ts",
+                "id": "notImplemented"
+              },
+              "HistogramResult": {
+                "location": "import",
+                "path": "@arcgis/core/smartMapping/statistics/types.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "updateFromRendererResult(rendererResult: ContinuousRendererResult, histogramResult?: HistogramResult): void",
+          "parameters": [
+            {
+              "name": "rendererResult",
+              "type": "ContinuousRendererResult",
+              "docs": ""
+            },
+            {
+              "name": "histogramResult",
+              "type": "HistogramResult | undefined",
+              "docs": ""
+            }
+          ],
+          "docs": "A convenience function used to update the properties of a ColorSlider component instance from the\n[result](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-color.html#ContinuousRendererResult) of\nthe [createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-color.html#createContinuousRenderer)\nmethod. This method is used to configure an empty ColorSlider to be used with the layer data, and is useful for cases when the app allows the end user to switch data variables.\nNote that this method always expects `rendererResult` to be defined for the slider to function, but `histogramResult` is optional.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "rendererResult - The result object from the [createContinuousRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-color.html#createContinuousRenderer)\nmethod."
+            },
+            {
+              "name": "param",
+              "text": "histogramResult - The result histogram object from the [histogram](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-statistics-histogram.html)\nmethod."
+            },
+            {
+              "name": "example",
+              "text": "```js\nconst rendererResult = await colorRendererCreator.createContinuousRenderer(params);\n\nfeatureLayer.renderer = rendererResult.renderer;\n\nconst histogramResult = await histogram({\n  ...params,\n  numBins: 30,\n});\n\ncolorSlider.updateFromRendererResult(rendererResult, histogramResult);\n```"
+            }
+          ]
+        }
+      ],
+      "events": [
+        {
+          "event": "arcgisPropertyChange",
+          "detail": "{ name: \"max\" | \"min\" | \"precision\"; }",
+          "bubbles": true,
+          "complexType": {
+            "original": "{ name: \"max\" | \"min\" | \"precision\"; }",
+            "resolved": "{ name: \"max\" | \"min\" | \"precision\"; }",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the value of a property is changed. Use this to listen to changes to properties.",
+          "docsTags": []
+        },
+        {
+          "event": "arcgisReady",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the component associated with a map or scene view is ready to be interacted with.",
+          "docsTags": []
+        },
+        {
+          "event": "arcgisThumbChange",
+          "detail": "ThumbChangeEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "ThumbChangeEvent",
+            "resolved": "ThumbChangeEvent",
+            "references": {
+              "ThumbChangeEvent": {
+                "location": "import",
+                "path": "@arcgis/core/widgets/Slider/types.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider.",
+          "docsTags": []
+        },
+        {
+          "event": "arcgisThumbDrag",
+          "detail": "ThumbDragEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "ThumbDragEvent",
+            "resolved": "ThumbDragEvent",
+            "references": {
+              "ThumbDragEvent": {
+                "location": "import",
+                "path": "@arcgis/core/widgets/Slider/types.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fires when a user drags a thumb on the component.",
+          "docsTags": []
+        }
+      ],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "listeners": []
+    },
+    {
+      "filePath": "src/components/slider-color-size-legacy/slider-color-size-legacy.tsx",
+      "tag": "arcgis-slider-color-size-legacy",
+      "overview": "",
+      "readme": "",
+      "usage": {},
+      "docs": "The Color Size Slider (Legacy) component is intended for authoring and exploring data-driven visualizations in any\nlayer that can be rendered with a [ColorVariable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-ColorVariable.html) and\na [SizeVariable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-SizeVariable.html). Both visual variables should be used\nto visualize the same data variable.\n\nThis slider and visualization style is designed specifically for\n3D thematic visualizations where both size and color are used to visualize the same data variable in order\nto minimize confusion because of distortion in perception. For example, a visualization of extruded points\nmay be difficult to understand if two features of similar sizes (and therefore data values) are located\nfar apart from one another; the feature furthest from the [Camera](https://developers.arcgis.com/javascript/latest/api-reference/esri-Camera.html) will appear smaller than\nthe feature closer to the camera. The color variable can help the user understand that both features have similar values.\n\n![Slider Color Size with perspective](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/colorsizeslider-perspective.png \"Slider Color Size with perspective\")\n\n<span id=\"image-annotations\"></span>\nSee the image below for a summary of the configurable options available on this slider.\n\n![Slider Color Size with annotations](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/colorsizeslider-labels.png \"Slider Color Size with annotations\")\n\nThe [updateFromRendererResult()](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-ColorSizeSlider.html#fromRendererResult) method can be used to intelligently populate slider properties including\n[max](#max), [min](#min), [size visual variable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-SizeVariable.html) configuration,\n[color visual variable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-ColorVariable.html) configuration, and the slider's histogram after the\nrenderer has been created from the result of the [createContinuousRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-univariateColorSize.html#createContinuousRenderer) method.\n\n```js\nconst colorAndSizeRendererCreator = await import(\"@arcgis/core/smartMapping/renderers/univariateColorSize.js\");\nconst viewElement = document.querySelector(\"arcgis-map\")!;\nconst colorSizeSlider = document.querySelector(\"arcgis-slider-color-size\")!;\n\nconst featureLayer = new FeatureLayer({\n  url: \"https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Poverty_by_Age_Boundaries/FeatureServer/1\",\n});\n\nawait viewElement.viewOnReady();\nviewElement.map?.add(featureLayer);\n\nconst params = {\n  layer: featureLayer,\n  field: \"B17020_calc_pctPovE\",\n  view: viewElement.view,\n};\n\nconst rendererResult = await colorAndSizeRendererCreator.createContinuousRenderer(params);\n\nfeatureLayer.renderer = rendererResult.renderer;\n\nconst histogramResult = await histogram({\n  ...params,\n  numBins: 30,\n});\n\nawait colorSizeSlider?.updateFromRendererResult(rendererResult, histogramResult);\n```\n\nThis slider should be used to update the matching [color](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-ColorVariable.html)\nand [size](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-SizeVariable.html) visual variables in a layer's renderer. It is the responsibility of the app developer\nto set up event listeners on this slider that update these variables in the appropriate renderer.\n\n```js\nconst updateRendererFromSlider = () => {\n  const renderer = featureLayer?.renderer?.clone();\n  if (!renderer || !(\"visualVariables\" in renderer) || !renderer.visualVariables?.[0]) {\n    return;\n  }\n  renderer.visualVariables = colorSizeSlider.updateVisualVariables(\n    renderer.visualVariables as VisualVariable[],\n  );\n  featureLayer.renderer = renderer;\n};\n\ncolorSizeSlider.addEventListener(\"arcgisThumbChange\", updateRendererFromSlider);\ncolorSizeSlider.addEventListener(\"arcgisThumbDrag\", updateRendererFromSlider);\n```",
+      "docsTags": [
+        {
+          "name": "since",
+          "text": "5.0.0"
+        },
+        {
+          "name": "see",
+          "text": "[ColorSizeSliderViewModel](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-ColorSizeSlider-ColorSizeSliderViewModel.html)"
+        },
+        {
+          "name": "see",
+          "text": "[univariateColorSizeRendererCreator](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-univariateColorSize.html)"
+        },
+        {
+          "name": "superclass",
+          "text": "{\"name\":\"PublicLitElement\",\"module\":\"PublicLitElement\",\"package\":\"@arcgis/lumina\"}"
+        }
+      ],
+      "encapsulation": "shadow",
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {},
+      "props": [
+        {
+          "name": "autoDestroyDisabled",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "auto-destroy-disabled",
+          "reflectToAttr": false,
+          "docs": "If true, the component will not be destroyed automatically when it is\ndisconnected from the document. This is useful when you want to move the\ncomponent to a different place on the page, or temporarily hide it. If this\nis set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-color-size-legacy/#destroy) method when you are done to\nprevent memory leaks.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "icon",
+          "type": "IconName",
+          "complexType": {
+            "original": "IconName",
+            "resolved": "IconName",
+            "references": {
+              "IconName": {
+                "location": "import",
+                "path": "@esri/calcite-components/dist/components/calcite-icon/interfaces.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "mutable": true,
+          "reflectToAttr": false,
+          "docs": "Icon which represents the widget. It is typically used when the widget is controlled by another\none (e.g. in the Expand widget).",
+          "docsTags": [
+            {
+              "name": "see",
+              "text": "[Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)"
+            }
+          ],
+          "values": [],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "max",
+          "reflectToAttr": false,
+          "docs": "The maximum value or upper bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the color and size variables of the appropriate renderer.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nconst updateRendererFromSlider = () => {\n  const renderer = featureLayer?.renderer?.clone();\n  if (!renderer || !(\"visualVariables\" in renderer) || !renderer.visualVariables?.[0]) {\n    return;\n  }\n  renderer.visualVariables = colorSizeSlider.updateVisualVariables(\n    renderer.visualVariables as VisualVariable[],\n  );\n  featureLayer.renderer = renderer;\n};\n\ncolorSizeSlider.addEventListener(\"arcgisPropertyChange\", updateRendererFromSlider);\n```"
+            }
+          ],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "min",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "min",
+          "reflectToAttr": false,
+          "docs": "The minimum value or lower bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the color and size variables of the appropriate renderer.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nconst updateRendererFromSlider = () => {\n  const renderer = featureLayer?.renderer?.clone();\n  if (!renderer || !(\"visualVariables\" in renderer) || !renderer.visualVariables?.[0]) {\n    return;\n  }\n  renderer.visualVariables = colorSizeSlider.updateVisualVariables(\n    renderer.visualVariables as VisualVariable[],\n  );\n  featureLayer.renderer = renderer;\n};\n\ncolorSizeSlider.addEventListener(\"arcgisPropertyChange\", updateRendererFromSlider);"
+            }
+          ],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "precision",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "precision",
+          "reflectToAttr": false,
+          "docs": "Defines how slider thumb values should be rounded. This number indicates the number\nof decimal places slider thumb _values_ should round to when they have been moved.\n\nKeep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderViewModel.html#values) and shouldn't be used exclusively\nfor formatting purposes.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nslider.precision = 7;\n```"
+            }
+          ],
+          "default": "4",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "referenceElement",
+          "type": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string",
+          "complexType": {
+            "original": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string",
+            "resolved": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string",
+            "references": {
+              "HTMLArcgisLinkChartElement": {
+                "location": "local",
+                "path": "index.js",
+                "id": "notImplemented"
+              },
+              "HTMLArcgisMapElement": {
+                "location": "local",
+                "path": "index.js",
+                "id": "notImplemented"
+              },
+              "HTMLArcgisSceneElement": {
+                "location": "local",
+                "path": "index.js",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "mutable": true,
+          "attr": "reference-element",
+          "reflectToAttr": false,
+          "docs": "By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.",
+          "docsTags": [
+            {
+              "name": "see",
+              "text": "[Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)"
+            }
+          ],
+          "values": [
+            {
+              "type": "HTMLArcgisLinkChartElement"
+            },
+            {
+              "type": "HTMLArcgisMapElement"
+            },
+            {
+              "type": "HTMLArcgisSceneElement"
+            },
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "state",
+          "type": "\"disabled\" | \"ready\"",
+          "complexType": {
+            "original": "\"disabled\" | \"ready\"",
+            "resolved": "\"disabled\" | \"ready\"",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "state",
+          "reflectToAttr": false,
+          "docs": "The current state of the component.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string",
+              "value": "disabled"
+            },
+            {
+              "type": "string",
+              "value": "ready"
+            }
+          ],
+          "optional": true,
+          "required": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "componentOnReady",
+          "returns": {
+            "type": "Promise<this>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(): Promise<this>",
+            "parameters": [],
+            "return": "Promise<this>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "componentOnReady(): Promise<this>",
+          "parameters": [],
+          "docs": "Create a promise that resolves once component is fully loaded.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nconst arcgisSliderColorSizeLegacy = document.querySelector(\"arcgis-slider-color-size-legacy\");\ndocument.body.append(arcgisSliderColorSizeLegacy);\nawait arcgisSliderColorSizeLegacy.componentOnReady();\nconsole.log(\"arcgis-slider-color-size-legacy is ready to go!\");\n```"
+            },
+            {
+              "name": "inheritedFrom",
+              "text": "{\"name\":\"PublicLitElement\",\"module\":\"PublicLitElement\",\"package\":\"@arcgis/lumina\"}"
+            }
+          ]
+        },
+        {
+          "name": "destroy",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(): Promise<void>",
+            "parameters": [],
+            "return": "Promise<void>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "destroy(): Promise<void>",
+          "parameters": [],
+          "docs": "Permanently destroy the component.",
+          "docsTags": []
+        },
+        {
+          "name": "updateFromRendererResult",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(rendererResult: RendererResult, histogramResult?: HistogramResult): Promise<void>",
+            "parameters": [
+              {
+                "name": "rendererResult",
+                "type": "RendererResult",
+                "docs": ""
+              },
+              {
+                "name": "histogramResult",
+                "type": "HistogramResult | undefined",
+                "docs": ""
+              }
+            ],
+            "return": "Promise<void>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              },
+              "RendererResult": {
+                "location": "import",
+                "path": "@arcgis/core/smartMapping/renderers/univariateColorSize.d.ts",
+                "id": "notImplemented"
+              },
+              "HistogramResult": {
+                "location": "import",
+                "path": "@arcgis/core/smartMapping/statistics/types.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "updateFromRendererResult(rendererResult: RendererResult, histogramResult?: HistogramResult): Promise<void>",
+          "parameters": [
+            {
+              "name": "rendererResult",
+              "type": "RendererResult",
+              "docs": ""
+            },
+            {
+              "name": "histogramResult",
+              "type": "HistogramResult | undefined",
+              "docs": ""
+            }
+          ],
+          "docs": "A convenience function used to update the properties of a Slider Color Size component instance from the\n[result](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-univariateColorSize.html#RendererResult) of\nthe [createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-univariateColorSize.html#createContinuousRenderer)\nmethod. Note that this method always expects `rendererResult` to be defined for the slider to function, but `histogramResult` is optional.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "rendererResult - The result object from the [createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-univariateColorSize.html#createContinuousRenderer)\nmethod."
+            },
+            {
+              "name": "param",
+              "text": "histogramResult - The result histogram object from the [histogram()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-statistics-histogram.html#histogram)\nmethod."
+            },
+            {
+              "name": "example",
+              "text": "```js\nconst rendererResult = await colorAndSizeRendererCreator.createContinuousRenderer(params);\n\nfeatureLayer.renderer = rendererResult.renderer;\n\nconst histogramResult = await histogram({\n  ...params,\n  numBins: 30,\n});\n\nawait colorSizeSlider?.updateFromRendererResult(rendererResult, histogramResult);\n```"
+            }
+          ]
+        },
+        {
+          "name": "updateVisualVariables",
+          "returns": {
+            "type": "Array<SizeVariable | ColorVariable>",
+            "docs": "Returns the input visual variables updated to match the current slider values. These should be set directly\nback to the renderer where they came from."
+          },
+          "complexType": {
+            "signature": "(variables: VisualVariable[]): VisualVariable[]",
+            "parameters": [
+              {
+                "name": "variables",
+                "type": "Array<SizeVariable | ColorVariable>",
+                "docs": ""
+              }
+            ],
+            "return": "Array<SizeVariable | ColorVariable>",
+            "references": {
+              "Array": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              },
+              "SizeVariable": {
+                "location": "import",
+                "path": "@arcgis/core/renderers/visualVariables/SizeVariable.d.ts",
+                "id": "notImplemented"
+              },
+              "ColorVariable": {
+                "location": "import",
+                "path": "@arcgis/core/renderers/visualVariables/ColorVariable.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "updateVisualVariables(variables: VisualVariable[]): VisualVariable[]",
+          "parameters": [
+            {
+              "name": "variables",
+              "type": "Array<SizeVariable | ColorVariable>",
+              "docs": ""
+            }
+          ],
+          "docs": "A convenience function used to update the visual variables of a renderer generated with the\n[createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-univariateColorSize.html#createContinuousRenderer)\nmethod with the values obtained from the slider. This method is useful for cases when the app allows the end user to switch data variables\nused to render the data.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "variables - The visual variables to update from the renderer associated with the slider. The properties of the\ncolor and size variables will update based on the slider thumb values."
+            },
+            {
+              "name": "returns",
+              "text": "Returns the input visual variables updated to match the current slider values. These should be set directly\nback to the renderer where they came from."
+            },
+            {
+              "name": "example",
+              "text": "```js\nconst renderer = featureLayer?.renderer?.clone();\nrenderer.visualVariables = colorSizeSlider.updateVisualVariables(renderer.visualVariables as VisualVariable[]);\nfeatureLayer.renderer = renderer;\n```"
+            }
+          ]
+        }
+      ],
+      "events": [
+        {
+          "event": "arcgisPropertyChange",
+          "detail": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+          "bubbles": true,
+          "complexType": {
+            "original": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+            "resolved": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the value of a property is changed. Use this to listen to changes to properties.",
+          "docsTags": []
+        },
+        {
+          "event": "arcgisReady",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the component associated with a map or scene view is ready to be interacted with.",
+          "docsTags": []
+        },
+        {
+          "event": "arcgisThumbChange",
+          "detail": "ThumbChangeEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "ThumbChangeEvent",
+            "resolved": "ThumbChangeEvent",
+            "references": {
+              "ThumbChangeEvent": {
+                "location": "import",
+                "path": "@arcgis/core/widgets/Slider/types.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider.",
+          "docsTags": []
+        },
+        {
+          "event": "arcgisThumbDrag",
+          "detail": "ThumbDragEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "ThumbDragEvent",
+            "resolved": "ThumbDragEvent",
+            "references": {
+              "ThumbDragEvent": {
+                "location": "import",
+                "path": "@arcgis/core/widgets/Slider/types.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fires when a user drags a thumb on the component.",
+          "docsTags": []
+        }
+      ],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "listeners": []
+    },
+    {
+      "filePath": "src/components/slider-heatmap-legacy/slider-heatmap-legacy.tsx",
+      "tag": "arcgis-slider-heatmap-legacy",
+      "overview": "",
+      "readme": "",
+      "usage": {},
+      "docs": "The Heatmap Slider (Legacy) component is intended for authoring and exploring data-driven visualizations in any\nlayer that can be rendered with a [HeatmapRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-HeatmapRenderer.html).\n\n<span id=\"image-annotations\"></span>\nSee the image below for a summary of the configurable options available on this slider.\n\n![HeatmapSlider with annotations](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/heatmapslider-labels.png \"HeatmapSlider with annotations\")\n\n```js\nconst viewElement = document.querySelector(\"arcgis-map\")!;\nconst heatmapSlider = document.querySelector(\"arcgis-slider-heatmap-legacy\")!;\n\nconst layer = new CSVLayer({\n  url: \"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv\",\n});\n\nawait viewElement.viewOnReady();\nviewElement.map?.add(layer);\n\nconst params = {\n  layer,\n  valueExpression: \"($feature.mag)\",\n  view: viewElement.view,\n};\n\nconst rendererResult = await heatmapRendererCreator.createRenderer(params);\n\nlayer.renderer = rendererResult.renderer;\n\nheatmapSlider.stops = rendererResult.renderer.colorStops;\n```\n\nThis slider should be used to update the [colorStops](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-HeatmapRenderer.html#colorStops)\nproperty in a HeatmapRenderer. It is the responsibility of the app developer\nto set up event listeners on this slider to update the renderer's colorStops based on how the [stops](#stops) property was recalculated.\n\n```js\nconst updateRendererFromSlider = () => {\n  const renderer = layer.renderer?.clone();\n  if (!renderer || !(\"colorStops\" in renderer)) {\n    return;\n  }\n  renderer.colorStops = heatmapSlider.stops;\n  layer.renderer = renderer;\n};\n\nheatmapSlider.addEventListener(\"arcgisThumbChange\", updateRendererFromSlider);\nheatmapSlider.addEventListener(\"arcgisThumbDrag\", updateRendererFromSlider);\n```",
+      "docsTags": [
+        {
+          "name": "since",
+          "text": "5.0.0"
+        },
+        {
+          "name": "see",
+          "text": "[HeatmapSliderViewModel](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-HeatmapSlider-HeatmapSliderViewModel.html)"
+        },
+        {
+          "name": "see",
+          "text": "[heatmapRendererCreator](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-heatmap.html)"
+        },
+        {
+          "name": "superclass",
+          "text": "{\"name\":\"PublicLitElement\",\"module\":\"PublicLitElement\",\"package\":\"@arcgis/lumina\"}"
+        }
+      ],
+      "encapsulation": "shadow",
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {},
+      "props": [
+        {
+          "name": "autoDestroyDisabled",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "auto-destroy-disabled",
+          "reflectToAttr": false,
+          "docs": "If true, the component will not be destroyed automatically when it is\ndisconnected from the document. This is useful when you want to move the\ncomponent to a different place on the page, or temporarily hide it. If this\nis set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-heatmap-legacy/#destroy) method when you are done to\nprevent memory leaks.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "icon",
+          "type": "IconName",
+          "complexType": {
+            "original": "IconName",
+            "resolved": "IconName",
+            "references": {
+              "IconName": {
+                "location": "import",
+                "path": "@esri/calcite-components/dist/components/calcite-icon/interfaces.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "mutable": true,
+          "reflectToAttr": false,
+          "docs": "Icon which represents the widget. It is typically used when the widget is controlled by another\none (e.g. in the Expand widget).",
+          "docsTags": [
+            {
+              "name": "see",
+              "text": "[Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)"
+            }
+          ],
+          "values": [],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": true,
+          "reflectToAttr": false,
+          "docs": "The maximum value or upper bound of the slider.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nslider.max = 150;\n```"
+            },
+            {
+              "name": "readonly",
+              "text": ""
+            }
+          ],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "min",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": true,
+          "reflectToAttr": false,
+          "docs": "The minimum value or lower bound of the slider.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nslider.min = -150;\n```"
+            },
+            {
+              "name": "readonly",
+              "text": ""
+            }
+          ],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "precision",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "precision",
+          "reflectToAttr": false,
+          "docs": "Defines how slider thumb values should be rounded. This number indicates the number\nof decimal places slider thumb _values_ should round to when they have been moved.\n\nKeep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderViewModel.html#values) and shouldn't be used exclusively\nfor formatting purposes.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nslider.precision = 7;\n```"
+            }
+          ],
+          "default": "4",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "referenceElement",
+          "type": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string",
+          "complexType": {
+            "original": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string",
+            "resolved": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string",
+            "references": {
+              "HTMLArcgisLinkChartElement": {
+                "location": "local",
+                "path": "index.js",
+                "id": "notImplemented"
+              },
+              "HTMLArcgisMapElement": {
+                "location": "local",
+                "path": "index.js",
+                "id": "notImplemented"
+              },
+              "HTMLArcgisSceneElement": {
+                "location": "local",
+                "path": "index.js",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "mutable": true,
+          "attr": "reference-element",
+          "reflectToAttr": false,
+          "docs": "By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.",
+          "docsTags": [
+            {
+              "name": "see",
+              "text": "[Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)"
+            }
+          ],
+          "values": [
+            {
+              "type": "HTMLArcgisLinkChartElement"
+            },
+            {
+              "type": "HTMLArcgisMapElement"
+            },
+            {
+              "type": "HTMLArcgisSceneElement"
+            },
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "state",
+          "type": "\"disabled\" | \"ready\"",
+          "complexType": {
+            "original": "\"disabled\" | \"ready\"",
+            "resolved": "\"disabled\" | \"ready\"",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "state",
+          "reflectToAttr": false,
+          "docs": "The current state of the component.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string",
+              "value": "disabled"
+            },
+            {
+              "type": "string",
+              "value": "ready"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "stops",
+          "type": "Array<HeatmapColorStop>",
+          "complexType": {
+            "original": "Array<HeatmapColorStop>",
+            "resolved": "Array<HeatmapColorStop>",
+            "references": {
+              "Array": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              },
+              "HeatmapColorStop": {
+                "location": "import",
+                "path": "@arcgis/core/renderers/support/HeatmapColorStop.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "mutable": true,
+          "reflectToAttr": false,
+          "docs": "The color stops of the [HeatmapRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-HeatmapRenderer.html) to associate with the slider.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nslider.stops = [\n  { color: \"rgba(63, 40, 102, 0)\", ratio: 0 },\n  { color: \"#472b77\", ratio: 0.083 },\n  { color: \"#4e2d87\", ratio: 0.166 },\n  { color: \"#563098\", ratio: 0.249 },\n  { color: \"#5d32a8\", ratio: 0.332 },\n  { color: \"#6735be\", ratio: 0.415 },\n  { color: \"#7139d4\", ratio: 0.498 },\n  { color: \"#7b3ce9\", ratio: 0.581 },\n  { color: \"#853fff\", ratio: 0.664 },\n  { color: \"#a46fbf\", ratio: 0.747 },\n  { color: \"#c29f80\", ratio: 0.83 },\n  { color: \"#e0cf40\", ratio: 0.913 },\n  { color: \"#ffff00\", ratio: 1 }\n];"
+            },
+            {
+              "name": "example",
+              "text": "slider.stops = rendererResult.renderer.colorStops;\n```"
+            }
+          ],
+          "values": [],
+          "optional": true,
+          "required": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "componentOnReady",
+          "returns": {
+            "type": "Promise<this>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(): Promise<this>",
+            "parameters": [],
+            "return": "Promise<this>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "componentOnReady(): Promise<this>",
+          "parameters": [],
+          "docs": "Create a promise that resolves once component is fully loaded.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nconst arcgisSliderHeatmapLegacy = document.querySelector(\"arcgis-slider-heatmap-legacy\");\ndocument.body.append(arcgisSliderHeatmapLegacy);\nawait arcgisSliderHeatmapLegacy.componentOnReady();\nconsole.log(\"arcgis-slider-heatmap-legacy is ready to go!\");\n```"
+            },
+            {
+              "name": "inheritedFrom",
+              "text": "{\"name\":\"PublicLitElement\",\"module\":\"PublicLitElement\",\"package\":\"@arcgis/lumina\"}"
+            }
+          ]
+        },
+        {
+          "name": "destroy",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(): Promise<void>",
+            "parameters": [],
+            "return": "Promise<void>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "destroy(): Promise<void>",
+          "parameters": [],
+          "docs": "Permanently destroy the component.",
+          "docsTags": []
+        }
+      ],
+      "events": [
+        {
+          "event": "arcgisPropertyChange",
+          "detail": "{ name: \"state\" | \"precision\"; }",
+          "bubbles": true,
+          "complexType": {
+            "original": "{ name: \"state\" | \"precision\"; }",
+            "resolved": "{ name: \"state\" | \"precision\"; }",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the value of a property is changed. Use this to listen to changes to properties.",
+          "docsTags": []
+        },
+        {
+          "event": "arcgisReady",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the component associated with a map or scene view is ready to be interacted with.",
+          "docsTags": []
+        },
+        {
+          "event": "arcgisThumbChange",
+          "detail": "ThumbChangeEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "ThumbChangeEvent",
+            "resolved": "ThumbChangeEvent",
+            "references": {
+              "ThumbChangeEvent": {
+                "location": "import",
+                "path": "@arcgis/core/widgets/Slider/types.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider.",
+          "docsTags": []
+        },
+        {
+          "event": "arcgisThumbDrag",
+          "detail": "ThumbDragEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "ThumbDragEvent",
+            "resolved": "ThumbDragEvent",
+            "references": {
+              "ThumbDragEvent": {
+                "location": "import",
+                "path": "@arcgis/core/widgets/Slider/types.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fires when a user drags a thumb on the component.",
+          "docsTags": []
+        }
+      ],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "listeners": []
+    },
+    {
+      "filePath": "src/components/slider-opacity-legacy/slider-opacity-legacy.tsx",
+      "tag": "arcgis-slider-opacity-legacy",
+      "overview": "",
+      "readme": "",
+      "usage": {},
+      "docs": "The Opacity Slider (Legacy) component is intended for authoring and exploring data-driven visualizations in any\nlayer that can be rendered with an [OpacityVariable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-OpacityVariable.html).\n\n<span id=\"image-annotations\"></span>\nSee the image below for a summary of the configurable options available on this slider.\n\n![OpacitySlider with annotations](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/opacityslider-labels.png \"OpacitySlider with annotations\")\n\nThe [updateFromVisualVariableResult()](#updateFromVisualVariableResult()) method can be used to intelligently populate slider properties including [max](#max), [min](#min),\nthe [opacity visual variable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-OpacityVariable.html) configuration,\nand the slider's histogram after the renderer has been created from the result of the\n[createVisualVariable()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-opacity.html#createVisualVariable) method.\n\n```js\nconst opacityVariableCreator = await import(\"@arcgis/core/smartMapping/renderers/opacity.js\");\nconst viewElement = document.querySelector(\"arcgis-map\")!;\nconst opacitySlider = document.querySelector(\"arcgis-slider-opacity\")!;\n\nconst featureLayer = new FeatureLayer({\n  url: \"https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/USA_Census_2020_DHC_Total_Population/FeatureServer/2\",\n});\n\nawait viewElement.viewOnReady();\nviewElement.map?.add(featureLayer);\n\nconst params = {\n  layer: featureLayer,\n  view: viewElement.view,\n  field: \"P002_calc_pct0002\",\n};\n\nconst variableResult = await opacityVariableCreator.createVisualVariable(params);\n\nif (featureLayer.renderer && \"visualVariables\" in featureLayer.renderer) {\n  featureLayer.renderer.visualVariables = [variableResult.visualVariable];\n}\n\nconst histogramResult = await histogram({\n  ...params,\n  numBins: 30,\n});\n\nawait opacitySlider.updateFromVisualVariableResult(variableResult, histogramResult);\n```\n\nThis slider should be used to update an [opacity visual variable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-OpacityVariable.html)\nin a layer's renderer. It is the responsibility of the app developer\nto set up event listeners on this slider to update the opacity variable of the appropriate renderer.\n\n```js\nconst updateRendererFromSlider = () => {\n  const renderer = featureLayer.renderer?.clone();\n  if (!renderer || !(\"visualVariables\" in renderer) || !renderer.visualVariables?.[0]) {\n    return;\n  }\n\n  const visualVariable = renderer.visualVariables[0];\n  if (visualVariable.type !== \"opacity\") {\n    return;\n  }\n\n  const opacityVariable = visualVariable.clone();\n  opacityVariable.stops = opacitySlider.stops;\n  renderer.visualVariables = [opacityVariable];\n  featureLayer.renderer = renderer;\n};\n\nopacitySlider.addEventListener(\"arcgisThumbChange\", updateRendererFromSlider);\nopacitySlider.addEventListener(\"arcgisThumbDrag\", updateRendererFromSlider);\n```",
+      "docsTags": [
+        {
+          "name": "since",
+          "text": "5.0.0"
+        },
+        {
+          "name": "see",
+          "text": "[OpacitySliderViewModel](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-OpacitySlider-OpacitySliderViewModel.html)"
+        },
+        {
+          "name": "see",
+          "text": "[opacityVariableCreator](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-opacity.html)"
+        },
+        {
+          "name": "superclass",
+          "text": "{\"name\":\"PublicLitElement\",\"module\":\"PublicLitElement\",\"package\":\"@arcgis/lumina\"}"
+        }
+      ],
+      "encapsulation": "shadow",
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {},
+      "props": [
+        {
+          "name": "autoDestroyDisabled",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "auto-destroy-disabled",
+          "reflectToAttr": false,
+          "docs": "If true, the component will not be destroyed automatically when it is\ndisconnected from the document. This is useful when you want to move the\ncomponent to a different place on the page, or temporarily hide it. If this\nis set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-opacity-legacy/#destroy) method when you are done to\nprevent memory leaks.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "icon",
+          "type": "IconName",
+          "complexType": {
+            "original": "IconName",
+            "resolved": "IconName",
+            "references": {
+              "IconName": {
+                "location": "import",
+                "path": "@esri/calcite-components/dist/components/calcite-icon/interfaces.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "mutable": true,
+          "reflectToAttr": false,
+          "docs": "Icon which represents the widget. It is typically used when the widget is controlled by another\none (e.g. in the Expand widget).",
+          "docsTags": [
+            {
+              "name": "see",
+              "text": "[Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)"
+            }
+          ],
+          "values": [],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "max",
+          "reflectToAttr": false,
+          "docs": "The maximum value or upper bound of the slider. Once the slider has rendered with the [updateFromVisualVariableResult()](#updateFromVisualVariableResult) method,\nthe user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the opacity variable of the appropriate renderer.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nconst updateRendererFromSlider = () => {\n  const renderer = featureLayer.renderer?.clone();\n  if (!renderer || !(\"visualVariables\" in renderer) || !renderer.visualVariables?.[0]) {\n    return;\n  }\n\n  const visualVariable = renderer.visualVariables[0];\n  if (visualVariable.type !== \"opacity\") {\n    return;\n  }\n\n  const opacityVariable = visualVariable.clone();\n  opacityVariable.stops = opacitySlider.stops;\n  renderer.visualVariables = [opacityVariable];\n  featureLayer.renderer = renderer;\n};\n\nopacitySlider.addEventListener(\"arcgisPropertyChange\", updateRendererFromSlider);\n```"
+            }
+          ],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "min",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "min",
+          "reflectToAttr": false,
+          "docs": "The minimum value or lower bound of the slider. Once the slider has rendered with the [updateFromVisualVariableResult()](#updateFromVisualVariableResult) method,\nthe user may change this property by selecting the label containing the min value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the opacity variable of the appropriate renderer.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nconst updateRendererFromSlider = () => {\n  const renderer = featureLayer.renderer?.clone();\n  if (!renderer || !(\"visualVariables\" in renderer) || !renderer.visualVariables?.[0]) {\n    return;\n  }\n\n  const visualVariable = renderer.visualVariables[0];\n  if (visualVariable.type !== \"opacity\") {\n    return;\n  }\n\n  const opacityVariable = visualVariable.clone();\n  opacityVariable.stops = opacitySlider.stops;\n  renderer.visualVariables = [opacityVariable];\n  featureLayer.renderer = renderer;\n};\n\nopacitySlider.addEventListener(\"arcgisPropertyChange\", updateRendererFromSlider);\n```"
+            }
+          ],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "precision",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "precision",
+          "reflectToAttr": false,
+          "docs": "Defines how slider thumb values should be rounded. This number indicates the number\nof decimal places slider thumb _values_ should round to when they have been moved.\n\nKeep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderViewModel.html#values) and shouldn't be used exclusively\nfor formatting purposes.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nslider.precision = 7;\n```"
+            }
+          ],
+          "default": "4",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "referenceElement",
+          "type": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string",
+          "complexType": {
+            "original": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string",
+            "resolved": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string",
+            "references": {
+              "HTMLArcgisLinkChartElement": {
+                "location": "local",
+                "path": "index.js",
+                "id": "notImplemented"
+              },
+              "HTMLArcgisMapElement": {
+                "location": "local",
+                "path": "index.js",
+                "id": "notImplemented"
+              },
+              "HTMLArcgisSceneElement": {
+                "location": "local",
+                "path": "index.js",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "mutable": true,
+          "attr": "reference-element",
+          "reflectToAttr": false,
+          "docs": "By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.",
+          "docsTags": [
+            {
+              "name": "see",
+              "text": "[Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)"
+            }
+          ],
+          "values": [
+            {
+              "type": "HTMLArcgisLinkChartElement"
+            },
+            {
+              "type": "HTMLArcgisMapElement"
+            },
+            {
+              "type": "HTMLArcgisSceneElement"
+            },
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "state",
+          "type": "\"disabled\" | \"ready\"",
+          "complexType": {
+            "original": "\"disabled\" | \"ready\"",
+            "resolved": "\"disabled\" | \"ready\"",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "state",
+          "reflectToAttr": false,
+          "docs": "The current state of the component.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string",
+              "value": "disabled"
+            },
+            {
+              "type": "string",
+              "value": "ready"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "stops",
+          "type": "Array<OpacityStop>",
+          "complexType": {
+            "original": "Array<OpacityStop>",
+            "resolved": "Array<OpacityStop>",
+            "references": {
+              "Array": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              },
+              "OpacityStop": {
+                "location": "import",
+                "path": "@arcgis/core/renderers/visualVariables/support/OpacityStop.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "mutable": true,
+          "reflectToAttr": false,
+          "docs": "The opacity stops from the [OpacityVariable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-OpacityVariable.html)\nto link to the slider. The opacity values in these stops will be used\nto render the gradient on the slider. They should match the opacity\nrendered in the associated layer's opacity visual variable.",
+          "docsTags": [
+            {
+              "name": "readonly",
+              "text": ""
+            }
+          ],
+          "values": [],
+          "optional": true,
+          "required": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "componentOnReady",
+          "returns": {
+            "type": "Promise<this>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(): Promise<this>",
+            "parameters": [],
+            "return": "Promise<this>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "componentOnReady(): Promise<this>",
+          "parameters": [],
+          "docs": "Create a promise that resolves once component is fully loaded.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nconst arcgisSliderOpacityLegacy = document.querySelector(\"arcgis-slider-opacity-legacy\");\ndocument.body.append(arcgisSliderOpacityLegacy);\nawait arcgisSliderOpacityLegacy.componentOnReady();\nconsole.log(\"arcgis-slider-opacity-legacy is ready to go!\");\n```"
+            },
+            {
+              "name": "inheritedFrom",
+              "text": "{\"name\":\"PublicLitElement\",\"module\":\"PublicLitElement\",\"package\":\"@arcgis/lumina\"}"
+            }
+          ]
+        },
+        {
+          "name": "destroy",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(): Promise<void>",
+            "parameters": [],
+            "return": "Promise<void>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "destroy(): Promise<void>",
+          "parameters": [],
+          "docs": "Permanently destroy the component.",
+          "docsTags": []
+        },
+        {
+          "name": "updateFromVisualVariableResult",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(visualVariable: VisualVariableResult, histogramResult?: HistogramResult): Promise<void>",
+            "parameters": [
+              {
+                "name": "visualVariable",
+                "type": "VisualVariableResult",
+                "docs": ""
+              },
+              {
+                "name": "histogramResult",
+                "type": "HistogramResult | undefined",
+                "docs": ""
+              }
+            ],
+            "return": "Promise<void>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              },
+              "VisualVariableResult": {
+                "location": "import",
+                "path": "@arcgis/core/smartMapping/renderers/opacity.d.ts",
+                "id": "notImplemented"
+              },
+              "HistogramResult": {
+                "location": "import",
+                "path": "@arcgis/core/smartMapping/statistics/types.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "updateFromVisualVariableResult(visualVariable: VisualVariableResult, histogramResult?: HistogramResult): Promise<void>",
+          "parameters": [
+            {
+              "name": "visualVariable",
+              "type": "VisualVariableResult",
+              "docs": ""
+            },
+            {
+              "name": "histogramResult",
+              "type": "HistogramResult | undefined",
+              "docs": ""
+            }
+          ],
+          "docs": "A convenience function used to update the properties of an OpacitySlider component instance from the\n[result](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-opacity.html#VisualVariableResult) of\nthe [createVisualVariable()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-opacity.html#createVisualVariable)\nmethod. This method is used to configure an empty OpacitySlider to be used with the layer data, and is useful for cases when the app allows the end user to switch data variables.\nNote that this method always expects `rendererResult` to be defined for the slider to function, but `histogramResult` is optional.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "visualVariableResult - The result object from the [createVisualVariable()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-opacity.html#createVisualVariable)\nmethod."
+            },
+            {
+              "name": "param",
+              "text": "histogramResult - The result histogram object from the [histogram()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-statistics-histogram.html#histogram)\nmethod."
+            },
+            {
+              "name": "example",
+              "text": "```js\nconst opacityVariableCreator = await import(\"@arcgis/core/smartMapping/renderers/opacity.js\");\nconst variableResult = await opacityVariableCreator.createVisualVariable(params);\n\nif (featureLayer.renderer && \"visualVariables\" in featureLayer.renderer) {\n  featureLayer.renderer.visualVariables = [variableResult.visualVariable];\n}\n\nconst histogramResult = await histogram({\n  ...params,\n  numBins: 30,\n});\n\nawait opacitySlider.updateFromVisualVariableResult(variableResult, histogramResult);\n```"
+            }
+          ]
+        }
+      ],
+      "events": [
+        {
+          "event": "arcgisPropertyChange",
+          "detail": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+          "bubbles": true,
+          "complexType": {
+            "original": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+            "resolved": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the value of a property is changed. Use this to listen to changes to properties.",
+          "docsTags": []
+        },
+        {
+          "event": "arcgisReady",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the component associated with a map or scene view is ready to be interacted with.",
+          "docsTags": []
+        },
+        {
+          "event": "arcgisThumbChange",
+          "detail": "ThumbChangeEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "ThumbChangeEvent",
+            "resolved": "ThumbChangeEvent",
+            "references": {
+              "ThumbChangeEvent": {
+                "location": "import",
+                "path": "@arcgis/core/widgets/Slider/types.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider.",
+          "docsTags": []
+        },
+        {
+          "event": "arcgisThumbDrag",
+          "detail": "ThumbDragEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "ThumbDragEvent",
+            "resolved": "ThumbDragEvent",
+            "references": {
+              "ThumbDragEvent": {
+                "location": "import",
+                "path": "@arcgis/core/widgets/Slider/types.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fires when a user drags a thumb on the component.",
+          "docsTags": []
+        }
+      ],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "listeners": []
+    },
+    {
+      "filePath": "src/components/slider-size-legacy/slider-size-legacy.tsx",
+      "tag": "arcgis-slider-size-legacy",
+      "overview": "",
+      "readme": "",
+      "usage": {},
+      "docs": "The Size Slider (Legacy) component is intended for authoring and exploring data-driven visualizations in any\nlayer that can be rendered with a [SizeVariable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-SizeVariable.html).\n\n<span id=\"image-annotations\"></span>\nSee the image below for a summary of the configurable options available on this slider.\n\n![SizeSlider with annotations](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/sizeslider-labels.png \"SizeSlider with annotations\")\n\nThe [updateFromRendererResult()](#updateFromRendererResult) method can be used to intelligently populate slider properties including\n[max](#max), [min](#min), [size visual variable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-SizeVariable.html)\nintervals, and the slider's histogram after the renderer has been created from the result of the\n[createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-size.html#createContinuousRenderer) method.\n\n```js\nconst sizeRendererCreator = await import(\"@arcgis/core/smartMapping/renderers/size.js\");\nconst viewElement = document.querySelector(\"arcgis-map\")!;\nconst sizeSlider = document.querySelector(\"arcgis-slider-size\")!;\n\nconst featureLayer = new FeatureLayer({\n  url: \"https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_Major_Cities_/FeatureServer/0\",\n});\n\nawait viewElement.viewOnReady();\nviewElement.map?.add(featureLayer);\n\nconst params = {\n  layer: featureLayer,\n  view: viewElement.view,\n  field: \"POPULATION\",\n};\n\nconst rendererResult = await sizeRendererCreator.createContinuousRenderer(params);\n\nfeatureLayer.renderer = rendererResult.renderer;\n\nconst histogramResult = await histogram({\n  ...params,\n  numBins: 30,\n});\n\nsizeSlider.updateFromRendererResult(rendererResult, histogramResult);\n```\n\nThis slider should be used to update a [size visual variable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-SizeVariable.html)\nin a layer's renderer. It is the responsibility of the app developer\nto set up event listeners that update the size variable of the appropriate renderer.\n\n```js\nconst updateRendererFromSlider = () => {\n  const renderer = featureLayer.renderer?.clone();\n  if (!renderer || !(\"visualVariables\" in renderer) || !renderer.visualVariables?.[0]) {\n    return;\n  }\n\n  const sizeVariable = renderer.visualVariables[0] as __esri.SizeVariable;\n  const updatedSizeVariable = sizeSlider.updateVisualVariable(sizeVariable);\n  if (!updatedSizeVariable) {\n    return;\n  }\n\n  renderer.visualVariables = [updatedSizeVariable];\n  featureLayer.renderer = renderer;\n};\n\nsizeSlider.addEventListener(\"arcgisThumbChange\", updateRendererFromSlider);\nsizeSlider.addEventListener(\"arcgisThumbDrag\", updateRendererFromSlider);\n```",
+      "docsTags": [
+        {
+          "name": "since",
+          "text": "5.0.0"
+        },
+        {
+          "name": "see",
+          "text": "[SizeSliderViewModel](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SizeSlider-SizeSliderViewModel.html)"
+        },
+        {
+          "name": "see",
+          "text": "[sizeRendererCreator](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-size.html)"
+        },
+        {
+          "name": "superclass",
+          "text": "{\"name\":\"PublicLitElement\",\"module\":\"PublicLitElement\",\"package\":\"@arcgis/lumina\"}"
+        }
+      ],
+      "encapsulation": "shadow",
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {},
+      "props": [
+        {
+          "name": "autoDestroyDisabled",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "auto-destroy-disabled",
+          "reflectToAttr": false,
+          "docs": "If true, the component will not be destroyed automatically when it is\ndisconnected from the document. This is useful when you want to move the\ncomponent to a different place on the page, or temporarily hide it. If this\nis set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-size-legacy/#destroy) method when you are done to\nprevent memory leaks.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "icon",
+          "type": "IconName",
+          "complexType": {
+            "original": "IconName",
+            "resolved": "IconName",
+            "references": {
+              "IconName": {
+                "location": "import",
+                "path": "@esri/calcite-components/dist/components/calcite-icon/interfaces.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "mutable": true,
+          "reflectToAttr": false,
+          "docs": "Icon which represents the widget. It is typically used when the widget is controlled by another\none (e.g. in the Expand widget).",
+          "docsTags": [
+            {
+              "name": "see",
+              "text": "[Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)"
+            }
+          ],
+          "values": [],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "max",
+          "reflectToAttr": false,
+          "docs": "The maximum value or upper bound of the slider. Once the slider has rendered with the [updateFromRendererResult](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the size variable of the appropriate renderer.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nconst updateRendererFromSlider = () => {\n  const renderer = featureLayer.renderer?.clone();\n  if (!renderer || !(\"visualVariables\" in renderer) || !renderer.visualVariables?.[0]) {\n    return;\n  }\n\n  const sizeVariable = renderer.visualVariables[0] as __esri.SizeVariable;\n  const updatedSizeVariable = sizeSlider.updateVisualVariable(sizeVariable);\n  if (!updatedSizeVariable) {\n    return;\n  }\n\n  renderer.visualVariables = [updatedSizeVariable];\n  featureLayer.renderer = renderer;\n};\n\nsizeSlider.addEventListener(\"arcgisPropertyChange\", updateRendererFromSlider);\n```"
+            }
+          ],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "min",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "min",
+          "reflectToAttr": false,
+          "docs": "The minimum value or lower bound of the slider. Once the slider has rendered with the [updateFromRendererResult](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the min value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the size variable of the appropriate renderer.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nconst updateRendererFromSlider = () => {\n  const renderer = featureLayer.renderer?.clone();\n  if (!renderer || !(\"visualVariables\" in renderer) || !renderer.visualVariables?.[0]) {\n    return;\n  }\n\n  const sizeVariable = renderer.visualVariables[0] as __esri.SizeVariable;\n  const updatedSizeVariable = sizeSlider.updateVisualVariable(sizeVariable);\n  if (!updatedSizeVariable) {\n    return;\n  }\n\n  renderer.visualVariables = [updatedSizeVariable];\n  featureLayer.renderer = renderer;\n};\n\nsizeSlider.addEventListener(\"arcgisPropertyChange\", updateRendererFromSlider);\n```"
+            }
+          ],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "precision",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "precision",
+          "reflectToAttr": false,
+          "docs": "Defines how slider thumb values should be rounded. This number indicates the number\nof decimal places slider thumb _values_ should round to when they have been moved.\n\nKeep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderViewModel.html#values) and shouldn't be used exclusively\nfor formatting purposes.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nslider.precision = 7;\n```"
+            }
+          ],
+          "default": "4",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "referenceElement",
+          "type": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string",
+          "complexType": {
+            "original": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string",
+            "resolved": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string",
+            "references": {
+              "HTMLArcgisLinkChartElement": {
+                "location": "local",
+                "path": "index.js",
+                "id": "notImplemented"
+              },
+              "HTMLArcgisMapElement": {
+                "location": "local",
+                "path": "index.js",
+                "id": "notImplemented"
+              },
+              "HTMLArcgisSceneElement": {
+                "location": "local",
+                "path": "index.js",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "mutable": true,
+          "attr": "reference-element",
+          "reflectToAttr": false,
+          "docs": "By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.",
+          "docsTags": [
+            {
+              "name": "see",
+              "text": "[Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)"
+            }
+          ],
+          "values": [
+            {
+              "type": "HTMLArcgisLinkChartElement"
+            },
+            {
+              "type": "HTMLArcgisMapElement"
+            },
+            {
+              "type": "HTMLArcgisSceneElement"
+            },
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "state",
+          "type": "\"disabled\" | \"ready\"",
+          "complexType": {
+            "original": "\"disabled\" | \"ready\"",
+            "resolved": "\"disabled\" | \"ready\"",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "state",
+          "reflectToAttr": false,
+          "docs": "The current state of the component.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string",
+              "value": "disabled"
+            },
+            {
+              "type": "string",
+              "value": "ready"
+            }
+          ],
+          "optional": true,
+          "required": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "componentOnReady",
+          "returns": {
+            "type": "Promise<this>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(): Promise<this>",
+            "parameters": [],
+            "return": "Promise<this>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "componentOnReady(): Promise<this>",
+          "parameters": [],
+          "docs": "Create a promise that resolves once component is fully loaded.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nconst arcgisSliderSizeLegacy = document.querySelector(\"arcgis-slider-size-legacy\");\ndocument.body.append(arcgisSliderSizeLegacy);\nawait arcgisSliderSizeLegacy.componentOnReady();\nconsole.log(\"arcgis-slider-size-legacy is ready to go!\");\n```"
+            },
+            {
+              "name": "inheritedFrom",
+              "text": "{\"name\":\"PublicLitElement\",\"module\":\"PublicLitElement\",\"package\":\"@arcgis/lumina\"}"
+            }
+          ]
+        },
+        {
+          "name": "destroy",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(): Promise<void>",
+            "parameters": [],
+            "return": "Promise<void>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "destroy(): Promise<void>",
+          "parameters": [],
+          "docs": "Permanently destroy the component.",
+          "docsTags": []
+        },
+        {
+          "name": "updateFromRendererResult",
+          "returns": {
+            "type": "void",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(rendererResult: ContinuousRendererResult, histogramResult?: HistogramResult): void",
+            "parameters": [
+              {
+                "name": "rendererResult",
+                "type": "ContinuousRendererResult",
+                "docs": ""
+              },
+              {
+                "name": "histogramResult",
+                "type": "HistogramResult | undefined",
+                "docs": ""
+              }
+            ],
+            "return": "void",
+            "references": {
+              "ContinuousRendererResult": {
+                "location": "import",
+                "path": "@arcgis/core/smartMapping/renderers/size.d.ts",
+                "id": "notImplemented"
+              },
+              "HistogramResult": {
+                "location": "import",
+                "path": "@arcgis/core/smartMapping/statistics/types.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "updateFromRendererResult(rendererResult: ContinuousRendererResult, histogramResult?: HistogramResult): void",
+          "parameters": [
+            {
+              "name": "rendererResult",
+              "type": "ContinuousRendererResult",
+              "docs": ""
+            },
+            {
+              "name": "histogramResult",
+              "type": "HistogramResult | undefined",
+              "docs": ""
+            }
+          ],
+          "docs": "A convenience function used to update the properties of a SizeSlider component instance from the\n[result](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-size.html#ContinuousRendererResult) of\nthe [createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-size.html#createContinuousRenderer)\nmethod. This method is used to configure an empty SizeSlider to be used with the layer data, and is useful for cases when the app allows the end user to switch data variables.\nNote that this method always expects `rendererResult` to be defined for the slider to function, but `histogramResult` is optional.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "rendererResult - The result object from the [createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-size.html#createContinuousRenderer)\nmethod."
+            },
+            {
+              "name": "param",
+              "text": "histogramResult - The result histogram object from the [histogram()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-statistics-histogram.html#histogram)\nmethod."
+            },
+            {
+              "name": "example",
+              "text": "```js\nconst rendererResult = await sizeRendererCreator.createContinuousRenderer(params);\n\nfeatureLayer.renderer = rendererResult.renderer;\n\nconst histogramResult = await histogram({\n  ...params,\n  numBins: 30,\n});\n\nsizeSlider.updateFromRendererResult(rendererResult, histogramResult);\n```"
+            }
+          ]
+        },
+        {
+          "name": "updateVisualVariable",
+          "returns": {
+            "type": "SizeVariable | null | undefined",
+            "docs": "Returns the updated visual variable\nto set back on the renderer."
+          },
+          "complexType": {
+            "signature": "(sizeVariable: __esri.SizeVariable): __esri.SizeVariable | nil",
+            "parameters": [
+              {
+                "name": "sizeVariable",
+                "type": "SizeVariable",
+                "docs": ""
+              }
+            ],
+            "return": "SizeVariable | null | undefined",
+            "references": {
+              "SizeVariable": {
+                "location": "import",
+                "path": "@arcgis/core/renderers/visualVariables/SizeVariable.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "updateVisualVariable(sizeVariable: __esri.SizeVariable): __esri.SizeVariable | nil",
+          "parameters": [
+            {
+              "name": "sizeVariable",
+              "type": "SizeVariable",
+              "docs": ""
+            }
+          ],
+          "docs": "A convenience function used to update the [SizeVariable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-SizeVariable.html)\nto match the values of the [stops](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SizeSlider.html#stops) on the slider.\nThe slider stops are automatically updated internally when the user drags a thumb slider.\n\nThis is particularly useful for Size visual variables that have a set\n[minDataValue](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-SizeVariable.html#minDataValue) and\n[maxDataValue](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-SizeVariable.html#minDataValue).\nThis method will properly reconstruct the variable to set on the renderer so it matches the stops on the slider.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "sizeVariable - The size visual variable\nfrom the renderer to update to the set [stops](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SizeSlider.html#stops) on the slider."
+            },
+            {
+              "name": "returns",
+              "text": "Returns the updated visual variable\nto set back on the renderer."
+            },
+            {
+              "name": "example",
+              "text": "```js\nconst renderer = featureLayer.renderer?.clone();\nconst sizeVariable = renderer.visualVariables[0] as __esri.SizeVariable;\nconst updatedSizeVariable = sizeSlider.updateVisualVariable(sizeVariable);\n```"
+            }
+          ]
+        }
+      ],
+      "events": [
+        {
+          "event": "arcgisPropertyChange",
+          "detail": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+          "bubbles": true,
+          "complexType": {
+            "original": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+            "resolved": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the value of a property is changed. Use this to listen to changes to properties.",
+          "docsTags": []
+        },
+        {
+          "event": "arcgisReady",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the component associated with a map or scene view is ready to be interacted with.",
+          "docsTags": []
+        },
+        {
+          "event": "arcgisThumbChange",
+          "detail": "ThumbChangeEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "ThumbChangeEvent",
+            "resolved": "ThumbChangeEvent",
+            "references": {
+              "ThumbChangeEvent": {
+                "location": "import",
+                "path": "@arcgis/core/widgets/Slider/types.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider.",
+          "docsTags": []
+        },
+        {
+          "event": "arcgisThumbDrag",
+          "detail": "ThumbDragEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "ThumbDragEvent",
+            "resolved": "ThumbDragEvent",
+            "references": {
+              "ThumbDragEvent": {
+                "location": "import",
+                "path": "@arcgis/core/widgets/Slider/types.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fires when a user drags a thumb on the component.",
+          "docsTags": []
+        }
+      ],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "listeners": []
+    },
     {
       "filePath": "src/components/support/color-select/color-select.tsx",
       "tag": "arcgis-color-select",
@@ -51550,7 +55312,7 @@
             "parameters": [
               {
                 "name": "settings",
-                "type": "{\n    fullTimeExtent?: TimeExtentProperties | null | undefined;\n    loop?: boolean | undefined;\n    stops?: Array<string | number | Date> | null | undefined;\n}",
+                "type": "{\n    stops?: Array<string | number | Date> | null | undefined;\n    fullTimeExtent?: TimeExtentProperties | null | undefined;\n    loop?: boolean | undefined;\n}",
                 "docs": ""
               }
             ],
@@ -51567,7 +55329,7 @@
           "parameters": [
             {
               "name": "settings",
-              "type": "{\n    fullTimeExtent?: TimeExtentProperties | null | undefined;\n    loop?: boolean | undefined;\n    stops?: Array<string | number | Date> | null | undefined;\n}",
+              "type": "{\n    stops?: Array<string | number | Date> | null | undefined;\n    fullTimeExtent?: TimeExtentProperties | null | undefined;\n    loop?: boolean | undefined;\n}",
               "docs": ""
             }
           ],