@nasa-terra/components 0.0.145 → 0.0.146

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

@@ -2,29 +2,6 @@
   "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
   "version": 1.1,
   "tags": [
-    {
-      "name": "terra-accordion",
-      "description": "A collapsible content panel for showing and hiding content.\n---\n\n\n### **Events:**\n - **terra-accordion-toggle** - emitted when the accordion opens or closes\n\n### **Slots:**\n - _default_ - The default slot for accordion content.\n- **summary** - The summary/header for the accordion (optional, overrides summary property)",
-      "attributes": [
-        {
-          "name": "summary",
-          "description": "The summary/header for the accordion. Use the property for simple text, or the slot for custom content.",
-          "values": []
-        },
-        {
-          "name": "open",
-          "description": "Whether the accordion is open or not. This property is reflected as an attribute and can be controlled programmatically or by user interaction.",
-          "values": []
-        },
-        { "name": "showArrow", "values": [] }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/accordion"
-        }
-      ]
-    },
     {
       "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.",
@@ -67,12 +44,22 @@
       ]
     },
     {
-      "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-alert",
+      "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **terra-show** - Emitted when the alert opens.\n- **terra-after-show** - Emitted after the alert opens and all animations are complete.\n- **terra-hide** - Emitted when the alert closes.\n- **terra-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's main content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **message** - The container that wraps the alert's main content.",
       "attributes": [
+        {
+          "name": "open",
+          "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
+          "values": []
+        },
+        {
+          "name": "closable",
+          "description": "Enables a close button that allows the user to dismiss the alert.",
+          "values": []
+        },
         {
           "name": "variant",
-          "description": "The badge's theme variant.",
+          "description": "The alert's theme variant.",
           "values": [
             { "name": "" },
             { "name": "primary" },
@@ -83,40 +70,35 @@
           ]
         },
         {
-          "name": "pill",
-          "description": "Draws a pill-style badge with rounded edges.",
-          "values": []
+          "name": "appearance",
+          "description": "The alert's appearance style. \"filled\" uses a colored background with white text (HDS default).\n\"white\" uses a white background with a colored top border and dark text.",
+          "values": [{ "name": "filled" }, { "name": "white" }]
         },
         {
-          "name": "pulse",
-          "description": "Makes the badge pulsate to draw attention.",
+          "name": "duration",
+          "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
           "values": []
+        },
+        {
+          "name": "countdown",
+          "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
+          "values": [{ "name": "rtl" }, { "name": "ltr" }]
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/badge"
+          "url": "https://terra-ui.netlify.app/components/alert"
         }
       ]
     },
     {
-      "name": "terra-alert",
-      "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **terra-show** - Emitted when the alert opens.\n- **terra-after-show** - Emitted after the alert opens and all animations are complete.\n- **terra-hide** - Emitted when the alert closes.\n- **terra-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's main content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **message** - The container that wraps the alert's main content.",
+      "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": "open",
-          "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
-          "values": []
-        },
-        {
-          "name": "closable",
-          "description": "Enables a close button that allows the user to dismiss the alert.",
-          "values": []
-        },
         {
           "name": "variant",
-          "description": "The alert's theme variant.",
+          "description": "The badge's theme variant.",
           "values": [
             { "name": "" },
             { "name": "primary" },
@@ -127,25 +109,20 @@
           ]
         },
         {
-          "name": "appearance",
-          "description": "The alert's appearance style. \"filled\" uses a colored background with white text (HDS default).\n\"white\" uses a white background with a colored top border and dark text.",
-          "values": [{ "name": "filled" }, { "name": "white" }]
-        },
-        {
-          "name": "duration",
-          "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
+          "name": "pill",
+          "description": "Draws a pill-style badge with rounded edges.",
           "values": []
         },
         {
-          "name": "countdown",
-          "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
-          "values": [{ "name": "rtl" }, { "name": "ltr" }]
+          "name": "pulse",
+          "description": "Makes the badge pulsate to draw attention.",
+          "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/alert"
+          "url": "https://terra-ui.netlify.app/components/badge"
         }
       ]
     },
