@nasa-terra/components 0.0.23 → 0.0.27

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.UW6LOJ6N.js → chunk.2EP6X7H4.js}

@@ -1,6 +1,6 @@
 import {
   TerraSpatialPicker
-} from "./chunk.SO3ICKNN.js";
+} from "./chunk.7I2H4W3E.js";
 
 // src/components/spatial-picker/spatial-picker.ts
 var spatial_picker_default = TerraSpatialPicker;

package/{dist/chunks/chunk.MSQDEKKY.js → cdn/chunks/chunk.3BQLBGAB.js}

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

package/{dist/chunks/chunk.KZO6I3HY.js → cdn/chunks/chunk.3CPIZ7XC.js}

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

package/cdn/chunks/{chunk.YS6QES3Y.js → chunk.4VMBYUQG.js}

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

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.7HY4OBYI.js → chunk.5A5THIAK.js}

@@ -4,29 +4,29 @@ import {
 import {
   h
 } from "./chunk.QB5SASDL.js";
+import {
+  combobox_styles_default
+} from "./chunk.USC76EZL.js";
 import {
   clearSelection,
   walkToOption
 } from "./chunk.LMGJJIIS.js";
-import {
-  combobox_styles_default
-} from "./chunk.USC76EZL.js";
 import {
   Fuse
 } from "./chunk.U7L2FN7F.js";
-import {
-  o
-} from "./chunk.QEA4QW6G.js";
 import {
   n as n2
 } from "./chunk.2XCNCXGV.js";
+import {
+  o
+} from "./chunk.QEA4QW6G.js";
 import {
   watch
 } from "./chunk.CBV7M6CJ.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.UCNQ6VQW.js";
+} from "./chunk.PBHXHHF2.js";
 import {
   n,
   r

package/cdn/chunks/{chunk.IVKUC625.js → chunk.6B2CMDFX.js}

@@ -7,26 +7,28 @@ import {
   o,
   s
 } from "./chunk.GNSDRDLV.js";
-import {
-  button_styles_default
-} from "./chunk.YVG2XG3L.js";
 import {
   watch
 } from "./chunk.CBV7M6CJ.js";
+import {
+  button_styles_default
+} from "./chunk.YVG2XG3L.js";
 import {
   e
 } from "./chunk.YVSJQ4KD.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.UCNQ6VQW.js";
+} from "./chunk.PBHXHHF2.js";
 import {
   e as e2,
   n as n2,
   r
 } from "./chunk.QCK7PTWV.js";
 import {
-  __decorateClass
+  __decorateClass,
+  __privateAdd,
+  __privateMethod
 } from "./chunk.MR27IH5Z.js";
 
 // src/internal/slot.ts
@@ -76,9 +78,11 @@ var HasSlotController = class {
 };
 
 // src/components/button/button.component.ts
