@nasa-terra/components 0.0.145 → 0.0.146

package/cdn/web-types.json

@@ -1,90 +1,91 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@nasa-terra/components",
-  "version": "0.0.145",
+  "version": "0.0.146",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
-          "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.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "variant",
-              "description": "The badge's theme variant.",
-              "value": {
-                "type": "| 'primary'\n        | 'success'\n        | 'neutral'\n        | 'warning'\n        | 'danger'",
-                "default": "'primary'"
-              }
+              "name": "image",
+              "description": "The image source to use for the avatar.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "pill",
-              "description": "Draws a pill-style badge with rounded edges.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "label",
+              "description": "A label to use to describe the avatar to assistive devices.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "pulse",
-              "description": "Makes the badge pulsate to draw attention.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "initials",
+              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "loading",
+              "description": "Indicates how the browser should load the image.",
+              "value": { "type": "'eager' | 'lazy'", "default": "'eager'" }
+            },
+            {
+              "name": "shape",
+              "description": "The shape of the avatar.",
+              "value": {
+                "type": "'circle' | 'square' | 'rounded'",
+                "default": "'circle'"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "icon",
+              "description": "The default icon to use when no image or initials are present. Works best with `<terra-icon>`."
+            }
+          ],
+          "events": [
+            {
+              "name": "terra-error",
+              "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause."
             }
           ],
