@nasa-terra/components 0.0.189 → 0.0.192

package/dist/chunks/chunk.GXNNVXXJ.js

@@ -0,0 +1,203 @@
+import{css as r}from"lit";var l=r`
+    :host {
+        display: block;
+    }
+
+    .file-upload-wrapper {
+        width: 100%;
+    }
+
+    .file-upload__label {
+        display: block;
+        margin: 0 0 var(--terra-spacing-x-small, 0.5rem) 0;
+        font-family: var(--terra-input-label-font-family);
+        font-size: var(--terra-input-label-font-size);
+        font-weight: var(--terra-input-label-line-weight);
+        line-height: var(--terra-input-label-line-height);
+        color: var(--terra-input-label-color);
+    }
+
+    .file-upload__required-indicator {
+        color: var(--terra-input-required-content-color);
+        margin-left: var(--terra-input-required-content-offset);
+    }
+
+    /* Dropzone */
+    .file-upload__dropzone {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 8rem;
+        padding: var(--terra-spacing-large);
+        background-color: var(--terra-file-upload-dropzone-background-color);
+        border: 2px dashed var(--terra-file-upload-dropzone-border-color);
+        border-radius: var(--terra-input-border-radius);
+        cursor: pointer;
+        transition:
+            border-color var(--terra-transition-fast),
+            background-color var(--terra-transition-fast),
+            box-shadow var(--terra-transition-fast);
+    }
+
+    .file-upload__dropzone:hover:not(.file-upload__dropzone--disabled) {
+        border-color: var(--terra-file-upload-dropzone-border-color-hover);
+        background-color: var(--terra-file-upload-dropzone-background-color-hover);
+    }
+
+    .file-upload__dropzone--dragging {
+        border-color: var(--terra-file-upload-dropzone-border-color-focus);
+        border-style: solid;
+        background-color: var(--terra-file-upload-dropzone-background-color-hover);
+    }
+
+    .file-upload__dropzone--focused:not(.file-upload__dropzone--disabled) {
+        outline: none;
+        border-color: var(--terra-file-upload-dropzone-border-color-focus);
+        box-shadow: 0 0 0 var(--terra-focus-ring-width)
+            var(--terra-input-border-focus);
+    }
+
+    .file-upload__dropzone--disabled {
+        background-color: var(--terra-file-upload-dropzone-background-color-disabled);
+        border-color: var(--terra-file-upload-dropzone-border-color-disabled);
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+
+    .file-upload__dropzone-text {
+        font-family: var(--terra-input-font-family);
+        font-size: var(--terra-input-font-size);
+        font-weight: var(--terra-input-font-weight);
+        color: var(--terra-input-text-default);
+        text-align: center;
+    }
+
+    .file-upload__browse-link {
+        background: none;
+        border: none;
+        padding: 0;
+        margin: 0;
+        font: inherit;
+        color: var(--terra-text-link-default);
+        text-decoration: var(--terra-link-text-decoration);
+        text-decoration-style: var(--terra-link-text-decoration-style);
+        text-underline-offset: var(--terra-link-underline-offset);
+        cursor: pointer;
+    }
+
+    .file-upload__browse-link:hover:not(:disabled) {
+        color: var(--terra-text-link-hover);
+    }
+
+    .file-upload__browse-link:focus {
+        outline: none;
+    }
+
+    /* File Input */
+    .file-upload__input {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border-width: 0;
+    }
+
+    /* Preview Section */
+    .file-upload__preview {
+        border: 2px dashed var(--terra-file-upload-dropzone-border-color);
+        border-radius: var(--terra-input-border-radius);
+        padding: var(--terra-spacing-medium);
+        background-color: var(--terra-file-upload-dropzone-background-color);
+    }
+
+    .file-upload__preview-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: var(--terra-spacing-medium);
+    }
+
+    .file-upload__file-count {
+        font-family: var(--terra-input-label-font-family);
+        font-size: var(--terra-input-label-font-size);
+        font-weight: var(--terra-font-weight-semibold);
+        color: var(--terra-input-label-color);
+    }
+
+    .file-upload__change-link {
+        background: none;
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-family: var(--terra-input-font-family);
+        font-size: var(--terra-input-font-size);
+        font-weight: var(--terra-input-font-weight);
+        color: var(--terra-text-link-default);
+        text-decoration: var(--terra-link-text-decoration);
+        text-decoration-style: var(--terra-link-text-decoration-style);
+        text-underline-offset: var(--terra-link-underline-offset);
+        cursor: pointer;
+    }
+
+    .file-upload__change-link:hover:not(:disabled) {
+        color: var(--terra-text-link-hover);
+    }
+
+    .file-upload__change-link:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    .file-upload__change-link:focus {
+        outline: none;
+    }
+
+    /* File List */
+    .file-upload__file-list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--terra-spacing-small);
+    }
+
+    .file-upload__file-item {
+        display: flex;
+        align-items: center;
+        gap: var(--terra-spacing-small);
+    }
+
+    .file-upload__thumbnail {
+        width: 3rem;
+        height: 3rem;
+        object-fit: cover;
+        border-radius: var(--terra-border-radius-small);
+        flex-shrink: 0;
+    }
+
+    .file-upload__thumbnail--placeholder {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--terra-color-neutral-100);
+        color: var(--terra-input-text-placeholder);
+    }
+
+    .file-upload__file-name {
+        font-family: var(--terra-input-font-family);
+        font-size: var(--terra-input-font-size);
+        font-weight: var(--terra-input-font-weight);
+        color: var(--terra-input-text-default);
+        flex: 1;
+    }
+
+    /* Help Text */
+    .file-upload__help-text {
+        margin-top: var(--terra-spacing-x-small);
+        font-size: var(--terra-input-help-text-font-size-medium);
+        color: var(--terra-input-help-text-color);
+    }
+`;export{l as a};

