@nasa-terra/components 0.0.142 → 0.0.144

package/dist/vscode.html-custom-data.json

@@ -26,36 +26,43 @@
       ]
     },
     {
-      "name": "terra-badge",
-      "description": "Badges are used to draw attention and display statuses or counts.\n---\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "name": "terra-avatar",
+      "description": "Avatars are used to represent a person or object.\n---\n\n\n### **Events:**\n - **terra-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<terra-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
       "attributes": [
         {
-          "name": "variant",
-          "description": "The badge's theme variant.",
-          "values": [
-            { "name": "" },
-            { "name": "primary" },
-            { "name": "success" },
-            { "name": "neutral" },
-            { "name": "warning" },
-            { "name": "danger" }
-          ]
+          "name": "image",
+          "description": "The image source to use for the avatar.",
+          "values": []
         },
         {
-          "name": "pill",
-          "description": "Draws a pill-style badge with rounded edges.",
+          "name": "label",
+          "description": "A label to use to describe the avatar to assistive devices.",
           "values": []
         },
         {
-          "name": "pulse",
-          "description": "Makes the badge pulsate to draw attention.",
+          "name": "initials",
+          "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
           "values": []
+        },
+        {
+          "name": "loading",
+          "description": "Indicates how the browser should load the image.",
+          "values": [{ "name": "eager" }, { "name": "lazy" }]
+        },
+        {
+          "name": "shape",
+          "description": "The shape of the avatar.",
+          "values": [
+            { "name": "circle" },
+            { "name": "square" },
+            { "name": "rounded" }
+          ]
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/badge"
+          "url": "https://terra-ui.netlify.app/components/avatar"
         }
       ]
     },
@@ -109,65 +116,58 @@
       ]
     },
     {
-      "name": "terra-breadcrumb",
-      "description": "A single breadcrumb item used inside `terra-breadcrumbs`.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--terra-breadcrumb-color** - The text color of inactive breadcrumbs. _(default: undefined)_\n- **--terra-breadcrumb-color-current** - The text color of the current (last) breadcrumb. _(default: undefined)_\n- **--terra-breadcrumb-color-visited** - The text color of visited breadcrumb links. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **link** - The breadcrumb link element.\n- **label** - The breadcrumb label element when not a link.",
+      "name": "terra-badge",
+      "description": "Badges are used to draw attention and display statuses or counts.\n---\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
       "attributes": [
         {
-          "name": "href",
-          "description": "The URL the breadcrumb points to. When omitted, the breadcrumb is rendered as plain text.",
+          "name": "variant",
+          "description": "The badge's theme variant.",
+          "values": [
+            { "name": "" },
+            { "name": "primary" },
+            { "name": "success" },
+            { "name": "neutral" },
+            { "name": "warning" },
+            { "name": "danger" }
+          ]
+        },
+        {
+          "name": "pill",
+          "description": "Draws a pill-style badge with rounded edges.",
           "values": []
         },
         {
-          "name": "current",
-          "description": "Indicates that this breadcrumb represents the current page.\nWhen set, `aria-current=\"page\"` will be applied to the underlying element.",
+          "name": "pulse",
+          "description": "Makes the badge pulsate to draw attention.",
           "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/breadcrumb"
+          "url": "https://terra-ui.netlify.app/components/badge"
         }
       ]
     },
     {
-      "name": "terra-avatar",
-      "description": "Avatars are used to represent a person or object.\n---\n\n\n### **Events:**\n - **terra-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<terra-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
+      "name": "terra-breadcrumb",
+      "description": "A single breadcrumb item used inside `terra-breadcrumbs`.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--terra-breadcrumb-color** - The text color of inactive breadcrumbs. _(default: undefined)_\n- **--terra-breadcrumb-color-current** - The text color of the current (last) breadcrumb. _(default: undefined)_\n- **--terra-breadcrumb-color-visited** - The text color of visited breadcrumb links. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **link** - The breadcrumb link element.\n- **label** - The breadcrumb label element when not a link.",
       "attributes": [
         {
-          "name": "image",
-          "description": "The image source to use for the avatar.",
-          "values": []
-        },
-        {
-          "name": "label",
-          "description": "A label to use to describe the avatar to assistive devices.",
+          "name": "href",
+          "description": "The URL the breadcrumb points to. When omitted, the breadcrumb is rendered as plain text.",
           "values": []
         },
         {
-          "name": "initials",
-          "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+          "name": "current",
+          "description": "Indicates that this breadcrumb represents the current page.\nWhen set, `aria-current=\"page\"` will be applied to the underlying element.",
           "values": []
-        },
-        {
-          "name": "loading",
-          "description": "Indicates how the browser should load the image.",
-          "values": [{ "name": "eager" }, { "name": "lazy" }]
-        },
-        {
-          "name": "shape",
-          "description": "The shape of the avatar.",
-          "values": [
-            { "name": "circle" },
-            { "name": "square" },
-            { "name": "rounded" }
-          ]
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/avatar"
+          "url": "https://terra-ui.netlify.app/components/breadcrumb"
         }
       ]
     },
