@nasa-terra/components 0.0.7 → 0.0.9

package/dist/web-types.json

@@ -1,11 +1,68 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@nasa-terra/components",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
+        {
+          "name": "terra-browse-variables",
+          "description": "Browse through the Giovanni catalog.\n---\n\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "searchQuery",
+              "description": "Filters the catalog categories and facets by the given searchQuery\nIf not provided, all categories and facets will be available to browse",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "catalog",
+              "description": "Allows the user to switch the catalog between different providers\nTODO: add support for CMR catalog and make it the default",
+              "value": { "type": "'giovanni'", "default": "'giovanni'" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "searchQuery",
+                "description": "Filters the catalog categories and facets by the given searchQuery\nIf not provided, all categories and facets will be available to browse",
+                "type": "string"
+              },
+              {
+                "name": "catalog",
+                "description": "Allows the user to switch the catalog between different providers\nTODO: add support for CMR catalog and make it the default",
+                "type": "'giovanni'"
+              },
+              { "name": "selectedFacetFields", "type": "SelectedFacetField[]" },
+              { "name": "handleFacetSelect" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "terra-chip",
+          "description": "Used for contacts and tags\n---\n\n\n### **Slots:**\n - _default_ - The chip's label.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "size",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The chip's label." }],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "size", "type": "'small' | 'medium' | 'large'" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "terra-combobox",
           "description": "Fuzzy-search for combobox with list autocomplete.\n---\n\n\n### **CSS Properties:**\n - **--host-height** - The height of the host element. _(default: undefined)_\n- **--help-height** - The height of the search help element. _(default: undefined)_\n- **--label-height** - The height of the input's label element. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - A `search` element, the component's base.\n- **combobox** - An `input` element used for searching.\n- **button** - A `button` used for toggling the listbox's visibility.\n- **listbox** - A `ul` that holds the clickable options.",
