@nasa-terra/components 0.0.135 → 0.0.136

package/cdn/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@nasa-terra/components",
-  "version": "0.0.135",
+  "version": "0.0.136",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -64,6 +64,53 @@
             ]
           }
         },
+        {
+          "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": "variant",
+              "description": "The badge's theme variant.",
+              "value": {
+                "type": "| 'primary'\n        | 'success'\n        | 'neutral'\n        | 'warning'\n        | 'danger'",
+                "default": "'primary'"
+              }
+            },
+            {
+              "name": "pill",
+              "description": "Draws a pill-style badge with rounded edges.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "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-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.",
@@ -259,47 +306,39 @@
           }
         },
         {
-          "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-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": "variant",
-              "description": "The badge's theme variant.",
-              "value": {
-                "type": "| 'primary'\n        | 'success'\n        | 'neutral'\n        | 'warning'\n        | 'danger'",
-                "default": "'primary'"
-              }
+              "name": "aria-label",
+              "description": "Accessible label for the breadcrumb navigation.",
+              "value": { "type": "string", "default": "'Breadcrumb'" }
             },
             {
-              "name": "pill",
-              "description": "Draws a pill-style badge with rounded edges.",
-              "value": { "type": "boolean", "default": "false" }
-            },
+              "name": "theme",
+              "description": "Color theme of the breadcrumbs, matching the Horizon Design System.",
+              "value": { "type": "'light' | 'dark'", "default": "'light'" }
+            }
+          ],
+          "slots": [
             {
-              "name": "pulse",
-              "description": "Makes the badge pulsate to draw attention.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "",
+              "description": "The breadcrumb items. Typically `<terra-breadcrumb>` elements."
             }
           ],
-          "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": "ariaLabel",
+                "description": "Accessible label for the breadcrumb navigation.",
+                "type": "string"
               },
               {
-                "name": "pulse",
-                "description": "Makes the badge pulsate to draw attention.",
-                "type": "boolean"
+                "name": "theme",
+                "description": "Color theme of the breadcrumbs, matching the Horizon Design System.",
+                "type": "'light' | 'dark'"
               }
             ],
             "events": []
@@ -339,45 +378,6 @@
             "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": "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",
@@ -413,37 +413,6 @@
             "events": []
           }
         },
-        {
-          "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.",
-          "doc-url": "",
-          "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.",
-              "value": { "type": "string", "default": "''" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "One or more `<terra-button>` elements to display in the button group."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "defaultSlot", "type": "HTMLSlotElement" },
-              { "name": "disableRole", "type": "boolean" },
-              {
-                "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.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "terra-button",
           "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\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 button's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **prefix** - The container that wraps the prefix.\n- **label** - The button's label.\n- **suffix** - The container that wraps the suffix.\n- **caret** - The button's caret icon, an `<terra-icon>` element.\n- **spinner** - The spinner that shows when the button is in the loading state.",
@@ -721,6 +690,37 @@
             "events": []
           }
         },
+        {
+          "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.",
+          "doc-url": "",
+          "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.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "One or more `<terra-button>` elements to display in the button group."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              { "name": "disableRole", "type": "boolean" },
+              {
+                "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.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "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)_",
@@ -2878,6 +2878,54 @@
             "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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "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.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Draws the option in a disabled state, preventing selection.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The option's label." },
+            {
+              "name": "prefix",
+              "description": "Used to prepend an icon or similar element to the menu item."
+            },
+            {
+              "name": "suffix",
+              "description": "Used to append an icon or similar element to the menu item."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              { "name": "current", "type": "boolean" },
+              { "name": "selected", "type": "boolean" },
+              { "name": "hasHover", "type": "boolean" },
+              {
+                "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.",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Draws the option in a disabled state, preventing selection.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "terra-pagination",
           "description": "Pagination is a navigational element that allows users to navigate between content or pages.\n---\n\n\n### **Events:**\n - **terra-page-change** - Emitted when the page changes.\n\n### **Slots:**\n - _default_ - Content to display on the right side (e.g., rows per page dropdown). Only visible when variant is \"left\".\n\n### **CSS Properties:**\n - **--terra-pagination-button-color** - The text color of page buttons. _(default: undefined)_\n- **--terra-pagination-button-background-color** - The background color of page buttons. _(default: undefined)_\n- **--terra-pagination-button-color-hover** - The text color of page buttons on hover. _(default: undefined)_\n- **--terra-pagination-button-background-color-hover** - The background color of page buttons on hover. _(default: undefined)_\n- **--terra-pagination-button-color-current** - The text color of the current page button. _(default: undefined)_\n- **--terra-pagination-button-background-color-current** - The background color of the current page button. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **nav** - The navigation container.\n- **button** - The page button elements.\n- **button-current** - The current page button.\n- **ellipsis** - The ellipsis element.\n- **prev** - The previous button.\n- **next** - The next button.\n- **slot** - The right-side slot container.",
@@ -3090,316 +3138,146 @@
           }
         },
         {
-          "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-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.",
           "doc-url": "",
           "attributes": [
+            { "name": "title", "value": { "type": "string", "default": "''" } },
             {
-              "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.",
+              "name": "name",
+              "description": "The name of the radio, submitted as a name/value pair with form data.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "disabled",
-              "description": "Draws the option in a disabled state, preventing selection.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The option's label." },
-            {
-              "name": "prefix",
-              "description": "Used to prepend an icon or similar element to the menu item."
-            },
-            {
-              "name": "suffix",
-              "description": "Used to append an icon or similar element to the menu item."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "defaultSlot", "type": "HTMLSlotElement" },
-              { "name": "current", "type": "boolean" },
-              { "name": "selected", "type": "boolean" },
-              { "name": "hasHover", "type": "boolean" },
-              {
-                "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.",
-                "type": "string"
-              },
-              {
-                "name": "disabled",
-                "description": "Draws the option in a disabled state, preventing selection.",
-                "type": "boolean"
-              }
-            ],
-            "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.",
-          "doc-url": "",
-          "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.",
-              "value": { "type": "Element | string | VirtualElement" }
-            },
-            {
-              "name": "active",
-              "description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "placement",
-              "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
-              "value": {
-                "type": "| 'top'\n        | 'top-start'\n        | 'top-end'\n        | 'bottom'\n        | 'bottom-start'\n        | 'bottom-end'\n        | 'right'\n        | 'right-start'\n        | 'right-end'\n        | 'left'\n        | 'left-start'\n        | 'left-end'",
-                "default": "'top'"
-              }
+              "name": "value",
+              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "value": { "type": "string" }
             },
             {
-              "name": "strategy",
-              "description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
+              "name": "size",
+              "description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
               "value": {
-                "type": "'absolute' | 'fixed'",
-                "default": "'absolute'"
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
               }
             },
             {
-              "name": "distance",
-              "description": "The distance in pixels from which to offset the panel away from its anchor.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "skidding",
-              "description": "The distance in pixels from which to offset the panel along its anchor.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "arrow",
-              "description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
+              "name": "disabled",
+              "description": "Disables the radio.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "arrow-placement",
-              "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.",
-              "value": {
-                "type": "| 'start'\n        | 'end'\n        | 'center'\n        | 'anchor'",
-                "default": "'anchor'"
-              }
-            },
-            {
-              "name": "arrow-padding",
-              "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.",
-              "value": { "type": "number", "default": "10" }
-            },
-            {
-              "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.",
+              "name": "checked",
+              "description": "Draws the radio in a checked state.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "flip-fallback-placements",
-              "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.",
+              "name": "form",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "flip-fallback-strategy",
-              "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.",
-              "value": {
-                "type": "| 'best-fit'\n        | 'initial'",
-                "default": "'best-fit'"
-              }
-            },
-            {
-              "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.",
-              "value": { "type": "Element | Element[]" }
-            },
-            {
-              "name": "flip-padding",
-              "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "shift",
-              "description": "Moves the popup along the axis to keep it in view when clipped.",
+              "name": "required",
+              "description": "Makes the radio a required field.",
               "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "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.",
-              "value": { "type": "Element | Element[]" }
-            },
-            {
-              "name": "shift-padding",
-              "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
-              "value": { "type": "number", "default": "0" }
-            },
+            }
+          ],
+          "slots": [{ "name": "", "description": "The radio's label." }],
+          "events": [
             {
-              "name": "auto-size",
-              "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
-              "value": { "type": "'horizontal' | 'vertical' | 'both'" }
+              "name": "terra-blur",
+              "description": "Emitted when the radio loses focus."
             },
             {
-              "name": "sync",
-              "description": "Syncs the popup's width or height to that of the anchor element.",
-              "value": { "type": "'width' | 'height' | 'both'" }
+              "name": "terra-change",
+              "description": "Emitted when the checked state changes."
             },
             {
-              "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.",
-              "value": { "type": "Element | Element[]" }
+              "name": "terra-focus",
+              "description": "Emitted when the radio gains focus."
             },
             {
-              "name": "auto-size-padding",
-              "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
-              "value": { "type": "number", "default": "0" }
+              "name": "terra-input",
+              "description": "Emitted when the radio receives input."
             },
             {
-              "name": "hover-bridge",
-              "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.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The popup's content." },
-            {
-              "name": "anchor",
-              "description": "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."
-            }
-          ],
-          "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-invalid",
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
             }
           ],
           "js": {
             "properties": [
+              { "name": "input", "type": "HTMLInputElement" },
+              { "name": "title", "type": "string" },
               {
-                "name": "popup",
-                "description": "A reference to the internal popup container. Useful for animating and styling the popup with JavaScript.",
-                "type": "HTMLElement"
-              },
-              {
-                "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.",
-                "type": "Element | string | VirtualElement"
-              },
-              {
-                "name": "active",
-                "description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
-                "type": "boolean"
-              },
-              {
-                "name": "placement",
-                "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
-                "type": "| 'top'\n        | 'top-start'\n        | 'top-end'\n        | 'bottom'\n        | 'bottom-start'\n        | 'bottom-end'\n        | 'right'\n        | 'right-start'\n        | 'right-end'\n        | 'left'\n        | 'left-start'\n        | 'left-end'"
-              },
-              {
-                "name": "strategy",
-                "description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
-                "type": "'absolute' | 'fixed'"
+                "name": "name",
+                "description": "The name of the radio, submitted as a name/value pair with form data.",
+                "type": "string"
               },
               {
-                "name": "distance",
-                "description": "The distance in pixels from which to offset the panel away from its anchor.",
-                "type": "number"
+                "name": "value",
+                "description": "The radio's value. When selected, the radio group will receive this value.",
+                "type": "string"
               },
               {
-                "name": "skidding",
-                "description": "The distance in pixels from which to offset the panel along its anchor.",
-                "type": "number"
+                "name": "size",
+                "description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
+                "type": "'small' | 'medium' | 'large'"
               },
               {
-                "name": "arrow",
-                "description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
+                "name": "disabled",
+                "description": "Disables the radio.",
                 "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": "checked",
+                "description": "Draws the radio in a checked state.",
+                "type": "boolean"
               },
               {
-                "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.",
+                "name": "defaultChecked",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
                 "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.",
+                "name": "form",
+                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
                 "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.",
+                "name": "required",
+                "description": "Makes the radio a required field.",
                 "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": "validity",
+                "description": "Gets the validity state object"
               },
               {
-                "name": "shiftPadding",
-                "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
-                "type": "number"
-              },
+                "name": "validationMessage",
+                "description": "Gets the validation message"
+              }
+            ],
+            "events": [
               {
-                "name": "autoSize",
-                "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
-                "type": "'horizontal' | 'vertical' | 'both'"
+                "name": "terra-blur",
+                "description": "Emitted when the radio loses focus."
               },
               {
-                "name": "sync",
-                "description": "Syncs the popup's width or height to that of the anchor element.",
-                "type": "'width' | 'height' | 'both'"
+                "name": "terra-change",
+                "description": "Emitted when the checked state changes."
               },
               {
-                "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": "terra-focus",
+                "description": "Emitted when the radio gains focus."
               },
               {
-                "name": "autoSizePadding",
-                "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
-                "type": "number"
+                "name": "terra-input",
+                "description": "Emitted when the radio receives input."
               },
               {
-                "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-invalid",
+                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
               }
             ]
           }
