@nasa-terra/components 0.0.189 → 0.0.191

package/dist/chunks/chunk.VSQMTGXR.js

@@ -0,0 +1,203 @@
+import{css as o}from"lit";var l=o`
+    :host {
+        display: inline-block;
+    }
+
+    :host([size='small']) {
+        --height: var(--terra-toggle-size-small);
+        --thumb-size: calc(var(--terra-toggle-size-small) + 4px);
+        --width: calc(var(--height) * 2);
+
+        font-size: var(--terra-input-font-size-small);
+    }
+
+    :host([size='medium']) {
+        --height: var(--terra-toggle-size-medium);
+        --thumb-size: calc(var(--terra-toggle-size-medium) + 4px);
+        --width: calc(var(--height) * 2);
+
+        font-size: var(--terra-input-font-size-medium);
+    }
+
+    :host([size='large']) {
+        --height: var(--terra-toggle-size-large);
+        --thumb-size: calc(var(--terra-toggle-size-large) + 4px);
+        --width: calc(var(--height) * 2);
+
+        font-size: var(--terra-input-font-size-large);
+    }
+
+    .toggle {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        font-family: var(--terra-input-font-family);
+        font-size: inherit;
+        font-weight: var(--terra-input-font-weight);
+        color: var(--terra-toggle-label-color);
+        vertical-align: middle;
+        cursor: pointer;
+    }
+
+    .toggle__control {
+        flex: 0 0 auto;
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--width);
+        height: var(--height);
+        background-color: var(--terra-toggle-background-color-off);
+        border: solid var(--terra-input-border-width)
+            var(--terra-toggle-border-color-off);
+        border-radius: var(--height);
+        transition:
+            var(--terra-transition-fast) border-color,
+            var(--terra-transition-fast) background-color;
+    }
+
+    .toggle__control .toggle__thumb {
+        width: var(--thumb-size);
+        height: var(--thumb-size);
+        background-color: var(--terra-toggle-thumb-background-color);
+        border-radius: 50%;
+        border: solid var(--terra-input-border-width)
+            var(--terra-toggle-thumb-border-color-off);
+        translate: calc((var(--width) - var(--height)) / -2);
+        transition:
+            var(--terra-transition-fast) translate ease,
+            var(--terra-transition-fast) background-color,
+            var(--terra-transition-fast) border-color,
+            var(--terra-transition-fast) box-shadow;
+    }
+
+    .toggle__control .toggle__thumb:hover {
+        background-color: var(--terra-toggle-thumb-background-color-hover);
+    }
+
+    .toggle__input {
+        position: absolute;
+        opacity: 0;
+        padding: 0;
+        margin: 0;
+        pointer-events: none;
+    }
+
+    /* Hover */
+    .toggle:not(.toggle--checked):not(.toggle--disabled) .toggle__control:hover {
+        background-color: var(--terra-toggle-background-color-off);
+        border-color: var(--terra-toggle-border-color-off);
+    }
+
+    .toggle:not(.toggle--checked):not(.toggle--disabled)
+        .toggle__control:hover
+        .toggle__thumb {
+        background-color: var(--terra-toggle-thumb-background-color-hover);
+        border-color: var(--terra-toggle-thumb-border-color-off);
+    }
+
+    .toggle:not(.toggle--checked):not(.toggle--disabled)
+        .toggle__control:hover
+        .toggle__thumb:active {
+        background-color: var(--terra-toggle-thumb-background-color-active);
+        border-color: var(--terra-toggle-thumb-border-color-off);
+    }
+
+    /* Focus */
+    .toggle:not(.toggle--checked):not(.toggle--disabled)
+        .toggle__input:focus-visible
+        ~ .toggle__control {
+        background-color: var(--terra-toggle-background-color-off);
+        border-color: var(--terra-toggle-border-color-off);
+    }
+
+    .toggle:not(.toggle--checked):not(.toggle--disabled)
+        .toggle__input:focus-visible
+        ~ .toggle__control
+        .toggle__thumb {
+        background-color: var(--terra-toggle-thumb-background-color);
+        border-color: var(--terra-toggle-focus-ring-color);
+        outline: var(--terra-focus-ring);
+        outline-offset: var(--terra-focus-ring-offset);
+    }
+
+    /* Checked */
+    .toggle--checked .toggle__control {
+        background-color: var(--terra-toggle-background-color-on);
+        border-color: var(--terra-toggle-border-color-on);
+    }
+
+    .toggle--checked .toggle__control .toggle__thumb {
+        background-color: var(--terra-toggle-thumb-background-color);
+        border-color: var(--terra-toggle-thumb-border-color-on);
+        translate: calc((var(--width) - var(--height)) / 2);
+    }
+
+    /* Checked + hover */
+    .toggle.toggle--checked:not(.toggle--disabled) .toggle__control:hover {
+        background-color: var(--terra-toggle-background-color-on);
+        border-color: var(--terra-toggle-border-color-on);
+    }
+
+    .toggle.toggle--checked:not(.toggle--disabled)
+        .toggle__control:hover
+        .toggle__thumb {
+        background-color: var(--terra-toggle-thumb-background-color-hover);
+        border-color: var(--terra-toggle-thumb-border-color-on);
+    }
+
+    /* Checked + active */
+    .toggle.toggle--checked:not(.toggle--disabled)
+        .toggle__control:hover
+        .toggle__thumb:active {
+        background-color: var(--terra-toggle-thumb-background-color-active);
+        border-color: var(--terra-toggle-thumb-border-color-on);
+    }
+
+    /* Checked + focus */
+    .toggle.toggle--checked:not(.toggle--disabled)
+        .toggle__input:focus-visible
+        ~ .toggle__control {
+        background-color: var(--terra-toggle-background-color-on);
+        border-color: var(--terra-toggle-border-color-on);
+    }
+
+    .toggle.toggle--checked:not(.toggle--disabled)
+        .toggle__input:focus-visible
+        ~ .toggle__control
+        .toggle__thumb {
+        background-color: var(--terra-toggle-thumb-background-color);
+        border-color: var(--terra-toggle-focus-ring-color);
+        outline: var(--terra-focus-ring);
+        outline-offset: var(--terra-focus-ring-offset);
+    }
+
+    /* Disabled */
+    .toggle--disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    .toggle__label {
+        display: inline-block;
+        line-height: var(--height);
+        margin-inline-start: 0.5em;
+        user-select: none;
+        -webkit-user-select: none;
+    }
+
+    :host([required]) .toggle__label::after {
+        content: var(--terra-input-required-content);
+        color: var(--terra-input-required-content-color);
+        margin-inline-start: var(--terra-input-required-content-offset);
+    }
+
+    @media (forced-colors: active) {
+        .toggle.toggle--checked:not(.toggle--disabled)
+            .toggle__control:hover
+            .toggle__thumb,
+        .toggle--checked .toggle__control .toggle__thumb {
+            background-color: ButtonText;
+        }
+    }
+`;export{l as a};