@@ -194,37 +171,43 @@
       ]
     },
     {
-      "name": "terra-browse-variables",
-      "description": "Browse through the NASA CMR or Giovanni catalogs.\n---\n",
+      "name": "terra-accordion",
+      "description": "A collapsible content panel for showing and hiding content.\n---\n\n\n### **Events:**\n - **terra-accordion-toggle** - emitted when the accordion opens or closes\n\n### **Slots:**\n - _default_ - The default slot for accordion content.\n- **summary** - The summary/header for the accordion (optional, overrides summary property)",
       "attributes": [
         {
-          "name": "catalog",
-          "description": "Allows the user to switch the catalog between different providers\nTODO: add support for CMR catalog and make it the default",
-          "values": [{ "name": "giovanni" }]
+          "name": "summary",
+          "description": "The summary/header for the accordion. Use the property for simple text, or the slot for custom content.",
+          "values": []
         },
-        { "name": "selected-variable-entry-ids", "values": [] }
+        {
+          "name": "open",
+          "description": "Whether the accordion is open or not. This property is reflected as an attribute and can be controlled programmatically or by user interaction.",
+          "values": []
+        },
+        { "name": "showArrow", "values": [] }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/browse-variables"
+          "url": "https://terra-ui.netlify.app/components/accordion"
         }
       ]
     },
     {
-      "name": "terra-button-group",
-      "description": "Button groups can be used to group related buttons into sections.\n---\n\n\n### **Slots:**\n - _default_ - One or more `<terra-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "name": "terra-browse-variables",
+      "description": "Browse through the NASA CMR or Giovanni catalogs.\n---\n",
       "attributes": [
         {
-          "name": "label",
-          "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
-          "values": []
-        }
+          "name": "catalog",
+          "description": "Allows the user to switch the catalog between different providers\nTODO: add support for CMR catalog and make it the default",
+          "values": [{ "name": "giovanni" }]
+        },
+        { "name": "selected-variable-entry-ids", "values": [] }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/button-group"
+          "url": "https://terra-ui.netlify.app/components/browse-variables"
         }
       ]
     },
@@ -393,6 +376,23 @@
         }
       ]
     },
+    {
+      "name": "terra-button-group",
+      "description": "Button groups can be used to group related buttons into sections.\n---\n\n\n### **Slots:**\n - _default_ - One or more `<terra-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://terra-ui.netlify.app/components/button-group"
+        }
+      ]
+    },
     {
       "name": "terra-caption",
       "description": "Captions are small text blocks that describe photos, provide additional context and information, and give credit to photographers and other content owners and creators.\n---\n\n\n### **Slots:**\n - _default_ - The caption content. Use a `<span class=\"credit\">` element for credits, which will be displayed with higher contrast.\n\n### **CSS Properties:**\n - **--terra-caption-font-family** - The font family for the caption. _(default: undefined)_\n- **--terra-caption-font-size** - The font size for the caption. _(default: undefined)_\n- **--terra-caption-font-weight** - The font weight for the caption. _(default: undefined)_\n- **--terra-caption-line-height** - The line height for the caption. _(default: undefined)_\n- **--terra-caption-color** - The text color for the caption. _(default: undefined)_\n- **--terra-caption-credit-color** - The text color for credits within the caption. _(default: undefined)_",
@@ -756,7 +756,17 @@
         { "name": "split-inputs", "values": [] },
         { "name": "placeholder", "values": [] },
         { "name": "startPlaceholder", "values": [] },
-        { "name": "endPlaceholder", "values": [] }
+        { "name": "endPlaceholder", "values": [] },
+        {
+          "name": "role",
+          "description": "The ARIA role for the button. Defaults to 'group'.",
+          "values": []
+        },
+        {
+          "name": "aria-label",
+          "description": "The ARIA label for the date picker. Defaults to 'Date picker'.",
+          "values": []
+        }
       ],
       "references": [
         {
@@ -1132,6 +1142,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-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.",
@@ -1168,26 +1198,6 @@
         }
       ]
     },