-          "slots": [{ "name": "", "description": "The badge's content." }],
-          "events": [],
           "js": {
             "properties": [
               {
-                "name": "variant",
-                "description": "The badge's theme variant.",
-                "type": "| 'primary'\n        | 'success'\n        | 'neutral'\n        | 'warning'\n        | 'danger'"
+                "name": "image",
+                "description": "The image source to use for the avatar.",
+                "type": "string"
               },
               {
-                "name": "pill",
-                "description": "Draws a pill-style badge with rounded edges.",
-                "type": "boolean"
+                "name": "label",
+                "description": "A label to use to describe the avatar to assistive devices.",
+                "type": "string"
               },
               {
-                "name": "pulse",
-                "description": "Makes the badge pulsate to draw attention.",
-                "type": "boolean"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "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.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "href",
-              "description": "The URL the breadcrumb points to. When omitted, the breadcrumb is rendered as plain text.",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "current",
-              "description": "Indicates that this breadcrumb represents the current page.\nWhen set, `aria-current=\"page\"` will be applied to the underlying element.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The default slot." }],
-          "events": [],
-          "js": {
-            "properties": [
+                "name": "initials",
+                "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+                "type": "string"
+              },
               {
-                "name": "href",
-                "description": "The URL the breadcrumb points to. When omitted, the breadcrumb is rendered as plain text.",
-                "type": "string | undefined"
+                "name": "loading",
+                "description": "Indicates how the browser should load the image.",
+                "type": "'eager' | 'lazy'"
               },
               {
-                "name": "current",
-                "description": "Indicates that this breadcrumb represents the current page.\nWhen set, `aria-current=\"page\"` will be applied to the underlying element.",
-                "type": "boolean"
+                "name": "shape",
+                "description": "The shape of the avatar.",
+                "type": "'circle' | 'square' | 'rounded'"
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "terra-error",
+                "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause."
+              }
+            ]
           }
         },
         {
@@ -200,85 +201,123 @@
           }
         },
         {
-          "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-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.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "image",
-              "description": "The image source to use for the avatar.",
-              "value": { "type": "string", "default": "''" }
+              "name": "variant",
+              "description": "The badge's theme variant.",
+              "value": {
+                "type": "| 'primary'\n        | 'success'\n        | 'neutral'\n        | 'warning'\n        | 'danger'",
+                "default": "'primary'"
+              }
             },
             {
-              "name": "label",
-              "description": "A label to use to describe the avatar to assistive devices.",
-              "value": { "type": "string", "default": "''" }
+              "name": "pill",
+              "description": "Draws a pill-style badge with rounded edges.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "initials",
-              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
-              "value": { "type": "string", "default": "''" }
-            },
+              "name": "pulse",
+              "description": "Makes the badge pulsate to draw attention.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The badge's content." }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "description": "The badge's theme variant.",
+                "type": "| 'primary'\n        | 'success'\n        | 'neutral'\n        | 'warning'\n        | 'danger'"
+              },
+              {
+                "name": "pill",
+                "description": "Draws a pill-style badge with rounded edges.",
+                "type": "boolean"
+              },
+              {
+                "name": "pulse",
+                "description": "Makes the badge pulsate to draw attention.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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.",
+          "doc-url": "",
+          "attributes": [
             {
-              "name": "loading",
-              "description": "Indicates how the browser should load the image.",
-              "value": { "type": "'eager' | 'lazy'", "default": "'eager'" }
+              "name": "href",
+              "description": "The URL the breadcrumb points to. When omitted, the breadcrumb is rendered as plain text.",
+              "value": { "type": "string | undefined" }
             },
             {
-              "name": "shape",
-              "description": "The shape of the avatar.",
-              "value": {
-                "type": "'circle' | 'square' | 'rounded'",
-                "default": "'circle'"
-              }
+              "name": "current",
+              "description": "Indicates that this breadcrumb represents the current page.\nWhen set, `aria-current=\"page\"` will be applied to the underlying element.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
-          "slots": [
+          "slots": [{ "name": "", "description": "The default slot." }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "href",
+                "description": "The URL the breadcrumb points to. When omitted, the breadcrumb is rendered as plain text.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "current",
+                "description": "Indicates that this breadcrumb represents the current page.\nWhen set, `aria-current=\"page\"` will be applied to the underlying element.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "terra-breadcrumbs",
+          "description": "A collection of breadcrumb items that shows the current page's location in the site hierarchy.\n---\n\n\n### **Slots:**\n - _default_ - The breadcrumb items. Typically `<terra-breadcrumb>` elements.\n\n### **CSS Properties:**\n - **--terra-breadcrumbs-gap** - The space between breadcrumbs. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **nav** - The navigation container.",
+          "doc-url": "",
+          "attributes": [
             {
-              "name": "icon",
-              "description": "The default icon to use when no image or initials are present. Works best with `<terra-icon>`."
+              "name": "aria-label",
+              "description": "Accessible label for the breadcrumb navigation.",
+              "value": { "type": "string", "default": "'Breadcrumb'" }
+            },
+            {
+              "name": "theme",
+              "description": "Color theme of the breadcrumbs, matching the Horizon Design System.",
+              "value": { "type": "'light' | 'dark'", "default": "'light'" }
             }
           ],
-          "events": [
+          "slots": [
             {
-              "name": "terra-error",
-              "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause."
+              "name": "",
+              "description": "The breadcrumb items. Typically `<terra-breadcrumb>` elements."
             }
           ],
+          "events": [],
           "js": {
             "properties": [
               {
-                "name": "image",
-                "description": "The image source to use for the avatar.",
-                "type": "string"
-              },
-              {
-                "name": "label",
-                "description": "A label to use to describe the avatar to assistive devices.",
-                "type": "string"
-              },
-              {
-                "name": "initials",
-                "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+                "name": "ariaLabel",
+                "description": "Accessible label for the breadcrumb navigation.",
                 "type": "string"
               },
               {
-                "name": "loading",
-                "description": "Indicates how the browser should load the image.",
-                "type": "'eager' | 'lazy'"
-              },
-              {
-                "name": "shape",
-                "description": "The shape of the avatar.",
-                "type": "'circle' | 'square' | 'rounded'"
+                "name": "theme",
+                "description": "Color theme of the breadcrumbs, matching the Horizon Design System.",
+                "type": "'light' | 'dark'"
               }
             ],
-            "events": [
-              {
-                "name": "terra-error",
-                "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause."
-              }
-            ]
+            "events": []
           }
         },
         {
@@ -339,45 +378,6 @@
             ]
           }
         },
-        {
-          "name": "terra-breadcrumbs",
-          "description": "A collection of breadcrumb items that shows the current page's location in the site hierarchy.\n---\n\n\n### **Slots:**\n - _default_ - The breadcrumb items. Typically `<terra-breadcrumb>` elements.\n\n### **CSS Properties:**\n - **--terra-breadcrumbs-gap** - The space between breadcrumbs. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **nav** - The navigation container.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "aria-label",
-              "description": "Accessible label for the breadcrumb navigation.",
-              "value": { "type": "string", "default": "'Breadcrumb'" }
-            },
-            {
-              "name": "theme",
-              "description": "Color theme of the breadcrumbs, matching the Horizon Design System.",
-              "value": { "type": "'light' | 'dark'", "default": "'light'" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "The breadcrumb items. Typically `<terra-breadcrumb>` elements."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "ariaLabel",
-                "description": "Accessible label for the breadcrumb navigation.",
-                "type": "string"
-              },
-              {
-                "name": "theme",
-                "description": "Color theme of the breadcrumbs, matching the Horizon Design System.",
-                "type": "'light' | 'dark'"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "terra-browse-variables",
           "description": "Browse through the NASA CMR or Giovanni catalogs.\n---\n",
@@ -1618,6 +1618,16 @@
             {
               "name": "endPlaceholder",
               "value": { "type": "string", "default": "'End Date'" }
+            },
+            {
+              "name": "role",
+              "description": "The ARIA role for the button. Defaults to 'group'.",
+              "value": { "type": "string | null", "default": "'group'" }
+            },
+            {
+              "name": "aria-label",
+              "description": "The ARIA label for the date picker. Defaults to 'Date picker'.",
+              "value": { "type": "string | null", "default": "'Date picker'" }
             }
           ],
           "slots": [{ "name": "", "description": "The default slot." }],
@@ -1649,6 +1659,16 @@
               { "name": "placeholder", "type": "string" },
               { "name": "startPlaceholder", "type": "string" },
               { "name": "endPlaceholder", "type": "string" },
+              {
+                "name": "role",
+                "description": "The ARIA role for the button. Defaults to 'group'.",
+                "type": "string | null"
+              },
+              {
+                "name": "ariaLabel",
+                "description": "The ARIA label for the date picker. Defaults to 'Date picker'.",
+                "type": "string | null"
+              },
               { "name": "isOpen", "type": "boolean" },
               { "name": "leftMonth", "type": "Date" },
               { "name": "rightMonth", "type": "Date" },
@@ -2183,48 +2203,146 @@
                 "type": "string"
               },
               {
-                "name": "multiple",
-                "description": "Allows multiple files to be selected.",
-                "type": "boolean"
+                "name": "multiple",
+                "description": "Allows multiple files to be selected.",
+                "type": "boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the file upload.",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Makes the file upload a required field.",
+                "type": "boolean"
+              },
+              {
+                "name": "accept",
+                "description": "Accepted file types (e.g., \"image/*\", \".pdf\", \"image/png,image/jpeg\").",
+                "type": "string"
+              },
+              {
+                "name": "maxFileSize",
+                "description": "Maximum file size in bytes.",
+                "type": "number | undefined"
+              },
+              {
+                "name": "maxFiles",
+                "description": "Maximum number of files allowed when multiple is enabled.",
+                "type": "number | undefined"
+              }
+            ],
+            "events": [
+              {
+                "name": "terra-change",
+                "description": "Emitted when files are selected or removed."
+              },
+              {
+                "name": "terra-focus",
+                "description": "Emitted when the control gains focus."
+              },
+              {
+                "name": "terra-blur",
+                "description": "Emitted when the control loses focus."
+              }
+            ]
+          }
+        },
+        {
+          "name": "terra-icon",
+          "description": "Icons are symbols that can be used to represent various options within an application.\n---\n\n\n### **Events:**\n - **terra-load** - Emitted when the icon has loaded.\n- **terra-error** - Emitted when the icon fails to load due to an error.\n\n### **CSS Parts:**\n - **svg** - The internal SVG element.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "src",
+              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "label",
+              "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "library",
+              "description": "The name of a registered custom icon library.",
+              "value": {
+                "type": "'default' | 'heroicons' | string",
+                "default": "'default'"
+              }
+            },
+            {
+              "name": "color",
+              "description": "The CSS color to assign to the SVG.",
+              "value": { "type": "string | null", "default": "null" }
+            },
+            {
+              "name": "font-size",
+              "description": "The CSS font-size to assign to the SVG.",
+              "value": { "type": "string | null", "default": "null" }
+            }
+          ],
+          "events": [
+            {
+              "name": "terra-load",
+              "description": "Emitted when the icon has loaded."
+            },
+            {
+              "name": "terra-error",
+              "description": "Emitted when the icon fails to load due to an error."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "svg",
+                "type": "SVGElement | HTMLTemplateResult | null"
+              },
+              {
+                "name": "name",
+                "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+                "type": "string | undefined"
               },
               {
-                "name": "disabled",
-                "description": "Disables the file upload.",
-                "type": "boolean"
+                "name": "src",
+                "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
+                "type": "string | undefined"
               },
               {
-                "name": "required",
-                "description": "Makes the file upload a required field.",
-                "type": "boolean"
+                "name": "label",
+                "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
+                "type": "string"
               },
               {
-                "name": "accept",
-                "description": "Accepted file types (e.g., \"image/*\", \".pdf\", \"image/png,image/jpeg\").",
-                "type": "string"
+                "name": "library",
+                "description": "The name of a registered custom icon library.",
+                "type": "'default' | 'heroicons' | string"
               },
               {
-                "name": "maxFileSize",
-                "description": "Maximum file size in bytes.",
-                "type": "number | undefined"
+                "name": "color",
+                "description": "The CSS color to assign to the SVG.",
+                "type": "string | null"
               },
               {
-                "name": "maxFiles",
-                "description": "Maximum number of files allowed when multiple is enabled.",
-                "type": "number | undefined"
+                "name": "fontSize",
+                "description": "The CSS font-size to assign to the SVG.",
+                "type": "string | null"
               }
             ],
             "events": [
               {
-                "name": "terra-change",
-                "description": "Emitted when files are selected or removed."
-              },
-              {
-                "name": "terra-focus",
-                "description": "Emitted when the control gains focus."
+                "name": "terra-load",
+                "description": "Emitted when the icon has loaded."
               },
               {
-                "name": "terra-blur",
-                "description": "Emitted when the control loses focus."
+                "name": "terra-error",
+                "description": "Emitted when the icon fails to load due to an error."
               }
             ]
           }
