@nasa-terra/components 0.0.7 → 0.0.9

package/cdn/chunks/chunk.XTN2KUNR.js

@@ -0,0 +1,396 @@
+import {
+  n
+} from "./chunk.K4EJQG4O.js";
+import {
+  s
+} from "./chunk.PQFHJHNO.js";
+import {
+  i
+} from "./chunk.PH7RLQK2.js";
+import {
+  __decorateClass,
+  __spreadValues
+} from "./chunk.6QUGTGJO.js";
+
+// src/styles/component.styles.ts
+var darkModeCSS = "/dist/themes/horizon-dark.css";
+function loadCSSFile(filename, media, onloadCallback) {
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.type = "text/css";
+  link.href = filename;
+  if (media) {
+    link.media = media;
+  }
+  if (onloadCallback) {
+    link.onload = onloadCallback;
+  }
+  document.head.appendChild(link);
+}
+loadCSSFile("/dist/themes/horizon.css");
+loadCSSFile(darkModeCSS);
+var component_styles_default = i`
+    :host {
+        box-sizing: border-box;
+    }
+
+    :host *,
+    :host *::before,
+    :host *::after {
+        box-sizing: inherit;
+    }
+
+    :host {
+        background-color: var(--background-color);
+        color: var(--color);
+    }
+
+    [hidden] {
+        display: none !important;
+    }
+
+    /* Horizon Design System Font Classes */
+
+    /* Display Fonts */
+
+    .display-120 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 7.5rem; /* 120px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .display-100 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 6.25rem; /* 100px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .display-80 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 5rem; /* 80px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .display-72 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 4.5rem; /* 72px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .display-60 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 3.75rem; /* 60px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .display-48 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 3rem; /* 48px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .display-41 {
+        font-family: var(--terra-font-family--inter);
+        font-size: 2.563rem; /* 41px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    /* Heading Fonts */
+
+    .heading-36-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 2.25rem; /* 36px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-36-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 2.25rem; /* 36px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-29-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1.813rem; /* 29px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-29-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1.813rem; /* 29px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-22-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1.375rem; /* 22px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-22-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1.375rem; /*22px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-18-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1.125rem; /* 18px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-18-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1.125rem; /* 18px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-16-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1rem; /* 16px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-16-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 1rem; /* 16px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-14-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 0.875rem; /* 14px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-14-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 0.875rem; /* 14px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-12-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 0.75rem; /* 12px */
+        font-weight: var(--terra-font-weight-bold);
+    }
+
+    .heading-12-light {
+        font-family: var(--terra-font-family--inter);
+        font-size: 0.75rem; /* 12px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .heading-11-semi-bold {
+        font-family: var(--terra-font-family--inter);
+        font-size: 0.688rem; /* 11px */
+        font-weight: var(--terra-font-weight-semi-bold);
+    }
+
+    /* Body Fonts */
+
+    .body-18 {
+        font-family: var(--terra-font-family--public-sans);
+        font-size: 1.125rem; /* 18px */
+        font-weight: var(--terra-font-weight-normal);
+    }
+
+    .body-16 {
+        font-family: var(--terra-font-family--public-sans);
+        font-size: 1rem; /* 16px */
+        font-weight: var(--terra-font-weight-normal);
+    }
+
+    .body-14 {
+        font-family: var(--terra-font-family--public-sans);
+        font-size: 0.875rem; /* 14px */
+        font-weight: var(--terra-font-weight-normal);
+    }
+
+    .body-12 {
+        font-family: var(--terra-font-family--public-sans);
+        font-size: 0.75rem; /* 12px */
+        font-weight: var(--terra-font-weight-normal);
+    }
+
+    .body-11 {
+        font-family: var(--terra-font-family--public-sans);
+        font-size: 0.688rem; /* 11px */
+        font-weight: var(--terra-font-weight-normal);
+    }
+
+    /* Number & Label Fonts */
+
+    .number-240 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 15rem; /* 240px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .number-120 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 7.5rem; /* 120px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .number-48 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 3rem; /* 48px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .number-36 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 2.25rem; /* 36px */
+        font-weight: var(--terra-font-weight-light);
+    }
+
+    .number-14 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 0.875rem; /* 14px */
+        font-weight: 500;
+    }
+
+    .number-11 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 0.688rem; /* 11px */
+        font-weight: 500;
+    }
+
+    .label-14 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 0.875rem; /* 14px */
+        font-weight: var(--terra-font-weight-light);
+        text-transform: uppercase;
+    }
+
+    .label-12 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 0.75rem; /* 12px */
+        font-weight: var(--terra-font-weight-light);
+        text-transform: uppercase;
+    }
+
+    .label-11 {
+        font-family: var(--terra-font-family--dm-mono);
+        font-size: 0.688rem; /* 11px */
+        font-weight: var(--terra-font-weight-light);
+        text-transform: uppercase;
+    }
+
+    /* Forms */
+
+    /* Input Field */
+
+    input[type='text'],
+    input[type='password'],
+    select,
+    .input {
+        font-family: var(--terra-input-font-family);
+        font-size: var(--terra-input-font-size);
+        color: var(--terra-input-color);
+        font-weight: var(--terra-input-font-weight);
+        line-height: var(--terra-input-line-height);
+        background-color: var(--terra-input-background-color);
+        border: var(--terra-input-border-width) solid var(--terra-input-border-color);
+        border-radius: var(--terra-input-border-radius);
+    }
+
+    label,
+    .input-label {
+        font-family: var(--terra-input-label-font-family);
+        font-size: var(--terra-input-label-font-size);
+        color: var(--terra-input-label-color);
+        font-weight: var(--terra-font-weight-semibold);
+        line-height: var(--terra-input-label-line-height);
+    }
+
+    /* Elements */
+
+    a {
+        text-decoration: underline;
+        text-decoration-color: #585858;
+        text-decoration-style: dashed;
+        text-decoration-thickness: 0.05em;
+        text-underline-offset: 0.25rem;
+        color: var(--terra-color-carbon-60);
+    }
+
+    /* UTILITY CSS */
+    .sr-only {
+        block-size: 1px;
+        border-width: 0;
+        clip: rect(0, 0, 0, 0);
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+`;
+
+// src/internal/terra-element.ts
+var TerraElement = class extends s {
+  emit(name, options) {
+    const event = new CustomEvent(name, __spreadValues({
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+      detail: {}
+    }, options));
+    this.dispatchEvent(event);
+    return event;
+  }
+  /* eslint-enable */
+  static define(name, elementConstructor = this, options = {}) {
+    const currentlyRegisteredConstructor = customElements.get(name);
+    if (!currentlyRegisteredConstructor) {
+      customElements.define(
+        name,
+        class extends elementConstructor {
+        },
+        options
+      );
+      return;
+    }
+    let newVersion = " (unknown version)";
+    let existingVersion = newVersion;
+    if ("version" in elementConstructor && elementConstructor.version) {
+      newVersion = " v" + elementConstructor.version;
+    }
+    if ("version" in currentlyRegisteredConstructor && currentlyRegisteredConstructor.version) {
+      existingVersion = " v" + currentlyRegisteredConstructor.version;
+    }
+    if (newVersion && existingVersion && newVersion === existingVersion) {
+      return;
+    }
+    console.warn(
+      `Attempted to register <${name}>${newVersion}, but <${name}>${existingVersion} has already been registered.`
+    );
+  }
+  constructor() {
+    super();
+    Object.entries(
+      this.constructor.dependencies
+    ).forEach(([name, component]) => {
+      ;
+      this.constructor.define(name, component);
+    });
+  }
+};
+/* eslint-disable */
+// @ts-expect-error This is auto-injected at build time.
+TerraElement.version = "0.0.9";
+TerraElement.dependencies = {};
+__decorateClass([
+  n()
+], TerraElement.prototype, "dir", 2);
+__decorateClass([
+  n()
+], TerraElement.prototype, "lang", 2);
+
+export {
+  component_styles_default,
+  TerraElement
+};