@@ -3469,39 +3347,38 @@
           }
         },
         {
-          "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.",
+          "name": "terra-radio-group",
+          "description": "Radio groups are used to group multiple radio buttons so they function as a single form control.\n---\n\n\n### **Events:**\n - **terra-change** - Emitted when the radio group's selected value changes.\n- **terra-input** - Emitted when the radio group receives user input.\n- **terra-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the radio-group.\n\n### **Slots:**\n - _default_ - The default slot where `<terra-radio>` elements are placed.\n- **label** - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--terra-radio-group-*** - All radio group design tokens from horizon.css are supported. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.",
           "doc-url": "",
           "attributes": [
-            { "name": "title", "value": { "type": "string", "default": "''" } },
             {
-              "name": "name",
-              "description": "The name of the radio, submitted as a name/value pair with form data.",
+              "name": "label",
+              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "help-text",
+              "description": "The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "name",
+              "description": "The name of the radio group, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "'option'" }
+            },
             {
               "name": "value",
-              "description": "The radio's value. When selected, the radio group will receive this value.",
-              "value": { "type": "string" }
+              "description": "The current value of the radio group, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
             },
             {
               "name": "size",
-              "description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
+              "description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
               "value": {
                 "type": "'small' | 'medium' | 'large'",
                 "default": "'medium'"
               }
             },
-            {
-              "name": "disabled",
-              "description": "Disables the radio.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "checked",
-              "description": "Draws the radio in a checked state.",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "form",
               "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
@@ -3509,27 +3386,32 @@
             },
             {
               "name": "required",
-              "description": "Makes the radio a required field.",
+              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
-          "slots": [{ "name": "", "description": "The radio's label." }],
-          "events": [
+          "slots": [
             {
-              "name": "terra-blur",
-              "description": "Emitted when the radio loses focus."
+              "name": "",
+              "description": "The default slot where `<terra-radio>` elements are placed."
+            },
+            {
+              "name": "label",
+              "description": "The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute."
             },
+            {
+              "name": "help-text",
+              "description": "Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute."
+            }
+          ],
+          "events": [
             {
               "name": "terra-change",
-              "description": "Emitted when the checked state changes."
-            },
-            {
-              "name": "terra-focus",
-              "description": "Emitted when the radio gains focus."
+              "description": "Emitted when the radio group's selected value changes."
             },
             {
               "name": "terra-input",
-              "description": "Emitted when the radio receives input."
+              "description": "Emitted when the radio group receives user input."
             },
             {
               "name": "terra-invalid",
@@ -3538,37 +3420,33 @@
           ],
           "js": {
             "properties": [
-              { "name": "input", "type": "HTMLInputElement" },
-              { "name": "title", "type": "string" },
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              { "name": "validationInput", "type": "HTMLInputElement" },
+              { "name": "defaultValue", "type": "string" },
               {
-                "name": "name",
-                "description": "The name of the radio, submitted as a name/value pair with form data.",
+                "name": "label",
+                "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
                 "type": "string"
               },
               {
-                "name": "value",
-                "description": "The radio's value. When selected, the radio group will receive this value.",
+                "name": "helpText",
+                "description": "The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.",
                 "type": "string"
               },
               {
-                "name": "size",
-                "description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
-                "type": "'small' | 'medium' | 'large'"
-              },
-              {
-                "name": "disabled",
-                "description": "Disables the radio.",
-                "type": "boolean"
+                "name": "name",
+                "description": "The name of the radio group, submitted as a name/value pair with form data.",
+                "type": "string"
               },
               {
-                "name": "checked",
-                "description": "Draws the radio in a checked state.",
-                "type": "boolean"
+                "name": "value",
+                "description": "The current value of the radio group, submitted as a name/value pair with form data.",
+                "type": "string"
               },
               {
-                "name": "defaultChecked",
-                "description": "The default value of the form control. Primarily used for resetting the form control.",
-                "type": "boolean"
+                "name": "size",
+                "description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
+                "type": "'small' | 'medium' | 'large'"
               },
               {
                 "name": "form",
@@ -3577,7 +3455,7 @@
               },
               {
                 "name": "required",
-                "description": "Makes the radio a required field.",
+                "description": "Ensures a child radio is checked before allowing the containing form to submit.",
                 "type": "boolean"
               },
               {
@@ -3590,21 +3468,13 @@
               }
             ],
             "events": [
-              {
-                "name": "terra-blur",
-                "description": "Emitted when the radio loses focus."
-              },
               {
                 "name": "terra-change",
-                "description": "Emitted when the checked state changes."
-              },
-              {
-                "name": "terra-focus",
-                "description": "Emitted when the radio gains focus."
+                "description": "Emitted when the radio group's selected value changes."
               },
               {
                 "name": "terra-input",
-                "description": "Emitted when the radio receives input."
+                "description": "Emitted when the radio group receives user input."
               },
               {
                 "name": "terra-invalid",
@@ -3614,38 +3484,141 @@
           }
         },
         {
-          "name": "terra-radio-group",
-          "description": "Radio groups are used to group multiple radio buttons so they function as a single form control.\n---\n\n\n### **Events:**\n - **terra-change** - Emitted when the radio group's selected value changes.\n- **terra-input** - Emitted when the radio group receives user input.\n- **terra-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the radio-group.\n\n### **Slots:**\n - _default_ - The default slot where `<terra-radio>` elements are placed.\n- **label** - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--terra-radio-group-*** - All radio group design tokens from horizon.css are supported. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.",
+          "name": "terra-scroll-hint",
+          "description": "Scroll hint is an animated button that prompts visitors to scroll.\n---\n\n\n### **Events:**\n - **terra-scroll** - Emitted when the scroll hint is clicked and scrolling begins.\n\n### **CSS Properties:**\n - **--terra-scroll-hint-icon-background-color** - The background color of the icon circle. _(default: undefined)_\n- **--terra-scroll-hint-icon-color** - The color of the chevron icon. _(default: undefined)_\n- **--terra-scroll-hint-text-color** - The color of the text. _(default: undefined)_\n- **--terra-scroll-hint-ring-color** - The color of the pulsing ring. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The clickable button element.\n- **icon-container** - The container for the icon and pulsing ring.\n- **icon** - The chevron icon.\n- **ring** - The pulsing ring around the icon.\n- **text** - The \"SCROLL TO CONTINUE\" text.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "label",
-              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
-              "value": { "type": "string", "default": "''" }
+              "name": "inline",
+              "description": "When true, the component will be positioned inline in the DOM flow instead of fixed to the viewport.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "help-text",
-              "description": "The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "value": { "type": "string", "default": "''" }
+              "name": "dark",
+              "description": "When true, forces dark mode styles regardless of system preference. Useful when placing the component on a dark background.",
+              "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "inactivityDelay",
+              "description": "The delay in milliseconds before showing the scroll hint after inactivity. Defaults to 3000ms (3 seconds).",
+              "value": { "type": "number", "default": "3000" }
+            }
+          ],
+          "events": [
+            {
+              "name": "terra-scroll",
+              "description": "Emitted when the scroll hint is clicked and scrolling begins."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "inline",
+                "description": "When true, the component will be positioned inline in the DOM flow instead of fixed to the viewport.",
+                "type": "boolean"
+              },
+              {
+                "name": "dark",
+                "description": "When true, forces dark mode styles regardless of system preference. Useful when placing the component on a dark background.",
+                "type": "boolean"
+              },
+              {
+                "name": "inactivityDelay",
+                "description": "The delay in milliseconds before showing the scroll hint after inactivity. Defaults to 3000ms (3 seconds).",
+                "type": "number"
+              }
+            ],
+            "events": [
+              {
+                "name": "terra-scroll",
+                "description": "Emitted when the scroll hint is clicked and scrolling begins."
+              }
+            ]
+          }
+        },
+        {
+          "name": "terra-select",
+          "description": "Select fields are a form field used to select one option from a list.\n---\n\n\n### **Events:**\n - **terra-change** - Emitted when the control's value changes.\n- **terra-clear** - Emitted when the control's value is cleared.\n- **terra-input** - Emitted when the control receives input.\n- **terra-focus** - Emitted when the control gains focus.\n- **terra-blur** - Emitted when the control loses focus.\n- **terra-show** - Emitted when the select's menu opens.\n- **terra-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **terra-hide** - Emitted when the select's menu closes.\n- **terra-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **terra-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<terra-option>` elements.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--terra-select-*** - All select design tokens from horizon.css are supported. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiple` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
+          "doc-url": "",
+          "attributes": [
             {
               "name": "name",
-              "description": "The name of the radio group, submitted as a name/value pair with form data.",
-              "value": { "type": "string", "default": "'option'" }
+              "description": "The name of the select, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
             },
             {
               "name": "value",
-              "description": "The current value of the radio group, submitted as a name/value pair with form data.",
-              "value": { "type": "string", "default": "''" }
+              "description": "The default value of the form control. Primarily used for resetting the form control.",
+              "value": { "type": "string | string[]", "default": "''" }
             },
             {
               "name": "size",
-              "description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
+              "description": "The select's size.",
               "value": {
                 "type": "'small' | 'medium' | 'large'",
                 "default": "'medium'"
               }
             },
+            {
+              "name": "placeholder",
+              "description": "Placeholder text to show as a hint when the select is empty.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "multiple",
+              "description": "Allows more than one option to be selected.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "max-options-visible",
+              "description": "The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
+              "value": { "type": "number", "default": "3" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the select control.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "clearable",
+              "description": "Adds a clear button when the select is not empty.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "open",
+              "description": "Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "hoist",
+              "description": "Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "filled",
+              "description": "Draws a filled select.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "pill",
+              "description": "Draws a pill-style select with rounded edges.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "placement",
+              "description": "The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
+              "value": { "type": "'top' | 'bottom'", "default": "'bottom'" }
+            },
+            {
+              "name": "help-text",
+              "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "form",
               "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
@@ -3653,32 +3626,83 @@
             },
             {
               "name": "required",
-              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
+              "description": "The select's required attribute.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "getTag",
+              "description": "A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\nis the current tag's index.  The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at\nthe specified value.",
+              "value": {
+                "type": "(\n        option: TerraOption,\n        index: number\n    ) => TemplateResult | string | HTMLElement"
+              }
             }
           ],
           "slots": [
             {
               "name": "",
-              "description": "The default slot where `<terra-radio>` elements are placed."
+              "description": "The listbox options. Must be `<terra-option>` elements."
             },
             {
               "name": "label",
-              "description": "The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute."
+              "description": "The input's label. Alternatively, you can use the `label` attribute."
+            },
+            {
+              "name": "prefix",
+              "description": "Used to prepend a presentational icon or similar element to the combobox."
+            },
+            {
+              "name": "suffix",
+              "description": "Used to append a presentational icon or similar element to the combobox."
+            },
+            {
+              "name": "clear-icon",
+              "description": "An icon to use in lieu of the default clear icon."
+            },
+            {
+              "name": "expand-icon",
+              "description": "The icon to show when the control is expanded and collapsed. Rotates on open and close."
             },
             {
               "name": "help-text",
-              "description": "Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute."
+              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute."
             }
           ],
           "events": [
             {
               "name": "terra-change",
-              "description": "Emitted when the radio group's selected value changes."
+              "description": "Emitted when the control's value changes."
+            },
+            {
+              "name": "terra-clear",
+              "description": "Emitted when the control's value is cleared."
             },
             {
               "name": "terra-input",
-              "description": "Emitted when the radio group receives user input."
+              "description": "Emitted when the control receives input."
+            },
+            {
+              "name": "terra-focus",
+              "description": "Emitted when the control gains focus."
+            },
+            {
+              "name": "terra-blur",
+              "description": "Emitted when the control loses focus."
+            },
+            {
+              "name": "terra-show",
+              "description": "Emitted when the select's menu opens."
+            },
+            {
+              "name": "terra-after-show",
+              "description": "Emitted after the select's menu opens and all animations are complete."
+            },
+            {
+              "name": "terra-hide",
+              "description": "Emitted when the select's menu closes."
+            },
+            {
+              "name": "terra-after-hide",
+              "description": "Emitted after the select's menu closes and all animations are complete."
             },
             {
               "name": "terra-invalid",
@@ -3687,33 +3711,92 @@
           ],
           "js": {
             "properties": [
-              { "name": "defaultSlot", "type": "HTMLSlotElement" },
-              { "name": "validationInput", "type": "HTMLInputElement" },
-              { "name": "defaultValue", "type": "string" },
+              { "name": "popup", "type": "TerraPopup" },
+              { "name": "combobox", "type": "HTMLSlotElement" },
+              { "name": "displayInput", "type": "HTMLInputElement" },
+              { "name": "valueInput", "type": "HTMLInputElement" },
+              { "name": "listbox", "type": "HTMLSlotElement" },
+              { "name": "displayLabel", "type": "string" },
+              { "name": "currentOption", "type": "TerraOption" },
+              { "name": "selectedOptions", "type": "TerraOption[]" },
               {
-                "name": "label",
-                "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+                "name": "name",
+                "description": "The name of the select, submitted as a name/value pair with form data.",
                 "type": "string"
               },
               {
-                "name": "helpText",
-                "description": "The radio groups's help text. If you need to display HTML, use the `help-text` slot instead.",
-                "type": "string"
+                "name": "value",
+                "description": "The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue attribute will be a space-delimited list of values based on the options selected, and the value property will\nbe an array. **For this reason, values must not contain spaces.**"
               },
               {
-                "name": "name",
-                "description": "The name of the radio group, submitted as a name/value pair with form data.",
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "string | string[]"
+              },
+              {
+                "name": "size",
+                "description": "The select's size.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "placeholder",
+                "description": "Placeholder text to show as a hint when the select is empty.",
                 "type": "string"
               },
               {
-                "name": "value",
-                "description": "The current value of the radio group, submitted as a name/value pair with form data.",
+                "name": "multiple",
+                "description": "Allows more than one option to be selected.",
+                "type": "boolean"
+              },
+              {
+                "name": "maxOptionsVisible",
+                "description": "The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
+                "type": "number"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the select control.",
+                "type": "boolean"
+              },
+              {
+                "name": "clearable",
+                "description": "Adds a clear button when the select is not empty.",
+                "type": "boolean"
+              },
+              {
+                "name": "open",
+                "description": "Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.",
+                "type": "boolean"
+              },
+              {
+                "name": "hoist",
+                "description": "Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+                "type": "boolean"
+              },
+              {
+                "name": "filled",
+                "description": "Draws a filled select.",
+                "type": "boolean"
+              },
+              {
+                "name": "pill",
+                "description": "Draws a pill-style select with rounded edges.",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
                 "type": "string"
               },
               {
-                "name": "size",
-                "description": "The radio group's size. This size will be applied to all child radios and radio buttons.",
-                "type": "'small' | 'medium' | 'large'"
+                "name": "placement",
+                "description": "The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
+                "type": "'top' | 'bottom'"
+              },
+              {
+                "name": "helpText",
+                "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "type": "string"
               },
               {
                 "name": "form",
@@ -3722,9 +3805,14 @@
               },
               {
                 "name": "required",
-                "description": "Ensures a child radio is checked before allowing the containing form to submit.",
+                "description": "The select's required attribute.",
                 "type": "boolean"
               },
+              {
+                "name": "getTag",
+                "description": "A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\nis the current tag's index.  The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at\nthe specified value.",
+                "type": "(\n        option: TerraOption,\n        index: number\n    ) => TemplateResult | string | HTMLElement"
+              },
               {
                 "name": "validity",
                 "description": "Gets the validity state object"
@@ -3737,11 +3825,39 @@
             "events": [
               {
                 "name": "terra-change",
-                "description": "Emitted when the radio group's selected value changes."
+                "description": "Emitted when the control's value changes."
+              },
+              {
+                "name": "terra-clear",
+                "description": "Emitted when the control's value is cleared."
               },
               {
                 "name": "terra-input",
-                "description": "Emitted when the radio group receives user input."
+                "description": "Emitted when the control receives input."
+              },
+              {
+                "name": "terra-focus",
+                "description": "Emitted when the control gains focus."
+              },
+              {
+                "name": "terra-blur",
+                "description": "Emitted when the control loses focus."
+              },
+              {
+                "name": "terra-show",
+                "description": "Emitted when the select's menu opens."
+              },
+              {
+                "name": "terra-after-show",
+                "description": "Emitted after the select's menu opens and all animations are complete."
+              },
+              {
+                "name": "terra-hide",
+                "description": "Emitted when the select's menu closes."
+              },
+              {
+                "name": "terra-after-hide",
+                "description": "Emitted after the select's menu closes and all animations are complete."
               },
               {
                 "name": "terra-invalid",
@@ -3751,452 +3867,307 @@
           }
         },
         {
-          "name": "terra-scroll-hint",
-          "description": "Scroll hint is an animated button that prompts visitors to scroll.\n---\n\n\n### **Events:**\n - **terra-scroll** - Emitted when the scroll hint is clicked and scrolling begins.\n\n### **CSS Properties:**\n - **--terra-scroll-hint-icon-background-color** - The background color of the icon circle. _(default: undefined)_\n- **--terra-scroll-hint-icon-color** - The color of the chevron icon. _(default: undefined)_\n- **--terra-scroll-hint-text-color** - The color of the text. _(default: undefined)_\n- **--terra-scroll-hint-ring-color** - The color of the pulsing ring. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The clickable button element.\n- **icon-container** - The container for the icon and pulsing ring.\n- **icon** - The chevron icon.\n- **ring** - The pulsing ring around the icon.\n- **text** - The \"SCROLL TO CONTINUE\" text.",
+          "name": "terra-site-header",
+          "description": "Site headers provide a consistent navigation structure at the top of pages.\n---\n\n\n### **Slots:**\n - **title** - The site title displayed next to the logo. Defaults to the `site-name` prop value.\n- **center** - Content displayed in the center of the header (e.g., navigation).\n- **right** - Content displayed on the right side of the header. Defaults to a search icon button.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **logo** - The NASA logo container.\n- **title** - The site title container.\n- **center** - The center content container.\n- **right** - The right content container.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "inline",
-              "description": "When true, the component will be positioned inline in the DOM flow instead of fixed to the viewport.",
-              "value": { "type": "boolean", "default": "false" }
-            },
+              "name": "site-name",
+              "description": "The default site name displayed in the title slot if no content is provided.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
             {
-              "name": "dark",
-              "description": "When true, forces dark mode styles regardless of system preference. Useful when placing the component on a dark background.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "title",
+              "description": "The site title displayed next to the logo. Defaults to the `site-name` prop value."
             },
             {
-              "name": "inactivityDelay",
-              "description": "The delay in milliseconds before showing the scroll hint after inactivity. Defaults to 3000ms (3 seconds).",
-              "value": { "type": "number", "default": "3000" }
-            }
-          ],
-          "events": [
+              "name": "center",
+              "description": "Content displayed in the center of the header (e.g., navigation)."
+            },
             {
-              "name": "terra-scroll",
-              "description": "Emitted when the scroll hint is clicked and scrolling begins."
+              "name": "right",
+              "description": "Content displayed on the right side of the header. Defaults to a search icon button."
             }
           ],
+          "events": [],
           "js": {
             "properties": [
               {
-                "name": "inline",
-                "description": "When true, the component will be positioned inline in the DOM flow instead of fixed to the viewport.",
-                "type": "boolean"
-              },
-              {
-                "name": "dark",
-                "description": "When true, forces dark mode styles regardless of system preference. Useful when placing the component on a dark background.",
-                "type": "boolean"
-              },
-              {
-                "name": "inactivityDelay",
-                "description": "The delay in milliseconds before showing the scroll hint after inactivity. Defaults to 3000ms (3 seconds).",
-                "type": "number"
+                "name": "siteName",
+                "description": "The default site name displayed in the title slot if no content is provided.",
+                "type": "string"
               }
             ],
-            "events": [
-              {
-                "name": "terra-scroll",
-                "description": "Emitted when the scroll hint is clicked and scrolling begins."
-              }
-            ]
+            "events": []
           }
         },
         {
-          "name": "terra-select",
-          "description": "Select fields are a form field used to select one option from a list.\n---\n\n\n### **Events:**\n - **terra-change** - Emitted when the control's value changes.\n- **terra-clear** - Emitted when the control's value is cleared.\n- **terra-input** - Emitted when the control receives input.\n- **terra-focus** - Emitted when the control gains focus.\n- **terra-blur** - Emitted when the control loses focus.\n- **terra-show** - Emitted when the select's menu opens.\n- **terra-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **terra-hide** - Emitted when the select's menu closes.\n- **terra-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **terra-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<terra-option>` elements.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--terra-select-*** - All select design tokens from horizon.css are supported. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiple` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
+          "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.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "name",
-              "description": "The name of the select, submitted as a name/value pair with form data.",
-              "value": { "type": "string", "default": "''" }
+              "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.",
+              "value": { "type": "Element | string | VirtualElement" }
             },
             {
-              "name": "value",
-              "description": "The default value of the form control. Primarily used for resetting the form control.",
-              "value": { "type": "string | string[]", "default": "''" }
+              "name": "active",
+              "description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "size",
-              "description": "The select's size.",
+              "name": "placement",
+              "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
               "value": {
-                "type": "'small' | 'medium' | 'large'",
-                "default": "'medium'"
+                "type": "| 'top'\n        | 'top-start'\n        | 'top-end'\n        | 'bottom'\n        | 'bottom-start'\n        | 'bottom-end'\n        | 'right'\n        | 'right-start'\n        | 'right-end'\n        | 'left'\n        | 'left-start'\n        | 'left-end'",
+                "default": "'top'"
               }
             },
-            {
-              "name": "placeholder",
-              "description": "Placeholder text to show as a hint when the select is empty.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "multiple",
-              "description": "Allows more than one option to be selected.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "max-options-visible",
-              "description": "The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
-              "value": { "type": "number", "default": "3" }
-            },
-            {
-              "name": "disabled",
-              "description": "Disables the select control.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "clearable",
-              "description": "Adds a clear button when the select is not empty.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "open",
-              "description": "Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "hoist",
-              "description": "Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "filled",
-              "description": "Draws a filled select.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "pill",
-              "description": "Draws a pill-style select with rounded edges.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "label",
-              "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "placement",
-              "description": "The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
-              "value": { "type": "'top' | 'bottom'", "default": "'bottom'" }
+            {
+              "name": "strategy",
+              "description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
+              "value": {
+                "type": "'absolute' | 'fixed'",
+                "default": "'absolute'"
+              }
             },
             {
-              "name": "help-text",
-              "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "value": { "type": "string", "default": "''" }
+              "name": "distance",
+              "description": "The distance in pixels from which to offset the panel away from its anchor.",
+              "value": { "type": "number", "default": "0" }
             },
             {
-              "name": "form",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-              "value": { "type": "string", "default": "''" }
+              "name": "skidding",
+              "description": "The distance in pixels from which to offset the panel along its anchor.",
+              "value": { "type": "number", "default": "0" }
             },
             {
-              "name": "required",
-              "description": "The select's required attribute.",
+              "name": "arrow",
+              "description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "getTag",
-              "description": "A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\nis the current tag's index.  The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at\nthe specified value.",
+              "name": "arrow-placement",
+              "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.",
               "value": {
-                "type": "(\n        option: TerraOption,\n        index: number\n    ) => TemplateResult | string | HTMLElement"
+                "type": "| 'start'\n        | 'end'\n        | 'center'\n        | 'anchor'",
+                "default": "'anchor'"
               }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "The listbox options. Must be `<terra-option>` elements."
             },
             {
-              "name": "label",
-              "description": "The input's label. Alternatively, you can use the `label` attribute."
+              "name": "arrow-padding",
+              "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.",
+              "value": { "type": "number", "default": "10" }
             },
             {
-              "name": "prefix",
-              "description": "Used to prepend a presentational icon or similar element to the combobox."
+              "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.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "suffix",
-              "description": "Used to append a presentational icon or similar element to the combobox."
+              "name": "flip-fallback-placements",
+              "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.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "clear-icon",
-              "description": "An icon to use in lieu of the default clear icon."
+              "name": "flip-fallback-strategy",
+              "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.",
+              "value": {
+                "type": "| 'best-fit'\n        | 'initial'",
+                "default": "'best-fit'"
+              }
             },
             {
-              "name": "expand-icon",
-              "description": "The icon to show when the control is expanded and collapsed. Rotates on open and close."
+              "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.",
+              "value": { "type": "Element | Element[]" }
             },
             {
-              "name": "help-text",
-              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute."
-            }
-          ],
-          "events": [
-            {
-              "name": "terra-change",
-              "description": "Emitted when the control's value changes."
+              "name": "flip-padding",
+              "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
+              "value": { "type": "number", "default": "0" }
             },
             {
-              "name": "terra-clear",
-              "description": "Emitted when the control's value is cleared."
+              "name": "shift",
+              "description": "Moves the popup along the axis to keep it in view when clipped.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "terra-input",
-              "description": "Emitted when the control receives input."
+              "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.",
+              "value": { "type": "Element | Element[]" }
             },
             {
-              "name": "terra-focus",
-              "description": "Emitted when the control gains focus."
+              "name": "shift-padding",
+              "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
+              "value": { "type": "number", "default": "0" }
             },
             {
-              "name": "terra-blur",
-              "description": "Emitted when the control loses focus."
+              "name": "auto-size",
+              "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
+              "value": { "type": "'horizontal' | 'vertical' | 'both'" }
             },
             {
-              "name": "terra-show",
-              "description": "Emitted when the select's menu opens."
+              "name": "sync",
+              "description": "Syncs the popup's width or height to that of the anchor element.",
+              "value": { "type": "'width' | 'height' | 'both'" }
             },
             {
-              "name": "terra-after-show",
-              "description": "Emitted after the select's menu opens and all animations are complete."
+              "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.",
+              "value": { "type": "Element | Element[]" }
             },
             {
-              "name": "terra-hide",
-              "description": "Emitted when the select's menu closes."
+              "name": "auto-size-padding",
+              "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
+              "value": { "type": "number", "default": "0" }
             },
             {
-              "name": "terra-after-hide",
-              "description": "Emitted after the select's menu closes and all animations are complete."
-            },
+              "name": "hover-bridge",
+              "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.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The popup's content." },
             {
-              "name": "terra-invalid",
-              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+              "name": "anchor",
+              "description": "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."
+            }
+          ],
+          "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."
             }
           ],
           "js": {
             "properties": [
-              { "name": "popup", "type": "TerraPopup" },
-              { "name": "combobox", "type": "HTMLSlotElement" },
-              { "name": "displayInput", "type": "HTMLInputElement" },
-              { "name": "valueInput", "type": "HTMLInputElement" },
-              { "name": "listbox", "type": "HTMLSlotElement" },
-              { "name": "displayLabel", "type": "string" },
-              { "name": "currentOption", "type": "TerraOption" },
-              { "name": "selectedOptions", "type": "TerraOption[]" },
-              {
-                "name": "name",
-                "description": "The name of the select, submitted as a name/value pair with form data.",
-                "type": "string"
-              },
               {
-                "name": "value",
-                "description": "The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue attribute will be a space-delimited list of values based on the options selected, and the value property will\nbe an array. **For this reason, values must not contain spaces.**"
+                "name": "popup",
+                "description": "A reference to the internal popup container. Useful for animating and styling the popup with JavaScript.",
+                "type": "HTMLElement"
               },
               {
-                "name": "defaultValue",
-                "description": "The default value of the form control. Primarily used for resetting the form control.",
-                "type": "string | string[]"
+                "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.",
+                "type": "Element | string | VirtualElement"
               },
               {
-                "name": "size",
-                "description": "The select's size.",
-                "type": "'small' | 'medium' | 'large'"
+                "name": "active",
+                "description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
+                "type": "boolean"
               },
               {
-                "name": "placeholder",
-                "description": "Placeholder text to show as a hint when the select is empty.",
-                "type": "string"
+                "name": "placement",
+                "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
+                "type": "| 'top'\n        | 'top-start'\n        | 'top-end'\n        | 'bottom'\n        | 'bottom-start'\n        | 'bottom-end'\n        | 'right'\n        | 'right-start'\n        | 'right-end'\n        | 'left'\n        | 'left-start'\n        | 'left-end'"
               },
               {
-                "name": "multiple",
-                "description": "Allows more than one option to be selected.",
-                "type": "boolean"
+                "name": "strategy",
+                "description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
+                "type": "'absolute' | 'fixed'"
               },
               {
-                "name": "maxOptionsVisible",
-                "description": "The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
+                "name": "distance",
+                "description": "The distance in pixels from which to offset the panel away from its anchor.",
                 "type": "number"
               },
               {
-                "name": "disabled",
-                "description": "Disables the select control.",
-                "type": "boolean"
-              },
-              {
-                "name": "clearable",
-                "description": "Adds a clear button when the select is not empty.",
-                "type": "boolean"
+                "name": "skidding",
+                "description": "The distance in pixels from which to offset the panel along its anchor.",
+                "type": "number"
               },
               {
-                "name": "open",
-                "description": "Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the select's open state.",
+                "name": "arrow",
+                "description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
                 "type": "boolean"
               },
               {
-                "name": "hoist",
-                "description": "Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
-                "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": "filled",
-                "description": "Draws a filled select.",
-                "type": "boolean"
+                "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": "pill",
-                "description": "Draws a pill-style select with rounded edges.",
+                "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": "The select's label. If you need to display HTML, use the `label` slot instead.",
-                "type": "string"
-              },
-              {
-                "name": "placement",
-                "description": "The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
-                "type": "'top' | 'bottom'"
-              },
-              {
-                "name": "helpText",
-                "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
-                "type": "string"
-              },
-              {
-                "name": "form",
-                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+                "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": "required",
-                "description": "The select's required attribute.",
-                "type": "boolean"
-              },
-              {
-                "name": "getTag",
-                "description": "A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\nis the current tag's index.  The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at\nthe specified value.",
-                "type": "(\n        option: TerraOption,\n        index: number\n    ) => TemplateResult | string | HTMLElement"
-              },
-              {
-                "name": "validity",
-                "description": "Gets the validity state object"
-              },
-              {
-                "name": "validationMessage",
-                "description": "Gets the validation message"
-              }
-            ],
-            "events": [
-              {
-                "name": "terra-change",
-                "description": "Emitted when the control's value changes."
+                "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": "terra-clear",
-                "description": "Emitted when the control's value is cleared."
+                "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": "terra-input",
-                "description": "Emitted when the control receives input."
+                "name": "flipPadding",
+                "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
+                "type": "number"
               },
               {
-                "name": "terra-focus",
-                "description": "Emitted when the control gains focus."
+                "name": "shift",
+                "description": "Moves the popup along the axis to keep it in view when clipped.",
+                "type": "boolean"
               },
               {
-                "name": "terra-blur",
-                "description": "Emitted when the control loses focus."
+                "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": "terra-show",
-                "description": "Emitted when the select's menu opens."
+                "name": "shiftPadding",
+                "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
+                "type": "number"
               },
               {
-                "name": "terra-after-show",
-                "description": "Emitted after the select's menu opens and all animations are complete."
+                "name": "autoSize",
+                "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
+                "type": "'horizontal' | 'vertical' | 'both'"
               },
               {
-                "name": "terra-hide",
-                "description": "Emitted when the select's menu closes."
+                "name": "sync",
+                "description": "Syncs the popup's width or height to that of the anchor element.",
+                "type": "'width' | 'height' | 'both'"
               },
               {
-                "name": "terra-after-hide",
-                "description": "Emitted after the select's menu closes and all animations are complete."
+                "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": "terra-invalid",
-                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
-              }
-            ]
-          }
-        },
-        {
-          "name": "terra-site-header",
-          "description": "Site headers provide a consistent navigation structure at the top of pages.\n---\n\n\n### **Slots:**\n - **title** - The site title displayed next to the logo. Defaults to the `site-name` prop value.\n- **center** - Content displayed in the center of the header (e.g., navigation).\n- **right** - Content displayed on the right side of the header. Defaults to a search icon button.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **logo** - The NASA logo container.\n- **title** - The site title container.\n- **center** - The center content container.\n- **right** - The right content container.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "site-name",
-              "description": "The default site name displayed in the title slot if no content is provided.",
-              "value": { "type": "string", "default": "''" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "title",
-              "description": "The site title displayed next to the logo. Defaults to the `site-name` prop value."
-            },
-            {
-              "name": "center",
-              "description": "Content displayed in the center of the header (e.g., navigation)."
-            },
-            {
-              "name": "right",
-              "description": "Content displayed on the right side of the header. Defaults to a search icon button."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
+                "name": "autoSizePadding",
+                "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
+                "type": "number"
+              },
               {
-                "name": "siteName",
-                "description": "The default site name displayed in the title slot if no content is provided.",
-                "type": "string"
+                "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-site-navigation",
-          "description": "Site navigation provides a flexible navigation structure with dropdown menus.\n---\n\n\n### **Slots:**\n - _default_ - Navigation items. Can contain `<terra-dropdown>` elements or any custom navigation content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "full-width",
-              "description": "When true, dropdowns use full-width panels instead of normal list-based navigation.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "Navigation items. Can contain `<terra-dropdown>` elements or any custom navigation content."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
+            "events": [
               {
-                "name": "fullWidth",
-                "description": "When true, dropdowns use full-width panels instead of normal list-based navigation.",
-                "type": "boolean"
+                "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."
               }
-            ],
-            "events": []
+            ]
           }
         },
         {
@@ -4533,235 +4504,98 @@
           }
         },
         {
-          "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": "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": "",
-              "description": "One or more `<terra-stepper-step>` elements to display in the stepper."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "defaultSlot", "type": "HTMLSlotElement" },
-              {
-                "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-status-indicator",
-          "description": "Status indicators are dynamic labels that indicate the current state of a mission or project.\n---\n\n\n### **Slots:**\n - _default_ - The status label text.\n\n### **CSS Properties:**\n - **--terra-status-indicator-dot-color** - The color of the status dot. _(default: undefined)_\n- **--terra-status-indicator-label-color** - The color of the label text. _(default: undefined)_\n- **--terra-status-indicator-font-family** - The font family for the label. _(default: undefined)_\n- **--terra-status-indicator-font-size** - The font size for the label. _(default: undefined)_\n- **--terra-status-indicator-font-weight** - The font weight for the label. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **dot** - The colored status dot.\n- **label** - The text label.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "variant",
-              "description": "The status variant. Determines the color of the indicator dot.",
-              "value": {
-                "type": "| 'active'\n        | 'completed'\n        | 'testing'\n        | 'future'",
-                "default": "'active'"
-              }
-            },
-            {
-              "name": "dark",
-              "description": "When true, forces dark mode styles regardless of system preference. Useful when placing the component on a dark background.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The status label text." }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "variant",
-                "description": "The status variant. Determines the color of the indicator dot.",
-                "type": "| 'active'\n        | 'completed'\n        | 'testing'\n        | 'future'"
-              },
-              {
-                "name": "dark",
-                "description": "When true, forces dark mode styles regardless of system preference. Useful when placing the component on a dark background.",
-                "type": "boolean"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "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).",
-          "doc-url": "",
-          "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.",
-              "value": {
-                "type": "'completed' | 'current' | 'upcoming'",
-                "default": "'upcoming'"
-              }
-            },
-            {
-              "name": "title",
-              "description": "The step's title. Should be short, preferably 1-2 words.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "hide-checkmark",
-              "description": "When true, hides the checkmark icon for completed steps.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "The step's caption (optional, only shown in default variant)."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "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.",
-                "type": "'completed' | 'current' | 'upcoming'"
-              },
-              {
-                "name": "title",
-                "description": "The step's title. Should be short, preferably 1-2 words.",
-                "type": "string"
-              },
-              {
-                "name": "hideCheckmark",
-                "description": "When true, hides the checkmark icon for completed steps.",
-                "type": "boolean"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "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-site-navigation",
+          "description": "Site navigation provides a flexible navigation structure with dropdown menus.\n---\n\n\n### **Slots:**\n - _default_ - Navigation items. Can contain `<terra-dropdown>` elements or any custom navigation content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "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.",
-              "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.",
+              "name": "full-width",
+              "description": "When true, dropdowns use full-width panels instead of normal list-based navigation.",
               "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."
+              "description": "Navigation items. Can contain `<terra-dropdown>` elements or any custom navigation 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.",
-                "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.",
+                "name": "fullWidth",
+                "description": "When true, dropdowns use full-width panels instead of normal list-based navigation.",
                 "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-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": "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": "",
+              "description": "One or more `<terra-stepper-step>` elements to display in the stepper."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
               {
-                "name": "terra-close",
-                "description": "Emitted when the tab is closable and the close button is activated."
+                "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-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-status-indicator",
+          "description": "Status indicators are dynamic labels that indicate the current state of a mission or project.\n---\n\n\n### **Slots:**\n - _default_ - The status label text.\n\n### **CSS Properties:**\n - **--terra-status-indicator-dot-color** - The color of the status dot. _(default: undefined)_\n- **--terra-status-indicator-label-color** - The color of the label text. _(default: undefined)_\n- **--terra-status-indicator-font-family** - The font family for the label. _(default: undefined)_\n- **--terra-status-indicator-font-size** - The font size for the label. _(default: undefined)_\n- **--terra-status-indicator-font-weight** - The font weight for the label. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **dot** - The colored status dot.\n- **label** - The text label.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "name",
-              "description": "The tab panel's name.",
-              "value": { "type": "string", "default": "''" }
+              "name": "variant",
+              "description": "The status variant. Determines the color of the indicator dot.",
+              "value": {
+                "type": "| 'active'\n        | 'completed'\n        | 'testing'\n        | 'future'",
+                "default": "'active'"
+              }
             },
             {
-              "name": "active",
-              "description": "When true, the tab panel will be shown.",
+              "name": "dark",
+              "description": "When true, forces dark mode styles regardless of system preference. Useful when placing the component on a dark background.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
-          "slots": [{ "name": "", "description": "The tab panel's content." }],
+          "slots": [{ "name": "", "description": "The status label text." }],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "name",
-                "description": "The tab panel's name.",
-                "type": "string"
+                "name": "variant",
+                "description": "The status variant. Determines the color of the indicator dot.",
+                "type": "| 'active'\n        | 'completed'\n        | 'testing'\n        | 'future'"
               },
               {
-                "name": "active",
-                "description": "When true, the tab panel will be shown.",
+                "name": "dark",
+                "description": "When true, forces dark mode styles regardless of system preference. Useful when placing the component on a dark background.",
                 "type": "boolean"
               }
             ],