package/dist/chunks/chunk.VYMDLQKW.js

@@ -0,0 +1,33 @@
+import{a as c}from"./chunk.ACIJ7WID.js";import{a as r,b as a}from"./chunk.NAMM3J43.js";import{e as t,f as o,g as m}from"./chunk.INFVQQSJ.js";import{property as i}from"lit/decorators.js";import{html as n,nothing as p}from"lit";import{classMap as l}from"lit/directives/class-map.js";var s,e=class extends a{constructor(){super(...arguments);this.size="medium";this.closeable=!1;this.stack=!1;m(this,s,()=>{this.emit("terra-remove"),this.remove()})}render(){return n`
+            <div
+                class="${l({"chip--small":this.size==="small","chip--medium":this.size==="medium","chip--large":this.size==="large"})}
+                chip"
+            >
+                <div
+                    class="${l({"chip-content--small":this.size==="small","chip-content--medium":this.size==="medium","chip-content--large":this.size==="large"})}
+                    chip-content"
+                >
+                    <slot part="content" class="tag__content"></slot>
+                </div>
+                ${this.closeable?n`
+                          <button
+                              class="chip-close"
+                              @click="${o(this,s)}"
+                          >
+                              <svg
+                                  class="${l({"chip-svg--small":this.size==="small","chip-svg--medium":this.size==="medium","chip-svg--large":this.size==="large"})}
+                        chip-svg"
+                                  focusable="false"
+                                  viewBox="0 0 500 500"
+                                  aria-hidden="true"
+                              >
+                                  <path
+                                      d="M 227 56.036 H 265 V 227.037 H 436 V 265.036 H 265 V 436.036 H 227 V 265.036 H 56 V 227.037 H 227 Z"
+                                      style="paint-order: fill; fill-rule: nonzero; stroke-width: 0px; transform-origin: 246px 246.036px;"
+                                      transform="matrix(0.707107007504, 0.707107007504, -0.707107007504, 0.707107007504, -9.98393e-7, -0.000026419743)"
+                                  ></path>
+                              </svg>
+                          </button>
+                      `:p}
+            </div>
+        `}};s=new WeakMap,e.styles=[r,c],t([i({reflect:!0})],e.prototype,"size",2),t([i({type:Boolean,reflect:!0})],e.prototype,"closeable",2),t([i({type:Boolean,reflect:!0})],e.prototype,"stack",2);export{e as a};

