fix positioning

.gitignore

@@ -5,4 +5,3 @@ docs/search.json
 dist
 examples
 node_modules
-src/react

docs/_sidebar.md

@@ -5,11 +5,6 @@
   - [Themes](/getting-started/themes)
   - [Customizing](/getting-started/customizing)
 
-- Frameworks
-  - [React](/frameworks/react)
-  - [Vue](/frameworks/vue)
-  - [Angular](/frameworks/angular)
-
 - Resources
   - [Community](/resources/community)
   - [Contributing](/resources/contributing)
@@ -26,6 +21,7 @@
   - [Card](/components/card)
   - [Checkbox](/components/checkbox)
   - [Color Picker](/components/color-picker)
+  - [Context Menu](/components/context-menu)
   - [Details](/components/details)
   - [Dialog](/components/dialog)
   - [Divider](/components/divider)

docs/assets/plugins/code-block/code-block.css

@@ -61,17 +61,11 @@
   border: solid 1px rgb(var(--sl-color-neutral-200));
   border-bottom: none;
   border-radius: 0 !important;
+  margin: 0;
   display: none;
 }
 
-.code-block__source pre {
-  margin: 0;
-}
-
-.code-block--expanded.code-block--show-html .code-block__source--html,
-.code-block--expanded.code-block--show-react .code-block__source--react,
-/* When a code block is expanded but doesn't have a React example, force the HTML example to show */
-.code-block--expanded:not(.code-block--has-react) .code-block__source--html {
+.code-block--expanded .code-block__source {
   display: block;
 }
 
@@ -103,19 +97,6 @@
   border-right: solid 1px rgb(var(--sl-color-neutral-200));
 }
 
-.code-block__button--html,
-.code-block__button--react {
-  width: 70px;
-  display: flex;
-  place-items: center;
-  justify-content: center;
-}
-
-.code-block__button--selected {
-  font-weight: 700;
-  color: rgb(var(--sl-color-primary-600));
-}
-
 .code-block__button--codepen {
   display: flex;
   place-items: center;

docs/assets/plugins/code-block/code-block.js

@@ -1,30 +1,10 @@
 (() => {
-  const version = sessionStorage.getItem('sl-version');
-  let flavor = localStorage.getItem('flavor') || 'html'; // "html" or "react"
   let count = 1;
 
   if (!window.$docsify) {
     throw new Error('Docsify must be loaded before installing this plugin.');
   }
 
-  function convertModuleLinks(html) {
-    return html.replace(/@shoelace-style\/shoelace/g, `https://cdn.skypack.dev/@shoelace-style/shoelace@${version}`);
-  }
-
-  function getAdjacentExample(name, pre) {
-    let currentPre = pre.nextElementSibling;
-
-    while (currentPre?.tagName.toLowerCase() === 'pre') {
-      if (currentPre?.getAttribute('data-lang').split(' ').includes(name)) {
-        return currentPre;
-      }
-
-      currentPre = currentPre.nextElementSibling;
-    }
-
-    return null;
-  }
-
   function runScript(script) {
     const newScript = document.createElement('script');
 
@@ -48,66 +28,36 @@
     hook.afterEach(function (html, next) {
       const domParser = new DOMParser();
       const doc = domParser.parseFromString(html, 'text/html');
-
-      const htmlButton = `
-        <button
-          type="button"
-          title="Show HTML code"
-          class="code-block__button code-block__button--html ${flavor === 'html' ? 'code-block__button--selected' : ''}"
-        >
-          HTML
-        </button>
-      `;
-
-      const reactButton = `
-        <button
-          type="button"
-          title="Show React code"
-          class="code-block__button code-block__button--react ${
-            flavor === 'react' ? 'code-block__button--selected' : ''
-          }"
-        >
-          React
-        </button>
-      `;
-
       const codePenButton = `
-        <button type="button" class="code-block__button code-block__button--codepen" title="Edit on CodePen">
-          <svg
-            width="138"
-            height="26"
-            viewBox="0 0 138 26"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2.3"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z" />
-          </svg>
-        </button>
-      `;
+      <button type="button" class="code-block__button code-block__button--codepen" title="Edit on CodePen">
+        <svg
+          width="138"
+          height="26"
+          viewBox="0 0 138 26"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z" />
+        </svg>
+      </button>
+    `;
 
       [...doc.querySelectorAll('code[class^="lang-"]')].map(code => {
         if (code.classList.contains('preview')) {
           const pre = code.closest('pre');
           const preId = `code-block-preview-${count}`;
           const toggleId = `code-block-toggle-${count}`;
-          const reactPre = getAdjacentExample('react', pre);
-          const hasReact = reactPre !== null;
-          const examples = [
-            {
-              name: 'HTML',
-              codeBlock: pre
-            }
-          ];
 
           pre.id = preId;
+          pre.classList.add('code-block__source');
           pre.setAttribute('data-lang', pre.getAttribute('data-lang').replace(/ preview$/, ''));
           pre.setAttribute('aria-labelledby', toggleId);
 
           const codeBlock = `
-            <div class="code-block code-block--show-${flavor} ${hasReact ? 'code-block--has-react' : ''}">
+            <div class="code-block">
               <div class="code-block__preview">
                 ${code.textContent}
                 <div class="code-block__resizer">
@@ -115,23 +65,9 @@
                 </div>
               </div>
 
-              <div class="code-block__source code-block__source--html">
-                ${pre.outerHTML}
-              </div>
-
-              ${
-                hasReact
-                  ? `
-                <div class="code-block__source code-block__source--react">
-                  ${reactPre.outerHTML}
-                </div>
-              `
-                  : ''
-              }
+              ${pre.outerHTML}
 
               <div class="code-block__buttons">
-                ${hasReact ? ` ${htmlButton} ${reactButton} ` : ''}
-
                 <button type="button" class="code-block__button code-block__toggle" aria-expanded="false" aria-controls="${preId}">
                   View Source
                   <svg
@@ -152,15 +88,11 @@
           `;
 
           pre.replaceWith(domParser.parseFromString(codeBlock, 'text/html').body);
-          if (reactPre) reactPre.remove();
 
           count++;
         }
       });
 
-      // Force the highlighter to run again so JSX fields get highlighted properly
-      requestAnimationFrame(() => Prism.highlightAll());
-
       next(doc.body.innerHTML);
     });
 
@@ -207,35 +139,49 @@
     });
   });
 
-  // Toggle source mode
+  // Open in CodePen
   document.addEventListener('click', event => {
     const button = event.target.closest('button');
-    const codeBlock = button?.closest('.code-block');
 
-    if (button?.classList.contains('code-block__button--html')) {
-      flavor = 'html';
-    } else if (button?.classList.contains('code-block__button--react')) {
-      flavor = 'react';
-    } else {
-      return;
+    if (button?.classList.contains('code-block__button--codepen')) {
+      const codeBlock = button.closest('.code-block');
+      const html = codeBlock.querySelector('.code-block__source > code').textContent;
+      const version = sessionStorage.getItem('sl-version');
+
+      const form = document.createElement('form');
+      form.action = 'https://codepen.io/pen/define';
+      form.method = 'POST';
+      form.target = '_blank';
+
+      // Docs: https://blog.codepen.io/documentation/prefill/
+      const data = {
+        title: '',
+        description: '',
+        tags: ['shoelace', 'web components'],
+        editors: '100',
+        head: `<meta name="viewport" content="width=device-width">`,
+        css_external: ``,
+        js_external: ``,
+        js_module: true,
+        html:
+          `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${version}/dist/themes/light.css">\n` +
+          `<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${version}/dist/shoelace.js"></script>\n` +
+          `\n` +
+          html,
+        css: `body {\n  font: 16px sans-serif;\n}`,
+        js: ``
+      };
+
+      const input = document.createElement('input');
+      input.type = 'hidden';
+      input.name = 'data';
+      input.value = JSON.stringify(data);
+      form.append(input);
+
+      document.body.append(form);
+      form.submit();
+      form.remove();
     }
-
-    localStorage.setItem('flavor', flavor);
-
-    [...document.querySelectorAll('.code-block')].map(codeBlock => {
-      codeBlock.classList.toggle('code-block--show-html', flavor === 'html');
-      codeBlock.classList.toggle('code-block--show-react', flavor === 'react');
-      codeBlock
-        .querySelector('.code-block__button--html')
-        ?.classList.toggle('code-block__button--selected', flavor === 'html');
-      codeBlock
-        .querySelector('.code-block__button--react')
-        ?.classList.toggle('code-block__button--selected', flavor === 'react');
-    });
-
-    // Expand the code block
-    codeBlock.classList.add('code-block--expanded');
-    codeBlock.querySelector('.code-block__toggle').setAttribute('aria-expanded', 'true');
   });
 
   // Expand and collapse code blocks
@@ -259,80 +205,4 @@
       });
     }
   });