@@ -151,23 +208,228 @@
           }
         },
         {
-          "name": "terra-chip",
-          "description": "Used for contacts and tags\n---\n\n\n### **Slots:**\n - _default_ - The chip's label.",
+          "name": "terra-giovanni-search",
+          "description": "Fuzzy-search for dataset keywords in combobox with list autocomplete.\n---\n\n\n### **Events:**\n - **terra-giovanni-search-change** - Emitted when an option is selected.\n- **terra-search** - Emitted when the component is triggering a search (like a form triggering submit).\n\n### **CSS Properties:**\n - **--host-height** - The height of the host element. _(default: undefined)_\n- **--label-height** - The height of the input's label element. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - A `search` element, the component's base.\n- **combobox** - An `input` element used for searching.\n- **button** - A `button` used for toggling the listbox's visibility.\n- **listbox** - A `ul` that holds the clickable options.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "size",
+              "name": "label",
+              "description": "Label the combobox with this.",
               "value": {
-                "type": "'small' | 'medium' | 'large'",
-                "default": "'medium'"
+                "type": "string",
+                "default": "'Enter search terms (e.g., precipitation, AOD)'"
+              }
+            },
+            {
+              "name": "placeholder",
+              "description": "Set a placeholder for the combobox with this.\nDefaults to the label's value.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "hide-label",
+              "description": "Hide the combobox's label text.\nWhen hidden, still presents to screen readers.",
+              "value": { "type": "boolean", "default": "true" }
+            },
+            {
+              "name": "searchConfig",
+              "description": "type can be `Boolean`, `String`, `Number`, `Object`, or `Array`",
+              "value": {
+                "type": "object",
+                "default": "{\n        //* @see {@link https://www.fusejs.io/api/options.html#options}\n        keys: ['id'],\n        useExtendedSearch: true,\n    }"
               }
+            },
+            { "name": "value", "value": { "type": "string" } }
+          ],
+          "events": [
+            {
+              "name": "terra-giovanni-search-change",
+              "description": "Emitted when an option is selected."
+            },
+            {
+              "name": "terra-search",
+              "description": "Emitted when the component is triggering a search (like a form triggering submit)."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "label",
+                "description": "Label the combobox with this.",
+                "type": "string"
+              },
+              {
+                "name": "placeholder",
+                "description": "Set a placeholder for the combobox with this.\nDefaults to the label's value.",
+                "type": "string"
+              },
+              {
+                "name": "hideLabel",
+                "description": "Hide the combobox's label text.\nWhen hidden, still presents to screen readers.",
+                "type": "boolean"
+              },
+              {
+                "name": "searchConfig",
+                "description": "type can be `Boolean`, `String`, `Number`, `Object`, or `Array`",
+                "type": "object"
+              },
+              { "name": "value", "type": "string" },
+              { "name": "isExpanded", "type": "boolean" },
+              { "name": "query" },
+              { "name": "searchResults", "type": "ListItem[]" }
+            ],
+            "events": [
+              {
+                "name": "terra-giovanni-search-change",
+                "description": "Emitted when an option is selected."
+              },
+              {
+                "name": "terra-search",
+                "description": "Emitted when the component is triggering a search (like a form triggering submit)."
+              }
+            ]
+          }
+        },
+        {
+          "name": "terra-icon",
+          "description": "Icons are symbols that can be used to represent various options within an application.\n---\n\n\n### **Events:**\n - **terra-load** - Emitted when the icon has loaded.\n- **terra-error** - Emitted when the icon fails to load due to an error.\n\n### **CSS Parts:**\n - **svg** - The internal SVG element.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "src",
+              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "label",
+              "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "library",
+              "description": "The name of a registered custom icon library.",
+              "value": {
+                "type": "'default' | 'heroicons' | string",
+                "default": "'default'"
+              }
+            },
+            {
+              "name": "color",
+              "description": "The CSS color to assign to the SVG.",
+              "value": { "type": "string | null", "default": "null" }
+            },
+            {
+              "name": "font-size",
+              "description": "The CSS font-size to assign to the SVG.",
+              "value": { "type": "string | null", "default": "null" }
+            }
+          ],
+          "events": [
+            {
+              "name": "terra-load",
+              "description": "Emitted when the icon has loaded."
+            },
+            {
+              "name": "terra-error",
+              "description": "Emitted when the icon fails to load due to an error."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "svg",
+                "type": "SVGElement | HTMLTemplateResult | null"
+              },
+              {
+                "name": "name",
+                "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "src",
+                "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "label",
+                "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
+                "type": "string"
+              },
+              {
+                "name": "library",
+                "description": "The name of a registered custom icon library.",
+                "type": "'default' | 'heroicons' | string"
+              },
+              {
+                "name": "color",
+                "description": "The CSS color to assign to the SVG.",
+                "type": "string | null"
+              },
+              {
+                "name": "fontSize",
+                "description": "The CSS font-size to assign to the SVG.",
+                "type": "string | null"
+              }
+            ],
+            "events": [
+              {
+                "name": "terra-load",
+                "description": "Emitted when the icon has loaded."
+              },
+              {
+                "name": "terra-error",
+                "description": "Emitted when the icon fails to load due to an error."
+              }
+            ]
+          }
+        },
+        {
+          "name": "terra-loader",
+          "description": "Loaders are used to indicate there is content that is loading.\n---\n\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "The loader's variant",
+              "value": {
+                "type": "'small' | 'large' | 'orbit'",
+                "default": "'large'"
+              }
+            },
+            {
+              "name": "percent",
+              "description": "The percent complete for the loader to display",
+              "value": { "type": "string", "default": "'0'" }
+            },
+            {
+              "name": "indeterminate",
+              "description": "an indeterminate loader has an unknown progress and will show a spinner",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
-          "slots": [{ "name": "", "description": "The chip's label." }],
           "events": [],
           "js": {
             "properties": [
-              { "name": "size", "type": "'small' | 'medium' | 'large'" }
+              {
+                "name": "variant",
+                "description": "The loader's variant",
+                "type": "'small' | 'large' | 'orbit'"
+              },
+              {
+                "name": "percent",
+                "description": "The percent complete for the loader to display",
+                "type": "string"
+              },
+              {
+                "name": "indeterminate",
+                "description": "an indeterminate loader has an unknown progress and will show a spinner",
+                "type": "boolean"
+              },
+              { "name": "_currentPercent", "type": "number" }
             ],
             "events": []
           }
@@ -182,8 +444,8 @@
               "name": "variant",
               "description": "The button's theme variant.",
               "value": {
-                "type": "| 'default'\n        | 'primary'\n        | 'success'\n        | 'neutral'\n        | 'warning'\n        | 'danger'\n        | 'text'",
-                "default": "'default'"
+                "type": "| 'default'\n        | 'primary'\n        | 'success'\n        | 'warning'\n        | 'danger'\n        | 'text'\n        | 'pagelink'",
+                "default": "'primary'"
               }
             },
             {
@@ -199,6 +461,11 @@
               "description": "Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "shape",
+              "description": "The button's shape. Used to control the radius edge shape when button is not in a terra-button-group.",
+              "value": { "type": "'square' | 'square-left' | 'square-right'" }
+            },
             {
               "name": "disabled",
               "description": "Disables the button.",
@@ -214,14 +481,9 @@
               "description": "Draws an outlined button.",
               "value": { "type": "boolean", "default": "false" }
             },
