@nasa-terra/components 0.0.166 → 0.0.168

package/cdn/chunks/{chunk.CEWP5IJC.js → chunk.AY4NF2HB.js}

@@ -1,6 +1,6 @@
 import {
   TerraSpatialPicker
-} from "./chunk.L5GGODV2.js";
+} from "./chunk.GLN3TMVD.js";
 import {
   init_buffer,
   init_dirname,

package/cdn/chunks/{chunk.5U2IWVC5.js → chunk.B4NPSLHT.js}

@@ -29,7 +29,7 @@ import {
   e as e2,
   n,
   r
-} from "./chunk.KUMH4HR7.js";
+} from "./chunk.EFDI6WO3.js";
 import {
   x
 } from "./chunk.3ZQGAH53.js";

package/cdn/chunks/{chunk.NTNUOPTX.js → chunk.B4XACQ5E.js}

@@ -1,6 +1,6 @@
 import {
   TerraLogin
-} from "./chunk.7EFVZGJT.js";
+} from "./chunk.AEHTLUJA.js";
 import {
   init_buffer,
   init_dirname,

package/cdn/chunks/{chunk.CAUCKEMN.js → chunk.B5VDVEYN.js}

@@ -1,6 +1,6 @@
 import {
   TerraSkeleton
-} from "./chunk.A3T54EUU.js";
+} from "./chunk.T2RI44PG.js";
 import {
   init_buffer,
   init_dirname,

package/cdn/chunks/{chunk.ZW4ZNZ5Q.js → chunk.BDFSCDHG.js}

@@ -1,6 +1,6 @@
 import {
   TerraDatePicker
-} from "./chunk.4WCYXZLF.js";
+} from "./chunk.EAT6PD7V.js";
 import {
   init_buffer,
   init_dirname,

package/cdn/chunks/{chunk.6WWWYCYR.js → chunk.BFNY5GH4.js}

@@ -1,6 +1,6 @@
 import {
   TerraPlotToolbar
-} from "./chunk.6PFYGYKS.js";
+} from "./chunk.CNEFZTCX.js";
 import {
   init_buffer,
   init_dirname,

package/cdn/chunks/{chunk.YRV5UZ3I.js → chunk.BIWAQAE5.js}

@@ -1,6 +1,6 @@
 import {
   TerraTabs
-} from "./chunk.H5Z74FWA.js";
+} from "./chunk.5OE7GWMD.js";
 import {
   init_buffer,
   init_dirname,

package/cdn/chunks/{chunk.KRY4ZHWR.js → chunk.BP2XEH4Z.js}

@@ -11,7 +11,7 @@ import {
   TerraElement,
   component_styles_default,
   n
-} from "./chunk.KUMH4HR7.js";
+} from "./chunk.EFDI6WO3.js";
 import {
   x
 } from "./chunk.3ZQGAH53.js";

package/cdn/chunks/{chunk.GWWC3QQS.js → chunk.BSITYHX6.js}

@@ -1,6 +1,6 @@
 import {
   TerraDivider
-} from "./chunk.IHI43HDN.js";
+} from "./chunk.DUXFSD4C.js";
 import {
   init_buffer,
   init_dirname,

package/cdn/chunks/{chunk.PKCKUAAB.js → chunk.CCW2WFCG.js}

@@ -1,6 +1,6 @@
 import {
   TerraTag
-} from "./chunk.FH4ZOM4T.js";
+} from "./chunk.K7QRFF5V.js";
 import {
   init_buffer,
   init_dirname,

package/cdn/chunks/{chunk.U2B2EWRM.js → chunk.CEE5OQDS.js}

@@ -8,7 +8,7 @@ import {
   TerraElement,
   component_styles_default,
   n
-} from "./chunk.KUMH4HR7.js";
+} from "./chunk.EFDI6WO3.js";
 import {
   x
 } from "./chunk.3ZQGAH53.js";

package/cdn/chunks/{chunk.PV6S5I6E.js → chunk.CHDWVVLW.js}

