@nasa-terra/components 0.0.191 → 0.0.193

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@nasa-terra/components",
-  "version": "0.0.191",
+  "version": "0.0.193",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -64,6 +64,88 @@
             ]
           }
         },
+        {
+          "name": "terra-avatar",
+          "description": "Avatars are used to represent a person or object.\n---\n\n\n### **Events:**\n - **terra-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<terra-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "image",
+              "description": "The image source to use for the avatar.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "label",
+              "description": "A label to use to describe the avatar to assistive devices.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "initials",
+              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "loading",
+              "description": "Indicates how the browser should load the image.",
+              "value": { "type": "'eager' | 'lazy'", "default": "'eager'" }
+            },
+            {
+              "name": "shape",
+              "description": "The shape of the avatar.",
+              "value": {
+                "type": "'circle' | 'square' | 'rounded'",
+                "default": "'circle'"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "icon",
+              "description": "The default icon to use when no image or initials are present. Works best with `<terra-icon>`."
+            }
+          ],
+          "events": [
+            {
+              "name": "terra-error",
+              "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "image",
+                "description": "The image source to use for the avatar.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "A label to use to describe the avatar to assistive devices.",
+                "type": "string"
+              },
+              {
+                "name": "initials",
+                "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+                "type": "string"
+              },
+              {
+                "name": "loading",
+                "description": "Indicates how the browser should load the image.",
+                "type": "'eager' | 'lazy'"
+              },
+              {
+                "name": "shape",
+                "description": "The shape of the avatar.",
+                "type": "'circle' | 'square' | 'rounded'"
+              }
+            ],
+            "events": [
+              {
+                "name": "terra-error",
+                "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause."
+              }
+            ]
+          }
+        },
         {
           "name": "terra-alert",
           "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **terra-show** - Emitted when the alert opens.\n- **terra-after-show** - Emitted after the alert opens and all animations are complete.\n- **terra-hide** - Emitted when the alert closes.\n- **terra-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's main content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **message** - The container that wraps the alert's main content.",
@@ -179,88 +261,6 @@
             ]
           }
         },
-        {
-          "name": "terra-avatar",
-          "description": "Avatars are used to represent a person or object.\n---\n\n\n### **Events:**\n - **terra-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<terra-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "image",
-              "description": "The image source to use for the avatar.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "label",
-              "description": "A label to use to describe the avatar to assistive devices.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "initials",
-              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "loading",
-              "description": "Indicates how the browser should load the image.",
-              "value": { "type": "'eager' | 'lazy'", "default": "'eager'" }
-            },
-            {
-              "name": "shape",
-              "description": "The shape of the avatar.",
-              "value": {
-                "type": "'circle' | 'square' | 'rounded'",
-                "default": "'circle'"
-              }
-            }
-          ],
-          "slots": [
-            {
-              "name": "icon",
-              "description": "The default icon to use when no image or initials are present. Works best with `<terra-icon>`."
-            }
-          ],
-          "events": [
-            {
-              "name": "terra-error",
-              "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "image",
-                "description": "The image source to use for the avatar.",
-                "type": "string"
-              },
-              {
-                "name": "label",
-                "description": "A label to use to describe the avatar to assistive devices.",
-                "type": "string"
-              },
-              {
-                "name": "initials",
-                "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
-                "type": "string"
-              },
-              {
-                "name": "loading",
-                "description": "Indicates how the browser should load the image.",
-                "type": "'eager' | 'lazy'"
-              },
-              {
-                "name": "shape",
-                "description": "The shape of the avatar.",
-                "type": "'circle' | 'square' | 'rounded'"
-              }
-            ],
-            "events": [
-              {
-                "name": "terra-error",
-                "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause."
-              }
-            ]
-          }
-        },
         {
           "name": "terra-badge",
           "description": "Badges are used to draw attention and display statuses or counts.\n---\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -1589,6 +1589,8 @@
                 "name": "spatialSelection",
                 "type": "LatLng | LatLngBounds | undefined"
               },