package/cdn/chunks/{chunk.YW2OER7Y.js → chunk.Y4WP4EBM.js}

@@ -7,37 +7,49 @@ var chip_styles_default = i`
     .chip {
         display: inline-flex;
         flex-direction: row;
-        background-color: #ffffff;
-        border: blue;
+        background-color: var(--terra-color-carbon-5);
+        border: 1.5px solid var(--terra-color-nasa-blue);
         cursor: default;
-        outline: #0090f0;
-        outline-style: solid;
-        outline-width: 2px;
-        border-radius: 2px;
+        border-radius: var(--terra-border-radius-medium);
         padding: 0;
         margin: 5px;
-        font-weight: bold;
-        color: #909090;
-        font-family: 'Open Sans', sans-serif;
+        color: var(--terra-color-carbon-50);
+        font-family: var(--terra-font-family--inter);
+        font-weight: var(--terra-font-weight-bold);
         white-space: nowrap;
         align-items: center;
         vertical-align: middle;
         text-decoration: none;
         justify-content: center;
     }
+
+    .chip:hover {
+        color: var(--terra-color-carbon-90);
+    }
+
+    .chip:focus {
+        text-decoration: underline;
+        text-decoration-style: dotted;
+    }
+
     .chip--small {
-        height: 22px;
-        font-size: 11px;
+        height: auto;
+        min-height: 1.375rem;
+        font-size: var(--terra-font-size-x-small);
     }
+
     .chip--medium {
-        height: 30px;
-        font-size: 15px;
+        height: auto;
+        min-height: 1.875rem;
+        font-size: var(--terra-font-size-small);
     }
 
     .chip--large {
-        height: 38px;
-        font-size: 20px;
+        height: auto;
+        min-height: 2.5rem;
+        font-size: var(--terra-font-size-large);
     }
+
     .chip-content {
         cursor: inherit;
         display: flex;
@@ -45,34 +57,39 @@ var chip_styles_default = i`
         user-select: none;
         white-space: nowrap;
     }
+
     .chip-content--small {
         padding-left: 8px;
         padding-right: 8px;
     }
+
     .chip-content--medium {
         padding-left: 12px;
         padding-right: 12px;
     }
+
     .chip-content--large {
         padding-left: 15px;
         padding-right: 15px;
     }
+
     .chip-svg {
-        color: #888888;
         cursor: pointer;
         height: auto;
-        fill: currentColor;
+        fill: var(--terra-color-carbon-50);
         display: inline-block;
         transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
         user-select: none;
         flex-shrink: 0;
     }
+
     .chip-svg--small {
         margin: 3px 3px 0px -6px;
         width: 0.75em;
         height: 0.75em;
         font-size: 20px;
     }
+
     .chip-svg--medium {
         margin: 4px 4px 0px -8px;
         width: 1em;
@@ -86,10 +103,11 @@ var chip_styles_default = i`
         height: 1.4em;
         font-size: 24px;
     }
-    .chip-svg:hover {
-        visibility: 'visible';
-        filter: invert(100%);
+
+    .chip:hover .chip-svg {
+        fill: var(--terra-color-carbon-90);
     }
+
     .chip-close {
         padding: 0;
         border: 0;

package/cdn/chunks/{chunk.XAVEBGFY.js → chunk.YOTNXUDL.js}

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

package/{dist/chunks/chunk.SDJHA4XN.js → cdn/chunks/chunk.YSRQIHTV.js}

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