@nasa-terra/components 0.0.30 → 0.0.32

package/{dist/chunks/chunk.UUUQALNS.js → cdn/chunks/chunk.34QPQLNK.js}

@@ -1,6 +1,6 @@
 import {
   TerraSkeleton
-} from "./chunk.3K3BQXON.js";
+} from "./chunk.67R3HZQ3.js";
 
 // src/components/skeleton/skeleton.ts
 var skeleton_default = TerraSkeleton;

package/{dist/chunks/chunk.H6K7DI54.js → cdn/chunks/chunk.3NKO2T67.js}

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

package/cdn/chunks/{chunk.ZP7GOIAS.js → chunk.45AXXS6V.js}

@@ -1,6 +1,6 @@
 import {
   TerraTimeSeries
-} from "./chunk.57KITL7R.js";
+} from "./chunk.X4DCIQMZ.js";
 
 // src/components/time-series/time-series.ts
 var time_series_default = TerraTimeSeries;

package/{dist/chunks/chunk.KF6GNNY4.js → cdn/chunks/chunk.4IM4LTKE.js}

@@ -1,6 +1,6 @@
 import {
   TerraDateRangeSlider
-} from "./chunk.LDXAXITL.js";
+} from "./chunk.6JBWOMQU.js";
 
 // src/react/date-range-slider/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.LCPNNUVW.js → chunk.67R3HZQ3.js}

@@ -10,7 +10,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AX2SA27I.js";
+} from "./chunk.KA7HBTWB.js";
 import {
   n
 } from "./chunk.QCK7PTWV.js";

package/cdn/chunks/{chunk.HFMQVMLF.js → chunk.6JBWOMQU.js}

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

package/{dist/chunks/chunk.SOQ4CR5P.js → cdn/chunks/chunk.6NFDKY7P.js}

@@ -1,6 +1,6 @@
 import {
   TerraTimeSeries
-} from "./chunk.PVN5GF75.js";
+} from "./chunk.X4DCIQMZ.js";
 
 // src/react/time-series/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.UXTJ3UQP.js → chunk.7IT4KQFG.js}