@@ -2510,104 +2628,6 @@
             ]
           }
         },
-        {
-          "name": "terra-icon",
-          "description": "Icons are symbols that can be used to represent various options within an application.\n---\n\n\n### **Events:**\n - **terra-load** - Emitted when the icon has loaded.\n- **terra-error** - Emitted when the icon fails to load due to an error.\n\n### **CSS Parts:**\n - **svg** - The internal SVG element.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "name",
-              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "src",
-              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "label",
-              "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "library",
-              "description": "The name of a registered custom icon library.",
-              "value": {
-                "type": "'default' | 'heroicons' | string",
-                "default": "'default'"
-              }
-            },
-            {
-              "name": "color",
-              "description": "The CSS color to assign to the SVG.",
-              "value": { "type": "string | null", "default": "null" }
-            },
-            {
-              "name": "font-size",
-              "description": "The CSS font-size to assign to the SVG.",
-              "value": { "type": "string | null", "default": "null" }
-            }
-          ],
-          "events": [
-            {
-              "name": "terra-load",
-              "description": "Emitted when the icon has loaded."
-            },
-            {
-              "name": "terra-error",
-              "description": "Emitted when the icon fails to load due to an error."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "svg",
-                "type": "SVGElement | HTMLTemplateResult | null"
-              },
-              {
-                "name": "name",
-                "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-                "type": "string | undefined"
-              },
-              {
-                "name": "src",
-                "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
-                "type": "string | undefined"
-              },
-              {
-                "name": "label",
-                "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
-                "type": "string"
-              },
-              {
-                "name": "library",
-                "description": "The name of a registered custom icon library.",
-                "type": "'default' | 'heroicons' | string"
-              },
-              {
-                "name": "color",
-                "description": "The CSS color to assign to the SVG.",
-                "type": "string | null"
-              },
-              {
-                "name": "fontSize",
-                "description": "The CSS font-size to assign to the SVG.",
-                "type": "string | null"
-              }
-            ],
-            "events": [
-              {
-                "name": "terra-load",
-                "description": "Emitted when the icon has loaded."
-              },
-              {
-                "name": "terra-error",
-                "description": "Emitted when the icon fails to load due to an error."
-              }
-            ]
-          }
-        },
         {
           "name": "terra-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.",
@@ -2824,35 +2844,6 @@
             "events": []
           }
         },