+              { "name": "shapeGeoJson", "type": "object | undefined" },
+              { "name": "spatialLabel", "type": "string | undefined" },
               {
                 "name": "selectedDateRange",
                 "type": "{ startDate: string | null; endDate: string | null }"
@@ -1614,6 +1616,7 @@
               { "name": "collectionAccordionOpen", "type": "boolean" },
               { "name": "dataAccessMode", "type": "'original' | 'subset'" },
               { "name": "validationError", "type": "string | undefined" },
+              { "name": "harmonyRequestError", "type": "string | undefined" },
               { "name": "granuleMinDate", "type": "string | undefined" },
               { "name": "granuleMaxDate", "type": "string | undefined" },
               {
@@ -1776,6 +1779,16 @@
             {
               "name": "closable",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "timezone",
+              "description": "IANA timezone identifier for display (e.g. 'America/New_York'). Affects time display only; internal values remain UTC.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "twelve-hour",
+              "description": "Display time in 12-hour format with AM/PM. Requires enable-time. Internal values remain UTC.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [{ "name": "", "description": "The default slot." }],
@@ -1823,6 +1836,16 @@
               { "name": "clearAllLabel", "type": "string" },
               { "name": "useEndOfDay", "type": "boolean" },
               { "name": "showClose", "type": "boolean" },
+              {
+                "name": "timezone",
+                "description": "IANA timezone identifier for display (e.g. 'America/New_York'). Affects time display only; internal values remain UTC.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "twelveHour",
+                "description": "Display time in 12-hour format with AM/PM. Requires enable-time. Internal values remain UTC.",
+                "type": "boolean"
+              },
               { "name": "isOpen", "type": "boolean" },
               { "name": "leftMonth", "type": "Date" },
               { "name": "rightMonth", "type": "Date" },
@@ -3495,70 +3518,6 @@
             "events": []
           }
         },
-        {
-          "name": "terra-progress-bar",
-          "description": "Progress bars are used to show the status of an ongoing operation.\n---\n\n\n### **Slots:**\n - _default_ - A label to show inside the progress indicator.\n\n### **CSS Properties:**\n - **--height** - The progress bar's height. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--label-color** - The color of the label. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **indicator** - The progress bar's indicator.\n- **label** - The progress bar's label.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "value",
-              "description": "The current progress as a percentage, 0 to 100.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "indeterminate",
-              "description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "label",
-              "description": "A custom label for assistive devices.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "variant",
-              "description": "The progress bar's theme variant.",
-              "value": {
-                "type": "| 'default'\n        | 'primary'\n        | 'success'\n        | 'warning'\n        | 'danger'",
-                "default": "'primary'"
-              }
-            },
-            { "name": "title", "value": { "type": "string", "default": "''" } }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "A label to show inside the progress indicator."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "value",
-                "description": "The current progress as a percentage, 0 to 100.",
-                "type": "number"
-              },
-              {
-                "name": "indeterminate",
-                "description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
-                "type": "boolean"
-              },
-              {
-                "name": "label",
-                "description": "A custom label for assistive devices.",
-                "type": "string"
-              },
-              {
-                "name": "variant",
-                "description": "The progress bar's theme variant.",
-                "type": "| 'default'\n        | 'primary'\n        | 'success'\n        | 'warning'\n        | 'danger'"
-              },
-              { "name": "title", "type": "string" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "terra-popup",
           "description": "Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.\n---\n\n\n### **Events:**\n - **terra-reposition** - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive operations in your listener or consider debouncing it.\n\n### **Methods:**\n - **reposition()** - Forces the popup to recalculate and reposition itself.\n\n### **Slots:**\n - _default_ - The popup's content.\n- **anchor** - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the `anchor` attribute or property instead.\n\n### **CSS Properties:**\n - **--arrow-size** - The size of the arrow. Note that an arrow won't be shown unless the `arrow` attribute is used. _(default: 6px)_\n- **--arrow-color** - The color of the arrow. _(default: var(--terra-color-carbon-black))_\n- **--auto-size-available-width** - A read-only custom property that determines the amount of width the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n- **--auto-size-available-height** - A read-only custom property that determines the amount of height the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n\n### **CSS Parts:**\n - **arrow** - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and maybe a border or box shadow.\n- **popup** - The popup's container. Useful for setting a background color, box shadow, etc.\n- **hover-bridge** - The hover bridge element. Only available when the `hover-bridge` option is enabled.",
@@ -3826,6 +3785,70 @@
             ]
           }
         },