+var _handleDialogStateChange, handleDialogStateChange_fn;
 var TerraButton = class extends TerraElement {
   constructor() {
     super(...arguments);
+    __privateAdd(this, _handleDialogStateChange);
     this.formControlController = new FormControlController(this, {
       assumeInteractionOn: ["click"]
     });
@@ -103,6 +107,7 @@ var TerraButton = class extends TerraElement {
     this.value = "";
     this.href = "";
     this.rel = "noreferrer noopener";
+    this.expanded = false;
   }
   /** Gets the validity state object */
   get validity() {
@@ -123,6 +128,30 @@ var TerraButton = class extends TerraElement {
       this.formControlController.updateValidity();
     }
   }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.forDialog) {
+      document.addEventListener(
+        "terra-dialog-show",
+        __privateMethod(this, _handleDialogStateChange, handleDialogStateChange_fn).bind(this)
+      );
+      document.addEventListener(
+        "terra-dialog-hide",
+        __privateMethod(this, _handleDialogStateChange, handleDialogStateChange_fn).bind(this)
+      );
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener(
+      "terra-dialog-show",
+      __privateMethod(this, _handleDialogStateChange, handleDialogStateChange_fn).bind(this)
+    );
+    document.removeEventListener(
+      "terra-dialog-hide",
+      __privateMethod(this, _handleDialogStateChange, handleDialogStateChange_fn).bind(this)
+    );
+  }
   handleBlur() {
     this.hasFocus = false;
     this.emit("sl-blur");
@@ -138,6 +167,10 @@ var TerraButton = class extends TerraElement {
     if (this.type === "reset") {
       this.formControlController.reset(this);
     }
+    if (this.forDialog) {
+      const el = document.getElementById(this.forDialog);
+      el == null ? void 0 : el.show();
+    }
   }
   handleInvalid(event) {
     this.formControlController.setValidity(false);
@@ -258,6 +291,9 @@ var TerraButton = class extends TerraElement {
         @focus=${this.handleFocus}
         @invalid=${this.isButton() ? this.handleInvalid : null}
         @click=${this.handleClick}
+        aria-controls=${o(this.forDialog || void 0)} 
+        ?aria-haspopup=${this.forDialog ? "dialog" : void 0}
+        aria-expanded=${o(this.forDialog ? this.expanded : void 0)}
       >
         <slot name="prefix" part="prefix" class="button__prefix"></slot>
         <slot part="label" class="button__label"></slot>
@@ -276,6 +312,12 @@ var TerraButton = class extends TerraElement {
     `;
   }
 };
+_handleDialogStateChange = new WeakSet();
+handleDialogStateChange_fn = function(e3) {
+  if (this.forDialog && this.forDialog === e3.target.id) {
+    this.expanded = e3.target.open;
+  }
+};
 TerraButton.styles = [component_styles_default, button_styles_default];
 __decorateClass([
   e2(".button")
@@ -352,6 +394,12 @@ __decorateClass([
 __decorateClass([
   n2({ attribute: "formtarget" })
 ], TerraButton.prototype, "formTarget", 2);
+__decorateClass([
+  n2({ attribute: "for-dialog" })
+], TerraButton.prototype, "forDialog", 2);
+__decorateClass([
+  r()
+], TerraButton.prototype, "expanded", 2);
 __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], TerraButton.prototype, "handleDisabledChange", 1);

package/cdn/chunks/{chunk.ZB2DR3O2.js → chunk.6WHJPANS.js}

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

package/cdn/chunks/chunk.776MMOY4.js

@@ -0,0 +1,92 @@
+import {
+  dialog_styles_default
+} from "./chunk.FAICFDGD.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.PBHXHHF2.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/{dist/chunks/chunk.VI4RAIBY.js → cdn/chunks/chunk.7EDQMH5E.js}

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

package/cdn/chunks/{chunk.SO3ICKNN.js → chunk.7I2H4W3E.js}

@@ -1,17 +1,17 @@
+import {
+  spatial_picker_styles_default
+} from "./chunk.POKHGMEN.js";
 import {
   TerraMap
-} from "./chunk.V6F6RIGR.js";
+} from "./chunk.J33E2LPE.js";
 import {
   StringifyBoundingBox,
   parseBoundingBox
 } from "./chunk.4BM5VFHP.js";
-import {
-  spatial_picker_styles_default
-} from "./chunk.5FZY6SGS.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.UCNQ6VQW.js";
+} from "./chunk.PBHXHHF2.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}
@@ -172,6 +174,9 @@ __decorateClass([
 __decorateClass([
   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.FM4MQGJO.js → chunk.7INZ24UK.js}

@@ -1,6 +1,6 @@
 import {
   TerraCombobox
-} from "./chunk.7HY4OBYI.js";
+} from "./chunk.5A5THIAK.js";
 
 // src/react/combobox/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.VJ6ZCI4D.js → chunk.AB6RIBJG.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.UCNQ6VQW.js";
+} from "./chunk.PBHXHHF2.js";
 import {
   e,
   n

package/cdn/chunks/{chunk.JVGK2LSP.js → chunk.APMCUBER.js}

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

package/cdn/chunks/chunk.AX3WTC6L.js

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

package/cdn/chunks/{chunk.W2LQTJ4D.js → chunk.B5OXZP3H.js}

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

package/cdn/chunks/{chunk.MF2HKAU4.js → chunk.C27REBHU.js}

@@ -1,16 +1,16 @@
+import {
+  skeleton_default
+} from "./chunk.GT24H4QB.js";
 import {
   getRandomIntInclusive
 } from "./chunk.7PAVW6KC.js";
-import {
-  skeleton_default
-} from "./chunk.HB56625V.js";
 import {
   skeleton_styles_default
 } from "./chunk.FPSSRS2U.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.UCNQ6VQW.js";
+} from "./chunk.PBHXHHF2.js";
 import {
   n
 } from "./chunk.QCK7PTWV.js";

package/{dist/chunks/chunk.BZ5KSGAC.js → cdn/chunks/chunk.CMWYK2C7.js}

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