@@ -1,6 +1,6 @@
 import {
   TerraDataGrid
-} from "./chunk.KECWWXPM.js";
+} from "./chunk.6TIV4MKY.js";
 import {
   init_buffer,
   init_dirname,

package/cdn/chunks/{chunk.BHSQOFI5.js → chunk.CI6LWSO7.js}

@@ -1,6 +1,6 @@
 import {
   TerraButtonGroup
-} from "./chunk.O3YDYYKY.js";
+} from "./chunk.YBB7K7LI.js";
 import {
   init_buffer,
   init_dirname,

package/cdn/chunks/{chunk.6PFYGYKS.js → chunk.CNEFZTCX.js}

@@ -1,9 +1,9 @@
 import {
   getTimeAveragedMapNotebook
-} from "./chunk.UIYLWXWA.js";
+} from "./chunk.ZN6PR35U.js";
 import {
   getTimeSeriesNotebook
-} from "./chunk.2PWPZYVI.js";
+} from "./chunk.NX5ANPIE.js";
 import {
   DB_NAME,
   getDataByKey
@@ -13,7 +13,7 @@ import {
 } from "./chunk.R2LK7SNC.js";
 import {
   plot_toolbar_styles_default
-} from "./chunk.FXM6K5HM.js";
+} from "./chunk.3PZB6AVW.js";
 import {
   require_plotly_min
 } from "./chunk.I373DBBC.js";
@@ -22,7 +22,7 @@ import {
 } from "./chunk.PBKMNUYF.js";
 import {
   TerraMap
-} from "./chunk.SMCSXCOR.js";
+} from "./chunk.FJQIFYK2.js";
 import {
   parseBoundingBox
 } from "./chunk.ZVQIG4FI.js";
@@ -31,13 +31,13 @@ import {
 } from "./chunk.AH6W6EGS.js";
 import {
   TerraButton
-} from "./chunk.BKGML3KE.js";
+} from "./chunk.DRCDC73I.js";
 import {
   formatDate
 } from "./chunk.WE52YORO.js";
 import {
   TerraIcon
-} from "./chunk.RAXA7INK.js";
+} from "./chunk.KEDEH6QG.js";
 import {
   watch
 } from "./chunk.5WMSKURU.js";