-        {
-          "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.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            {
-              "name": "",
-              "description": "The menu's content, typically `<terra-menu-item>` elements."
-            }
-          ],
-          "events": [
-            {
-              "name": "terra-select",
-              "description": "Emitted when a menu item is selected. The event detail contains the selected menu item."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "defaultSlot", "type": "HTMLSlotElement" }
-            ],
-            "events": [
-              {
-                "name": "terra-select",
-                "description": "Emitted when a menu item is selected. The event detail contains the selected menu item."
-              }
-            ]
-          }
-        },
         {
           "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.",
@@ -2936,6 +2927,65 @@
             "events": []
           }
         },
+        {
+          "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.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "plotTitle", "value": { "type": "string | undefined" } },
+            {
+              "name": "layout",
+              "value": {
+                "type": "Partial<Plotly.Layout> | undefined",
+                "default": "{}"
+              }
+            },
+            {
+              "name": "config",
+              "value": {
+                "type": "Partial<Plotly.Config> | undefined",
+                "default": "{}"
+              }
+            },
+            {
+              "name": "data",
+              "value": {
+                "type": "Array<Partial<Plotly.Data>>",
+                "default": "[]"
+              }
+            },
+            {
+              "name": "colors",
+              "description": "Optional: Colors to assign to each time series line",
+              "value": {
+                "type": "string[]",
+                "default": "[\n        '#1f77b4', // blue\n        '#ff7f0e', // orange\n        '#2ca02c', // green\n        '#d62728', // red\n        '#9467bd', // purple\n        '#8c564b', // brown\n        '#e377c2', // pink\n        '#7f7f7f', // gray\n        '#bcbd22', // yellow-green\n        '#17becf', // cyan\n    ]"
+              }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "base", "type": "Plotly.PlotlyHTMLElement" },
+              { "name": "plotTitle", "type": "string | undefined" },
+              {
+                "name": "layout",
+                "type": "Partial<Plotly.Layout> | undefined"
+              },
+              {
+                "name": "config",
+                "type": "Partial<Plotly.Config> | undefined"
+              },
+              { "name": "data", "type": "Array<Partial<Plotly.Data>>" },
+              {
+                "name": "colors",
+                "description": "Optional: Colors to assign to each time series line",
+                "type": "string[]"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "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.",
@@ -3047,8 +3097,37 @@
             ],
             "events": [
               {
-                "name": "terra-page-change",
-                "description": "Emitted when the page changes."
+                "name": "terra-page-change",
+                "description": "Emitted when the page changes."
+              }
+            ]
+          }
+        },
+        {
+          "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.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "The menu's content, typically `<terra-menu-item>` elements."
+            }
+          ],
+          "events": [
+            {
+              "name": "terra-select",
+              "description": "Emitted when a menu item is selected. The event detail contains the selected menu item."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "defaultSlot", "type": "HTMLSlotElement" }
+            ],
+            "events": [
+              {
+                "name": "terra-select",
+                "description": "Emitted when a menu item is selected. The event detail contains the selected menu item."
               }
             ]
           }
@@ -3136,6 +3215,70 @@
             "events": []
           }
         },
