@nasa-terra/components 0.0.7 → 0.0.10

package/cdn/chunks/{chunk.CGUXXQTT.js → chunk.AMMVA664.js}

@@ -1,6 +1,6 @@
 import {
   TerraLoader
-} from "./chunk.FDOXEWGR.js";
+} from "./chunk.AC5MB5SX.js";
 
 // src/components/loader/loader.ts
 var loader_default = TerraLoader;

package/cdn/chunks/chunk.BJDFUSWQ.js

@@ -0,0 +1,226 @@
+import {
+  i
+} from "./chunk.PH7RLQK2.js";
+
+// src/components/giovanni-search/giovanni-search.styles.ts
+var giovanni_search_styles_default = i`
+    :host {
+        --label-height: 1.8125rem;
+        --host-height: 5.8125rem;
+
+        block-size: var(--terra-block-size, 2.1875rem);
+        box-sizing: border-box;
+        color: #1b1b1b; /* HDS uses this color for body text but does not have a defined color in the HDS palette */
+        contain: layout size style;
+        contain-intrinsic-size: var(--terra-inline-size, 100%)
+            calc(33vh + var(--terra-block-size, 2.1875rem));
+        display: block;
+        font-family: var(--terra-font-family--public-sans);
+        height: var(--terra-block-size, var(--host-height));
+        inline-size: var(--terra-inline-size, 100%);
+        position: relative;
+        z-index: 10;
+    }
+
+    :host([hide-label]) {
+        height: calc(
+            var(--terra-block-size, var(--host-height)) - var(--label-height)
+        );
+    }
+
+    * {
+        box-sizing: inherit;
+    }
+
+    .search-input-group {
+        block-size: 100%;
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .combobox {
+        block-size: var(--terra-block-size, 2.25rem);
+        flex: 1 1 auto;
+        padding-inline: 0.5rem;
+        transition:
+            background-color 0.2s ease,
+            border-color 0.2s ease;
+    }
+
+    .combobox::placeholder {
+        color: var(--terra-color-carbon-60);
+    }
+
+    .combobox:focus {
+        border-color: var(--terra-color-carbon-40);
+        outline: 0;
+    }
+
+    .search-input-group:has(.combobox:not(:focus)) + .search-results[open] {
+        border-color: var(--terra-color-carbon-30);
+    }
+
+    .search-input-button {
+        margin-block: 0;
+        margin-inline: 0;
+        outline: 0;
+        position: absolute;
+        right: 0;
+        transition:
+            background-color 0.2s ease,
+            border-color 0.2s ease;
+        z-index: 2;
+    }
+
+    .search-button::part(base) {
+        border-color: transparent;
+    }
+
+    .search-button::part(base):hover {
+        background-color: transparent;
+        border-color: var(--terra-color-nasa-blue-shade);
+        color: var(--terra-button-outline-text-color);
+    }
+
+    .button-icon {
+        height: 1rem;
+        width: 1rem;
+    }
+
+    .spinner {
+        transform-origin: center;
+        animation: spin 2s linear infinite;
+    }
+
+    .spinner circle {
+        stroke-linecap: round;
+        animation: vary-stroke 1.5s ease-in-out infinite;
+    }
+
+    .external-link {
+        fill: currentColor;
+        vertical-align: middle;
+    }
+
+    .search-results {
+        background-color: var(--terra-color-spacesuit-white);
+        block-size: calc(33vh - var(--terra-block-size, 2.1875rem));
+        border-block-end: 2px solid transparent;
+        border-inline: 2px solid transparent;
+        contain: strict;
+        contain-intrinsic-size: var(--terra-inline-size, 100%)
+            calc(33vh - var(--terra-block-size, 2.1875rem));
+        content-visibility: hidden;
+        left: 0;
+        margin-block: 0;
+        margin-inline: 0;
+        max-height: 0;
+        opacity: 0;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        padding-block: 0.5rem;
+        padding-inline: 0rem;
+        position: absolute;
+        right: 0;
+        visibility: hidden;
+        transition:
+            background-color 0.2s ease,
+            border-color 0.2s ease;
+    }
+
+    .search-results[open] {
+        border-color: var(--terra-color-carbon-40);
+        content-visibility: auto;
+        max-height: calc(33vh - var(--terra-block-size, 2.1875rem));
+        opacity: 1;
+        visibility: visible;
+    }
+
+    .search-results .updating {
+        font-size: var(--terra-font-size-x-large);
+        padding-block: 4rem;
+        text-align: center;
+    }
+
+    .search-results .error {
+        color: var(--terra-color-nasa-red);
+        font-family: var(--terra-font-family--dm-mono);
+        padding-block: 2rem;
+    }
+
+    .listbox-option-group {
+        padding-inline: 0.5rem;
+        padding-block: 1rem 0.5rem;
+    }
+
+    .listbox-option-group:has(.clear-button) {
+        text-align: center;
+    }
+
+    .group-title {
+        font-family: var(--terra-font-family--inter);
+        font-weight: 700;
+        margin-block: 0;
+    }
+
+    .listbox-option {
+        cursor: pointer;
+        list-style: none;
+        padding-inline: 0.5rem;
+        transition: background-color 0.1s ease-in-out;
+    }
+
+    .listbox-option[aria-selected='true'] {
+        animation: traverse 0.2s ease-in-out forwards;
+        background-color: var(--terra-color-nasa-blue-shade);
+        color: var(--terra-color-spacesuit-white);
+    }
+
+    @media (prefers-reduced-motion) {
+        .button-icon {
+            transition: rotate 0s ease;
+        }
+
+        .search-results {
+            scroll-behavior: auto;
+        }
+    }
+
+    @keyframes traverse {
+        from {
+            filter: brightness(0.8);
+            opacity: 0.8;
+        }
+
+        to {
+            filter: brightness(1);
+            opacity: 1;
+        }
+    }
+
+    @keyframes spin {
+        to {
+            transform: rotate(1turn);
+        }
+    }
+
+    @keyframes vary-stroke {
+        0% {
+            stroke-dasharray: 0 150;
+            stroke-dashoffset: 0;
+        }
+        47.5% {
+            stroke-dasharray: 42 150;
+            stroke-dashoffset: -16;
+        }
+        95%,
+        100% {
+            stroke-dasharray: 42 150;
+            stroke-dashoffset: -59;
+        }
+    }
+`;
+
+export {
+  giovanni_search_styles_default
+};

