@nasa-terra/components 0.0.166 → 0.0.168

package/dist/chunks/{chunk.HC2SQAEF.js → chunk.FF53Q6W3.js}

@@ -1,9 +1,9 @@
 import {
   getTimeAveragedMapNotebook
-} from "./chunk.7QJQ2DXQ.js";
+} from "./chunk.XBRKSIRT.js";
 import {
   getTimeSeriesNotebook
-} from "./chunk.7PMEGYW2.js";
+} from "./chunk.2FA2ZTXQ.js";
 import {
   DB_NAME,
   getDataByKey
@@ -13,32 +13,32 @@ import {
 } from "./chunk.SU5KHWCD.js";
 import {
   plot_toolbar_styles_default
-} from "./chunk.QXGAOOH7.js";
+} from "./chunk.AZ6MIDIS.js";
 import {
   AuthController
 } from "./chunk.DHM36JBP.js";
 import {
   TerraMap
-} from "./chunk.ILRMVHSR.js";
+} from "./chunk.2TGXHKAI.js";
 import {
   parseBoundingBox
 } from "./chunk.JB5255IQ.js";
 import {
   TerraButton
-} from "./chunk.H55ECC7H.js";
+} from "./chunk.ERYTQX7O.js";
 import {
   formatDate
 } from "./chunk.Y4QEHGFE.js";
 import {
   TerraIcon
-} from "./chunk.TXLPR457.js";
+} from "./chunk.NRSI3X33.js";
 import {
   watch
 } from "./chunk.NWXJOH5T.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.TWKB7X6P.js";
+} from "./chunk.LYAKY2WI.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -53,7 +53,7 @@ import { html } from "lit";
 import * as Plotly from "plotly.js-dist-min";
 import { cache } from "lit/directives/cache.js";
 import { nothing } from "lit";
-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);
@@ -62,10 +62,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);
@@ -82,12 +90,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;
@@ -95,6 +115,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, (e) => {
       this.opacity = parseFloat(e.target.value);
       this.dispatchEvent(
@@ -148,7 +170,8 @@ var TerraPlotToolbar = class extends TerraElement {
       this.catalogVariable.dataProductTimeInterval
     ].filter(Boolean).filter((value) => value.toLowerCase() !== "not applicable");
     return cache(
-      !this.catalogVariable ? html`<div class="spacer"></div>` : html` <header>
+      !this.catalogVariable ? html`<div class="spacer"></div>` : html`
+                      <header>
                           <div class="title-container">
                               <slot name="title">
                                   <h2 class="title" @click=${__privateMethod(this, _toggleMobileTitle, toggleMobileTitle_fn)}>
@@ -275,29 +298,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 ? html`
+                                        <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>
+                                    ` : nothing}
                               ${this.dataType == "geotiff" ? html`
                                         <terra-button
                                             circle
@@ -385,28 +409,37 @@ var TerraPlotToolbar = class extends TerraElement {
                                 ` : ""}
                       </header>
 
-                      ${this.mobileView ? html`<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>` : nothing}`
+                      ${this.mobileView ? html` <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>` : nothing}
+                  `
     );
   }
 };
 _tooltipTimeout = new WeakMap();
 _controller = new WeakMap();