@@ -4769,637 +4603,457 @@
           }
         },
         {
-          "name": "terra-tabs",
-          "description": "Tabs organize content into a container that shows one section at a time.\n---\n\n\n### **Events:**\n - **terra-tab-show** - Emitted when a tab is shown.\n- **terra-tab-hide** - Emitted when a tab is hidden.\n\n### **Methods:**\n - **show(panel: _string_)** - Shows the specified tab panel.\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tabs component. Must be `<terra-tab-panel>` elements.\n- **nav** - Used for grouping tabs in the tabs component. Must be `<terra-tab>` elements.\n\n### **CSS Properties:**\n - **--terra-tabs-indicator-color** - The color of the active tab indicator. _(default: undefined)_\n- **--terra-tabs-track-color** - The color of the indicator's track (the line that separates tabs from panels). _(default: undefined)_\n- **--terra-tabs-track-width** - The width of the indicator's track (the line that separates tabs from panels). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **nav** - The tabs' navigation container where tabs are slotted in.\n- **tabs** - The container that wraps the tabs.\n- **active-tab-indicator** - The line that highlights the currently selected tab.\n- **body** - The tabs' body where tab panels are slotted in.\n- **scroll-button** - The previous/next scroll buttons that show when tabs are scrollable.\n- **scroll-button--start** - The starting scroll button.\n- **scroll-button--end** - The ending scroll button.",
+          "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).",
           "doc-url": "",
           "attributes": [
             {
-              "name": "placement",
-              "description": "The placement of the tabs.",
+              "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.",
               "value": {
-                "type": "'top' | 'bottom' | 'start' | 'end'",
-                "default": "'top'"
+                "type": "'completed' | 'current' | 'upcoming'",
+                "default": "'upcoming'"
               }
             },
             {
-              "name": "activation",
-              "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
-              "value": { "type": "'auto' | 'manual'", "default": "'auto'" }
-            },
-            {
-              "name": "no-scroll-controls",
-              "description": "Disables the scroll arrows that appear when tabs overflow.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "title",
+              "description": "The step's title. Should be short, preferably 1-2 words.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "fixed-scroll-controls",
-              "description": "Prevent scroll buttons from being hidden when inactive.",
+              "name": "hide-checkmark",
+              "description": "When true, hides the checkmark icon for completed steps.",
               "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "size",
-              "description": "The size of the tabs. Can be overridden by individual tab components.",
-              "value": { "type": "'large' | 'small'", "default": "'large'" }
             }
           ],
           "slots": [
             {
               "name": "",
-              "description": "Used for grouping tab panels in the tabs component. Must be `<terra-tab-panel>` elements."
-            },
-            {
-              "name": "nav",
-              "description": "Used for grouping tabs in the tabs component. Must be `<terra-tab>` elements."
-            }
-          ],
-          "events": [
-            {
-              "name": "terra-tab-show",
-              "type": "{ name: String }",
-              "description": "Emitted when a tab is shown."
-            },
-            {
-              "name": "terra-tab-hide",
-              "type": "{ name: String }",
-              "description": "Emitted when a tab is hidden."
+              "description": "The step's caption (optional, only shown in default variant)."
             }
           ],
+          "events": [],
           "js": {
             "properties": [
-              { "name": "tabsElement", "type": "HTMLElement" },
-              { "name": "body", "type": "HTMLSlotElement" },
-              { "name": "nav", "type": "HTMLElement" },
-              { "name": "indicator", "type": "HTMLElement" },
-              {
-                "name": "placement",
-                "description": "The placement of the tabs.",
-                "type": "'top' | 'bottom' | 'start' | 'end'"
-              },
               {
-                "name": "activation",
-                "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
-                "type": "'auto' | 'manual'"
+                "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.",
+                "type": "'completed' | 'current' | 'upcoming'"
               },
               {
-                "name": "noScrollControls",
-                "description": "Disables the scroll arrows that appear when tabs overflow.",
-                "type": "boolean"
+                "name": "title",
+                "description": "The step's title. Should be short, preferably 1-2 words.",
+                "type": "string"
               },
               {
-                "name": "fixedScrollControls",
-                "description": "Prevent scroll buttons from being hidden when inactive.",
+                "name": "hideCheckmark",
+                "description": "When true, hides the checkmark icon for completed steps.",
                 "type": "boolean"
-              },
-              {
-                "name": "size",
-                "description": "The size of the tabs. Can be overridden by individual tab components.",
-                "type": "'large' | 'small'"
               }
             ],
-            "events": [
-              {
-                "name": "terra-tab-show",
-                "type": "{ name: String }",
-                "description": "Emitted when a tab is shown."
-              },
-              {
-                "name": "terra-tab-hide",
-                "type": "{ name: String }",
-                "description": "Emitted when a tab is hidden."
-              }
-            ]
+            "events": []
           }
         },
         {
-          "name": "terra-tag",
-          "description": "Tags are simple labels that help categorize items.\n---\n\n\n### **Events:**\n - **terra-click** - Emitted when a topic tag is clicked (unless href is provided).\n\n### **Slots:**\n - _default_ - The tag label text.\n- **icon** - Optional icon slot for content tags (overrides icon prop).\n\n### **CSS Properties:**\n - **--terra-tag-font-family** - The font family for the tag. _(default: undefined)_\n- **--terra-tag-font-size-small** - The font size for small tags. _(default: undefined)_\n- **--terra-tag-font-size-medium** - The font size for medium tags. _(default: undefined)_\n- **--terra-tag-font-size-large** - The font size for large tags. _(default: undefined)_\n- **--terra-tag-font-weight** - The font weight for the tag. _(default: undefined)_\n- **--terra-tag-font-weight-urgent** - The font weight for urgent tags. _(default: undefined)_\n- **--terra-tag-color** - The text color of the tag. _(default: undefined)_\n- **--terra-tag-background-color** - The background color of the tag. _(default: undefined)_\n- **--terra-tag-border-color** - The border color for topic tags. _(default: undefined)_\n- **--terra-tag-border-color-hover** - The border color for topic tags on hover. _(default: undefined)_\n- **--terra-tag-background-color-hover** - The background color for topic tags on hover. _(default: undefined)_\n- **--terra-tag-icon-border-color** - The border color for content tag icons. _(default: undefined)_\n- **--terra-tag-icon-size-small** - The size of small content tag icons. _(default: undefined)_\n- **--terra-tag-icon-size-medium** - The size of medium content tag icons. _(default: undefined)_\n- **--terra-tag-icon-size-large** - The size of large content tag icons. _(default: undefined)_\n- **--terra-tag-icon-inner-size-small** - The inner icon size for small content tags. _(default: undefined)_\n- **--terra-tag-icon-inner-size-medium** - The inner icon size for medium content tags. _(default: undefined)_\n- **--terra-tag-icon-inner-size-large** - The inner icon size for large content tags. _(default: undefined)_\n- **--terra-tag-urgent-color** - The text color for urgent tags. _(default: undefined)_\n- **--terra-tag-urgent-background-color** - The background color for urgent tags. _(default: undefined)_\n- **--terra-tag-padding-small** - The padding for small topic/urgent tags. _(default: undefined)_\n- **--terra-tag-padding-medium** - The padding for medium topic/urgent tags. _(default: undefined)_\n- **--terra-tag-padding-large** - The padding for large topic/urgent tags. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The icon element (content tags only).\n- **label** - The text label.",
+          "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": "variant",
-              "description": "The tag variant. Determines the styling and behavior.",
-              "value": {
-                "type": "'content' | 'topic' | 'urgent'",
-                "default": "'content'"
-              }
-            },
-            {
-              "name": "size",
-              "description": "The size of the tag.",
-              "value": {
-                "type": "'small' | 'medium' | 'large'",
-                "default": "'medium'"
-              }
-            },
-            {
-              "name": "icon",
-              "description": "The icon name for content tags. Used with the default icon library.",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "iconLibrary",
-              "description": "The icon library to use for content tags.",
-              "value": {
-                "type": "'default' | 'heroicons' | string",
-                "default": "'default'"
-              }
-            },
-            {
-              "name": "stack",
-              "description": "When true, tags will stack vertically instead of sitting side by side.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "dark",
-              "description": "When true, forces dark mode styles regardless of system preference. Useful when placing the component on a dark background.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "name",
+              "description": "The tab panel's name.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "href",
-              "description": "The href for topic tags. If provided, the tag will be rendered as a link.",
-              "value": { "type": "string | undefined" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The tag label text." },
-            {
-              "name": "icon",
-              "description": "Optional icon slot for content tags (overrides icon prop)."
-            }
-          ],
-          "events": [
-            {
-              "name": "terra-click",
-              "description": "Emitted when a topic tag is clicked (unless href is provided)."
+              "name": "active",
+              "description": "When true, the tab panel will be shown.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
+          "slots": [{ "name": "", "description": "The tab panel's content." }],
+          "events": [],
           "js": {
             "properties": [
               {
-                "name": "variant",
-                "description": "The tag variant. Determines the styling and behavior.",
-                "type": "'content' | 'topic' | 'urgent'"
-              },
-              {
-                "name": "size",
-                "description": "The size of the tag.",
-                "type": "'small' | 'medium' | 'large'"
-              },
-              {
-                "name": "icon",
-                "description": "The icon name for content tags. Used with the default icon library.",
-                "type": "string | undefined"
-              },
-              {
-                "name": "iconLibrary",
-                "description": "The icon library to use for content tags.",
-                "type": "'default' | 'heroicons' | string"
-              },
-              {
-                "name": "stack",
-                "description": "When true, tags will stack vertically instead of sitting side by side.",
-                "type": "boolean"
+                "name": "name",
+                "description": "The tab panel's name.",
+                "type": "string"
               },
               {
-                "name": "dark",
-                "description": "When true, forces dark mode styles regardless of system preference. Useful when placing the component on a dark background.",
+                "name": "active",
+                "description": "When true, the tab panel will be shown.",
                 "type": "boolean"
-              },
-              {
-                "name": "href",
-                "description": "The href for topic tags. If provided, the tag will be rendered as a link.",
-                "type": "string | undefined"
               }
             ],
-            "events": [
-              {
-                "name": "terra-click",
-                "description": "Emitted when a topic tag is clicked (unless href is provided)."
-              }
-            ]
+            "events": []
           }
         },
         {
-          "name": "terra-textarea",
-          "description": "A textarea component with consistent styling across the design system.\n---\n\n\n### **Events:**\n - **terra-input** - Emitted when the textarea receives input.\n- **terra-change** - Emitted when an alteration to the control's value is committed by the user.\n- **terra-focus** - Emitted when the textarea gains focus.\n- **terra-blur** - Emitted when the textarea loses focus.\n- **terra-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - 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 - **help-text** - Text that describes how to use the textarea. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **textarea** - The internal textarea control.\n- **form-control-help-text** - The help text's 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": "name", "value": { "type": "string", "default": "''" } },
-            { "name": "value", "value": { "type": "string", "default": "''" } },
             {
-              "name": "placeholder",
+              "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": "disabled",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "readonly",
+              "name": "active",
+              "description": "Draws the tab in an active state.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "required",
+              "name": "closable",
+              "description": "Makes the tab closable and shows a close button.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "autocomplete",
-              "value": { "type": "string | undefined" }
-            },
-            { "name": "minlength", "value": { "type": "number | undefined" } },
-            { "name": "maxlength", "value": { "type": "number | undefined" } },
-            { "name": "rows", "value": { "type": "number | undefined" } },
-            { "name": "cols", "value": { "type": "number | undefined" } },
-            { "name": "label", "value": { "type": "string", "default": "''" } },
-            {
-              "name": "hide-label",
+              "name": "disabled",
+              "description": "Disables the tab and prevents selection.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "help-text",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "resize",
-              "value": {
-                "type": "'none' | 'both' | 'horizontal' | 'vertical'",
-                "default": "'vertical'"
-              }
-            },
-            {
-              "name": "form",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-              "value": { "type": "string", "default": "''" }
+              "name": "size",
+              "description": "The tab's size. Inherits from the parent tabs component if not specified.",
+              "value": { "type": "'large' | 'small'", "default": "'large'" }
             }
           ],
           "slots": [
             {
-              "name": "help-text",
-              "description": "Text that describes how to use the textarea. Alternatively, you can use the `help-text` attribute."
+              "name": "",
+              "description": "The tab's label. For icon-only tabs, place a `<terra-icon>` here."
             }
           ],
           "events": [
             {
-              "name": "terra-input",
-              "description": "Emitted when the textarea receives input."
-            },
-            {
-              "name": "terra-change",
-              "description": "Emitted when an alteration to the control's value is committed by the user."
-            },
-            {
-              "name": "terra-focus",
-              "description": "Emitted when the textarea gains focus."
-            },
-            {
-              "name": "terra-blur",
-              "description": "Emitted when the textarea loses focus."
-            },
-            {
-              "name": "terra-invalid",
-              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+              "name": "terra-close",
+              "description": "Emitted when the tab is closable and the close button is activated."
             }
           ],
           "js": {
             "properties": [
-              { "name": "textarea", "type": "HTMLTextAreaElement" },
-              { "name": "hasFocus", "type": "boolean" },
-              { "name": "name", "type": "string" },
-              { "name": "value", "type": "string" },
-              { "name": "placeholder", "type": "string" },
-              { "name": "disabled", "type": "boolean" },
-              { "name": "readonly", "type": "boolean" },
-              { "name": "required", "type": "boolean" },
-              { "name": "autocomplete", "type": "string | undefined" },
-              { "name": "minlength", "type": "number | undefined" },
-              { "name": "maxlength", "type": "number | undefined" },
-              { "name": "rows", "type": "number | undefined" },
-              { "name": "cols", "type": "number | undefined" },
-              { "name": "label", "type": "string" },
-              { "name": "hideLabel", "type": "boolean" },
-              { "name": "helpText", "type": "string" },
+              { "name": "tab", "type": "HTMLElement" },
               {
-                "name": "resize",
-                "type": "'none' | 'both' | 'horizontal' | 'vertical'"
+                "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": "defaultValue",
-                "description": "The default value of the form control. Primarily used for resetting the form control.",
-                "type": "string"
+                "name": "active",
+                "description": "Draws the tab in an active state.",
+                "type": "boolean"
               },
               {
-                "name": "form",
-                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-                "type": "string"
+                "name": "closable",
+                "description": "Makes the tab closable and shows a close button.",
+                "type": "boolean"
               },
               {
-                "name": "validity",
-                "description": "Gets the validity state object"
+                "name": "disabled",
+                "description": "Disables the tab and prevents selection.",
+                "type": "boolean"
               },
               {
-                "name": "validationMessage",
-                "description": "Gets the validation message"
+                "name": "size",
+                "description": "The tab's size. Inherits from the parent tabs component if not specified.",
+                "type": "'large' | 'small'"
               }
             ],
             "events": [
               {
-                "name": "terra-input",
-                "description": "Emitted when the textarea receives input."
-              },
-              {
-                "name": "terra-change",
-                "description": "Emitted when an alteration to the control's value is committed by the user."
-              },
-              {
-                "name": "terra-focus",
-                "description": "Emitted when the textarea gains focus."
-              },
-              {
-                "name": "terra-blur",
-                "description": "Emitted when the textarea loses focus."
-              },
-              {
-                "name": "terra-invalid",
-                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+                "name": "terra-close",
+                "description": "Emitted when the tab is closable and the close button is activated."
               }
             ]
           }
         },
         {
-          "name": "terra-time-average-map",
-          "description": "\n---\n",
+          "name": "terra-tabs",
+          "description": "Tabs organize content into a container that shows one section at a time.\n---\n\n\n### **Events:**\n - **terra-tab-show** - Emitted when a tab is shown.\n- **terra-tab-hide** - Emitted when a tab is hidden.\n\n### **Methods:**\n - **show(panel: _string_)** - Shows the specified tab panel.\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tabs component. Must be `<terra-tab-panel>` elements.\n- **nav** - Used for grouping tabs in the tabs component. Must be `<terra-tab>` elements.\n\n### **CSS Properties:**\n - **--terra-tabs-indicator-color** - The color of the active tab indicator. _(default: undefined)_\n- **--terra-tabs-track-color** - The color of the indicator's track (the line that separates tabs from panels). _(default: undefined)_\n- **--terra-tabs-track-width** - The width of the indicator's track (the line that separates tabs from panels). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **nav** - The tabs' navigation container where tabs are slotted in.\n- **tabs** - The container that wraps the tabs.\n- **active-tab-indicator** - The line that highlights the currently selected tab.\n- **body** - The tabs' body where tab panels are slotted in.\n- **scroll-button** - The previous/next scroll buttons that show when tabs are scrollable.\n- **scroll-button--start** - The starting scroll button.\n- **scroll-button--end** - The ending scroll button.",
           "doc-url": "",
           "attributes": [
-            { "name": "collection", "value": { "type": "string | undefined" } },
-            { "name": "variable", "value": { "type": "string | undefined" } },
-            { "name": "start-date", "value": { "type": "string | undefined" } },
-            { "name": "end-date", "value": { "type": "string | undefined" } },
-            { "name": "location", "value": { "type": "string | undefined" } },
-            { "name": "bearer-token", "value": { "type": "string" } },
             {
-              "name": "long_name",
-              "value": { "type": "string", "default": "''" }
+              "name": "placement",
+              "description": "The placement of the tabs.",
+              "value": {
+                "type": "'top' | 'bottom' | 'start' | 'end'",
+                "default": "'top'"
+              }
             },
             {
-              "name": "color-map-name",
-              "value": { "type": "string", "default": "'viridis'" }
+              "name": "activation",
+              "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
+              "value": { "type": "'auto' | 'manual'", "default": "'auto'" }
             },
-            { "name": "opacity", "value": { "type": "number", "default": "1" } }
+            {
+              "name": "no-scroll-controls",
+              "description": "Disables the scroll arrows that appear when tabs overflow.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "fixed-scroll-controls",
+              "description": "Prevent scroll buttons from being hidden when inactive.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "size",
+              "description": "The size of the tabs. Can be overridden by individual tab components.",
+              "value": { "type": "'large' | 'small'", "default": "'large'" }
+            }
           ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "collection", "type": "string | undefined" },
-              { "name": "variable", "type": "string | undefined" },
-              { "name": "startDate", "type": "string | undefined" },
-              { "name": "endDate", "type": "string | undefined" },
-              { "name": "location", "type": "string | undefined" },
-              { "name": "bearerToken", "type": "string" },
-              { "name": "long_name", "type": "string" },
-              { "name": "colorMapName", "type": "string" },
-              { "name": "opacity", "type": "number" },
-              { "name": "catalogVariable", "type": "Variable" },
-              { "name": "pixelValue", "type": "string" },
-              { "name": "pixelCoordinates", "type": "string" },
-              { "name": "metadata", "type": "{ [key: string]: string }" },
-              { "name": "toggleState", "type": "boolean" },
-              { "name": "minimized", "type": "boolean" },
-              { "name": "noDataValue", "type": "number" },
-              { "name": "min", "type": "string" },
-              { "name": "max", "type": "string" },
+          "slots": [
+            {
+              "name": "",
+              "description": "Used for grouping tab panels in the tabs component. Must be `<terra-tab-panel>` elements."
+            },
+            {
+              "name": "nav",
+              "description": "Used for grouping tabs in the tabs component. Must be `<terra-tab>` elements."
+            }
+          ],
+          "events": [
+            {
+              "name": "terra-tab-show",
+              "type": "{ name: String }",
+              "description": "Emitted when a tab is shown."
+            },
+            {
+              "name": "terra-tab-hide",
+              "type": "{ name: String }",
+              "description": "Emitted when a tab is hidden."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "tabsElement", "type": "HTMLElement" },
+              { "name": "body", "type": "HTMLSlotElement" },
+              { "name": "nav", "type": "HTMLElement" },
+              { "name": "indicator", "type": "HTMLElement" },
               {
-                "name": "legendValues",
-                "type": "{ value: string; rgb: string }[]"
+                "name": "placement",
+                "description": "The placement of the tabs.",
+                "type": "'top' | 'bottom' | 'start' | 'end'"
               },
-              { "name": "_authController" },
-              { "name": "colormaps", "type": "array" },
-              { "name": "plotData", "type": "object" },
-              { "name": "layout", "type": "object" },
-              { "name": "harmonyJobId", "type": "string | undefined" },
               {
-                "name": "_fetchVariableTask",
-                "description": "anytime the collection or variable changes, we'll fetch the variable from the catalog to get all of it's metadata"
+                "name": "activation",
+                "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
+                "type": "'auto' | 'manual'"
+              },
+              {
+                "name": "noScrollControls",
+                "description": "Disables the scroll arrows that appear when tabs overflow.",
+                "type": "boolean"
+              },
+              {
+                "name": "fixedScrollControls",
+                "description": "Prevent scroll buttons from being hidden when inactive.",
+                "type": "boolean"
+              },
+              {
+                "name": "size",
+                "description": "The size of the tabs. Can be overridden by individual tab components.",
+                "type": "'large' | 'small'"
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "terra-tab-show",
+                "type": "{ name: String }",
+                "description": "Emitted when a tab is shown."
+              },
+              {
+                "name": "terra-tab-hide",
+                "type": "{ name: String }",
+                "description": "Emitted when a tab is hidden."
+              }
+            ]
           }
         },
         {
-          "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",
+          "name": "terra-tag",
+          "description": "Tags are simple labels that help categorize items.\n---\n\n\n### **Events:**\n - **terra-click** - Emitted when a topic tag is clicked (unless href is provided).\n\n### **Slots:**\n - _default_ - The tag label text.\n- **icon** - Optional icon slot for content tags (overrides icon prop).\n\n### **CSS Properties:**\n - **--terra-tag-font-family** - The font family for the tag. _(default: undefined)_\n- **--terra-tag-font-size-small** - The font size for small tags. _(default: undefined)_\n- **--terra-tag-font-size-medium** - The font size for medium tags. _(default: undefined)_\n- **--terra-tag-font-size-large** - The font size for large tags. _(default: undefined)_\n- **--terra-tag-font-weight** - The font weight for the tag. _(default: undefined)_\n- **--terra-tag-font-weight-urgent** - The font weight for urgent tags. _(default: undefined)_\n- **--terra-tag-color** - The text color of the tag. _(default: undefined)_\n- **--terra-tag-background-color** - The background color of the tag. _(default: undefined)_\n- **--terra-tag-border-color** - The border color for topic tags. _(default: undefined)_\n- **--terra-tag-border-color-hover** - The border color for topic tags on hover. _(default: undefined)_\n- **--terra-tag-background-color-hover** - The background color for topic tags on hover. _(default: undefined)_\n- **--terra-tag-icon-border-color** - The border color for content tag icons. _(default: undefined)_\n- **--terra-tag-icon-size-small** - The size of small content tag icons. _(default: undefined)_\n- **--terra-tag-icon-size-medium** - The size of medium content tag icons. _(default: undefined)_\n- **--terra-tag-icon-size-large** - The size of large content tag icons. _(default: undefined)_\n- **--terra-tag-icon-inner-size-small** - The inner icon size for small content tags. _(default: undefined)_\n- **--terra-tag-icon-inner-size-medium** - The inner icon size for medium content tags. _(default: undefined)_\n- **--terra-tag-icon-inner-size-large** - The inner icon size for large content tags. _(default: undefined)_\n- **--terra-tag-urgent-color** - The text color for urgent tags. _(default: undefined)_\n- **--terra-tag-urgent-background-color** - The background color for urgent tags. _(default: undefined)_\n- **--terra-tag-padding-small** - The padding for small topic/urgent tags. _(default: undefined)_\n- **--terra-tag-padding-medium** - The padding for medium topic/urgent tags. _(default: undefined)_\n- **--terra-tag-padding-large** - The padding for large topic/urgent tags. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The icon element (content tags only).\n- **label** - The text label.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "variable-entry-id",
-              "description": "a variable entry ID (ex: GPM_3IMERGHH_06_precipitationCal)",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "collection",
-              "description": "a collection entry id (ex: GPM_3IMERGHH_06)\nonly required if you don't include a variableEntryId",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "variable",
-              "description": "a variable short name to plot (ex: precipitationCal)\nonly required if you don't include a variableEntryId",
-              "value": { "type": "string | undefined" }
+              "name": "variant",
+              "description": "The tag variant. Determines the styling and behavior.",
+              "value": {
+                "type": "'content' | 'topic' | 'urgent'",
+                "default": "'content'"
+              }
             },
             {
-              "name": "start-date",
-              "description": "The start date for the time series plot. (ex: 2021-01-01)",
-              "value": { "type": "string | undefined" }
+              "name": "size",
+              "description": "The size of the tag.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
             },
             {
-              "name": "end-date",
-              "description": "The end date for the time series plot. (ex: 2021-01-01)",
+              "name": "icon",
+              "description": "The icon name for content tags. Used with the default icon library.",
               "value": { "type": "string | undefined" }
             },
             {
-              "name": "location",
-              "description": "The point location in \"lat,lon\" format.\nOr the bounding box in \"west,south,east,north\" format.",
-              "value": { "type": "string | undefined" }
+              "name": "iconLibrary",
+              "description": "The icon library to use for content tags.",
+              "value": {
+                "type": "'default' | 'heroicons' | string",
+                "default": "'default'"
+              }
             },
             {
-              "name": "show-citation",
+              "name": "stack",
+              "description": "When true, tags will stack vertically instead of sitting side by side.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "application-citation",
-              "description": "if you include an application citation, it will be displayed in the citation panel alongside the dataset citation",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "disable-auto-fetch",
-              "description": "When true, disables automatic data fetching when the user zooms, pans, or otherwise interacts with the plot.\nWhen disabled, the plot will only show the data for the initial date range and won't fetch new data on plot interactions.",
+              "name": "dark",
+              "description": "When true, forces dark mode styles regardless of system preference. Useful when placing the component on a dark background.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "bearer-token",
-              "description": "The token to be used for authentication with remote servers.\nThe component provides the header \"Authorization: Bearer\" (the request header and authentication scheme).\nThe property's value will be inserted after \"Bearer\" (the authentication scheme).",
+              "name": "href",
+              "description": "The href for topic tags. If provided, the tag will be rendered as a link.",
               "value": { "type": "string | undefined" }
             }
           ],