+        {
+          "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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "The current progress as a percentage, 0 to 100.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "indeterminate",
+              "description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "A custom label for assistive devices.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "variant",
+              "description": "The progress bar's theme variant.",
+              "value": {
+                "type": "| 'default'\n        | 'primary'\n        | 'success'\n        | 'warning'\n        | 'danger'",
+                "default": "'primary'"
+              }
+            },
+            { "name": "title", "value": { "type": "string", "default": "''" } }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "A label to show inside the progress indicator."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "The current progress as a percentage, 0 to 100.",
+                "type": "number"
+              },
+              {
+                "name": "indeterminate",
+                "description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "A custom label for assistive devices.",
+                "type": "string"
+              },
+              {
+                "name": "variant",
+                "description": "The progress bar's theme variant.",
+                "type": "| 'default'\n        | 'primary'\n        | 'success'\n        | 'warning'\n        | 'danger'"
+              },
+              { "name": "title", "type": "string" }
+            ],
+            "events": []
+          }
+        },
         {
           "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.",
@@ -3320,210 +3463,87 @@
                 "type": "boolean"
               },
               {
-                "name": "arrowPlacement",
-                "description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
-                "type": "| 'start'\n        | 'end'\n        | 'center'\n        | 'anchor'"
-              },
-              {
-                "name": "arrowPadding",
-                "description": "The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.",
-                "type": "number"
-              },
-              {
-                "name": "flip",
-                "description": "When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.",
-                "type": "boolean"
-              },
-              {
-                "name": "flipFallbackPlacements",
-                "description": "If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.",
-                "type": "string"
-              },
-              {
-                "name": "flipFallbackStrategy",
-                "description": "When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.",
-                "type": "| 'best-fit'\n        | 'initial'"
-              },
-              {
-                "name": "flipBoundary",
-                "description": "The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
-                "type": "Element | Element[]"
-              },
-              {
-                "name": "flipPadding",
-                "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
-                "type": "number"
-              },
-              {
-                "name": "shift",
-                "description": "Moves the popup along the axis to keep it in view when clipped.",
-                "type": "boolean"
-              },
-              {
-                "name": "shiftBoundary",
-                "description": "The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
-                "type": "Element | Element[]"
-              },
-              {
-                "name": "shiftPadding",
-                "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
-                "type": "number"
-              },
-              {
-                "name": "autoSize",
-                "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
-                "type": "'horizontal' | 'vertical' | 'both'"
-              },
-              {
-                "name": "sync",
-                "description": "Syncs the popup's width or height to that of the anchor element.",
-                "type": "'width' | 'height' | 'both'"
-              },
-              {
-                "name": "autoSizeBoundary",
-                "description": "The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
-                "type": "Element | Element[]"
-              },
-              {
-                "name": "autoSizePadding",
-                "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
-                "type": "number"
-              },
-              {
-                "name": "hoverBridge",
-                "description": "When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\ngap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\nbecause the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\nactive.",
-                "type": "boolean"
-              }
-            ],
-            "events": [
-              {
-                "name": "terra-reposition",
-                "description": "Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive operations in your listener or consider debouncing it."
-              }
-            ]
-          }
-        },
-        {
-          "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.",
-          "doc-url": "",
-          "attributes": [
-            { "name": "plotTitle", "value": { "type": "string | undefined" } },
-            {
-              "name": "layout",
-              "value": {
-                "type": "Partial<Plotly.Layout> | undefined",
-                "default": "{}"
-              }
-            },
-            {
-              "name": "config",
-              "value": {
-                "type": "Partial<Plotly.Config> | undefined",
-                "default": "{}"
-              }
-            },
-            {
-              "name": "data",
-              "value": {
-                "type": "Array<Partial<Plotly.Data>>",
-                "default": "[]"
-              }
-            },
-            {
-              "name": "colors",
-              "description": "Optional: Colors to assign to each time series line",
-              "value": {
-                "type": "string[]",
-                "default": "[\n        '#1f77b4', // blue\n        '#ff7f0e', // orange\n        '#2ca02c', // green\n        '#d62728', // red\n        '#9467bd', // purple\n        '#8c564b', // brown\n        '#e377c2', // pink\n        '#7f7f7f', // gray\n        '#bcbd22', // yellow-green\n        '#17becf', // cyan\n    ]"
-              }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "base", "type": "Plotly.PlotlyHTMLElement" },
-              { "name": "plotTitle", "type": "string | undefined" },
-              {
-                "name": "layout",
-                "type": "Partial<Plotly.Layout> | undefined"
-              },
-              {
-                "name": "config",
-                "type": "Partial<Plotly.Config> | undefined"
-              },
-              { "name": "data", "type": "Array<Partial<Plotly.Data>>" },
-              {
-                "name": "colors",
-                "description": "Optional: Colors to assign to each time series line",
-                "type": "string[]"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "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.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "value",
-              "description": "The current progress as a percentage, 0 to 100.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "indeterminate",
-              "description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "label",
-              "description": "A custom label for assistive devices.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "variant",
-              "description": "The progress bar's theme variant.",
-              "value": {
-                "type": "| 'default'\n        | 'primary'\n        | 'success'\n        | 'warning'\n        | 'danger'",
-                "default": "'primary'"
-              }
-            },
-            { "name": "title", "value": { "type": "string", "default": "''" } }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "A label to show inside the progress indicator."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
+                "name": "arrowPlacement",
+                "description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
+                "type": "| 'start'\n        | 'end'\n        | 'center'\n        | 'anchor'"
+              },
               {
-                "name": "value",
-                "description": "The current progress as a percentage, 0 to 100.",
+                "name": "arrowPadding",
+                "description": "The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.",
                 "type": "number"
               },
               {
-                "name": "indeterminate",
-                "description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
+                "name": "flip",
+                "description": "When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.",
                 "type": "boolean"
               },
               {
-                "name": "label",
-                "description": "A custom label for assistive devices.",
+                "name": "flipFallbackPlacements",
+                "description": "If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.",
                 "type": "string"
               },
               {
-                "name": "variant",
-                "description": "The progress bar's theme variant.",
-                "type": "| 'default'\n        | 'primary'\n        | 'success'\n        | 'warning'\n        | 'danger'"
+                "name": "flipFallbackStrategy",
+                "description": "When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.",
+                "type": "| 'best-fit'\n        | 'initial'"
               },
-              { "name": "title", "type": "string" }
+              {
+                "name": "flipBoundary",
+                "description": "The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
+                "type": "Element | Element[]"
+              },
+              {
+                "name": "flipPadding",
+                "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
+                "type": "number"
+              },
+              {
+                "name": "shift",
+                "description": "Moves the popup along the axis to keep it in view when clipped.",
+                "type": "boolean"
+              },
+              {
+                "name": "shiftBoundary",
+                "description": "The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
+                "type": "Element | Element[]"
+              },
+              {
+                "name": "shiftPadding",
+                "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
+                "type": "number"
+              },
+              {
+                "name": "autoSize",
+                "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
+                "type": "'horizontal' | 'vertical' | 'both'"
+              },
+              {
+                "name": "sync",
+                "description": "Syncs the popup's width or height to that of the anchor element.",
+                "type": "'width' | 'height' | 'both'"
+              },
+              {
+                "name": "autoSizeBoundary",
+                "description": "The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
+                "type": "Element | Element[]"
+              },
+              {
+                "name": "autoSizePadding",
+                "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
+                "type": "number"
+              },
+              {
+                "name": "hoverBridge",
+                "description": "When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\ngap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\nbecause the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\nactive.",
+                "type": "boolean"
+              }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "terra-reposition",
+                "description": "Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive operations in your listener or consider debouncing it."
+              }
+            ]
           }
         },
         {
@@ -4257,34 +4277,6 @@
             "events": []
           }
         },