@@ -788,33 +788,6 @@
         }
       ]
     },
-    {
-      "name": "terra-dialog",
-      "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n---\n\n\n### **Events:**\n - **terra-dialog-show** - Emitted when the dialog opens.\n- **terra-dialog-after-show** - Emitted after the dialog opens and all animations are complete.\n- **terra-dialog-hide** - Emitted when the dialog closes.\n- **terra-dialog-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **terra-dialog-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **terra-dialog-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\n\n### **Slots:**\n - _default_ - The dialog's main content.\n- **label** - The dialog's label. Alternatively, you can use the `label` attribute.\n- **header-actions** - Optional actions to add to the header. Works best with `<terra-button>`.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Defaults to `fit-content` to size based on content. Can be set to a fixed value like `31rem` if needed. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the dialog.\n- **panel** - The dialog's panel (where the dialog and its content are rendered).\n- **header** - The dialog's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<terra-button>`.\n- **title** - The dialog's title.\n- **close-button** - The close button, an `<terra-button>`.\n- **close-button__base** - The close button's exported `base` part.\n- **body** - The dialog's body.\n- **footer** - The dialog's footer.",
-      "attributes": [
-        {
-          "name": "open",
-          "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
-          "values": []
-        },
-        {
-          "name": "label",
-          "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
-          "values": []
-        },
-        {
-          "name": "no-header",
-          "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/dialog"
-        }
-      ]
-    },
     {
       "name": "terra-divider",
       "description": "Dividers are used to visually separate or group elements.\n---\n\n\n### **CSS Properties:**\n - **--terra-divider-color** - The color of the divider. _(default: undefined)_\n- **--terra-divider-width** - The width of the divider. _(default: undefined)_\n- **--terra-divider-spacing** - The spacing of the divider. _(default: undefined)_",
@@ -833,77 +806,29 @@
       ]
     },
     {
-      "name": "terra-dropdown",
-      "description": "Dropdowns expose additional content that \"drops down\" in a panel.\n---\n\n\n### **Events:**\n - **terra-show** - Emitted when the dropdown opens.\n- **terra-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **terra-hide** - Emitted when the dropdown closes.\n- **terra-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\n\n### **Slots:**\n - _default_ - The dropdown's main content, typically a `<terra-menu>` element.\n- **trigger** - The dropdown's trigger, usually a `<terra-button>` element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<terra-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the dropdown's popup container.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
+      "name": "terra-dialog",
+      "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n---\n\n\n### **Events:**\n - **terra-dialog-show** - Emitted when the dialog opens.\n- **terra-dialog-after-show** - Emitted after the dialog opens and all animations are complete.\n- **terra-dialog-hide** - Emitted when the dialog closes.\n- **terra-dialog-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **terra-dialog-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **terra-dialog-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\n\n### **Slots:**\n - _default_ - The dialog's main content.\n- **label** - The dialog's label. Alternatively, you can use the `label` attribute.\n- **header-actions** - Optional actions to add to the header. Works best with `<terra-button>`.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Defaults to `fit-content` to size based on content. Can be set to a fixed value like `31rem` if needed. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the dialog.\n- **panel** - The dialog's panel (where the dialog and its content are rendered).\n- **header** - The dialog's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<terra-button>`.\n- **title** - The dialog's title.\n- **close-button** - The close button, an `<terra-button>`.\n- **close-button__base** - The close button's exported `base` part.\n- **body** - The dialog's body.\n- **footer** - The dialog's footer.",
       "attributes": [
         {
           "name": "open",
-          "description": "Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.",
-          "values": []
-        },
-        {
-          "name": "placement",
-          "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
-          "values": [
-            { "name": "" },
-            { "name": "top" },
-            { "name": "top-start" },
-            { "name": "top-end" },
-            { "name": "bottom" },
-            { "name": "bottom-start" },
-            { "name": "bottom-end" },
-            { "name": "right" },
-            { "name": "right-start" },
-            { "name": "right-end" },
-            { "name": "left" },
-            { "name": "left-start" },
-            { "name": "left-end" }
-          ]
-        },
-        {
-          "name": "disabled",
-          "description": "Disables the dropdown so the panel will not open.",
-          "values": []
-        },
-        {
-          "name": "stay-open-on-select",
-          "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.",
-          "values": []
-        },
-        {
-          "name": "distance",
-          "description": "The distance in pixels from which to offset the panel away from its trigger.",
-          "values": []
-        },
-        {
-          "name": "skidding",
-          "description": "The distance in pixels from which to offset the panel along its trigger.",
+          "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
           "values": []
         },
         {
-          "name": "hoist",
-          "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+          "name": "label",
+          "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
           "values": []
         },
         {
-          "name": "hover",
-          "description": "When true, the dropdown opens on mouse hover instead of click.",
+          "name": "no-header",
+          "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
           "values": []
-        },
-        {
-          "name": "sync",
-          "description": "Syncs the popup width or height to that of the trigger element.",
-          "values": [
-            { "name": "width" },
-            { "name": "height" },
-            { "name": "both" }
-          ]
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/dropdown"
+          "url": "https://terra-ui.netlify.app/components/dialog"
         }
       ]
     },