@@ -47,7 +47,7 @@ import {
   e,
   n,
   r
-} from "./chunk.KUMH4HR7.js";
+} from "./chunk.EFDI6WO3.js";
 import {
   E,
   x
@@ -69,7 +69,7 @@ init_dirname();
 init_buffer();
 init_process();
 var Plotly = __toESM(require_plotly_min(), 1);
-var _tooltipTimeout, _controller, _handleLocationMouseEnter, handleLocationMouseEnter_fn, _handleLocationMouseLeave, handleLocationMouseLeave_fn, _getLocationIcon, getLocationIcon_fn, _getDateRangeIcon, getDateRangeIcon_fn, _toggleMobileTitle, toggleMobileTitle_fn, _handleActiveMenuItem, handleActiveMenuItem_fn, _handleMenuLeave, handleMenuLeave_fn, _onShowOpacityChange, _onColorMapChange, _showCheckBoxToggle, _renderGeotiffPanel, renderGeotiffPanel_fn, _renderInfoPanel, renderInfoPanel_fn, _renderCitationPanel, renderCitationPanel_fn, _renderDownloadPanel, renderDownloadPanel_fn, _renderImageDownloadButtons, renderImageDownloadButtons_fn, _renderHelpPanel, renderHelpPanel_fn, _renderJupyterNotebookPanel, renderJupyterNotebookPanel_fn, _handleJupyterNotebookClick, handleJupyterNotebookClick_fn, _sendDataToJupyterNotebook, sendDataToJupyterNotebook_fn, _sendTimeSeriesDataToJupyterNotebook, sendTimeSeriesDataToJupyterNotebook_fn, _sendMapDataToJupyterNotebook, sendMapDataToJupyterNotebook_fn, _downloadPNG, downloadPNG_fn, _downloadJPG, downloadJPG_fn, _downloadCSV, downloadCSV_fn, _convertToCSV, convertToCSV_fn, _downloadGeotiff, downloadGeotiff_fn, _downloadMapPNG, downloadMapPNG_fn, _downloadMapJPG, downloadMapJPG_fn;
+var _tooltipTimeout, _controller, _isBottomSheetDragging, _bottomSheetStartY, _handleLocationMouseEnter, handleLocationMouseEnter_fn, _handleLocationMouseLeave, handleLocationMouseLeave_fn, _getLocationIcon, getLocationIcon_fn, _getDateRangeIcon, getDateRangeIcon_fn, _toggleMobileTitle, toggleMobileTitle_fn, _onBottomSheetTouchStart, onBottomSheetTouchStart_fn, _onBottomSheetTouchMove, onBottomSheetTouchMove_fn, _onBottomSheetMouseDown, onBottomSheetMouseDown_fn, _handleBottomSheetStartDrag, handleBottomSheetStartDrag_fn, _handleBottomSheetMoveDrag, handleBottomSheetMoveDrag_fn, _handleBottomSheetEndDrag, handleBottomSheetEndDrag_fn, _handleBottomSheetClose, handleBottomSheetClose_fn, _handleActiveMenuItem, handleActiveMenuItem_fn, _handleMenuLeave, handleMenuLeave_fn, _onShowOpacityChange, _onColorMapChange, _showCheckBoxToggle, _renderGeotiffPanel, renderGeotiffPanel_fn, _renderInfoPanel, renderInfoPanel_fn, _renderMobileInfoPanel, renderMobileInfoPanel_fn, _renderCitationPanel, renderCitationPanel_fn, _renderDownloadPanel, renderDownloadPanel_fn, _renderImageDownloadButtons, renderImageDownloadButtons_fn, _renderHelpPanel, renderHelpPanel_fn, _renderJupyterNotebookPanel, renderJupyterNotebookPanel_fn, _handleJupyterNotebookClick, handleJupyterNotebookClick_fn, _sendDataToJupyterNotebook, sendDataToJupyterNotebook_fn, _sendTimeSeriesDataToJupyterNotebook, sendTimeSeriesDataToJupyterNotebook_fn, _sendMapDataToJupyterNotebook, sendMapDataToJupyterNotebook_fn, _downloadPNG, downloadPNG_fn, _downloadJPG, downloadJPG_fn, _downloadCSV, downloadCSV_fn, _convertToCSV, convertToCSV_fn, _downloadGeotiff, downloadGeotiff_fn, _downloadMapPNG, downloadMapPNG_fn, _downloadMapJPG, downloadMapJPG_fn, _normalizeMetadata, normalizeMetadata_fn;
 var TerraPlotToolbar = class extends TerraElement {
   constructor() {
     super(...arguments);
@@ -78,10 +78,18 @@ var TerraPlotToolbar = class extends TerraElement {
     __privateAdd(this, _getLocationIcon);
     __privateAdd(this, _getDateRangeIcon);
     __privateAdd(this, _toggleMobileTitle);
+    __privateAdd(this, _onBottomSheetTouchStart);
+    __privateAdd(this, _onBottomSheetTouchMove);
+    __privateAdd(this, _onBottomSheetMouseDown);
+    __privateAdd(this, _handleBottomSheetStartDrag);
+    __privateAdd(this, _handleBottomSheetMoveDrag);
+    __privateAdd(this, _handleBottomSheetEndDrag);
+    __privateAdd(this, _handleBottomSheetClose);
     __privateAdd(this, _handleActiveMenuItem);
     __privateAdd(this, _handleMenuLeave);
     __privateAdd(this, _renderGeotiffPanel);
     __privateAdd(this, _renderInfoPanel);
+    __privateAdd(this, _renderMobileInfoPanel);
     __privateAdd(this, _renderCitationPanel);
     __privateAdd(this, _renderDownloadPanel);
     __privateAdd(this, _renderImageDownloadButtons);
@@ -98,12 +106,24 @@ var TerraPlotToolbar = class extends TerraElement {
     __privateAdd(this, _downloadGeotiff);
     __privateAdd(this, _downloadMapPNG);
     __privateAdd(this, _downloadMapJPG);
+    /**
+     * Converts raw object with human-readable keys
+     * (e.g. "User Start Date:", "Fill Value:")
+     * into a cleaner camelCase object usable in code
+     * (e.g. metadata.userStartDate, metadata.fillValue).
+     *
+     * @param raw - Original object with human-readable keys
+     * @returns Normalized object with camelCase keys
+     */
+    __privateAdd(this, _normalizeMetadata);
     this.showLocation = true;
     this.colormaps = [];
     this.colorMapName = "viridis";
     this.opacity = 1;
     this.showCitation = false;
+    this.showJupyter = true;
     this.mobileView = false;
+    this.bottomSheetDragY = 0;
     this.hideTitle = false;
     this.activeMenuItem = null;
     this.showLocationTooltip = false;
@@ -111,6 +131,8 @@ var TerraPlotToolbar = class extends TerraElement {
     __privateAdd(this, _tooltipTimeout, null);
     this._authController = new AuthController(this);
     __privateAdd(this, _controller, new PlotToolbarController(this));
+    __privateAdd(this, _isBottomSheetDragging, false);
+    __privateAdd(this, _bottomSheetStartY, 0);
     __privateAdd(this, _onShowOpacityChange, (e2) => {
       this.opacity = parseFloat(e2.target.value);
       this.dispatchEvent(
@@ -164,7 +186,8 @@ var TerraPlotToolbar = class extends TerraElement {
       this.catalogVariable.dataProductTimeInterval
     ].filter(Boolean).filter((value) => value.toLowerCase() !== "not applicable");
     return h(
-      !this.catalogVariable ? x`<div class="spacer"></div>` : x` <header>
+      !this.catalogVariable ? x`<div class="spacer"></div>` : x`
+                      <header>
                           <div class="title-container">
                               <slot name="title">
                                   <h2 class="title" @click=${__privateMethod(this, _toggleMobileTitle, toggleMobileTitle_fn)}>
@@ -291,29 +314,30 @@ var TerraPlotToolbar = class extends TerraElement {
                                       font-size="1em"
                                   ></terra-icon>
                               </terra-button>
-                              <terra-button
-                                  outline
-                                  aria-expanded=${this.activeMenuItem === "jupyter"}
-                                  aria-controls="menu"
-                                  aria-haspopup="true"
-                                  class="toggle square-button"
-                                  variant="warning"
-                                  @mouseenter=${__privateMethod(this, _handleActiveMenuItem, handleActiveMenuItem_fn)}
-                                  @click=${__privateMethod(this, _handleActiveMenuItem, handleActiveMenuItem_fn)}
-                                  data-menu-name="jupyter"
-                              >
-                                  <span class="sr-only"
-                                      >Open in Jupyter Notebook for
-                                      ${this.catalogVariable.dataFieldLongName}</span
-                                  >
-
-                                  <terra-icon
-                                      name="outline-code-bracket"
-                                      library="heroicons"
-                                      font-size="1.5em"
-                                  ></terra-icon>
-                              </terra-button>
+                              ${this.showJupyter ? x`
+                                        <terra-button
+                                            outline
+                                            aria-expanded=${this.activeMenuItem === "jupyter"}
+                                            aria-controls="menu"
+                                            aria-haspopup="true"
+                                            class="toggle square-button"
+                                            variant="warning"
+                                            @mouseenter=${__privateMethod(this, _handleActiveMenuItem, handleActiveMenuItem_fn)}
+                                            @click=${__privateMethod(this, _handleActiveMenuItem, handleActiveMenuItem_fn)}
+                                            data-menu-name="jupyter"
+                                        >
+                                            <span class="sr-only"
+                                                >Open in Jupyter Notebook for
+                                                ${this.catalogVariable.dataFieldLongName}</span
+                                            >
 
+                                            <terra-icon
+                                                name="outline-code-bracket"
+                                                library="heroicons"
+                                                font-size="1.5em"
+                                            ></terra-icon>
+                                        </terra-button>
+                                    ` : E}
                               ${this.dataType == "geotiff" ? x`
                                         <terra-button
                                             circle
@@ -401,28 +425,37 @@ var TerraPlotToolbar = class extends TerraElement {
                                 ` : ""}
                       </header>
 
-                      ${this.mobileView ? x`<dialog
-                                ?open=${!!this.activeMenuItem}
-                                class="menu-dialog"
-                            >
-                                <terra-button outline @click=${this.closeMenu}>
-                                    Close
-                                </terra-button>
-                                <div class="spacer"></div>
-                                <div>
-                                    ${this.activeMenuItem === "information" ? __privateMethod(this, _renderInfoPanel, renderInfoPanel_fn).call(this) : ""}
-                                    ${this.activeMenuItem === "citation" ? __privateMethod(this, _renderCitationPanel, renderCitationPanel_fn).call(this) : ""}
-                                    ${this.activeMenuItem === "download" ? __privateMethod(this, _renderDownloadPanel, renderDownloadPanel_fn).call(this) : ""}
-                                    ${this.activeMenuItem === "help" ? __privateMethod(this, _renderHelpPanel, renderHelpPanel_fn).call(this) : ""}
-                                    ${this.activeMenuItem === "jupyter" ? __privateMethod(this, _renderJupyterNotebookPanel, renderJupyterNotebookPanel_fn).call(this) : ""}
-                                    ${this.activeMenuItem === "GeoTIFF" ? __privateMethod(this, _renderGeotiffPanel, renderGeotiffPanel_fn).call(this) : ""}
-                                </div>
-                            </dialog>` : E}`
+                      ${this.mobileView ? x` <div
+                                    class="bottom-sheet-backdrop"
+                                    data-state=${this.activeMenuItem ? "open" : "close"}
+                                    @click=${__privateMethod(this, _handleBottomSheetClose, handleBottomSheetClose_fn)}
+                                ></div>
+                                <div
+                                    data-state=${this.activeMenuItem ? "open" : "close"}
+                                    class="bottom-sheet"
+                                    @touchstart=${__privateMethod(this, _onBottomSheetTouchStart, onBottomSheetTouchStart_fn)}
+                                    @touchmove=${__privateMethod(this, _onBottomSheetTouchMove, onBottomSheetTouchMove_fn)}
+                                    @touchend=${__privateMethod(this, _handleBottomSheetEndDrag, handleBottomSheetEndDrag_fn)}
+                                    @mousedown=${__privateMethod(this, _onBottomSheetMouseDown, onBottomSheetMouseDown_fn)}
+                                >
+                                    <div class="bottom-sheet-handle"></div>
+                                    <div class="bottom-sheet-content">
+                                        ${this.activeMenuItem === "information" ? __privateMethod(this, _renderMobileInfoPanel, renderMobileInfoPanel_fn).call(this) : ""}
+                                        ${this.activeMenuItem === "citation" ? __privateMethod(this, _renderCitationPanel, renderCitationPanel_fn).call(this) : ""}
+                                        ${this.activeMenuItem === "download" ? __privateMethod(this, _renderDownloadPanel, renderDownloadPanel_fn).call(this) : ""}
+                                        ${this.activeMenuItem === "help" ? __privateMethod(this, _renderHelpPanel, renderHelpPanel_fn).call(this) : ""}
+                                        ${this.activeMenuItem === "jupyter" ? __privateMethod(this, _renderJupyterNotebookPanel, renderJupyterNotebookPanel_fn).call(this) : ""}
+                                        ${this.activeMenuItem === "GeoTIFF" ? __privateMethod(this, _renderGeotiffPanel, renderGeotiffPanel_fn).call(this) : ""}
+                                    </div>
+                                </div>` : E}
+                  `
     );
   }
 };
 _tooltipTimeout = new WeakMap();
 _controller = new WeakMap();
+_isBottomSheetDragging = new WeakMap();
+_bottomSheetStartY = new WeakMap();
 _handleLocationMouseEnter = new WeakSet();
 handleLocationMouseEnter_fn = function() {
   if (this.location && this.location.trim()) {
@@ -475,6 +508,82 @@ toggleMobileTitle_fn = function() {
     return;
   this.hideTitle = !this.hideTitle;
 };
+_onBottomSheetTouchStart = new WeakSet();
+onBottomSheetTouchStart_fn = function(e2) {
+  __privateMethod(this, _handleBottomSheetStartDrag, handleBottomSheetStartDrag_fn).call(this, e2.touches[0].clientY, e2.target);
+};
+_onBottomSheetTouchMove = new WeakSet();
+onBottomSheetTouchMove_fn = function(e2) {
+  if (!__privateGet(this, _isBottomSheetDragging))
+    return;
+  __privateMethod(this, _handleBottomSheetMoveDrag, handleBottomSheetMoveDrag_fn).call(this, e2.touches[0].clientY);
+  if (this.bottomSheetDragY > 0) {
+    e2.cancelable && e2.preventDefault();
+  }
+};
+_onBottomSheetMouseDown = new WeakSet();
+onBottomSheetMouseDown_fn = function(e2) {
+  __privateMethod(this, _handleBottomSheetStartDrag, handleBottomSheetStartDrag_fn).call(this, e2.clientY, e2.target);
+  const move = (ev) => __privateMethod(this, _handleBottomSheetMoveDrag, handleBottomSheetMoveDrag_fn).call(this, ev.clientY);
+  const up = () => {
+    __privateMethod(this, _handleBottomSheetEndDrag, handleBottomSheetEndDrag_fn).call(this);
+    window.removeEventListener("mousemove", move);
+    window.removeEventListener("mouseup", up);
+  };
+  window.addEventListener("mousemove", move);
+  window.addEventListener("mouseup", up);
+};
+_handleBottomSheetStartDrag = new WeakSet();
+handleBottomSheetStartDrag_fn = function(y, target) {
+  if (!this.activeMenuItem)
+    return;
+  const content = this.bottomSheet.querySelector(".bottom-sheet-content");
+  if (content && content.scrollTop > 0 && target !== this.bottomSheet)
+    return;
+  __privateSet(this, _isBottomSheetDragging, true);
+  __privateSet(this, _bottomSheetStartY, y);
+  this.bottomSheetDragY = 0;
+  this.bottomSheet.style.transition = "none";
+};
+_handleBottomSheetMoveDrag = new WeakSet();
+handleBottomSheetMoveDrag_fn = function(y) {
+  this.bottomSheetDragY = y - __privateGet(this, _bottomSheetStartY);
+  if (!__privateGet(this, _isBottomSheetDragging))
+    return;
+  if (this.bottomSheetDragY > 0) {
+    this.bottomSheet.style.transform = `translate(-50%, ${this.bottomSheetDragY}px)`;
+  }
+};
+_handleBottomSheetEndDrag = new WeakSet();
+handleBottomSheetEndDrag_fn = function() {
+  const SWIPE_TO_CLOSE_THRESHOLD = 20;
+  if (!__privateGet(this, _isBottomSheetDragging))
+    return;
+  __privateSet(this, _isBottomSheetDragging, false);
+  this.bottomSheet.style.transition = "transform 0.35s cubic-bezier(0.25,1,0.5,1)";
+  if (this.bottomSheetDragY > SWIPE_TO_CLOSE_THRESHOLD) {
+    __privateMethod(this, _handleBottomSheetClose, handleBottomSheetClose_fn).call(this);
+  } else {
+    this.bottomSheet.style.transform = "translate(-50%, 0)";
+  }
+  this.bottomSheetDragY = 0;
+};
+_handleBottomSheetClose = new WeakSet();
+handleBottomSheetClose_fn = function() {
+  this.bottomSheet.style.transform = "translate(-50%, 100%)";
+  setTimeout(() => {
+    this.closeMenu();
+    this.bottomSheet.style.transform = "";
+  }, 150);
+  const scrollY = Number(document.body.dataset.scrollLockY || 0);
+  document.body.style.position = "";
+  document.body.style.top = "";
+  document.body.style.left = "";
+  document.body.style.right = "";
+  document.body.style.width = "";
+  delete document.body.dataset.scrollLockY;
+  window.scrollTo(0, scrollY);
+};
 _handleActiveMenuItem = new WeakSet();
 handleActiveMenuItem_fn = function(event) {
   if (this.mobileView && event.type === "mouseenter") {
@@ -483,6 +592,15 @@ handleActiveMenuItem_fn = function(event) {
   const button = event.currentTarget;
   const menuName = button.dataset.menuName;
   this.activeMenuItem = menuName;
+  if (this.mobileView) {
+    const scrollY = window.scrollY;
+    document.body.dataset.scrollLockY = String(scrollY);
+    document.body.style.position = "fixed";
+    document.body.style.top = `-${scrollY}px`;
+    document.body.style.left = "0";
+    document.body.style.right = "0";
+    document.body.style.width = "100%";
+  }
 };
 _handleMenuLeave = new WeakSet();
 handleMenuLeave_fn = function(event) {
@@ -595,6 +713,92 @@ renderInfoPanel_fn = function() {
             </dl>
         `;
 };
+_renderMobileInfoPanel = new WeakSet();
+renderMobileInfoPanel_fn = function() {
+  var _a;
+  const locationArr = this.location.trim().split(",");
+  const isLatLon = locationArr.length === 2;
+  const isBoundingBox = locationArr.length === 4;
+  const timeAvgMetadata = isBoundingBox ? __privateMethod(this, _normalizeMetadata, normalizeMetadata_fn).call(this, this.metadata) : this.metadata;
+  return x`
+            <h3>Request</h3>
+            <ul class="bottom-sheet-list">
+                ${isLatLon ? x` <li>
+                          <strong>Timestamp: </strong>${formatDate(
+    this.metadata.Request_time,
+    "yyyy-MM-dd HH:mm"
+  )}
+                      </li>` : ""}
+                <li>
+                    <strong>Begin Datetime: </strong>${formatDate(
+    isBoundingBox ? timeAvgMetadata.userStartDate : this.metadata.begin_time
+  )}
+                </li>
+                <li>
+                    <strong>End Datetime: </strong>${formatDate(
+    isBoundingBox ? timeAvgMetadata.userEndDate : this.metadata.end_time
+  )}
+                </li>
+                <li>
+                    <strong>${isBoundingBox ? "West" : "Lat"}: </strong
+                    >${locationArr[0]}
+                </li>
+                <li>
+                    <strong>${isBoundingBox ? "South" : "Lon"}: </strong
+                    >${locationArr[1]}
+                </li>
+                ${isBoundingBox ? x`
+                          <li><strong>East: </strong>${locationArr[2]}</li>
+                          <li><strong>North: </strong>${locationArr[3]}</li>
+                      ` : ""}
+            </ul>
+
+            <h3>Data Variable</h3>
+            <ul class="bottom-sheet-list">
+                ${this.productLabel ? x`<li><strong>Label: </strong>${this.productLabel}</li>` : ""}
+                <li>
+                    <strong>Longname: </strong>${this.catalogVariable.dataFieldLongName}
+                </li>
+                <li>
+                    <strong>Shortname: </strong>
+                    ${(_a = this.catalogVariable.dataFieldShortName) != null ? _a : this.catalogVariable.dataFieldAccessName}
+                </li>
+                <li>
+                    <strong>Units: </strong>
+                    ${this.catalogVariable.dataFieldUnits}
+                </li>
+                <li>
+                    <strong>Fill Value: </strong>
+                    ${isBoundingBox ? timeAvgMetadata.fillValue : this.metadata.undef}
+                </li>
+
+                <li>
+                    <strong>Data Product Name: </strong>
+                    ${this.catalogVariable.dataProductShortName}.${this.catalogVariable.dataProductVersion}
+                </li>
+                ${isLatLon ? x`<li><strong>Mean Value: </strong>${this.metadata.mean}</li>
+                          <li>
+                              <strong>Lat. Resolution: </strong>${this.metadata.lat_resolution}
+                          </li>
+                          <li>
+                              <strong>Lon. Resolution: </strong>${this.metadata.lon_resolution}
+                          </li>
+                          <li><strong>DOI: </strong>${this.metadata.doi}</li>` : ""}
+                <li>
+                    <a
+                        href=${this.catalogVariable.dataProductDescriptionUrl}
+                        rel="noopener noreffer"
+                        target="_blank"
+                        >Dataset Information
+                        <terra-icon
+                            name="outline-arrow-top-right-on-square"
+                            library="heroicons"
+                        ></terra-icon>
+                    </a>
+                </li>
+            </ul>
+        `;
+};
 _renderCitationPanel = new WeakSet();
 renderCitationPanel_fn = function() {
   var _a, _b;
@@ -918,6 +1122,15 @@ _downloadMapJPG = new WeakSet();
 downloadMapJPG_fn = function() {
   this.emit("terra-plot-toolbar-export-image", { detail: { format: "jpg" } });
 };
+_normalizeMetadata = new WeakSet();
+normalizeMetadata_fn = function(raw) {
+  const result = {};
+  Object.entries(raw).forEach(([key, value]) => {
+    const cleanKey = key.replace(/:$/, "").toLowerCase().replace(/[^a-z0-9]+(.)/g, (_, c) => c.toUpperCase());
+    result[cleanKey] = value;
+  });
+  return result;
+};
 TerraPlotToolbar.styles = [component_styles_default, plot_toolbar_styles_default];
 TerraPlotToolbar.dependencies = {
   "terra-icon": TerraIcon,
@@ -969,15 +1182,21 @@ __decorateClass([
 __decorateClass([
   n({ type: Boolean, attribute: "show-citation" })
 ], TerraPlotToolbar.prototype, "showCitation", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "show-jupyter" })
+], TerraPlotToolbar.prototype, "showJupyter", 2);
 __decorateClass([
   n({ attribute: "application-citation" })
 ], TerraPlotToolbar.prototype, "applicationCitation", 2);
 __decorateClass([
-  n({ type: Boolean, attribute: "mobile-view", reflect: true })
+  n()
 ], TerraPlotToolbar.prototype, "mobileView", 2);
 __decorateClass([
-  n({ attribute: "product-label" })
+  n()
 ], TerraPlotToolbar.prototype, "productLabel", 2);
+__decorateClass([
+  n({ type: Number })
+], TerraPlotToolbar.prototype, "bottomSheetDragY", 2);
 __decorateClass([
   r()
 ], TerraPlotToolbar.prototype, "hideTitle", 2);
@@ -993,6 +1212,9 @@ __decorateClass([
 __decorateClass([
   e("#menu")
 ], TerraPlotToolbar.prototype, "menu", 2);
+__decorateClass([
+  e(".bottom-sheet")
+], TerraPlotToolbar.prototype, "bottomSheet", 2);
 __decorateClass([
   watch("activeMenuItem")
 ], TerraPlotToolbar.prototype, "handleFocus", 1);

package/cdn/chunks/{chunk.E7R2HOGC.js → chunk.CNLQ4XUE.js}

@@ -5,7 +5,7 @@ import {
   TerraElement,
   component_styles_default,
   n
-} from "./chunk.KUMH4HR7.js";
+} from "./chunk.EFDI6WO3.js";
 import {
   x
 } from "./chunk.3ZQGAH53.js";

package/cdn/chunks/{chunk.ITSTA3ZC.js → chunk.CTANM47O.js}

@@ -1,6 +1,6 @@
 import {
   TerraBreadcrumb
-} from "./chunk.4DZLVMBX.js";
+} from "./chunk.MVJCA6VM.js";
 import {
   init_buffer,
   init_dirname,

package/cdn/chunks/{chunk.MSILM23F.js → chunk.CXQOVGV4.js}

@@ -1,17 +1,17 @@
-import {
-  clearSelection,
-  renderSearchResult,
-  walkToOption
-} from "./chunk.HLOPKNNF.js";
 import {
   FetchController
 } from "./chunk.W7KGVFJQ.js";
 import {
   variable_keyword_search_styles_default
 } from "./chunk.RLFRG4VE.js";
+import {
+  clearSelection,
+  renderSearchResult,
+  walkToOption
+} from "./chunk.HLOPKNNF.js";
 import {
   icon_default
-} from "./chunk.PFBKBSP4.js";
+} from "./chunk.VUNJL3W6.js";
 import {
   Fuse
 } from "./chunk.4EKARCDF.js";
@@ -23,7 +23,7 @@ import {
 } from "./chunk.K6SKQZRX.js";
 import {
   button_default
-} from "./chunk.A3SJZOUA.js";
+} from "./chunk.XTWPVKRT.js";
 import {
   watch
 } from "./chunk.5WMSKURU.js";
@@ -32,7 +32,7 @@ import {
   component_styles_default,
   n,
   r
-} from "./chunk.KUMH4HR7.js";
+} from "./chunk.EFDI6WO3.js";
 import {
   E,
   i,