-
-  // Open in CodePen
-  document.addEventListener('click', event => {
-    const button = event.target.closest('button');
-
-    if (button?.classList.contains('code-block__button--codepen')) {
-      const codeBlock = button.closest('.code-block');
-      const htmlExample = codeBlock.querySelector('.code-block__source--html > pre > code')?.textContent;
-      const reactExample = codeBlock.querySelector('.code-block__source--react > pre > code')?.textContent;
-      const isReact = flavor === 'react' && typeof reactExample === 'string';
-      const editors = isReact ? '0010' : '1000';
-      let htmlTemplate = '';
-      let jsTemplate = '';
-      let cssTemplate = '';
-
-      const form = document.createElement('form');
-      form.action = 'https://codepen.io/pen/define';
-      form.method = 'POST';
-      form.target = '_blank';
-
-      // HTML templates
-      if (!isReact) {
-        htmlTemplate =
-          `<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${version}/dist/shoelace.js"></script>\n` +
-          '\n' +
-          htmlExample;
-        jsTemplate = '';
-      }
-
-      // React templates
-      if (isReact) {
-        htmlTemplate = '<div id="root"></div>';
-        jsTemplate =
-          `import React, { useRef } from 'https://cdn.skypack.dev/react@17.0.2';\n` +
-          `import ReactDOM from 'https://cdn.skypack.dev/react-dom@17.0.2';\n` +
-          convertModuleLinks(reactExample) +
-          '\n' +
-          '\n' +
-          'ReactDOM.render(<App />, document.getElementById("root"));';
-      }
-
-      // CSS templates
-      cssTemplate =
-        `@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${version}/dist/themes/light.css';\n` +
-        '\n' +
-        'body {\n' +
-        '  font: 16px sans-serif;\n' +
-        '}';
-
-      // Docs: https://blog.codepen.io/documentation/prefill/
-      const data = {
-        title: '',
-        description: '',
-        tags: ['shoelace', 'web components'],
-        editors,
-        head: `<meta name="viewport" content="width=device-width">`,
-        css_external: ``,
-        js_external: ``,
-        js_module: true,
-        js_pre_processor: isReact ? 'babel' : 'none',
-        html: htmlTemplate,
-        css: cssTemplate,
-        js: jsTemplate
-      };
-
-      const input = document.createElement('input');
-      input.type = 'hidden';
-      input.name = 'data';
-      input.value = JSON.stringify(data);
-      form.append(input);
-
-      document.body.append(form);
-      form.submit();
-      form.remove();
-    }
-  });
 })();

docs/assets/plugins/metadata/metadata.js

@@ -392,41 +392,6 @@
           return prop.kind === 'field' && prop.privacy !== 'private';
         });
 
-        if (component.path) {
-          /* prettier-ignore */
-          result += `
-            ## Importing
-
-            <sl-tab-group>
-            <sl-tab slot="nav" panel="cdn" active>CDN</sl-tab>
-            <sl-tab slot="nav" panel="bundler">Bundler</sl-tab>
-            <sl-tab slot="nav" panel="react">React</sl-tab>
-
-            <sl-tab-panel name="cdn">\n
-            To cherry pick this component from [the CDN](https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace):
-
-            \`\`\`js
-            import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${metadata.package.version}/${component.path}';
-            \`\`\`
-            </sl-tab-panel>
-
-            <sl-tab-panel name="bundler">\n
-            To import this component using [a bundler](/getting-started/installation#bundling):
-            \`\`\`js
-            import '@shoelace-style/shoelace/${component.path}';
-            \`\`\`
-            </sl-tab-panel>
-
-            <sl-tab-panel name="react">\n
-            To import this component as a [React component](/frameworks/react):
-            \`\`\`js
-            import { ${component.name} } from '@shoelace-style/shoelace/dist/react';
-            \`\`\`
-            </sl-tab-panel>
-            </sl-tab-group>
-          `;
-        }
-
         if (props?.length) {
           result += `
             ## Properties
@@ -488,6 +453,41 @@
           `;
         }
 
+        if (component.path) {
+          /* prettier-ignore */
+          result += `
+            ## Importing
+
+            <sl-tab-group>
+            <sl-tab slot="nav" panel="cdn" active>CDN</sl-tab>
+            <sl-tab slot="nav" panel="bundler">Bundler</sl-tab>
+            <sl-tab slot="nav" panel="react">React</sl-tab>
+
+            <sl-tab-panel name="cdn">\n
+            To import this component from [the CDN](https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace):
+
+            \`\`\`js
+            import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${metadata.package.version}/${component.path}';
+            \`\`\`
+            </sl-tab-panel>
+
+            <sl-tab-panel name="bundler">\n
+            To import this component using [a bundler](/getting-started/installation#bundling):
+            \`\`\`js
+            import '@shoelace-style/shoelace/${component.path}';
+            \`\`\`
+            </sl-tab-panel>
+
+            <sl-tab-panel name="react">\n
+            To import this component using [\`@shoelace-style/react\`](https://www.npmjs.com/package/@shoelace-style/react):
+            \`\`\`js
+            import '@shoelace-style/react/dist/${component.tagName.replace(/^sl-/, '')}';
+            \`\`\`
+            </sl-tab-panel>
+            </sl-tab-group>
+          `;
+        }
+
         // Strip whitespace so markdown doesn't process things as code blocks
         return result.replace(/^ +| +$/gm, '');
       });

docs/assets/styles/docs.css

