@nasa-terra/components 0.0.168 → 0.0.169

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

@@ -1,22 +1,22 @@
 import type { DefineComponent } from "vue";
 
 import type { TerraAccordion } from "../../components/accordion/accordion.component.js";
-import type { TerraAvatar } from "../../components/avatar/avatar.component.js";
 import type { TerraAlert } from "../../components/alert/alert.component.js";
+import type { TerraAvatar } from "../../components/avatar/avatar.component.js";
 import type { TerraBadge } from "../../components/badge/badge.component.js";
 import type { TerraBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
 import type { TerraBreadcrumbs } from "../../components/breadcrumbs/breadcrumbs.component.js";
-import type { TerraButton } from "../../components/button/button.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";
 import type { TerraCaption } from "../../components/caption/caption.component.js";
 import type { TerraCard } from "../../components/card/card.component.js";
 import type { TerraCheckbox } from "../../components/checkbox/checkbox.component.js";
 import type { TerraChip } from "../../components/chip/chip.component.js";
+import type { TerraCombobox } from "../../components/combobox/combobox.component.js";
 import type { TerraDataAccess } from "../../components/data-access/data-access.component.js";
-import type { TerraDataRods } from "../../components/data-rods/data-rods.component.js";
 import type { TerraDataGrid } from "../../components/data-grid/data-grid.component.js";
-import type { TerraCombobox } from "../../components/combobox/combobox.component.js";
+import type { TerraDataRods } from "../../components/data-rods/data-rods.component.js";
 import type { TerraDataSubsetter } from "../../components/data-subsetter/data-subsetter.component.js";
 import type { TerraDataSubsetterHistory } from "../../components/data-subsetter-history/data-subsetter-history.component.js";
 import type { TerraDatePicker } from "../../components/date-picker/date-picker.component.js";
@@ -51,8 +51,8 @@ import type { TerraSpatialPicker } from "../../components/spatial-picker/spatial
 import type { TerraStatusIndicator } from "../../components/status-indicator/status-indicator.component.js";
 import type { TerraStepper } from "../../components/stepper/stepper.component.js";
 import type { TerraStepperStep } from "../../components/stepper-step/stepper-step.component.js";
-import type { TerraTabPanel } from "../../components/tab-panel/tab-panel.component.js";
 import type { TerraTab } from "../../components/tab/tab.component.js";
+import type { TerraTabPanel } from "../../components/tab-panel/tab-panel.component.js";
 import type { TerraTabs } from "../../components/tabs/tabs.component.js";
 import type { TerraTag } from "../../components/tag/tag.component.js";
 import type { TerraTextarea } from "../../components/textarea/textarea.component.js";
@@ -76,22 +76,6 @@ 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. */
@@ -124,6 +108,22 @@ 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"];
@@ -148,6 +148,22 @@ type TerraBreadcrumbsProps = {
   theme?: TerraBreadcrumbs["theme"];
 };
 
+type TerraBrowseVariablesProps = {
+  /** Allows the user to switch the catalog between different providers
+TODO: add support for CMR catalog and make it the default */
+  catalog?: TerraBrowseVariables["catalog"];
+  /**  */
+  "selected-variable-entry-ids"?: TerraBrowseVariables["selectedVariableEntryIds"];
+  /**  */
+  searchQuery?: TerraBrowseVariables["searchQuery"];
+  /**  */
+  selectedFacets?: TerraBrowseVariables["selectedFacets"];
+  /**  */
+  selectedVariables?: TerraBrowseVariables["selectedVariables"];
+  /**  */
+  showVariablesBrowse?: TerraBrowseVariables["showVariablesBrowse"];
+};
+
 type TerraButtonProps = {
   /**  */
   title?: TerraButton["title"];
@@ -221,22 +237,6 @@ value of this attribute must be an id of a form in the same document or shadow r
   onTerraFocus?: (e: CustomEvent<never>) => void;
 };
 
-type TerraBrowseVariablesProps = {
-  /** Allows the user to switch the catalog between different providers
-TODO: add support for CMR catalog and make it the default */
-  catalog?: TerraBrowseVariables["catalog"];
-  /**  */
-  "selected-variable-entry-ids"?: TerraBrowseVariables["selectedVariableEntryIds"];
-  /**  */
-  searchQuery?: TerraBrowseVariables["searchQuery"];
-  /**  */
-  selectedFacets?: TerraBrowseVariables["selectedFacets"];
-  /**  */
-  selectedVariables?: TerraBrowseVariables["selectedVariables"];
-  /**  */
-  showVariablesBrowse?: TerraBrowseVariables["showVariablesBrowse"];
-};
-
 type TerraButtonGroupProps = {
   /** A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive
 devices when interacting with the control and is strongly recommended. */
@@ -307,6 +307,32 @@ type TerraChipProps = {
   onTerraRemove?: (e: CustomEvent<never>) => void;
 };
 
+type TerraComboboxProps = {
+  /** Label the combobox with this. */
+  label?: TerraCombobox["label"];
+  /** name the combobox with this. */
+  name?: TerraCombobox["name"];
+  /** Set a placeholder for the combobox with this.
+Defaults to the label's value. */
+  placeholder?: TerraCombobox["placeholder"];
+  /** Hide the combobox's help text.
+When hidden, not rendered at all. */
+  "hide-help"?: TerraCombobox["hideHelp"];
+  /** Hide the combobox's label text.
+When hidden, still presents to screen readers. */
+  "hide-label"?: TerraCombobox["hideLabel"];
+  /** status of the content */
+  status?: TerraCombobox["status"];
+  /** content or data of the combobox. This could be of type string | GroupedListItem[] | ListItem[] | undefined */
+  content?: TerraCombobox["content"];
+  /**  */
+  isExpanded?: TerraCombobox["isExpanded"];
+  /**  */
+  query?: TerraCombobox["query"];
+  /**  */
+  searchResults?: TerraCombobox["searchResults"];
+};
+
 type TerraDataAccessProps = {
   /** Collection short name used to build the Collection Entry ID. */
   "short-name"?: TerraDataAccess["shortName"];
@@ -346,33 +372,6 @@ type TerraDataAccessProps = {
   spatialDropdownRef?: TerraDataAccess["spatialDropdownRef"];
 };
 
-type TerraDataRodsProps = {
-  /** a variable entry ID (ex: GPM_3IMERGHH_06_precipitationCal) */
-  "variable-entry-id"?: TerraDataRods["variableEntryId"];
-  /** a collection entry id (ex: GPM_3IMERGHH_06)
-only required if you don't include a variableEntryId */
-  collection?: TerraDataRods["collection"];
-  /** a variable short name to plot (ex: precipitationCal)
-only required if you don't include a variableEntryId */
-  variable?: TerraDataRods["variable"];
-  /** The start date for the time series plot. (ex: 2021-01-01) */
-  "start-date"?: TerraDataRods["startDate"];
-  /** The end date for the time series plot. (ex: 2021-01-01) */
-  "end-date"?: TerraDataRods["endDate"];
-  /** The point location in "lat,lon" format. */
-  location?: TerraDataRods["location"];
-  /** The token to be used for authentication with remote servers.
-The component provides the header "Authorization: Bearer" (the request header and authentication scheme).
-The property's value will be inserted after "Bearer" (the authentication scheme). */
-  "bearer-token"?: TerraDataRods["bearerToken"];
-  /**  */
-  catalogVariable?: TerraDataRods["catalogVariable"];
-  /**  */
-  _fetchVariableTask?: TerraDataRods["_fetchVariableTask"];
-  /**  */
-  variableBoundingBox?: TerraDataRods["variableBoundingBox"];
-};
-
 type TerraDataGridProps = {
   /** AG Grid options configuration object.
 This is the primary way to configure the grid.
@@ -420,30 +419,31 @@ Default: false */
   onTerraCellValueChanged?: (e: CustomEvent<never>) => void;
 };
 
-type TerraComboboxProps = {
-  /** Label the combobox with this. */
-  label?: TerraCombobox["label"];
-  /** name the combobox with this. */
-  name?: TerraCombobox["name"];
-  /** Set a placeholder for the combobox with this.
-Defaults to the label's value. */
-  placeholder?: TerraCombobox["placeholder"];
-  /** Hide the combobox's help text.
-When hidden, not rendered at all. */
-  "hide-help"?: TerraCombobox["hideHelp"];
-  /** Hide the combobox's label text.
-When hidden, still presents to screen readers. */
-  "hide-label"?: TerraCombobox["hideLabel"];
-  /** status of the content */
-  status?: TerraCombobox["status"];
-  /** content or data of the combobox. This could be of type string | GroupedListItem[] | ListItem[] | undefined */
-  content?: TerraCombobox["content"];
+type TerraDataRodsProps = {
+  /** a variable entry ID (ex: GPM_3IMERGHH_06_precipitationCal) */
+  "variable-entry-id"?: TerraDataRods["variableEntryId"];
+  /** a collection entry id (ex: GPM_3IMERGHH_06)
+only required if you don't include a variableEntryId */
+  collection?: TerraDataRods["collection"];
+  /** a variable short name to plot (ex: precipitationCal)
+only required if you don't include a variableEntryId */
+  variable?: TerraDataRods["variable"];
+  /** The start date for the time series plot. (ex: 2021-01-01) */
+  "start-date"?: TerraDataRods["startDate"];
+  /** The end date for the time series plot. (ex: 2021-01-01) */
+  "end-date"?: TerraDataRods["endDate"];
+  /** The point location in "lat,lon" format. */
+  location?: TerraDataRods["location"];
+  /** The token to be used for authentication with remote servers.
+The component provides the header "Authorization: Bearer" (the request header and authentication scheme).
+The property's value will be inserted after "Bearer" (the authentication scheme). */
+  "bearer-token"?: TerraDataRods["bearerToken"];
   /**  */
-  isExpanded?: TerraCombobox["isExpanded"];
+  catalogVariable?: TerraDataRods["catalogVariable"];
   /**  */
-  query?: TerraCombobox["query"];
+  _fetchVariableTask?: TerraDataRods["_fetchVariableTask"];
   /**  */
-  searchResults?: TerraCombobox["searchResults"];
+  variableBoundingBox?: TerraDataRods["variableBoundingBox"];
 };
 
 type TerraDataSubsetterProps = {
@@ -1508,13 +1508,6 @@ and "upcoming" shows the step as not yet reached. */
   "hide-checkmark"?: TerraStepperStep["hideCheckmark"];
 };
 
-type TerraTabPanelProps = {
-  /** The tab panel's name. */
-  name?: TerraTabPanel["name"];
-  /** When true, the tab panel will be shown. */
-  active?: TerraTabPanel["active"];
-};
-
 type TerraTabProps = {
   /** The name of the tab panel this tab is associated with. The panel must be located in the same tabs component. */
   panel?: TerraTab["panel"];
@@ -1532,6 +1525,13 @@ type TerraTabProps = {
   onTerraClose?: (e: CustomEvent<never>) => void;
 };
 
+type TerraTabPanelProps = {
+  /** The tab panel's name. */
+  name?: TerraTabPanel["name"];
+  /** When true, the tab panel will be shown. */
+  active?: TerraTabPanel["active"];
+};
+
 type TerraTabsProps = {
   /** The placement of the tabs. */
   placement?: TerraTabs["placement"];
@@ -1925,28 +1925,6 @@ 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.
    * ---
@@ -1975,6 +1953,28 @@ export type CustomElements = {
    */
   "terra-alert": DefineComponent<TerraAlertProps>;
 
+  /**
+   * 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>;
+
   /**
    * Badges are used to draw attention and display statuses or counts.
    * ---
@@ -2025,6 +2025,13 @@ export type CustomElements = {
    */
   "terra-breadcrumbs": DefineComponent<TerraBreadcrumbsProps>;
 
+  /**
+   * Browse through the NASA CMR or Giovanni catalogs.
+   * ---
+   *
+   */
+  "terra-browse-variables": DefineComponent<TerraBrowseVariablesProps>;
+
   /**
    * Buttons represent actions that are available to the user.
    * ---
@@ -2058,13 +2065,6 @@ export type CustomElements = {
    */
   "terra-button": DefineComponent<TerraButtonProps>;
 
-  /**
-   * Browse through the NASA CMR or Giovanni catalogs.
-   * ---
-   *
-   */
-  "terra-browse-variables": DefineComponent<TerraBrowseVariablesProps>;
-
   /**
    * Button groups can be used to group related buttons into sections.
    * ---
@@ -2181,18 +2181,29 @@ export type CustomElements = {
   "terra-chip": DefineComponent<TerraChipProps>;
 
   /**
-   * Discover and export collection granules with search, temporal, spatial, and cloud cover filters.
+   * Fuzzy-search for combobox with list autocomplete.
    * ---
    *
+   *
+   * ### **CSS Properties:**
+   *  - **--host-height** - The height of the host element. _(default: undefined)_
+   * - **--help-height** - The height of the search help element. _(default: undefined)_
+   * - **--label-height** - The height of the input's label element. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - A `search` element, the component's base.
+   * - **combobox** - An `input` element used for searching.
+   * - **button** - A `button` used for toggling the listbox's visibility.
+   * - **listbox** - A `ul` that holds the clickable options.
    */
-  "terra-data-access": DefineComponent<TerraDataAccessProps>;
+  "terra-combobox": DefineComponent<TerraComboboxProps>;
 
   /**
-   *
+   * Discover and export collection granules with search, temporal, spatial, and cloud cover filters.
    * ---
    *
    */
-  "terra-data-rods": DefineComponent<TerraDataRodsProps>;
+  "terra-data-access": DefineComponent<TerraDataAccessProps>;
 
   /**
    * A flexible data grid component built on AG Grid with support for various data sources and row models.
@@ -2231,22 +2242,11 @@ export type CustomElements = {
   "terra-data-grid": DefineComponent<TerraDataGridProps>;
 
   /**
-   * Fuzzy-search for combobox with list autocomplete.
-   * ---
    *
+   * ---
    *
-   * ### **CSS Properties:**
-   *  - **--host-height** - The height of the host element. _(default: undefined)_
-   * - **--help-height** - The height of the search help element. _(default: undefined)_
-   * - **--label-height** - The height of the input's label element. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - A `search` element, the component's base.
-   * - **combobox** - An `input` element used for searching.
-   * - **button** - A `button` used for toggling the listbox's visibility.
-   * - **listbox** - A `ul` that holds the clickable options.
    */
-  "terra-combobox": DefineComponent<TerraComboboxProps>;
+  "terra-data-rods": DefineComponent<TerraDataRodsProps>;
 
   /**
    * Easily allow users to select, subset, and download NASA Earth science data collections with spatial, temporal, and variable filters.
@@ -2952,40 +2952,40 @@ export type CustomElements = {
   "terra-stepper-step": DefineComponent<TerraStepperStepProps>;
 
   /**
-   * Tab panels are used inside [tabs](/components/tabs) to display tabbed content.
+   * Tabs are used inside [tabs](/components/tabs) to represent and activate [tab panels](/components/tab-panel).
    * ---
    *
    *
+   * ### **Events:**
+   *  - **terra-close** - Emitted when the tab is closable and the close button is activated.
+   *
    * ### **Slots:**
-   *  - _default_ - The tab panel's content.
+   *  - _default_ - The tab's label. For icon-only tabs, place a `<terra-icon>` here.
    *
    * ### **CSS Properties:**
-   *  - **--padding** - The tab panel's padding. _(default: undefined)_
+   *  - **--terra-tab-*** - All tab design tokens from horizon.css are supported. _(default: undefined)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
+   * - **close-button** - The close button icon.
    */
-  "terra-tab-panel": DefineComponent<TerraTabPanelProps>;
+  "terra-tab": DefineComponent<TerraTabProps>;
 
   /**
-   * Tabs are used inside [tabs](/components/tabs) to represent and activate [tab panels](/components/tab-panel).
+   * Tab panels are used inside [tabs](/components/tabs) to display tabbed content.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **terra-close** - Emitted when the tab is closable and the close button is activated.
-   *
    * ### **Slots:**
-   *  - _default_ - The tab's label. For icon-only tabs, place a `<terra-icon>` here.
+   *  - _default_ - The tab panel's content.
    *
    * ### **CSS Properties:**
-   *  - **--terra-tab-*** - All tab design tokens from horizon.css are supported. _(default: undefined)_
+   *  - **--padding** - The tab panel's padding. _(default: undefined)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **close-button** - The close button icon.
    */
-  "terra-tab": DefineComponent<TerraTabProps>;
+  "terra-tab-panel": DefineComponent<TerraTabPanelProps>;
 
   /**
    * Tabs organize content into a container that shows one section at a time.