+_isBottomSheetDragging = new WeakMap();
+_bottomSheetStartY = new WeakMap();
 _handleLocationMouseEnter = new WeakSet();
 handleLocationMouseEnter_fn = function() {
   if (this.location && this.location.trim()) {
@@ -459,6 +492,82 @@ toggleMobileTitle_fn = function() {
     return;
   this.hideTitle = !this.hideTitle;
 };
+_onBottomSheetTouchStart = new WeakSet();
+onBottomSheetTouchStart_fn = function(e) {
+  __privateMethod(this, _handleBottomSheetStartDrag, handleBottomSheetStartDrag_fn).call(this, e.touches[0].clientY, e.target);
+};
+_onBottomSheetTouchMove = new WeakSet();
+onBottomSheetTouchMove_fn = function(e) {
+  if (!__privateGet(this, _isBottomSheetDragging))
+    return;
+  __privateMethod(this, _handleBottomSheetMoveDrag, handleBottomSheetMoveDrag_fn).call(this, e.touches[0].clientY);
+  if (this.bottomSheetDragY > 0) {
+    e.cancelable && e.preventDefault();
+  }
+};
+_onBottomSheetMouseDown = new WeakSet();
+onBottomSheetMouseDown_fn = function(e) {
+  __privateMethod(this, _handleBottomSheetStartDrag, handleBottomSheetStartDrag_fn).call(this, e.clientY, e.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") {
@@ -467,6 +576,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) {
@@ -579,6 +697,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 html`
+            <h3>Request</h3>
+            <ul class="bottom-sheet-list">
+                ${isLatLon ? html` <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 ? html`
+                          <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 ? html`<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 ? html`<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;
@@ -902,6 +1106,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,
@@ -953,15 +1166,21 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: "show-citation" })
 ], TerraPlotToolbar.prototype, "showCitation", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-jupyter" })
+], TerraPlotToolbar.prototype, "showJupyter", 2);
 __decorateClass([
   property({ attribute: "application-citation" })
 ], TerraPlotToolbar.prototype, "applicationCitation", 2);
 __decorateClass([
-  property({ type: Boolean, attribute: "mobile-view", reflect: true })
+  property()
 ], TerraPlotToolbar.prototype, "mobileView", 2);
 __decorateClass([
-  property({ attribute: "product-label" })
+  property()
 ], TerraPlotToolbar.prototype, "productLabel", 2);
+__decorateClass([
+  property({ type: Number })
+], TerraPlotToolbar.prototype, "bottomSheetDragY", 2);
 __decorateClass([
   state()
 ], TerraPlotToolbar.prototype, "hideTitle", 2);
@@ -977,6 +1196,9 @@ __decorateClass([
 __decorateClass([
   query("#menu")
 ], TerraPlotToolbar.prototype, "menu", 2);
+__decorateClass([
+  query(".bottom-sheet")
+], TerraPlotToolbar.prototype, "bottomSheet", 2);
 __decorateClass([
   watch("activeMenuItem")
 ], TerraPlotToolbar.prototype, "handleFocus", 1);

package/dist/chunks/{chunk.L3N6UJTV.js → chunk.FIF2MCFJ.js}

@@ -7,7 +7,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.TWKB7X6P.js";
+} from "./chunk.LYAKY2WI.js";
 
 // src/components/card/card.component.ts
 import { classMap } from "lit/directives/class-map.js";

package/dist/chunks/{chunk.SNR4NW4K.js → chunk.FTB5KNZB.js}

@@ -1,6 +1,6 @@
 import {
   TerraPagination
-} from "./chunk.KB3UJ6US.js";
+} from "./chunk.LY6TPOZN.js";
 
 // src/react/pagination/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.EMP5FCG3.js → chunk.FU7A4FOK.js}

@@ -1,6 +1,6 @@
 import {
   TerraPlotToolbar
-} from "./chunk.HC2SQAEF.js";
+} from "./chunk.FF53Q6W3.js";
 
 // src/components/plot-toolbar/plot-toolbar.ts
 var plot_toolbar_default = TerraPlotToolbar;

package/dist/chunks/{chunk.LIUF4S2Q.js → chunk.GE3TZOSP.js}

@@ -1,6 +1,6 @@
 import {
   TerraPopup
-} from "./chunk.OJZMREF2.js";
+} from "./chunk.F57E2W2V.js";
 import {
   dropdown_styles_default
 } from "./chunk.Z2H7IRYZ.js";
@@ -24,7 +24,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.TWKB7X6P.js";
+} from "./chunk.LYAKY2WI.js";
 import {
   __decorateClass
 } from "./chunk.SHKVBVTI.js";

package/dist/chunks/{chunk.LGGIJJLV.js → chunk.GGHM2ORF.js}

@@ -1,6 +1,6 @@
 import {
   TerraDataRods
-} from "./chunk.X2IQHJCT.js";
+} from "./chunk.CUXW4JWZ.js";
 
 // src/components/data-rods/data-rods.ts
 var data_rods_default = TerraDataRods;

package/dist/chunks/{chunk.SBH4DNMZ.js → chunk.GQNGIBTB.js}

@@ -1,6 +1,6 @@
 import {
   TerraBadge
-} from "./chunk.RIUJUVL5.js";
+} from "./chunk.5GYDMDO6.js";
 
 // src/components/badge/badge.ts
 var badge_default = TerraBadge;

package/dist/chunks/{chunk.22J5WXJD.js → chunk.GSA27X2D.js}

@@ -1,6 +1,6 @@
 import {
   TerraDataAccess
-} from "./chunk.B77FXQYR.js";
+} from "./chunk.X7F7KL27.js";
 
 // src/react/data-access/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.2YRBKE6L.js → chunk.GYL6BFFP.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.KT52MHEF.js";
 import {
   TerraIcon
-} from "./chunk.TXLPR457.js";
+} from "./chunk.NRSI3X33.js";
 import {
   HasSlotController
 } from "./chunk.7YRJKZ6R.js";
@@ -22,7 +22,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.TWKB7X6P.js";
+} from "./chunk.LYAKY2WI.js";
 import {
   __decorateClass
 } from "./chunk.SHKVBVTI.js";

package/dist/chunks/{chunk.DOXAGBJT.js → chunk.H2MBHUPL.js}

@@ -1,6 +1,6 @@
 import {
   TerraDatePicker
-} from "./chunk.D5P5K2NT.js";
+} from "./chunk.LR2FE7AH.js";
 
 // src/react/date-picker/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.ZDQ6MDGV.js → chunk.H2WY7DAL.js}

@@ -1,6 +1,6 @@
 import {
   TerraDropdown
-} from "./chunk.LIUF4S2Q.js";
+} from "./chunk.GE3TZOSP.js";
 
 // src/components/dropdown/dropdown.ts
 var dropdown_default = TerraDropdown;

package/dist/chunks/{chunk.IMYLOQFI.js → chunk.H2XHTQQ5.js}

@@ -1,6 +1,6 @@
 import {
   TerraBrowseVariables
-} from "./chunk.YYIN7JIR.js";
+} from "./chunk.P3L56RV6.js";
 
 // src/components/browse-variables/browse-variables.ts
 var browse_variables_default = TerraBrowseVariables;

package/dist/chunks/{chunk.GQ4PBW5M.js → chunk.HK55NVNB.js}

@@ -1,27 +1,27 @@
-import {
-  clearSelection,
-  renderSearchResult,
-  walkToOption
-} from "./chunk.YY65ZHR5.js";
 import {
   FetchController
 } from "./chunk.6JWHPMOL.js";
 import {
   variable_keyword_search_styles_default
 } from "./chunk.D3DPGMVW.js";
+import {
+  clearSelection,
+  renderSearchResult,
+  walkToOption
+} from "./chunk.YY65ZHR5.js";
 import {
   icon_default
-} from "./chunk.O4PSTMUU.js";
+} from "./chunk.7ZDP2Z2N.js";
 import {
   button_default
-} from "./chunk.W67VQWOV.js";
+} from "./chunk.CRU7J26Q.js";
 import {
   watch
 } from "./chunk.NWXJOH5T.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.TWKB7X6P.js";
+} from "./chunk.LYAKY2WI.js";
 import {
   __decorateClass,
   __privateAdd,

package/dist/chunks/{chunk.XJCRGCMR.js → chunk.HKDQPBSM.js}

@@ -1,6 +1,6 @@
 import {
   TerraTag
-} from "./chunk.2UE3XXII.js";
+} from "./chunk.CCLPFOB3.js";
 
 // src/components/tag/tag.ts
 var tag_default = TerraTag;

package/dist/chunks/{chunk.EBSM4HY5.js → chunk.HXXX3WG4.js}

@@ -1,6 +1,6 @@
 import {
   TerraVariableCombobox
-} from "./chunk.XN3HDGLA.js";
+} from "./chunk.742W6GK2.js";
 
 // src/react/variable-combobox/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.Y64WJ6FA.js → chunk.HZ6JYZOS.js}

@@ -1,6 +1,6 @@
 import {
   TerraCard
-} from "./chunk.L3N6UJTV.js";
+} from "./chunk.FIF2MCFJ.js";
 
 // src/react/card/index.ts
 import * as React from "react";