@nasa-terra/components 0.0.6 → 0.0.9

package/dist/chunks/{chunk.T322FDKI.js → chunk.QK5OWFVO.js}

@@ -2,42 +2,18 @@
 import { css } from "lit";
 var variable_combobox_styles_default = css`
     :host {
-        --color-blue--400: #007acc;
-        --color-blue--500: #1c67e3;
-        --color-blue--600: #0b3d91;
-
-        --color-red--400: #f64137;
-        --color-red--500: #b60109;
-
-        --color-neutral--000: #ffffff;
-        --color-neutral--100: #f7f7f7;
-        --color-neutral--200: #d1d1d1;
-        --color-neutral--300: #b9b9bb;
-        --color-neutral--400: #959599;
-        --color-neutral--500: #767676;
-        --color-neutral--600: #58585b;
-        --color-neutral--700: #2e2e32;
-        --color-neutral--800: #1b1b1b;
-
-        --font-family--inter: Inter, sans-serif;
-        --font-family--public-sans: 'Public Sans', sans-serif;
-        --font-family--dm-mono: 'DM Mono', monospace;
-
         --label-height: 1.8125rem;
         --help-height: 1.8125rem;
         --host-height: 5.8125rem;
 
         block-size: var(--terra-block-size, 2.1875rem);
         box-sizing: border-box;
-        color: var(--terra-color-neutral--700, var(--color-neutral--700));
+        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,
-            var(--font-family--public-sans)
-        );
+        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;
@@ -68,12 +44,6 @@ var variable_combobox_styles_default = css`
         box-sizing: inherit;
     }
 
-    .search-input-label {
-        font-family: var(--terra-font-family--inter, var(--font-family--inter));
-        font-weight: 600;
-        line-height: 1.1875rem;
-    }
-
     .search-input-group {
         block-size: 100%;
         display: flex;
@@ -81,16 +51,8 @@ var variable_combobox_styles_default = css`
     }
 
     .combobox {
-        background-color: var(--terra-color-neutral--100, var(--color-neutral--100));
-        block-size: var(--terra-block-size, 2.1875rem);
-        border-block: 2px solid
-            var(--terra-color-neutral--200, var(--color-neutral--200));
-        border-inline-end: 0;
-        border-inline-start: 2px solid
-            var(--terra-color-neutral--200, var(--color-neutral--200));
-        color: currentColor;
+        block-size: var(--terra-block-size, 2.25rem);
         flex: 1 1 auto;
-        font-size: 1rem;
         padding-inline: 0.5rem;
         transition:
             background-color 0.2s ease,
@@ -98,50 +60,25 @@ var variable_combobox_styles_default = css`
     }
 
     .combobox::placeholder {
-        color: var(--terra-color-neutral--600, var(--color-neutral--600));
+        color: var(--terra-color-carbon-60);
     }
 
     .combobox:focus {
-        background-color: var(--terra-color-neutral--000, var(--color-neutral--000));
-        border-color: var(--terra-color-neutral--400, var(--color-neutral--400));
+        border-color: var(--terra-color-carbon-40);
         outline: 0;
     }
 
-    .combobox:focus + .combobox-button {
-        background-color: var(--terra-color-neutral--800, var(--color-neutral--800));
-        border-block-color: var(
-            --terra-color-neutral--400,
-            var(--color-neutral--400)
-        );
-        border-inline-end-color: var(
-            --terra-color-neutral--400,
-            var(--color-neutral--400)
-        );
-    }
-
     .search-input-group:has(.combobox:not(:focus)) + .search-results[open] {
-        border-color: var(--terra-color-neutral--200, var(--color-neutral--200));
+        border-color: var(--terra-color-carbon-30);
     }
 
     .combobox-button {
-        align-items: center;
-        background-color: var(--terra-color-neutral--700, var(--color-neutral--700));
-        block-size: var(--terra-block-size, 2.1875rem);
-        border-block: 2px solid
-            var(--terra-color-neutral--500, var(--color-neutral--500));
-        border-inline-end: 2px solid
-            var(--terra-color-neutral--500, var(--color-neutral--500));
-        border-inline-start: 0;
-        color: var(--terra-color-neutral--000, var(--color-neutral--000));
-        cursor: pointer;
-        display: flex;
-        flex: 0 0 auto;
-        font-size: 1rem;
-        justify-content: center;
+        position: absolute;
+        right: 0;
+        z-index: 2;
         margin-block: 0;
         margin-inline: 0;
         outline: 0;
-        padding-inline: 0.5rem;
         transition:
             background-color 0.2s ease,
             border-color 0.2s ease;
@@ -172,12 +109,13 @@ var variable_combobox_styles_default = css`
     }
 
     .search-help {
-        bottom: 0;
-        color: var(--terra-color-neutral--600, var(--color-neutral--600));
+        color: var(--terra-color-carbon-60);
         flex: 1 1 100%;
-        font-size: 0.875rem;
+        font-size: var(--terra-font-size-small);
+        line-height: var(--terra-line-height-normal);
         margin-block: 0;
         position: absolute;
+        bottom: -10px;
     }
 
     .external-link {
@@ -186,7 +124,7 @@ var variable_combobox_styles_default = css`
     }
 
     .search-results {
-        background-color: var(--terra-color-neutral--000, var(--color-neutral--000));
+        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;
@@ -212,7 +150,7 @@ var variable_combobox_styles_default = css`
     }
 
     .search-results[open] {
-        border-color: var(--terra-color-neutral--400, var(--color-neutral--400));
+        border-color: var(--terra-color-carbon-40);
         content-visibility: auto;
         max-height: calc(33vh - var(--terra-block-size, 2.1875rem));
         opacity: 1;
@@ -220,14 +158,14 @@ var variable_combobox_styles_default = css`
     }
 
     .search-results .updating {
-        font-size: 1.5rem;
+        font-size: var(--terra-font-size-x-large);
         padding-block: 4rem;
         text-align: center;
     }
 
     .search-results .error {
-        color: var(--terra-color-red--500, var(--color-red--500));
-        font-family: var(--terra-font-family--dm-mono, var(--font-family--dm-mono));
+        color: var(--terra-color-nasa-red);
+        font-family: var(--terra-font-family--dm-mono);
         padding-block: 2rem;
     }
 
