terra_ui_components 0.0.112__tar.gz → 0.0.117__tar.gz

{terra_ui_components-0.0.112 → terra_ui_components-0.0.117}/PKG-INFO

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

{terra_ui_components-0.0.112 → terra_ui_components-0.0.117}/docs/_includes/default.njk

@@ -136,17 +136,6 @@
                 <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>

{terra_ui_components-0.0.112 → terra_ui_components-0.0.117}/docs/eleventy.config.cjs

@@ -51,10 +51,13 @@ module.exports = function (eleventyConfig) {
     allComponents.forEach(component => {
         // Get section from markdown front matter, default to "Components"
         const section = componentSectionMap[component.tagName] || 'Components'
-        if (!componentsBySection[section]) {
-            componentsBySection[section] = []
+
+        if (section !== 'Hidden') {
+            if (!componentsBySection[section]) {
+                componentsBySection[section] = []
+            }
+            componentsBySection[section].push(component)
         }
-        componentsBySection[section].push(component)
     })
 
     // Sort components within each section

terra_ui_components-0.0.117/docs/pages/components/breadcrumb.md

@@ -0,0 +1,31 @@
+---
+meta:
+    title: Breadcrumb
+    description: A single breadcrumb item used inside `terra-breadcrumbs`.
+layout: component
+sidebarSection: Hidden
+---
+
+```html:preview
+<terra-breadcrumb current>Current page</terra-breadcrumb>
+```
+
+## Examples
+
+### Link vs. current page
+
+Use `href` for navigable ancestors in the path and set `current` on the last breadcrumb to indicate the current page.
+
+```html:preview
+<terra-breadcrumbs>
+    <terra-breadcrumb href="/">Home</terra-breadcrumb>
+    <terra-breadcrumb href="/section">Section</terra-breadcrumb>
+    <terra-breadcrumb current>Current page</terra-breadcrumb>
+</terra-breadcrumbs>
+```
+
+When `current` is set, the underlying element will receive `aria-current="page"` for accessibility.
+
+For accessibility, your app should always set `current` on exactly one breadcrumb in each `terra-breadcrumbs` trail (typically the last one). Leaving out `current` will still render visually, but assistive technologies won’t know which page in the trail is active.
+
+[component-metadata:terra-breadcrumb]

terra_ui_components-0.0.117/docs/pages/components/breadcrumbs.md

@@ -0,0 +1,52 @@
+---
+meta:
+    title: Breadcrumbs
+    description: Breadcrumbs show visitors where the current page sits in the site hierarchy and let them navigate back to higher-level pages.
+layout: component
+---
+
+```html:preview
+<terra-breadcrumbs>
+    <terra-breadcrumb href="/">Home</terra-breadcrumb>
+    <terra-breadcrumb href="/section">Section</terra-breadcrumb>
+    <terra-breadcrumb current>Current page</terra-breadcrumb>
+</terra-breadcrumbs>
+```
+
+## Examples
+
+### Basic breadcrumbs
+
+Use `terra-breadcrumbs` with one or more `terra-breadcrumb` items to show the path to the current page.
+
+```html:preview
+<terra-breadcrumbs>
+    <terra-breadcrumb href="/">Home</terra-breadcrumb>
+    <terra-breadcrumb href="/missions">Missions</terra-breadcrumb>
+    <terra-breadcrumb current>Artemis</terra-breadcrumb>
+</terra-breadcrumbs>
+```
+
+Always mark the last breadcrumb as current in your app:
+
+-   This ensures the current page is styled correctly.
+-   It also applies `aria-current="page"` to the active breadcrumb for screen readers. Omitting `current` means assistive technologies can’t reliably identify the current location.
+
+### With longer hierarchies
+
+Breadcrumbs should not display more than three levels of hierarchy. For deeper pages, replace the earlier levels with an ellipsis breadcrumb that you manage in your application.
+
+```html:preview
+<terra-breadcrumbs style="--terra-breadcrumbs-separator: '/';">
+    <terra-breadcrumb>...</terra-breadcrumb>
+    <terra-breadcrumb href="/missions">Missions</terra-breadcrumb>
+    <terra-breadcrumb current>Artemis</terra-breadcrumb>
+</terra-breadcrumbs>
+```
+
+In this example, your application is responsible for:
+
+-   **Truncation logic**: choosing when to show the `...` breadcrumb and which levels to omit.
+-   **Current page**: setting `current` on the last breadcrumb, which applies `aria-current="page"` for accessibility.
+
+[component-metadata:terra-breadcrumbs]

{terra_ui_components-0.0.112 → terra_ui_components-0.0.117}/docs/pages/components/menu-item.md

@@ -3,6 +3,7 @@ meta:
     title: Menu Item
     description: Menu items provide options for the user to pick from in a menu.
 layout: component
+sidebarSection: Hidden
 ---
 
 # Menu Item

{terra_ui_components-0.0.112 → terra_ui_components-0.0.117}/docs/pages/components/plot-toolbar.md

@@ -3,6 +3,7 @@ meta:
     title: Plot Toolbar
     description:
 layout: component
+sidebarSection: Hidden
 ---
 
 ```html:preview

{terra_ui_components-0.0.112 → terra_ui_components-0.0.117}/docs/pages/components/radio-group.md

@@ -3,7 +3,7 @@ meta:
     title: Radio Group
     description: Radio groups are used to group multiple radio buttons so they function as a single form control.
 layout: component
-sidebarSection: Elements
+sidebarSection: Hidden
 ---
 
 ```html:preview

terra_ui_components-0.0.117/docs/pages/components/site-header.md

@@ -0,0 +1,86 @@
+---
+meta:
+    title: Site Header
+    description: Site headers provide a consistent navigation structure at the top of pages.
+layout: component
+---
+
+```html:preview
+<terra-site-header site-name="Terra UI"></terra-site-header>
+```
+
+## Examples
+
+### Basic Header
+
+A basic header with just the site name.
+
+```html:preview
+<terra-site-header site-name="My Site"></terra-site-header>
+```
+
+### Header with Navigation
+
+A header with navigation in the center slot.
+
+```html:preview
+<terra-site-header site-name="Terra UI">
+    <terra-site-navigation slot="center">
+        <terra-dropdown placement="bottom-start" distance="3" hover>
+            <terra-button slot="trigger" size="medium" variant="text" caret>
+                Data
+            </terra-button>
+            <terra-menu role="menu">
+                <terra-menu-item value="catalog">
+                    <a href="#">Data Catalog</a>
+                </terra-menu-item>
+                <terra-menu-item value="alerts">
+                    <a href="#">Data Alerts</a>
+                </terra-menu-item>
+            </terra-menu>
+        </terra-dropdown>
+        <terra-dropdown placement="bottom-start" distance="3" hover>
+            <terra-button slot="trigger" size="medium" variant="text" caret>
+                Topics
+            </terra-button>
+            <terra-menu role="menu">
+                <terra-menu-item value="atmosphere">
+                    <a href="#">Atmosphere</a>
+                </terra-menu-item>
+                <terra-menu-item value="ocean">
+                    <a href="#">Ocean</a>
+                </terra-menu-item>
+            </terra-menu>
+        </terra-dropdown>
+    </terra-site-navigation>
+</terra-site-header>
+```
+
+### Custom Title Slot
+
+You can customize the title slot with a link or other content.
+
+```html:preview
+<terra-site-header>
+    <a slot="title" href="/" style="text-decoration: none; color: inherit;">Terra UI</a>
+    <terra-site-navigation slot="center">
+        <terra-dropdown placement="bottom-start" distance="3" hover>
+            <terra-button slot="trigger" size="medium" variant="text" caret>
+                About
+            </terra-button>
+            <terra-menu role="menu">
+                <terra-menu-item value="overview">
+                    <a href="#">Overview</a>
+                </terra-menu-item>
+            </terra-menu>
+        </terra-dropdown>
+    </terra-site-navigation>
+    <div slot="right" style="display: flex; align-items: center; gap: var(--terra-spacing-small);">
+        <button type="button" style="background: transparent; border: none; color: var(--terra-color-spacesuit-white); cursor: pointer; padding: var(--terra-spacing-2x-small);">
+            <terra-icon name="search" library="heroicons"></terra-icon>
+        </button>
+    </div>
+</terra-site-header>
+```
+
+[component-metadata:terra-site-header]

terra_ui_components-0.0.117/docs/pages/components/site-navigation.md

@@ -0,0 +1,129 @@
+---
+meta:
+    title: Site Navigation
+    description: Site navigation provides a flexible navigation structure with dropdown menus.
+layout: component
+---
+
+```html:preview
+<terra-site-navigation>
+    <terra-dropdown placement="bottom-start" distance="3" hover>
+        <terra-button slot="trigger" size="medium" variant="text" caret>
+            Data
+        </terra-button>
+        <terra-menu role="menu">
+            <terra-menu-item value="catalog">
+                <a href="#">Data Catalog</a>
+            </terra-menu-item>
+            <terra-menu-item value="alerts">
+                <a href="#">Data Alerts</a>
+            </terra-menu-item>
+        </terra-menu>
+    </terra-dropdown>
+</terra-site-navigation>
+```
+
+## Examples
+
+### Basic Navigation
+
+A simple navigation with dropdown menus.
+
+```html:preview
+<terra-site-navigation>
+    <terra-dropdown placement="bottom-start" distance="3" hover>
+        <terra-button slot="trigger" size="medium" variant="text" caret>
+            Data
+        </terra-button>
+        <terra-menu role="menu">
+            <terra-menu-item value="catalog">
+                <a href="#">Data Catalog</a>
+            </terra-menu-item>
+            <terra-menu-item value="alerts">
+                <a href="#">Data Alerts and Outages</a>
+            </terra-menu-item>
+            <terra-menu-item value="projects">
+                <a href="#">Projects</a>
+            </terra-menu-item>
+        </terra-menu>
+    </terra-dropdown>
+    <terra-dropdown placement="bottom-start" distance="3" hover>
+        <terra-button slot="trigger" size="medium" variant="text" caret>
+            Topics
+        </terra-button>
+        <terra-menu role="menu">
+            <terra-menu-item value="atmosphere">
+                <a href="#">Atmosphere</a>
+            </terra-menu-item>
+            <terra-menu-item value="ocean">
+                <a href="#">Ocean</a>
+            </terra-menu-item>
+        </terra-menu>
+    </terra-dropdown>
+</terra-site-navigation>
+```
+
+### Full-Width Navigation
+
+Use the `full-width` attribute to enable full-width dropdown panels that span the entire viewport.
+
+```html:preview
+<terra-site-navigation full-width>
+    <terra-dropdown placement="bottom-start" distance="3" hover>
+        <terra-button slot="trigger" size="medium" variant="text" caret>
+            Data
+        </terra-button>
+        <div style="padding: var(--terra-spacing-large); background: var(--terra-panel-background-color); color: var(--terra-color-carbon-90);">
+            <h3 style="margin-top: 0;">Data</h3>
+            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--terra-spacing-large);">
+                <div>
+                    <h4>Data Catalog</h4>
+                    <p>Browse and search for Earth science data.</p>
+                </div>
+                <div>
+                    <h4>Data Alerts</h4>
+                    <p>Stay informed about data outages and updates.</p>
+                </div>
+                <div>
+                    <h4>Projects</h4>
+                    <p>Explore data projects and initiatives.</p>
+                </div>
+            </div>
+        </div>
+    </terra-dropdown>
+    <terra-dropdown placement="bottom-start" distance="3" hover>
+        <terra-button slot="trigger" size="medium" variant="text" caret>
+            Topics
+        </terra-button>
+        <terra-menu role="menu">
+            <terra-menu-item value="atmosphere">
+                <a href="#">Atmosphere</a>
+            </terra-menu-item>
+            <terra-menu-item value="ocean">
+                <a href="#">Ocean</a>
+            </terra-menu-item>
+        </terra-menu>
+    </terra-dropdown>
+</terra-site-navigation>
+```
+
+### Custom Dropdown Content
+
+You can use any content in the dropdown slots, including custom HTML or other Terra components.
+
+```html:preview
+<terra-site-navigation>
+    <terra-dropdown placement="bottom-start" distance="3" hover>
+        <terra-button slot="trigger" size="medium" variant="text" caret>
+            Custom Menu
+        </terra-button>
+        <div style="padding: var(--terra-spacing-medium); min-width: 300px;">
+            <h4 style="margin-top: 0;">Custom Content</h4>
+            <p>You can put any content here, including custom HTML, forms, or other components.</p>
+            <terra-button variant="primary" size="small">Action Button</terra-button>
+        </div>
+    </terra-dropdown>
+</terra-site-navigation>
+```
+
+[component-metadata:terra-site-navigation]

terra_ui_components-0.0.117/docs/pages/components/tab-panel.md

@@ -0,0 +1,39 @@
+---
+meta:
+    title: Tab Panel
+    description: Tab panels are used inside tabs components to display tabbed content.
+layout: component
+sidebarSection: Hidden
+---
+
+Tab panels are used inside [tabs](/components/tabs) components to display tabbed content. Each tab panel must have a `name` attribute that matches the `panel` attribute of its corresponding [tab](/components/tab).
+
+```html:preview
+<terra-tabs>
+  <terra-tab slot="nav" panel="general">General</terra-tab>
+  <terra-tab slot="nav" panel="custom">Custom</terra-tab>
+  <terra-tab slot="nav" panel="advanced">Advanced</terra-tab>
+
+  <terra-tab-panel name="general">This is the general tab panel.</terra-tab-panel>
+  <terra-tab-panel name="custom">This is the custom tab panel.</terra-tab-panel>
+  <terra-tab-panel name="advanced">This is the advanced tab panel.</terra-tab-panel>
+</terra-tabs>
+```
+
+## Usage
+
+Tab panels contain the content that is displayed when their corresponding tab is active. Only one tab panel is visible at a time.
+
+## Best Practices
+
+-   Ensure each tab panel has a unique `name` that matches its corresponding tab's `panel` attribute
+-   Keep tab panel content focused and relevant to its tab label
+-   Use appropriate heading levels within tab panels for document structure
+
+## Accessibility
+
+Tab panels use proper ARIA attributes (`role="tabpanel"`) and are automatically hidden/shown based on their `active` state. Screen readers will announce tab panel content when it becomes active.
+
+:::tip
+Additional demonstrations can be found in the [tabs examples](/components/tabs).
+:::

terra_ui_components-0.0.117/docs/pages/components/tab.md

@@ -0,0 +1,152 @@
+---
+meta:
+    title: Tab
+    description: Tabs are used inside tabs components to represent and activate tab panels.
+layout: component
+sidebarSection: Hidden
+---
+
+Tabs divide content into meaningful, related sections. Tabs allow users to focus on one specific view at a time while maintaining sight of all the relevant content options available.
+
+```html:preview
+<terra-tabs>
+  <terra-tab slot="nav" panel="general">General</terra-tab>
+  <terra-tab slot="nav" panel="custom">Custom</terra-tab>
+  <terra-tab slot="nav" panel="advanced">Advanced</terra-tab>
+
+  <terra-tab-panel name="general">This is the general tab panel.</terra-tab-panel>
+  <terra-tab-panel name="custom">This is the custom tab panel.</terra-tab-panel>
+  <terra-tab-panel name="advanced">This is the advanced tab panel.</terra-tab-panel>
+</terra-tabs>
+```
+
+## Usage
+
+Tabs are used to browse large amounts of content in a compact footprint. They empower visitors to explore and discover content, or quickly scroll past it if they aren't interested. Tabs are used on topic pages to expose previews of the content that is available on sub-pages.
+
+Tabs can also be used to toggle between different views of the same content set. For example, tabs are used to change the view of content in galleries and search results.
+
+## Examples
+
+### Large Tabs
+
+Large tabs are used in most cases. This is the default size.
+
+```html:preview
+<terra-tabs size="large">
+  <terra-tab slot="nav" panel="tab-1">Tab 1</terra-tab>
+  <terra-tab slot="nav" panel="tab-2">Tab 2</terra-tab>
+  <terra-tab slot="nav" panel="tab-3">Tab 3</terra-tab>
+
+  <terra-tab-panel name="tab-1">Tab panel 1</terra-tab-panel>
+  <terra-tab-panel name="tab-2">Tab panel 2</terra-tab-panel>
+  <terra-tab-panel name="tab-3">Tab panel 3</terra-tab-panel>
+</terra-tabs>
+```
+
+### Small Tabs
+
+Small tabs are used in more dense UI (like the gallery page).
+
+```html:preview
+<terra-tabs size="small">
+  <terra-tab slot="nav" panel="tab-1">Tab 1</terra-tab>
+  <terra-tab slot="nav" panel="tab-2">Tab 2</terra-tab>
+  <terra-tab slot="nav" panel="tab-3">Tab 3</terra-tab>
+
+  <terra-tab-panel name="tab-1">Tab panel 1</terra-tab-panel>
+  <terra-tab-panel name="tab-2">Tab panel 2</terra-tab-panel>
+  <terra-tab-panel name="tab-3">Tab panel 3</terra-tab-panel>
+</terra-tabs>
+```
+
+### Icon-Only Tabs
+
+Tabs can also be used with icons instead of text. Place a `<terra-icon>` in the tab's slot.
+
+```html:preview
+<terra-tabs>
+  <terra-tab slot="nav" panel="grid">
+    <terra-icon name="outline-squares-2x2" library="heroicons"></terra-icon>
+  </terra-tab>
+  <terra-tab slot="nav" panel="list">
+    <terra-icon name="outline-list-bullet" library="heroicons"></terra-icon>
+  </terra-tab>
+  <terra-tab slot="nav" panel="document">
+    <terra-icon name="outline-document-text" library="heroicons"></terra-icon>
+  </terra-tab>
+
+  <terra-tab-panel name="grid">Grid view content</terra-tab-panel>
+  <terra-tab-panel name="list">List view content</terra-tab-panel>
+  <terra-tab-panel name="document">Document view content</terra-tab-panel>
+</terra-tabs>
+```
+
+### Closable Tabs
+
+Add the `closable` attribute to a tab to show a close button. This example shows how you can dynamically remove tabs from the DOM when the close button is activated.
+
+```html:preview
+<terra-tabs class="tabs-closable">
+  <terra-tab slot="nav" panel="general">General</terra-tab>
+  <terra-tab slot="nav" panel="closable-1" closable>Closable 1</terra-tab>
+  <terra-tab slot="nav" panel="closable-2" closable>Closable 2</terra-tab>
+
+  <terra-tab-panel name="general">This is the general tab panel.</terra-tab-panel>
+  <terra-tab-panel name="closable-1">This is the first closable tab panel.</terra-tab-panel>
+  <terra-tab-panel name="closable-2">This is the second closable tab panel.</terra-tab-panel>
+</terra-tabs>
+
+<script>
+  const tabs = document.querySelector('.tabs-closable');
+
+  tabs.addEventListener('terra-close', async event => {
+    const tab = event.target;
+    const panel = tabs.querySelector(`terra-tab-panel[name="${tab.panel}"]`);
+
+    // Show the previous tab if the tab is currently active
+    if (tab.active) {
+      tabs.show(tab.previousElementSibling.panel);
+    }
+
+    // Remove the tab + panel
+    tab.remove();
+    panel.remove();
+  });
+</script>
+```
+
+### Disabled Tabs
+
+Tabs can be disabled to prevent selection.
+
+```html:preview
+<terra-tabs>
+  <terra-tab slot="nav" panel="general">General</terra-tab>
+  <terra-tab slot="nav" panel="custom">Custom</terra-tab>
+  <terra-tab slot="nav" panel="disabled" disabled>Disabled</terra-tab>
+
+  <terra-tab-panel name="general">This is the general tab panel.</terra-tab-panel>
+  <terra-tab-panel name="custom">This is the custom tab panel.</terra-tab-panel>
+  <terra-tab-panel name="disabled">This is a disabled tab panel.</terra-tab-panel>
+</terra-tabs>
+```
+
+## Best Practices
+
+-   Use tabs to organize related content into distinct sections
+-   Keep tab labels concise and descriptive
+-   Don't use tabs to switch between drastically different types of content
+-   Use large tabs by default; use small tabs in dense UIs
+-   For icon-only tabs, ensure icons are recognizable and have tooltips or labels for accessibility
+
+## Accessibility
+
+Tabs are fully keyboard accessible:
+
+-   Use arrow keys to navigate between tabs
+-   Press Enter or Space to activate a tab
+-   Press Home to jump to the first tab
+-   Press End to jump to the last tab
+
+Tabs use proper ARIA attributes for screen readers and maintain focus management for keyboard navigation.