@@ -1,10 +1,10 @@
 import {
   date_picker_styles_default
-} from "./chunk.CEIZPS3F.js";
+} from "./chunk.NFOKSMM5.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AX2SA27I.js";
+} from "./chunk.KA7HBTWB.js";
 import {
   e,
   n
@@ -3586,8 +3586,9 @@ var TerraDatePicker = class extends TerraElement {
     this.weekNumbers = false;
     this.static = false;
     this.position = "auto";
-    this.theme = "light";
     this.showMonths = 1;
+    this.hideLabel = false;
+    this.label = "Select Date";
   }
   firstUpdated() {
     this.flatpickrElement.addEventListener("change", this.handleChange.bind(this));
@@ -3604,24 +3605,57 @@ var TerraDatePicker = class extends TerraElement {
   }
   render() {
     return x`
-            <lit-flatpickr
-                .mode=${this.range ? "range" : "single"}
-                .minDate=${this.minDate}
-                .maxDate=${this.maxDate}
-                .defaultDate=${this.range ? [this.startDate, this.endDate].filter(Boolean) : this.startDate}
-                .allowInput=${this.allowInput}
-                .altFormat=${this.altFormat}
-                .altInput=${this.altInput}
-                .altInputClass=${this.altInputClass}
-                .dateFormat=${this.dateFormat}
-                .enableTime=${this.enableTime}
-                .time24hr=${this.time24hr}
-                .weekNumbers=${this.weekNumbers}
-                .static=${this.static}
-                .position=${this.position}
-                .theme=${this.theme}
-                .showMonths=${this.showMonths}
-            ></lit-flatpickr>
+            <div class="date-picker">
+                <label
+                    for="date-picker__input"
+                    class=${this.hideLabel ? "sr-only" : "date-picker__input_label"}
+                    >${this.label}</label
+                >
+                <div class="date-picker__input_fields">
+                    <lit-flatpickr
+                        id="date-picker__input"
+                        class="form-control"
+                        .mode=${this.range ? "range" : "single"}
+                        .minDate=${this.minDate}
+                        .maxDate=${this.maxDate}
+                        .defaultDate=${this.range ? [this.startDate, this.endDate].filter(
+      Boolean
+    ) : this.startDate}
+                        .allowInput=${this.allowInput}
+                        .altFormat=${this.altFormat}
+                        .altInput=${this.altInput}
+                        .altInputClass=${this.altInputClass}
+                        .dateFormat=${this.dateFormat}
+                        .enableTime=${this.enableTime}
+                        .time24hr=${this.time24hr}
+                        .weekNumbers=${this.weekNumbers}
+                        .static=${this.static}
+                        .position=${this.position}
+                        .showMonths=${this.showMonths}
+                        theme="material_blue"
+                    ></lit-flatpickr>
+                    <button
+                        class="date-picker__input_icon_button"
+                        type="button"
+                        @click=${() => this.flatpickrElement.open()}
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="1.5"
+                            stroke="currentColor"
+                            class="w-6 h-6"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"
+                            />
+                        </svg>
+                    </button>
+                </div>
+            </div>
         `;
   }
 };
@@ -3674,12 +3708,15 @@ __decorateClass([
 __decorateClass([
   n()
 ], TerraDatePicker.prototype, "position", 2);
-__decorateClass([
-  n()
-], TerraDatePicker.prototype, "theme", 2);
 __decorateClass([
   n({ type: Number, attribute: "show-months" })
 ], TerraDatePicker.prototype, "showMonths", 2);
+__decorateClass([
+  n({ attribute: "hide-label", type: Boolean })
+], TerraDatePicker.prototype, "hideLabel", 2);
+__decorateClass([
+  n()
+], TerraDatePicker.prototype, "label", 2);
 __decorateClass([
   e("lit-flatpickr")
 ], TerraDatePicker.prototype, "flatpickrElement", 2);

package/{dist/chunks/chunk.R7ZFWMFX.js → cdn/chunks/chunk.7VREZYX5.js}

@@ -1,6 +1,6 @@
 import {
   TerraMap
-} from "./chunk.NE2F3K3V.js";
+} from "./chunk.XJ6CQ2W6.js";
 
 // src/components/map/map.ts
 var map_default = TerraMap;

package/cdn/chunks/{chunk.SBI2FAOG.js → chunk.ADQK6QTU.js}

@@ -1,6 +1,6 @@
 import {
   TerraVariableKeywordSearch
-} from "./chunk.EFOVA2JJ.js";
+} from "./chunk.YEANOYYH.js";
 
 // src/components/variable-keyword-search/variable-keyword-search.ts
 var variable_keyword_search_default = TerraVariableKeywordSearch;

package/cdn/chunks/{chunk.DDGJ6BLG.js → chunk.CGCCGLTN.js}

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

package/cdn/chunks/{chunk.GSG6MPDX.js → chunk.CGMSLBSF.js}

@@ -7,7 +7,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AX2SA27I.js";
+} from "./chunk.KA7HBTWB.js";
 import {
   n,
   r

package/cdn/chunks/{chunk.I6AG4GNV.js → chunk.DMMXH25Q.js}

@@ -1,6 +1,6 @@
 import {
   TerraPlot
-} from "./chunk.O7MMFKKX.js";
+} from "./chunk.UTWWCV4P.js";
 
 // src/react/plot/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.HXEZAY6X.js → chunk.E6DWFRD6.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.POKHGMEN.js";
 import {
   TerraMap
-} from "./chunk.GDSSJKN2.js";
+} from "./chunk.XJ6CQ2W6.js";
 import {
   StringifyBoundingBox,
   parseBoundingBox
@@ -11,7 +11,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AX2SA27I.js";
+} from "./chunk.KA7HBTWB.js";
 import {
   e,
   n,
@@ -44,6 +44,10 @@ var TerraSpatialPicker = class extends TerraElement {
   _blur(e2) {
     const inputValue = e2.target.value;
     this.mapValue = inputValue === "" ? [] : parseBoundingBox(inputValue);
+    this.isExpanded = false;
+  }
+  _focus() {
+    this.isExpanded = true;
   }
   _click() {
     this.isExpanded = !this.isExpanded;
@@ -112,6 +116,7 @@ var TerraSpatialPicker = class extends TerraElement {
                         aria-controls="map"
                         aria-expanded=${this.isExpanded}
                         @blur=${this._blur}
+                        @focus=${this._focus}
                     />
                     <terra-button
                         shape="square-left"

package/cdn/chunks/{chunk.ZLX4LVIZ.js → chunk.F2W7INSC.js}

@@ -1,6 +1,6 @@
 import {
   TerraDateRangeSlider
-} from "./chunk.HFMQVMLF.js";
+} from "./chunk.6JBWOMQU.js";
 
 // src/components/date-range-slider/date-range-slider.ts
 var date_range_slider_default = TerraDateRangeSlider;

package/{dist/chunks/chunk.KZQGAFNS.js → cdn/chunks/chunk.FCVQMZFI.js}

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

package/cdn/chunks/{chunk.N4W3LSG4.js → chunk.HMPD7STE.js}

@@ -1,6 +1,6 @@
 import {
   TerraLoader
-} from "./chunk.GSG6MPDX.js";
+} from "./chunk.CGMSLBSF.js";
 
 // src/react/loader/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.X4S4SQKL.js → chunk.ID7OJYAQ.js}

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

package/cdn/chunks/{chunk.EKLIR3WI.js → chunk.JYFIK3K2.js}

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

package/cdn/chunks/{chunk.AX2SA27I.js → chunk.KA7HBTWB.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.30";
+TerraElement.version = "0.0.32";
 TerraElement.dependencies = {};
 __decorateClass([
   n()

package/{dist/chunks/chunk.2QTJHB7F.js → cdn/chunks/chunk.KE4H5SNV.js}

@@ -1,6 +1,6 @@
 import {
   TerraButton
-} from "./chunk.TOSECFXS.js";
+} from "./chunk.QF2JNZWM.js";
 
 // src/react/button/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.2B5MWFZJ.js → chunk.KXN5IM45.js}

@@ -1,6 +1,6 @@
 import {
   TerraBrowseVariables
-} from "./chunk.KJEKFNS4.js";
+} from "./chunk.NRTX2VEY.js";
 
 // src/react/browse-variables/index.ts
 import * as React from "react";

package/{dist/chunks/chunk.HRODIECS.js → cdn/chunks/chunk.MFZ6PKUB.js}

@@ -1,6 +1,6 @@
 import {
   TerraPlot
-} from "./chunk.TOKOGZDW.js";
+} from "./chunk.UTWWCV4P.js";
 
 // src/components/plot/plot.ts
 var plot_default = TerraPlot;

package/cdn/chunks/{chunk.RE7Y5324.js → chunk.N4UVPPEY.js}

@@ -4,7 +4,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AX2SA27I.js";
+} from "./chunk.KA7HBTWB.js";
 import {
   e,
   n

package/cdn/chunks/{chunk.XHVCGLFU.js → chunk.NDDVQ6L7.js}

@@ -1,6 +1,6 @@
 import {
   TerraLogin
-} from "./chunk.KFKV4IIY.js";
+} from "./chunk.Y5GIUMUI.js";
 
 // src/components/login/login.ts
 var login_default = TerraLogin;

package/cdn/chunks/chunk.NFOKSMM5.js

@@ -0,0 +1,100 @@
+import {
+  i
+} from "./chunk.PH7RLQK2.js";
+
+// src/components/date-picker/date-picker.styles.ts
+var date_picker_styles_default = i`
+    :host {
+        display: inline-block;
+        position: relative;
+        max-width: 600px;
+    }
+
+    :host input {
+        box-shadow: none;
+    }
+
+    :host .form-control {
+        display: block;
+        width: 100%;
+        height: 36px;
+        padding: 6px 12px;
+        background-image: none;
+        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        -webkit-transition:
+            border-color ease-in-out 0.15s,
+            box-shadow ease-in-out 0.15s;
+        transition:
+            background-color 0.2s ease,
+            border-color 0.2s ease;
+    }
+
+    :host .date-picker__input_fields {
+        position: relative;
+    }
+
+    :host lit-flatpickr {
+        width: 100%;
+    }
+
+    :host lit-flatpickr::part(input) {
+        display: block;
+        width: 100%;
+        height: 36px;
+        padding: 6px 12px;
+        background-image: none;
+        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        -webkit-transition:
+            border-color ease-in-out 0.15s,
+            box-shadow ease-in-out 0.15s;
+        transition:
+            background-color 0.2s ease,
+            border-color 0.2s ease;
+    }
+
+    :host .date-picker__input_icon_button {
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 36px;
+        padding: 0px;
+        z-index: 2;
+        margin-block: 0;
+        margin-inline: 0;
+        background: none;
+        border: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+    }
+
+    :host .date-picker__input_icon_button svg {
+        height: 1.4rem;
+        width: 1.4rem;
+        color: currentColor;
+    }
+
+    :host .date-picker__input_icon_button:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+
+    :host .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+`;
+
+export {
+  date_picker_styles_default
+};

package/cdn/chunks/{chunk.KJEKFNS4.js → chunk.NRTX2VEY.js}

@@ -1,41 +1,41 @@
 import {
   TerraVariableKeywordSearch
-} from "./chunk.EFOVA2JJ.js";
+} from "./chunk.YEANOYYH.js";
 import {
   TerraSkeleton
-} from "./chunk.LCPNNUVW.js";
+} from "./chunk.67R3HZQ3.js";
 import {
   getRandomIntInclusive
 } from "./chunk.7PAVW6KC.js";
 import {
   TerraLoader
-} from "./chunk.GSG6MPDX.js";
+} from "./chunk.CGMSLBSF.js";
 import {
   TerraIcon
-} from "./chunk.SULSGF5G.js";
-import {
-  BrowseVariablesController
-} from "./chunk.GJXX5TSE.js";
-import {
-  s
-} from "./chunk.UGTZ22DI.js";
-import {
-  browse_variables_styles_default
-} from "./chunk.4EVDB43F.js";
+} from "./chunk.QFNOH7ML.js";
 import {
   TerraButton
-} from "./chunk.U2IVCX3M.js";
+} from "./chunk.QF2JNZWM.js";
 import {
   watch
 } from "./chunk.CBV7M6CJ.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AX2SA27I.js";
