terra_ui_components 0.0.118__tar.gz → 0.0.120__tar.gz

{terra_ui_components-0.0.118 → terra_ui_components-0.0.120}/PKG-INFO

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

{terra_ui_components-0.0.118 → terra_ui_components-0.0.120}/custom-elements-manifest.config.js

@@ -176,12 +176,8 @@ export default {
 
                         if (classDoc?.events) {
                             classDoc.events.forEach(event => {
-                                event.reactName = `on${pascalCase(
-                                    event.name
-                                )}`.replace(/^Sl/, 'Terra')
-                                event.eventName = `${pascalCase(
-                                    event.name
-                                )}Event`.replace(/^Sl/, 'Terra')
+                                event.reactName = `on${pascalCase(event.name)}`
+                                event.eventName = `${pascalCase(event.name)}Event`
                             })
                         }
                     }

{terra_ui_components-0.0.118 → terra_ui_components-0.0.120}/docs/_includes/component.njk

@@ -26,12 +26,12 @@
     </div>
 
     <div class="component-header__info">
-      <sl-badge variant="neutral" pill>
+      <terra-badge variant="neutral" pill>
         Since {{component.since or '?' }}
-      </sl-badge>
-      <sl-badge variant="{{ badgeVariant }}" pill style="text-transform: capitalize;">
+      </terra-badge>
+      <terra-badge variant="{{ badgeVariant }}" pill style="text-transform: capitalize;">
         {{ component.status }}
-      </sl-badge>
+      </terra-badge>
     </div>
   </header>
 
@@ -51,42 +51,42 @@
     any of the following snippets to <a href="{{ '/getting-started/installation#cherry-picking' | url }}">cherry pick</a> this component.
   </p>
 
-  <sl-tab-group>
-    <sl-tab slot="nav" panel="script">Script</sl-tab>
-    <sl-tab slot="nav" panel="import">Import</sl-tab>
-    <sl-tab slot="nav" panel="bundler">Bundler</sl-tab>
-    <sl-tab slot="nav" panel="react">React</sl-tab>
+  <terra-tabs>
+    <terra-tab slot="nav" panel="script">Script</terra-tab>
+    <terra-tab slot="nav" panel="import">Import</terra-tab>
+    <terra-tab slot="nav" panel="bundler">Bundler</terra-tab>
+    <terra-tab slot="nav" panel="react">React</terra-tab>
 
-    <sl-tab-panel name="script">
+    <terra-tab-panel name="script">
       <p>
         To import this component from <a href="https://www.jsdelivr.com/package/npm/@nasa-terra/components">the CDN</a>
         using a script tag:
       </p>
       <pre><code class="language-html">&lt;script type=&quot;module&quot; src=&quot;https://cdn.jsdelivr.net/npm/@nasa-terra/components@{{ meta.version }}/{{ meta.cdndir }}/{{ component.path }}&quot;&gt;&lt;/script&gt;</code></pre>
-    </sl-tab-panel>
+    </terra-tab-panel>
 
-    <sl-tab-panel name="import">
+    <terra-tab-panel name="import">
       <p>
         To import this component from <a href="https://www.jsdelivr.com/package/npm/@nasa-terra/components">the CDN</a>
         using a JavaScript import:
       </p>
       <pre><code class="language-js">import 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@{{ meta.version }}/{{ meta.cdndir }}/{{ component.path }}';</code></pre>
-    </sl-tab-panel>
+    </terra-tab-panel>
 
-    <sl-tab-panel name="bundler">
+    <terra-tab-panel name="bundler">
       <p>
         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>
+    </terra-tab-panel>
 
-    <sl-tab-panel name="react">
+    <terra-tab-panel name="react">
       <p>
         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>