-            {
-              "name": "pill",
-              "description": "Draws a pill-style button with rounded edges.",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "circle",
-              "description": "Draws a circular icon button. When this attribute is present, the button expects a single `<sl-icon>` in the\ndefault slot.",
+              "description": "Draws a circular icon button. When this attribute is present, the button expects a single `<terra-icon>` in the\ndefault slot.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -320,7 +582,7 @@
               {
                 "name": "variant",
                 "description": "The button's theme variant.",
-                "type": "| 'default'\n        | 'primary'\n        | 'success'\n        | 'neutral'\n        | 'warning'\n        | 'danger'\n        | 'text'"
+                "type": "| 'default'\n        | 'primary'\n        | 'success'\n        | 'warning'\n        | 'danger'\n        | 'text'\n        | 'pagelink'"
               },
               {
                 "name": "size",
@@ -332,6 +594,11 @@
                 "description": "Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior.",
                 "type": "boolean"
               },
+              {
+                "name": "shape",
+                "description": "The button's shape. Used to control the radius edge shape when button is not in a terra-button-group.",
+                "type": "'square' | 'square-left' | 'square-right'"
+              },
               {
                 "name": "disabled",
                 "description": "Disables the button.",
@@ -347,14 +614,9 @@
                 "description": "Draws an outlined button.",
                 "type": "boolean"
               },
-              {
-                "name": "pill",
-                "description": "Draws a pill-style button with rounded edges.",
-                "type": "boolean"
-              },
               {
                 "name": "circle",
-                "description": "Draws a circular icon button. When this attribute is present, the button expects a single `<sl-icon>` in the\ndefault slot.",
+                "description": "Draws a circular icon button. When this attribute is present, the button expects a single `<terra-icon>` in the\ndefault slot.",
                 "type": "boolean"
               },
               {
@@ -435,179 +697,8 @@
           }
         },
         {
-          "name": "terra-icon",
-          "description": "Icons are symbols that can be used to represent various options within an application.\n---\n\n\n### **Events:**\n - **terra-load** - Emitted when the icon has loaded.\n- **terra-error** - Emitted when the icon fails to load due to an error.\n\n### **CSS Parts:**\n - **svg** - The internal SVG element.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "name",
-              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "src",
-              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "label",
-              "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "library",
-              "description": "The name of a registered custom icon library.",
-              "value": {
-                "type": "'default' | 'heroicons' | string",
-                "default": "'default'"
-              }
-            },
-            {
-              "name": "color",
-              "description": "The CSS color to assign to the SVG.",
-              "value": { "type": "string | null", "default": "null" }
-            },
-            {
-              "name": "font-size",
-              "description": "The CSS font-size to assign to the SVG.",
-              "value": { "type": "string | null", "default": "null" }
-            }
-          ],
-          "events": [
-            {
-              "name": "terra-load",
-              "description": "Emitted when the icon has loaded."
-            },
-            {
-              "name": "terra-error",
-              "description": "Emitted when the icon fails to load due to an error."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "svg",
-                "type": "SVGElement | HTMLTemplateResult | null"
-              },
-              {
-                "name": "name",
-                "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-                "type": "string | undefined"
-              },
-              {
-                "name": "src",
-                "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
-                "type": "string | undefined"
-              },
-              {
-                "name": "label",
-                "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
-                "type": "string"
-              },
-              {
-                "name": "library",
-                "description": "The name of a registered custom icon library.",
-                "type": "'default' | 'heroicons' | string"
-              },
-              {
-                "name": "color",
-                "description": "The CSS color to assign to the SVG.",
-                "type": "string | null"
-              },
-              {
-                "name": "fontSize",
-                "description": "The CSS font-size to assign to the SVG.",
-                "type": "string | null"
-              }
-            ],
-            "events": [
-              {
-                "name": "terra-load",
-                "description": "Emitted when the icon has loaded."
-              },
-              {
-                "name": "terra-error",
-                "description": "Emitted when the icon fails to load due to an error."
-              }
-            ]
-          }
-        },
-        {
-          "name": "terra-loader",
-          "description": "Loaders are used to indicate there is content that is loading.\n---\n\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "size",
-              "description": "The loader's size",
-              "value": { "type": "'small' | 'large'", "default": "'large'" }
-            },
-            {
-              "name": "theme",
-              "description": "The loader's theme, light or dark mode",
-              "value": { "type": "'light' | 'dark'" }
-            },
-            {
-              "name": "percent",
-              "description": "The percent complete for the loader to display",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "indeterminate",
-              "description": "an indeterminate loader has an unknown progress and will show a spinner",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "label",
-              "description": "A label used by a screen reader which describes the loader element (e.g., \"Loading video of Tropical Storm Nepartak\")",
-              "value": { "type": "string", "default": "'Loading request'" }
-            },
-            {
-              "name": "message",
-              "description": "A message used by a screen reader to describe current value of loader element in a more human-understandable way (e.g, \"12% of 45MB\")",
-              "value": { "type": "string", "default": "''" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "size",
-                "description": "The loader's size",
-                "type": "'small' | 'large'"
-              },
-              {
-                "name": "theme",
-                "description": "The loader's theme, light or dark mode",
-                "type": "'light' | 'dark'"
-              },
-              {
-                "name": "percent",
-                "description": "The percent complete for the loader to display",
-                "type": "number"
-              },
-              {
-                "name": "indeterminate",
-                "description": "an indeterminate loader has an unknown progress and will show a spinner",
-                "type": "boolean"
-              },
-              {
-                "name": "label",
-                "description": "A label used by a screen reader which describes the loader element (e.g., \"Loading video of Tropical Storm Nepartak\")",
-                "type": "string"
-              },
-              {
-                "name": "message",
-                "description": "A message used by a screen reader to describe current value of loader element in a more human-understandable way (e.g, \"12% of 45MB\")",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "terra-map",
-          "description": "A map component for visualizing and selecting coordinates.\n---\n",
+          "name": "terra-map",
+          "description": "A map component for visualizing and selecting coordinates.\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -705,7 +796,7 @@
               "name": "config",
               "value": {
                 "type": "Partial<Config> | undefined",
-                "default": "{\n        modeBarButtonsToAdd: [\n            {\n                name: 'Download Data',\n                title: 'Download plot data as a CSV file',\n                icon: Icons.disk,\n                click: () => {\n                    this.downloadCSV()\n                },\n            },\n        ],\n    }"
+                "default": "{}"
               }
             },
             {
@@ -716,7 +807,6 @@
           "events": [],
           "js": {
             "properties": [
-              { "name": "plotData", "type": "Array<Plot>" },
               { "name": "base", "type": "HTMLElement" },
               { "name": "plotTitle", "type": "string | undefined" },
               { "name": "layout", "type": "Partial<Layout> | undefined" },
@@ -832,6 +922,74 @@
             "events": []
           }
         },
+        {
+          "name": "terra-variable-combobox",
+          "description": "Fuzzy-search for dataset variables in combobox with list autocomplete.\n---\n\n\n### **Events:**\n - **terra-combobox-change** - Emitted when an option is selected.\n\n### **CSS Properties:**\n - **--host-height** - The height of the host element. _(default: undefined)_\n- **--help-height** - The height of the search help element. _(default: undefined)_\n- **--label-height** - The height of the input's label element. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - A `search` element, the component's base.\n- **combobox** - An `input` element used for searching.\n- **button** - A `button` used for toggling the listbox's visibility.\n- **listbox** - A `ul` that holds the clickable options.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "Label the combobox with this.",
+              "value": { "type": "string", "default": "'Search for Variables'" }
+            },
+            {
+              "name": "placeholder",
+              "description": "Set a placeholder for the combobox with this.\nDefaults to the label's value.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "hide-help",
+              "description": "Hide the combobox's help text.\nWhen hidden, not rendered at all.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "hide-label",
+              "description": "Hide the combobox's label text.\nWhen hidden, still presents to screen readers.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            { "name": "value", "value": { "type": "string" } }
+          ],
+          "events": [
+            {
+              "name": "terra-combobox-change",
+              "description": "Emitted when an option is selected."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "label",
+                "description": "Label the combobox with this.",
+                "type": "string"
+              },
+              {
+                "name": "placeholder",
+                "description": "Set a placeholder for the combobox with this.\nDefaults to the label's value.",
+                "type": "string"
+              },
+              {
+                "name": "hideHelp",
+                "description": "Hide the combobox's help text.\nWhen hidden, not rendered at all.",
+                "type": "boolean"
+              },
+              {
+                "name": "hideLabel",
+                "description": "Hide the combobox's label text.\nWhen hidden, still presents to screen readers.",
+                "type": "boolean"
+              },
+              { "name": "value", "type": "string" },
+              { "name": "isExpanded", "type": "boolean" },
+              { "name": "query" },
+              { "name": "searchResults", "type": "ListItem[]" }
+            ],
+            "events": [
+              {
+                "name": "terra-combobox-change",
+                "description": "Emitted when an option is selected."
+              }
+            ]
+          }
+        },
         {
           "name": "terra-time-series",
           "description": "A component for visualizing time series data using the GES DISC Giovanni API.\n---\n",
@@ -842,11 +1000,26 @@
               "description": "a collection entry id (ex: GPM_3IMERGHH_06)",
               "value": { "type": "string | undefined" }
             },