@@ -197,6 +197,7 @@ strong {
 
 .markdown-section {
   max-width: 860px;
+  overflow-anchor: none;
 }
 
 .anchor span {

docs/components/context-menu.md

@@ -0,0 +1,140 @@
+# Context Menu
+
+[component-header:sl-context-menu]
+
+Context menus offer additional options through a menu that opens at the pointer's location, usually activated by a right-click.
+
+Context menus are designed to work with [menus](/components/menu) and [menu items](/components/menu-item). The menu must include `slot="menu"`. Other content you provide will be part of the context menu's target area.
+
+```html preview
+<sl-context-menu>
+  <div style="height: 200px; background: rgb(var(--sl-color-neutral-100)); display: flex; align-items: center; justify-content: center; padding: 1rem;">
+    Right-click to activate the context menu
+  </div>
+
+  <sl-menu slot="menu">
+    <sl-menu-item value="undo">Undo</sl-menu-item>
+    <sl-menu-item value="redo">Redo</sl-menu-item>
+    <sl-divider></sl-divider>
+    <sl-menu-item value="cut">Cut</sl-menu-item>
+    <sl-menu-item value="copy">Copy</sl-menu-item>
+    <sl-menu-item value="paste">Paste</sl-menu-item>
+    <sl-menu-item value="delete">Delete</sl-menu-item>
+  </sl-menu>
+</sl-context-menu>
+```
+
+## Examples
+
+### Handling Selections
+
+The [menu component](/components/menu) emits an `sl-select` event when a menu item is selected. You can use this to handle selections. The selected item will be available in `event.detail.item`.
+
+```html preview
+<div class="context-menu-selections">
+  <sl-context-menu>
+    <div style="height: 200px; background: rgb(var(--sl-color-neutral-100)); display: flex; align-items: center; justify-content: center; padding: 1rem;">
+      Right-click to activate the context menu
+    </div>
+
+    <sl-menu slot="menu">
+      <sl-menu-item value="cut">Cut</sl-menu-item>
+      <sl-menu-item value="copy">Copy</sl-menu-item>
+      <sl-menu-item value="paste">Paste</sl-menu-item>
+    </sl-menu>
+  </sl-context-menu>
+</div>
+
+<script>
+  const container = document.querySelector('.context-menu-selections');
+  const menu = container.querySelector('sl-menu');
+  const result = container.querySelector('.result');
+
+  menu.addEventListener('sl-select', event => {
+    console.log(`You selected: ${event.detail.item.value}`);
+  });
+</script>
+```
+
+### Inline
+
+The context menu uses `display: contents`, so it will assume the shape of the content you slot in.
+
+```html preview
+<sl-context-menu>
+  <span style="background: rgb(var(--sl-color-neutral-100)); padding: .5rem 1rem;">
+    Right-click here
+  </span>
+
+  <sl-menu slot="menu">
+    <sl-menu-item value="cut">Cut</sl-menu-item>
+    <sl-menu-item value="copy">Copy</sl-menu-item>
+    <sl-menu-item value="paste">Paste</sl-menu-item>
+  </sl-menu>
+</sl-context-menu>
+```
+
+### Placement
+
+The preferred placement of the context menu can be set with the `placement` attribute. Note that the actual position may vary to ensure the menu remains in the viewport.
+
+```html preview
+<sl-context-menu placement="top-end">
+  <div style="height: 200px; background: rgb(var(--sl-color-neutral-100)); display: flex; align-items: center; justify-content: center; padding: 1rem;">
+    Right-click to activate the context menu
+  </div>
+
+  <sl-menu slot="menu">
+    <sl-menu-item value="undo">Undo</sl-menu-item>
+    <sl-menu-item value="redo">Redo</sl-menu-item>
+    <sl-divider></sl-divider>
+    <sl-menu-item value="cut">Cut</sl-menu-item>
+    <sl-menu-item value="copy">Copy</sl-menu-item>
+    <sl-menu-item value="paste">Paste</sl-menu-item>
+    <sl-menu-item value="delete">Delete</sl-menu-item>
+  </sl-menu>
+</sl-context-menu>
+```
+
+### Detecting the Target Item
+
+A single context menu can wrap a number of items. To detect the item that activated the context menu...
+
+TODO
+
+```html preview
+<div class="context-menu-detecting">
+  <sl-context-menu>
+    <ul>
+      <li>Item 1</li>
+      <li>Item 2</li>
+      <li>Item 3</li>
+      <li>Item 4</li>
+      <li>Item 5</li>
+    </ul>
+
+    <sl-menu slot="menu">
+      <sl-menu-item value="cut">Cut</sl-menu-item>
+      <sl-menu-item value="copy">Copy</sl-menu-item>
+      <sl-menu-item value="paste">Paste</sl-menu-item>
+    </sl-menu>
+  </sl-context-menu>
+</div>
+
+<style>
+  .context-menu-detecting ul {
+    max-width: 300px;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  
+  .context-menu-detecting li {
+    background: rgb(var(--sl-color-neutral-100));
+    padding: .5rem 1rem;
+    margin: 0 0 2px 0;
+  }
+</style>
+```
+
+[component-metadata:sl-context-menu]

docs/components/dropdown.md

@@ -60,32 +60,6 @@ When dropdowns are used with [menus](/components/menu), you can listen for the `
 </script>
 ```
 
-Alternatively, you can listen for the `click` event on individual menu items. Note that, using this approach, disabled menu items will still emit a `click` event.
-
-```html preview
-<div class="dropdown-selection-alt">
-  <sl-dropdown>
-    <sl-button slot="trigger" caret>Edit</sl-button>
-    <sl-menu>
-      <sl-menu-item value="cut">Cut</sl-menu-item>
-      <sl-menu-item value="copy">Copy</sl-menu-item>
-      <sl-menu-item value="paste">Paste</sl-menu-item>
-    </sl-menu>
-  </sl-dropdown>
-</div>
-
-<script>
-  const container = document.querySelector('.dropdown-selection-alt');
-  const cut = container.querySelector('sl-menu-item[value="cut"]');
-  const copy = container.querySelector('sl-menu-item[value="copy"]');
-  const paste = container.querySelector('sl-menu-item[value="paste"]');
-
-  cut.addEventListener('click', () => console.log('cut'));
-  copy.addEventListener('click', () => console.log('copy'));
-  paste.addEventListener('click', () => console.log('paste'));
-</script>
-```
-
 ### Placement
 
 The preferred placement of the dropdown can be set with the `placement` attribute. Note that the actual position may vary to ensure the panel remains in the viewport.

docs/components/icon.md

@@ -40,7 +40,6 @@ Icons are sized relative to the current font size. To change their size, set the
   <sl-icon name="battery-charging"></sl-icon>
   <sl-icon name="bell"></sl-icon>
   <sl-icon name="clock"></sl-icon>
-  <sl-icon name="cloud"></sl-icon>
   <sl-icon name="download"></sl-icon>
   <sl-icon name="file-earmark"></sl-icon>
   <sl-icon name="flag"></sl-icon>
@@ -51,6 +50,7 @@ Icons are sized relative to the current font size. To change their size, set the
   <sl-icon name="search"></sl-icon>
   <sl-icon name="star"></sl-icon>
   <sl-icon name="trash"></sl-icon>
+  <sl-icon name="x-circle"></sl-icon>
 </div>
 ```
 

docs/frameworks/angular.md

@@ -1,22 +0,0 @@
-# Angular
-
-## Installation
-Angular [plays nice](https://custom-elements-everywhere.com/#angular) with custom elements. Just make sure to apply the custom elements schema as shown below.
-
-```js
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule],
-  providers: [],
-  bootstrap: [AppComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class AppModule {}
-```
-
-?> Are you using Shoelace with Angular? This page could use some love. [Please help us improve it!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/angular.md)

docs/frameworks/react.md

@@ -1,88 +0,0 @@
-# React
-
-React [doesn't play nice](https://custom-elements-everywhere.com/#react) with custom elements, so Shoelace offers a React version of every component.
-
-## Installation
-
-To add Shoelace to your React app, install the package from npm.
-
-```bash
-npm install @shoelace-style/shoelace
-```
-
-Nest, [include a theme](/getting-started/themes) and set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets. In this example, we'll import the light theme and use the CDN as a base path.
-
-```jsx
-// App.jsx
-import '@shoelace-style/shoelace/dist/themes/light.css';
-import { setBasePath } from '@shoelace-style/shoelace/dist/utiltiies/base-path';
-
-setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/');
-```
-
-?> If you'd rather not use the CDN for assets, you can create a [copy task](https://webpack.js.org/plugins/copy-webpack-plugin/) to copy `node_modules/@shoelace-style/shoelace/dist/assets` into your app's `public` directory. Then you can point the base path to that folder instead.
-
-Now you can start using components!
-
-## Importing Components
-
-Every Shoelace component is available to import as a React component. Note that we're importing the `<SlButton>` _React component_ instead of the `<sl-button>` _custom element_ in the example below.
-
-```jsx
-import { SlButton } from '@shoelace-style/shoelace/dist/react';
-
-const MyComponent = () => (
-  <SlButton type="primary">
-    Click me
-  </SlButton>
-);
-
-export default MyComponent;
-```
-
-You can find a copy + paste import for every component at the bottom of each page in the documentation.
-
-## Event Handling
-
-Many Shoelace components emit [custom events](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent). For example, the [input component](/components/input) emits the `sl-input` event when it receives input. In React, you can listen for the event using `onSlInput`.
-
-Here's how you can bind the input's value to a state variable.
-
-```jsx
-import { useState } from 'react';
-import { SlInput } from '@shoelace-style/shoelace/dist/react';
-
-function MyComponent() {
-  const [value, setValue] = useState('');
-
-  return (
-    <SlInput 
-      value={value} 
-      onSlInput={event => setValue(event.target.value)} 
-    />
-  )
-};
-
-export default MyComponent;
-```
-
-If you're using TypeScript, it's important to note that `event.target` will be a reference to the underlying custom element. You can use `(event.target as any).value` as a quick fix, or you can strongly type the event target as shown below.
-
-```tsx
-import { useState } from 'react';
-import { SlInput } from '@shoelace-style/shoelace/dist/react';
-import type SlInputElement from '@shoelace-style/shoelace/dist/components/input/input';
-
-function MyComponent() {
-  const [value, setValue] = useState('');
-
-  return (
-    <SlInput 
-      value={value} 
-      onSlInput={event => setValue((event.target as SlInputElement).value)} 
-    />
-  )
-};
-
-export default MyComponent;
-```

docs/frameworks/vue.md

@@ -1,71 +0,0 @@
-# Vue
-
-Vue [plays nice](https://custom-elements-everywhere.com/#vue) with custom elements, so you can use Shoelace in your Vue apps with ease.
-
-## Installation
-
-To add Shoelace to your Vue app, install the package from npm.
-
-```bash
-npm install @shoelace-style/shoelace
-```
-
-You'll need to tell Vue to ignore Shoelace components. This is pretty easy because they all start with `sl-`.
-
-```js
-import { createApp } from 'vue';
-import App from './App.vue';
-
-const app = createApp(App);
-
-app.config.compilerOptions.isCustomElement = tag => tag.startsWith('sl-');
-
-app.mount('#app');
-```
-
-## Binding Complex Data
-
-When binding complex data such as objects and arrays, use the `.prop` modifier to make Vue bind them as a property instead of an attribute.
-
-```html
-<sl-color-picker :swatches.prop="mySwatches" />
-```
-
-## Two-way Binding
-
-One caveat is there's currently [no support for v-model on custom elements](https://github.com/vuejs/vue/issues/7830), but you can still achieve two-way binding manually.
-
-```html
-<!-- This doesn't work -->
-<sl-input v-model="name">
-
-<!-- This works, but it's a bit longer -->
-<sl-input :value="name" @input="name = $event.target.value">
-```
-
-If that's too verbose for your liking, you can use a custom directive instead. [This utility](https://www.npmjs.com/package/@shoelace-style/vue-sl-model) adds a custom directive that will work just like `v-model` but for Shoelace components. To install it, use this command.
-
-```bash
-npm install @shoelace-style/vue-sl-model
-```
-
-Next, import the directive and enable it like this.
-
-```js
-import ShoelaceModelDirective from '@shoelace-style/vue-sl-model';
-import { createApp } from 'vue';
-import App from './App.vue';
-
-const app = createApp(App);
-app.use(ShoelaceModelDirective);
-
-app.config.compilerOptions.isCustomElement = tag => tag.startsWith('sl-');
-
-app.mount('#app');
-```
-
-Now you can use the `v-sl-model` directive to keep your data in sync!
-
-```html
-<sl-input v-sl-model="name">
-```

docs/getting-started/installation.md

@@ -2,9 +2,7 @@
 
 You can use Shoelace via CDN or by installing it locally. You can also [cherry pick](#cherry-picking) individual components for faster load times.
 
-If you're using a framework, make sure to check out the pages for [React](/frameworks/react), [Vue](/frameworks/vue), and [Angular](/frameworks/angular).
-
-## CDN Installation (Easiest)
+## CDN Installation (Recommended)
 
 The easiest way to install Shoelace is with the CDN. Just add the following tags to your page to get all components and the default light theme.
 
@@ -13,8 +11,6 @@ The easiest way to install Shoelace is with the CDN. Just add the following tags
 <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script>
 ```
 
-?> If you're only using a handful of components, it will be more efficient to [cherry pick](#cherry-picking) the ones you need.
-
 ### Dark Theme
 
 If you prefer to use the dark theme instead, use this. Note the `sl-theme-dark` class on the `<html>` element. [Learn more about the Dark Theme.](/getting-started/themes#dark-theme)
@@ -81,7 +77,7 @@ However, if you're [cherry picking](#cherry-picking) or [bundling](#bundling) Sh
 
 ## Cherry Picking
 
-The previous approach is the _easiest_ way to load Shoelace, but easy isn't always efficient. You'll incur the full size of the library even if you only use a handful of components. This is convenient for prototyping or if you're using most of the components, but it may result in longer load times in production. To improve this, you can cherry pick the components you need.
+The previous approach is the _easiest_ way to load Shoelace, but easy isn't always efficient. You'll incur the full size of the library even if you only use a handful of components. This is convenient for prototyping, but may result in longer load times in production. To improve this, you can cherry pick the components you need.
 
 Cherry picking can be done from your local install or [directly from the CDN](https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/). This will limit the number of files the browser has to download and reduce the amount of bytes being transferred. The disadvantage is that you need to load component manually.
 

docs/getting-started/overview.md

@@ -9,7 +9,7 @@
 - Fully customizable with CSS 🎨
 - Includes a dark theme 🌛
 - Built with accessibility in mind ♿️
-- First-party [React components](/frameworks/react)
+- First-party [React wrappers](/getting-started/usage#react)
 - Open source 😸
 
 Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
@@ -41,8 +41,7 @@ Now you have access to all of Shoelace's components! Try adding a button:
 <sl-button>Click me</sl-button>
 ```
 
-This will load all of Shoelace's components, but you should probably only load the ones you're actually using. To learn how, or for other ways to install Shoelace, refer to the [installation instructions](getting-started/installation).
-
+See the [installation instructions](getting-started/installation) for more details and other ways to install Shoelace.
 
 ## New to Web Components?
 

docs/getting-started/usage.md

@@ -1,10 +1,10 @@
 # Usage
 
-Shoelace components are just regular HTML elements, or [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) to be precise. You can use them like any other element. Each component has detailed documentation that describes its full API, including properties, events, methods, and more.
+Shoelace components are just regular HTML elements, or "custom elements" to be precise. You can use them like any other element. Each component has detailed documentation that describes its full API, including properties, events, methods, and more.
 
-If you're new to custom elements, often referred to as "web components," this section will familiarize you with how to use them. 
+## Web Component Basics
 
-## Properties
+### Properties
 
 Many components have properties that can be set using attributes. For example, buttons accept a `size` attribute that maps to the `size` property which dictates the button's size.
 
@@ -31,7 +31,7 @@ In rare cases, a property may require an array, an object, or a function. For ex
 
 Refer to a component's documentation for a complete list of its properties.
 
-## Events
+### Events
 
 You can listen for standard events such as `click`, `mouseover`, etc. as you normally would. In addition, some components emit custom events. These work the same way as standard events, but are prefixed with `sl-` to prevent collisions with standard events and other libraries.
 
@@ -48,7 +48,7 @@ You can listen for standard events such as `click`, `mouseover`, etc. as you nor
 
 Refer to a component's documentation for a complete list of its custom events.
 
-## Methods
+### Methods
 
 Some components have methods you can call to trigger various behaviors. For example, you can set focus on a Shoelace input using the `focus()` method.
 
@@ -63,7 +63,7 @@ Some components have methods you can call to trigger various behaviors. For exam
 
 Refer to a component's documentation for a complete list of its methods and their arguments.
 
-## Slots
+### Slots
 
 Many components use slots to accept content inside of them. The most common slot is the _default_ slot, which includes any content inside the component that doesn't have a `slot` attribute.
 
@@ -86,7 +86,7 @@ The location of a named slot doesn't matter. You can put it anywhere inside the
 
 Refer to a component's documentation for a complete list of available slots.
 
-## Don't Use Self-closing Tags
+### Don't Use Self-closing Tags
 
 Custom elements cannot have self-closing tags. Similar to `<script>` and `<textarea>`, you must always include the full closing tag.
 
@@ -98,7 +98,7 @@ Custom elements cannot have self-closing tags. Similar to `<script>` and `<texta
 <sl-input></sl-input>
 ```
 
-## Differences from Native Elements
+### Differences from Native Elements
 
 You might expect similarly named elements to share the same API as native HTML elements. This is not always the case. Shoelace components **are not** designed to be one-to-one replacements for their HTML counterparts.
 
@@ -128,3 +128,123 @@ If `settings.json` already exists, simply add the above line to the root of the
 ### Other Editors
 
 Most popular editors support custom code completion with a bit of configuration. Please [submit a feature request](https://github.com/shoelace-style/shoelace/issues/new/choose) for your editor of choice. PRs are also welcome!
+
+## React
+
+React [doesn't play nice](https://custom-elements-everywhere.com/#react) with custom elements — it's a bit finicky about props.
+
+> React passes all data to Custom Elements in the form of HTML attributes. For primitive data this is fine, but the system breaks down when passing rich data, like objects or arrays. In these instances you end up with stringified values like `some-attr="[object Object]"` which can't actually be used.
+
+Event handling can also be cumbersome.
+
+> Because React implements its own synthetic event system, it cannot listen for DOM events coming from Custom Elements without the use of a workaround. Developers will need to reference their Custom Elements using a ref and manually attach event listeners with addEventListener. This makes working with Custom Elements cumbersome.
+
+Fortunately, there's a package called [@shoelace-style/react](https://www.npmjs.com/package/@shoelace-style/react) that will let you use Shoelace components as if they were React components. You can install it using this command.
+
+```bash
+npm install @shoelace-style/react
+```
+
+Include the default theme and any components you want to use in your app.
+
+```jsx
+import '@shoelace-style/shoelace/dist/themes/light.css';
+
+import SlButton from '@shoelace-style/react/dist/button';
+
+// ...
+
+const MyComponent = (props) => {
+  return (
+    <SlButton type="primary">
+      Click me
+    </SlButton>
+  )
+};
+```
+
+## Vue
+
+Vue [plays nice](https://custom-elements-everywhere.com/#vue) with custom elements. You just have to tell it to ignore Shoelace components. This is pretty easy because they all start with `sl-`.
+
+```js
+import { createApp } from 'vue';
+import App from './App.vue';
+
+const app = createApp(App);
+
+app.config.compilerOptions.isCustomElement = tag => tag.startsWith('sl-');
+
+app.mount('#app');
+```
+
+### Binding Complex Data
+
+When binding complex data such as objects and arrays, use the `.prop` modifier to make Vue bind them as a property instead of an attribute.
+
+```html
+<sl-color-picker :swatches.prop="mySwatches" />
+```
+
+### Two-way Binding
+
+One caveat is there's currently [no support for v-model on custom elements](https://github.com/vuejs/vue/issues/7830), but you can still achieve two-way binding manually.
+
+```html
+<!-- This doesn't work -->
+<sl-input v-model="name">
+
+<!-- This works, but it's a bit longer -->
+<sl-input :value="name" @input="name = $event.target.value">
+```
+
+If that's too verbose, you can use a custom directive instead.
+
+### Using a Custom Directive
+
+You can use [this utility](https://www.npmjs.com/package/@shoelace-style/vue-sl-model) to add a custom directive that will work just like `v-model` but for Shoelace components. To install it, use this command.
+
+```bash
+npm install @shoelace-style/vue-sl-model
+```
+
+Next, import the directive and enable it like this.
+
+```js
+import ShoelaceModelDirective from '@shoelace-style/vue-sl-model';
+import { createApp } from 'vue';
+import App from './App.vue';
+
+const app = createApp(App);
+app.use(ShoelaceModelDirective);
+
+app.config.compilerOptions.isCustomElement = tag => tag.startsWith('sl-');
+
+app.mount('#app');
+```
+
+Now you can use the `v-sl-model` directive to keep your data in sync!
+
+```html
+<sl-input v-sl-model="name">
+```
+
+## Angular
+
+Angular [plays nice](https://custom-elements-everywhere.com/#angular) with custom elements. Just make sure to apply the custom elements schema as shown below.
+
+```js
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule],
+  providers: [],
+  bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AppModule {}
+```

docs/index.html

@@ -44,7 +44,7 @@
     <link rel="stylesheet" href="/dist/themes/dark.css" />
     <script type="module" src="/dist/shoelace.js"></script>
   </head>
-  <body data-shoelace="/dist">
+  <body>
     <div id="app"></div>
     <script>
       // Set the initial theme to prevent flashing
@@ -88,9 +88,8 @@
     <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/ga.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/docsify-copy-code@2"></script>
     <script src="https://cdn.jsdelivr.net/npm/docsify-pagination@2/dist/docsify-pagination.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-bash.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-jsx.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-tsx.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.19.0/components/prism-bash.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.19.0/components/prism-jsx.min.js"></script>
     <script src="/assets/plugins/code-block/code-block.js"></script>
     <script src="/assets/plugins/metadata/metadata.js"></script>
     <script src="/assets/plugins/scroll-position/scroll-position.js"></script>

docs/resources/changelog.md

@@ -6,14 +6,13 @@ Components with the <sl-badge type="warning" pill>Experimental</sl-badge> badge
 
 _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
 
-## 2.0.0-beta.59
+## Next
 
-- Added React wrappers as first-class citizens
+- Added experimental `<sl-context-menu>` component
 - Added eye dropper to `<sl-color-picker>` when the browser supports the [EyeDropper API](https://wicg.github.io/eyedropper-api/)
 - Fixed a bug in `<sl-button-group>` where buttons groups with only one button would have an incorrect border radius
 - Improved the `<sl-color-picker>` trigger's border in dark mode
-- Switched clearable icon from `x-circle` to `x-circle-fill` to make it easier to recognize
-- Updated to Bootstrap Icons to 1.7.0
+- Refactored positioning logic in `<sl-dropdown>` so Popper is only active when the menu is open
 - Updated to Lit 2.0.2
 
 ## 2.0.0-beta.58

docs/tutorials/integrating-with-nextjs.md

@@ -14,7 +14,7 @@ This integration has been tested with the following:
 To get started using Shoelace with NextJS, the following packages must be installed.
 
 ```bash
-yarn add @shoelace-style/shoelace @shoelace-style/shoelace copy-webpack-plugin next-compose-plugins next-transpile-modules
+yarn add @shoelace-style/shoelace @shoelace-style/react-wrapper copy-webpack-plugin next-compose-plugins next-transpile-modules
 ```
 
 ### Importing the Default Theme

package-lock.json

@@ -1,15 +1,14 @@
 {
   "name": "@shoelace-style/shoelace",
-  "version": "2.0.0-beta.59",
+  "version": "2.0.0-beta.58",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@shoelace-style/shoelace",
-      "version": "2.0.0-beta.59",
+      "version": "2.0.0-beta.58",
       "license": "MIT",
       "dependencies": {
-        "@lit-labs/react": "^1.0.1",
         "@popperjs/core": "^2.7.0",
         "@shoelace-style/animations": "^1.1.0",
         "color": "^3.1.3",
@@ -19,12 +18,11 @@
         "@custom-elements-manifest/analyzer": "^0.4.12",
         "@open-wc/testing": "^2.5.33",
         "@types/color": "^3.0.1",
-        "@types/react": "^17.0.33",
         "@web/dev-server-esbuild": "^0.2.12",
         "@web/test-runner": "^0.13.5",
         "@web/test-runner-puppeteer": "^0.10.0",
         "bluebird": "^3.7.2",
-        "bootstrap-icons": "^1.7.0",
+        "bootstrap-icons": "^1.6.1",
         "browser-sync": "^2.26.14",
         "chalk": "^4.1.0",
         "command-line-args": "^5.2.0",
@@ -42,7 +40,6 @@
         "mkdirp": "^0.5.5",
         "plop": "^2.7.4",
         "prettier": "^2.2.1",
-        "react": "^17.0.2",
         "recursive-copy": "^2.0.11",
         "sinon": "^11.1.1",
         "strip-css-comments": "^4.1.0",
@@ -176,11 +173,6 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
-    "node_modules/@lit-labs/react": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.0.1.tgz",
-      "integrity": "sha512-ShvoOB34Oj0ZkSnlWdGIWzSiEBP1MUY81nC3nAsNoWqbYMS2F/EskGzwSQj7mCKNznUCbmpB272AvSMwejm3Nw=="
-    },
     "node_modules/@lit/reactive-element": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.0.0.tgz",
@@ -748,12 +740,6 @@
       "integrity": "sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw==",
       "dev": true
     },
-    "node_modules/@types/prop-types": {
-      "version": "15.7.4",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
-      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
-      "dev": true
-    },
     "node_modules/@types/qs": {
       "version": "6.9.6",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.6.tgz",
@@ -766,17 +752,6 @@
       "integrity": "sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA==",
       "dev": true
     },
-    "node_modules/@types/react": {
-      "version": "17.0.33",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.33.tgz",
-      "integrity": "sha512-pLWntxXpDPaU+RTAuSGWGSEL2FRTNyRQOjSWDke/rxRg14ncsZvx8AKWMWZqvc1UOaJIAoObdZhAWvRaHFi5rw==",
-      "dev": true,
-      "dependencies": {
-        "@types/prop-types": "*",
-        "@types/scheduler": "*",
-        "csstype": "^3.0.2"
-      }
-    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -786,12 +761,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/scheduler": {
-      "version": "0.16.2",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
-      "dev": true
-    },
     "node_modules/@types/serve-static": {
       "version": "1.13.9",
       "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.9.tgz",
@@ -1696,9 +1665,9 @@
       "dev": true
     },
     "node_modules/bootstrap-icons": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.7.0.tgz",
-      "integrity": "sha512-x2ORQ3lv1QdSnIzzQdU8mf83fbCq4FIaUinrAWw+a/d186vO3Ph7qUfqzvQDBA41AD6IoxdRHD6zUt9IXC1J6A==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.6.1.tgz",
+      "integrity": "sha512-MNpF89+njCdVJePDRbCd2DrUusqIyNsPlBrdKqBEXAvFZpwb+Gc8k2VlyF2ueiDQn1PoeTSg9UqQNgx8tGqHAA==",
       "dev": true,
       "engines": {
         "node": ">=10"
@@ -3013,12 +2982,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/csstype": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz",
-      "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==",
-      "dev": true
-    },
     "node_modules/custom-elements-manifest": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/custom-elements-manifest/-/custom-elements-manifest-1.0.0.tgz",
@@ -6447,18 +6410,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
-      "dependencies": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      },
-      "bin": {
-        "loose-envify": "cli.js"
-      }
-    },
     "node_modules/lower-case": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
@@ -8411,19 +8362,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/react": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
-      "dev": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/read-pkg": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-4.0.1.tgz",
@@ -11355,11 +11293,6 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
-    "@lit-labs/react": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.0.1.tgz",
-      "integrity": "sha512-ShvoOB34Oj0ZkSnlWdGIWzSiEBP1MUY81nC3nAsNoWqbYMS2F/EskGzwSQj7mCKNznUCbmpB272AvSMwejm3Nw=="
-    },
     "@lit/reactive-element": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.0.0.tgz",
@@ -11910,12 +11843,6 @@
       "integrity": "sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw==",
       "dev": true
     },
-    "@types/prop-types": {
-      "version": "15.7.4",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
-      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
-      "dev": true
-    },
     "@types/qs": {
       "version": "6.9.6",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.6.tgz",
@@ -11928,17 +11855,6 @@
       "integrity": "sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA==",
       "dev": true
     },
-    "@types/react": {
-      "version": "17.0.33",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.33.tgz",
-      "integrity": "sha512-pLWntxXpDPaU+RTAuSGWGSEL2FRTNyRQOjSWDke/rxRg14ncsZvx8AKWMWZqvc1UOaJIAoObdZhAWvRaHFi5rw==",
-      "dev": true,
-      "requires": {
-        "@types/prop-types": "*",
-        "@types/scheduler": "*",
-        "csstype": "^3.0.2"
-      }
-    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -11948,12 +11864,6 @@
         "@types/node": "*"
       }
     },
-    "@types/scheduler": {
-      "version": "0.16.2",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
-      "dev": true
-    },
     "@types/serve-static": {
       "version": "1.13.9",
       "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.9.tgz",
@@ -12669,9 +12579,9 @@
       "dev": true
     },
     "bootstrap-icons": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.7.0.tgz",
-      "integrity": "sha512-x2ORQ3lv1QdSnIzzQdU8mf83fbCq4FIaUinrAWw+a/d186vO3Ph7qUfqzvQDBA41AD6IoxdRHD6zUt9IXC1J6A==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.6.1.tgz",
+      "integrity": "sha512-MNpF89+njCdVJePDRbCd2DrUusqIyNsPlBrdKqBEXAvFZpwb+Gc8k2VlyF2ueiDQn1PoeTSg9UqQNgx8tGqHAA==",
       "dev": true
     },
     "brace-expansion": {
@@ -13760,12 +13670,6 @@
         }
       }
     },
-    "csstype": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz",
-      "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==",
-      "dev": true
-    },
     "custom-elements-manifest": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/custom-elements-manifest/-/custom-elements-manifest-1.0.0.tgz",
@@ -16485,15 +16389,6 @@
         }
       }
     },
-    "loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
-      "requires": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      }
-    },
     "lower-case": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
@@ -18056,16 +17951,6 @@
         "unpipe": "1.0.0"
       }
     },
-    "react": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
-      "dev": true,
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
-      }
-    },
     "read-pkg": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-4.0.1.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shoelace-style/shoelace",
   "description": "A forward-thinking library of web components.",
-  "version": "2.0.0-beta.59",
+  "version": "2.0.0-beta.58",
   "homepage": "https://github.com/shoelace-style/shoelace",
   "author": "Cory LaViska",
   "license": "MIT",
@@ -39,7 +39,6 @@
     "test:watch": "web-test-runner \"src/**/*.test.ts\" --node-resolve --puppeteer --watch"
   },
   "dependencies": {
-    "@lit-labs/react": "^1.0.1",
     "@popperjs/core": "^2.7.0",
     "@shoelace-style/animations": "^1.1.0",
     "color": "^3.1.3",
@@ -49,12 +48,11 @@
     "@custom-elements-manifest/analyzer": "^0.4.12",
     "@open-wc/testing": "^2.5.33",
     "@types/color": "^3.0.1",
-    "@types/react": "^17.0.33",
     "@web/dev-server-esbuild": "^0.2.12",
     "@web/test-runner": "^0.13.5",
     "@web/test-runner-puppeteer": "^0.10.0",
     "bluebird": "^3.7.2",
-    "bootstrap-icons": "^1.7.0",
+    "bootstrap-icons": "^1.6.1",
     "browser-sync": "^2.26.14",
     "chalk": "^4.1.0",
     "command-line-args": "^5.2.0",
@@ -72,7 +70,6 @@
     "mkdirp": "^0.5.5",
     "plop": "^2.7.4",
     "prettier": "^2.2.1",
-    "react": "^17.0.2",
     "recursive-copy": "^2.0.11",
     "sinon": "^11.1.1",
     "strip-css-comments": "^4.1.0",

scripts/build.js

@@ -30,19 +30,17 @@ mkdirp.sync(outdir);
 
 (async () => {
   try {
+    if (types) execSync(`tsc --project . --outdir "${outdir}"`, { stdio: 'inherit' });
     execSync(`node scripts/make-metadata.js --outdir "${outdir}"`, { stdio: 'inherit' });
     execSync(`node scripts/make-search.js --outdir "${outdir}"`, { stdio: 'inherit' });
-    execSync(`node scripts/make-react.js`, { stdio: 'inherit' });
     execSync(`node scripts/make-vscode-data.js --outdir "${outdir}"`, { stdio: 'inherit' });
     execSync(`node scripts/make-css.js --outdir "${outdir}"`, { stdio: 'inherit' });
     execSync(`node scripts/make-icons.js --outdir "${outdir}"`, { stdio: 'inherit' });
-    if (types) execSync(`tsc --project . --outdir "${outdir}"`, { stdio: 'inherit' });
   } catch (err) {
     console.error(chalk.red(err));
     process.exit(1);
   }
 
-  const alwaysExternal = ['@lit-labs/react', 'react'];
   const buildResult = await esbuild
     .build({
       format: 'esm',
@@ -55,15 +53,13 @@ mkdirp.sync(outdir);
         // Public utilities
         ...(await glob('./src/utilities/**/!(*.(style|test)).ts')),
         // Theme stylesheets
-        ...(await glob('./src/themes/**/!(*.test).ts')),
-        // React wrappers
-        ...(await glob('./src/react/**/*.ts'))
+        ...(await glob('./src/themes/**/!(*.test).ts'))
       ],
       outdir,
       chunkNames: 'chunks/[name].[hash]',
       incremental: serve,
       define: {
-        // Popper.js requires this to be set
+        // Popper.js expects this to be set
         'process.env.NODE_ENV': '"production"'
       },
       bundle: true,
@@ -71,11 +67,7 @@ mkdirp.sync(outdir);
       // We don't bundle certain dependencies in the unbundled build. This ensures we ship bare module specifiers,
       // allowing end users to better optimize when using a bundler. (Only packages that ship ESM can be external.)
       //
-      // We never bundle React or @lit-labs/react though!
-      //
-      external: bundle
-        ? alwaysExternal
-        : [...alwaysExternal, '@popperjs/core', '@shoelace-style/animations', 'lit', 'qr-creator'],
+      external: bundle ? undefined : ['@popperjs/core', '@shoelace-style/animations', 'lit', 'qr-creator'],
       splitting: true,
       plugins: []
     })

scripts/make-react.js

@@ -1,66 +0,0 @@
-import chalk from 'chalk';
-import commandLineArgs from 'command-line-args';
-import fs from 'fs';
-import del from 'del';
-import mkdirp from 'mkdirp';
-import path from 'path';
-import pascalCase from 'pascal-case';
-import prettier from 'prettier';
-import prettierConfig from '../prettier.config.cjs';
-import { execSync } from 'child_process';
-import { getAllComponents } from './shared.js';
-
-const outdir = path.join('./src/react');
-
-// Clear build directory
-del.sync(outdir);
-mkdirp.sync(outdir);
-
-// Fetch component metadata
-const metadata = JSON.parse(fs.readFileSync('./dist/custom-elements.json', 'utf8'));
-
-// Wrap components
-console.log('Wrapping components for React...');
-
-const components = getAllComponents(metadata);
-const index = [];
-
-components.map(component => {
-  const tagWithoutPrefix = component.tagName.replace(/^sl-/, '');
-  const componentDir = path.join(outdir, tagWithoutPrefix);
-  const componentFile = path.join(componentDir, 'index.ts');
-  const importPath = component.modulePath.replace(/^src\//, '').replace(/\.ts$/, '');
-
-  mkdirp.sync(componentDir);
-
-  const events = (component.events || []).map(event => `${`on${pascalCase(event.name)}`}: '${event.name}'`).join(',\n');
-
-  const source = prettier.format(
-    `
-      import * as React from 'react';
-      import { createComponent } from '@lit-labs/react';
-      import Component from '../../${importPath}';
-
-      export default createComponent(
-        React,
-        '${component.tagName}',
-        Component,
-        {
-          ${events}
-        }
-      );
-    `,
-    Object.assign(prettierConfig, {
-      parser: 'babel-ts'
-    })
-  );
-
-  index.push(`export { default as ${component.name} } from './${tagWithoutPrefix}';`);
-
-  fs.writeFileSync(componentFile, source, 'utf8');
-});
-
-// Generate the index file
-fs.writeFileSync(path.join(outdir, 'index.ts'), index.join('\n'), 'utf8');
-
-console.log(chalk.cyan(`\nComponents have been wrapped for React! 📦\n`));

scripts/shared.js

@@ -5,10 +5,9 @@ export function getAllComponents(metadata) {
     module.declarations?.map(declaration => {
       if (declaration.customElement) {
         const component = declaration;
-        const modulePath = module.path;
 
         if (component) {
-          allComponents.push(Object.assign(component, { modulePath }));
+          allComponents.push(component);
         }
       }
     });

src/components/context-menu/context-menu.styles.ts

@@ -0,0 +1,43 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    display: contents;
+  }
+
+  ::slotted(sl-menu) {
+    min-width: 180px;
+    background: rgb(var(--sl-panel-background-color));
+    border: solid var(--sl-panel-border-width) rgb(var(--sl-panel-border-color));
+    border-radius: var(--sl-border-radius-medium);
+    box-shadow: var(--sl-shadow-large);
+  }
+
+  .context-menu {
+    position: relative;
+    z-index: var(--sl-z-index-dropdown);
+  }
+
+  .context-menu__locater {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+  }
+
+  .dropdown__positioner {
+    position: absolute;
+  }
+
+  .context-menu__menu {
+    position: relative;
+    top: 0;
+    left: 0;
+    pointer-events: all;
+  }
+`;

src/components/context-menu/context-menu.test.ts

@@ -0,0 +1,13 @@
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+// import sinon from 'sinon';
+
+import '../../../dist/shoelace.js';
+import type SlContextMenu from './context-menu';
+
+describe('<sl-context-menu>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <sl-context-menu></sl-context-menu> `);
+
+    expect(el).to.exist;
+  });
+});