-        {
-          "name": "terra-skeleton",
-          "description": "Skeletons are loading indicators to represent where content will eventually be drawn.\n---\n",
-          "doc-url": "",
-          "attributes": [
-            { "name": "rows", "value": { "type": "number", "default": "1" } },
-            {
-              "name": "effect",
-              "value": {
-                "type": "'pulse' | 'sheen' | 'none'",
-                "default": "'pulse'"
-              }
-            },
-            {
-              "name": "variableWidths",
-              "value": { "type": "boolean", "default": "true" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "rows", "type": "number" },
-              { "name": "effect", "type": "'pulse' | 'sheen' | 'none'" },
-              { "name": "variableWidths", "type": "boolean" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "terra-slider",
           "description": "\n---\n",
@@ -4429,6 +4421,34 @@
             "events": []
           }
         },
+        {
+          "name": "terra-skeleton",
+          "description": "Skeletons are loading indicators to represent where content will eventually be drawn.\n---\n",
+          "doc-url": "",
+          "attributes": [
+            { "name": "rows", "value": { "type": "number", "default": "1" } },
+            {
+              "name": "effect",
+              "value": {
+                "type": "'pulse' | 'sheen' | 'none'",
+                "default": "'pulse'"
+              }
+            },
+            {
+              "name": "variableWidths",
+              "value": { "type": "boolean", "default": "true" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "rows", "type": "number" },
+              { "name": "effect", "type": "'pulse' | 'sheen' | 'none'" },
+              { "name": "variableWidths", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "terra-spatial-picker",
           "description": "A component that allows input of coordinates and rendering of map.\n---\n",
@@ -4643,70 +4663,116 @@
           }
         },
         {
-          "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.",
+          "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.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "name",
-              "description": "The tab panel's name.",
-              "value": { "type": "string", "default": "''" }
-            },
+              "name": "variant",
+              "description": "The stepper's variant. The default variant includes titles and optional captions for each step.\nThe condensed variant uses colored bars to represent each step and is useful when space is a concern.",
+              "value": {
+                "type": "'default' | 'condensed'",
+                "default": "'default'"
+              }
+            }
+          ],
+          "slots": [
             {
-              "name": "active",
-              "description": "When true, the tab panel will be shown.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "",
+              "description": "One or more `<terra-stepper-step>` elements to display in the stepper."
             }
           ],
-          "slots": [{ "name": "", "description": "The tab panel's content." }],
           "events": [],
           "js": {
             "properties": [
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
               {
-                "name": "name",
-                "description": "The tab panel's name.",
-                "type": "string"
-              },
-              {
-                "name": "active",
-                "description": "When true, the tab panel will be shown.",
-                "type": "boolean"
+                "name": "variant",
+                "description": "The stepper's variant. The default variant includes titles and optional captions for each step.\nThe condensed variant uses colored bars to represent each step and is useful when space is a concern.",
+                "type": "'default' | 'condensed'"
               }
             ],
             "events": []
           }
         },
         {
-          "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.",
+          "name": "terra-tab",
+          "description": "Tabs are used inside [tabs](/components/tabs) to represent and activate [tab panels](/components/tab-panel).\n---\n\n\n### **Events:**\n - **terra-close** - Emitted when the tab is closable and the close button is activated.\n\n### **Slots:**\n - _default_ - The tab's label. For icon-only tabs, place a `<terra-icon>` here.\n\n### **CSS Properties:**\n - **--terra-tab-*** - All tab design tokens from horizon.css are supported. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **close-button** - The close button icon.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "variant",
-              "description": "The stepper's variant. The default variant includes titles and optional captions for each step.\nThe condensed variant uses colored bars to represent each step and is useful when space is a concern.",
-              "value": {
-                "type": "'default' | 'condensed'",
-                "default": "'default'"
-              }
+              "name": "panel",
+              "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tabs component.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "active",
+              "description": "Draws the tab in an active state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "closable",
+              "description": "Makes the tab closable and shows a close button.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the tab and prevents selection.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "size",
+              "description": "The tab's size. Inherits from the parent tabs component if not specified.",
+              "value": { "type": "'large' | 'small'", "default": "'large'" }
             }
           ],
           "slots": [
             {
               "name": "",
-              "description": "One or more `<terra-stepper-step>` elements to display in the stepper."
+              "description": "The tab's label. For icon-only tabs, place a `<terra-icon>` here."
+            }
+          ],
+          "events": [
+            {
+              "name": "terra-close",
+              "description": "Emitted when the tab is closable and the close button is activated."
             }
           ],