@@ -991,6 +916,48 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
+          "values": []
+        },
+        {
+          "name": "library",
+          "description": "The name of a registered custom icon library.",
+          "values": [{ "name": "default" }, { "name": "heroicons" }]
+        },
+        {
+          "name": "color",
+          "description": "The CSS color to assign to the SVG.",
+          "values": []
+        },
+        {
+          "name": "font-size",
+          "description": "The CSS font-size to assign to the SVG.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://terra-ui.netlify.app/components/icon"
+        }
+      ]
+    },
     {
       "name": "terra-input",
       "description": "A text input component with consistent styling across the design system.\n---\n\n\n### **Events:**\n - **terra-input** - Emitted when the input receives input.\n- **terra-change** - Emitted when an alteration to the control's value is committed by the user.\n- **terra-focus** - Emitted when the control gains focus.\n- **terra-blur** - Emitted when the control loses focus.\n- **terra-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **terra-clear** - Emitted when the clear button is activated.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\n\n### **Slots:**\n - **prefix** - Used to prepend content (like an icon) to the input.\n- **suffix** - Used to append content (like an icon) to the input. When `clearable` or `resettable` is true, this slot is overridden.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **input** - The internal input control.\n- **prefix** - The container for prefix content.\n- **suffix** - The container for suffix content.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **form-control-help-text** - The help text's wrapper.\n- **form-control-error-text** - The error text's wrapper.",
@@ -1091,64 +1058,77 @@
       ]
     },
     {
-      "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.",
+      "name": "terra-dropdown",
+      "description": "Dropdowns expose additional content that \"drops down\" in a panel.\n---\n\n\n### **Events:**\n - **terra-show** - Emitted when the dropdown opens.\n- **terra-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **terra-hide** - Emitted when the dropdown closes.\n- **terra-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\n\n### **Slots:**\n - _default_ - The dropdown's main content, typically a `<terra-menu>` element.\n- **trigger** - The dropdown's trigger, usually a `<terra-button>` element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<terra-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the dropdown's popup container.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
       "attributes": [
         {
-          "name": "name",
-          "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-          "values": []
-        },
-        {
-          "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.",
-          "values": []
-        },
-        {
-          "name": "label",
-          "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
+          "name": "open",
+          "description": "Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.",
           "values": []
         },
         {
-          "name": "library",
-          "description": "The name of a registered custom icon library.",
-          "values": [{ "name": "default" }, { "name": "heroicons" }]
-        },
-        {
-          "name": "color",
-          "description": "The CSS color to assign to the SVG.",
+          "name": "placement",
+          "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
+          "values": [
+            { "name": "" },
+            { "name": "top" },
+            { "name": "top-start" },
+            { "name": "top-end" },
+            { "name": "bottom" },
+            { "name": "bottom-start" },
+            { "name": "bottom-end" },
+            { "name": "right" },
+            { "name": "right-start" },
+            { "name": "right-end" },
+            { "name": "left" },
+            { "name": "left-start" },
+            { "name": "left-end" }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the dropdown so the panel will not open.",
           "values": []
         },
         {
-          "name": "font-size",
-          "description": "The CSS font-size to assign to the SVG.",
+          "name": "stay-open-on-select",
+          "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.",
           "values": []
-        }
-      ],
-      "references": [
+        },
         {
-          "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/icon"
-        }
-      ]
-    },
-    {
-      "name": "terra-login",
-      "description": "A form that logs in to Earthdata Login (EDL) and returns a bearer token.\n---\n\n\n### **Events:**\n - **terra-login** - Emitted when a bearer token has been received from EDL.",
-      "attributes": [
-        { "name": "button-label", "values": [] },
+          "name": "distance",
+          "description": "The distance in pixels from which to offset the panel away from its trigger.",
+          "values": []
+        },
         {
-          "name": "logged-in-message",
-          "description": "The message to show when the user is logged in\nYou can use the following placeholders:\n{username} - The username of the user\n{first_name} - The first name of the user\n{last_name} - The last name of the user",
+          "name": "skidding",
+          "description": "The distance in pixels from which to offset the panel along its trigger.",
           "values": []
         },
-        { "name": "logged-out-message", "values": [] },
-        { "name": "loading-message", "values": [] }
+        {
+          "name": "hoist",
+          "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+          "values": []
+        },
+        {
+          "name": "hover",
+          "description": "When true, the dropdown opens on mouse hover instead of click.",
+          "values": []
+        },
+        {
+          "name": "sync",
+          "description": "Syncs the popup width or height to that of the trigger element.",
+          "values": [
+            { "name": "width" },
+            { "name": "height" },
+            { "name": "both" }
+          ]
+        }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/login"
+          "url": "https://terra-ui.netlify.app/components/dropdown"
         }
       ]
     },