package/dist/chunks/chunk.H4TEESQU.js

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

package/dist/chunks/chunk.H5AVWFET.js

@@ -0,0 +1,23 @@
+import{css as r}from"lit";var t=r`
+    :host {
+        --color: var(--terra-divider-color, var(--terra-container-panel-border));
+        --width: var(
+            --terra-divider-width,
+            var(--terra-container-panel-border-width)
+        );
+        --spacing: var(--terra-divider-spacing, var(--terra-spacing-medium));
+    }
+
+    :host(:not([vertical])) {
+        display: block;
+        border-top: solid var(--width) var(--color);
+        margin: var(--spacing) 0;
+    }
+
+    :host([vertical]) {
+        display: inline-block;
+        height: 100%;
+        border-left: solid var(--width) var(--color);
+        margin: 0 var(--spacing);
+    }
+`;export{t as a};

package/dist/chunks/chunk.HEEYAQNP.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.HJIPLW5J.js";import*as r from"react";import{createComponent as t}from"@lit/react";import"@lit/react";var a="terra-alert";e.define("terra-alert");var n=t({tagName:a,elementClass:e,react:r,events:{onTerraShow:"terra-show",onTerraAfterShow:"terra-after-show",onTerraHide:"terra-hide",onTerraAfterHide:"terra-after-hide"},displayName:"TerraAlert"}),i=n;export{i as a};

package/dist/chunks/chunk.HJIPLW5J.js