-          "events": [],
           "js": {
             "properties": [
-              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              { "name": "tab", "type": "HTMLElement" },
               {
-                "name": "variant",
-                "description": "The stepper's variant. The default variant includes titles and optional captions for each step.\nThe condensed variant uses colored bars to represent each step and is useful when space is a concern.",
-                "type": "'default' | 'condensed'"
+                "name": "panel",
+                "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tabs component.",
+                "type": "string"
+              },
+              {
+                "name": "active",
+                "description": "Draws the tab in an active state.",
+                "type": "boolean"
+              },
+              {
+                "name": "closable",
+                "description": "Makes the tab closable and shows a close button.",
+                "type": "boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the tab and prevents selection.",
+                "type": "boolean"
+              },
+              {
+                "name": "size",
+                "description": "The tab's size. Inherits from the parent tabs component if not specified.",
+                "type": "'large' | 'small'"
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "terra-close",
+                "description": "Emitted when the tab is closable and the close button is activated."
+              }
+            ]
           }
         },
         {
@@ -4762,83 +4828,37 @@
           }
         },
         {
-          "name": "terra-tab",
-          "description": "Tabs are used inside [tabs](/components/tabs) to represent and activate [tab panels](/components/tab-panel).\n---\n\n\n### **Events:**\n - **terra-close** - Emitted when the tab is closable and the close button is activated.\n\n### **Slots:**\n - _default_ - The tab's label. For icon-only tabs, place a `<terra-icon>` here.\n\n### **CSS Properties:**\n - **--terra-tab-*** - All tab design tokens from horizon.css are supported. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **close-button** - The close button icon.",
+          "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.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "panel",
-              "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tabs component.",
+              "name": "name",
+              "description": "The tab panel's name.",
               "value": { "type": "string", "default": "''" }
             },
             {
               "name": "active",
-              "description": "Draws the tab in an active state.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "closable",
-              "description": "Makes the tab closable and shows a close button.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "disabled",
-              "description": "Disables the tab and prevents selection.",
+              "description": "When true, the tab panel will be shown.",
               "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "size",
-              "description": "The tab's size. Inherits from the parent tabs component if not specified.",
-              "value": { "type": "'large' | 'small'", "default": "'large'" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "The tab's label. For icon-only tabs, place a `<terra-icon>` here."
-            }
-          ],
-          "events": [
-            {
-              "name": "terra-close",
-              "description": "Emitted when the tab is closable and the close button is activated."
             }
           ],
+          "slots": [{ "name": "", "description": "The tab panel's content." }],
+          "events": [],
           "js": {
             "properties": [
-              { "name": "tab", "type": "HTMLElement" },
               {
-                "name": "panel",
-                "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tabs component.",
+                "name": "name",
+                "description": "The tab panel's name.",
                 "type": "string"
               },
               {
                 "name": "active",
-                "description": "Draws the tab in an active state.",
-                "type": "boolean"
-              },
-              {
-                "name": "closable",
-                "description": "Makes the tab closable and shows a close button.",
-                "type": "boolean"
-              },
-              {
-                "name": "disabled",
-                "description": "Disables the tab and prevents selection.",
+                "description": "When true, the tab panel will be shown.",
                 "type": "boolean"
-              },
-              {
-                "name": "size",
-                "description": "The tab's size. Inherits from the parent tabs component if not specified.",
-                "type": "'large' | 'small'"
               }
             ],
-            "events": [
-              {
-                "name": "terra-close",
-                "description": "Emitted when the tab is closable and the close button is activated."
-              }
-            ]
+            "events": []
           }
         },
         {
@@ -5257,6 +5277,104 @@
             "events": []
           }
         },