@@ -1188,6 +1168,26 @@
         }
       ]
     },
+    {
+      "name": "terra-login",
+      "description": "A form that logs in to Earthdata Login (EDL) and returns a bearer token.\n---\n\n\n### **Events:**\n - **terra-login** - Emitted when a bearer token has been received from EDL.",
+      "attributes": [
+        { "name": "button-label", "values": [] },
+        {
+          "name": "logged-in-message",
+          "description": "The message to show when the user is logged in\nYou can use the following placeholders:\n{username} - The username of the user\n{first_name} - The first name of the user\n{last_name} - The last name of the user",
+          "values": []
+        },
+        { "name": "logged-out-message", "values": [] },
+        { "name": "loading-message", "values": [] }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://terra-ui.netlify.app/components/login"
+        }
+      ]
+    },
     {
       "name": "terra-map",
       "description": "A map component for visualizing and selecting coordinates.\n---\n",
@@ -1239,6 +1239,17 @@
         }
       ]
     },
+    {
+      "name": "terra-menu",
+      "description": "Menus provide a list of options for the user to choose from.\n---\n\n\n### **Events:**\n - **terra-select** - Emitted when a menu item is selected. The event detail contains the selected menu item.\n\n### **Slots:**\n - _default_ - The menu's content, typically `<terra-menu-item>` elements.",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://terra-ui.netlify.app/components/menu"
+        }
+      ]
+    },
     {
       "name": "terra-menu-item",
       "description": "Menu items provide options for the user to pick from in a menu.\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a text label based on the contents of the menu item's default slot.\n\n### **Slots:**\n - _default_ - The menu item's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n- **submenu** - Used to denote a nested menu.\n\n### **CSS Properties:**\n - **--submenu-offset** - The distance submenus shift to overlap the parent menu. _(default: -2px)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **checked-icon** - The checked icon, which is only visible when the menu item is checked.\n- **prefix** - The prefix container.\n- **label** - The menu item label.\n- **suffix** - The suffix container.\n- **spinner** - The spinner that shows when the menu item is in the loading state.\n- **spinner__base** - The spinner's base part.\n- **submenu-icon** - The submenu icon, visible only when the menu item has a submenu.",
@@ -1276,17 +1287,6 @@
         }
       ]
     },
-    {
-      "name": "terra-menu",
-      "description": "Menus provide a list of options for the user to choose from.\n---\n\n\n### **Events:**\n - **terra-select** - Emitted when a menu item is selected. The event detail contains the selected menu item.\n\n### **Slots:**\n - _default_ - The menu's content, typically `<terra-menu-item>` elements.",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/menu"
-        }
-      ]
-    },
     {
       "name": "terra-option",
       "description": "Options define the selectable items within various form controls such as [select](/components/select).\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n\n### **Slots:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Properties:**\n - **--terra-option-*** - All option design tokens from horizon.css are supported. _(default: undefined)_\n\n### **CSS Parts:**\n - **checked-icon** - The checked icon, an `<terra-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
@@ -1309,30 +1309,6 @@
         }
       ]
     },