-  </sl-tab-group>
+    </terra-tab-panel>
+  </terra-tabs>
 
   {# Slots #}
   {% if component.slots.length %}
@@ -142,13 +142,13 @@
               {% if prop.attribute | length > 0 %}
                 {% if prop.attribute != prop.name %}
                   <br>
-                  <sl-tooltip content="This attribute is different from its property">
+                  <terra-tooltip content="This attribute is different from its property">
                     <small>
                       <code class="nowrap">
                         {{ prop.attribute }}
                       </code>
                     </small>
-                  </sl-tooltip>
+                  </terra-tooltip>
                 {% endif %}
               {% endif %}
             </td>
@@ -157,7 +157,7 @@
             </td>
             <td style="text-align: center;">
               {% if prop.reflects %}
-                <sl-icon label="yes" name="check-lg"></sl-icon>
+                <terra-icon label="yes" name="solid-check" library="heroicons"></terra-icon>
               {% endif %}
             </td>
             <td>

{terra_ui_components-0.0.118 → terra_ui_components-0.0.120}/docs/_includes/default.njk

@@ -62,24 +62,15 @@
         <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>
+    <body class="terra-prefers-color-scheme">
         <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-site-header site-name="Terra UI">
+            <div class="top-nav__right" slot="right">
                 <terra-dropdown id="about-dropdown" placement="bottom-start" distance="3" hover>
                     <terra-button slot="trigger" size="medium" variant="text" caret title="About">
                         About
@@ -131,25 +122,13 @@
                 </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>
+                    <terra-icon name="solid-magnifying-glass" library="heroicons"></terra-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>
+                    <svg style="width: 24px; fill: #fff;" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
                 </a>
-                <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>
+        </terra-site-header>
 
         {# Menu toggle #}
         <button id="menu-toggle" type="button" aria-label="Menu">
@@ -161,15 +140,6 @@
         </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>

{terra_ui_components-0.0.118 → terra_ui_components-0.0.120}/docs/_utilities/code-previews.cjs

@@ -75,7 +75,7 @@ module.exports = function (doc, options) {
         <div class="code-preview__preview">
           ${code.textContent}
           <div class="code-preview__resizer">
-            <sl-icon name="grip-vertical"></sl-icon>
+            <terra-icon name="solid-bars-4" library="heroicons"></terra-icon>
           </div>
         </div>
 

{terra_ui_components-0.0.118 → terra_ui_components-0.0.120}/docs/_utilities/copy-code-buttons.cjs

@@ -7,7 +7,12 @@ let codeBlockId = 0
 module.exports = function (doc) {
     doc.querySelectorAll('pre > code').forEach(code => {
         const pre = code.closest('pre')
-        const button = doc.createElement('sl-copy-button')
+        const button = doc.createElement('terra-button')
+
+        button.setAttribute('outline', true)
+        button.setAttribute('circle', true)
+        button.innerHTML =
+            '<slot name="label"><terra-icon name="solid-clipboard" library="heroicons" font-size="1.5em"></terra-icon></slot>'
 
         if (!code.id) {
             code.id = `code-block-${++codeBlockId}`

{terra_ui_components-0.0.118 → terra_ui_components-0.0.120}/docs/assets/scripts/docs.js

@@ -100,9 +100,9 @@
     }
 
     function updateSelection() {
-        const menu = document.querySelector('#theme-selector sl-menu')
+        const menu = document.querySelector('#theme-selector terra-menu')
         if (!menu) return
-        ;[...menu.querySelectorAll('sl-menu-item')].map(
+        ;[...menu.querySelectorAll('terra-menu-item')].map(
             item => (item.checked = item.getAttribute('value') === theme)
         )
     }
@@ -110,15 +110,15 @@
     let theme = getTheme()
 
     // Selection is not preserved when changing page, so update when opening dropdown
-    document.addEventListener('sl-show', event => {
+    document.addEventListener('terra-show', event => {
         const themeSelector = event.target.closest('#theme-selector')
         if (!themeSelector) return
         updateSelection()
     })
 
     // Listen for selections
-    document.addEventListener('sl-select', event => {
-        const menu = event.target.closest('#theme-selector sl-menu')
+    document.addEventListener('terra-select', event => {
+        const menu = event.target.closest('#theme-selector terra-menu')
         if (!menu) return
         setTheme(event.detail.item.value)
     })
@@ -172,9 +172,9 @@
     }
 
     function updateEnvironmentSelection() {
-        const menu = document.querySelector('#environment-selector sl-menu')
+        const menu = document.querySelector('#environment-selector terra-menu')
         if (!menu) return
-        ;[...menu.querySelectorAll('sl-menu-item')].map(
+        ;[...menu.querySelectorAll('terra-menu-item')].map(
             item => (item.checked = item.getAttribute('value') === environment)
         )
     }
@@ -189,15 +189,15 @@
     let environment = getEnvironment()
 
     // Selection is not preserved when changing page, so update when opening dropdown
-    document.addEventListener('sl-show', event => {
+    document.addEventListener('terra-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')
+    document.addEventListener('terra-select', event => {
+        const menu = event.target.closest('#environment-selector terra-menu')
         if (!menu) return
         setEnvironment(event.detail.item.value)
 
@@ -346,7 +346,6 @@
         const el = document.querySelector('.sidebar-version')
         if (!el) return
 
-        if (location.hostname === 'next.shoelace.style') el.textContent = 'Next'
         if (location.hostname === 'localhost') el.textContent = 'Development'
     }
 

{terra_ui_components-0.0.118 → terra_ui_components-0.0.120}/docs/assets/scripts/search.js

@@ -12,7 +12,7 @@
       <div class="search__content">
         <div class="search__header">
           <div id="search-combobox" class="search__input-wrapper">
-            <sl-icon name="search"></sl-icon>
+            <terra-icon name="solid-magnifying-glass" library="heroicons"></terra-icon>
             <input
               id="search-input"
               class="search__input"
@@ -32,7 +32,7 @@
               aria-activedescendant
             >
             <button type="button" class="search__clear-button" aria-label="Clear entry" tabindex="-1" hidden>
-              <sl-icon name="x-circle-fill"></sl-icon>
+              <terra-icon name="solid-x-circle" library="heroicons"></terra-icon>
             </button>
           </div>
         </div>
@@ -301,30 +301,10 @@
                 const displayTitle = page.title ?? ''
                 const displayDescription = page.description ?? ''
                 const displayUrl = page.url.replace(/^\//, '').replace(/\/$/, '')
-                let icon = 'file-text'
 
                 a.setAttribute('role', 'option')
                 a.setAttribute('id', `search-result-item-${match.ref}`)
 
-                if (page.url.includes('getting-started/')) {
-                    icon = 'lightbulb'
-                }
-                if (page.url.includes('resources/')) {
-                    icon = 'book'
-                }
-                if (page.url.includes('components/')) {
-                    icon = 'puzzle'
-                }
-                if (page.url.includes('tokens/')) {
-                    icon = 'palette2'
-                }
-                if (page.url.includes('utilities/')) {
-                    icon = 'wrench'
-                }
-                if (page.url.includes('tutorials/')) {
-                    icon = 'joystick'
-                }
-
                 li.classList.add('search__result')
                 li.setAttribute('role', 'option')
                 li.setAttribute('id', `search-result-item-${match.ref}`)
@@ -332,9 +312,6 @@
 
                 a.href = page.url
                 a.innerHTML = `
-          <div class="search__result-icon" aria-hidden="true">
-            <sl-icon name="${icon}"></sl-icon>
-          </div>
           <div class="search__result__details">
             <div class="search__result-title"></div>
             <div class="search__result-description"></div>

{terra_ui_components-0.0.118 → terra_ui_components-0.0.120}/docs/assets/styles/docs.css

@@ -23,7 +23,7 @@
     --docs-content-vertical-spacing: 2rem;
     --docs-search-overlay-background: rgb(0 0 0 / 0.2);
     --docs-skip-to-main-width: 200px;
-    --docs-top-nav-height: 85px;
+    --docs-top-nav-height: 88px;
     --docs-top-nav-bg: var(--terra-color-carbon-80);
 }
 
@@ -535,8 +535,8 @@ pre .token.italic {
 /* Copy code button */
 .copy-code-button {
     position: absolute;
-    top: 0;
-    right: 0;
+    top: 5px;
+    right: 5px;
     white-space: normal;
     color: var(--terra-color-carbon-80);
     transition:
@@ -1274,7 +1274,7 @@ html.sidebar-open #menu-toggle {
     display: none;
 }
 
-#theme-selector sl-menu {
+#theme-selector terra-menu {
     /* Set an initial size to prevent width being too small when first opening on small screen width */
     width: 140px;
 }
@@ -1518,7 +1518,7 @@ html.sidebar-open #menu-toggle {
 }
 
 .repo-button--twitter terra-icon {
-    color: var(--sl-color-sky-500);
+    color: var(--terra-color-blue-700);
 }
 
 @media screen and (max-width: 400px) {

{terra_ui_components-0.0.118 → terra_ui_components-0.0.120}/docs/pages/components/alert.md

@@ -6,8 +6,6 @@ layout: component
 sidebarSection: Elements
 ---
 
-<!-- TODO: @shoelace-style/shoelace/dist/react/alert needs to be replaced with our dist -->
-
 ```html:preview
 <terra-alert open>
   <terra-icon  slot="icon" name="outline-information-circle" library="heroicons"></terra-icon>

terra_ui_components-0.0.120/docs/pages/components/badge.md

@@ -0,0 +1,236 @@
+---
+meta:
+    title: Badge
+    description: Badges are used to draw attention and display statuses or counts.
+layout: component
+sidebarSection: Elements
+---
+
+```html:preview
+<terra-badge>Badge</terra-badge>
+```
+
+```jsx:react
+import TerraBadge from '@nasa-terra/components/dist/react/badge';
+
+const App = () => <TerraBadge>Badge</TerraBadge>;
+```
+
+## Examples
+
+### Variants
+
+Set the `variant` attribute to change the badge's variant.
+
+```html:preview
+<terra-badge variant="primary">Primary</terra-badge>
+<terra-badge variant="success">Success</terra-badge>
+<terra-badge variant="neutral">Neutral</terra-badge>
+<terra-badge variant="warning">Warning</terra-badge>
+<terra-badge variant="danger">Danger</terra-badge>
+```
+
+```jsx:react
+import TerraBadge from '@nasa-terra/components/dist/react/badge';
+
+const App = () => (
+  <>
+    <TerraBadge variant="primary">Primary</TerraBadge>
+    <TerraBadge variant="success">Success</TerraBadge>
+    <TerraBadge variant="neutral">Neutral</TerraBadge>
+    <TerraBadge variant="warning">Warning</TerraBadge>
+    <TerraBadge variant="danger">Danger</TerraBadge>
+  </>
+);
+```
+
+### Pill Badges
+
+Use the `pill` attribute to give badges rounded edges.
+
+```html:preview
+<terra-badge variant="primary" pill>Primary</terra-badge>
+<terra-badge variant="success" pill>Success</terra-badge>
+<terra-badge variant="neutral" pill>Neutral</terra-badge>
+<terra-badge variant="warning" pill>Warning</terra-badge>
+<terra-badge variant="danger" pill>Danger</terra-badge>
+```
+
+```jsx:react
+import TerraBadge from '@nasa-terra/components/dist/react/badge';
+
+const App = () => (
+  <>
+    <TerraBadge variant="primary" pill>
+      Primary
+    </TerraBadge>
+    <TerraBadge variant="success" pill>
+      Success
+    </TerraBadge>
+    <TerraBadge variant="neutral" pill>
+      Neutral
+    </TerraBadge>
+    <TerraBadge variant="warning" pill>
+      Warning
+    </TerraBadge>
+    <TerraBadge variant="danger" pill>
+      Danger
+    </TerraBadge>
+  </>
+);
+```
+
+### Pulsating Badges
+
+Use the `pulse` attribute to draw attention to the badge with a subtle animation.
+
+```html:preview
+<div class="badge-pulse">
+  <terra-badge variant="primary" pill pulse>1</terra-badge>
+  <terra-badge variant="success" pill pulse>1</terra-badge>
+  <terra-badge variant="neutral" pill pulse>1</terra-badge>
+  <terra-badge variant="warning" pill pulse>1</terra-badge>
+  <terra-badge variant="danger" pill pulse>1</terra-badge>
+</div>
+
+<style>
+  .badge-pulse terra-badge:not(:last-of-type) {
+    margin-right: 1rem;
+  }
+</style>
+```
+
+```jsx:react
+import TerraBadge from '@nasa-terra/components/dist/react/badge';
+
+const css = `
+  .badge-pulse terra-badge:not(:last-of-type) {
+    margin-right: 1rem;
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="badge-pulse">
+      <TerraBadge variant="primary" pill pulse>
+        1
+      </TerraBadge>
+      <TerraBadge variant="success" pill pulse>
+        1
+      </TerraBadge>
+      <TerraBadge variant="neutral" pill pulse>
+        1
+      </TerraBadge>
+      <TerraBadge variant="warning" pill pulse>
+        1
+      </TerraBadge>
+      <TerraBadge variant="danger" pill pulse>
+        1
+      </TerraBadge>
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+```
+
+### With Buttons
+
+One of the most common use cases for badges is attaching them to buttons. To make this easier, badges will be automatically positioned at the top-right when they're a child of a button.
+
+```html:preview
+<terra-button>
+  Requests
+  <terra-badge pill>30</terra-badge>
+</terra-button>
+
+<terra-button style="margin-inline-start: 1rem;">
+  Warnings
+  <terra-badge variant="warning" pill>8</terra-badge>
+</terra-button>
+
+<terra-button style="margin-inline-start: 1rem;">
+  Errors
+  <terra-badge variant="danger" pill>6</terra-badge>
+</terra-button>
+```
+
+{% raw %}
+
+```jsx:react
+import TerraBadge from '@nasa-terra/components/dist/react/badge';
+import TerraButton from '@nasa-terra/components/dist/react/button';
+
+const App = () => (
+  <>
+    <TerraButton>
+      Requests
+      <TerraBadge pill>30</TerraBadge>
+    </TerraButton>
+
+    <TerraButton style={{ marginInlineStart: '1rem' }}>
+      Warnings
+      <TerraBadge variant="warning" pill>
+        8
+      </TerraBadge>
+    </TerraButton>
+
+    <TerraButton style={{ marginInlineStart: '1rem' }}>
+      Errors
+      <TerraBadge variant="danger" pill>
+        6
+      </TerraBadge>
+    </TerraButton>
+  </>
+);
+```
+
+{% endraw %}
+
+### With Menu Items
+
+When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly.
+
+```html:preview
+<terra-menu style="max-width: 240px;">
+  <terra-menu-label>Messages</terra-menu-label>
+  <terra-menu-item>Comments <terra-badge slot="suffix" variant="neutral" pill>4</terra-badge></terra-menu-item>
+  <terra-menu-item>Replies <terra-badge slot="suffix" variant="neutral" pill>12</terra-badge></terra-menu-item>
+</terra-menu>
+```
+
+{% raw %}
+
+```jsx:react
+import TerraBadge from '@nasa-terra/components/dist/react/badge';
+import TerraButton from '@nasa-terra/components/dist/react/button';
+import TerraMenu from '@nasa-terra/components/dist/react/menu';
+import TerraMenuItem from '@nasa-terra/components/dist/react/menu-item';
+import TerraMenuLabel from '@nasa-terra/components/dist/react/menu-label';
+
+const App = () => (
+  <TerraMenu
+    style={{
+      maxWidth: '240px',
+      border: 'solid 1px var(--terra-panel-border-color)',
+      borderRadius: 'var(--terra-border-radius-medium)'
+    }}
+  >
+    <TerraMenuLabel>Messages</TerraMenuLabel>
+    <TerraMenuItem>
+      Comments
+      <TerraBadge slot="suffix" variant="neutral" pill>
+        4
+      </TerraBadge>
+    </TerraMenuItem>
+    <TerraMenuItem>
+      Replies
+      <TerraBadge slot="suffix" variant="neutral" pill>
+        12
+      </TerraBadge>
+    </TerraMenuItem>
+  </TerraMenu>
+);
+```
+
+{% endraw %}