+        {
+          "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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "The toast's theme variant.",
+              "value": {
+                "type": "| 'primary'\n        | 'success'\n        | 'neutral'\n        | 'warning'\n        | 'danger'",
+                "default": "'primary'"
+              }
+            },
+            {
+              "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).",
+              "value": { "type": "number", "default": "3000" }
+            },
+            {
+              "name": "closable",
+              "description": "Enables a close button that allows the user to dismiss the toast.",
+              "value": { "type": "boolean", "default": "true" }
+            },
+            {
+              "name": "countdown",
+              "description": "Enables a countdown that indicates the remaining time the toast will be displayed.\nTypically used for toasts with relatively long duration.",
+              "value": { "type": "'rtl' | 'ltr' | undefined" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The toast's main content." },
+            {
+              "name": "icon",
+              "description": "An icon to show in the toast. Works best with `<terra-icon>`."
+            }
+          ],
+          "events": [
+            {
+              "name": "terra-show",
+              "description": "Emitted when the toast opens."
+            },
+            {
+              "name": "terra-after-show",
+              "description": "Emitted after the toast opens and all animations are complete."
+            },
+            {
+              "name": "terra-hide",
+              "description": "Emitted when the toast closes."
+            },
+            {
+              "name": "terra-after-hide",
+              "description": "Emitted after the toast closes and all animations are complete."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "alert", "type": "TerraAlert | null" },
+              {
+                "name": "variant",
+                "description": "The toast's theme variant.",
+                "type": "| 'primary'\n        | 'success'\n        | 'neutral'\n        | 'warning'\n        | '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).",
+                "type": "number"
+              },
+              {
+                "name": "closable",
+                "description": "Enables a close button that allows the user to dismiss the toast.",
+                "type": "boolean"
+              },
+              {
+                "name": "countdown",
+                "description": "Enables a countdown that indicates the remaining time the toast will be displayed.\nTypically used for toasts with relatively long duration.",
+                "type": "'rtl' | 'ltr' | undefined"
+              }
+            ],
+            "events": [
+              {
+                "name": "terra-show",
+                "description": "Emitted when the toast opens."
+              },
+              {
+                "name": "terra-after-show",
+                "description": "Emitted after the toast opens and all animations are complete."
+              },
+              {
+                "name": "terra-hide",
+                "description": "Emitted when the toast closes."
+              },
+              {
+                "name": "terra-after-hide",
+                "description": "Emitted after the toast closes and all animations are complete."
+              }
+            ]
+          }
+        },
         {
           "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",
@@ -5400,104 +5518,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.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "variant",
-              "description": "The toast's theme variant.",
-              "value": {
-                "type": "| 'primary'\n        | 'success'\n        | 'neutral'\n        | 'warning'\n        | 'danger'",
-                "default": "'primary'"
-              }
-            },
-            {
-              "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).",
-              "value": { "type": "number", "default": "3000" }
-            },
-            {
-              "name": "closable",
-              "description": "Enables a close button that allows the user to dismiss the toast.",
-              "value": { "type": "boolean", "default": "true" }
-            },
-            {
-              "name": "countdown",
-              "description": "Enables a countdown that indicates the remaining time the toast will be displayed.\nTypically used for toasts with relatively long duration.",
-              "value": { "type": "'rtl' | 'ltr' | undefined" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The toast's main content." },
-            {
-              "name": "icon",
-              "description": "An icon to show in the toast. Works best with `<terra-icon>`."
-            }
-          ],
-          "events": [
-            {
-              "name": "terra-show",
-              "description": "Emitted when the toast opens."
-            },
-            {
-              "name": "terra-after-show",
-              "description": "Emitted after the toast opens and all animations are complete."
-            },
-            {
-              "name": "terra-hide",
-              "description": "Emitted when the toast closes."
-            },
-            {
-              "name": "terra-after-hide",
-              "description": "Emitted after the toast closes and all animations are complete."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "alert", "type": "TerraAlert | null" },
-              {
-                "name": "variant",
-                "description": "The toast's theme variant.",
-                "type": "| 'primary'\n        | 'success'\n        | 'neutral'\n        | 'warning'\n        | '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).",
-                "type": "number"
-              },
-              {
-                "name": "closable",
-                "description": "Enables a close button that allows the user to dismiss the toast.",
-                "type": "boolean"
-              },
-              {
-                "name": "countdown",
-                "description": "Enables a countdown that indicates the remaining time the toast will be displayed.\nTypically used for toasts with relatively long duration.",
-                "type": "'rtl' | 'ltr' | undefined"
-              }
-            ],
-            "events": [
-              {
-                "name": "terra-show",
-                "description": "Emitted when the toast opens."
-              },
-              {
-                "name": "terra-after-show",
-                "description": "Emitted after the toast opens and all animations are complete."
-              },
-              {
-                "name": "terra-hide",
-                "description": "Emitted when the toast closes."
-              },
-              {
-                "name": "terra-after-hide",
-                "description": "Emitted after the toast closes and all animations are complete."
-              }
-            ]
-          }
-        },
         {
           "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.",