-    {
-      "name": "terra-plot",
-      "description": "A web component for interactive graphs using Plotly.js.\n---\n\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [
-        { "name": "plotTitle", "values": [] },
-        { "name": "layout", "values": [{ "name": "Partial<Plotly.Layout>" }] },
-        { "name": "config", "values": [{ "name": "Partial<Plotly.Config>" }] },
-        {
-          "name": "data",
-          "values": [{ "name": "Array<Partial<Plotly.Data>>" }]
-        },
-        {
-          "name": "colors",
-          "description": "Optional: Colors to assign to each time series line",
-          "values": [{ "name": "string[]" }]
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/plot"
-        }
-      ]
-    },
     {
       "name": "terra-pagination",
       "description": "Pagination is a navigational element that allows users to navigate between content or pages.\n---\n\n\n### **Events:**\n - **terra-page-change** - Emitted when the page changes.\n\n### **Slots:**\n - _default_ - Content to display on the right side (e.g., rows per page dropdown). Only visible when variant is \"left\".\n\n### **CSS Properties:**\n - **--terra-pagination-button-color** - The text color of page buttons. _(default: undefined)_\n- **--terra-pagination-button-background-color** - The background color of page buttons. _(default: undefined)_\n- **--terra-pagination-button-color-hover** - The text color of page buttons on hover. _(default: undefined)_\n- **--terra-pagination-button-background-color-hover** - The background color of page buttons on hover. _(default: undefined)_\n- **--terra-pagination-button-color-current** - The text color of the current page button. _(default: undefined)_\n- **--terra-pagination-button-background-color-current** - The background color of the current page button. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **nav** - The navigation container.\n- **button** - The page button elements.\n- **button-current** - The current page button.\n- **ellipsis** - The ellipsis element.\n- **prev** - The previous button.\n- **next** - The next button.\n- **slot** - The right-side slot container.",
@@ -1366,37 +1342,26 @@
       ]
     },
     {
-      "name": "terra-plot-toolbar",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--terra-plot-toolbar-help-menu-display** - Controls the display of the help menu button. Set to `none` to hide it. Defaults to `flex`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "name": "terra-plot",
+      "description": "A web component for interactive graphs using Plotly.js.\n---\n\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
       "attributes": [
-        { "name": "catalogVariable", "values": [{ "name": "Variable" }] },
-        { "name": "variableEntryId", "values": [] },
-        { "name": "plot", "values": [{ "name": "TerraPlot" }] },
+        { "name": "plotTitle", "values": [] },
+        { "name": "layout", "values": [{ "name": "Partial<Plotly.Layout>" }] },
+        { "name": "config", "values": [{ "name": "Partial<Plotly.Config>" }] },
         {
-          "name": "timeSeriesData",
-          "values": [{ "name": "Partial<Plotly.Data>[]" }, { "name": "Blob" }]
+          "name": "data",
+          "values": [{ "name": "Array<Partial<Plotly.Data>>" }]
         },
-        { "name": "location", "values": [] },
-        { "name": "startDate", "values": [] },
-        { "name": "endDate", "values": [] },
-        { "name": "cacheKey", "values": [] },
-        { "name": "dataType", "values": [{ "name": "DataType" }] },
-        { "name": "show-location", "values": [] },
-        { "name": "show-date-range", "values": [] },
-        { "name": "colormaps", "values": [{ "name": "string[]" }] },
-        { "name": "color-map-name", "values": [] },
-        { "name": "opacity", "values": [] },
-        { "name": "show-citation", "values": [] },
         {
-          "name": "application-citation",
-          "description": "if you include an application citation, it will be displayed in the citation panel alongside the dataset citation",
-          "values": []
+          "name": "colors",
+          "description": "Optional: Colors to assign to each time series line",
+          "values": [{ "name": "string[]" }]
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/plot-toolbar"
+          "url": "https://terra-ui.netlify.app/components/plot"
         }
       ]
     },
@@ -1555,42 +1520,37 @@
       ]
     },
     {
-      "name": "terra-progress-bar",
-      "description": "Progress bars are used to show the status of an ongoing operation.\n---\n\n\n### **Slots:**\n - _default_ - A label to show inside the progress indicator.\n\n### **CSS Properties:**\n - **--height** - The progress bar's height. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--label-color** - The color of the label. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **indicator** - The progress bar's indicator.\n- **label** - The progress bar's label.",
+      "name": "terra-plot-toolbar",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--terra-plot-toolbar-help-menu-display** - Controls the display of the help menu button. Set to `none` to hide it. Defaults to `flex`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
       "attributes": [
+        { "name": "catalogVariable", "values": [{ "name": "Variable" }] },
+        { "name": "variableEntryId", "values": [] },
+        { "name": "plot", "values": [{ "name": "TerraPlot" }] },
         {
-          "name": "value",
-          "description": "The current progress as a percentage, 0 to 100.",
-          "values": []
-        },
-        {
-          "name": "indeterminate",
-          "description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
-          "values": []
+          "name": "timeSeriesData",
+          "values": [{ "name": "Partial<Plotly.Data>[]" }, { "name": "Blob" }]
         },
+        { "name": "location", "values": [] },
+        { "name": "startDate", "values": [] },
+        { "name": "endDate", "values": [] },
+        { "name": "cacheKey", "values": [] },
+        { "name": "dataType", "values": [{ "name": "DataType" }] },
+        { "name": "show-location", "values": [] },
+        { "name": "show-date-range", "values": [] },
+        { "name": "colormaps", "values": [{ "name": "string[]" }] },
+        { "name": "color-map-name", "values": [] },
+        { "name": "opacity", "values": [] },
+        { "name": "show-citation", "values": [] },
         {
-          "name": "label",
-          "description": "A custom label for assistive devices.",
+          "name": "application-citation",
+          "description": "if you include an application citation, it will be displayed in the citation panel alongside the dataset citation",
           "values": []
-        },
-        {
-          "name": "variant",
-          "description": "The progress bar's theme variant.",
-          "values": [
-            { "name": "" },
-            { "name": "default" },
-            { "name": "primary" },
-            { "name": "success" },
-            { "name": "warning" },
-            { "name": "danger" }
-          ]
-        },
-        { "name": "title", "values": [] }
+        }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/progress-bar"
+          "url": "https://terra-ui.netlify.app/components/plot-toolbar"
         }
       ]
     },
@@ -1646,6 +1606,46 @@
         }
       ]
     },