-    {
-      "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,17 +1249,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-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.",
@@ -1288,48 +1287,48 @@
       ]
     },
     {
-      "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.",
+      "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": "value",
-          "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
-          "values": []
+          "name": "data",
+          "values": [{ "name": "Array<Partial<Plotly.Data>>" }]
         },
         {
-          "name": "disabled",
-          "description": "Draws the option in a disabled state, preventing selection.",
-          "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/option"
+          "url": "https://terra-ui.netlify.app/components/plot"
         }
       ]
     },
     {
-      "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.",
+      "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.",
       "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": "value",
+          "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
+          "values": []
         },
         {
-          "name": "colors",
-          "description": "Optional: Colors to assign to each time series line",
-          "values": [{ "name": "string[]" }]
+          "name": "disabled",
+          "description": "Draws the option in a disabled state, preventing selection.",
+          "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/plot"
+          "url": "https://terra-ui.netlify.app/components/option"
         }
       ]
     },
@@ -1365,6 +1364,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-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.",
@@ -1401,12 +1411,52 @@
       ]
     },
     {
-      "name": "terra-popup",
-      "description": "Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.\n---\n\n\n### **Events:**\n - **terra-reposition** - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive operations in your listener or consider debouncing it.\n\n### **Methods:**\n - **reposition()** - Forces the popup to recalculate and reposition itself.\n\n### **Slots:**\n - _default_ - The popup's content.\n- **anchor** - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the `anchor` attribute or property instead.\n\n### **CSS Properties:**\n - **--arrow-size** - The size of the arrow. Note that an arrow won't be shown unless the `arrow` attribute is used. _(default: 6px)_\n- **--arrow-color** - The color of the arrow. _(default: var(--terra-color-carbon-black))_\n- **--auto-size-available-width** - A read-only custom property that determines the amount of width the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n- **--auto-size-available-height** - A read-only custom property that determines the amount of height the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n\n### **CSS Parts:**\n - **arrow** - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and maybe a border or box shadow.\n- **popup** - The popup's container. Useful for setting a background color, box shadow, etc.\n- **hover-bridge** - The hover bridge element. Only available when the `hover-bridge` option is enabled.",
+      "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": "anchor",
-          "description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\nelement `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n`anchor` slot instead.",
+          "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-popup",
+      "description": "Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.\n---\n\n\n### **Events:**\n - **terra-reposition** - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive operations in your listener or consider debouncing it.\n\n### **Methods:**\n - **reposition()** - Forces the popup to recalculate and reposition itself.\n\n### **Slots:**\n - _default_ - The popup's content.\n- **anchor** - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the `anchor` attribute or property instead.\n\n### **CSS Properties:**\n - **--arrow-size** - The size of the arrow. Note that an arrow won't be shown unless the `arrow` attribute is used. _(default: 6px)_\n- **--arrow-color** - The color of the arrow. _(default: var(--terra-color-carbon-black))_\n- **--auto-size-available-width** - A read-only custom property that determines the amount of width the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n- **--auto-size-available-height** - A read-only custom property that determines the amount of height the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n\n### **CSS Parts:**\n - **arrow** - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and maybe a border or box shadow.\n- **popup** - The popup's container. Useful for setting a background color, box shadow, etc.\n- **hover-bridge** - The hover bridge element. Only available when the `hover-bridge` option is enabled.",
+      "attributes": [
+        {
+          "name": "anchor",
+          "description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\nelement `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n`anchor` slot instead.",
           "values": [{ "name": "Element" }, { "name": "VirtualElement" }]
         },
         {
@@ -1554,46 +1604,6 @@
         }
       ]
     },
