terra_ui_components 0.0.43__tar.gz → 0.0.113__tar.gz

{terra_ui_components-0.0.43 → terra_ui_components-0.0.113}/.github/ISSUE_TEMPLATE/config.yml

@@ -1,7 +1,7 @@
 contact_links:
   - name: Feature Requests
-    url: https://github.com/gesdisc/components/discussions/categories/ideas
+    url: https://github.com/nasa/terra-ui-components/discussions/categories/ideas
     about: All requests for new features should go here.
   - name: Help & Support
-    url: https://github.com/gesdisc/components/discussions/categories/help
+    url: https://github.com/nasa/terra-ui-components/discussions/categories/help
     about: Please don't create issues for personal help requests. Instead, ask your question on the discussion forum.

terra_ui_components-0.0.113/.github/workflows/build_and_deploy_docs.yml

@@ -0,0 +1,36 @@
+name: Docs build and release
+
+on:
+  push:
+    branches: [main,feature/GUUI-3522-subsetter-component]
+
+jobs:
+  build_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout latest code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Setup NodeJS v22
+        uses: actions/setup-node@v3
+        with:
+          node-version: 22
+          cache: "npm"
+          cache-dependency-path: package-lock.json
+      
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build project
+        run: npm run build
+        env:
+          DOCS_PATH_PREFIX: /components
+
+      - name: Release Github Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          publish_dir: _site
+          publish_branch: gh-pages
+          github_token: ${{ secrets.DEPLOY_TOKEN }}

terra_ui_components-0.0.113/CONTRIBUTING.md

@@ -0,0 +1,15 @@
+# Contributing to Terra UI Components
+
+For detailed contributing guidelines, please visit:
+
+**https://terra-ui.netlify.app/about/contributing/**
+
+The documentation includes information on:
+
+-   GitHub Issues
+-   Pull Requests
+-   Creating New Components
+-   Python Widgets
+-   Testing
+-   Documentation
+-   Best Practices

{terra_ui_components-0.0.43 → terra_ui_components-0.0.113}/PKG-INFO

@@ -1,10 +1,10 @@
 Metadata-Version: 2.4
 Name: terra_ui_components
-Version: 0.0.43
+Version: 0.0.113
 Summary: NASA Terra UI Components Library
 License-File: LICENSE.md
 Requires-Python: >=3.8
-Requires-Dist: anywidget
+Requires-Dist: anywidget>=0.9
 Provides-Extra: dev
 Requires-Dist: jupyterlab; extra == 'dev'
 Requires-Dist: watchfiles; extra == 'dev'
@@ -16,7 +16,7 @@ Intro
 
 ### Forking the Repo
 