+} from "./chunk.KA7HBTWB.js";
 import {
   n,
   r
 } from "./chunk.QCK7PTWV.js";
+import {
+  BrowseVariablesController
+} from "./chunk.GJXX5TSE.js";
+import {
+  s
+} from "./chunk.UGTZ22DI.js";
+import {
+  browse_variables_styles_default
+} from "./chunk.4EVDB43F.js";
 import {
   T,
   x

package/{dist/chunks/chunk.P4V6NTUB.js → cdn/chunks/chunk.NWLGET32.js}

@@ -1,6 +1,6 @@
 import {
   TerraDialog
-} from "./chunk.JPTE36KF.js";
+} from "./chunk.N4UVPPEY.js";
 
 // src/components/dialog/dialog.ts
 var dialog_default = TerraDialog;

package/{dist/chunks/chunk.XJZRUYAI.js → cdn/chunks/chunk.OA75DMQH.js}

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

package/cdn/chunks/{chunk.N3DIGSJT.js → chunk.OTOZCJEJ.js}

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

package/cdn/chunks/{chunk.TSLU66AK.js → chunk.P3O5LHGA.js}

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

package/cdn/chunks/{chunk.TVLFTKMX.js → chunk.PRG2L4PB.js}

@@ -17,7 +17,7 @@ import {
 } from "./chunk.QB5SASDL.js";
 import {
   icon_default
-} from "./chunk.DDGJ6BLG.js";
+} from "./chunk.CGCCGLTN.js";
 import {
   Fuse
 } from "./chunk.U7L2FN7F.js";