package/dist/chunks/chunk.W43XN23E.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.KCEHKGQU.js";var t=e;e.define("terra-divider");export{t as a};

package/dist/chunks/chunk.W5A5SC27.js

@@ -0,0 +1,26 @@
+import{a}from"./chunk.3TNPGXLM.js";import{a as l}from"./chunk.YENJIAHQ.js";import{a as s,b as r}from"./chunk.NAMM3J43.js";import{e}from"./chunk.INFVQQSJ.js";import{html as m}from"lit";import{property as o}from"lit/decorators.js";var t=class extends r{constructor(){super(...arguments);this.open=!1;this.showArrow=!0}render(){return m`
+            <details
+                class="accordion"
+                ?open=${this.open}
+                @toggle=${this.handleToggle}
+            >
+                <summary class="accordion-summary">
+                    <slot name="summary"> ${this.summary} </slot>
+
+                    <div class="accordion-summary-right">
+                        <slot name="summary-right"></slot>
+
+                        ${this.showArrow&&m`
+                            <terra-icon
+                                name="chevron-down-circle"
+                                font-size="24px"
+                            ></terra-icon>
+                        `}
+                    </div>
+                </summary>
+
+                <div class="accordion-content">
+                    <slot></slot>
+                </div>
+            </details>
+        `}handleToggle(n){let i=n.currentTarget;this.open=i.open,this.emit("terra-accordion-toggle",{detail:{open:this.open}})}};t.styles=[s,l],t.dependencies={"terra-icon":a},e([o()],t.prototype,"summary",2),e([o({reflect:!0,type:Boolean})],t.prototype,"open",2),e([o({type:Boolean})],t.prototype,"showArrow",2);export{t as a};

package/dist/chunks/chunk.W5BWSIPL.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.GMMPKXT2.js";var d=e;e.define("terra-loader");export{d as a};

package/dist/chunks/chunk.W6DGR4DK.js

