@nasa-terra/components 0.0.22 → 0.0.26

package/README.md

@@ -49,7 +49,9 @@ Then run the following:
 -   `uv venv` - create a virtual environment (only have to do this the first time)
 -   `source .venv/bin/activate` - activate it
 -   `uv pip install -e ".[dev]"` - install dependencies (see pyproject.toml)
--   `./.venv/bin/jupyter lab` - spins up Jupyter lab and should open the browser for you
+-   `npm run start:python` - spins up Jupyter lab and should open the browser for you
+
+For an example of how to use the components in a Jupyter Notebook, open the `/notebooks/playground.ipynb` notebook in Jupyter Lab.
 
 ### Publishing to NPM and PyPI
 

package/cdn/chunks/chunk.4P3HFU2W.js

@@ -0,0 +1,11 @@
+import {
+  TerraDialog
+} from "./chunk.C5FGIZP6.js";
+
+// src/components/dialog/dialog.ts
+var dialog_default = TerraDialog;
+TerraDialog.define("terra-dialog");
+
+export {
+  dialog_default
+};

package/cdn/chunks/{chunk.DGA3BVXS.js → chunk.4Y2XZHOW.js}

@@ -82,10 +82,13 @@ var browse_variables_styles_default = i`
     }
 
     .browse-by-category ul {
-        list-style: none;
         padding: 0;
     }
 
+    .browse-by-category ul ::marker {
+        font-size: 0; /*Safari removes the semantic meaning / role of the list if we remove the list style. */
+    }
+
     .browse-by-category li {
         border-radius: 4px;
         cursor: pointer;
@@ -130,6 +133,25 @@ var browse_variables_styles_default = i`
         grid-area: header;
         padding: 15px;
         padding-bottom: 0;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .variables-container header menu {
+        display: inline-flex;
+        padding: 0;
+        margin: 0;
+        min-width: 24em;
+        justify-content: space-evenly;
+    }
+
+    .variables-container header menu ::marker {
+        font-size: 0;
+    }
+
+    .list-menu-dropdown sl-button::part(base) {
+        border-color: transparent;
+        font-weight: 700;
     }
 
     .variables-container aside {
@@ -149,6 +171,90 @@ var browse_variables_styles_default = i`
     .facet {
         margin-left: 10px;
     }
+
+    .variable-list {
+        margin: 0;
+        padding: 0;
+    }
+
+    .variable-list-item {
+    }
+
+    .variable-list-item::marker {
+        font-size: 0;
+    }
+
+    .variable[open] .details-panel {
+        height: max-content;
+    }
+
+    .variable input[type='checkbox'] {
+        margin-block: 0.25em;
+        margin-inline: 0 0.5em;
+    }
+
+    .variable {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .variable label {
+        cursor: pointer;
+        display: block;
+        font-weight: 400;
+    }
+
+    .variable sl-drawer {
+        font-style: italic;
+    }
+
+    .variable sl-drawer::part(base) {
+        --body-spacing: 0.25em;
+        --header-spacing: 0.25em;
+        --footer-spacing: 1em 0;
+    }
+
+    .variable sl-drawer::part(header-actions) {
+        --header-spacing: 0.25em;
+
+        align-items: flex-start;
+        margin-block-start: 1em;
+        margin-inline-end: 0.5em;
+    }
+
+    .variable sl-drawer::part(close-button__base) {
+        --sl-focus-ring: var(--terra-focus-ring);
+        --sl-focus-ring-offset: var(--terra-focus-ring-offset);
+    }
+
+    .variable sl-drawer::part(panel) {
+        background-color: var(--terra-color-nasa-blue-shade);
+        border: 0.0625em solid var(--terra-color-carbon-10);
+        left: auto;
+        right: 0;
+        top: 4.25rem;
+    }
+
+    .variable sl-drawer::part(body) {
+        padding-block-end: 6em;
+    }
+
+    .variable sl-drawer > * {
+        margin-block-start: 0;
+    }
+
+    .variable sl-drawer h4 {
+        font-weight: 400;
+    }
+
+    .variable-details-button {
+        position: static;
+    }
+
+    .variable-details-button::part(base) {
+        border-color: transparent;
+        color: var(--spacesuit-white);
+    }
 `;
 
 export {

package/cdn/chunks/{chunk.L6BB7MK3.js → chunk.5YUWKJCI.js}

@@ -25,7 +25,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.USZP36DV.js";
+} from "./chunk.ESFWCSLU.js";
 import {
   e,
   n,

package/{dist/chunks/chunk.4DESQZNM.js → cdn/chunks/chunk.67YIRH3F.js}

@@ -1,6 +1,6 @@
 import {
   TerraChip
-} from "./chunk.NYMYAGRE.js";
+} from "./chunk.7TA5PWO7.js";
 
 // src/react/chip/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.4ORHYGDJ.js → chunk.6J75BP7M.js}

@@ -1,9 +1,9 @@
 import {
   spatial_picker_styles_default
-} from "./chunk.5FZY6SGS.js";
+} from "./chunk.POKHGMEN.js";
 import {
   TerraMap
-} from "./chunk.L6BB7MK3.js";
+} from "./chunk.5YUWKJCI.js";
 import {
   StringifyBoundingBox,
   parseBoundingBox
@@ -11,7 +11,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.USZP36DV.js";
+} from "./chunk.ESFWCSLU.js";
 import {
   e,
   n,
@@ -39,6 +39,7 @@ var TerraSpatialPicker = class extends TerraElement {
     this.hideLabel = false;
     this.label = "Select Region";
     this.isExpanded = false;
+    this.inline = false;
   }
   _blur(e2) {
     const inputValue = e2.target.value;
@@ -80,6 +81,7 @@ var TerraSpatialPicker = class extends TerraElement {
   }
   renderMap() {
     return x`<terra-map
+            class="${this.inline ? "inline" : ""}"
             exportparts="map, leaflet-bbox, leaflet-point, leaflet-edit, leaflet-remove"
             min-zoom=${this.minZoom}
             max-zoom=${this.maxZoom}
@@ -170,8 +172,11 @@ __decorateClass([
   n()
 ], TerraSpatialPicker.prototype, "label", 2);
 __decorateClass([
-  r()
+  n({ attribute: "is-expanded", type: Boolean, reflect: true })
 ], TerraSpatialPicker.prototype, "isExpanded", 2);
+__decorateClass([
+  n({ type: Boolean })
+], TerraSpatialPicker.prototype, "inline", 2);
 __decorateClass([
   r()
 ], TerraSpatialPicker.prototype, "mapValue", 2);

package/cdn/chunks/{chunk.EQCY7O7N.js → chunk.6YL7VVDD.js}

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

package/cdn/chunks/{chunk.LNV3ILYM.js → chunk.7PZBUHYR.js}

@@ -4,19 +4,19 @@ import {
 import {
   format
 } from "./chunk.BPNFS4ED.js";
-import {
-  date_range_slider_styles_default
-} from "./chunk.WTMN7OUL.js";
 import {
   mergeTooltips
 } from "./chunk.KW4TJM4C.js";
+import {
+  date_range_slider_styles_default
+} from "./chunk.WTMN7OUL.js";
 import {
   watch
 } from "./chunk.CBV7M6CJ.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.USZP36DV.js";
+} from "./chunk.ESFWCSLU.js";
 import {
   e,
   n

package/cdn/chunks/{chunk.5N5OY526.js → chunk.7TA5PWO7.js}

@@ -7,7 +7,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.USZP36DV.js";
+} from "./chunk.ESFWCSLU.js";
 import {
   n
 } from "./chunk.QCK7PTWV.js";

package/cdn/chunks/{chunk.3RKSRYRX.js → chunk.A3E2LIAV.js}

@@ -1,6 +1,6 @@
 import {
   TerraIcon
-} from "./chunk.KNH5FQ7R.js";
+} from "./chunk.TLIHKASV.js";
 
 // src/react/icon/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.TPEIHI5D.js → chunk.BOGJSWIT.js}

@@ -1,6 +1,6 @@
 import {
   TerraGiovanniSearch
-} from "./chunk.FKOY3ZZ5.js";
+} from "./chunk.DBZQEOZ6.js";
 
 // src/components/giovanni-search/giovanni-search.ts
 var giovanni_search_default = TerraGiovanniSearch;

package/cdn/chunks/{chunk.OEKWCA2Y.js → chunk.BTRRDJYE.js}

@@ -1,9 +1,9 @@
-import {
-  FetchController
-} from "./chunk.KRV3QC6E.js";
 import {
   variable_combobox_styles_default
 } from "./chunk.SWEK2UAG.js";
+import {
+  FetchController
+} from "./chunk.KRV3QC6E.js";
 import {
   clearSelection,
   groupDocsByCollection,
@@ -16,26 +16,26 @@ import {
 } from "./chunk.QB5SASDL.js";
 import {
   icon_default
-} from "./chunk.MZT2CCCJ.js";
-import {
-  button_default
-} from "./chunk.L6DGDWB3.js";
+} from "./chunk.U35LI4FR.js";
 import {
   Fuse
 } from "./chunk.U7L2FN7F.js";
+import {
+  n as n2
+} from "./chunk.2XCNCXGV.js";
 import {
   o
 } from "./chunk.QEA4QW6G.js";
 import {
-  n as n2
-} from "./chunk.2XCNCXGV.js";
+  button_default
+} from "./chunk.EAQZEXSN.js";
 import {
   watch
 } from "./chunk.CBV7M6CJ.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.USZP36DV.js";
+} from "./chunk.ESFWCSLU.js";
 import {
   n,
   r

package/cdn/chunks/chunk.C5FGIZP6.js

@@ -0,0 +1,92 @@
+import {
+  dialog_styles_default
+} from "./chunk.FAICFDGD.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.ESFWCSLU.js";
+import {
+  e,
+  n
+} from "./chunk.QCK7PTWV.js";
+import {
+  x
+} from "./chunk.PQFHJHNO.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateMethod
+} from "./chunk.MR27IH5Z.js";
+
+// src/components/dialog/dialog.component.ts
+var _handleBackdropClick, handleBackdropClick_fn;
+var TerraDialog = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _handleBackdropClick);
+    this.width = "500px";
+    this.open = false;
+    this.clickOutsideToClose = true;
+    this.showBackdrop = true;
+  }
+  toggle() {
+    this.open ? this.hide() : this.show();
+  }
+  show() {
+    this.open = true;
+    this.emit("terra-dialog-show");
+  }
+  hide() {
+    this.open = false;
+    this.emit("terra-dialog-hide");
+  }
+  render() {
+    return x`
+            <div
+                class="dialog-backdrop ${this.showBackdrop ? "visible" : ""} ${this.open ? "active" : ""} ${this.clickOutsideToClose ? "clickable" : ""}"
+                part="backdrop"
+                @click=${__privateMethod(this, _handleBackdropClick, handleBackdropClick_fn)}
+            ></div>
+
+            <dialog
+                part="dialog"
+                ?open=${this.open}
+                id=${this.id}
+                role="dialog"
+                aria-modal="true"
+                style="width: ${this.width}"
+            >
+                <slot></slot>
+            </dialog>
+        `;
+  }
+};
+_handleBackdropClick = new WeakSet();
+handleBackdropClick_fn = function() {
+  if (this.clickOutsideToClose) {
+    this.hide();
+  }
+};
+TerraDialog.styles = [component_styles_default, dialog_styles_default];
+__decorateClass([
+  e('[part="dialog"]')
+], TerraDialog.prototype, "dialogEl", 2);
+__decorateClass([
+  n()
+], TerraDialog.prototype, "id", 2);
+__decorateClass([
+  n({ reflect: true })
+], TerraDialog.prototype, "width", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], TerraDialog.prototype, "open", 2);
+__decorateClass([
+  n({ attribute: "click-outside-to-close", type: Boolean, reflect: true })
+], TerraDialog.prototype, "clickOutsideToClose", 2);
+__decorateClass([
+  n({ attribute: "show-backdrop", type: Boolean, reflect: true })
+], TerraDialog.prototype, "showBackdrop", 2);
+
+export {
+  TerraDialog
+};

package/cdn/chunks/{chunk.FKOY3ZZ5.js → chunk.DBZQEOZ6.js}

@@ -1,41 +1,42 @@
 import {
   icon_default
-} from "./chunk.MZT2CCCJ.js";
+} from "./chunk.U35LI4FR.js";
+import {
+  FetchController
+} from "./chunk.VEENI5ZG.js";
 import {
   giovanni_search_styles_default
-} from "./chunk.D7RUNWOI.js";
+} from "./chunk.WGDILZM6.js";
 import {
   clearSelection,
   renderSearchResult,
   walkToOption
 } from "./chunk.WD2DJJFP.js";
-import {
-  FetchController
-} from "./chunk.VEENI5ZG.js";
-import {
-  button_default
-} from "./chunk.L6DGDWB3.js";
 import {
   Fuse
 } from "./chunk.U7L2FN7F.js";
+import {
+  n as n2
+} from "./chunk.2XCNCXGV.js";
 import {
   o
 } from "./chunk.QEA4QW6G.js";
 import {
-  n as n2
-} from "./chunk.2XCNCXGV.js";
+  button_default
+} from "./chunk.EAQZEXSN.js";
 import {
   watch
 } from "./chunk.CBV7M6CJ.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.USZP36DV.js";
+} from "./chunk.ESFWCSLU.js";
 import {
   n,
   r
 } from "./chunk.QCK7PTWV.js";
 import {
+  T,
   s,
   x
 } from "./chunk.PQFHJHNO.js";
@@ -50,11 +51,12 @@ import {
 } from "./chunk.MR27IH5Z.js";
 
 // src/components/giovanni-search/giovanni-search.component.ts
-var _combobox, _fetchController, _listbox, _searchEngine, _walker, _dispatchChange, _handleComboboxChange, _handleOptionClick, _handleKeydown, _manageListboxVisibility, _selectOption, _handleSearch, handleSearch_fn;
+var _combobox, _fetchController, _listbox, _searchEngine, _walker, _handleComboboxChange, _handleOptionClick, _handleKeydown, _manageListboxVisibility, _selectOption, _handleSearch, handleSearch_fn, _clearSearch, clearSearch_fn;
 var _TerraGiovanniSearch = class _TerraGiovanniSearch extends TerraElement {
   constructor() {
     super(...arguments);
     __privateAdd(this, _handleSearch);
+    __privateAdd(this, _clearSearch);
     __privateAdd(this, _combobox, null);
     __privateAdd(this, _fetchController, new FetchController(this));
     __privateAdd(this, _listbox, null);
@@ -70,9 +72,6 @@ var _TerraGiovanniSearch = class _TerraGiovanniSearch extends TerraElement {
     this.isExpanded = false;
     this.query = _TerraGiovanniSearch.initialQuery;
     this.searchResults = [];
-    __privateAdd(this, _dispatchChange, (data) => {
-      this.emit("terra-giovanni-search-change", { detail: data });
-    });
     __privateAdd(this, _handleComboboxChange, (event) => {
       var _a;
       const target = event.target;
@@ -162,7 +161,7 @@ var _TerraGiovanniSearch = class _TerraGiovanniSearch extends TerraElement {
     });
     __privateAdd(this, _selectOption, (option) => {
       this.query = option.id;
-      __privateGet(this, _dispatchChange).call(this, option.id);
+      this.emit("terra-giovanni-search-change", { detail: option.id });
       this.isExpanded = false;
       clearSelection(
         __privateGet(this, _combobox),
@@ -197,6 +196,24 @@ var _TerraGiovanniSearch = class _TerraGiovanniSearch extends TerraElement {
                 >${this.label}</label
             >
             <div class="search-input-group">
+                <terra-button
+                    @click=${() => __privateMethod(this, _handleSearch, handleSearch_fn).call(this, this.query)}
+                    aria-label=${this.query ? `Search for ${this.query}.` : "Enter search term to enable search."}
+                    circle
+                    class="search-button search-input-button"
+                    outline
+                    tabindex="-1"
+                    type="button"
+                >
+                    <slot name="label">
+                        <terra-icon
+                            font-size="1.5em"
+                            library="heroicons"
+                            name="outline-magnifying-glass"
+                        ></terra-icon>
+                    </slot>
+                </terra-button>
+
                 <input
                     ${n2((el) => {
       var _a2;
@@ -219,23 +236,24 @@ var _TerraGiovanniSearch = class _TerraGiovanniSearch extends TerraElement {
                     @input=${__privateGet(this, _handleComboboxChange)}
                     @keydown=${__privateGet(this, _handleKeydown)}
                 />
-                <terra-button
-                    @click=${() => __privateMethod(this, _handleSearch, handleSearch_fn).call(this, this.query)}
-                    aria-label=${this.query ? `Search for ${this.query}.` : "Enter search term to enable search."}
-                    circle
-                    class="search-button search-input-button"
-                    outline
-                    tabindex="-1"
-                    type="button"
-                >
-                    <slot name="label">
-                        <terra-icon
-                            font-size="1.5em"
-                            library="heroicons"
-                            name="solid-magnifying-glass"
-                        ></terra-icon>
-                    </slot>
-                </terra-button>
+
+                ${this.query.length ? x`<terra-button
+                          @click=${() => __privateMethod(this, _clearSearch, clearSearch_fn).call(this)}
+                          aria-label="Clear the searched term and start over."
+                          circle
+                          class="clear-button search-input-button"
+                          outline
+                          tabindex="-1"
+                          type="button"
+                      >
+                          <slot name="label">
+                              <terra-icon
+                                  font-size="1.5em"
+                                  library="heroicons"
+                                  name="outline-x-circle"
+                              ></terra-icon>
+                          </slot>
+                      </terra-button>` : T}
             </div>
 
             <ul
@@ -283,7 +301,6 @@ _fetchController = new WeakMap();
 _listbox = new WeakMap();
 _searchEngine = new WeakMap();
 _walker = new WeakMap();
-_dispatchChange = new WeakMap();
 _handleComboboxChange = new WeakMap();
 _handleOptionClick = new WeakMap();
 _handleKeydown = new WeakMap();
@@ -295,6 +312,17 @@ handleSearch_fn = function(query) {
     this.emit("terra-search", { detail: this.query });
   }
 };
+_clearSearch = new WeakSet();
+clearSearch_fn = function() {
+  var _a;
+  this.query = _TerraGiovanniSearch.initialQuery;
+  this.emit("terra-search", { detail: this.query });
+  clearSelection(
+    __privateGet(this, _combobox),
+    __privateGet(this, _listbox)
+  );
+  (_a = __privateGet(this, _combobox)) == null ? void 0 : _a.focus();
+};
 _TerraGiovanniSearch.dependencies = {
   "terra-button": button_default,
   "terra-icon": icon_default

package/cdn/chunks/{chunk.L6DGDWB3.js → chunk.EAQZEXSN.js}

@@ -1,6 +1,6 @@
 import {
   TerraButton
-} from "./chunk.5EHEQAM7.js";
+} from "./chunk.NLGYM5TP.js";
 
 // src/components/button/button.ts
 var button_default = TerraButton;

package/cdn/chunks/{chunk.USZP36DV.js → chunk.ESFWCSLU.js}

@@ -366,7 +366,7 @@ var TerraElement = class extends s {
 };
 /* eslint-disable */
 // @ts-expect-error This is auto-injected at build time.
-TerraElement.version = "0.0.22";
+TerraElement.version = "0.0.26";
 TerraElement.dependencies = {};
 __decorateClass([
   n()

package/cdn/chunks/chunk.FAICFDGD.js

@@ -0,0 +1,58 @@
+import {
+  i
+} from "./chunk.PH7RLQK2.js";
+
+// src/components/dialog/dialog.styles.ts
+var dialog_styles_default = i`
+    :host {
+        --terra-dialog-backdrop-color: rgba(0, 0, 0, 0.5);
+        --terra-dialog-z-index: 1000;
+
+        display: block;
+    }
+
+    .dialog-backdrop {
+        pointer-events: none;
+        position: fixed;
+        top: 0;
+        left: -9999;
+        right: auto;
+        bottom: auto;
+        width: 0;
+        height: 0;
+        z-index: calc(var(--terra-dialog-z-index) - 1);
+        /* TODO: fade in the backdrop */
+    }
+
+    .dialog-backdrop.visible {
+        background-color: var(--terra-dialog-backdrop-color);
+    }
+
+    .dialog-backdrop.clickable {
+        pointer-events: auto;
+    }
+
+    .dialog-backdrop.active {
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: auto;
+        height: auto;
+    }
+
+    dialog[open] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        position: fixed;
+        inset: 0px;
+        z-index: var(--terra-dialog-z-index);
+        max-width: 100%;
+    }
+`;
+
+export {
+  dialog_styles_default
+};

package/cdn/chunks/{chunk.3SFJTHCH.js → chunk.FPDMMBW3.js}

@@ -7,7 +7,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.USZP36DV.js";
+} from "./chunk.ESFWCSLU.js";
 import {
   e,
   n