-          "events": [
+          "slots": [
+            { "name": "", "description": "The tag label text." },
             {
-              "name": "terra-date-range-change",
-              "type": "CustomEvent",
-              "description": "Emitted whenever the date range is modified"
-            },
+              "name": "icon",
+              "description": "Optional icon slot for content tags (overrides icon prop)."
+            }
+          ],
+          "events": [
             {
-              "name": "terra-time-series-data-change",
-              "description": "Emitted whenever time series data has been fetched from Giovanni"
+              "name": "terra-click",
+              "description": "Emitted when a topic tag is clicked (unless href is provided)."
             }
           ],
           "js": {
             "properties": [
               {
-                "name": "variableEntryId",
-                "description": "a variable entry ID (ex: GPM_3IMERGHH_06_precipitationCal)",
-                "type": "string | undefined"
-              },
-              {
-                "name": "collection",
-                "description": "a collection entry id (ex: GPM_3IMERGHH_06)\nonly required if you don't include a variableEntryId",
-                "type": "string | undefined"
-              },
-              {
-                "name": "variable",
-                "description": "a variable short name to plot (ex: precipitationCal)\nonly required if you don't include a variableEntryId",
-                "type": "string | undefined"
-              },
-              {
-                "name": "startDate",
-                "description": "The start date for the time series plot. (ex: 2021-01-01)",
-                "type": "string | undefined"
+                "name": "variant",
+                "description": "The tag variant. Determines the styling and behavior.",
+                "type": "'content' | 'topic' | 'urgent'"
               },
               {
-                "name": "endDate",
-                "description": "The end date for the time series plot. (ex: 2021-01-01)",
-                "type": "string | undefined"
+                "name": "size",
+                "description": "The size of the tag.",
+                "type": "'small' | 'medium' | 'large'"
               },
               {
-                "name": "location",
-                "description": "The point location in \"lat,lon\" format.\nOr the bounding box in \"west,south,east,north\" format.",
+                "name": "icon",
+                "description": "The icon name for content tags. Used with the default icon library.",
                 "type": "string | undefined"
               },
-              { "name": "showCitation", "type": "boolean" },
               {
-                "name": "applicationCitation",
-                "description": "if you include an application citation, it will be displayed in the citation panel alongside the dataset citation",
-                "type": "string | undefined"
+                "name": "iconLibrary",
+                "description": "The icon library to use for content tags.",
+                "type": "'default' | 'heroicons' | string"
               },
               {
-                "name": "disableAutoFetch",
-                "description": "When true, disables automatic data fetching when the user zooms, pans, or otherwise interacts with the plot.\nWhen disabled, the plot will only show the data for the initial date range and won't fetch new data on plot interactions.",
+                "name": "stack",
+                "description": "When true, tags will stack vertically instead of sitting side by side.",
                 "type": "boolean"
               },
               {
-                "name": "bearerToken",
-                "description": "The token to be used for authentication with remote servers.\nThe component provides the header \"Authorization: Bearer\" (the request header and authentication scheme).\nThe property's value will be inserted after \"Bearer\" (the authentication scheme).",
-                "type": "string | undefined"
-              },
-              { "name": "plot", "type": "TerraPlot" },
-              { "name": "plotToolbar", "type": "TerraPlotToolbar" },
-              { "name": "catalogVariable", "type": "Variable" },
-              {
-                "name": "showDataPointWarning",
-                "description": "if true, we'll show a warning to the user about them requesting a large number of data points",
+                "name": "dark",
+                "description": "When true, forces dark mode styles regardless of system preference. Useful when placing the component on a dark background.",
                 "type": "boolean"
               },
               {
-                "name": "estimatedDataPoints",
-                "description": "stores the estimated",
-                "type": "number"
-              },
-              { "name": "_authController" },
-              { "name": "_fetchVariableTask" }
+                "name": "href",
+                "description": "The href for topic tags. If provided, the tag will be rendered as a link.",
+                "type": "string | undefined"
+              }
             ],
             "events": [
               {
-                "name": "terra-date-range-change",
-                "type": "CustomEvent",
-                "description": "Emitted whenever the date range is modified"
-              },
-              {
-                "name": "terra-time-series-data-change",
-                "description": "Emitted whenever time series data has been fetched from Giovanni"
+                "name": "terra-click",
+                "description": "Emitted when a topic tag is clicked (unless href is provided)."
               }
             ]
           }
         },
         {
-          "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.",
+          "name": "terra-textarea",
+          "description": "A textarea component with consistent styling across the design system.\n---\n\n\n### **Events:**\n - **terra-input** - Emitted when the textarea receives input.\n- **terra-change** - Emitted when an alteration to the control's value is committed by the user.\n- **terra-focus** - Emitted when the textarea gains focus.\n- **terra-blur** - Emitted when the textarea loses focus.\n- **terra-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - 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 - **help-text** - Text that describes how to use the textarea. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **textarea** - The internal textarea control.\n- **form-control-help-text** - The help text's wrapper.",
           "doc-url": "",
           "attributes": [
-            { "name": "title", "value": { "type": "string", "default": "''" } },
+            { "name": "name", "value": { "type": "string", "default": "''" } },
+            { "name": "value", "value": { "type": "string", "default": "''" } },
             {
-              "name": "name",
-              "description": "The name of the switch, submitted as a name/value pair with form data.",
+              "name": "placeholder",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "value",
-              "description": "The current value of the switch, submitted as a name/value pair with form data.",
-              "value": { "type": "string" }
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "size",
-              "description": "The switch's size.",
-              "value": {
-                "type": "'small' | 'medium' | 'large'",
-                "default": "'medium'"
-              }
+              "name": "readonly",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "disabled",
-              "description": "Disables the switch.",
+              "name": "required",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "checked",
-              "description": "Draws the switch in a checked state.",
+              "name": "autocomplete",
+              "value": { "type": "string | undefined" }
+            },
+            { "name": "minlength", "value": { "type": "number | undefined" } },
+            { "name": "maxlength", "value": { "type": "number | undefined" } },
+            { "name": "rows", "value": { "type": "number | undefined" } },
+            { "name": "cols", "value": { "type": "number | undefined" } },
+            { "name": "label", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "hide-label",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "form",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "name": "help-text",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "required",
-              "description": "Makes the switch a required field.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "resize",
+              "value": {
+                "type": "'none' | 'both' | 'horizontal' | 'vertical'",
+                "default": "'vertical'"
+              }
             },
             {
-              "name": "help-text",
-              "description": "The switch's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "name": "form",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
               "value": { "type": "string", "default": "''" }
             }
           ],
           "slots": [
-            { "name": "", "description": "The switch's label." },
             {
               "name": "help-text",
-              "description": "Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute."
+              "description": "Text that describes how to use the textarea. Alternatively, you can use the `help-text` attribute."
             }
           ],
           "events": [
             {
-              "name": "terra-blur",
-              "description": "Emitted when the control loses focus."
+              "name": "terra-input",
+              "description": "Emitted when the textarea receives input."
             },
             {
               "name": "terra-change",
-              "description": "Emitted when the control's checked state changes."
+              "description": "Emitted when an alteration to the control's value is committed by the user."
             },
             {
-              "name": "terra-input",
-              "description": "Emitted when the control receives input."
+              "name": "terra-focus",
+              "description": "Emitted when the textarea gains focus."
             },
             {
-              "name": "terra-focus",
-              "description": "Emitted when the control gains focus."
+              "name": "terra-blur",
+              "description": "Emitted when the textarea loses focus."
             },
             {
               "name": "terra-invalid",
@@ -5408,53 +5062,36 @@
           ],
           "js": {
             "properties": [
-              { "name": "input", "type": "HTMLInputElement" },
-              { "name": "title", "type": "string" },
-              {
-                "name": "name",
-                "description": "The name of the switch, submitted as a name/value pair with form data.",
-                "type": "string"
-              },
-              {
-                "name": "value",
-                "description": "The current value of the switch, submitted as a name/value pair with form data.",
-                "type": "string"
-              },
-              {
-                "name": "size",
-                "description": "The switch's size.",
-                "type": "'small' | 'medium' | 'large'"
-              },
-              {
-                "name": "disabled",
-                "description": "Disables the switch.",
-                "type": "boolean"
-              },
+              { "name": "textarea", "type": "HTMLTextAreaElement" },
+              { "name": "hasFocus", "type": "boolean" },
+              { "name": "name", "type": "string" },
+              { "name": "value", "type": "string" },
+              { "name": "placeholder", "type": "string" },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "readonly", "type": "boolean" },
+              { "name": "required", "type": "boolean" },
+              { "name": "autocomplete", "type": "string | undefined" },
+              { "name": "minlength", "type": "number | undefined" },
+              { "name": "maxlength", "type": "number | undefined" },
+              { "name": "rows", "type": "number | undefined" },
+              { "name": "cols", "type": "number | undefined" },
+              { "name": "label", "type": "string" },
+              { "name": "hideLabel", "type": "boolean" },
+              { "name": "helpText", "type": "string" },
               {
-                "name": "checked",
-                "description": "Draws the switch in a checked state.",
-                "type": "boolean"
+                "name": "resize",
+                "type": "'none' | 'both' | 'horizontal' | 'vertical'"
               },
               {
-                "name": "defaultChecked",
+                "name": "defaultValue",
                 "description": "The default value of the form control. Primarily used for resetting the form control.",
-                "type": "boolean"
+                "type": "string"
               },
               {
                 "name": "form",
                 "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
                 "type": "string"
               },
-              {
-                "name": "required",
-                "description": "Makes the switch a required field.",
-                "type": "boolean"
-              },
-              {
-                "name": "helpText",
-                "description": "The switch's help text. If you need to display HTML, use the `help-text` slot instead.",
-                "type": "string"
-              },
               {
                 "name": "validity",
                 "description": "Gets the validity state object"
@@ -5466,20 +5103,20 @@
             ],
             "events": [
               {
-                "name": "terra-blur",
-                "description": "Emitted when the control loses focus."
+                "name": "terra-input",
+                "description": "Emitted when the textarea receives input."
               },
               {
                 "name": "terra-change",
-                "description": "Emitted when the control's checked state changes."
+                "description": "Emitted when an alteration to the control's value is committed by the user."
               },
               {
-                "name": "terra-input",
-                "description": "Emitted when the control receives input."
+                "name": "terra-focus",
+                "description": "Emitted when the textarea gains focus."
               },
               {
-                "name": "terra-focus",
-                "description": "Emitted when the control gains focus."
+                "name": "terra-blur",
+                "description": "Emitted when the textarea loses focus."
               },
               {
                 "name": "terra-invalid",
@@ -5488,6 +5125,65 @@
             ]
           }
         },
+        {
+          "name": "terra-time-average-map",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            { "name": "collection", "value": { "type": "string | undefined" } },
+            { "name": "variable", "value": { "type": "string | undefined" } },
+            { "name": "start-date", "value": { "type": "string | undefined" } },
+            { "name": "end-date", "value": { "type": "string | undefined" } },
+            { "name": "location", "value": { "type": "string | undefined" } },
+            { "name": "bearer-token", "value": { "type": "string" } },
+            {
+              "name": "long_name",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "color-map-name",
+              "value": { "type": "string", "default": "'viridis'" }
+            },
+            { "name": "opacity", "value": { "type": "number", "default": "1" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "collection", "type": "string | undefined" },
+              { "name": "variable", "type": "string | undefined" },
+              { "name": "startDate", "type": "string | undefined" },
+              { "name": "endDate", "type": "string | undefined" },
+              { "name": "location", "type": "string | undefined" },
+              { "name": "bearerToken", "type": "string" },
+              { "name": "long_name", "type": "string" },
+              { "name": "colorMapName", "type": "string" },
+              { "name": "opacity", "type": "number" },
+              { "name": "catalogVariable", "type": "Variable" },
+              { "name": "pixelValue", "type": "string" },
+              { "name": "pixelCoordinates", "type": "string" },
+              { "name": "metadata", "type": "{ [key: string]: string }" },
+              { "name": "toggleState", "type": "boolean" },
+              { "name": "minimized", "type": "boolean" },
+              { "name": "noDataValue", "type": "number" },
+              { "name": "min", "type": "string" },
+              { "name": "max", "type": "string" },
+              {
+                "name": "legendValues",
+                "type": "{ value: string; rgb: string }[]"
+              },
+              { "name": "_authController" },
+              { "name": "colormaps", "type": "array" },
+              { "name": "plotData", "type": "object" },
+              { "name": "layout", "type": "object" },
+              { "name": "harmonyJobId", "type": "string | undefined" },
+              {
+                "name": "_fetchVariableTask",
+                "description": "anytime the collection or variable changes, we'll fetch the variable from the catalog to get all of it's metadata"
+              }
+            ],
+            "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.",
@@ -5534,54 +5230,197 @@
               "description": "Emitted after the toast opens and all animations are complete."
             },
             {
-              "name": "terra-hide",
-              "description": "Emitted when the toast closes."
+              "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",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variable-entry-id",
+              "description": "a variable entry ID (ex: GPM_3IMERGHH_06_precipitationCal)",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "collection",
+              "description": "a collection entry id (ex: GPM_3IMERGHH_06)\nonly required if you don't include a variableEntryId",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "variable",
+              "description": "a variable short name to plot (ex: precipitationCal)\nonly required if you don't include a variableEntryId",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "start-date",
+              "description": "The start date for the time series plot. (ex: 2021-01-01)",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "end-date",
+              "description": "The end date for the time series plot. (ex: 2021-01-01)",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "location",
+              "description": "The point location in \"lat,lon\" format.\nOr the bounding box in \"west,south,east,north\" format.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "show-citation",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "application-citation",
+              "description": "if you include an application citation, it will be displayed in the citation panel alongside the dataset citation",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "disable-auto-fetch",
+              "description": "When true, disables automatic data fetching when the user zooms, pans, or otherwise interacts with the plot.\nWhen disabled, the plot will only show the data for the initial date range and won't fetch new data on plot interactions.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "bearer-token",
+              "description": "The token to be used for authentication with remote servers.\nThe component provides the header \"Authorization: Bearer\" (the request header and authentication scheme).\nThe property's value will be inserted after \"Bearer\" (the authentication scheme).",
+              "value": { "type": "string | undefined" }
+            }
+          ],
+          "events": [
+            {
+              "name": "terra-date-range-change",
+              "type": "CustomEvent",
+              "description": "Emitted whenever the date range is modified"
             },
             {
-              "name": "terra-after-hide",
-              "description": "Emitted after the toast closes and all animations are complete."
+              "name": "terra-time-series-data-change",
+              "description": "Emitted whenever time series data has been fetched from Giovanni"
             }
           ],
           "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": "variableEntryId",
+                "description": "a variable entry ID (ex: GPM_3IMERGHH_06_precipitationCal)",
+                "type": "string | undefined"
               },
               {
-                "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": "collection",
+                "description": "a collection entry id (ex: GPM_3IMERGHH_06)\nonly required if you don't include a variableEntryId",
+                "type": "string | undefined"
               },
               {
-                "name": "closable",
-                "description": "Enables a close button that allows the user to dismiss the toast.",
+                "name": "variable",
+                "description": "a variable short name to plot (ex: precipitationCal)\nonly required if you don't include a variableEntryId",
+                "type": "string | undefined"
+              },
+              {
+                "name": "startDate",
+                "description": "The start date for the time series plot. (ex: 2021-01-01)",
+                "type": "string | undefined"
+              },
+              {
+                "name": "endDate",
+                "description": "The end date for the time series plot. (ex: 2021-01-01)",
+                "type": "string | undefined"
+              },
+              {
+                "name": "location",
+                "description": "The point location in \"lat,lon\" format.\nOr the bounding box in \"west,south,east,north\" format.",
+                "type": "string | undefined"
+              },
+              { "name": "showCitation", "type": "boolean" },
+              {
+                "name": "applicationCitation",
+                "description": "if you include an application citation, it will be displayed in the citation panel alongside the dataset citation",
+                "type": "string | undefined"
+              },
+              {
+                "name": "disableAutoFetch",
+                "description": "When true, disables automatic data fetching when the user zooms, pans, or otherwise interacts with the plot.\nWhen disabled, the plot will only show the data for the initial date range and won't fetch new data on plot interactions.",
                 "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": "bearerToken",
+                "description": "The token to be used for authentication with remote servers.\nThe component provides the header \"Authorization: Bearer\" (the request header and authentication scheme).\nThe property's value will be inserted after \"Bearer\" (the authentication scheme).",
+                "type": "string | undefined"
+              },
+              { "name": "plot", "type": "TerraPlot" },
+              { "name": "plotToolbar", "type": "TerraPlotToolbar" },
+              { "name": "catalogVariable", "type": "Variable" },
               {
-                "name": "terra-show",
-                "description": "Emitted when the toast opens."
+                "name": "showDataPointWarning",
+                "description": "if true, we'll show a warning to the user about them requesting a large number of data points",
+                "type": "boolean"
               },
               {
-                "name": "terra-after-show",
-                "description": "Emitted after the toast opens and all animations are complete."
+                "name": "estimatedDataPoints",
+                "description": "stores the estimated",
+                "type": "number"
               },