@@ -0,0 +1,37 @@
+import{a as n}from"./chunk.CUJNKBC6.js";import{a as l}from"./chunk.6PEAAW4E.js";import{a as r}from"./chunk.J5Q4TWEG.js";import{a as h,b as d}from"./chunk.WEMSJJQN.js";import{a as u}from"./chunk.VGCXMKGO.js";import{e}from"./chunk.INFVQQSJ.js";import{classMap as m}from"lit/directives/class-map.js";import{html as s}from"lit";import{property as a,query as c,state as v}from"lit/decorators.js";var t=class t extends d{constructor(){super(...arguments);this.hasSlotController=new l(this,"icon","suffix");this.open=!1;this.closable=!1;this.variant="information";this.appearance="filled";this.duration=1/0;this.remainingTime=this.duration}static get toastStack(){return this.currentToastStack||(this.currentToastStack=Object.assign(document.createElement("div"),{className:"terra-toast-stack"})),this.currentToastStack}firstUpdated(){this.base.hidden=!this.open}restartAutoHide(){this.handleCountdownChange(),clearTimeout(this.autoHideTimeout),clearInterval(this.remainingTimeInterval),this.open&&this.duration<1/0&&(this.autoHideTimeout=window.setTimeout(()=>this.hide(),this.duration),this.remainingTime=this.duration,this.remainingTimeInterval=window.setInterval(()=>{this.remainingTime-=100},100))}pauseAutoHide(){var i;(i=this.countdownAnimation)==null||i.pause(),clearTimeout(this.autoHideTimeout),clearInterval(this.remainingTimeInterval)}resumeAutoHide(){var i;this.duration<1/0&&(this.autoHideTimeout=window.setTimeout(()=>this.hide(),this.remainingTime),this.remainingTimeInterval=window.setInterval(()=>{this.remainingTime-=100},100),(i=this.countdownAnimation)==null||i.play())}handleCountdownChange(){if(this.open&&this.duration<1/0&&this.countdown){let{countdownElement:i}=this,p="100%",f="0";this.countdownAnimation=i.animate([{width:p},{width:f}],{duration:this.duration,easing:"linear"})}}handleCloseClick(){this.hide()}async handleOpenChange(){this.base.hidden=!this.open,this.open?(this.emit("terra-show"),this.duration<1/0&&this.restartAutoHide(),this.emit("terra-after-show")):(this.emit("terra-hide"),clearTimeout(this.autoHideTimeout),clearInterval(this.remainingTimeInterval),this.emit("terra-after-hide"))}handleDurationChange(){this.restartAutoHide()}async show(){if(!this.open)return this.open=!0,n(this,"terra-after-show")}async hide(){if(this.open)return this.open=!1,n(this,"terra-after-hide")}async toast(){return new Promise(i=>{this.handleCountdownChange(),t.toastStack.parentElement===null&&document.body.append(t.toastStack),t.toastStack.appendChild(this),requestAnimationFrame(()=>{this.clientWidth,this.show()}),this.addEventListener("terra-after-hide",()=>{t.toastStack.removeChild(this),i(),t.toastStack.querySelector("terra-alert")===null&&t.toastStack.remove()},{once:!0})})}render(){return s`
+            <div
+                part="base"
+                class=${m({alert:!0,"alert--open":this.open,"alert--closable":this.closable,"alert--has-countdown":!!this.countdown,"alert--has-icon":this.hasSlotController.test("icon"),"alert--information":this.variant==="information","alert--primary":this.variant==="primary","alert--success":this.variant==="success","alert--neutral":this.variant==="neutral","alert--warning":this.variant==="warning","alert--danger":this.variant==="danger","alert--filled":this.appearance==="filled","alert--white":this.appearance==="white","alert--subtle":this.appearance==="subtle"})}
+                role="alert"
+                aria-hidden=${this.open?"false":"true"}
+                @mouseenter=${this.pauseAutoHide}
+                @mouseleave=${this.resumeAutoHide}
+            >
+                <div part="icon" class="alert__icon">
+                    <slot name="icon"></slot>
+                </div>
+
+                <div part="message" class="alert__message" aria-live="polite">
+                    <slot></slot>
+                </div>
+
+                ${this.closable?s`
+                          <terra-icon
+                              class="alert__close-button"
+                              name="solid-x-mark"
+                              library="heroicons"
+                              @click=${this.handleCloseClick}
+                          ></terra-icon>
+                      `:""}
+
+                <div role="timer" class="alert__timer">${this.remainingTime}</div>
+
+                ${this.countdown?s`
+                          <div
+                              class=${m({alert__countdown:!0,"alert__countdown--ltr":this.countdown==="ltr"})}
+                          >
+                              <div class="alert__countdown-elapsed"></div>
+                          </div>
+                      `:""}
+            </div>
+        `}};t.styles=[h,u],e([c('[part~="base"]')],t.prototype,"base",2),e([c(".alert__countdown-elapsed")],t.prototype,"countdownElement",2),e([a({type:Boolean,reflect:!0})],t.prototype,"open",2),e([a({type:Boolean,reflect:!0})],t.prototype,"closable",2),e([a({reflect:!0})],t.prototype,"variant",2),e([a({reflect:!0})],t.prototype,"appearance",2),e([a({type:Number})],t.prototype,"duration",2),e([a({type:String,reflect:!0})],t.prototype,"countdown",2),e([v()],t.prototype,"remainingTime",2),e([r("open",{waitUntilFirstUpdate:!0})],t.prototype,"handleOpenChange",1),e([r("duration")],t.prototype,"handleDurationChange",1);var o=t;export{o as a};

package/dist/chunks/chunk.HLKDWTZV.js