@@ -0,0 +1,260 @@
+import{css as t}from"lit";var e=t`
+    :host {
+        display: block;
+    }
+
+    .tabs {
+        display: flex;
+        border-radius: 0;
+    }
+
+    .tabs__tabs {
+        display: flex;
+        position: relative;
+    }
+
+    .tabs__indicator {
+        position: absolute;
+        width: 0;
+        height: 0;
+        display: block;
+        transition:
+            var(--terra-transition-fast) translate ease,
+            var(--terra-transition-fast) width ease,
+            var(--terra-transition-fast) height ease;
+    }
+
+    .tabs--has-scroll-controls .tabs__nav-container {
+        position: relative;
+        padding: 0 var(--terra-tabs-scroll-button-width);
+    }
+
+    .tabs--has-scroll-controls .tabs__scroll-button--start--hidden,
+    .tabs--has-scroll-controls .tabs__scroll-button--end--hidden {
+        visibility: hidden;
+    }
+
+    .tabs__body {
+        display: block;
+        overflow: auto;
+    }
+
+    .tabs__scroll-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: var(--terra-tabs-scroll-button-width);
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        color: var(--terra-color-carbon-90);
+        padding: 0;
+        transition: var(--terra-transition-fast) color;
+    }
+
+    .tabs__scroll-button:hover {
+        color: var(--terra-color-carbon-black);
+    }
+
+    .tabs__scroll-button:focus-visible {
+        outline: var(--terra-focus-ring-style);
+        outline-offset: 2px;
+    }
+
+    .tabs__scroll-button--start {
+        left: 0;
+    }
+
+    .tabs__scroll-button--end {
+        right: 0;
+    }
+
+    .tabs--rtl .tabs__scroll-button--start {
+        left: auto;
+        right: 0;
+    }
+
+    .tabs--rtl .tabs__scroll-button--end {
+        left: 0;
+        right: auto;
+    }
+
+    .tabs__resize-observer {
+        display: contents;
+    }
+
+    /*
+   * Top
+   */
+
+    .tabs--top {
+        flex-direction: column;
+    }
+
+    .tabs--top .tabs__nav-container {
+        order: 1;
+    }
+
+    .tabs--top .tabs__nav {
+        display: flex;
+        overflow-x: auto;
+
+        /* Hide scrollbar in Firefox */
+        scrollbar-width: none;
+    }
+
+    /* Hide scrollbar in Chrome/Safari */
+    .tabs--top .tabs__nav::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+    }
+
+    .tabs--top .tabs__tabs {
+        flex: 1 1 auto;
+        position: relative;
+        flex-direction: row;
+        border-bottom: solid var(--terra-tabs-track-width)
+            var(--terra-tab-track-color);
+    }
+
+    .tabs--top .tabs__indicator {
+        bottom: 0;
+        height: var(--terra-tabs-indicator-width);
+        background-color: var(--terra-tab-indicator-selected);
+    }
+
+    .tabs--top .tabs__body {
+        order: 2;
+    }
+
+    .tabs--top ::slotted(terra-tab-panel) {
+        --padding: var(--terra-spacing-medium) 0;
+    }
+
+    /*
+   * Bottom
+   */
+
+    .tabs--bottom {
+        flex-direction: column;
+    }
+
+    .tabs--bottom .tabs__nav-container {
+        order: 2;
+    }
+
+    .tabs--bottom .tabs__nav {
+        display: flex;
+        overflow-x: auto;
+
+        /* Hide scrollbar in Firefox */
+        scrollbar-width: none;
+    }
+
+    /* Hide scrollbar in Chrome/Safari */
+    .tabs--bottom .tabs__nav::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+    }
+
+    .tabs--bottom .tabs__tabs {
+        flex: 1 1 auto;
+        position: relative;
+        flex-direction: row;
+        border-top: solid var(--terra-tabs-track-width) var(--terra-tab-track-color);
+    }
+
+    .tabs--bottom .tabs__indicator {
+        top: 0;
+        height: var(--terra-tabs-indicator-width);
+        background-color: var(--terra-tab-indicator-selected);
+    }
+
+    .tabs--bottom .tabs__body {
+        order: 1;
+    }
+
+    .tabs--bottom ::slotted(terra-tab-panel) {
+        --padding: var(--terra-spacing-medium) 0;
+    }
+
+    /*
+   * Start
+   */
+
+    .tabs--start {
+        flex-direction: row;
+    }
+
+    .tabs--start .tabs__nav-container {
+        order: 1;
+    }
+
+    .tabs--start .tabs__tabs {
+        flex: 0 0 auto;
+        flex-direction: column;
+        border-inline-end: solid var(--terra-tabs-track-width)
+            var(--terra-tab-track-color);
+    }
+
+    .tabs--start .tabs__indicator {
+        right: 0;
+        width: var(--terra-tabs-indicator-width);
+        background-color: var(--terra-tab-indicator-selected);
+    }
+
+    .tabs--start.tabs--rtl .tabs__indicator {
+        right: auto;
+        left: calc(-1 * var(--terra-tabs-track-width));
+    }
+
+    .tabs--start .tabs__body {
+        flex: 1 1 auto;
+        order: 2;
+    }
+
+    .tabs--start ::slotted(terra-tab-panel) {
+        --padding: 0 var(--terra-spacing-medium);
+    }
+
+    /*
+   * End
+   */
+
+    .tabs--end {
+        flex-direction: row;
+    }
+
+    .tabs--end .tabs__nav-container {
+        order: 2;
+    }
+
+    .tabs--end .tabs__tabs {
+        flex: 0 0 auto;
+        flex-direction: column;
+        border-left: solid var(--terra-tabs-track-width) var(--terra-tab-track-color);
+    }
+
+    .tabs--end .tabs__indicator {
+        left: 0;
+        width: var(--terra-tabs-indicator-width);
+        background-color: var(--terra-tab-indicator-selected);
+    }
+
+    .tabs--end.tabs--rtl .tabs__indicator {
+        right: calc(-1 * var(--terra-tabs-track-width));
+        left: auto;
+    }
+
+    .tabs--end .tabs__body {
+        flex: 1 1 auto;
+        order: 1;
+    }
+
+    .tabs--end ::slotted(terra-tab-panel) {
+        --padding: 0 var(--terra-spacing-medium);
+    }
+`;export{e as a};

package/dist/chunks/chunk.W7APBRIA.js