-    {
-      "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",
       "description": "Radio buttons are a form field used when only a single selection can be made from a list.\n---\n\n\n### **Events:**\n - **terra-blur** - Emitted when the radio loses focus.\n- **terra-change** - Emitted when the checked state changes.\n- **terra-focus** - Emitted when the radio gains focus.\n- **terra-input** - Emitted when the radio receives input.\n- **terra-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the radio.\n- **focus(options: _FocusOptions_)** - Sets focus on the radio.\n- **blur()** - Removes focus from the radio.\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\n### **Slots:**\n - _default_ - The radio's label.\n\n### **CSS Properties:**\n - **--terra-radio-*** - All radio design tokens from horizon.css are supported. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The circular container that wraps the radio's checked state.\n- **control--checked** - The radio control when the radio is checked.\n- **checked-icon** - The checked icon, an SVG element.\n- **label** - The container that wraps the radio's label.",
@@ -1869,28 +1879,6 @@
         }
       ]
     },
-    {
-      "name": "terra-skeleton",
-      "description": "Skeletons are loading indicators to represent where content will eventually be drawn.\n---\n",
-      "attributes": [
-        { "name": "rows", "values": [] },
-        {
-          "name": "effect",
-          "values": [
-            { "name": "pulse" },
-            { "name": "sheen" },
-            { "name": "none" }
-          ]
-        },
-        { "name": "variableWidths", "values": [] }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/skeleton"
-        }
-      ]
-    },
     {
       "name": "terra-slider",
       "description": "\n---\n",
@@ -1968,6 +1956,28 @@
         }
       ]
     },
+    {
+      "name": "terra-skeleton",
+      "description": "Skeletons are loading indicators to represent where content will eventually be drawn.\n---\n",
+      "attributes": [
+        { "name": "rows", "values": [] },
+        {
+          "name": "effect",
+          "values": [
+            { "name": "pulse" },
+            { "name": "sheen" },
+            { "name": "none" }
+          ]
+        },
+        { "name": "variableWidths", "values": [] }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://terra-ui.netlify.app/components/skeleton"
+        }
+      ]
+    },
     {
       "name": "terra-spatial-picker",
       "description": "A component that allows input of coordinates and rendering of map.\n---\n",
@@ -2078,37 +2088,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-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.",
@@ -2163,6 +2142,37 @@
         }
       ]
     },
+    {
+      "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.",
@@ -2343,6 +2353,45 @@
         }
       ]
     },
+    {
+      "name": "terra-toast",
+      "description": "Toasts are used to display brief, non-intrusive notifications that appear temporarily.\n---\n\n\n### **Events:**\n - **terra-show** - Emitted when the toast opens.\n- **terra-after-show** - Emitted after the toast opens and all animations are complete.\n- **terra-hide** - Emitted when the toast closes.\n- **terra-after-hide** - Emitted after the toast closes and all animations are complete.\n\n### **Methods:**\n - **toast()** - Displays the toast as a notification. This will move the toast out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the toast, you can reuse it by\ncalling this method again. The returned promise will resolve after the toast is hidden.\n- **show()** - Shows the toast.\n- **hide()** - Hides the toast.\n- **notify(message: _string_, variant: _'primary' | 'success' | 'neutral' | 'warning' | 'danger'_, icon: _string_, duration): __** - Creates a toast notification imperatively. This is a convenience method that creates a toast, appends it to the\nbody, and displays it as a notification.\n\n### **Slots:**\n - _default_ - The toast's main content.\n- **icon** - An icon to show in the toast. Works best with `<terra-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<terra-alert>` element.\n- **base__base** - The alert's exported `base` part.\n- **base__icon** - The alert's exported `icon` part.\n- **base__message** - The alert's exported `message` part.",
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "The toast's theme variant.",
+          "values": [
+            { "name": "" },
+            { "name": "primary" },
+            { "name": "success" },
+            { "name": "neutral" },
+            { "name": "warning" },
+            { "name": "danger" }
+          ]
+        },
+        {
+          "name": "duration",
+          "description": "The length of time, in milliseconds, the toast will show before closing itself. If the user interacts with\nthe toast before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `3000` (3 seconds).",
+          "values": []
+        },
+        {
+          "name": "closable",
+          "description": "Enables a close button that allows the user to dismiss the toast.",
+          "values": []
+        },
+        {
+          "name": "countdown",
+          "description": "Enables a countdown that indicates the remaining time the toast will be displayed.\nTypically used for toasts with relatively long duration.",
+          "values": [{ "name": "rtl" }, { "name": "ltr" }]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://terra-ui.netlify.app/components/toast"
+        }
+      ]
+    },
     {
       "name": "terra-time-series",
       "description": "A component for visualizing time series data using the GES DISC Giovanni API.\n---\n\n\n### **Events:**\n - **terra-date-range-change** - Emitted whenever the date range is modified\n- **terra-time-series-data-change** - Emitted whenever time series data has been fetched from Giovanni",
@@ -2401,45 +2450,6 @@
         }
       ]
     },