+    {
+      "name": "terra-progress-bar",
+      "description": "Progress bars are used to show the status of an ongoing operation.\n---\n\n\n### **Slots:**\n - _default_ - A label to show inside the progress indicator.\n\n### **CSS Properties:**\n - **--height** - The progress bar's height. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--label-color** - The color of the label. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **indicator** - The progress bar's indicator.\n- **label** - The progress bar's label.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The current progress as a percentage, 0 to 100.",
+          "values": []
+        },
+        {
+          "name": "indeterminate",
+          "description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "A custom label for assistive devices.",
+          "values": []
+        },
+        {
+          "name": "variant",
+          "description": "The progress bar's theme variant.",
+          "values": [
+            { "name": "" },
+            { "name": "default" },
+            { "name": "primary" },
+            { "name": "success" },
+            { "name": "warning" },
+            { "name": "danger" }
+          ]
+        },
+        { "name": "title", "values": [] }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://terra-ui.netlify.app/components/progress-bar"
+        }
+      ]
+    },
     {
       "name": "terra-radio-group",
       "description": "Radio groups are used to group multiple radio buttons so they function as a single form control.\n---\n\n\n### **Events:**\n - **terra-change** - Emitted when the radio group's selected value changes.\n- **terra-input** - Emitted when the radio group receives user input.\n- **terra-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the radio-group.\n\n### **Slots:**\n - _default_ - The default slot where `<terra-radio>` elements are placed.\n- **label** - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--terra-radio-group-*** - All radio group design tokens from horizon.css are supported. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.",
@@ -1697,33 +1697,6 @@
         }
       ]
     },
-    {
-      "name": "terra-scroll-hint",
-      "description": "Scroll hint is an animated button that prompts visitors to scroll.\n---\n\n\n### **Events:**\n - **terra-scroll** - Emitted when the scroll hint is clicked and scrolling begins.\n\n### **CSS Properties:**\n - **--terra-scroll-hint-icon-background-color** - The background color of the icon circle. _(default: undefined)_\n- **--terra-scroll-hint-icon-color** - The color of the chevron icon. _(default: undefined)_\n- **--terra-scroll-hint-text-color** - The color of the text. _(default: undefined)_\n- **--terra-scroll-hint-ring-color** - The color of the pulsing ring. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The clickable button element.\n- **icon-container** - The container for the icon and pulsing ring.\n- **icon** - The chevron icon.\n- **ring** - The pulsing ring around the icon.\n- **text** - The \"SCROLL TO CONTINUE\" text.",
-      "attributes": [
-        {
-          "name": "inline",
-          "description": "When true, the component will be positioned inline in the DOM flow instead of fixed to the viewport.",
-          "values": []
-        },
-        {
-          "name": "dark",
-          "description": "When true, forces dark mode styles regardless of system preference. Useful when placing the component on a dark background.",
-          "values": []
-        },
-        {
-          "name": "inactivityDelay",
-          "description": "The delay in milliseconds before showing the scroll hint after inactivity. Defaults to 3000ms (3 seconds).",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/scroll-hint"
-        }
-      ]
-    },
     {
       "name": "terra-select",
       "description": "Select fields are a form field used to select one option from a list.\n---\n\n\n### **Events:**\n - **terra-change** - Emitted when the control's value changes.\n- **terra-clear** - Emitted when the control's value is cleared.\n- **terra-input** - Emitted when the control receives input.\n- **terra-focus** - Emitted when the control gains focus.\n- **terra-blur** - Emitted when the control loses focus.\n- **terra-show** - Emitted when the select's menu opens.\n- **terra-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **terra-hide** - Emitted when the select's menu closes.\n- **terra-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **terra-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<terra-option>` elements.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--terra-select-*** - All select design tokens from horizon.css are supported. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiple` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
@@ -1835,6 +1808,33 @@
         }
       ]
     },
+    {
+      "name": "terra-scroll-hint",
+      "description": "Scroll hint is an animated button that prompts visitors to scroll.\n---\n\n\n### **Events:**\n - **terra-scroll** - Emitted when the scroll hint is clicked and scrolling begins.\n\n### **CSS Properties:**\n - **--terra-scroll-hint-icon-background-color** - The background color of the icon circle. _(default: undefined)_\n- **--terra-scroll-hint-icon-color** - The color of the chevron icon. _(default: undefined)_\n- **--terra-scroll-hint-text-color** - The color of the text. _(default: undefined)_\n- **--terra-scroll-hint-ring-color** - The color of the pulsing ring. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The clickable button element.\n- **icon-container** - The container for the icon and pulsing ring.\n- **icon** - The chevron icon.\n- **ring** - The pulsing ring around the icon.\n- **text** - The \"SCROLL TO CONTINUE\" text.",
+      "attributes": [
+        {
+          "name": "inline",
+          "description": "When true, the component will be positioned inline in the DOM flow instead of fixed to the viewport.",
+          "values": []
+        },
+        {
+          "name": "dark",
+          "description": "When true, forces dark mode styles regardless of system preference. Useful when placing the component on a dark background.",
+          "values": []
+        },
+        {
+          "name": "inactivityDelay",
+          "description": "The delay in milliseconds before showing the scroll hint after inactivity. Defaults to 3000ms (3 seconds).",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://terra-ui.netlify.app/components/scroll-hint"
+        }
+      ]
+    },
     {
       "name": "terra-site-navigation",
       "description": "Site navigation provides a flexible navigation structure with dropdown menus.\n---\n\n\n### **Slots:**\n - _default_ - Navigation items. Can contain `<terra-dropdown>` elements or any custom navigation content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -1968,34 +1968,6 @@
         }
       ]
     },