+            {
+              "name": "datasetLandingPage",
+              "description": "the dataset landing page for the collection",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "variable",
               "description": "a variable short name to plot (ex: precipitationCal)",
               "value": { "type": "string | undefined" }
             },
+            {
+              "name": "variableLandingPage",
+              "description": "the variable landing page",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "variableLongName",
+              "description": "a variable long name to plot (e.g., \"Longwave radiation flux downwards (surface)\")",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "start-date",
               "description": "The start date for the time series plot. (ex: 2021-01-01)",
@@ -876,11 +1049,26 @@
                 "description": "a collection entry id (ex: GPM_3IMERGHH_06)",
                 "type": "string | undefined"
               },
+              {
+                "name": "datasetLandingPage",
+                "description": "the dataset landing page for the collection",
+                "type": "string | undefined"
+              },
               {
                 "name": "variable",
                 "description": "a variable short name to plot (ex: precipitationCal)",
                 "type": "string | undefined"
               },
+              {
+                "name": "variableLandingPage",
+                "description": "the variable landing page",
+                "type": "string | undefined"
+              },
+              {
+                "name": "variableLongName",
+                "description": "a variable long name to plot (e.g., \"Longwave radiation flux downwards (surface)\")",
+                "type": "string | undefined"
+              },
               {
                 "name": "startDate",
                 "description": "The start date for the time series plot. (ex: 2021-01-01)",
@@ -905,6 +1093,7 @@
               { "name": "plot", "type": "TerraPlot" },
               { "name": "spatialPicker", "type": "TerraSpatialPicker" },
               { "name": "variableCombobox", "type": "TerraVariableCombobox" },
+              { "name": "menu", "type": "HTMLMenuElement" },
               {
                 "name": "collectionBeginningDateTime",
                 "description": "holds the start date for the earliest available data for the collection",
@@ -914,77 +1103,10 @@
                 "name": "collectionEndingDateTime",
                 "description": "holds the end date for the latest available data for the collection",
                 "type": "string | undefined"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "terra-variable-combobox",
-          "description": "Fuzzy-search for dataset variables in combobox with list autocomplete.\n---\n\n\n### **Events:**\n - **terra-combobox-change** - Emitted when an option is selected.\n\n### **CSS Properties:**\n - **--host-height** - The height of the host element. _(default: undefined)_\n- **--help-height** - The height of the search help element. _(default: undefined)_\n- **--label-height** - The height of the input's label element. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - A `search` element, the component's base.\n- **combobox** - An `input` element used for searching.\n- **button** - A `button` used for toggling the listbox's visibility.\n- **listbox** - A `ul` that holds the clickable options.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "label",
-              "description": "Label the combobox with this.",
-              "value": { "type": "string", "default": "'Search for Variables'" }
-            },
-            {
-              "name": "placeholder",
-              "description": "Set a placeholder for the combobox with this.\nDefaults to the label's value.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "hide-help",
-              "description": "Hide the combobox's help text.\nWhen hidden, not rendered at all.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "hide-label",
-              "description": "Hide the combobox's label text.\nWhen hidden, still presents to screen readers.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            { "name": "value", "value": { "type": "string" } }
-          ],
-          "events": [
-            {
-              "name": "terra-combobox-change",
-              "description": "Emitted when an option is selected."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "label",
-                "description": "Label the combobox with this.",
-                "type": "string"
-              },
-              {
-                "name": "placeholder",
-                "description": "Set a placeholder for the combobox with this.\nDefaults to the label's value.",
-                "type": "string"
-              },
-              {
-                "name": "hideHelp",
-                "description": "Hide the combobox's help text.\nWhen hidden, not rendered at all.",
-                "type": "boolean"
-              },
-              {
-                "name": "hideLabel",
-                "description": "Hide the combobox's label text.\nWhen hidden, still presents to screen readers.",
-                "type": "boolean"
               },
-              { "name": "value", "type": "string" },
-              { "name": "isExpanded", "type": "boolean" },
-              { "name": "query" },
-              { "name": "searchResults", "type": "ListItem[]" }
+              { "name": "activeMenuItem", "type": "MenuNames" }
             ],
-            "events": [
-              {
-                "name": "terra-combobox-change",
-                "description": "Emitted when an option is selected."
-              }
-            ]
+            "events": []
           }
         }
       ]