terra_ui_components 0.0.129__tar.gz → 0.0.131__tar.gz

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: terra_ui_components
-Version: 0.0.129
+Version: 0.0.131
 Summary: NASA Terra UI Components Library
 License-File: LICENSE.md
 Requires-Python: >=3.8

terra_ui_components-0.0.131/docs/_includes/sidebar.njk

@@ -0,0 +1,87 @@
+<ul>
+    <li>
+        <h2>Design System</h2>
+        <ul>
+            <li>
+                <a href="{{ '/horizon-design-system' | url }}">Overview</a>
+            </li>
+            <li>
+                <a href="{{ '/tokens/typography' | url }}">Typography</a>
+            </li>
+            <li>
+                <a href="{{ '/tokens/color' | url }}">Color</a>
+            </li>
+            <li>
+                <a href="{{ '/tokens/spacing' | url }}">Spacing</a>
+            </li>
+            <li>
+                <a href="{{ '/tokens/elevation' | url }}">Elevation</a>
+            </li>
+            <li>
+                <a href="{{ '/tokens/border-radius' | url }}">Border Radius</a>
+            </li>
+            <li>
+                <a href="{{ '/tokens/transition' | url }}">Transition</a>
+            </li>
+            <li>
+                <a href="{{ '/tokens/z-index' | url }}">Z-index</a>
+            </li>
+            <li>
+                <a href="{{ '/tokens/more' | url }}">More Tokens</a>
+            </li>
+            <li>
+                <a href="{{ '/horizon-design-system/#adoption-status' | url }}">HDS Adoption Status</a>
+            </li>
+        </ul>
+    </li>
+    
+    <li>
+        <h2>Forms</h2>
+        <ul>
+            <li>
+                <a href="{{ '/forms' | url }}">Overview</a>
+            </li>
+        </ul>
+    </li>
+
+    
+    {% for sectionName in meta.sidebarSectionOrder %}
+        {% if meta.componentsBySection[sectionName] %}
+            <li>
+                <h2>{{ sectionName }}</h2>
+                <ul>
+                    {% for component in meta.componentsBySection[sectionName] %}
+                        <li>
+                            <a href="{{ '/components/' + (component.tagName | removeTerraPrefix) | url }}">
+                                {{ component.name | classNameToComponentName }}
+                            </a>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </li>
+        {% endif %}
+    {% endfor %}
+    {# Include any sections not in the defined order (fallback) #}
+    {% for sectionName, components in meta.componentsBySection %}
+        {% set isInOrder = false %}
+        {% for orderedSection in meta.sidebarSectionOrder %}
+            {% if orderedSection == sectionName %}
+                {% set isInOrder = true %}
+            {% endif %}
+        {% endfor %}
+        {% if not isInOrder %}
+            <li>
+                <h2>{{ sectionName }}</h2>
+                <ul>
+                    {% for component in components %}
+                        <li>
+                            <a href="{{ '/components/' + (component.tagName | removeTerraPrefix) | url }}">
+                                {{ component.name | classNameToComponentName }}
+                            </a>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </li>
+        {% endif %}
+    {% endfor %}
+</ul>

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/alert.md

@@ -3,7 +3,6 @@ meta:
     title: Alert
     description: Alerts are used to display important messages inline or as toast notifications.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/avatar.md

@@ -3,7 +3,6 @@ meta:
     title: Avatar
     description: Avatars are used to represent a person or object.
 layout: component
-sidebarSection: Elements
 ---
 
 By default, a generic icon will be shown. You can personalize avatars by adding custom icons, initials, and images. You should always provide a `label` for assistive devices.

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/badge.md

@@ -3,7 +3,6 @@ meta:
     title: Badge
     description: Badges are used to draw attention and display statuses or counts.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/button-group.md

@@ -3,7 +3,6 @@ meta:
     title: Button Group
     description: Button groups can be used to group related buttons into sections.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/button.md

@@ -3,7 +3,6 @@ meta:
     title: Button
     description: Buttons represent actions that are available to the user.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/caption.md

@@ -3,7 +3,6 @@ meta:
     title: Caption
     description: Captions are small text blocks that describe photos, provide additional context and information, and give credit to photographers and other content owners and creators.
 layout: component
-sidebarSection: Elements
 ---
 
 # Caption

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/card.md

@@ -3,7 +3,6 @@ meta:
     title: Card
     description: Cards can be used to group related subjects in a container.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/checkbox.md

@@ -3,7 +3,6 @@ meta:
     title: Checkbox
     description: Checkboxes are a form field used when there are multiple options to select from a list.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/chip.md

@@ -3,7 +3,6 @@ meta:
     title: Chip
     description: A chip is used to represent small blocks of information, and are commonly used for contacts and tags. Chips can optionally have a close button to remove them.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/date-picker.md

@@ -3,7 +3,6 @@ meta:
     title: Date Picker
     description: A versatile date picker component that supports both single date selection and date range selection.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/divider.md

@@ -3,7 +3,6 @@ meta:
     title: Divider
     description: Dividers are used to visually separate or group elements.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/file-upload.md

@@ -3,7 +3,6 @@ meta:
     title: File Upload
     description: File upload fields allow visitors to attach one or multiple files to be submitted with a form.
 layout: component
-sidebarSection: Elements
 ---
 
 # File Upload

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/icon.md

@@ -3,7 +3,6 @@ meta:
     title: Icon
     description: Icons are symbols that can be used to represent various options within an application.
 layout: component
-sidebarSection: Elements
 ---
 
 Terra UI Components come bundled with two sets of icons: `default` and `heroicons`. `default` icons are pulled from the [Horizon Design System](https://website.nasa.gov/hds/foundations/iconography/) (HDS), and `heroicons` icons consist of over 500 icons courtesy of the [Heroicons](https://heroicons.com/) project. If you prefer, you can register [custom icon libraries](#custom-icon-libraries) as well.

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/input.md

@@ -3,7 +3,6 @@ meta:
     title: Input
     description: A text input component with consistent styling across the design system.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/loader.md

@@ -3,7 +3,6 @@ meta:
     title: Loader
     description: Loaders are used to indicate there is content that is loading.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/option.md

@@ -3,7 +3,6 @@ meta:
     title: Option
     description: Options define the selectable items within various form controls such as select.
 layout: component
-sidebarSection: Elements
 ---
 
 # Option

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/pagination.md

@@ -3,7 +3,6 @@ meta:
     title: Pagination
     description: Pagination is a navigational element that allows users to navigate between content or pages.
 layout: component
-sidebarSection: Elements
 ---
 
 ## Usage

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/progress-bar.md

@@ -3,7 +3,6 @@ meta:
     title: Progress Bar
     description: Progress bars are used to show the status of an ongoing operation.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/radio.md

@@ -3,7 +3,6 @@ meta:
     title: Radio
     description: Radio buttons are a form field used when only a single selection can be made from a list.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/scroll-hint.md

@@ -3,7 +3,6 @@ meta:
     title: Scroll Hint
     description: Scroll hint is an animated button that prompts visitors to scroll.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/select.md

@@ -3,7 +3,6 @@ meta:
     title: Select
     description: Select fields are a form field used to select one option from a list.
 layout: component
-sidebarSection: Elements
 ---
 
 # Select

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/slider.md

@@ -3,7 +3,6 @@ meta:
     title: Slider
     description:
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/status-indicator.md

@@ -2,8 +2,7 @@
 meta:
     title: Status Indicator
     description: Status indicators are dynamic labels that indicate the current state of a mission or project.
-    layout: component
-sidebarSection: Elements
+layout: component
 ---
 
 # Status Indicator

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/stepper.md

@@ -3,7 +3,6 @@ meta:
     title: Stepper
     description: Steppers display a visitor's progress through linear workflows and experiences with multiple steps.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/tabs.md

@@ -3,7 +3,6 @@ meta:
     title: Tabs
     description: Tabs organize content into a container that shows one section at a time.
 layout: component
-sidebarSection: Elements
 ---
 
 Tabs make use of [tab](/components/tab) and [tab panel](/components/tab-panel) components. Each tab must be slotted into the `nav` slot and its `panel` must refer to a tab panel of the same name.

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/tag.md

@@ -3,7 +3,6 @@ meta:
     title: Tag
     description: Tags are simple labels that help categorize items.
 layout: component
-sidebarSection: Elements
 ---
 
 ## Usage

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/textarea.md

@@ -3,7 +3,6 @@ meta:
     title: Textarea
     description: A textarea component with consistent styling across the design system.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/time-series.md

@@ -12,8 +12,8 @@ layout: component
     <span slot="loading">Loading...please wait</span>
 
     <terra-time-series slot="logged-in"
-        collection="NLDAS_FORA0125_H_2_0"
-        variable="LWdown"
+        collection="GPM_3IMERGHH_07"
+        variable="precipitation"
         start-date="01/01/2019"
         end-date="03/01/2019"
         location="33.9375,-86.9375"
@@ -31,8 +31,8 @@ layout: component
 
     <template slot="logged-in">
         <terra-time-series
-            collection="M2T1NXAER_5.12.4"
-            variable="BCCMASS"
+            collection="GPM_3IMERGHH_07"
+            variable="precipitation"
             start-date="01/01/2009"
             end-date="01/05/2009"
             location="62,5,95,40"
@@ -43,6 +43,27 @@ layout: component
 </terra-login>
 ```
 
+## Disable Auto-fetch on Plot Interactions
+
+By default, the time series component automatically fetches new data when users zoom, pan, or interact with the plot. You can disable this behavior using the `disable-auto-fetch` attribute:
+
+```html:preview
+<terra-login style="width: 100%">
+    <span slot="loading">Loading...please wait</span>
+
+    <terra-time-series slot="logged-in"
+        collection="GPM_3IMERGHH_07"
+        variable="precipitation"
+        start-date="01/01/2019"
+        end-date="03/01/2019"
+        location="33.9375,-86.9375"
+        disable-auto-fetch
+    ></terra-time-series>
+
+    <p slot="logged-out">Please login to view this plot</p>
+</terra-login>
+```
+
 ```jsx:react
 import TerraTimeSeries from '@nasa-terra/components/dist/react/time-series'
 

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/docs/pages/components/toggle.md

@@ -3,7 +3,6 @@ meta:
     title: Toggle
     description: Togglees allow the user to toggle an option on or off.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@nasa-terra/components",
-  "version": "0.0.129",
+  "version": "0.0.131",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@nasa-terra/components",
-      "version": "0.0.129",
+      "version": "0.0.131",
       "license": "MIT",
       "dependencies": {
         "@apollo/client": "^3.13.8",

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nasa-terra/components",
   "description": "A collection of NASA Earthdata components",
-  "version": "0.0.129",
+  "version": "0.0.131",
   "homepage": "https://github.com/nasa/terra-ui-components",
   "author": "NASA GES DISC <https://disc.gsfc.nasa.gov>",
   "license": "MIT",

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/packages/create-terra-ui-app/boilerplates/nextjs/framework.js

@@ -67,7 +67,7 @@ export async function create(nextTask, outputDir, boilerplatesDir, appName) {
             "import { setBasePath } from '@nasa-terra/components/dist/utilities/base-path.js'"
 
         // Create the setBasePath call with comments (with newline before it)
-        const setBasePathCall = `\n/**\n * Sets the base path to the Terra UI CDN\n *\n * If you'd rather host the assets locally, you should setup a build task to copy the assets locally and\n * set the base path to your local public folder\n * (see https://terra-ui.netlify.app/frameworks/react/#installation for more information)\n */\nsetBasePath('https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.129/cdn/')`
+        const setBasePathCall = `\n/**\n * Sets the base path to the Terra UI CDN\n *\n * If you'd rather host the assets locally, you should setup a build task to copy the assets locally and\n * set the base path to your local public folder\n * (see https://terra-ui.netlify.app/frameworks/react/#installation for more information)\n */\nsetBasePath('https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.131/cdn/')`
 
         // Reconstruct the file: CSS import at top, then existing content with setBasePath import and call inserted
         const newLines = [...lines]

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/pyproject.toml

@@ -5,7 +5,7 @@ build-backend = "hatchling.build"
 [project]
 name = "terra_ui_components"
 dependencies = ["anywidget>=0.9"]
-version = "0.0.129"
+version = "0.0.131"
 readme = "README.md"
 description = "NASA Terra UI Components Library"
 requires-python = ">=3.8"

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/src/components/browse-variables/browse-variables.component.ts

@@ -427,7 +427,7 @@ export default class TerraBrowseVariables extends TerraElement {
 
         return html`<div class="scrollable variables-container">
             <header>
-                ${browsingText ? html`<div>${browsingText}</div>` : nothing}
+                <div>${browsingText}</div>
 
                 <menu>
                     <li>
@@ -563,7 +563,7 @@ export default class TerraBrowseVariables extends TerraElement {
                                                 >${variable.dataFieldLongName}</strong
                                             >
                                             <span
-                                                >${variable.dataProductShortName}
+                                                >${variable.dataProductShortName}_${variable.dataProductVersion}
                                                 &bull;
                                                 ${variable.dataProductTimeInterval}
                                                 &bull;

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/src/components/data-subsetter/notebooks/subsetter-notebook.ts

@@ -21,7 +21,7 @@ export function getNotebook(host: TerraDataSubsetter) {
         {
             id: '2733501b-0de4-4067-8aff-864e1b4c76cb',
             cell_type: 'code',
-            source: '%pip install -q "terra_ui_components==0.0.129" "anywidget==0.9.15"',
+            source: '%pip install -q "terra_ui_components==0.0.131" "anywidget==0.9.15"',
             metadata: {
                 trusted: true,
             },

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/src/components/date-picker/date-picker.component.ts

@@ -68,6 +68,9 @@ export default class TerraDatePicker extends TerraElement {
     @property({ attribute: 'display-format' }) displayFormat?: string
     @property({ type: Boolean }) inline = false
     @property({ type: Boolean, attribute: 'split-inputs' }) splitInputs = false
+    @property() placeholder: string = 'Select Date'
+    @property() startPlaceholder: string = 'Start Date'
+    @property() endPlaceholder: string = 'End Date'
 
     @state() isOpen = false
     @state() leftMonth: Date = new Date()
@@ -1772,9 +1775,10 @@ export default class TerraDatePicker extends TerraElement {
                                       .hideLabel=${this.hideLabel}
                                       .helpText=${this.helpText}
                                       .value=${this.getStartDateDisplayValue()}
-                                      placeholder="Start date"
                                       @terra-blur=${this.handleStartInputBlur}
                                       @keydown=${this.handleKeydown}
+                                      placeholder=${this.startPlaceholder}
+                                      name="start-date"
                                   >
                                       ${this.renderCalendarIcon()}
                                   </terra-input>
@@ -1786,9 +1790,10 @@ export default class TerraDatePicker extends TerraElement {
                                       .hideLabel=${this.hideLabel}
                                       .helpText=${this.helpText}
                                       .value=${this.getEndDateDisplayValue()}
-                                      placeholder="End date"
                                       @terra-blur=${this.handleEndInputBlur}
                                       @keydown=${this.handleKeydown}
+                                      placeholder=${this.endPlaceholder}
+                                      name="end-date"
                                   >
                                       ${this.renderCalendarIcon()}
                                   </terra-input>
@@ -1800,11 +1805,10 @@ export default class TerraDatePicker extends TerraElement {
                                   .hideLabel=${this.hideLabel}
                                   .helpText=${this.helpText}
                                   .value=${this.getDisplayValue()}
-                                  placeholder=${this.range
-                                      ? 'Select date range'
-                                      : 'Select date'}
+                                  placeholder=${this.placeholder}
                                   @terra-blur=${this.handleInputBlur}
                                   @keydown=${this.handleKeydown}
+                                  name="date"
                               >
                                   ${this.renderCalendarIcon()}
                               </terra-input>
@@ -1883,9 +1887,10 @@ export default class TerraDatePicker extends TerraElement {
                                       .hideLabel=${this.hideLabel}
                                       .helpText=${this.helpText}
                                       .value=${this.getStartDateDisplayValue()}
-                                      placeholder="Start date"
+                                      placeholder=${this.startPlaceholder}
                                       @terra-blur=${this.handleStartInputBlur}
                                       @keydown=${this.handleKeydown}
+                                      name="start-date"
                                   >
                                       ${this.renderCalendarIcon()}
                                   </terra-input>
@@ -1907,9 +1912,10 @@ export default class TerraDatePicker extends TerraElement {
                                       .hideLabel=${this.hideLabel}
                                       .helpText=${this.helpText}
                                       .value=${this.getEndDateDisplayValue()}
-                                      placeholder="End date"
+                                      placeholder=${this.endPlaceholder}
                                       @terra-blur=${this.handleEndInputBlur}
                                       @keydown=${this.handleKeydown}
+                                      name="end-date"
                                   >
                                       ${this.renderCalendarIcon()}
                                   </terra-input>
@@ -1932,11 +1938,10 @@ export default class TerraDatePicker extends TerraElement {
                                   .hideLabel=${this.hideLabel}
                                   .helpText=${this.helpText}
                                   .value=${this.getDisplayValue()}
-                                  placeholder=${this.range
-                                      ? 'Select date range'
-                                      : 'Select date'}
+                                  placeholder=${this.placeholder}
                                   @terra-blur=${this.handleInputBlur}
                                   @keydown=${this.handleKeydown}
+                                  name="date"
                               >
                                   ${this.renderCalendarIcon()}
                               </terra-input>

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/src/components/plot-toolbar/notebooks/time-averaged-map-notebook.ts

@@ -21,7 +21,7 @@ export function getTimeAveragedMapNotebook(host: TerraPlotToolbar) {
         {
             id: '2733501b-0de4-4067-8aff-864e1b4c76cb',
             cell_type: 'code',
-            source: '%pip install -q "terra_ui_components==0.0.129" "anywidget==0.9.15" "pandas" "rasterio" "matplotlib"',
+            source: '%pip install -q "terra_ui_components==0.0.131" "anywidget==0.9.15" "pandas" "rasterio" "matplotlib"',
             metadata: {
                 trusted: true,
             },

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/src/components/plot-toolbar/notebooks/time-series-notebook.ts

@@ -21,7 +21,7 @@ export function getTimeSeriesNotebook(host: TerraPlotToolbar) {
         {
             id: '2733501b-0de4-4067-8aff-864e1b4c76cb',
             cell_type: 'code',
-            source: '%pip install -q "terra_ui_components==0.0.129" "anywidget==0.9.15" "pandas"',
+            source: '%pip install -q "terra_ui_components==0.0.131" "anywidget==0.9.15" "pandas"',
             metadata: {
                 trusted: true,
             },

{terra_ui_components-0.0.129 → terra_ui_components-0.0.131}/src/components/plot-toolbar/plot-toolbar.component.ts

@@ -37,7 +37,7 @@ import { formatDate } from '../../utilities/date.js'
  *
  * @csspart base - The component's base wrapper.
  *
- * @cssproperty --example - An example CSS custom property.
+ * @cssproperty --terra-plot-toolbar-help-menu-display - Controls the display of the help menu button. Set to `none` to hide it. Defaults to `flex`.
  */
 export default class TerraPlotToolbar extends TerraElement {
     static styles: CSSResultGroup = [componentStyles, styles]
@@ -275,7 +275,7 @@ export default class TerraPlotToolbar extends TerraElement {
                               aria-expanded=${this.activeMenuItem === 'help'}
                               aria-controls="menu"
                               aria-haspopup="true"
-                              class="toggle"
+                              class="toggle help-toggle"
                               @mouseenter=${this.#handleActiveMenuItem}
                               data-menu-name="help"
                           >
@@ -289,7 +289,6 @@ export default class TerraPlotToolbar extends TerraElement {
                                   font-size="1em"
                               ></terra-icon>
                           </terra-button>
-
                           <terra-button
                               outline
                               aria-expanded=${this.activeMenuItem === 'jupyter'}
@@ -473,7 +472,7 @@ export default class TerraPlotToolbar extends TerraElement {
                               max="1"
                               step="0.01"
                               .value=${String(this.opacity)}
-                              @change=${this.#onShowOpacityChange}
+                              @input=${this.#onShowOpacityChange}
                           />
                           <span id="opacity-output">${this.opacity.toFixed(2)}</span>
                       </label>
@@ -495,15 +494,13 @@ export default class TerraPlotToolbar extends TerraElement {
                               )}
                           </select>
                       </label>
-        <label>
-        <input
-          type="checkbox"
-          @change=${this.#showCheckBoxToggle}
-        />
-        <slot>Draw Profile</slot>
-        </label>
-      </label>
-                
+                      <label>
+                          <input
+                              type="checkbox"
+                              @change=${this.#showCheckBoxToggle}
+                          />
+                          <slot>Draw Profile</slot>
+                      </label>
                   `
                 : nothing}
         `