@nasa-terra/components 0.0.172 → 0.0.174

package/dist/types/vue/index.d.ts

@@ -1,11 +1,12 @@
 import type { DefineComponent } from "vue";
 
 import type { TerraAccordion } from "../../components/accordion/accordion.component.js";
-import type { TerraAlert } from "../../components/alert/alert.component.js";
 import type { TerraAvatar } from "../../components/avatar/avatar.component.js";
+import type { TerraAlert } from "../../components/alert/alert.component.js";
 import type { TerraBadge } from "../../components/badge/badge.component.js";
-import type { TerraBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
+import type { TerraBanner } from "../../components/banner/banner.component.js";
 import type { TerraBreadcrumbs } from "../../components/breadcrumbs/breadcrumbs.component.js";
+import type { TerraBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
 import type { TerraBrowseVariables } from "../../components/browse-variables/browse-variables.component.js";
 import type { TerraButton } from "../../components/button/button.component.js";
 import type { TerraButtonGroup } from "../../components/button-group/button-group.component.js";
@@ -76,6 +77,22 @@ type TerraAccordionProps = {
   onTerraAccordionToggle?: (e: CustomEvent<never>) => void;
 };
 
+type TerraAvatarProps = {
+  /** The image source to use for the avatar. */
+  image?: TerraAvatar["image"];
+  /** A label to use to describe the avatar to assistive devices. */
+  label?: TerraAvatar["label"];
+  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
+  initials?: TerraAvatar["initials"];
+  /** Indicates how the browser should load the image. */
+  loading?: TerraAvatar["loading"];
+  /** The shape of the avatar. */
+  shape?: TerraAvatar["shape"];
+
+  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
+  onTerraError?: (e: CustomEvent<never>) => void;
+};
+
 type TerraAlertProps = {
   /** Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can
 use the `show()` and `hide()` methods and this attribute will reflect the alert's open state. */
@@ -108,22 +125,6 @@ Typically used to indicate the remaining time before a whole app refresh. */
   onTerraAfterHide?: (e: CustomEvent<never>) => void;
 };
 
-type TerraAvatarProps = {
-  /** The image source to use for the avatar. */
-  image?: TerraAvatar["image"];
-  /** A label to use to describe the avatar to assistive devices. */
-  label?: TerraAvatar["label"];
-  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
-  initials?: TerraAvatar["initials"];
-  /** Indicates how the browser should load the image. */
-  loading?: TerraAvatar["loading"];
-  /** The shape of the avatar. */
-  shape?: TerraAvatar["shape"];
-
-  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
-  onTerraError?: (e: CustomEvent<never>) => void;
-};
-
 type TerraBadgeProps = {
   /** The badge's theme variant. */
   variant?: TerraBadge["variant"];
@@ -133,12 +134,26 @@ type TerraBadgeProps = {
   pulse?: TerraBadge["pulse"];
 };
 
-type TerraBreadcrumbProps = {
-  /** The URL the breadcrumb points to. When omitted, the breadcrumb is rendered as plain text. */
-  href?: TerraBreadcrumb["href"];
-  /** Indicates that this breadcrumb represents the current page.
-When set, `aria-current="page"` will be applied to the underlying element. */
-  current?: TerraBreadcrumb["current"];
+type TerraBannerProps = {
+  /** Indicates whether or not the banner is open. You can toggle this attribute to show and hide the banner, or you can
+use the `show()` and `hide()` methods and this attribute will reflect the banner's open state. */
+  open?: TerraBanner["open"];
+  /** Enables a close button that allows the user to dismiss the banner. */
+  closable?: TerraBanner["closable"];
+  /** The banner's theme variant. */
+  variant?: TerraBanner["variant"];
+  /**  */
+  sticky?: TerraBanner["sticky"];
+  /**  */
+  base?: TerraBanner["base"];
+  /** Emitted when the banner opens. */
+  onTerraShow?: (e: CustomEvent<never>) => void;
+  /** Emitted after the banner opens and all animations are complete. */
+  onTerraAfterShow?: (e: CustomEvent<never>) => void;
+  /** Emitted when the banner closes. */
+  onTerraHide?: (e: CustomEvent<never>) => void;
+  /** Emitted after the banner closes and all animations are complete. */
+  onTerraAfterHide?: (e: CustomEvent<never>) => void;
 };
 
 type TerraBreadcrumbsProps = {
@@ -148,6 +163,14 @@ type TerraBreadcrumbsProps = {
   theme?: TerraBreadcrumbs["theme"];
 };
 
+type TerraBreadcrumbProps = {
+  /** The URL the breadcrumb points to. When omitted, the breadcrumb is rendered as plain text. */
+  href?: TerraBreadcrumb["href"];
+  /** Indicates that this breadcrumb represents the current page.
+When set, `aria-current="page"` will be applied to the underlying element. */
+  current?: TerraBreadcrumb["current"];
+};
+
 type TerraBrowseVariablesProps = {
   /** Allows the user to switch the catalog between different providers
 TODO: add support for CMR catalog and make it the default */
@@ -1928,6 +1951,28 @@ export type CustomElements = {
    */
   "terra-accordion": DefineComponent<TerraAccordionProps>;
 
+  /**
+   * Avatars are used to represent a person or object.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **terra-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
+   *
+   * ### **Slots:**
+   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<terra-icon>`.
+   *
+   * ### **CSS Properties:**
+   *  - **--size** - The size of the avatar. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **icon** - The container that wraps the avatar's icon.
+   * - **initials** - The container that wraps the avatar's initials.
+   * - **image** - The avatar image. Only shown when the `image` attribute is set.
+   */
+  "terra-avatar": DefineComponent<TerraAvatarProps>;
+
   /**
    * Alerts are used to display important messages inline or as toast notifications.
    * ---
@@ -1957,76 +2002,79 @@ export type CustomElements = {
   "terra-alert": DefineComponent<TerraAlertProps>;
 
   /**
-   * Avatars are used to represent a person or object.
+   * Badges are used to draw attention and display statuses or counts.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **terra-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
-   *
    * ### **Slots:**
-   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<terra-icon>`.
-   *
-   * ### **CSS Properties:**
-   *  - **--size** - The size of the avatar. _(default: undefined)_
+   *  - _default_ - The badge's content.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **icon** - The container that wraps the avatar's icon.
-   * - **initials** - The container that wraps the avatar's initials.
-   * - **image** - The avatar image. Only shown when the `image` attribute is set.
    */
-  "terra-avatar": DefineComponent<TerraAvatarProps>;
+  "terra-badge": DefineComponent<TerraBadgeProps>;
 
   /**
-   * Badges are used to draw attention and display statuses or counts.
+   * Banners are used to display important messages on top of the header.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **terra-show** - Emitted when the banner opens.
+   * - **terra-after-show** - Emitted after the banner opens and all animations are complete.
+   * - **terra-hide** - Emitted when the banner closes.
+   * - **terra-after-hide** - Emitted after the banner closes and all animations are complete.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the banner.
+   * - **hide()** - Hides the banner
+   *
    * ### **Slots:**
-   *  - _default_ - The badge's content.
+   *  - _default_ - The banner's main content.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
+   * - **icon** - The container that wraps the optional icon.
+   * - **message** - The container that wraps the banner's main content.
    */
-  "terra-badge": DefineComponent<TerraBadgeProps>;
+  "terra-banner": DefineComponent<TerraBannerProps>;
 
   /**
-   * A single breadcrumb item used inside `terra-breadcrumbs`.
+   * A collection of breadcrumb items that shows the current page's location in the site hierarchy.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - The default slot.
+   *  - _default_ - The breadcrumb items. Typically `<terra-breadcrumb>` elements.
    *
    * ### **CSS Properties:**
-   *  - **--terra-breadcrumb-color** - The text color of inactive breadcrumbs. _(default: undefined)_
-   * - **--terra-breadcrumb-color-current** - The text color of the current (last) breadcrumb. _(default: undefined)_
-   * - **--terra-breadcrumb-color-visited** - The text color of visited breadcrumb links. _(default: undefined)_
+   *  - **--terra-breadcrumbs-gap** - The space between breadcrumbs. _(default: undefined)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **link** - The breadcrumb link element.
-   * - **label** - The breadcrumb label element when not a link.
+   * - **nav** - The navigation container.
    */
-  "terra-breadcrumb": DefineComponent<TerraBreadcrumbProps>;
+  "terra-breadcrumbs": DefineComponent<TerraBreadcrumbsProps>;
 
   /**
-   * A collection of breadcrumb items that shows the current page's location in the site hierarchy.
+   * A single breadcrumb item used inside `terra-breadcrumbs`.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - The breadcrumb items. Typically `<terra-breadcrumb>` elements.
+   *  - _default_ - The default slot.
    *
    * ### **CSS Properties:**
-   *  - **--terra-breadcrumbs-gap** - The space between breadcrumbs. _(default: undefined)_
+   *  - **--terra-breadcrumb-color** - The text color of inactive breadcrumbs. _(default: undefined)_
+   * - **--terra-breadcrumb-color-current** - The text color of the current (last) breadcrumb. _(default: undefined)_
+   * - **--terra-breadcrumb-color-visited** - The text color of visited breadcrumb links. _(default: undefined)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **nav** - The navigation container.
+   * - **link** - The breadcrumb link element.
+   * - **label** - The breadcrumb label element when not a link.
    */
-  "terra-breadcrumbs": DefineComponent<TerraBreadcrumbsProps>;
+  "terra-breadcrumb": DefineComponent<TerraBreadcrumbProps>;
 
   /**
    * Browse through the NASA CMR or Giovanni catalogs.

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

@@ -2,6 +2,29 @@
   "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
   "version": 1.1,
   "tags": [
+    {
+      "name": "terra-accordion",
+      "description": "A collapsible content panel for showing and hiding content.\n---\n\n\n### **Events:**\n - **terra-accordion-toggle** - emitted when the accordion opens or closes\n\n### **Slots:**\n - _default_ - The default slot for accordion content.\n- **summary** - The summary/header for the accordion (optional, overrides summary property)",
+      "attributes": [
+        {
+          "name": "summary",
+          "description": "The summary/header for the accordion. Use the property for simple text, or the slot for custom content.",
+          "values": []
+        },
+        {
+          "name": "open",
+          "description": "Whether the accordion is open or not. This property is reflected as an attribute and can be controlled programmatically or by user interaction.",
+          "values": []
+        },
+        { "name": "showArrow", "values": [] }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://terra-ui.netlify.app/components/accordion"
+        }
+      ]
+    },
     {
       "name": "terra-alert",
       "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **terra-show** - Emitted when the alert opens.\n- **terra-after-show** - Emitted after the alert opens and all animations are complete.\n- **terra-hide** - Emitted when the alert closes.\n- **terra-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's main content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **message** - The container that wraps the alert's main content.",
@@ -51,29 +74,6 @@
         }
       ]
     },
-    {
-      "name": "terra-accordion",
-      "description": "A collapsible content panel for showing and hiding content.\n---\n\n\n### **Events:**\n - **terra-accordion-toggle** - emitted when the accordion opens or closes\n\n### **Slots:**\n - _default_ - The default slot for accordion content.\n- **summary** - The summary/header for the accordion (optional, overrides summary property)",
-      "attributes": [
-        {
-          "name": "summary",
-          "description": "The summary/header for the accordion. Use the property for simple text, or the slot for custom content.",
-          "values": []
-        },
-        {
-          "name": "open",
-          "description": "Whether the accordion is open or not. This property is reflected as an attribute and can be controlled programmatically or by user interaction.",
-          "values": []
-        },
-        { "name": "showArrow", "values": [] }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/accordion"
-        }
-      ]
-    },
     {
       "name": "terra-avatar",
       "description": "Avatars are used to represent a person or object.\n---\n\n\n### **Events:**\n - **terra-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<terra-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
@@ -151,46 +151,56 @@
       ]
     },
     {
-      "name": "terra-breadcrumb",
-      "description": "A single breadcrumb item used inside `terra-breadcrumbs`.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--terra-breadcrumb-color** - The text color of inactive breadcrumbs. _(default: undefined)_\n- **--terra-breadcrumb-color-current** - The text color of the current (last) breadcrumb. _(default: undefined)_\n- **--terra-breadcrumb-color-visited** - The text color of visited breadcrumb links. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **link** - The breadcrumb link element.\n- **label** - The breadcrumb label element when not a link.",
+      "name": "terra-banner",
+      "description": "Banners are used to display important messages on top of the header.\n---\n\n\n### **Events:**\n - **terra-show** - Emitted when the banner opens.\n- **terra-after-show** - Emitted after the banner opens and all animations are complete.\n- **terra-hide** - Emitted when the banner closes.\n- **terra-after-hide** - Emitted after the banner closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the banner.\n- **hide()** - Hides the banner\n\n### **Slots:**\n - _default_ - The banner's main content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **message** - The container that wraps the banner's main content.",
       "attributes": [
         {
-          "name": "href",
-          "description": "The URL the breadcrumb points to. When omitted, the breadcrumb is rendered as plain text.",
+          "name": "open",
+          "description": "Indicates whether or not the banner is open. You can toggle this attribute to show and hide the banner, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the banner's open state.",
           "values": []
         },
         {
-          "name": "current",
-          "description": "Indicates that this breadcrumb represents the current page.\nWhen set, `aria-current=\"page\"` will be applied to the underlying element.",
+          "name": "closable",
+          "description": "Enables a close button that allows the user to dismiss the banner.",
           "values": []
-        }
+        },
+        {
+          "name": "variant",
+          "description": "The banner's theme variant.",
+          "values": [
+            { "name": "primary" },
+            { "name": "neutral" },
+            { "name": "danger" }
+          ]
+        },
+        { "name": "sticky", "values": [] }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/breadcrumb"
+          "url": "https://terra-ui.netlify.app/components/banner"
         }
       ]
     },
     {
-      "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.",
+      "name": "terra-breadcrumb",
+      "description": "A single breadcrumb item used inside `terra-breadcrumbs`.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--terra-breadcrumb-color** - The text color of inactive breadcrumbs. _(default: undefined)_\n- **--terra-breadcrumb-color-current** - The text color of the current (last) breadcrumb. _(default: undefined)_\n- **--terra-breadcrumb-color-visited** - The text color of visited breadcrumb links. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **link** - The breadcrumb link element.\n- **label** - The breadcrumb label element when not a link.",
       "attributes": [
         {
-          "name": "aria-label",
-          "description": "Accessible label for the breadcrumb navigation.",
+          "name": "href",
+          "description": "The URL the breadcrumb points to. When omitted, the breadcrumb is rendered as plain text.",
           "values": []
         },
         {
-          "name": "theme",
-          "description": "Color theme of the breadcrumbs, matching the Horizon Design System.",
-          "values": [{ "name": "light" }, { "name": "dark" }]
+          "name": "current",
+          "description": "Indicates that this breadcrumb represents the current page.\nWhen set, `aria-current=\"page\"` will be applied to the underlying element.",
+          "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://terra-ui.netlify.app/components/breadcrumbs"
+          "url": "https://terra-ui.netlify.app/components/breadcrumb"
         }
       ]
     },
@@ -212,6 +222,28 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "aria-label",
+          "description": "Accessible label for the breadcrumb navigation.",
+          "values": []
+        },
+        {
+          "name": "theme",
+          "description": "Color theme of the breadcrumbs, matching the Horizon Design System.",
+          "values": [{ "name": "light" }, { "name": "dark" }]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://terra-ui.netlify.app/components/breadcrumbs"
+        }
+      ]
+    },
     {
       "name": "terra-button",
       "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **terra-blur** - emitted when the button is blurred\n- **terra-focus** - emitted when the button is focused\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.",