-Start by [forking the repo](https://github.com/gesdisc/components/fork) on GitHub, then clone it locally and install dependencies.
+Start by [forking the repo](https://github.com/nasa/terra-ui-components/fork) on GitHub, then clone it locally and install dependencies.
 
 ```bash
 git clone https://github.com/YOUR_GITHUB_USERNAME/components terra-ui-components

{terra_ui_components-0.0.43 → terra_ui_components-0.0.113}/README.md

@@ -4,7 +4,7 @@ Intro
 
 ### Forking the Repo
 
-Start by [forking the repo](https://github.com/gesdisc/components/fork) on GitHub, then clone it locally and install dependencies.
+Start by [forking the repo](https://github.com/nasa/terra-ui-components/fork) on GitHub, then clone it locally and install dependencies.
 
 ```bash
 git clone https://github.com/YOUR_GITHUB_USERNAME/components terra-ui-components

{terra_ui_components-0.0.43 → terra_ui_components-0.0.113}/custom-elements-manifest.config.js

@@ -236,7 +236,7 @@ export default {
             referencesTemplate: (_, tag) => [
                 {
                     name: 'Documentation',
-                    url: `https://disc.gsfc.nasa.gov/components/${tag.replace(
+                    url: `https://terra-ui.netlify.app/components/${tag.replace(
                         'terra-',
                         ''
                     )}`,
@@ -251,7 +251,7 @@ export default {
             referencesTemplate: (_, tag) => {
                 return {
                     name: 'Documentation',
-                    url: `https://disc.gsfc.nasa.gov/components/${tag.replace(
+                    url: `https://terra-ui.netlify.app/components/${tag.replace(
                         'terra-',
                         ''
                     )}`,

{terra_ui_components-0.0.43 → terra_ui_components-0.0.113}/custom-elements-manifest.mjs

@@ -236,7 +236,7 @@ export default {
             referencesTemplate: (_, tag) => [
                 {
                     name: 'Documentation',
-                    url: `https://disc.gsfc.nasa.gov/components/${tag.replace(
+                    url: `https://terra-ui.netlify.app/components/${tag.replace(
                         'terra-',
                         ''
                     )}`,
@@ -251,7 +251,7 @@ export default {
             referencesTemplate: (_, tag) => {
                 return {
                     name: 'Documentation',
-                    url: `https://disc.gsfc.nasa.gov/components/${tag.replace(
+                    url: `https://terra-ui.netlify.app/components/${tag.replace(
                         'terra-',
                         ''
                     )}`,

{terra_ui_components-0.0.43 → terra_ui_components-0.0.113}/docs/_includes/component.njk

@@ -48,7 +48,7 @@
   <h2>Importing</h2>
   <p>
     If you're using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use
-    any of the following snippets to <a href="/getting-started/installation#cherry-picking">cherry pick</a> this component.
+    any of the following snippets to <a href="{{ '/getting-started/installation#cherry-picking' | url }}">cherry pick</a> this component.
   </p>
 
   <sl-tab-group>
@@ -75,14 +75,14 @@
 
     <sl-tab-panel name="bundler">
       <p>
-        To import this component using <a href="{{ rootUrl('/getting-started/installation#bundling') }}">a bundler</a>:
+        To import this component using <a href="{{ '/getting-started/installation#bundling' | url }}">a bundler</a>:
       </p>
       <pre><code class="language-js">import '@nasa-terra/components/{{ meta.npmdir }}/{{ component.path }}';</code></pre>
     </sl-tab-panel>
 
     <sl-tab-panel name="react">
       <p>
-        To import this component as a <a href="/frameworks/react">React component</a>:
+        To import this component as a <a href="{{ '/frameworks/react' | url }}">React component</a>:
       </p>
       <pre><code class="language-js">import {{ component.name }} from '@nasa-terra/components/{{ meta.npmdir }}/react/{{ component.tagNameWithoutPrefix }}';</code></pre>
     </sl-tab-panel>
@@ -116,7 +116,7 @@
     </table>
 
     <p>
-      <em>Learn more about <a href="{{ rootUrl('/getting-started/usage#slots') }}">using slots</a>.</em>
+      <em>Learn more about <a href="{{ '/getting-started/usage#slots' | url }}">using slots</a>.</em>
     </p>
   {% endif %}
 
@@ -182,7 +182,7 @@
           </td>
           <td>
             A read-only promise that resolves when the component has
-            <a href="/getting-started/usage?#component-rendering-and-updating">finished updating</a>.
+            <a href="{{ '/getting-started/usage?#component-rendering-and-updating' | url }}">finished updating</a>.
           </td>
           <td></td>
           <td></td>
@@ -192,7 +192,7 @@
     </table>
 
     <p>
-      <em>Learn more about <a href="{{ rootUrl('/getting-started/usage#attributes-and-properties') }}">attributes and properties</a>.</em>
+      <em>Learn more about <a href="{{ '/getting-started/usage#attributes-and-properties' | url }}">attributes and properties</a>.</em>
     </p>
   {% endif %}
 
@@ -232,7 +232,7 @@
     </table>
 
     <p>
-      <em>Learn more about <a href="{{ rootUrl('/getting-started/usage#events') }}">events</a>.</em>
+      <em>Learn more about <a href="{{ '/getting-started/usage#events' | url }}">events</a>.</em>
     </p>
   {% endif %}
 
@@ -273,7 +273,7 @@
     </table>
 
     <p>
-      <em>Learn more about <a href="{{ rootUrl('/getting-started/usage#methods') }}">methods</a>.</em>
+      <em>Learn more about <a href="{{ '/getting-started/usage#methods' | url }}">methods</a>.</em>
     </p>
   {% endif %}
 
@@ -303,7 +303,7 @@
     </table>
 
     <p>
-      <em>Learn more about <a href="{{ rootUrl('/getting-started/usage#custom-properties') }}">customizing CSS custom properties</a>.</em>
+      <em>Learn more about <a href="{{ '/getting-started/usage#custom-properties' | url }}">customizing CSS custom properties</a>.</em>
     </p>
   {% endif %}
 
@@ -331,7 +331,7 @@
     </table>
 
     <p>
-      <em>Learn more about <a href="{{ rootUrl('/getting-started/customizing/#css-parts') }}">customizing CSS parts</a>.</em>
+      <em>Learn more about <a href="{{ '/getting-started/customizing/#css-parts' | url }}">customizing CSS parts</a>.</em>
     </p>
   {% endif %}
 
@@ -359,7 +359,7 @@
     </table>
 
     <p>
-      <em>Learn more about <a href="{{ rootUrl('/getting-started/customizing#animations') }}">customizing animations</a>.</em>
+      <em>Learn more about <a href="{{ '/getting-started/customizing#animations' | url }}">customizing animations</a>.</em>
     </p>
   {% endif %}
 

terra_ui_components-0.0.113/docs/_includes/default.njk

@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+<html
+  lang="en"
+  data-layout="{{ layout }}"
+  data-terra-ui-components-version="{{ meta.version }}"
+>
+    <head>
+        {# Metadata #}
+        <meta charset="utf-8"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+        <meta name="description" content="{{ meta.description }}"/>
+        <title>{{ meta.title }}</title>
+
+        {# Opt out of Turbo caching #}
+        <meta name="turbo-cache-control">
+
+        {# Stylesheets #}
+        <link rel="stylesheet" href="{{ assetUrl('styles/docs.css') }}"/>
+        <link rel="stylesheet" href="{{ assetUrl('styles/code-previews.css') }}"/>
+        <link rel="stylesheet" href="{{ assetUrl('styles/search.css') }}"/>
+
+        {# Favicons #}
+        <link rel="icon" href="{{ assetUrl('images/logo.white.png') }}" type="image/x-icon"/>
+
+        {# Twitter Cards #}
+        <meta name="twitter:card" content="summary"/>
+        <meta name="twitter:creator" content="nasa_terra-ui"/>
+        <meta name="twitter:image" content="{{ assetUrl(meta.image, true) }}"/>
+
+        {# OpenGraph #}
+        <meta property="og:url" content="{{ rootUrl(page.url, true) }}"/>
+        <meta property="og:title" content="{{ meta.title }}"/>
+        <meta property="og:description" content="{{ meta.description }}"/>
+        <meta property="og:image" content="{{ assetUrl(meta.image, true) }}"/>
+
+        {# Components #}
+        <link rel="stylesheet" href="/dist/themes/horizon.css"/>
+        <script type="module" src="/dist/terra-ui-components-autoloader.js"></script>
+
+        {# Set the initial theme and menu states here to prevent flashing #}
+        <script>
+            (() => {
+                const prefersDark = window
+                    .matchMedia('(prefers-color-scheme: dark)')
+                    .matches;
+                const theme = localStorage.getItem('theme') || 'auto';
+                document
+                    .documentElement
+                    .classList
+                    .toggle('terra-theme-dark', theme === 'dark' || (theme === 'auto' && prefersDark));
+            })();
+        </script>
+
+        {# Turbo + Scroll positioning #}
+        <script src="{{ assetUrl('scripts/turbo.js') }}" type="module"></script>
+        <script src="{{ assetUrl('scripts/docs.js') }}" defer></script>
+        <script src="{{ assetUrl('scripts/code-previews.js') }}" defer></script>
+        <script src="{{ assetUrl('scripts/lunr.js') }}" defer></script>
+        <script src="{{ assetUrl('scripts/search.js') }}" defer></script>
+
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=DM+Mono&family=Inter&family=Public+Sans&display=swap" rel="stylesheet">
+
+        <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.0/cdn/shoelace-autoloader.js"></script>
+    </head>
+    <body>
+        <a id="skip-to-main" class="visually-hidden" href="#main-content" data-smooth-link="false">
+      Skip to main content
+    </a>
+
+        {# Top Navigation Bar #}
+        <header id="top-nav" class="top-nav">
+            <div class="top-nav__left">
+                <a href="/" class="top-nav__logo">
+                    <terra-icon name="nasa-logo" font-size="4rem"></terra-icon>
+                    <span class="top-nav__title">Terra UI</span>
+                </a>
+            </div>
+            </nav>
+            <div class="top-nav__right">
+                <terra-dropdown id="about-dropdown" placement="bottom-start" distance="3" hover>
+                    <terra-button slot="trigger" size="medium" variant="text" caret title="About">
+                        About
+                    </terra-button>
+                    <terra-menu role="menu">
+                        <terra-menu-item value="project-overview">
+                            <a href="{{ '/' | url }}">Project Overview</a>
+                        </terra-menu-item>
+                        <terra-menu-item value="contributing">
+                            <a href="{{ '/about/contributing' | url }}">Contributing</a>
+                        </terra-menu-item>
+                    </terra-menu>
+                </terra-dropdown>
+                <terra-dropdown id="getting-started-dropdown" placement="bottom-start" distance="3" hover>
+                    <terra-button slot="trigger" size="medium" variant="text" caret title="Getting Started">
+                        Getting Started
+                    </terra-button>
+                    <terra-menu role="menu">
+                        <terra-menu-item value="installation">
+                            <a href="{{ '/getting-started/installation' | url }}">Installation</a>
+                        </terra-menu-item>
+                        <terra-menu-item value="usage">
+                            <a href="{{ '/getting-started/usage' | url }}">Usage</a>
+                        </terra-menu-item>
+                        <terra-menu-item value="themes">
+                            <a href="{{ '/getting-started/themes' | url }}">Themes</a>
+                        </terra-menu-item>
+                        <terra-menu-item value="customizing">
+                            <a href="{{ '/getting-started/customizing' | url }}">Customizing</a>
+                        </terra-menu-item>
+                    </terra-menu>
+                </terra-dropdown>
+
+                <terra-dropdown id="frameworks-dropdown" placement="bottom-start" distance="3" hover>
+                    <terra-button slot="trigger" size="medium" variant="text" caret title="Frameworks">
+                        Frameworks
+                    </terra-button>
+                    <terra-menu role="menu">
+                        <terra-menu-item value="react">
+                            <a href="{{ '/frameworks/react' | url }}">React</a>
+                        </terra-menu-item>
+                        <terra-menu-item value="vue">
+                            <a href="{{ '/frameworks/vue' | url }}">Vue</a>
+                        </terra-menu-item>
+                        <terra-menu-item value="angular">
+                            <a href="{{ '/frameworks/angular' | url }}">Angular</a>
+                        </terra-menu-item>
+                    </terra-menu>
+                </terra-dropdown>
+                
+                <button class="top-nav__search" type="button" title="Press / to search" aria-label="Search" data-plugin="search">
+                    <sl-icon name="search"></sl-icon>
+                </button>
+                <a href="https://github.com/nasa/terra-ui-components" title="View Terra UI Components on GitHub" class="top-nav__icon-link">
+                    <sl-icon name="github"></sl-icon>
+                </a>
+                <!--
+                <terra-dropdown id="environment-selector" placement="bottom-end" distance="3" hover>
+                    <terra-button slot="trigger" size="medium" variant="text" caret="" title="Environment" data-optional="" data-valid="" data-user-valid="">
+                        <span id="environment-display">UAT</span>
+                    </terra-button>
+                    <terra-menu role="menu">
+                        <terra-menu-item type="checkbox" value="uat" tabindex="-1" role="menuitemcheckbox" aria-checked="true" aria-disabled="false" checked="">UAT</terra-menu-item>
+                        <terra-menu-item type="checkbox" value="prod" tabindex="-1" role="menuitemcheckbox" aria-checked="false" aria-disabled="false">PROD</terra-menu-item>
+                    </terra-menu>
+                </terra-dropdown>
+                -->
+                <terra-dropdown id="theme-selector" placement="bottom-end" distance="3" hover>
+                    <terra-button slot="trigger" size="medium" variant="text" caret="" title="Press \ to toggle" data-optional="" data-valid="" data-user-valid="">
+                        <sl-icon class="only-light" name="sun-fill" aria-hidden="true" library="default"></sl-icon>
+                        <sl-icon class="only-dark" name="moon-fill" aria-hidden="true" library="default"></sl-icon>
+                    </terra-button>
+                    <terra-menu role="menu">
+                        <terra-menu-item type="checkbox" value="light" tabindex="-1" role="menuitemcheckbox" aria-checked="false" aria-disabled="false">Light</terra-menu-item>
+                        <terra-menu-item type="checkbox" value="dark" tabindex="-1" role="menuitemcheckbox" aria-checked="false" aria-disabled="false">Dark</terra-menu-item>
+                        <hr role="separator" aria-orientation="horizontal" style="margin: var(--terra-spacing-x-small) 0; border: none; border-top: 1px solid var(--terra-panel-border-color);">
+                        <terra-menu-item type="checkbox" value="auto" tabindex="0" role="menuitemcheckbox" aria-checked="true" aria-disabled="false" checked="">System</terra-menu-item>
+                    </terra-menu>
+                </terra-dropdown>
+            </div>
+        </header>
+
+        {# Menu toggle #}
+        <button id="menu-toggle" type="button" aria-label="Menu">
+            <svg width="148" height="148" viewBox="0 0 148 148" xmlns="http://www.w3.org/2000/svg">
+                <g stroke="currentColor" stroke-width="18" fill="none" fill-rule="evenodd" stroke-linecap="round">
+                    <path d="M9.5 125.5h129M9.5 74.5h129M9.5 23.5h129"></path>
+                </g>
+            </svg>
+        </button>
+
+        <aside id="sidebar" data-preserve-scroll>
+            <div class="sidebar-buttons">
+                <terra-button size="small" class="repo-button repo-button--github" href="https://github.com/nasa/terra-ui-components" target="_blank">
+                    <sl-icon slot="prefix" name="github"></sl-icon> Code
+        </terra-button>
+                <terra-button size="small" class="repo-button repo-button--star" href="https://github.com/nasa/terra-ui-components/stargazers" target="_blank">
+                    <sl-icon slot="prefix" name="star-fill"></sl-icon> Star
+        </terra-button>
+            </div>
+
+            <nav>
+                {% include 'sidebar.njk' %}
+            </nav>
+        </aside>
+
+        {# Content #}
+        <main>
+            <a id="main-content"></a>
+            <article id="content" class="content{% if (meta.toc is defined and meta.toc) or (meta.toc is not defined and toc) %} content--with-toc{% endif %}">
+                {% if (meta.toc is defined and meta.toc) 
+                    or(meta.toc is not defined and toc) %}
+                    <div class="content__toc">
+                        <ul>
+                            <li class="top">
+                                <a href="#">{{ meta.title }}</a>
+                            </li>
+                        </ul>
+                    </div>
+                {% endif %}
+
+                <div class="content__body">
+                    {% block content %}
+                        {{ content | safe }}
+                    {% endblock %}
+                </div>
+            </article>
+        </main>
+    </body>
+</html>

terra_ui_components-0.0.113/docs/_includes/sidebar.njk

@@ -0,0 +1,86 @@
+<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.43 → terra_ui_components-0.0.113}/docs/_utilities/markdown.cjs

@@ -61,7 +61,7 @@ markdown.use(markdownItContainer, 'details', {
 markdownItReplaceIt.replacements.push({
     name: 'github-issues',
     re: /\[#([0-9]+)\]/gs,
-    sub: '<a href="https://github.com/gesdisc/components/issues/$1">#$1</a>',
+    sub: '<a href="https://github.com/nasa/terra-ui-components/issues/$1">#$1</a>',
     html: true,
     default: true,
 })

{terra_ui_components-0.0.43 → terra_ui_components-0.0.113}/docs/assets/scripts/docs.js

@@ -147,6 +147,73 @@
     setTheme(theme)
 })()
 
+//
+// Environment selector
+//
+;(() => {
+    function getEnvironment() {
+        return localStorage.getItem('terra-environment') || 'prod'
+    }
+
+    function setEnvironment(newEnvironment) {
+        environment = newEnvironment
+        localStorage.setItem('terra-environment', environment)
+
+        // Update the UI
+        updateEnvironmentSelection()
+        updateEnvironmentDisplay()
+
+        // Trigger a custom event that components can listen to
+        document.dispatchEvent(
+            new CustomEvent('terra-environment-change', {
+                detail: { environment },
+            })
+        )
+    }
+
+    function updateEnvironmentSelection() {
+        const menu = document.querySelector('#environment-selector sl-menu')
+        if (!menu) return
+        ;[...menu.querySelectorAll('sl-menu-item')].map(
+            item => (item.checked = item.getAttribute('value') === environment)
+        )
+    }
+
+    function updateEnvironmentDisplay() {
+        const display = document.querySelector('#environment-display')
+        if (display) {
+            display.textContent = environment.toUpperCase()
+        }
+    }
+
+    let environment = getEnvironment()
+
+    // Selection is not preserved when changing page, so update when opening dropdown
+    document.addEventListener('sl-show', event => {
+        const environmentSelector = event.target.closest('#environment-selector')
+        if (!environmentSelector) return
+        updateEnvironmentSelection()
+    })
+
+    // Listen for selections
+    document.addEventListener('sl-select', event => {
+        const menu = event.target.closest('#environment-selector sl-menu')
+        if (!menu) return
+        setEnvironment(event.detail.item.value)
+
+        setTimeout(() => {
+            location.reload()
+        }, 250)
+    })
+
+    // Set the initial environment and sync the UI
+    setEnvironment(environment)
+})()
+
+//
+// Top navigation dropdown menu item clicks (now handled by terra-dropdown component)
+//
+
 //
 // Open details when printing
 //