@@ -0,0 +1,41 @@
+function o(e){return[{cell_type:"markdown",id:"367f56b9-7ca8-4435-9dcc-89bf586f33ab",metadata:{},source:[`### Prerequisites:
+`,`
+`,"This notebook uses the `terra_ui_components`, `anywidget`, and `pandas` packages.\n",`
+`,"After running the `pip install` cell for the first time, please reload the page to ensure the dependencies are active."]},{id:"2733501b-0de4-4067-8aff-864e1b4c76cb",cell_type:"code",source:'%pip install -q "terra_ui_components==0.0.191" "anywidget==0.9.15" "pandas" "rasterio" "matplotlib"',metadata:{trusted:!0},outputs:[],execution_count:null},{cell_type:"markdown",id:"35aa4a00-8e2c-4478-9df7-de633fd8f6ce",metadata:{},source:["### Render a time averaged map"]},{id:"870c1384-e706-48ee-ba07-fd552a949869",cell_type:"code",source:`from terra_ui_components import TerraTimeAverageMap
+map = TerraTimeAverageMap()
+map.collection='${e.catalogVariable.dataFieldId.replace(`_${e.catalogVariable.dataFieldAccessName}`,"")}'
+map.variable = '${e.catalogVariable.dataFieldAccessName}'
+map.startDate = '${e.startDate}'
+map.endDate = '${e.endDate}'
+map.location = '${e.location}'
+
+map`,metadata:{trusted:!0},outputs:[],execution_count:null},{cell_type:"markdown",id:"25b87ed4-2ad9-4c7d-b851-bc8fea3ded5a",metadata:{},source:[`### Access the map GeoTIFF bytes
+`,`
+`,"Wait for the map above to fully render before running the cell below. Once the map renders, you can access the GeoTIFF as bytes: `print(map.data)`\n",`
+`,"Here is an example of loading the bytes into `rasterio` and plotting via `matplotlib`. Note: The bytes can be loaded into many other Python libraries:"]},{cell_type:"code",execution_count:null,id:"6b81a089-884d-4fd7-9d4e-c45a53307c20",metadata:{},outputs:[],source:`import rasterio
+from rasterio.io import MemoryFile
+from io import BytesIO
+import matplotlib.pyplot as plt
+
+# map.data contains the rendered GeoTIFF as bytes
+# Ensure the map has rendered before accessing data
+if not map.data:
+    print("No data available. Please run the map cell above and wait for it to fully render before running this cell.")
+else:
+    with MemoryFile(map.data) as memfile:
+        with memfile.open() as dataset:
+            # You can now work with the dataset as if it were opened from a file
+            print(f"Driver: {dataset.driver}")
+            print(f"CRS: {dataset.crs}")
+            print(f"Bounds: {dataset.bounds}")
+            data = dataset.read(1)
+            print(f"Data shape: {data.shape}")
+
+            # Example of creating a figure and displaying the data
+            plt.figure(figsize=(10, 8))
+            plt.imshow(data, cmap='viridis')  # You can change the colormap
+            plt.colorbar(label='Values')
+            plt.title('GeoTIFF Visualization')
+            plt.xlabel('X')
+            plt.ylabel('Y')
+            plt.show()`}]}export{o as a};

package/dist/chunks/chunk.HRA64EJO.js

@@ -0,0 +1,86 @@
+import{css as e}from"lit";var n=e`
+    :host {
+        display: block;
+        user-select: none;
+        -webkit-user-select: none;
+    }
+
+    :host(:focus) {
+        outline: none;
+    }
+
+    .option {
+        position: relative;
+        display: flex;
+        align-items: center;
+        font-family: var(--terra-font-family--inter);
+        font-size: var(--terra-font-size-medium);
+        font-weight: var(--terra-font-weight-normal);
+        line-height: var(--terra-line-height-normal);
+        letter-spacing: var(--terra-letter-spacing-normal);
+        color: var(--terra-menu-item-text);
+        padding: var(--terra-spacing-x-small) var(--terra-spacing-medium)
+            var(--terra-spacing-x-small) var(--terra-spacing-x-small);
+        transition: var(--terra-transition-fast) fill;
+        cursor: pointer;
+    }
+
+    .option--hover:not(.option--current):not(.option--disabled) {
+        background-color: var(--terra-options-item-background-hover);
+        color: var(--terra-options-item-text-hover);
+    }
+
+    .option--current,
+    .option--current.option--disabled {
+        background-color: var(--terra-options-item-background-selected);
+        color: var(--terra-options-item-text-selected);
+        opacity: 1;
+    }
+
+    .option--disabled {
+        outline: none;
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    .option__label {
+        flex: 1 1 auto;
+        display: inline-block;
+        line-height: var(--terra-line-height-dense);
+    }
+
+    .option .option__check {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        visibility: hidden;
+        padding-inline-end: var(--terra-spacing-2x-small);
+    }
+
+    .option--selected .option__check {
+        visibility: visible;
+    }
+
+    .option__prefix,
+    .option__suffix {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+    }
+
+    .option__prefix::slotted(*) {
+        margin-inline-end: var(--terra-spacing-x-small);
+    }
+
+    .option__suffix::slotted(*) {
+        margin-inline-start: var(--terra-spacing-x-small);
+    }
+
+    @media (forced-colors: active) {
+        :host(:hover:not([aria-disabled='true'])) .option {
+            outline: dashed 1px SelectedItem;
+            outline-offset: -1px;
+        }
+    }
+`;export{n as a};