+              { "name": "_authController" },
+              { "name": "_fetchVariableTask" }
+            ],
+            "events": [
               {
-                "name": "terra-hide",
-                "description": "Emitted when the toast closes."
+                "name": "terra-date-range-change",
+                "type": "CustomEvent",
+                "description": "Emitted whenever the date range is modified"
               },
               {
-                "name": "terra-after-hide",
-                "description": "Emitted after the toast closes and all animations are complete."
+                "name": "terra-time-series-data-change",
+                "description": "Emitted whenever time series data has been fetched from Giovanni"
               }
             ]
           }
@@ -5746,6 +5585,167 @@
             ]
           }
         },
+        {
+          "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.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "title", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "name",
+              "description": "The name of the switch, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The current value of the switch, submitted as a name/value pair with form data.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "size",
+              "description": "The switch's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the switch.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "checked",
+              "description": "Draws the switch in a checked state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "form",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "required",
+              "description": "Makes the switch a required field.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "help-text",
+              "description": "The switch's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The switch's label." },
+            {
+              "name": "help-text",
+              "description": "Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute."
+            }
+          ],
+          "events": [
+            {
+              "name": "terra-blur",
+              "description": "Emitted when the control loses focus."
+            },
+            {
+              "name": "terra-change",
+              "description": "Emitted when the control's checked state changes."
+            },
+            {
+              "name": "terra-input",
+              "description": "Emitted when the control receives input."
+            },
+            {
+              "name": "terra-focus",
+              "description": "Emitted when the control gains focus."
+            },
+            {
+              "name": "terra-invalid",
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "input", "type": "HTMLInputElement" },
+              { "name": "title", "type": "string" },
+              {
+                "name": "name",
+                "description": "The name of the switch, submitted as a name/value pair with form data.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The current value of the switch, submitted as a name/value pair with form data.",
+                "type": "string"
+              },
+              {
+                "name": "size",
+                "description": "The switch's size.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the switch.",
+                "type": "boolean"
+              },
+              {
+                "name": "checked",
+                "description": "Draws the switch in a checked state.",
+                "type": "boolean"
+              },
+              {
+                "name": "defaultChecked",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "boolean"
+              },
+              {
+                "name": "form",
+                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+                "type": "string"
+              },
+              {
+                "name": "required",
+                "description": "Makes the switch a required field.",
+                "type": "boolean"
+              },
+              {
+                "name": "helpText",
+                "description": "The switch's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "validity",
+                "description": "Gets the validity state object"
+              },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message"
+              }
+            ],
+            "events": [
+              {
+                "name": "terra-blur",
+                "description": "Emitted when the control loses focus."
+              },
+              {
+                "name": "terra-change",
+                "description": "Emitted when the control's checked state changes."
+              },
+              {
+                "name": "terra-input",
+                "description": "Emitted when the control receives input."
+              },
+              {
+                "name": "terra-focus",
+                "description": "Emitted when the control gains focus."
+              },
+              {
+                "name": "terra-invalid",
+                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+              }
+            ]
+          }
+        },
         {
           "name": "terra-variable-combobox",
           "description": "Fuzzy-search for dataset variables in combobox with list autocomplete.\n---\n\n\n### **Events:**\n - **terra-combobox-change** - Emitted when an option is selected.\n\n### **Methods:**\n - **valueChanged(oldValue: _string_, newValue: _string_)** - This component's value is read by other components.\nInternally, the variable metdata has slight differences that require adapting.\n\n### **CSS Properties:**\n - **--host-height** - The height of the host element. _(default: undefined)_\n- **--help-height** - The height of the search help element. _(default: undefined)_\n- **--label-height** - The height of the input's label element. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - A `search` element, the component's base.\n- **combobox** - An `input` element used for searching.\n- **button** - A `button` used for toggling the listbox's visibility.\n- **listbox** - A `ul` that holds the clickable options.",