src/components/context-menu/context-menu.ts

@@ -0,0 +1,292 @@
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { emit, waitForEvent } from '../../internal/event';
+import { watch } from '../../internal/watch';
+import { Instance as PopperInstance, createPopper } from '@popperjs/core/dist/esm';
+import { animateTo, stopAnimations } from '../../internal/animate';
+import { setDefaultAnimation, getAnimation } from '../../utilities/animation-registry';
+import type SlMenu from '../menu/menu';
+import styles from './context-menu.styles';
+
+import '../menu/menu';
+
+/**
+ * @since 2.0
+ * @status experimental
+ *
+ * @dependency sl-menu
+ *
+ * @event sl-event-name - Emitted as an example.
+ *
+ * @slot - Content that will activate the context menu when right-clicked.
+ * @slot menu - The menu to show when the context menu is activated, an `<sl-menu>` element.
+ *
+ * @event sl-show - Emitted when the context menu opens.
+ * @event sl-after-show - Emitted after the context menu opens and all animations are complete.
+ * @event sl-hide - Emitted when the context menu closes.
+ * @event sl-after-hide - Emitted after the context menu closes and all animations are complete.
+ *
+ * @animation contextMenu.show - The animation to use when showing the context menu.
+ * @animation contextMenu.hide - The animation to use when hiding the context menu.
+ */
+@customElement('sl-context-menu')
+export default class SlContextMenu extends LitElement {
+  static styles = styles;
+
+  @query('.context-menu') wrapper: HTMLElement;
+  @query('.context-menu__locater') locater: HTMLElement;
+  @query('.context-menu__menu') menu: HTMLSlotElement;
+  @query('.context-menu__positioner') positioner: HTMLElement;
+
+  private popover: PopperInstance;
+
+  /**
+   * The preferred placement of the context menu. Note that the actual placement may vary as needed to keep the menu
+   * inside of the viewport.
+   */
+  @property() placement:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end' = 'bottom-start';
+
+  /** Disables the context menu so it won't show when triggered. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** The distance in pixels from which to offset the context menu away from its target. */
+  @property({ type: Number }) distance = 0;
+
+  /** Indicates whether or not the context menu is open. You can use this in lieu of the show/hide methods. */
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  /** The distance in pixels from which to offset the context menu along its target. */
+  @property({ type: Number }) skidding = 0;
+
+  /**
+   * Enable this option to prevent the menu from being clipped when the component is placed inside a container with
+   * `overflow: auto|hidden|scroll`.
+   */
+  @property({ type: Boolean }) hoist = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
+    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+  }
+
+  firstUpdated() {
+    this.menu.hidden = !this.open;
+  }
+
+  getMenu() {
+    const slot = this.menu.querySelector('slot')!;
+    return slot.assignedElements({ flatten: true }).filter(el => el.tagName.toLowerCase() === 'sl-menu')[0] as SlMenu;
+  }
+
+  async handleContextMenu(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    const targetRect = target.getBoundingClientRect();
+    const wrapperRect = this.wrapper.getBoundingClientRect();
+    const { offsetX, offsetY } = event;
+    const x = targetRect.left + offsetX - wrapperRect.left;
+    const y = targetRect.top + offsetY - wrapperRect.top;
+
+    event.preventDefault();
+
+    if (this.open) {
+      await this.hide();
+    }
+
+    this.show(x, y);
+  }
+
+  handleDocumentKeyDown(event: KeyboardEvent) {
+    const menu = this.getMenu();
+    const menuItems = menu ? menu.getAllItems() : [];
+    const firstMenuItem = menuItems[0];
+    const lastMenuItem = menuItems[menuItems.length - 1];
+
+    // Close when escape is pressed
+    if (event.key === 'Escape') {
+      this.hide();
+      return;
+    }
+
+    // Forward key presses that don't originate from the menu to allow keyboard selection and type-to-select
+    if (menu && !event.composedPath().includes(this.menu)) {
+      // Focus on a menu item
+      if (['ArrowDown', 'Home'].includes(event.key) && firstMenuItem) {
+        event.preventDefault();
+        const menu = this.getMenu();
+        menu.setCurrentItem(firstMenuItem);
+        firstMenuItem.focus();
+        return;
+      }
+
+      if (['ArrowUp', 'End'].includes(event.key) && lastMenuItem) {
+        event.preventDefault();
+        menu.setCurrentItem(lastMenuItem);
+        lastMenuItem.focus();
+        return;
+      }
+
+      // Other keys bring focus to the menu and initiate type-to-select behavior
+      const ignoredKeys = ['Tab', 'Shift', 'Meta', 'Ctrl', 'Alt'];
+      if (!ignoredKeys.includes(event.key)) {
+        menu.typeToSelect(event.key);
+        return;
+      }
+    }
+  }
+
+  handleDocumentMouseDown(event: MouseEvent) {
+    const path = event.composedPath() as Array<EventTarget>;
+
+    //
+    // Close the context menu when clicking outside of it. We use a setTimeout here because mousedown fires before
+    // contextmenu and, if the menu is already open and the user-right clicks again, we want the menu to re-open in the
+    // new position instead of closing.
+    //
+    setTimeout(() => {
+      if (this.open && !path.includes(this.menu)) {
+        this.hide();
+        return;
+      }
+    });
+  }
+
+  handleMenuSelect() {
+    // Close the context menu when a menu item is selected
+    this.hide();
+  }
+
+  @watch('open', { waitUntilFirstUpdate: true })
+  async handleOpenChange() {
+    if (this.disabled) {
+      return;
+    }
+
+    if (this.open) {
+      // Show
+      emit(this, 'sl-show');
+      document.addEventListener('keydown', this.handleDocumentKeyDown);
+      document.addEventListener('mousedown', this.handleDocumentMouseDown);
+
+      await stopAnimations(this);
+
+      this.popover = createPopper(this.locater, this.positioner, {
+        placement: this.placement,
+        strategy: this.hoist ? 'fixed' : 'absolute',
+        modifiers: [
+          {
+            name: 'flip',
+            options: {
+              boundary: 'viewport'
+            }
+          },
+          {
+            name: 'offset',
+            options: {
+              offset: [this.skidding, this.distance]
+            }
+          }
+        ]
+      });
+
+      this.menu.hidden = false;
+      const { keyframes, options } = getAnimation(this, 'contextMenu.show');
+      await animateTo(this.menu, keyframes, options);
+
+      emit(this, 'sl-after-show');
+    } else {
+      // Hide
+      emit(this, 'sl-hide');
+      document.removeEventListener('keydown', this.handleDocumentKeyDown);
+      document.removeEventListener('mousedown', this.handleDocumentMouseDown);
+
+      await stopAnimations(this);
+      const { keyframes, options } = getAnimation(this, 'contextMenu.hide');
+      await animateTo(this.menu, keyframes, options);
+
+      this.menu.hidden = true;
+      this.locater.style.top = '0px';
+      this.locater.style.left = '0px';
+      this.popover.destroy();
+
+      emit(this, 'sl-after-hide');
+    }
+  }
+
+  /** Shows the context menu */
+  async show(offsetX?: number, offsetY?: number) {
+    if (this.open) {
+      return;
+    }
+
+    this.locater.style.top = `${offsetY || 0}px`;
+    this.locater.style.left = `${offsetX || 0}px`;
+    this.open = true;
+
+    return waitForEvent(this, 'sl-after-show');
+  }
+
+  /** Hides the dropdown panel */
+  async hide() {
+    if (!this.open) {
+      return;
+    }
+
+    this.open = false;
+
+    return waitForEvent(this, 'sl-after-hide');
+  }
+
+  render() {
+    return html`
+      <div class="context-menu">
+        <slot @contextmenu=${this.handleContextMenu}></slot>
+
+        <div class="context-menu__locater"></div>
+
+        <!-- Position the menu with a wrapper since the popover makes use of translate. This let's us add animations
+        on the menu without interfering with the position. -->
+        <div class="context-menu__positioner">
+          <div class="context-menu__menu" hidden @sl-select=${this.handleMenuSelect}>
+            <slot name="menu"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+setDefaultAnimation('contextMenu.show', {
+  keyframes: [
+    { opacity: 0, transform: 'scale(0.9)' },
+    { opacity: 1, transform: 'scale(1)' }
+  ],
+  options: { duration: 50, easing: 'ease' }
+});
+
+setDefaultAnimation('contextMenu.hide', {
+  keyframes: [
+    { opacity: 1, transform: 'scale(1)' },
+    { opacity: 0, transform: 'scale(0.9)' }
+  ],
+  options: { duration: 150, easing: 'ease' }
+});
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-context-menu': SlContextMenu;
+  }
+}

src/components/dropdown/dropdown.ts

@@ -100,28 +100,6 @@ export default class SlDropdown extends LitElement {
     if (!this.containingElement) {
       this.containingElement = this;
     }
-
-    // Create the popover after render
-    this.updateComplete.then(() => {
-      this.popover = createPopper(this.trigger, this.positioner, {
-        placement: this.placement,
-        strategy: this.hoist ? 'fixed' : 'absolute',
-        modifiers: [
-          {
-            name: 'flip',
-            options: {
-              boundary: 'viewport'
-            }
-          },
-          {
-            name: 'offset',
-            options: {
-              offset: [this.skidding, this.distance]
-            }
-          }
-        ]
-      });
-    });
   }
 
   firstUpdated() {
@@ -131,7 +109,6 @@ export default class SlDropdown extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.hide();
-    this.popover.destroy();
   }
 
   focusOnTrigger() {
@@ -207,40 +184,13 @@ export default class SlDropdown extends LitElement {
     }
   }
 
-  @watch('distance')
-  @watch('hoist')
-  @watch('placement')
-  @watch('skidding')
-  handlePopoverOptionsChange() {
-    if (this.popover) {
-      this.popover.setOptions({
-        placement: this.placement,
-        strategy: this.hoist ? 'fixed' : 'absolute',
-        modifiers: [
-          {
-            name: 'flip',
-            options: {
-              boundary: 'viewport'
-            }
-          },
-          {
-            name: 'offset',
-            options: {
-              offset: [this.skidding, this.distance]
-            }
-          }
-        ]
-      });
-    }
-  }
-
   handleTriggerClick() {
     this.open ? this.hide() : this.show();
   }
 
   handleTriggerKeyDown(event: KeyboardEvent) {
     const menu = this.getMenu();
-    const menuItems = menu ? ([...menu.querySelectorAll('sl-menu-item')] as SlMenuItem[]) : [];
+    const menuItems = menu ? menu.getAllItems() : [];
     const firstMenuItem = menuItems[0];
     const lastMenuItem = menuItems[menuItems.length - 1];
 
@@ -262,7 +212,7 @@ export default class SlDropdown extends LitElement {
     // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a
     // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for
     // faster navigation.
-    if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
+    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
       event.preventDefault();
 
       // Show the menu if it's not already open
@@ -271,14 +221,14 @@ export default class SlDropdown extends LitElement {
       }
 
       // Focus on a menu item
-      if (event.key === 'ArrowDown' && firstMenuItem) {
+      if (['ArrowDown', 'Home'].includes(event.key) && firstMenuItem) {
         const menu = this.getMenu();
         menu.setCurrentItem(firstMenuItem);
         firstMenuItem.focus();
         return;
       }
 
-      if (event.key === 'ArrowUp' && lastMenuItem) {
+      if (['ArrowUp', 'End'].includes(event.key) && lastMenuItem) {
         menu.setCurrentItem(lastMenuItem);
         lastMenuItem.focus();
         return;
@@ -327,7 +277,7 @@ export default class SlDropdown extends LitElement {
     }
   }
 
-  /** Shows the dropdown panel. */
+  /** Shows the dropdown panel */
   async show() {
     if (this.open) {
       return;
@@ -352,11 +302,9 @@ export default class SlDropdown extends LitElement {
    * is activated.
    */
   reposition() {
-    if (!this.open) {
-      return;
+    if (this.popover) {
+      this.popover.update();
     }
-
-    this.popover.update();
   }
 
   @watch('open', { waitUntilFirstUpdate: true })
@@ -376,7 +324,26 @@ export default class SlDropdown extends LitElement {
       document.addEventListener('mousedown', this.handleDocumentMouseDown);
 
       await stopAnimations(this);
-      this.popover.update();
+
+      this.popover = createPopper(this.trigger, this.positioner, {
+        placement: this.placement,
+        strategy: this.hoist ? 'fixed' : 'absolute',
+        modifiers: [
+          {
+            name: 'flip',
+            options: {
+              boundary: 'viewport'
+            }
+          },
+          {
+            name: 'offset',
+            options: {
+              offset: [this.skidding, this.distance]
+            }
+          }
+        ]
+      });
+
       this.panel.hidden = false;
       const { keyframes, options } = getAnimation(this, 'dropdown.show');
       await animateTo(this.panel, keyframes, options);

src/components/icon/library.system.ts

@@ -76,9 +76,10 @@ const icons = {
       <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
     </svg>
   `,
-  'x-circle-fill': `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
-      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"></path>
+  'x-circle': `
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
+      <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+      <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
     </svg>
   `
 };

src/components/input/input.ts

@@ -359,7 +359,7 @@ export default class SlInput extends LitElement {
                   tabindex="-1"
                 >
                   <slot name="clear-icon">
-                    <sl-icon name="x-circle-fill" library="system"></sl-icon>
+                    <sl-icon name="x-circle" library="system"></sl-icon>
                   </slot>
                 </button>
               `

src/components/select/select.ts

@@ -507,7 +507,7 @@ export default class SlSelect extends LitElement {
                   <sl-icon-button
                     exportparts="base:clear-button"
                     class="select__clear"
-                    name="x-circle-fill"
+                    name="x-circle"
                     library="system"
                     @click=${this.handleClearClick}
                     tabindex="-1"

src/shoelace.ts

@@ -11,6 +11,7 @@ export { default as SlButtonGroup } from './components/button-group/button-group
 export { default as SlCard } from './components/card/card';
 export { default as SlCheckbox } from './components/checkbox/checkbox';
 export { default as SlColorPicker } from './components/color-picker/color-picker';
+export { default as SlContextMenu } from './components/context-menu/context-menu';
 export { default as SlDetails } from './components/details/details';
 export { default as SlDialog } from './components/dialog/dialog';
 export { default as SlDivider } from './components/divider/divider';