package/cdn/chunks/{chunk.CPNLKTGF.js → chunk.CBQITJPW.js}

@@ -1,6 +1,6 @@
 import {
   TerraSpatialPicker
-} from "./chunk.UBYAPUL3.js";
+} from "./chunk.CCSPQ6IM.js";
 
 // src/react/spatial-picker/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.UBYAPUL3.js → chunk.CCSPQ6IM.js}

@@ -1,17 +1,17 @@
+import {
+  spatial_picker_styles_default
+} from "./chunk.5FZY6SGS.js";
 import {
   TerraMap
-} from "./chunk.UUZHIWQZ.js";
+} from "./chunk.M2O4PUUH.js";
 import {
   StringifyBoundingBox,
   parseBoundingBox
 } from "./chunk.KMTO4VEC.js";
-import {
-  spatial_picker_styles_default
-} from "./chunk.UOFDZJYP.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.THBBULDA.js";
+} from "./chunk.LVWJBUI5.js";
 import {
   e,
   n,
@@ -111,10 +111,8 @@ var TerraSpatialPicker = class extends TerraElement {
                         aria-expanded=${this.isExpanded}
                         @blur=${this._blur}
                     />
-                    <button
-                        aria-controls="map"
-                        aria-expanded=${this.isExpanded}
-                        aria-label="Spatial picker map"
+                    <terra-button
+                        shape="square-left"
                         class="spatial-picker__input_icon_button"
                         @click=${this._click}
                         type="button"
@@ -133,7 +131,7 @@ var TerraSpatialPicker = class extends TerraElement {
                                 d="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z"
                             />
                         </svg>
-                    </button>
+                    </terra-button>
                 </div>
                 ${this.isExpanded ? this.renderMap() : T}
             </div>

package/cdn/chunks/chunk.CNP3J6CH.js

@@ -0,0 +1,128 @@
+import {
+  i
+} from "./chunk.PH7RLQK2.js";
+
+// src/components/time-series/time-series.styles.ts
+var time_series_styles_default = i`
+    :host {
+        display: grid;
+        gap: 1.5rem 0.75rem;
+        grid-template-rows: auto;
+        grid-template-columns: 1fr 1fr;
+    }
+
+    terra-variable-combobox {
+        grid-column: 1 / 2;
+    }
+
+    terra-spatial-picker {
+        grid-column: 2 / 3;
+    }
+
+    .plot-container {
+        grid-column: 1 / 3;
+    }
+
+    .spacer {
+        padding-block: 1.375rem;
+    }
+
+    header {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+
+    .title {
+        margin: 0;
+        font-size: 1.25rem;
+    }
+
+    .toggles {
+        display: flex;
+        justify-content: space-between;
+        gap: 0 1em;
+    }
+
+    .toggle {
+        position: relative;
+    }
+
+    .toggle[aria-expanded='true']::after {
+        background-color: var(--terra-color-nasa-blue);
+        block-size: 0.125em;
+        border-radius: 0.25em;
+        bottom: -0.5em;
+        content: ' ';
+        inline-size: 100%;
+        left: 0;
+        position: absolute;
+    }
+
+    menu {
+        margin: 0;
+        max-height: 0;
+        overscroll-behavior: contain;
+        padding-block: 0.25em;
+        padding-inline: 0.5em;
+        transition: max-height 0.1s ease-in;
+    }
+
+    menu[data-expanded='true'] {
+        margin-block: 0.75em;
+        max-height: 85dvh;
+        overflow-y: auto;
+    }
+
+    menu [role='menuitem'] {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0em 1em;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    [role='menuitem'] p {
+        flex: 1 0 100%;
+    }
+
+    menu dt {
+        font-weight: var(--terra-font-weight-semibold);
+    }
+
+    menu dd {
+        font-style: italic;
+    }
+
+    terra-date-range-slider {
+        grid-column: 1 / 3;
+        padding-block-start: 2rem;
+    }
+
+    /* The current Giovanni API doesn't accept bounding box subsetting. */
+    terra-spatial-picker::part(leaflet-bbox),
+    terra-spatial-picker::part(leaflet-edit) {
+        display: none;
+    }
+
+    /* Set the plot title to transparent, which makes it not visible on the page but visible on download. */
+    terra-plot::part(plot-title) {
+        opacity: 0;
+    }
+
+    dialog {
+        opacity: 1;
+        transition: opacity 0.3s ease-out 0.4s; /* a short delay, to allow local results to be displayed without a loading icon */
+        place-self: center;
+        z-index: var(--terra-z-index-dialog);
+
+        @starting-style {
+            opacity: 0;
+        }
+    }
+`;
+
+export {
+  time_series_styles_default
+};

package/cdn/chunks/chunk.E7365JGL.js

@@ -0,0 +1,21 @@
+import {
+  TerraBrowseVariables
+} from "./chunk.PS4NQOAX.js";
+
+// src/react/browse-variables/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-browse-variables";
+TerraBrowseVariables.define("terra-browse-variables");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraBrowseVariables,
+  react: React,
+  events: {},
+  displayName: "TerraBrowseVariables"
+});
+var browse_variables_default = reactWrapper;
+
+export {
+  browse_variables_default
+};

package/cdn/chunks/{chunk.PTWY7M47.js → chunk.EZSX4R2K.js}

@@ -8,11 +8,15 @@ var plot_styles_default = i`
         display: block;
     }
 
+    :host::part(base) {
+        aspect-ratio: 4 / 3;
+    }
+
     /**
    * !Alert! The rest of this stylesheet is auto-generated!
    * Unfortunately Plotly does not work well with Shadow DOM AND they don't supply a CSS file at all for us to import
    * Because of this, a working solution is to copy their CSS over.
-   * 
+   *
    * Given that they use CSS, you can do npx -y sass ./node_modules/plotly.js/src/css/style.scss > plotly.css
    * to generate the CSS, then copy the contents of plotly.css into this file
    */

package/cdn/chunks/{chunk.GMWFNQ7Q.js → chunk.FCJIZOLN.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.BPNFS4ED.js";
 import {
   date_range_slider_styles_default
-} from "./chunk.4GVU47B6.js";
+} from "./chunk.WTMN7OUL.js";
 import {
   mergeTooltips
 } from "./chunk.KW4TJM4C.js";
@@ -16,7 +16,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.THBBULDA.js";
+} from "./chunk.LVWJBUI5.js";
 import {
   e,
   n
@@ -1893,6 +1893,7 @@ var TerraDateRangeSlider = class extends TerraElement {
         min: minDate.getTime(),
         max: maxDate.getTime()
       },
+      behaviour: "drag",
       step: this._getStep(),
       start: [startDate.getTime(), endDate.getTime()],
       // defaults to either the given start/end dates or the full date range (min/max date)

package/cdn/chunks/{chunk.R2AQMZE4.js → chunk.GCXPHNE2.js}

@@ -1,6 +1,6 @@
 import {
   cherryPickDocInfo
-} from "./chunk.5DPGWL3Y.js";
+} from "./chunk.7JHEI2UU.js";
 import {
   h,
   s

package/cdn/chunks/chunk.HSQGU4NR.js

@@ -0,0 +1,25 @@
+import {
+  TerraGiovanniSearch
+} from "./chunk.UTSV66LS.js";
+
+// src/react/giovanni-search/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-giovanni-search";
+TerraGiovanniSearch.define("terra-giovanni-search");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraGiovanniSearch,
+  react: React,
+  events: {
+    onTerraGiovanniSearchChange: "terra-giovanni-search-change",
+    onTerraSearch: "terra-search"
+  },
+  displayName: "TerraGiovanniSearch"
+});
+var giovanni_search_default = reactWrapper;
+
+export {
+  giovanni_search_default
+};

package/cdn/chunks/{chunk.LO2CROCV.js → chunk.HZX5FZ7S.js}

@@ -1,11 +1,11 @@
-import {
-  icon_styles_default
-} from "./chunk.4XR5KYKG.js";
 import {
   getIconLibrary,
   unwatchIcon,
   watchIcon
-} from "./chunk.MDRUDBRH.js";
+} from "./chunk.7DOMZGX7.js";
+import {
+  icon_styles_default
+} from "./chunk.4XR5KYKG.js";
 import {
   e
 } from "./chunk.6NYH4BZ2.js";
@@ -15,7 +15,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.THBBULDA.js";
+} from "./chunk.LVWJBUI5.js";
 import {
   n,
   r

package/cdn/chunks/{chunk.DSTVDF3E.js → chunk.IOAVHFTX.js}

@@ -1,6 +1,6 @@
 import {
   TerraCombobox
-} from "./chunk.6TG7HJRE.js";
+} from "./chunk.5VDHK5K4.js";
 
 // src/react/combobox/index.ts
 import * as React from "react";

package/{dist/chunks/chunk.TWKECPWO.js → cdn/chunks/chunk.K6SRYMW6.js}

@@ -1,6 +1,6 @@
 import {
   TerraCombobox
-} from "./chunk.C5OZDL3F.js";
+} from "./chunk.5VDHK5K4.js";
 
 // src/components/combobox/combobox.ts
 var combobox_default = TerraCombobox;

package/{dist/chunks/chunk.MMDLLVXS.js → cdn/chunks/chunk.KNCEBCFL.js}

@@ -1,6 +1,6 @@
 import {
   TerraIcon
-} from "./chunk.EYUPYDT4.js";
+} from "./chunk.HZX5FZ7S.js";
 
 // src/components/icon/icon.ts
 var icon_default = TerraIcon;

package/cdn/chunks/{chunk.SVBGCTUY.js → chunk.L577HM7J.js}

@@ -1,6 +1,6 @@
 import {
   TerraChip
-} from "./chunk.6TP5NQZR.js";
+} from "./chunk.VV4LJOBN.js";
 
 // src/components/chip/chip.ts
 var chip_default = TerraChip;