@@ -241,7 +179,7 @@ var variable_combobox_styles_default = css`
     }
 
     .group-title {
-        font-family: var(--terra-font-family--inter, var(--font-family--inter));
+        font-family: var(--terra-font-family--inter);
         font-weight: 700;
         margin-block: 0;
     }

package/dist/chunks/chunk.RJAFAHJE.js

@@ -0,0 +1,21 @@
+import {
+  TerraBrowseVariables
+} from "./chunk.JW7QUN3C.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/dist/chunks/{chunk.OQE2USZJ.js → chunk.RWULTAWI.js}

@@ -1,6 +1,6 @@
 import {
   formCollections
-} from "./chunk.NYBJ252W.js";
+} from "./chunk.VN4FDFT7.js";
 
 // src/utilities/form.ts
 function serialize(form) {

package/{cdn/chunks/chunk.7FIHTIPY.js → dist/chunks/chunk.ST5FT6V7.js}

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

package/dist/chunks/{chunk.DYMAZVQ6.js → chunk.TBPEGRZ2.js}

@@ -1,29 +1,29 @@
-import {
-  variable_combobox_styles_default
-} from "./chunk.T322FDKI.js";
 import {
   FetchController
-} from "./chunk.665T4BPT.js";
+} from "./chunk.57CUGLEH.js";
 import {
   clearSelection,
   groupDocsByCollection,
   removeEmptyCollections,
   renderSearchResult,
   walkToOption
-} from "./chunk.UU46CLE7.js";
+} from "./chunk.O2VVO7UI.js";
+import {
+  variable_combobox_styles_default
+} from "./chunk.QK5OWFVO.js";
 import {
   icon_default
-} from "./chunk.NZBZKDMB.js";
+} from "./chunk.CSSXWHIU.js";
 import {
   button_default
-} from "./chunk.RIPCW4LZ.js";
+} from "./chunk.3TJ2JKU3.js";
 import {
   watch
-} from "./chunk.ZK7QVWBI.js";
+} from "./chunk.Y6OL24QM.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AU3AGC4X.js";
+} from "./chunk.KXP54RWR.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -31,7 +31,7 @@ import {
   __privateSet,
   __spreadProps,
   __spreadValues
-} from "./chunk.RYPAZDXE.js";
+} from "./chunk.GKBF7QGR.js";
 
 // src/components/variable-combobox/variable-combobox.component.ts
 import Fuse from "fuse.js";
@@ -183,7 +183,7 @@ var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    globalThis.addEventListener("click", __privateGet(this, _manageListboxVisibility));
+    globalThis.removeEventListener("click", __privateGet(this, _manageListboxVisibility));
   }
   clear() {
     this.query = _TerraVariableCombobox.initialQuery;
@@ -198,9 +198,7 @@ var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
     var _a, _b, _c;
     const searchHasNoMatches = ((_a = this.searchResults) == null ? void 0 : _a.length) === 0 && ((_b = __privateGet(this, _searchableList)) == null ? void 0 : _b.length) !== 0 && this.query !== _TerraVariableCombobox.initialQuery;
     return html`<search part="base" title="Search through the list.">
-            <label
-                for="combobox"
-                class=${this.hideLabel ? "sr-only" : "search-input-label"}
+            <label for="combobox" class=${this.hideLabel ? "sr-only" : "input-label"}
                 >${this.label}</label
             >
             <div class="search-input-group">
@@ -213,6 +211,7 @@ var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
     })}
                     aria-autocomplete="list"
                     aria-controls="listbox"
+                    aria-haspopup="list"
                     aria-expanded=${this.isExpanded}
                     class="combobox"
                     id="combobox"
@@ -224,7 +223,8 @@ var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
                     @input=${__privateGet(this, _handleComboboxChange)}
                     @keydown=${__privateGet(this, _handleKeydown)}
                 />
-                <button
+                <terra-button
+                    shape="square-left"
                     aria-controls="listbox"
                     aria-expanded=${this.isExpanded}
                     aria-label="List of Searchable Variables"
@@ -252,7 +252,7 @@ var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
                                   stroke-width="3"
                               ></circle>
                           </svg>`}
-                </button>
+                </terra-button>
 
                 ${this.hideHelp ? nothing : html`<p class="search-help">
                           See
@@ -262,17 +262,10 @@ var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
                               tabindex=${this.isExpanded ? "-1 " : "0"}
                               target="_blank"
                               >extended search syntax
-                              <svg
-                                  aria-hidden="true"
-                                  class="external-link"
-                                  xmlns="http://www.w3.org/2000/svg"
-                                  width="14"
-                                  height="14"
-                                  viewBox="0 0 24 24"
-                              >
-                                  <path
-                                      d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
-                                  /></svg></a
+                              <terra-icon
+                                  name="outline-arrow-top-right-on-square"
+                                  library="heroicons"
+                              ></terra-icon></a
                           >.
                       </p>`}
             </div>

package/dist/chunks/chunk.TRSW2E4E.js

@@ -0,0 +1,223 @@
+// src/components/giovanni-search/giovanni-search.styles.ts
+import { css } from "lit";
+var giovanni_search_styles_default = css`
+    :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
+};