package/dist/chunks/chunk.HRWEJEUM.js

@@ -0,0 +1,296 @@
+import{css as e}from"lit";var a=e`
+    :host {
+        --label-height: 1.8125rem;
+        --help-height: 1.8125rem;
+        --host-height: 5.8125rem;
+
+        block-size: var(--terra-block-size, 2.1875rem);
+        box-sizing: border-box;
+        color: var(--terra-input-text-default);
+        contain: layout size style;
+        contain-intrinsic-size: var(--terra-inline-size, 100%)
+            calc(33vh + var(--terra-block-size, 2.1875rem));
+        display: block;
+        font-family: var(--terra-font-family--public-sans);
+        height: var(--terra-block-size, var(--host-height));
+        inline-size: var(--terra-inline-size, 100%);
+        position: relative;
+        z-index: 10;
+    }
+
+    :host([hide-help]) {
+        height: calc(
+            var(--terra-block-size, var(--host-height)) - var(--help-height)
+        );
+    }
+
+    :host([hide-label]) {
+        height: calc(
+            var(--terra-block-size, var(--host-height)) - var(--label-height)
+        );
+    }
+
+    :host([hide-help][hide-label]) {
+        height: calc(
+            var(--terra-block-size, var(--host-height)) - var(--help-height) - var(
+                    --label-height
+                )
+        );
+    }
+
+    * {
+        box-sizing: inherit;
+    }
+
+    .tag-container {
+        block-size: var(--terra-block-size, 2.25rem);
+        position: absolute;
+        top: 3rem;
+        display: flex;
+        flex-wrap: wrap;
+        align-content: center;
+        padding-inline-start: 0.5rem;
+        max-inline-size: 60%;
+        overflow: hidden;
+    }
+
+    .tag {
+        --terra-button-height-small: 1.25rem;
+        --terra-spacing-small: 0.5rem;
+        max-inline-size: 100%;
+        min-inline-size: 0;
+        text-align: left;
+    }
+
+    /* Ensure the label area can shrink and ellipsize while suffix (X) stays visible */
+    .tag::part(label) {
+        display: block;
+        flex: 1 1 auto;
+        min-inline-size: 0;
+        max-inline-size: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .tag::part(suffix) {
+        flex: 0 0 auto;
+    }
+
+    .tag:hover .tag-icon,
+    .tag:active .tag-icon,
+    .tag:focus .tag-icon {
+        transform: scale(1.125);
+        color: var(--terra-color-nasa-red-shade);
+        transition:
+            transform 0.2s ease-out,
+            color 0.2s ease-out;
+    }
+
+    .tag-icon {
+        font-size: 1.25em;
+    }
+
+    .tag-icon::part(svg) {
+        stroke-width: 2;
+    }
+
+    .combobox {
+        block-size: var(--terra-block-size, 2.25rem);
+        flex: 1 1 auto;
+        max-inline-size: 100%;
+        margin-top: 0.5rem;
+        height: var(--terra-block-size, 3rem);
+    }
+
+    .combobox::part(input) {
+        padding-inline: var(--input-padding-inline-start, 0.5rem) 0.5rem;
+        transition:
+            background-color 0.2s ease,
+            border-color 0.2s ease;
+    }
+
+    .combobox::part(base) {
+        transition:
+            background-color 0.2s ease,
+            border-color 0.2s ease;
+    }
+
+    .combobox::placeholder {
+        color: var(--terra-input-text-placeholder);
+    }
+
+    .combobox:focus {
+        border-color: var(--terra-input-border-focus);
+        outline: 0;
+    }
+
+    .search-input-group {
+        block-size: 100%;
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .search-input-group:has(.combobox:not(:focus)) + .search-results[open] {
+        border-color: var(--terra-input-border-default);
+    }
+
+    .combobox-button {
+        position: absolute;
+        right: 0;
+        bottom: 5px;
+        z-index: 2;
+        margin-block: 0;
+        margin-inline: 0;
+        outline: 0;
+        transition:
+            background-color 0.2s ease,
+            border-color 0.2s ease;
+    }
+
+    .combobox-button[aria-expanded='true'] .chevron {
+        rotate: -0.5turn;
+    }
+
+    .button-icon {
+        height: 1rem;
+        width: 1rem;
+    }
+
+    .chevron {
+        transition: rotate 0.2s ease;
+        will-change: rotate;
+    }
+
+    .spinner {
+        transform-origin: center;
+        animation: spin 2s linear infinite;
+    }
+
+    .spinner circle {
+        stroke-linecap: round;
+        animation: vary-stroke 1.5s ease-in-out infinite;
+    }
+
+    .search-help {
+        color: var(--terra-input-help-text-color);
+        flex: 1 1 100%;
+        font-size: var(--terra-input-help-text-font-size-medium);
+        line-height: var(--terra-line-height-normal);
+        margin-block: 0;
+        position: absolute;
+        bottom: -25px;
+    }
+
+    .external-link {
+        fill: currentColor;
+        vertical-align: middle;
+    }
+
+    .search-results {
+        background-color: var(--terra-input-background-default);
+        block-size: calc(33vh - var(--terra-block-size, 2.1875rem));
+        border-block-end: 2px solid transparent;
+        border-inline: 2px solid transparent;
+        contain: strict;
+        contain-intrinsic-size: var(--terra-inline-size, 100%)
+            calc(33vh - var(--terra-block-size, 2.1875rem));
+        content-visibility: hidden;
+        left: 0;
+        margin-block: 0;
+        margin-inline: 0;
+        max-height: 0;
+        opacity: 0;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        padding-block: 0.5rem;
+        padding-inline: 0.5rem;
+        position: absolute;
+        right: 0;
+        visibility: hidden;
+        transition:
+            background-color 0.2s ease,
+            border-color 0.2s ease;
+    }
+
+    .search-results[open] {
+        border-color: var(--terra-container-panel-border);
+        border-radius: var(--terra-container-panel-border-radius);
+        content-visibility: auto;
+        max-height: calc(33vh - var(--terra-block-size, 2.1875rem));
+        opacity: 1;
+        visibility: visible;
+    }
+
+    .search-results .updating {
+        font-size: var(--terra-font-size-x-large);
+        padding-block: 4rem;
+        text-align: center;
+    }
+
+    .search-results .error {
+        color: var(--terra-text-on-error);
+        background-color: var(--terra-color-bg-error-subtle);
+        font-family: var(--terra-font-family--dm-mono);
+        padding-block: 2rem;
+    }
+
+    .listbox-option-group {
+        padding-inline: 0.5rem;
+        padding-block: 1rem 0.5rem;
+    }
+
+    .group-title {
+        font-family: var(--terra-font-family--inter);
+        font-weight: 700;
+        margin-block: 0;
+    }
+
+    .listbox-option {
+        cursor: pointer;
+        list-style: disc;
+        position: relative;
+    }
+
+    .listbox-option:hover::before,
+    .listbox-option[aria-selected='true']::before {
+        block-size: 1rem;
+        content: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' fill='%231c67e3' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='16'%3E%3C/circle%3E%3Cpath fill='%23ffffff' d='M8 16.956h12.604l-3.844 4.106 1.252 1.338L24 16l-5.988-6.4-1.252 1.338 3.844 4.106H8v1.912z' %3E%3C/path%3E%3C/svg%3E%0A");
+        inline-size: 1rem;
+        left: -2ch;
+        position: absolute;
+        top: 0.0625lh;
+    }
+
+    @media (prefers-reduced-motion) {
+        .button-icon {
+            transition: rotate 0s ease;
+        }
+
+        .search-results {
+            scroll-behavior: auto;
+        }
+    }
+
+    @keyframes spin {
+        to {
+            transform: rotate(1turn);
+        }
+    }
+
+    @keyframes vary-stroke {
+        0% {
+            stroke-dasharray: 0 150;
+            stroke-dashoffset: 0;
+        }
+        47.5% {
+            stroke-dasharray: 42 150;
+            stroke-dashoffset: -16;
+        }
+        95%,
+        100% {
+            stroke-dasharray: 42 150;
+            stroke-dashoffset: -59;
+        }
+    }
+`;export{a};