@@ -29,14 +29,14 @@ import {
 } from "./chunk.2XCNCXGV.js";
 import {
   button_default
-} from "./chunk.X4S4SQKL.js";
+} from "./chunk.ID7OJYAQ.js";
 import {
   watch
 } from "./chunk.CBV7M6CJ.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AX2SA27I.js";
+} from "./chunk.KA7HBTWB.js";
 import {
   n,
   r

package/cdn/chunks/{chunk.U2IVCX3M.js → chunk.QF2JNZWM.js}

@@ -7,24 +7,24 @@ import {
   o,
   s
 } from "./chunk.GNSDRDLV.js";
-import {
-  watch
-} from "./chunk.CBV7M6CJ.js";
-import {
-  button_styles_default
-} from "./chunk.YVG2XG3L.js";
 import {
   e
 } from "./chunk.YVSJQ4KD.js";
+import {
+  watch
+} from "./chunk.CBV7M6CJ.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AX2SA27I.js";
+} from "./chunk.KA7HBTWB.js";
 import {
   e as e2,
   n as n2,
   r
 } from "./chunk.QCK7PTWV.js";
+import {
+  button_styles_default
+} from "./chunk.YVG2XG3L.js";
 import {
   __decorateClass,
   __privateAdd,

package/cdn/chunks/{chunk.SULSGF5G.js → chunk.QFNOH7ML.js}

@@ -15,7 +15,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AX2SA27I.js";
+} from "./chunk.KA7HBTWB.js";
 import {
   n,
   r

package/cdn/chunks/{chunk.QKFBOZ3A.js → chunk.R6FGH4XJ.js}

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

package/cdn/chunks/{chunk.MJAGRW43.js → chunk.ROWDYHUA.js}

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