-    {
-      "name": "terra-status-indicator",
-      "description": "Status indicators are dynamic labels that indicate the current state of a mission or project.\n---\n\n\n### **Slots:**\n - _default_ - The status label text.\n\n### **CSS Properties:**\n - **--terra-status-indicator-dot-color** - The color of the status dot. _(default: undefined)_\n- **--terra-status-indicator-label-color** - The color of the label text. _(default: undefined)_\n- **--terra-status-indicator-font-family** - The font family for the label. _(default: undefined)_\n- **--terra-status-indicator-font-size** - The font size for the label. _(default: undefined)_\n- **--terra-status-indicator-font-weight** - The font weight for the label. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **dot** - The colored status dot.\n- **label** - The text label.",
-      "attributes": [
-        {
-          "name": "variant",
-          "description": "The status variant. Determines the color of the indicator dot.",
-          "values": [
-            { "name": "" },
-            { "name": "active" },
-            { "name": "completed" },
-            { "name": "testing" },
-            { "name": "future" }
-          ]
-        },
-        {
-          "name": "dark",
-          "description": "When true, forces dark mode styles regardless of system preference. Useful when placing the component on a dark background.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/status-indicator"
-        }
-      ]
-    },
     {
       "name": "terra-spatial-picker",
       "description": "A component that allows input of coordinates and rendering of map.\n---\n",
@@ -2078,6 +2050,65 @@
         }
       ]
     },
+    {
+      "name": "terra-status-indicator",
+      "description": "Status indicators are dynamic labels that indicate the current state of a mission or project.\n---\n\n\n### **Slots:**\n - _default_ - The status label text.\n\n### **CSS Properties:**\n - **--terra-status-indicator-dot-color** - The color of the status dot. _(default: undefined)_\n- **--terra-status-indicator-label-color** - The color of the label text. _(default: undefined)_\n- **--terra-status-indicator-font-family** - The font family for the label. _(default: undefined)_\n- **--terra-status-indicator-font-size** - The font size for the label. _(default: undefined)_\n- **--terra-status-indicator-font-weight** - The font weight for the label. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **dot** - The colored status dot.\n- **label** - The text label.",
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "The status variant. Determines the color of the indicator dot.",
+          "values": [
+            { "name": "" },
+            { "name": "active" },
+            { "name": "completed" },
+            { "name": "testing" },
+            { "name": "future" }
+          ]
+        },
+        {
+          "name": "dark",
+          "description": "When true, forces dark mode styles regardless of system preference. Useful when placing the component on a dark background.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://terra-ui.netlify.app/components/status-indicator"
+        }
+      ]
+    },
+    {
+      "name": "terra-stepper-step",
+      "description": "A step within a stepper component that displays progress through a multi-step workflow.\n---\n\n\n### **Slots:**\n - _default_ - The step's caption (optional, only shown in default variant).\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **bar** - The progress bar indicator.\n- **content** - The content area containing title and caption.\n- **title** - The step's title.\n- **caption** - The step's caption.\n- **icon** - The checkmark icon (shown when completed).",
+      "attributes": [
+        {
+          "name": "state",
+          "description": "The step's state. \"completed\" shows a checkmark, \"current\" highlights the step as active,\nand \"upcoming\" shows the step as not yet reached.",
+          "values": [
+            { "name": "completed" },
+            { "name": "current" },
+            { "name": "upcoming" }
+          ]
+        },
+        {
+          "name": "title",
+          "description": "The step's title. Should be short, preferably 1-2 words.",
+          "values": []
+        },
+        {
+          "name": "hide-checkmark",
+          "description": "When true, hides the checkmark icon for completed steps.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://terra-ui.netlify.app/components/stepper-step"
+        }
+      ]
+    },
     {
       "name": "terra-stepper",
       "description": "Steppers display a visitor's progress through linear workflows and experiences with multiple steps.\n---\n\n\n### **Slots:**\n - _default_ - One or more `<terra-stepper-step>` elements to display in the stepper.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -2132,37 +2163,6 @@
         }
       ]
     },