@@ -0,0 +1,43 @@
+import{a as m}from"./chunk.ZUXHHOQ7.js";import{a as p}from"./chunk.JR4CVT6A.js";import{a as u}from"./chunk.YU2YXPZA.js";import{a as d}from"./chunk.GMMPKXT2.js";import{a as h}from"./chunk.3TNPGXLM.js";import{a as o,b as l}from"./chunk.6PEAAW4E.js";import{a}from"./chunk.J5Q4TWEG.js";import{a as n,b as c}from"./chunk.NAMM3J43.js";import{e as t}from"./chunk.INFVQQSJ.js";import{classMap as k}from"lit/directives/class-map.js";import{html as b}from"lit";import{property as i,query as f}from"lit/decorators.js";var e=class extends c{constructor(){super(...arguments);this.type="normal";this.checked=!1;this.value="";this.loading=!1;this.disabled=!1;this.hasSlotController=new o(this,"submenu");this.submenuController=new p(this,this.hasSlotController);this.handleHostClick=s=>{this.disabled&&(s.preventDefault(),s.stopImmediatePropagation())};this.handleMouseOver=s=>{this.focus(),s.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleHostClick),this.addEventListener("mouseover",this.handleMouseOver)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleHostClick),this.removeEventListener("mouseover",this.handleMouseOver)}handleDefaultSlotChange(){let s=this.getTextLabel();if(typeof this.cachedTextLabel=="undefined"){this.cachedTextLabel=s;return}s!==this.cachedTextLabel&&(this.cachedTextLabel=s,this.emit("slotchange",{bubbles:!0,composed:!1,cancelable:!1}))}handleCheckedChange(){if(this.checked&&this.type!=="checkbox"){this.checked=!1,console.error('The checked attribute can only be used on menu items with type="checkbox"',this);return}this.type==="checkbox"?this.setAttribute("aria-checked",this.checked?"true":"false"):this.removeAttribute("aria-checked")}handleDisabledChange(){this.setAttribute("aria-disabled",this.disabled?"true":"false")}handleTypeChange(){this.type==="checkbox"?(this.setAttribute("role","menuitemcheckbox"),this.setAttribute("aria-checked",this.checked?"true":"false")):(this.setAttribute("role","menuitem"),this.removeAttribute("aria-checked"))}getTextLabel(){return l(this.defaultSlot)}isSubmenu(){return this.hasSlotController.test("submenu")}render(){let r=this.submenuController.isExpanded();return b`
+            <div
+                id="anchor"
+                part="base"
+                class=${k({"menu-item":!0,"menu-item--rtl":!1,"menu-item--checked":this.checked,"menu-item--disabled":this.disabled,"menu-item--loading":this.loading,"menu-item--has-submenu":this.isSubmenu(),"menu-item--submenu-expanded":r})}
+                ?aria-haspopup="${this.isSubmenu()}"
+                ?aria-expanded="${!!r}"
+            >
+                <span part="checked-icon" class="menu-item__check">
+                    <terra-icon
+                        name="solid-check"
+                        library="heroicons"
+                        aria-hidden="true"
+                    ></terra-icon>
+                </span>
+
+                <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
+
+                <slot
+                    part="label"
+                    class="menu-item__label"
+                    @slotchange=${this.handleDefaultSlotChange}
+                ></slot>
+
+                <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
+
+                <span part="submenu-icon" class="menu-item__chevron">
+                    <terra-icon
+                        name=${"chevron-right"}
+                        library="system"
+                        aria-hidden="true"
+                    ></terra-icon>
+                </span>
+
+                ${this.submenuController.renderSubmenu()}
+                ${this.loading?b`
+                          <terra-loader
+                              part="spinner"
+                              exportparts="base:spinner__base"
+                          ></terra-loader>
+                      `:""}
+            </div>
+        `}};e.styles=[n,m],e.dependencies={"terra-icon":h,"terra-popup":u,"terra-loader":d},t([f("slot:not([name])")],e.prototype,"defaultSlot",2),t([f(".menu-item")],e.prototype,"menuItem",2),t([i()],e.prototype,"type",2),t([i({type:Boolean,reflect:!0})],e.prototype,"checked",2),t([i()],e.prototype,"value",2),t([i({type:Boolean,reflect:!0})],e.prototype,"loading",2),t([i({type:Boolean,reflect:!0})],e.prototype,"disabled",2),t([a("checked")],e.prototype,"handleCheckedChange",1),t([a("disabled")],e.prototype,"handleDisabledChange",1),t([a("type")],e.prototype,"handleTypeChange",1);export{e as a};

package/dist/chunks/chunk.WBPL3IO2.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.3TVPBDCY.js";import*as t from"react";import{createComponent as r}from"@lit/react";import"@lit/react";var a="terra-menu";e.define("terra-menu");var n=r({tagName:a,elementClass:e,react:t,events:{onTerraSelect:"terra-select"},displayName:"TerraMenu"}),l=n;export{l as a};