-    {
-      "name": "terra-toast",
-      "description": "Toasts are used to display brief, non-intrusive notifications that appear temporarily.\n---\n\n\n### **Events:**\n - **terra-show** - Emitted when the toast opens.\n- **terra-after-show** - Emitted after the toast opens and all animations are complete.\n- **terra-hide** - Emitted when the toast closes.\n- **terra-after-hide** - Emitted after the toast closes and all animations are complete.\n\n### **Methods:**\n - **toast()** - Displays the toast as a notification. This will move the toast out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the toast, you can reuse it by\ncalling this method again. The returned promise will resolve after the toast is hidden.\n- **show()** - Shows the toast.\n- **hide()** - Hides the toast.\n- **notify(message: _string_, variant: _'primary' | 'success' | 'neutral' | 'warning' | 'danger'_, icon: _string_, duration): __** - Creates a toast notification imperatively. This is a convenience method that creates a toast, appends it to the\nbody, and displays it as a notification.\n\n### **Slots:**\n - _default_ - The toast's main content.\n- **icon** - An icon to show in the toast. Works best with `<terra-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<terra-alert>` element.\n- **base__base** - The alert's exported `base` part.\n- **base__icon** - The alert's exported `icon` part.\n- **base__message** - The alert's exported `message` part.",
-      "attributes": [
-        {
-          "name": "variant",
-          "description": "The toast's theme variant.",
-          "values": [
-            { "name": "" },
-            { "name": "primary" },
-            { "name": "success" },
-            { "name": "neutral" },
-            { "name": "warning" },
-            { "name": "danger" }
-          ]
-        },
-        {
-          "name": "duration",
-          "description": "The length of time, in milliseconds, the toast will show before closing itself. If the user interacts with\nthe toast before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `3000` (3 seconds).",
-          "values": []
-        },
-        {
-          "name": "closable",
-          "description": "Enables a close button that allows the user to dismiss the toast.",
-          "values": []
-        },
-        {
-          "name": "countdown",
-          "description": "Enables a countdown that indicates the remaining time the toast will be displayed.\nTypically used for toasts with relatively long duration.",
-          "values": [{ "name": "rtl" }, { "name": "ltr" }]
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/toast"
-        }
-      ]
-    },
     {
       "name": "terra-toggle",
       "description": "Switches allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **terra-blur** - Emitted when the control loses focus.\n- **terra-change** - Emitted when the control's checked state changes.\n- **terra-input** - Emitted when the control receives input.\n- **terra-focus** - Emitted when the control gains focus.\n- **terra-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the switch.\n- **focus(options: _FocusOptions_)** - Sets focus on the switch.\n- **blur()** - Removes focus from the switch.\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\n### **Slots:**\n - _default_ - The switch's label.\n- **help-text** - Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--width** - The width of the switch. _(default: undefined)_\n- **--height** - The height of the switch. _(default: undefined)_\n- **--thumb-size** - The size of the thumb. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The control that houses the switch's thumb.\n- **thumb** - The switch's thumb.\n- **label** - The switch's label.\n- **form-control-help-text** - The help text's wrapper.",