-    {
-      "name": "terra-stepper-step",
-      "description": "A step within a stepper component that displays progress through a multi-step workflow.\n---\n\n\n### **Slots:**\n - _default_ - The step's caption (optional, only shown in default variant).\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **bar** - The progress bar indicator.\n- **content** - The content area containing title and caption.\n- **title** - The step's title.\n- **caption** - The step's caption.\n- **icon** - The checkmark icon (shown when completed).",
-      "attributes": [
-        {
-          "name": "state",
-          "description": "The step's state. \"completed\" shows a checkmark, \"current\" highlights the step as active,\nand \"upcoming\" shows the step as not yet reached.",
-          "values": [
-            { "name": "completed" },
-            { "name": "current" },
-            { "name": "upcoming" }
-          ]
-        },
-        {
-          "name": "title",
-          "description": "The step's title. Should be short, preferably 1-2 words.",
-          "values": []
-        },
-        {
-          "name": "hide-checkmark",
-          "description": "When true, hides the checkmark icon for completed steps.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/stepper-step"
-        }
-      ]
-    },
     {
       "name": "terra-tab-panel",
       "description": "Tab panels are used inside [tabs](/components/tabs) to display tabbed content.\n---\n\n\n### **Slots:**\n - _default_ - The tab panel's content.\n\n### **CSS Properties:**\n - **--padding** - The tab panel's padding. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -2569,8 +2569,8 @@
       ]
     },
     {
-      "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### **Methods:**\n - **valueChanged(oldValue: _string_, newValue: _string_)** - This component's value is read by other components.\nInternally, the variable metdata has slight differences that require adapting.\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.",
+      "name": "terra-variable-keyword-search",
+      "description": "Fuzzy-search for dataset keywords in combobox with list autocomplete.\n---\n\n\n### **Events:**\n - **terra-variable-keyword-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.",
       "attributes": [
         {
           "name": "label",
@@ -2582,42 +2582,28 @@
           "description": "Set a placeholder for the combobox with this.\nDefaults to the label's value.",
           "values": []
         },
-        {
-          "name": "hide-help",
-          "description": "Hide the combobox's help text.\nWhen hidden, not rendered at all.",
-          "values": []
-        },
         {
           "name": "hide-label",
           "description": "Hide the combobox's label text.\nWhen hidden, still presents to screen readers.",
           "values": []
         },
         {
-          "name": "use-tags",
-          "description": "Determines if the variable combobox uses tags or plain text to display the query.",
-          "values": []
-        },
-        {
-          "name": "value",
-          "description": "Represents the EntryID (<collection-name>_<variable-name>) of the selected variable.\nOther components (like the time-series graphing component) will use this.",
-          "values": []
+          "name": "searchConfig",
+          "description": "type can be `Boolean`, `String`, `Number`, `Object`, or `Array`",
+          "values": [{ "name": "object" }]
         },
-        {
-          "name": "bearer-token",
-          "description": "The token to be used for authentication with remote servers.\nThe component provides the header \"Authorization: Bearer\" (the request header and authentication scheme).\nThe property's value will be inserted after \"Bearer\" (the authentication scheme).",
-          "values": []
-        }
+        { "name": "value", "values": [] }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/variable-combobox"
+          "url": "https://terra-ui.netlify.app/components/variable-keyword-search"
         }
       ]
     },
     {
-      "name": "terra-variable-keyword-search",
-      "description": "Fuzzy-search for dataset keywords in combobox with list autocomplete.\n---\n\n\n### **Events:**\n - **terra-variable-keyword-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.",
+      "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### **Methods:**\n - **valueChanged(oldValue: _string_, newValue: _string_)** - This component's value is read by other components.\nInternally, the variable metdata has slight differences that require adapting.\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.",
       "attributes": [
         {
           "name": "label",
@@ -2629,22 +2615,36 @@
           "description": "Set a placeholder for the combobox with this.\nDefaults to the label's value.",
           "values": []
         },
+        {
+          "name": "hide-help",
+          "description": "Hide the combobox's help text.\nWhen hidden, not rendered at all.",
+          "values": []
+        },
         {
           "name": "hide-label",
           "description": "Hide the combobox's label text.\nWhen hidden, still presents to screen readers.",
           "values": []
         },
         {
-          "name": "searchConfig",
-          "description": "type can be `Boolean`, `String`, `Number`, `Object`, or `Array`",
-          "values": [{ "name": "object" }]
+          "name": "use-tags",
+          "description": "Determines if the variable combobox uses tags or plain text to display the query.",
+          "values": []
         },
-        { "name": "value", "values": [] }
+        {
+          "name": "value",
+          "description": "Represents the EntryID (<collection-name>_<variable-name>) of the selected variable.\nOther components (like the time-series graphing component) will use this.",
+          "values": []
+        },
+        {
+          "name": "bearer-token",
+          "description": "The token to be used for authentication with remote servers.\nThe component provides the header \"Authorization: Bearer\" (the request header and authentication scheme).\nThe property's value will be inserted after \"Bearer\" (the authentication scheme).",
+          "values": []
+        }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/variable-keyword-search"
+          "url": "https://terra-ui.netlify.app/components/variable-combobox"
         }
       ]
     }