@nasa-terra/components 0.0.6 → 0.0.9

package/dist/chunks/{chunk.SHS42OAD.js → chunk.APJOA6RL.js}

@@ -14,9 +14,9 @@ var button_styles_default = css`
         justify-content: center;
         width: 100%;
         border-style: solid;
-        border-width: var(--terra-input-border-width);
-        font-family: var(--terra-input-font-family);
-        font-weight: var(--terra-font-weight-semibold);
+        border-width: var(--terra-button-border-width);
+        font-family: var(--terra-font-family--inter);
+        font-weight: var(--terra-font-weight-bold);
         text-decoration: none;
         user-select: none;
         -webkit-user-select: none;
@@ -63,10 +63,13 @@ var button_styles_default = css`
     }
 
     .button__label {
-        display: inline-block;
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        pointer-events: none;
     }
 
-    .button__label::slotted(sl-icon) {
+    .button__label::slotted(terra-icon) {
         vertical-align: -2px;
     }
 
@@ -76,115 +79,97 @@ var button_styles_default = css`
 
     /* Default */
     .button--standard.button--default {
-        background-color: var(--terra-color-neutral-0);
-        border-color: var(--terra-color-neutral-300);
-        color: var(--terra-color-neutral-700);
+        background-color: var(--terra-color-default-gray);
+        border-color: var(--terra-color-default-gray);
+        color: var(--terra-color-spacesuit-white);
     }
 
     .button--standard.button--default:hover:not(.button--disabled) {
-        background-color: var(--terra-color-primary-50);
-        border-color: var(--terra-color-primary-300);
-        color: var(--terra-color-primary-700);
+        background-color: var(--terra-color-default-gray-shade);
+        border-color: var(--terra-color-default-gray-shade);
+        color: var(--terra-color-spacesuit-white);
     }
 
     .button--standard.button--default:active:not(.button--disabled) {
-        background-color: var(--terra-color-primary-100);
-        border-color: var(--terra-color-primary-400);
-        color: var(--terra-color-primary-700);
+        background-color: var(--terra-color-default-gray-tint);
+        border-color: var(--terra-color-default-gray-tint);
+        color: var(--terra-color-spacesuit-white);
     }
 
     /* Primary */
     .button--standard.button--primary {
-        background-color: var(--terra-color-primary-600);
-        border-color: var(--terra-color-primary-600);
-        color: var(--terra-color-neutral-0);
+        background-color: var(--terra-color-nasa-blue);
+        border-color: var(--terra-color-nasa-blue);
+        color: var(--terra-color-spacesuit-white);
     }
 
     .button--standard.button--primary:hover:not(.button--disabled) {
-        background-color: var(--terra-color-primary-500);
-        border-color: var(--terra-color-primary-500);
-        color: var(--terra-color-neutral-0);
+        background-color: var(--terra-color-nasa-blue-shade);
+        border-color: var(--terra-color-nasa-blue-shade);
+        color: var(--terra-color-spacesuit-white);
     }
 
     .button--standard.button--primary:active:not(.button--disabled) {
-        background-color: var(--terra-color-primary-600);
-        border-color: var(--terra-color-primary-600);
-        color: var(--terra-color-neutral-0);
+        background-color: var(--terra-color-nasa-blue-tint);
+        border-color: var(--terra-color-nasa-blue-tint);
+        color: var(--terra-color-spacesuit-white);
     }
 
     /* Success */
     .button--standard.button--success {
-        background-color: var(--terra-color-success-600);
-        border-color: var(--terra-color-success-600);
-        color: var(--terra-color-neutral-0);
+        background-color: var(--terra-color-success-green);
+        border-color: var(--terra-color-success-green);
+        color: var(--terra-color-spacesuit-white);
     }
 
     .button--standard.button--success:hover:not(.button--disabled) {
-        background-color: var(--terra-color-success-500);
-        border-color: var(--terra-color-success-500);
-        color: var(--terra-color-neutral-0);
+        background-color: var(--terra-color-success-green-hover);
+        border-color: var(--terra-color-success-green-hover);
+        color: var(--terra-color-spacesuit-white);
     }
 
     .button--standard.button--success:active:not(.button--disabled) {
-        background-color: var(--terra-color-success-600);
-        border-color: var(--terra-color-success-600);
-        color: var(--terra-color-neutral-0);
-    }
-
-    /* Neutral */
-    .button--standard.button--neutral {
-        background-color: var(--terra-color-neutral-600);
-        border-color: var(--terra-color-neutral-600);
-        color: var(--terra-color-neutral-0);
-    }
-
-    .button--standard.button--neutral:hover:not(.button--disabled) {
-        background-color: var(--terra-color-neutral-500);
-        border-color: var(--terra-color-neutral-500);
-        color: var(--terra-color-neutral-0);
-    }
-
-    .button--standard.button--neutral:active:not(.button--disabled) {
-        background-color: var(--terra-color-neutral-600);
-        border-color: var(--terra-color-neutral-600);
-        color: var(--terra-color-neutral-0);
+        background-color: var(--terra-color-success-green-focus);
+        border-color: var(--terra-color-success-green-focus);
+        color: var(--terra-color-spacesuit-white);
     }
 
     /* Warning */
     .button--standard.button--warning {
-        background-color: var(--terra-color-warning-600);
-        border-color: var(--terra-color-warning-600);
-        color: var(--terra-color-neutral-0);
+        background-color: var(--terra-color-international-orange);
+        border-color: var(--terra-color-international-orange);
+        color: var(--terra-color-spacesuit-white);
     }
+
     .button--standard.button--warning:hover:not(.button--disabled) {
-        background-color: var(--terra-color-warning-500);
-        border-color: var(--terra-color-warning-500);
-        color: var(--terra-color-neutral-0);
+        background-color: var(--terra-color-international-orange-shade);
+        border-color: var(--terra-color-international-orange-shade);
+        color: var(--terra-color-spacesuit-white);
     }
 
     .button--standard.button--warning:active:not(.button--disabled) {
-        background-color: var(--terra-color-warning-600);
-        border-color: var(--terra-color-warning-600);
-        color: var(--terra-color-neutral-0);
+        background-color: var(--terra-color-international-orange-tint);
+        border-color: var(--terra-color-international-orange-tint);
+        color: var(--terra-color-spacesuit-white);
     }
 
     /* Danger */
     .button--standard.button--danger {
-        background-color: var(--terra-color-danger-600);
-        border-color: var(--terra-color-danger-600);
-        color: var(--terra-color-neutral-0);
+        background-color: var(--terra-color-nasa-red);
+        border-color: var(--terra-color-nasa-red);
+        color: var(--terra-color-spacesuit-white);
     }
 
     .button--standard.button--danger:hover:not(.button--disabled) {
-        background-color: var(--terra-color-danger-500);
-        border-color: var(--terra-color-danger-500);
-        color: var(--terra-color-neutral-0);
+        background-color: var(--terra-color-nasa-red-shade);
+        border-color: var(--terra-color-nasa-red-shade);
+        color: var(--terra-color-spacesuit-white);
     }
 
     .button--standard.button--danger:active:not(.button--disabled) {
-        background-color: var(--terra-color-danger-600);
-        border-color: var(--terra-color-danger-600);
-        color: var(--terra-color-neutral-0);
+        background-color: var(--terra-color-nasa-red-tint);
+        border-color: var(--terra-color-nasa-red-tint);
+        color: var(--terra-color-spacesuit-white);
     }
 
     /*
@@ -193,116 +178,98 @@ var button_styles_default = css`
 
     .button--outline {
         background: none;
-        border: solid 1px;
     }
 
-    /* Default */
-    .button--outline.button--default {
-        border-color: var(--terra-color-neutral-300);
-        color: var(--terra-color-neutral-700);
+    /* Primary */
+    .button--outline.button--primary {
+        border-color: var(--terra-color-nasa-blue);
+        color: var(--terra-button-outline-text-color);
     }
 
-    .button--outline.button--default:hover:not(.button--disabled),
+    .button--outline.button--primary:hover:not(.button--disabled),
     .button--outline.button--default.button--checked:not(.button--disabled) {
-        border-color: var(--terra-color-primary-600);
-        background-color: var(--terra-color-primary-600);
-        color: var(--terra-color-neutral-0);
+        border-color: var(--terra-color-nasa-blue);
+        background-color: var(--terra-color-nasa-blue);
+        color: var(--terra-color-spacesuit-white);
     }
 
-    .button--outline.button--default:active:not(.button--disabled) {
-        border-color: var(--terra-color-primary-700);
-        background-color: var(--terra-color-primary-700);
-        color: var(--terra-color-neutral-0);
+    .button--outline.button--primary:active:not(.button--disabled) {
+        border-color: var(--terra-color-nasa-blue-tint);
+        background-color: var(--terra-color-nasa-blue-tint);
+        color: var(--terra-color-spacesuit-white);
     }
 
-    /* Primary */
-    .button--outline.button--primary {
-        border-color: var(--terra-color-primary-600);
-        color: var(--terra-color-primary-600);
+    /* Default */
+    .button--outline.button--default {
+        border-color: var(--terra-color-default-gray);
+        color: var(--terra-button-outline-text-color);
     }
 
-    .button--outline.button--primary:hover:not(.button--disabled),
-    .button--outline.button--primary.button--checked:not(.button--disabled) {
-        background-color: var(--terra-color-primary-600);
-        color: var(--terra-color-neutral-0);
+    .button--outline.button--default:hover:not(.button--disabled),
+    .button--outline.button--default.button--checked:not(.button--disabled) {
+        border-color: var(--terra-color-default-gray);
+        background-color: var(--terra-color-default-gray);
+        color: var(--terra-color-spacesuit-white);
     }
 
-    .button--outline.button--primary:active:not(.button--disabled) {
-        border-color: var(--terra-color-primary-700);
-        background-color: var(--terra-color-primary-700);
-        color: var(--terra-color-neutral-0);
+    .button--outline.button--default:active:not(.button--disabled) {
+        border-color: var(--terra-color-default-gray-tint);
+        background-color: var(--terra-color-default-gray-tint);
+        color: var(--terra-color-spacesuit-white);
     }
 
     /* Success */
     .button--outline.button--success {
-        border-color: var(--terra-color-success-600);
-        color: var(--terra-color-success-600);
+        border-color: var(--terra-color-success-green);
+        color: var(--terra-button-outline-text-color);
     }
 
     .button--outline.button--success:hover:not(.button--disabled),
     .button--outline.button--success.button--checked:not(.button--disabled) {
-        background-color: var(--terra-color-success-600);
-        color: var(--terra-color-neutral-0);
+        background-color: var(--terra-color-success-green);
+        color: var(--terra-color-spacesuit-white);
     }
 
     .button--outline.button--success:active:not(.button--disabled) {
-        border-color: var(--terra-color-success-700);
-        background-color: var(--terra-color-success-700);
-        color: var(--terra-color-neutral-0);
-    }
-
-    /* Neutral */
-    .button--outline.button--neutral {
-        border-color: var(--terra-color-neutral-600);
-        color: var(--terra-color-neutral-600);
-    }
-
-    .button--outline.button--neutral:hover:not(.button--disabled),
-    .button--outline.button--neutral.button--checked:not(.button--disabled) {
-        background-color: var(--terra-color-neutral-600);
-        color: var(--terra-color-neutral-0);
-    }
-
-    .button--outline.button--neutral:active:not(.button--disabled) {
-        border-color: var(--terra-color-neutral-700);
-        background-color: var(--terra-color-neutral-700);
-        color: var(--terra-color-neutral-0);
+        border-color: var(--terra-color-success-green-focus);
+        background-color: var(--terra-color-success-green-focus);
+        color: var(--terra-color-spacesuit-white);
     }
 
     /* Warning */
     .button--outline.button--warning {
-        border-color: var(--terra-color-warning-600);
-        color: var(--terra-color-warning-600);
+        border-color: var(--terra-color-international-orange);
+        color: var(--terra-button-outline-text-color);
     }
 
     .button--outline.button--warning:hover:not(.button--disabled),
     .button--outline.button--warning.button--checked:not(.button--disabled) {
-        background-color: var(--terra-color-warning-600);
-        color: var(--terra-color-neutral-0);
+        background-color: var(--terra-color-international-orange);
+        color: var(--terra-color-spacesuit-white);
     }
 
     .button--outline.button--warning:active:not(.button--disabled) {
-        border-color: var(--terra-color-warning-700);
-        background-color: var(--terra-color-warning-700);
-        color: var(--terra-color-neutral-0);
+        border-color: var(--terra-color-international-orange-tint);
+        background-color: var(--terra-color-international-orange-tint);
+        color: var(--terra-color-spacesuit-white);
     }
 
     /* Danger */
     .button--outline.button--danger {
-        border-color: var(--terra-color-danger-600);
-        color: var(--terra-color-danger-600);
+        border-color: var(--terra-color-nasa-red);
+        color: var(--terra-button-outline-text-color);
     }
 
     .button--outline.button--danger:hover:not(.button--disabled),
     .button--outline.button--danger.button--checked:not(.button--disabled) {
-        background-color: var(--terra-color-danger-600);
-        color: var(--terra-color-neutral-0);
+        background-color: var(--terra-color-nasa-red);
+        color: var(--terra-color-spacesuit-white);
     }
 
     .button--outline.button--danger:active:not(.button--disabled) {
-        border-color: var(--terra-color-danger-700);
-        background-color: var(--terra-color-danger-700);
-        color: var(--terra-color-neutral-0);
+        border-color: var(--terra-color-nasa-red-tint);
+        background-color: var(--terra-color-nasa-red-tint);
+        color: var(--terra-color-spacesuit-white);
     }
 
     @media (forced-colors: active) {
@@ -318,25 +285,84 @@ var button_styles_default = css`
     .button--text {
         background-color: transparent;
         border-color: transparent;
-        color: var(--terra-color-primary-600);
+        color: var(--terra-button-text-text-color);
     }
 
     .button--text:hover:not(.button--disabled) {
         background-color: transparent;
         border-color: transparent;
-        color: var(--terra-color-primary-500);
+        color: var(--terra-button-text-text-color-hover);
     }
 
     .button--text:focus-visible:not(.button--disabled) {
         background-color: transparent;
         border-color: transparent;
-        color: var(--terra-color-primary-500);
+        color: var(--terra-color-nasa-blue);
     }
 
     .button--text:active:not(.button--disabled) {
         background-color: transparent;
         border-color: transparent;
-        color: var(--terra-color-primary-700);
+        color: var(--terra-color-nasa-blue-tint);
+    }
+
+    /*
+   * Page Link buttons
+   */
+
+    .button--pagelink {
+        background-color: transparent;
+        border-color: transparent;
+        color: var(--terra-button-page-link-text);
+        & slot[name='suffix'] span {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: var(--terra-color-nasa-red);
+            color: var(--terra-color-spacesuit-white);
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
+
+    .button--pagelink:hover:not(.button--disabled) slot[name='suffix'] span {
+        background-color: var(--terra-color-nasa-red-shade);
+    }
+
+    .button--pagelink.button--small {
+        & slot[part='label'] {
+            padding-right: 0.3rem;
+            font-size: 1rem;
+        }
+        & slot[name='suffix'] span {
+            height: var(--terra-icon-small);
+            width: var(--terra-icon-small);
+            border-radius: 50%;
+        }
+    }
+
+    .button--pagelink.button--medium {
+        & slot[part='label'] {
+            padding-right: 0.4rem;
+            font-size: 1.4rem;
+        }
+        & slot[name='suffix'] span {
+            height: var(--terra-icon-medium);
+            width: var(--terra-icon-medium);
+            border-radius: 50%;
+        }
+    }
+
+    .button--pagelink.button--large {
+        & slot[part='label'] {
+            padding-right: 0.5rem;
+            font-size: 1.8rem;
+        }
+        & slot[name='suffix'] span {
+            height: var(--terra-icon-large);
+            width: var(--terra-icon-large);
+            border-radius: 50%;
+        }
     }
 
     /*
@@ -345,50 +371,34 @@ var button_styles_default = css`
 
     .button--small {
         height: auto;
-        min-height: var(--terra-input-height-small);
+        min-height: var(--terra-button-height-small);
         font-size: var(--terra-button-font-size-small);
         line-height: calc(
-            var(--terra-input-height-small) - var(--terra-input-border-width) * 2
+            var(--terra-button-height-small) - var(--terra-button-border-width) * 2
         );
         border-radius: var(--terra-input-border-radius-small);
     }
 
     .button--medium {
         height: auto;
-        min-height: var(--terra-input-height-medium);
+        min-height: var(--terra-button-height-medium);
         font-size: var(--terra-button-font-size-medium);
         line-height: calc(
-            var(--terra-input-height-medium) - var(--terra-input-border-width) * 2
+            var(--terra-button-height-medium) - var(--terra-button-border-width) * 2
         );
         border-radius: var(--terra-input-border-radius-medium);
     }
 
     .button--large {
         height: auto;
-        min-height: var(--terra-input-height-large);
+        min-height: var(--terra-button-height-large);
         font-size: var(--terra-button-font-size-large);
         line-height: calc(
-            var(--terra-input-height-large) - var(--terra-input-border-width) * 2
+            var(--terra-button-height-large) - var(--terra-button-border-width) * 2
         );
         border-radius: var(--terra-input-border-radius-large);
     }
 
-    /*
-   * Pill modifier
-   */
-
-    .button--pill.button--small {
-        border-radius: var(--terra-input-height-small);
-    }
-
-    .button--pill.button--medium {
-        border-radius: var(--terra-input-height-medium);
-    }
-
-    .button--pill.button--large {
-        border-radius: var(--terra-input-height-large);
-    }
-
     /*
    * Circle modifier
    */
@@ -399,17 +409,20 @@ var button_styles_default = css`
     }
 
     .button--circle.button--small {
-        width: var(--terra-input-height-small);
+        height: var(--terra-button-height-small);
+        width: var(--terra-button-height-small);
         border-radius: 50%;
     }
 
     .button--circle.button--medium {
-        width: var(--terra-input-height-medium);
+        height: var(--terra-button-height-medium);
+        width: var(--terra-button-height-medium);
         border-radius: 50%;
     }
 
     .button--circle.button--large {
-        width: var(--terra-input-height-large);
+        height: var(--terra-button-height-medium);
+        width: var(--terra-button-height-large);
         border-radius: 50%;
     }
 
@@ -545,6 +558,28 @@ var button_styles_default = css`
         padding-inline-end: var(--terra-spacing-small);
     }
 
+    /* Shape modifier
+
+    * Button radius overrides used to control the edge shape when button is not in a terra-button-group. 
+    * Useful for integrating buttons into input form controls such as drop-down lists, search fields.
+    */
+    .button--square-right {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+    }
+
+    .button--square {
+        border-start-start-radius: 0;
+        border-start-end-radius: 0;
+        border-end-start-radius: 0;
+        border-end-end-radius: 0;
+    }
+
+    .button--square-left {
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+    }
+
     /*
    * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).
    * This means buttons aren't always direct descendants of the button group, thus we can't target them with the

package/{cdn/chunks/chunk.6RSB2MQN.js → dist/chunks/chunk.BB72QYRU.js}

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

package/dist/chunks/{chunk.QNRAB6NA.js → chunk.C7CKLN54.js}

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

package/dist/chunks/chunk.CL7IMQRK.js

@@ -0,0 +1,50 @@
+import {
+  __privateAdd,
+  __privateGet,
+  __privateSet
+} from "./chunk.GKBF7QGR.js";
+
+// src/components/giovanni-search/giovanni-search.controller.ts
+import { Task, TaskStatus } from "@lit/task";
+var apiError = new Error(
+  "Failed to fetch the data required to make a list of searchable items."
+);
+var _apiTask;
+var FetchController = class {
+  constructor(host) {
+    __privateAdd(this, _apiTask, void 0);
+    __privateSet(this, _apiTask, new Task(host, {
+      task: async () => {
+        const response = await fetch(
+          "https://windmill-load-balancer-641499207.us-east-1.elb.amazonaws.com/api/r/giovanni/aesir-keywords"
+        );
+        if (!response.ok) {
+          throw apiError;
+        }
+        return await response.json();
+      },
+      args: () => []
+    }));
+  }
+  get taskComplete() {
+    return __privateGet(this, _apiTask).taskComplete;
+  }
+  get value() {
+    return __privateGet(this, _apiTask).value;
+  }
+  get taskStatus() {
+    const readableStatus = Object.entries(TaskStatus).reduce((accumulator, [key, value]) => {
+      accumulator[value] = key;
+      return accumulator;
+    }, {});
+    return readableStatus[__privateGet(this, _apiTask).status];
+  }
+  render(renderFunctions) {
+    return __privateGet(this, _apiTask).render(renderFunctions);
+  }
+};
+_apiTask = new WeakMap();
+
+export {
+  FetchController
+};

package/dist/chunks/{chunk.HBQCLZ37.js → chunk.CRKPWBJQ.js}

@@ -1,6 +1,6 @@
 import {
   TerraSpatialPicker
-} from "./chunk.WHSMHOPB.js";
+} from "./chunk.HMNI5WGJ.js";
 
 // src/react/spatial-picker/index.ts
 import * as React from "react";

package/{cdn/chunks/chunk.UFZVPTR4.js → dist/chunks/chunk.CSSXWHIU.js}

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

package/dist/chunks/{chunk.3ZGFXEAJ.js → chunk.EDWXEF4C.js}

@@ -1,6 +1,6 @@
 import {
   __spreadValues
-} from "./chunk.RYPAZDXE.js";
+} from "./chunk.GKBF7QGR.js";
 
 // src/components/map/leaflet-utils.ts
 import * as L from "leaflet";