+        {
+          "name": "terra-progress-bar",
+          "description": "Progress bars are used to show the status of an ongoing operation.\n---\n\n\n### **Slots:**\n - _default_ - A label to show inside the progress indicator.\n\n### **CSS Properties:**\n - **--height** - The progress bar's height. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--label-color** - The color of the label. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **indicator** - The progress bar's indicator.\n- **label** - The progress bar's label.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "The current progress as a percentage, 0 to 100.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "indeterminate",
+              "description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "A custom label for assistive devices.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "variant",
+              "description": "The progress bar's theme variant.",
+              "value": {
+                "type": "| 'default'\n        | 'primary'\n        | 'success'\n        | 'warning'\n        | 'danger'",
+                "default": "'primary'"
+              }
+            },
+            { "name": "title", "value": { "type": "string", "default": "''" } }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "A label to show inside the progress indicator."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "The current progress as a percentage, 0 to 100.",
+                "type": "number"
+              },
+              {
+                "name": "indeterminate",
+                "description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "A custom label for assistive devices.",
+                "type": "string"
+              },
+              {
+                "name": "variant",
+                "description": "The progress bar's theme variant.",
+                "type": "| 'default'\n        | 'primary'\n        | 'success'\n        | 'warning'\n        | 'danger'"
+              },
+              { "name": "title", "type": "string" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "terra-radio",
           "description": "Radio buttons are a form field used when only a single selection can be made from a list.\n---\n\n\n### **Events:**\n - **terra-blur** - Emitted when the radio loses focus.\n- **terra-change** - Emitted when the checked state changes.\n- **terra-focus** - Emitted when the radio gains focus.\n- **terra-input** - Emitted when the radio receives input.\n- **terra-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the radio.\n- **focus(options: _FocusOptions_)** - Sets focus on the radio.\n- **blur()** - Removes focus from the radio.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The radio's label.\n\n### **CSS Properties:**\n - **--terra-radio-*** - All radio design tokens from horizon.css are supported. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The circular container that wraps the radio's checked state.\n- **control--checked** - The radio control when the radio is checked.\n- **checked-icon** - The checked icon, an SVG element.\n- **label** - The container that wraps the radio's label.",
@@ -4768,6 +4791,11 @@
               "description": "Whether bounding box selection is allowed via the draw toolbar.\nMirrors the terra-map attribute name for consistency.",
               "value": { "type": "boolean", "default": "true" }
             },
+            {
+              "name": "show-polygon-selection",
+              "description": "Whether polygon selection is allowed via the draw toolbar.\nMirrors the terra-map attribute name for consistency.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "hide-bounding-box-selection",
               "value": { "type": "string" }
@@ -4843,6 +4871,11 @@
                 "description": "Whether bounding box selection is allowed via the draw toolbar.\nMirrors the terra-map attribute name for consistency.",
                 "type": "boolean"
               },
+              {
+                "name": "showPolygonSelection",
+                "description": "Whether polygon selection is allowed via the draw toolbar.\nMirrors the terra-map attribute name for consistency.",
+                "type": "boolean"
+              },
               { "name": "hideBoundingBoxSelection" },
               {
                 "name": "showPointSelection",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nasa-terra/components",
   "description": "A collection of NASA Earthdata components",
-  "version": "0.0.191",
+  "version": "0.0.193",
   "homepage": "https://github.com/nasa/terra-ui-components",
   "author": "NASA GES DISC <https://disc.gsfc.nasa.gov>",
   "license": "MIT",
@@ -76,6 +76,7 @@
     "@lit/task": "^1.0.0",
     "@tanstack/query-core": "^5.96.0",
     "@tanstack/query-persist-client-core": "^5.96.0",
+    "@turf/turf": "^7.3.5",
     "ag-grid-community": "^34.2.0",
     "colormap": "^2.3.2",
     "composed-offset-position": "^0.0.6",