Merge branch 'next' into current

2.8.0
update version
2026-01-13 04:29:14 +00:00 · 2023-08-23 12:58:35 -04:00 · 2023-08-23 12:55:35 -04:00 · 2023-08-23 12:53:47 -04:00 · 2023-08-23 12:52:42 -04:00 · 2023-08-23 11:43:48 -04:00
67 changed files with 1047 additions and 307 deletions
--- a/docs/_includes/component.njk
+++ b/docs/_includes/component.njk
@@ -137,15 +137,17 @@
          <tr>
            <td>
              <code class="nowrap">{{ prop.name }}</code>
-              {% if prop.attribute != prop.name %}
-                <br>
-                <sl-tooltip content="This attribute is different from its property">
-                  <small>
-                    <code class="nowrap">
-                      {{ prop.attribute }}
-                    </code>
-                  </small>
-                </sl-tooltip>
+              {% if prop.attribute | length > 0 %}
+                {% if prop.attribute != prop.name %}
+                  <br>
+                  <sl-tooltip content="This attribute is different from its property">
+                    <small>
+                      <code class="nowrap">
+                        {{ prop.attribute }}
+                      </code>
+                    </small>
+                  </sl-tooltip>
+                {% endif %}
              {% endif %}
            </td>
            <td>
@@ -185,7 +187,7 @@
      </tbody>
    </table>

-    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#properties') }}">attributes and properties</a>.</em></p>
+    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#attributes-and-properties') }}">attributes and properties</a>.</em></p>
  {% endif %}

  {# Events #}
@@ -305,7 +307,7 @@
      </tbody>
    </table>

-    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#component-parts') }}">customizing CSS parts</a>.</em></p>
+    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/customizing/#css-parts') }}">customizing CSS parts</a>.</em></p>
  {% endif %}

  {# Animations #}
@@ -329,7 +331,7 @@
      </tbody>
    </table>

-    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#animations') }}">customizing animations</a>.</em></p>
+    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/customizing#animations') }}">customizing animations</a>.</em></p>
  {% endif %}

  {# Dependencies #}
--- a/docs/_utilities/copy-code-buttons.cjs
+++ b/docs/_utilities/copy-code-buttons.cjs
@@ -1,3 +1,5 @@
+let codeBlockId = 0;
+
 /**
 * Adds copy code buttons to code fields. The provided doc should be a document object provided by JSDOM. The same
 * document will be returned with the appropriate DOM manipulations.
@@ -5,19 +7,14 @@
 module.exports = function (doc) {
  doc.querySelectorAll('pre > code').forEach(code => {
    const pre = code.closest('pre');
-    const button = doc.createElement('button');
-    button.setAttribute('type', 'button');
-    button.classList.add('copy-code-button');
-    button.setAttribute('aria-label', 'Copy');
-    button.innerHTML = `
-      <svg class="copy-code-button__copy-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-files" viewBox="0 0 16 16" part="svg">
-        <path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z"></path>
-      </svg>
+    const button = doc.createElement('sl-copy-button');

-      <svg class="copy-code-button__copied-icon" style="display: none;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16" part="svg">
-        <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"></path>
-      </svg>
-    `;
+    if (!code.id) {
+      code.id = `code-block-${++codeBlockId}`;
+    }
+
+    button.classList.add('copy-code-button');
+    button.setAttribute('from', code.id);

    pre.append(button);
  });
--- a/docs/assets/scripts/docs.js
+++ b/docs/assets/scripts/docs.js
@@ -163,32 +163,6 @@
  });
 })();

-//
-// Copy code buttons
-//
-(() => {
-  document.addEventListener('click', event => {
-    const button = event.target.closest('.copy-code-button');
-    const pre = button?.closest('pre');
-    const code = pre?.querySelector('code');
-    const copyIcon = button?.querySelector('.copy-code-button__copy-icon');
-    const copiedIcon = button?.querySelector('.copy-code-button__copied-icon');
-
-    if (button && code) {
-      navigator.clipboard.writeText(code.innerText);
-      copyIcon.style.display = 'none';
-      copiedIcon.style.display = 'inline';
-      button.classList.add('copy-code-button--copied');
-
-      setTimeout(() => {
-        copyIcon.style.display = 'inline';
-        copiedIcon.style.display = 'none';
-        button.classList.remove('copy-code-button--copied');
-      }, 1000);
-    }
-  });
-})();
-
 //
 // Smooth links
 //
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -506,46 +506,39 @@ pre .token.italic {

 /* Copy code button */
 .copy-code-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  background: var(--sl-color-neutral-0);
-  border-radius: calc(var(--docs-border-radius) * 0.875);
-  border: solid 1px var(--sl-color-neutral-200);
+  top: 0;
+  right: 0;
+  white-space: normal;
  color: var(--sl-color-neutral-800);
-  text-transform: uppercase;
-  padding: 0.5rem;
-  margin: 0;
-  cursor: pointer;
-  transition: 100ms opacity, 100ms scale;
+  transition: 150ms opacity, 150ms scale;
 }

-.copy-code-button svg {
-  width: 1rem;
-  height: 1rem;
+.copy-code-button::part(button) {
+  background-color: var(--sl-color-neutral-50);
+  border-radius: 0 var(--docs-border-radius) 0 var(--docs-border-radius);
+  padding: 0.75rem;
+}
+
+.copy-code-button::part(button):hover {
+  background-color: color-mix(in oklch, var(--sl-color-neutral-50), var(--sl-color-neutral-1000) 3%);
+}
+
+.copy-code-button::part(button):active {
+  background-color: color-mix(in oklch, var(--sl-color-neutral-50), var(--sl-color-neutral-1000) 6%);
 }

 pre .copy-code-button {
  opacity: 0;
-  scale: 0.9;
+  scale: 0.75;
 }

 pre:hover .copy-code-button,
-.copy-code-button:focus-visible {
+.copy-code-button:focus-within {
  opacity: 1;
  scale: 1;
 }

-pre:hover .copy-code-button:hover,
-pre:hover .copy-code-button--copied {
-  background: var(--sl-color-neutral-200);
-  border-color: var(--sl-color-neutral-300);
-  color: var(--sl-color-neutral-900);
-}
-
 /* Callouts */
 .callout {
  position: relative;
--- a/docs/pages/components/dropdown.md
+++ b/docs/pages/components/dropdown.md
@@ -310,6 +310,96 @@ const App = () => (
 );
 ```

+### Submenus
+
+To create a submenu, nest an `<sl-menu slot="submenu">` element in a [menu item](/components/menu-item).
+
+```html:preview
+<sl-dropdown>
+  <sl-button slot="trigger" caret>Edit</sl-button>
+
+  <sl-menu style="max-width: 200px;">
+    <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-divider></sl-divider>
+    <sl-menu-item>
+      Find
+      <sl-menu slot="submenu">
+        <sl-menu-item value="find">Find…</sl-menu-item>
+        <sl-menu-item value="find-previous">Find Next</sl-menu-item>
+        <sl-menu-item value="find-next">Find Previous</sl-menu-item>
+      </sl-menu>
+    </sl-menu-item>
+    <sl-menu-item>
+      Transformations
+      <sl-menu slot="submenu">
+        <sl-menu-item value="uppercase">Make uppercase</sl-menu-item>
+        <sl-menu-item value="lowercase">Make lowercase</sl-menu-item>
+        <sl-menu-item value="capitalize">Capitalize</sl-menu-item>
+      </sl-menu>
+    </sl-menu-item>
+  </sl-menu>
+</sl-dropdown>
+```
+
+```jsx:react
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+
+const css = `
+  .dropdown-hoist {
+    border: solid 2px var(--sl-panel-border-color);
+    padding: var(--sl-spacing-medium);
+    overflow: hidden;
+  }
+`;
+
+const App = () => (
+  <>
+    <SlDropdown>
+      <SlButton slot="trigger" caret>Edit</SlButton>
+
+      <SlMenu style="max-width: 200px;">
+        <SlMenuItem value="undo">Undo</SlMenuItem>
+        <SlMenuItem value="redo">Redo</SlMenuItem>
+        <SlDivider />
+        <SlMenuItem value="cut">Cut</SlMenuItem>
+        <SlMenuItem value="copy">Copy</SlMenuItem>
+        <SlMenuItem value="paste">Paste</SlMenuItem>
+        <SlDivider />
+        <SlMenuItem>
+          Find
+          <SlMenu slot="submenu">
+            <SlMenuItem value="find">Find…</SlMenuItem>
+            <SlMenuItem value="find-previous">Find Next</SlMenuItem>
+            <SlMenuItem value="find-next">Find Previous</SlMenuItem>
+          </SlMenu>
+        </SlMenuItem>
+        <SlMenuItem>
+          Transformations
+          <SlMenu slot="submenu">
+            <SlMenuItem value="uppercase">Make uppercase</SlMenuItem>
+            <SlMenuItem value="lowercase">Make lowercase</SlMenuItem>
+            <SlMenuItem value="capitalize">Capitalize</SlMenuItem>
+          </SlMenu>
+        </SlMenuItem>
+      </SlMenu>
+    </SlDropdown>
+  </>
+);
+```
+
+:::warning
+As a UX best practice, avoid using more than one level of submenu when possible.
+:::
+
 ### Hoisting

 Dropdown panels will be clipped if they're inside a container that has `overflow: auto|hidden`. The `hoist` attribute forces the panel to use a fixed positioning strategy, allowing it to break out of the container. In this case, the panel will be positioned relative to its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block), which is usually the viewport unless an ancestor uses a `transform`, `perspective`, or `filter`. [Refer to this page](https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed) for more details.
@@ -349,7 +439,6 @@ Dropdown panels will be clipped if they're inside a container that has `overflow
 import SlButton from '@shoelace-style/shoelace/dist/react/button';
 import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
 import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
-import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
 import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';

--- a/docs/pages/components/menu.md
+++ b/docs/pages/components/menu.md
@@ -44,3 +44,112 @@ const App = () => (
 :::tip
 Menus are intended for system menus (dropdown menus, select menus, context menus, etc.). They should not be mistaken for navigation menus which serve a different purpose and have a different semantic meaning. If you're building navigation, use `<nav>` and `<a>` elements instead.
 :::
+
+## Examples
+
+### In Dropdowns
+
+Menus work really well when used inside [dropdowns](/components/dropdown).
+
+```html:preview
+<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>
+```
+
+```jsx:react
+import SlButton from '@shoelace-style/shoelace/dist/react/button';
+import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
+import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+
+const App = () => (
+  <SlDropdown>
+    <SlButton slot="trigger" caret>Edit</SlButton>
+    <SlMenu>
+      <SlMenuItem value="cut">Cut</SlMenuItem>
+      <SlMenuItem value="copy">Copy</SlMenuItem>
+      <SlMenuItem value="paste">Paste</SlMenuItem>
+    </SlMenu>
+  </SlDropdown>
+);
+```
+
+### Submenus
+
+To create a submenu, nest an `<sl-menu slot="submenu">` in any [menu item](/components/menu-item).
+
+```html:preview
+<sl-menu style="max-width: 200px;">
+  <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-divider></sl-divider>
+  <sl-menu-item>
+    Find
+    <sl-menu slot="submenu">
+      <sl-menu-item value="find">Find…</sl-menu-item>
+      <sl-menu-item value="find-previous">Find Next</sl-menu-item>
+      <sl-menu-item value="find-next">Find Previous</sl-menu-item>
+    </sl-menu>
+  </sl-menu-item>
+  <sl-menu-item>
+    Transformations
+    <sl-menu slot="submenu">
+      <sl-menu-item value="uppercase">Make uppercase</sl-menu-item>
+      <sl-menu-item value="lowercase">Make lowercase</sl-menu-item>
+      <sl-menu-item value="capitalize">Capitalize</sl-menu-item>
+    </sl-menu>
+  </sl-menu-item>
+</sl-menu>
+```
+
+{% raw %}
+
+```jsx:react
+import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
+import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
+import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
+
+const App = () => (
+  <SlMenu style={{ maxWidth: '200px' }}>
+    <SlMenuItem value="undo">Undo</SlMenuItem>
+    <SlMenuItem value="redo">Redo</SlMenuItem>
+    <SlDivider />
+    <SlMenuItem value="cut">Cut</SlMenuItem>
+    <SlMenuItem value="copy">Copy</SlMenuItem>
+    <SlMenuItem value="paste">Paste</SlMenuItem>
+    <SlDivider />
+    <SlMenuItem>
+      Find
+      <SlMenu slot="submenu">
+        <SlMenuItem value="find">Find…</SlMenuItem>
+        <SlMenuItem value="find-previous">Find Next</SlMenuItem>
+        <SlMenuItem value="find-next">Find Previous</SlMenuItem>
+      </SlMenu>
+    </SlMenuItem>
+    <SlMenuItem>
+      Transformations
+      <SlMenu slot="submenu">
+        <SlMenuItem value="uppercase">Make uppercase</SlMenuItem>
+        <SlMenuItem value="lowercase">Make lowercase</SlMenuItem>
+        <SlMenuItem value="capitalize">Capitalize</SlMenuItem>
+      </SlMenu>
+    </SlMenuItem>
+  </SlMenu>
+);
+```
+
+:::warning
+As a UX best practice, avoid using more than one level of submenus when possible.
+:::
+
+{% endraw %}
--- a/docs/pages/components/select.md
+++ b/docs/pages/components/select.md
@@ -383,10 +383,8 @@ The preferred placement of the select's listbox can be set with the `placement`
 ```

 ```jsx:react
-import {
-  SlOption,
-  SlSelect
-} from '@shoelace-style/shoelace/dist/react';
+import SlOption from '@shoelace-style/shoelace/dist/react/option';
+import SlSelect from '@shoelace-style/shoelace/dist/react/select';

 const App = () => (
  <SlSelect placement="top">
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -12,11 +12,18 @@ Components with the <sl-badge variant="warning" pill>Experimental</sl-badge> bad

 New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style).

-## Next
+## 2.8.0

+- Added `--isolatedModules` and `--verbatimModuleSyntax` to `tsconfig.json`. For anyone directly importing event types, they no longer provide a default export due to these options being enabled. For people using the `events/event.js` file directly, there is no change.
+- Added support for submenus in `<sl-menu-item>` [#1410]
+- Added the `--submenu-offset` custom property to `<sl-menu-item>` [#1410]
+- Fixed an issue with focus trapping elements like `<sl-dialog>` when wrapped by other elements not checking the assigned elements of `<slot>`s. [#1537]
 - Fixed type issues with the `ref` attribute in React Wrappers. [#1526]
 - Fixed a regression that caused `<sl-radio-button>` to render incorrectly with gaps [#1523]
 - Improved expand/collapse behavior of `<sl-tree>` to work more like users expect [#1521]
+- Improved `<sl-menu-item>` so labels truncate properly instead of getting chopped and overflowing
+- Removed the extra `React.Component` around `@lit-labs/react` wrapper. [#1531]
+- Upgrade `@lit-labs/react` to v2.0.1. [#1531]

 ## 2.7.0

--- a/package-lock.json
+++ b/package-lock.json
@@ -1,17 +1,17 @@
 {
  "name": "@shoelace-style/shoelace",
-  "version": "2.7.0",
+  "version": "2.8.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@shoelace-style/shoelace",
-      "version": "2.7.0",
+      "version": "2.8.0",
      "license": "MIT",
      "dependencies": {
        "@ctrl/tinycolor": "^3.5.0",
        "@floating-ui/dom": "^1.2.1",
-        "@lit-labs/react": "^1.2.1",
+        "@lit-labs/react": "^2.0.1",
        "@shoelace-style/animations": "^1.1.0",
        "@shoelace-style/localize": "^3.1.1",
        "composed-offset-position": "^0.0.4",
@@ -1474,9 +1474,12 @@
      }
    },
    "node_modules/@lit-labs/react": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.2.1.tgz",
-      "integrity": "sha512-DiZdJYFU0tBbdQkfwwRSwYyI/mcWkg3sWesKRsHUd4G+NekTmmeq9fzsurvcKTNVa0comNljwtg4Hvi1ds3V+A=="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-2.0.1.tgz",
+      "integrity": "sha512-Nj+XB3HamqaWefN91lpFPJaqjJ78XzGkPWCedB4jyH22GBFEenpE9A/h8B/2dnIGXtNtd9D/RFpUdQ/dBtWFqA==",
+      "peerDependencies": {
+        "@types/react": "17 || 18"
+      }
    },
    "node_modules/@lit-labs/ssr-dom-shim": {
      "version": "1.1.1",
@@ -2270,8 +2273,7 @@
    "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
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
    },
    "node_modules/@types/qs": {
      "version": "6.9.7",
@@ -2289,7 +2291,6 @@
      "version": "18.0.26",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.26.tgz",
      "integrity": "sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==",
-      "dev": true,
      "dependencies": {
        "@types/prop-types": "*",
        "@types/scheduler": "*",
@@ -2317,8 +2318,7 @@
    "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
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
    },
    "node_modules/@types/semver": {
      "version": "7.5.0",
@@ -5685,8 +5685,7 @@
    "node_modules/csstype": {
      "version": "3.0.10",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
-      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==",
-      "dev": true
+      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
    },
    "node_modules/custom-element-jet-brains-integration": {
      "version": "1.1.0",
@@ -18291,9 +18290,10 @@
      }
    },
    "@lit-labs/react": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.2.1.tgz",
-      "integrity": "sha512-DiZdJYFU0tBbdQkfwwRSwYyI/mcWkg3sWesKRsHUd4G+NekTmmeq9fzsurvcKTNVa0comNljwtg4Hvi1ds3V+A=="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-2.0.1.tgz",
+      "integrity": "sha512-Nj+XB3HamqaWefN91lpFPJaqjJ78XzGkPWCedB4jyH22GBFEenpE9A/h8B/2dnIGXtNtd9D/RFpUdQ/dBtWFqA==",
+      "requires": {}
    },
    "@lit-labs/ssr-dom-shim": {
      "version": "1.1.1",
@@ -18998,8 +18998,7 @@
    "@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
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
    },
    "@types/qs": {
      "version": "6.9.7",
@@ -19017,7 +19016,6 @@
      "version": "18.0.26",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.26.tgz",
      "integrity": "sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==",
-      "dev": true,
      "requires": {
        "@types/prop-types": "*",
        "@types/scheduler": "*",
@@ -19045,8 +19043,7 @@
    "@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
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
    },
    "@types/semver": {
      "version": "7.5.0",
@@ -21514,8 +21511,7 @@
    "csstype": {
      "version": "3.0.10",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
-      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==",
-      "dev": true
+      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
    },
    "custom-element-jet-brains-integration": {
      "version": "1.1.0",
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@shoelace-style/shoelace",
  "description": "A forward-thinking library of web components.",
-  "version": "2.7.0",
+  "version": "2.8.0",
  "homepage": "https://github.com/shoelace-style/shoelace",
  "author": "Cory LaViska",
  "license": "MIT",
@@ -25,8 +25,15 @@
    "./dist/react/*": "./dist/react/*",
    "./dist/translations/*": "./dist/translations/*"
  },
-  "files": ["dist", "cdn"],
-  "keywords": ["web components", "custom elements", "components"],
+  "files": [
+    "dist",
+    "cdn"
+  ],
+  "keywords": [
+    "web components",
+    "custom elements",
+    "components"
+  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/shoelace-style/shoelace.git"
@@ -62,7 +69,7 @@
  "dependencies": {
    "@ctrl/tinycolor": "^3.5.0",
    "@floating-ui/dom": "^1.2.1",
-    "@lit-labs/react": "^1.2.1",
+    "@lit-labs/react": "^2.0.1",
    "@shoelace-style/animations": "^1.1.0",
    "@shoelace-style/localize": "^3.1.1",
    "composed-offset-position": "^0.0.4",
@@ -133,6 +140,9 @@
    "user-agent-data-types": "^0.3.0"
  },
  "lint-staged": {
-    "*.{ts,js}": ["eslint --max-warnings 0 --cache --fix", "prettier --write"]
+    "*.{ts,js}": [
+      "eslint --max-warnings 0 --cache --fix",
+      "prettier --write"
+    ]
  }
 }
--- a/scripts/make-react.js
+++ b/scripts/make-react.js
@@ -51,18 +51,11 @@ components.map(component => {
      ${eventImports}
      ${eventExports}

-      export type ForwardComponent<
-        Element extends HTMLElement,
-        ReactComponent extends React.ElementType
-      > = React.JSXElementConstructor<
-        React.ComponentPropsWithoutRef<ReactComponent> & {
-          ref?: React.ForwardedRef<Element>;
-        }
-      > & { displayName?: string }
-
      const tagName = '${component.tagName}'
+      Component.define('${component.tagName}')

-      const component = createComponent({
+      ${jsDoc}
+      const reactWrapper = createComponent({
        tagName,
        elementClass: Component,
        react: React,
@@ -72,20 +65,7 @@ components.map(component => {
        displayName: "${component.name}"
      })

-      ${jsDoc}
-      class SlComponent extends React.Component<Parameters<typeof component>[0]> {
-        constructor (...args: Parameters<typeof component>) {
-          super(...args)
-          Component.define(tagName)
-        }
-
-        render () {
-          const { children, ...props } = this.props
-          return React.createElement(component, props, children)
-        }
-      }
-
-      export default SlComponent as ForwardComponent<Component, typeof SlComponent>;
+      export default reactWrapper
    `,
    Object.assign(prettierConfig, {
      parser: 'babel-ts'
--- a/scripts/plop/templates/component/docs.hbs
+++ b/scripts/plop/templates/component/docs.hbs
@@ -5,7 +5,7 @@ meta:
 layout: component
 ---

-```html preview
+```html:preview
 <{{ tag }}></{{ tag }}>
 ```

--- a/src/components/color-picker/color-picker.component.ts
+++ b/src/components/color-picker/color-picker.component.ts
@@ -20,8 +20,8 @@ import SlVisuallyHidden from '../visually-hidden/visually-hidden.component.js';
 import styles from './color-picker.styles.js';
 import type { CSSResultGroup } from 'lit';
 import type { ShoelaceFormControl } from '../../internal/shoelace-element.js';
-import type SlChangeEvent from '../../events/sl-change.js';
-import type SlInputEvent from '../../events/sl-input.js';
+import type { SlChangeEvent } from '../../events/sl-change.js';
+import type { SlInputEvent } from '../../events/sl-input.js';

 const hasEyeDropper = 'EyeDropper' in window;

--- a/src/components/details/details.test.ts
+++ b/src/components/details/details.test.ts
@@ -2,9 +2,9 @@ import '../../../dist/shoelace.js';
 // cspell:dictionaries lorem-ipsum
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
+import type { SlHideEvent } from '../../events/sl-hide';
+import type { SlShowEvent } from '../../events/sl-show';
 import type SlDetails from './details';
-import type SlHideEvent from '../../events/sl-hide';
-import type SlShowEvent from '../../events/sl-show';

 describe('<sl-details>', () => {
  describe('accessibility', () => {
--- a/src/components/dropdown/dropdown.component.ts
+++ b/src/components/dropdown/dropdown.component.ts
@@ -11,10 +11,10 @@ import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlPopup from '../popup/popup.component.js';
 import styles from './dropdown.styles.js';
 import type { CSSResultGroup } from 'lit';
+import type { SlSelectEvent } from '../../events/sl-select.js';
 import type SlButton from '../button/button.js';
 import type SlIconButton from '../icon-button/icon-button.js';
 import type SlMenu from '../menu/menu.js';
-import type SlSelectEvent from '../../events/sl-select.js';

 /**
 * @summary Dropdowns expose additional content that "drops down" in a panel.
--- a/src/components/icon/icon.test.ts
+++ b/src/components/icon/icon.test.ts
@@ -1,8 +1,8 @@
 import { aTimeout, elementUpdated, expect, fixture, html, oneEvent } from '@open-wc/testing';
 import { registerIconLibrary } from '../../../dist/shoelace.js';
-import type SlErrorEvent from '../../events/sl-error';
+import type { SlErrorEvent } from '../../events/sl-error';
+import type { SlLoadEvent } from '../../events/sl-load';
 import type SlIcon from './icon';
-import type SlLoadEvent from '../../events/sl-load';

 const testLibraryIcons = {
  'test-icon1': `
--- a/src/components/menu-item/menu-item.component.ts
+++ b/src/components/menu-item/menu-item.component.ts
@@ -1,10 +1,13 @@
 import { classMap } from 'lit/directives/class-map.js';
-import { getTextContent } from '../../internal/slot.js';
+import { getTextContent, HasSlotController } from '../../internal/slot.js';
 import { html } from 'lit';
+import { LocalizeController } from '../../utilities/localize.js';
 import { property, query } from 'lit/decorators.js';
+import { SubmenuController } from './submenu-controller.js';
 import { watch } from '../../internal/watch.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlIcon from '../icon/icon.component.js';
+import SlPopup from '../popup/popup.component.js';
 import styles from './menu-item.styles.js';
 import type { CSSResultGroup } from 'lit';

@@ -15,10 +18,12 @@ import type { CSSResultGroup } from 'lit';
 * @since 2.0
 *
 * @dependency sl-icon
+ * @dependency sl-popup
 *
 * @slot - The menu item's label.
 * @slot prefix - Used to prepend an icon or similar element to the menu item.
 * @slot suffix - Used to append an icon or similar element to the menu item.
+ * @slot submenu - Used to denote a nested menu.
 *
 * @csspart base - The component's base wrapper.
 * @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.
@@ -26,10 +31,15 @@ import type { CSSResultGroup } from 'lit';
 * @csspart label - The menu item label.
 * @csspart suffix - The suffix container.
 * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
+ *
+ * @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu.
 */
 export default class SlMenuItem extends ShoelaceElement {
  static styles: CSSResultGroup = styles;
-  static dependencies = { 'sl-icon': SlIcon };
+  static dependencies = {
+    'sl-icon': SlIcon,
+    'sl-popup': SlPopup
+  };

  private cachedTextLabel: string;

@@ -48,6 +58,22 @@ export default class SlMenuItem extends ShoelaceElement {
  /** Draws the menu item in a disabled state, preventing selection. */
  @property({ type: Boolean, reflect: true }) disabled = false;

+  private readonly localize = new LocalizeController(this);
+  private readonly hasSlotController = new HasSlotController(this, 'submenu');
+  private submenuController: SubmenuController = new SubmenuController(this, this.hasSlotController, this.localize);
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('click', this.handleHostClick);
+    this.addEventListener('mouseover', this.handleMouseOver);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('click', this.handleHostClick);
+    this.removeEventListener('mouseover', this.handleMouseOver);
+  }
+
  private handleDefaultSlotChange() {
    const textLabel = this.getTextLabel();

@@ -64,6 +90,19 @@ export default class SlMenuItem extends ShoelaceElement {
    }
  }

+  private handleHostClick = (event: MouseEvent) => {
+    // Prevent the click event from being emitted when the button is disabled or loading
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  };
+
+  private handleMouseOver = (event: MouseEvent) => {
+    this.focus();
+    event.stopPropagation();
+  };
+
  @watch('checked')
  handleCheckedChange() {
    // For proper accessibility, users have to use type="checkbox" to use the checked attribute
@@ -102,16 +141,28 @@ export default class SlMenuItem extends ShoelaceElement {
    return getTextContent(this.defaultSlot);
  }

+  isSubmenu() {
+    return this.hasSlotController.test('submenu');
+  }
+
  render() {
+    const isRtl = this.localize.dir() === 'rtl';
+    const isSubmenuExpanded = this.submenuController.isExpanded();
+
    return html`
      <div
+        id="anchor"
        part="base"
        class=${classMap({
          'menu-item': true,
+          'menu-item--rtl': isRtl,
          'menu-item--checked': this.checked,
          'menu-item--disabled': this.disabled,
-          'menu-item--has-submenu': false // reserved for future use
+          'menu-item--has-submenu': this.isSubmenu(),
+          'menu-item--submenu-expanded': isSubmenuExpanded
        })}
+        ?aria-haspopup="${this.isSubmenu()}"
+        ?aria-expanded="${isSubmenuExpanded ? true : false}"
      >
        <span part="checked-icon" class="menu-item__check">
          <sl-icon name="check" library="system" aria-hidden="true"></sl-icon>
@@ -124,8 +175,10 @@ export default class SlMenuItem extends ShoelaceElement {
        <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>

        <span part="submenu-icon" class="menu-item__chevron">
-          <sl-icon name="chevron-right" library="system" aria-hidden="true"></sl-icon>
+          <sl-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" aria-hidden="true"></sl-icon>
        </span>
+
+        ${this.submenuController.renderSubmenu()}
      </div>
    `;
  }
--- a/src/components/menu-item/menu-item.styles.ts
+++ b/src/components/menu-item/menu-item.styles.ts
@@ -5,6 +5,8 @@ export default css`
  ${componentStyles}

  :host {
+    --submenu-offset: -2px;
+
    display: block;
  }

@@ -38,6 +40,8 @@ export default css`
  .menu-item .menu-item__label {
    flex: 1 1 auto;
    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
  }

  .menu-item .menu-item__prefix {
@@ -64,7 +68,8 @@ export default css`
    outline: none;
  }

-  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
+  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
+  .menu-item--submenu-expanded {
    background-color: var(--sl-color-neutral-100);
    color: var(--sl-color-neutral-1000);
  }
@@ -91,6 +96,17 @@ export default css`
    visibility: visible;
  }

+  /* Add elevation and z-index to submenus */
+  sl-popup::part(popup) {
+    box-shadow: var(--sl-shadow-large);
+    z-index: var(--sl-z-index-dropdown);
+    margin-left: var(--submenu-offset);
+  }
+
+  .menu-item--rtl sl-popup::part(popup) {
+    margin-left: calc(-1 * var(--submenu-offset));
+  }
+
  @media (forced-colors: active) {
    :host(:hover:not([aria-disabled='true'])) .menu-item,
    :host(:focus-visible) .menu-item {
--- a/src/components/menu-item/menu-item.test.ts
+++ b/src/components/menu-item/menu-item.test.ts
@@ -1,6 +1,8 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
+import type { SlSelectEvent } from '../../events/sl-select';
 import type SlMenuItem from './menu-item';

 describe('<sl-menu-item>', () => {
@@ -18,6 +20,21 @@ describe('<sl-menu-item>', () => {
    await expect(el).to.be.accessible();
  });

+  it('should pass accessibility tests when using a submenu', async () => {
+    const el = await fixture<SlMenuItem>(html`
+      <sl-menu>
+        <sl-menu-item>
+          Submenu
+          <sl-menu slot="submenu">
+            <sl-menu-item>Submenu Item 1</sl-menu-item>
+            <sl-menu-item>Submenu Item 2</sl-menu-item>
+          </sl-menu>
+        </sl-menu-item>
+      </sl-menu>
+    `);
+    await expect(el).to.be.accessible();
+  });
+
  it('should have the correct default properties', async () => {
    const el = await fixture<SlMenuItem>(html` <sl-menu-item>Test</sl-menu-item> `);

@@ -59,4 +76,98 @@ describe('<sl-menu-item>', () => {

    expect(getComputedStyle(item1).display).to.equal('none');
  });
+
+  it('should not render a sl-popup if the slot="submenu" attribute is missing, but the slot should exist in the component and be hidden.', async () => {
+    const menu = await fixture<SlMenuItem>(html`
+      <sl-menu>
+        <sl-menu-item>
+          Item 1
+          <sl-menu>
+            <sl-menu-item> Nested Item 1 </sl-menu-item>
+          </sl-menu>
+        </sl-menu-item>
+      </sl-menu>
+    `);
+
+    const menuItem: HTMLElement = menu.querySelector('sl-menu-item')!;
+    expect(menuItem.shadowRoot!.querySelector('sl-popup')).to.be.null;
+    const submenuSlot: HTMLElement = menuItem.shadowRoot!.querySelector('slot[name="submenu"]')!;
+    expect(submenuSlot.hidden).to.be.true;
+  });
+
+  it('should render an sl-popup if the slot="submenu" attribute is present', async () => {
+    const menu = await fixture<SlMenuItem>(html`
+      <sl-menu>
+        <sl-menu-item id="test">
+          Item 1
+          <sl-menu slot="submenu">
+            <sl-menu-item> Nested Item 1 </sl-menu-item>
+          </sl-menu>
+        </sl-menu-item>
+      </sl-menu>
+    `);
+
+    const menuItem = menu.querySelector('sl-menu-item')!;
+    expect(menuItem.shadowRoot!.querySelector('sl-popup')).to.be.not.null;
+    const submenuSlot: HTMLElement = menuItem.shadowRoot!.querySelector('slot[name="submenu"]')!;
+    expect(submenuSlot.hidden).to.be.false;
+  });
+
+  it('should focus on first menuitem of submenu if ArrowRight is pressed on parent menuitem', async () => {
+    const menu = await fixture<SlMenuItem>(html`
+      <sl-menu>
+        <sl-menu-item id="item-1">
+          Submenu
+          <sl-menu slot="submenu">
+            <sl-menu-item value="submenu-item-1"> Nested Item 1 </sl-menu-item>
+          </sl-menu>
+        </sl-menu-item>
+      </sl-menu>
+    `);
+
+    const selectHandler = sinon.spy((event: SlSelectEvent) => {
+      const item = event.detail.item;
+      expect(item.value).to.equal('submenu-item-1');
+    });
+    menu.addEventListener('sl-select', selectHandler);
+
+    const submenu = menu.querySelector('sl-menu-item');
+    submenu!.focus();
+    await menu.updateComplete;
+    await sendKeys({ press: 'ArrowRight' });
+    await menu.updateComplete;
+    await sendKeys({ press: 'Enter' });
+    await menu.updateComplete;
+    // Once for each menu element.
+    expect(selectHandler).to.have.been.calledTwice;
+  });
+
+  it('should focus on outer menu if ArrowRight is pressed on nested menuitem', async () => {
+    const menu = await fixture<SlMenuItem>(html`
+      <sl-menu>
+        <sl-menu-item value="outer-item-1">
+          Submenu
+          <sl-menu slot="submenu">
+            <sl-menu-item value="inner-item-1"> Nested Item 1 </sl-menu-item>
+          </sl-menu>
+        </sl-menu-item>
+      </sl-menu>
+    `);
+
+    const focusHandler = sinon.spy((event: FocusEvent) => {
+      expect(event.target.value).to.equal('outer-item-1');
+      expect(event.relatedTarget.value).to.equal('inner-item-1');
+    });
+
+    const outerItem = menu.querySelector('sl-menu-item');
+    outerItem!.focus();
+    await menu.updateComplete;
+    await sendKeys({ press: 'ArrowRight' });
+
+    outerItem.addEventListener('focus', focusHandler);
+    await menu.updateComplete;
+    await sendKeys({ press: 'ArrowLeft' });
+    await menu.updateComplete;
+    expect(focusHandler).to.have.been.calledOnce;
+  });
 });
--- a/src/components/menu-item/submenu-controller.ts
+++ b/src/components/menu-item/submenu-controller.ts
@@ -0,0 +1,262 @@
+import { createRef, ref, type Ref } from 'lit/directives/ref.js';
+import { type HasSlotController } from '../../internal/slot.js';
+import { html } from 'lit';
+import { type LocalizeController } from '../../utilities/localize.js';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type SlMenuItem from './menu-item.js';
+import type SlPopup from '../popup/popup.js';
+
+/** A reactive controller to manage the registration of event listeners for submenus. */
+export class SubmenuController implements ReactiveController {
+  private host: ReactiveControllerHost & SlMenuItem;
+  private popupRef: Ref<SlPopup> = createRef();
+  private enableSubmenuTimer = -1;
+  private isConnected = false;
+  private isPopupConnected = false;
+  private skidding = 0;
+  private readonly hasSlotController: HasSlotController;
+  private readonly localize: LocalizeController;
+  private readonly submenuOpenDelay = 100;
+
+  constructor(
+    host: ReactiveControllerHost & SlMenuItem,
+    hasSlotController: HasSlotController,
+    localize: LocalizeController
+  ) {
+    (this.host = host).addController(this);
+    this.hasSlotController = hasSlotController;
+    this.localize = localize;
+  }
+
+  hostConnected() {
+    if (this.hasSlotController.test('submenu') && !this.host.disabled) {
+      this.addListeners();
+    }
+  }
+
+  hostDisconnected() {
+    this.removeListeners();
+  }
+
+  hostUpdated() {
+    if (this.hasSlotController.test('submenu') && !this.host.disabled) {
+      this.addListeners();
+      this.updateSkidding();
+    } else {
+      this.removeListeners();
+    }
+  }
+
+  private addListeners() {
+    if (!this.isConnected) {
+      this.host.addEventListener('mouseover', this.handleMouseOver);
+      this.host.addEventListener('keydown', this.handleKeyDown);
+      this.host.addEventListener('click', this.handleClick);
+      this.host.addEventListener('focusout', this.handleFocusOut);
+      this.isConnected = true;
+    }
+
+    // The popup does not seem to get wired when the host is
+    // connected, so manage its listeners separately.
+    if (!this.isPopupConnected) {
+      if (this.popupRef.value) {
+        this.popupRef.value.addEventListener('mouseover', this.handlePopupMouseover);
+        this.isPopupConnected = true;
+      }
+    }
+  }
+
+  private removeListeners() {
+    if (this.isConnected) {
+      this.host.removeEventListener('mouseover', this.handleMouseOver);
+      this.host.removeEventListener('keydown', this.handleKeyDown);
+      this.host.removeEventListener('click', this.handleClick);
+      this.host.removeEventListener('focusout', this.handleFocusOut);
+      this.isConnected = false;
+    }
+    if (this.isPopupConnected) {
+      if (this.popupRef.value) {
+        this.popupRef.value.removeEventListener('mouseover', this.handlePopupMouseover);
+        this.isPopupConnected = false;
+      }
+    }
+  }
+
+  private handleMouseOver = () => {
+    if (this.hasSlotController.test('submenu')) {
+      this.enableSubmenu();
+    }
+  };
+
+  private handleSubmenuEntry(event: KeyboardEvent) {
+    // Pass focus to the first menu-item in the submenu.
+    const submenuSlot: HTMLSlotElement | null = this.host.renderRoot.querySelector("slot[name='submenu']");
+
+    // Missing slot
+    if (!submenuSlot) {
+      console.error('Cannot activate a submenu if no corresponding menuitem can be found.', this);
+      return;
+    }
+
+    // Menus
+    let menuItems: NodeListOf<Element> | null = null;
+    for (const elt of submenuSlot.assignedElements()) {
+      menuItems = elt.querySelectorAll("sl-menu-item, [role^='menuitem']");
+      if (menuItems.length !== 0) {
+        break;
+      }
+    }
+
+    if (!menuItems || menuItems.length === 0) {
+      return;
+    }
+
+    menuItems[0].setAttribute('tabindex', '0');
+    for (let i = 1; i !== menuItems.length; ++i) {
+      menuItems[i].setAttribute('tabindex', '-1');
+    }
+
+    // Open the submenu (if not open), and set focus to first menuitem.
+    if (this.popupRef.value) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.popupRef.value.active) {
+        if (menuItems[0] instanceof HTMLElement) {
+          menuItems[0].focus();
+        }
+      } else {
+        this.enableSubmenu(false);
+        this.host.updateComplete.then(() => {
+          if (menuItems![0] instanceof HTMLElement) {
+            menuItems![0].focus();
+          }
+        });
+        this.host.requestUpdate();
+      }
+    }
+  }
+
+  // Focus on the first menu-item of a submenu.
+  private handleKeyDown = (event: KeyboardEvent) => {
+    switch (event.key) {
+      case 'Escape':
+      case 'Tab':
+        this.disableSubmenu();
+        break;
+      case 'ArrowLeft':
+        // Either focus is currently on the host element or a child
+        if (event.target !== this.host) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.host.focus();
+          this.disableSubmenu();
+        }
+        break;
+      case 'ArrowRight':
+      case 'Enter':
+      case ' ':
+        this.handleSubmenuEntry(event);
+        break;
+      default:
+        break;
+    }
+  };
+
+  private handleClick = (event: MouseEvent) => {
+    // Clicking on the item which heads the menu does nothing, otherwise hide submenu and propagate
+    if (event.target === this.host) {
+      event.preventDefault();
+      event.stopPropagation();
+    } else if (
+      event.target instanceof Element &&
+      (event.target.tagName === 'sl-menu-item' || event.target.role?.startsWith('menuitem'))
+    ) {
+      this.disableSubmenu();
+    }
+  };
+
+  // Close this submenu on focus outside of the parent or any descendants.
+  private handleFocusOut = (event: FocusEvent) => {
+    if (event.relatedTarget && event.relatedTarget instanceof Element && this.host.contains(event.relatedTarget)) {
+      return;
+    }
+    this.disableSubmenu();
+  };
+
+  // Prevent the parent menu-item from getting focus on mouse movement on the submenu
+  private handlePopupMouseover = (event: MouseEvent) => {
+    event.stopPropagation();
+  };
+
+  private setSubmenuState(state: boolean) {
+    if (this.popupRef.value) {
+      if (this.popupRef.value.active !== state) {
+        this.popupRef.value.active = state;
+        this.host.requestUpdate();
+      }
+    }
+  }
+
+  // Shows the submenu. Supports disabling the opening delay, e.g. for keyboard events that want to set the focus to the
+  // newly opened menu.
+  private enableSubmenu(delay = true) {
+    if (delay) {
+      this.enableSubmenuTimer = window.setTimeout(() => {
+        this.setSubmenuState(true);
+      }, this.submenuOpenDelay);
+    } else {
+      this.setSubmenuState(true);
+    }
+  }
+
+  private disableSubmenu() {
+    clearTimeout(this.enableSubmenuTimer);
+    this.setSubmenuState(false);
+  }
+
+  // Calculate the space the top of a menu takes-up, for aligning the popup menu-item with the activating element.
+  private updateSkidding(): void {
+    // .computedStyleMap() not always available.
+    if (!this.host.parentElement?.computedStyleMap) {
+      return;
+    }
+    const styleMap: StylePropertyMapReadOnly = this.host.parentElement.computedStyleMap();
+    const attrs: string[] = ['padding-top', 'border-top-width', 'margin-top'];
+
+    const skidding = attrs.reduce((accumulator, attr) => {
+      const styleValue: CSSStyleValue = styleMap.get(attr) ?? new CSSUnitValue(0, 'px');
+      const unitValue = styleValue instanceof CSSUnitValue ? styleValue : new CSSUnitValue(0, 'px');
+      const pxValue = unitValue.to('px');
+      return accumulator - pxValue.value;
+    }, 0);
+
+    this.skidding = skidding;
+  }
+
+  isExpanded(): boolean {
+    return this.popupRef.value ? this.popupRef.value.active : false;
+  }
+
+  renderSubmenu() {
+    const isLtr = this.localize.dir() === 'ltr';
+
+    // Always render the slot, but conditionally render the outer <sl-popup>
+    if (!this.isConnected) {
+      return html` <slot name="submenu" hidden></slot> `;
+    }
+
+    return html`
+      <sl-popup
+        ${ref(this.popupRef)}
+        placement=${isLtr ? 'right-start' : 'left-start'}
+        anchor="anchor"
+        flip
+        flip-fallback-strategy="best-fit"
+        skidding="${this.skidding}"
+        strategy="fixed"
+      >
+        <slot name="submenu"></slot>
+      </sl-popup>
+    `;
+  }
+}
--- a/src/components/menu/menu.component.ts
+++ b/src/components/menu/menu.component.ts
@@ -1,9 +1,9 @@
 import { html } from 'lit';
 import { query } from 'lit/decorators.js';
 import ShoelaceElement from '../../internal/shoelace-element.js';
+import SlMenuItem from '../menu-item/menu-item.component.js';
 import styles from './menu.styles.js';
 import type { CSSResultGroup } from 'lit';
-import type SlMenuItem from '../menu-item/menu-item.js';
 export interface MenuSelectEventDetail {
  item: SlMenuItem;
 }
@@ -29,13 +29,12 @@ export default class SlMenu extends ShoelaceElement {
  }

  private handleClick(event: MouseEvent) {
-    const target = event.target as HTMLElement;
-    const item = target.closest('sl-menu-item');
-
-    if (!item || item.disabled || item.inert) {
+    if (!(event.target instanceof SlMenuItem)) {
      return;
    }

+    const item: SlMenuItem = event.target;
+
    if (item.type === 'checkbox') {
      item.checked = !item.checked;
    }
@@ -48,19 +47,21 @@ export default class SlMenu extends ShoelaceElement {
    if (event.key === 'Enter' || event.key === ' ') {
      const item = this.getCurrentItem();
      event.preventDefault();
+      event.stopPropagation();

      // Simulate a click to support @click handlers on menu items that also work with the keyboard
      item?.click();
    }

    // Move the selection when pressing down or up
-    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+    else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
      const items = this.getAllItems();
      const activeItem = this.getCurrentItem();
      let index = activeItem ? items.indexOf(activeItem) : 0;

      if (items.length > 0) {
        event.preventDefault();
+        event.stopPropagation();

        if (event.key === 'ArrowDown') {
          index++;
--- a/src/components/menu/menu.test.ts
+++ b/src/components/menu/menu.test.ts
@@ -4,8 +4,8 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
+import type { SlSelectEvent } from '../../events/sl-select';
 import type SlMenu from './menu';
-import type SlSelectEvent from '../../events/sl-select';

 describe('<sl-menu>', () => {
  it('emits sl-select with the correct event detail when clicking an item', async () => {
--- a/src/components/radio-group/radio-group.test.ts
+++ b/src/components/radio-group/radio-group.test.ts
@@ -4,7 +4,7 @@ import { clickOnElement } from '../../internal/test.js';
 import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import type SlChangeEvent from '../../events/sl-change.js';
+import type { SlChangeEvent } from '../../events/sl-change.js';
 import type SlRadio from '../radio/radio.js';
 import type SlRadioGroup from './radio-group.js';

--- a/src/components/select/select.component.ts
+++ b/src/components/select/select.component.ts
@@ -18,8 +18,8 @@ import SlTag from '../tag/tag.component.js';
 import styles from './select.styles.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 import type { ShoelaceFormControl } from '../../internal/shoelace-element.js';
+import type { SlRemoveEvent } from '../../events/sl-remove.js';
 import type SlOption from '../option/option.component.js';
-import type SlRemoveEvent from '../../events/sl-remove.js';

 /**
 * @summary Selects allow you to choose items from a menu of predefined options.
--- a/src/components/tab-group/tab-group.test.ts
+++ b/src/components/tab-group/tab-group.test.ts
@@ -7,10 +7,10 @@ import { queryByTestId } from '../../internal/test/data-testid-helpers.js';
 import { sendKeys } from '@web/test-runner-commands';
 import { waitForScrollingToEnd } from '../../internal/test/wait-for-scrolling.js';
 import type { HTMLTemplateResult } from 'lit';
+import type { SlTabShowEvent } from '../../events/sl-tab-show.js';
 import type SlTab from '../tab/tab.js';
 import type SlTabGroup from './tab-group.js';
 import type SlTabPanel from '../tab-panel/tab-panel.js';
-import type SlTabShowEvent from '../../events/sl-tab-show.js';

 interface ClientRectangles {
  body?: DOMRect;
--- a/src/events/events.ts
+++ b/src/events/events.ts
@@ -1,35 +1,35 @@
-export type { default as SlAfterCollapseEvent } from './sl-after-collapse';
-export type { default as SlAfterExpandEvent } from './sl-after-expand';
-export type { default as SlAfterHideEvent } from './sl-after-hide';
-export type { default as SlAfterShowEvent } from './sl-after-show';
-export type { default as SlBlurEvent } from './sl-blur';
-export type { default as SlCancelEvent } from './sl-cancel';
-export type { default as SlChangeEvent } from './sl-change';
-export type { default as SlClearEvent } from './sl-clear';
-export type { default as SlCloseEvent } from './sl-close';
-export type { default as SlCollapseEvent } from './sl-collapse';
-export type { default as SlCopyEvent } from './sl-copy';
-export type { default as SlErrorEvent } from './sl-error';
-export type { default as SlExpandEvent } from './sl-expand';
-export type { default as SlFinishEvent } from './sl-finish';
-export type { default as SlFocusEvent } from './sl-focus';
-export type { default as SlHideEvent } from './sl-hide';
-export type { default as SlHoverEvent } from './sl-hover';
-export type { default as SlInitialFocusEvent } from './sl-initial-focus';
-export type { default as SlInputEvent } from './sl-input';
-export type { default as SlInvalidEvent } from './sl-invalid';
-export type { default as SlLazyChangeEvent } from './sl-lazy-change';
-export type { default as SlLazyLoadEvent } from './sl-lazy-load';
-export type { default as SlLoadEvent } from './sl-load';
-export type { default as SlMutationEvent } from './sl-mutation';
-export type { default as SlRemoveEvent } from './sl-remove';
-export type { default as SlRepositionEvent } from './sl-reposition';
-export type { default as SlRequestCloseEvent } from './sl-request-close';
-export type { default as SlResizeEvent } from './sl-resize';
-export type { default as SlSelectEvent } from './sl-select';
-export type { default as SlSelectionChangeEvent } from './sl-selection-change';
-export type { default as SlShowEvent } from './sl-show';
-export type { default as SlSlideChangeEvent } from './sl-slide-change';
-export type { default as SlStartEvent } from './sl-start';
-export type { default as SlTabHideEvent } from './sl-tab-hide';
-export type { default as SlTabShowEvent } from './sl-tab-show';
+export type { SlAfterCollapseEvent } from './sl-after-collapse';
+export type { SlAfterExpandEvent } from './sl-after-expand';
+export type { SlAfterHideEvent } from './sl-after-hide';
+export type { SlAfterShowEvent } from './sl-after-show';
+export type { SlBlurEvent } from './sl-blur';
+export type { SlCancelEvent } from './sl-cancel';
+export type { SlChangeEvent } from './sl-change';
+export type { SlClearEvent } from './sl-clear';
+export type { SlCloseEvent } from './sl-close';
+export type { SlCollapseEvent } from './sl-collapse';
+export type { SlCopyEvent } from './sl-copy';
+export type { SlErrorEvent } from './sl-error';
+export type { SlExpandEvent } from './sl-expand';
+export type { SlFinishEvent } from './sl-finish';
+export type { SlFocusEvent } from './sl-focus';
+export type { SlHideEvent } from './sl-hide';
+export type { SlHoverEvent } from './sl-hover';
+export type { SlInitialFocusEvent } from './sl-initial-focus';
+export type { SlInputEvent } from './sl-input';
+export type { SlInvalidEvent } from './sl-invalid';
+export type { SlLazyChangeEvent } from './sl-lazy-change';
+export type { SlLazyLoadEvent } from './sl-lazy-load';
+export type { SlLoadEvent } from './sl-load';
+export type { SlMutationEvent } from './sl-mutation';
+export type { SlRemoveEvent } from './sl-remove';
+export type { SlRepositionEvent } from './sl-reposition';
+export type { SlRequestCloseEvent } from './sl-request-close';
+export type { SlResizeEvent } from './sl-resize';
+export type { SlSelectEvent } from './sl-select';
+export type { SlSelectionChangeEvent } from './sl-selection-change';
+export type { SlShowEvent } from './sl-show';
+export type { SlSlideChangeEvent } from './sl-slide-change';
+export type { SlStartEvent } from './sl-start';
+export type { SlTabHideEvent } from './sl-tab-hide';
+export type { SlTabShowEvent } from './sl-tab-show';
--- a/src/events/sl-after-collapse.ts
+++ b/src/events/sl-after-collapse.ts
@@ -1,9 +1,7 @@
-type SlAfterCollapseEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlAfterCollapseEvent = CustomEvent<Record<PropertyKey, never>>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-after-collapse': SlAfterCollapseEvent;
  }
 }
-
-export default SlAfterCollapseEvent;
--- a/src/events/sl-after-expand.ts
+++ b/src/events/sl-after-expand.ts
@@ -1,9 +1,7 @@
-type SlAfterExpandEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlAfterExpandEvent = CustomEvent<Record<PropertyKey, never>>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-after-expand': SlAfterExpandEvent;
  }
 }
-
-export default SlAfterExpandEvent;
--- a/src/events/sl-after-hide.ts
+++ b/src/events/sl-after-hide.ts
@@ -1,9 +1,7 @@
-type SlAfterHideEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlAfterHideEvent = CustomEvent<Record<PropertyKey, never>>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-after-hide': SlAfterHideEvent;
  }
 }
-
-export default SlAfterHideEvent;
--- a/src/events/sl-after-show.ts
+++ b/src/events/sl-after-show.ts
@@ -1,9 +1,7 @@
-type SlAfterShowEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlAfterShowEvent = CustomEvent<Record<PropertyKey, never>>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-after-show': SlAfterShowEvent;
  }
 }
-
-export default SlAfterShowEvent;
--- a/src/events/sl-blur.ts
+++ b/src/events/sl-blur.ts
@@ -1,9 +1,7 @@
-type SlBlurEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlBlurEvent = CustomEvent<Record<PropertyKey, never>>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-blur': SlBlurEvent;
  }
 }
-
-export default SlBlurEvent;
--- a/src/events/sl-cancel.ts
+++ b/src/events/sl-cancel.ts
@@ -1,9 +1,7 @@
-type SlCancelEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlCancelEvent = CustomEvent<Record<PropertyKey, never>>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-cancel': SlCancelEvent;
  }
 }
-
-export default SlCancelEvent;
--- a/src/events/sl-change.ts
+++ b/src/events/sl-change.ts
@@ -1,9 +1,7 @@
-type SlChangeEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlChangeEvent = CustomEvent<Record<PropertyKey, never>>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-change': SlChangeEvent;
  }
 }
-
-export default SlChangeEvent;
--- a/src/events/sl-clear.ts
+++ b/src/events/sl-clear.ts
@@ -1,9 +1,7 @@
-type SlClearEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlClearEvent = CustomEvent<Record<PropertyKey, never>>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-clear': SlClearEvent;
  }
 }
-
-export default SlClearEvent;
--- a/src/events/sl-close.ts
+++ b/src/events/sl-close.ts
@@ -1,9 +1,7 @@
-type SlCloseEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlCloseEvent = CustomEvent<Record<PropertyKey, never>>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-close': SlCloseEvent;
  }
 }
-
-export default SlCloseEvent;
--- a/src/events/sl-collapse.ts
+++ b/src/events/sl-collapse.ts
@@ -1,9 +1,7 @@
-type SlCollapseEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlCollapseEvent = CustomEvent<Record<PropertyKey, never>>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-collapse': SlCollapseEvent;
  }
 }
-
-export default SlCollapseEvent;
--- a/src/events/sl-copy.ts
+++ b/src/events/sl-copy.ts
@@ -1,9 +1,7 @@
-type SlCopyEvent = CustomEvent<{ value: string }>;
+export type SlCopyEvent = CustomEvent<{ value: string }>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-copy': SlCopyEvent;
  }
 }
-
-export default SlCopyEvent;
--- a/src/events/sl-error.ts
+++ b/src/events/sl-error.ts
@@ -1,9 +1,7 @@
-type SlErrorEvent = CustomEvent<{ status?: number }>;
+export type SlErrorEvent = CustomEvent<{ status?: number }>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-error': SlErrorEvent;
  }
 }
-
-export default SlErrorEvent;
--- a/src/events/sl-expand.ts
+++ b/src/events/sl-expand.ts
@@ -1,9 +1,7 @@
-type SlExpandEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlExpandEvent = CustomEvent<Record<PropertyKey, never>>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-expand': SlExpandEvent;
  }
 }
-
-export default SlExpandEvent;
--- a/src/events/sl-finish.ts
+++ b/src/events/sl-finish.ts
@@ -1,9 +1,7 @@
-type SlFinishEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlFinishEvent = CustomEvent<Record<PropertyKey, never>>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-finish': SlFinishEvent;
  }
 }
-
-export default SlFinishEvent;
--- a/src/events/sl-focus.ts
+++ b/src/events/sl-focus.ts
@@ -1,9 +1,7 @@
-type SlFocusEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlFocusEvent = CustomEvent<Record<PropertyKey, never>>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-focus': SlFocusEvent;
  }
 }
-
-export default SlFocusEvent;
--- a/src/events/sl-hide.ts
+++ b/src/events/sl-hide.ts
@@ -1,9 +1,7 @@
-type SlHideEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlHideEvent = CustomEvent<Record<PropertyKey, never>>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-hide': SlHideEvent;
  }
 }
-
-export default SlHideEvent;
--- a/src/events/sl-hover.ts
+++ b/src/events/sl-hover.ts
@@ -1,4 +1,4 @@
-type SlHoverEvent = CustomEvent<{
+export type SlHoverEvent = CustomEvent<{
  phase: 'start' | 'move' | 'end';
  value: number;
 }>;
@@ -8,5 +8,3 @@ declare global {
    'sl-hover': SlHoverEvent;
  }
 }
-
-export default SlHoverEvent;
--- a/src/events/sl-initial-focus.ts
+++ b/src/events/sl-initial-focus.ts
@@ -1,9 +1,7 @@
-type SlInitialFocusEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlInitialFocusEvent = CustomEvent<Record<PropertyKey, never>>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-initial-focus': SlInitialFocusEvent;
  }
 }
-
-export default SlInitialFocusEvent;
--- a/src/events/sl-input.ts
+++ b/src/events/sl-input.ts
@@ -1,9 +1,7 @@
-type SlInputEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlInputEvent = CustomEvent<Record<PropertyKey, never>>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-input': SlInputEvent;
  }
 }
-
-export default SlInputEvent;
--- a/src/events/sl-invalid.ts
+++ b/src/events/sl-invalid.ts
@@ -1,9 +1,7 @@
-type SlInvalidEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlInvalidEvent = CustomEvent<Record<PropertyKey, never>>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-invalid': SlInvalidEvent;
  }
 }
-
-export default SlInvalidEvent;
--- a/src/events/sl-lazy-change.ts
+++ b/src/events/sl-lazy-change.ts
@@ -1,9 +1,7 @@
-type SlLazyChangeEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlLazyChangeEvent = CustomEvent<Record<PropertyKey, never>>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-lazy-change': SlLazyChangeEvent;
  }
 }
-
-export default SlLazyChangeEvent;
--- a/src/events/sl-lazy-load.ts
+++ b/src/events/sl-lazy-load.ts
@@ -1,9 +1,7 @@
-type SlLazyLoadEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlLazyLoadEvent = CustomEvent<Record<PropertyKey, never>>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-lazy-load': SlLazyLoadEvent;
  }
 }
-
-export default SlLazyLoadEvent;
--- a/src/events/sl-load.ts
+++ b/src/events/sl-load.ts
@@ -1,9 +1,7 @@
-type SlLoadEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlLoadEvent = CustomEvent<Record<PropertyKey, never>>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-load': SlLoadEvent;
  }
 }
-
-export default SlLoadEvent;
--- a/src/events/sl-mutation.ts
+++ b/src/events/sl-mutation.ts
@@ -1,9 +1,7 @@
-type SlMutationEvent = CustomEvent<{ mutationList: MutationRecord[] }>;
+export type SlMutationEvent = CustomEvent<{ mutationList: MutationRecord[] }>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-mutation': SlMutationEvent;
  }
 }
-
-export default SlMutationEvent;
--- a/src/events/sl-remove.ts
+++ b/src/events/sl-remove.ts
@@ -1,9 +1,7 @@
-type SlRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlRemoveEvent = CustomEvent<Record<PropertyKey, never>>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-remove': SlRemoveEvent;
  }
 }
-
-export default SlRemoveEvent;
--- a/src/events/sl-reposition.ts
+++ b/src/events/sl-reposition.ts
@@ -1,9 +1,7 @@
-type SlRepositionEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlRepositionEvent = CustomEvent<Record<PropertyKey, never>>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-reposition': SlRepositionEvent;
  }
 }
-
-export default SlRepositionEvent;
--- a/src/events/sl-request-close.ts
+++ b/src/events/sl-request-close.ts
@@ -1,9 +1,7 @@
-type SlRequestCloseEvent = CustomEvent<{ source: 'close-button' | 'keyboard' | 'overlay' }>;
+export type SlRequestCloseEvent = CustomEvent<{ source: 'close-button' | 'keyboard' | 'overlay' }>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-request-close': SlRequestCloseEvent;
  }
 }
-
-export default SlRequestCloseEvent;
--- a/src/events/sl-resize.ts
+++ b/src/events/sl-resize.ts
@@ -1,9 +1,7 @@
-type SlResizeEvent = CustomEvent<{ entries: ResizeObserverEntry[] }>;
+export type SlResizeEvent = CustomEvent<{ entries: ResizeObserverEntry[] }>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-resize': SlResizeEvent;
  }
 }
-
-export default SlResizeEvent;
--- a/src/events/sl-select.ts
+++ b/src/events/sl-select.ts
@@ -1,11 +1,9 @@
 import type SlMenuItem from '../components/menu-item/menu-item';

-type SlSelectEvent = CustomEvent<{ item: SlMenuItem }>;
+export type SlSelectEvent = CustomEvent<{ item: SlMenuItem }>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-select': SlSelectEvent;
  }
 }
-
-export default SlSelectEvent;
--- a/src/events/sl-selection-change.ts
+++ b/src/events/sl-selection-change.ts
@@ -1,11 +1,9 @@
 import type SlTreeItem from '../components/tree-item/tree-item';

-type SlSelectionChangeEvent = CustomEvent<{ selection: SlTreeItem[] }>;
+export type SlSelectionChangeEvent = CustomEvent<{ selection: SlTreeItem[] }>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-selection-change': SlSelectionChangeEvent;
  }
 }
-
-export default SlSelectionChangeEvent;
--- a/src/events/sl-show.ts
+++ b/src/events/sl-show.ts
@@ -1,9 +1,7 @@
-type SlShowEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlShowEvent = CustomEvent<Record<PropertyKey, never>>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-show': SlShowEvent;
  }
 }
-
-export default SlShowEvent;
--- a/src/events/sl-slide-change.ts
+++ b/src/events/sl-slide-change.ts
@@ -1,11 +1,9 @@
 import type SlCarouselItem from '../components/carousel-item/carousel-item';

-type SlSlideChangeEvent = CustomEvent<{ index: number; slide: SlCarouselItem }>;
+export type SlSlideChangeEvent = CustomEvent<{ index: number; slide: SlCarouselItem }>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-slide-change': SlSlideChangeEvent;
  }
 }
-
-export default SlSlideChangeEvent;
--- a/src/events/sl-start.ts
+++ b/src/events/sl-start.ts
@@ -1,9 +1,7 @@
-type SlStartEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlStartEvent = CustomEvent<Record<PropertyKey, never>>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-start': SlStartEvent;
  }
 }
-
-export default SlStartEvent;
--- a/src/events/sl-tab-hide.ts
+++ b/src/events/sl-tab-hide.ts
@@ -1,9 +1,7 @@
-type SlTabHideEvent = CustomEvent<{ name: string }>;
+export type SlTabHideEvent = CustomEvent<{ name: string }>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-tab-hide': SlTabHideEvent;
  }
 }
-
-export default SlTabHideEvent;
--- a/src/events/sl-tab-show.ts
+++ b/src/events/sl-tab-show.ts
@@ -1,9 +1,7 @@
-type SlTabShowEvent = CustomEvent<{ name: string }>;
+export type SlTabShowEvent = CustomEvent<{ name: string }>;

 declare global {
  interface GlobalEventHandlersEventMap {
    'sl-tab-show': SlTabShowEvent;
  }
 }
-
-export default SlTabShowEvent;
--- a/src/internal/active-elements.ts
+++ b/src/internal/active-elements.ts
@@ -0,0 +1,22 @@
+/**
+ * Use a generator so we can iterate and possibly break early.
+ * @example
+ *   // to operate like a regular array. This kinda nullifies generator benefits, but worth knowing if you need the whole array.
+ *   const allActiveElements = [...activeElements()]
+ *
+ *   // Early return
+ *   for (const activeElement of activeElements()) {
+ *     if (<cond>) {
+ *       break; // Break the loop, dont need to iterate over the whole array or store an array in memory!
+ *     }
+ *   }
+ */
+export function* activeElements(activeElement: Element | null = document.activeElement): Generator<Element> {
+  if (activeElement === null || activeElement === undefined) return;
+
+  yield activeElement;
+
+  if ('shadowRoot' in activeElement && activeElement.shadowRoot && activeElement.shadowRoot.mode !== 'closed') {
+    yield* activeElements(activeElement.shadowRoot.activeElement);
+  }
+}
--- a/src/internal/modal.ts
+++ b/src/internal/modal.ts
@@ -1,3 +1,4 @@
+import { activeElements } from './active-elements.js';
 import { getTabbableElements } from './tabbable.js';

 let activeModals: HTMLElement[] = [];
@@ -55,6 +56,20 @@ export default class Modal {
    return getTabbableElements(this.element).findIndex(el => el === this.currentFocus);
  }

+  /**
+   * Checks if the `startElement` is already focused. This is important if the modal already
+   * has an existing focus prior to the first tab key.
+   */
+  startElementAlreadyFocused(startElement: HTMLElement) {
+    for (const activeElement of activeElements()) {
+      if (startElement === activeElement) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
  handleKeyDown = (event: KeyboardEvent) => {
    if (event.key !== 'Tab') return;

@@ -68,7 +83,10 @@ export default class Modal {

    const tabbableElements = getTabbableElements(this.element);
    const start = tabbableElements[0];
-    let focusIndex = this.currentFocusIndex;
+
+    // Sometimes we programmatically focus the first element in a modal.
+    // Lets make sure the start element isn't already focused.
+    let focusIndex = this.startElementAlreadyFocused(start) ? 0 : this.currentFocusIndex;

    if (focusIndex === -1) {
      this.currentFocus = start;
--- a/src/internal/tabbable.test.ts
+++ b/src/internal/tabbable.test.ts
@@ -0,0 +1,147 @@
+import { elementUpdated, expect, fixture } from '@open-wc/testing';
+
+import '../../dist/shoelace.js';
+import { activeElements } from './active-elements.js';
+import { html } from 'lit';
+import { sendKeys } from '@web/test-runner-commands';
+
+async function holdShiftKey(callback: () => Promise<void>) {
+  await sendKeys({ down: 'Shift' });
+  await callback();
+  await sendKeys({ up: 'Shift' });
+}
+
+const tabKey =
+  navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('HeadlessChrome') ? 'Alt+Tab' : 'Tab';
+
+// Simple helper to turn the activeElements generator into an array
+function activeElementsArray() {
+  return [...activeElements()];
+}
+
+function getDeepestActiveElement() {
+  return activeElementsArray().pop();
+}
+
+window.customElements.define(
+  'tab-test-1',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+      this.shadowRoot!.innerHTML = `
+      <sl-drawer>
+        <slot name="label" slot="label"></slot>
+
+        <slot></slot>
+
+        <slot name="footer" slot="footer"></slot>
+      </sl-drawer>
+    `;
+    }
+  }
+);
+
+it('Should allow tabbing to slotted elements', async () => {
+  const el = await fixture(html`
+    <tab-test-1>
+      <div slot="label">
+        <sl-button id="focus-1">Focus 1</sl-button>
+      </div>
+
+      <div>
+        <!-- Focus 2 lives as the close-button from <sl-drawer> -->
+        <sl-button id="focus-3">Focus 3</sl-button>
+        <button id="focus-4">Focus 4</sl-button>
+        <input id="focus-5" value="Focus 5">
+      </div>
+
+      <div slot="footer">
+        <div id="focus-6" tabindex="0">Focus 6</div>
+        <button tabindex="-1">No Focus</button>
+      </div>
+    </tab-test-1>
+  `);
+
+  const drawer = el.shadowRoot?.querySelector('sl-drawer');
+
+  if (drawer === null || drawer === undefined) throw Error('Could not find drawer inside of the test element');
+
+  await drawer.show();
+
+  await elementUpdated(drawer);
+
+  const focusZero = drawer.shadowRoot?.querySelector("[role='dialog']");
+
+  if (focusZero === null || focusZero === undefined) throw Error('Could not find dialog panel inside <sl-drawer>');
+
+  const focusOne = el.querySelector('#focus-1');
+  const focusTwo = drawer.shadowRoot?.querySelector("[part~='close-button']");
+
+  if (focusTwo === null || focusTwo === undefined) throw Error('Could not find close button inside <sl-drawer>');
+
+  const focusThree = el.querySelector('#focus-3');
+  const focusFour = el.querySelector('#focus-4');
+  const focusFive = el.querySelector('#focus-5');
+  const focusSix = el.querySelector('#focus-6');
+
+  // When we open drawer, we should be focused on the panel to start.
+  expect(getDeepestActiveElement()).to.equal(focusZero);
+
+  await sendKeys({ press: tabKey });
+  expect(activeElementsArray()).to.include(focusOne);
+
+  // When we hit the <Tab> key we should go to the "close button" on the drawer
+  await sendKeys({ press: tabKey });
+  expect(activeElementsArray()).to.include(focusTwo);
+
+  await sendKeys({ press: tabKey });
+  expect(activeElementsArray()).to.include(focusThree);
+
+  await sendKeys({ press: tabKey });
+  expect(activeElementsArray()).to.include(focusFour);
+
+  await sendKeys({ press: tabKey });
+  expect(activeElementsArray()).to.include(focusFive);
+
+  await sendKeys({ press: tabKey });
+  expect(activeElementsArray()).to.include(focusSix);
+
+  // Now we should loop back to #panel
+  await sendKeys({ press: tabKey });
+  expect(activeElementsArray()).to.include(focusZero);
+
+  // Now we should loop back to #panel
+  await sendKeys({ press: tabKey });
+  expect(activeElementsArray()).to.include(focusOne);
+
+  // Let's reset and try from starting point 0 and go backwards.
+  await holdShiftKey(async () => await sendKeys({ press: tabKey }));
+  expect(activeElementsArray()).to.include(focusZero);
+
+  await holdShiftKey(async () => await sendKeys({ press: tabKey }));
+  expect(activeElementsArray()).to.include(focusSix);
+
+  await holdShiftKey(async () => await sendKeys({ press: tabKey }));
+  expect(activeElementsArray()).to.include(focusFive);
+
+  await holdShiftKey(async () => await sendKeys({ press: tabKey }));
+  expect(activeElementsArray()).to.include(focusFour);
+
+  await holdShiftKey(async () => await sendKeys({ press: tabKey }));
+  expect(activeElementsArray()).to.include(focusThree);
+
+  await holdShiftKey(async () => await sendKeys({ press: tabKey }));
+  expect(activeElementsArray()).to.include(focusTwo);
+
+  await holdShiftKey(async () => await sendKeys({ press: tabKey }));
+  expect(activeElementsArray()).to.include(focusOne);
+
+  await holdShiftKey(async () => await sendKeys({ press: tabKey }));
+  expect(activeElementsArray()).to.include(focusZero);
+
+  await holdShiftKey(async () => await sendKeys({ press: tabKey }));
+  expect(activeElementsArray()).to.include(focusSix);
+});
--- a/src/internal/tabbable.ts
+++ b/src/internal/tabbable.ts
@@ -69,11 +69,32 @@ export function getTabbableBoundary(root: HTMLElement | ShadowRoot) {
 }

 export function getTabbableElements(root: HTMLElement | ShadowRoot) {
-  const allElements: HTMLElement[] = [];
+  const tabbableElements: HTMLElement[] = [];

  function walk(el: HTMLElement | ShadowRoot) {
    if (el instanceof Element) {
-      allElements.push(el);
+      // if the element has "inert" we can just no-op it.
+      if (el.hasAttribute('inert')) {
+        return;
+      }
+
+      if (!tabbableElements.includes(el) && isTabbable(el)) {
+        tabbableElements.push(el);
+      }
+
+      /**
+       * This looks funky. Basically a slot's children will always be picked up *if* they're within the `root` element.
+       * However, there is an edge case when, if the `root` is wrapped by another shadow DOM, it won't grab the children.
+       * This fixes that fun edge case.
+       */
+      const slotChildrenOutsideRootElement = (slotElement: HTMLSlotElement) =>
+        (slotElement.getRootNode({ composed: true }) as ShadowRoot | null)?.host !== root;
+
+      if (el instanceof HTMLSlotElement && slotChildrenOutsideRootElement(el)) {
+        el.assignedElements({ flatten: true }).forEach((assignedEl: HTMLElement) => {
+          walk(assignedEl);
+        });
+      }

      if (el.shadowRoot !== null && el.shadowRoot.mode === 'open') {
        walk(el.shadowRoot);
@@ -86,10 +107,14 @@ export function getTabbableElements(root: HTMLElement | ShadowRoot) {
  // Collect all elements including the root
  walk(root);

-  return allElements.filter(isTabbable).sort((a, b) => {
-    // Make sure we sort by tabindex.
-    const aTabindex = Number(a.getAttribute('tabindex')) || 0;
-    const bTabindex = Number(b.getAttribute('tabindex')) || 0;
-    return bTabindex - aTabindex;
-  });
+  return tabbableElements;
+
+  // Is this worth having? Most sorts will always add increased overhead. And positive tabindexes shouldn't really be used.
+  // So is it worth being right? Or fast?
+  // return tabbableElements.filter(isTabbable).sort((a, b) => {
+  //   // Make sure we sort by tabindex.
+  //   const aTabindex = Number(a.getAttribute('tabindex')) || 0;
+  //   const bTabindex = Number(b.getAttribute('tabindex')) || 0;
+  //   return bTabindex - aTabindex;
+  // });
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -28,7 +28,8 @@
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "useUnknownInCatchVariables": true,
-    "baseUrl": ".",
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
    "types": [
      "mocha",
      "user-agent-data-types"
--- a/tsconfig.prod.json
+++ b/tsconfig.prod.json
@@ -1,7 +1,6 @@
 {
  "extends": "./tsconfig",
  "compilerOptions": {
-    "baseUrl": ".",
    "rootDir": "./src"
  },
  "include": ["src"],
Author	SHA1	Message	Date
Cory LaViska	5e6e0368a4	Merge branch 'next' into current	2023-08-23 12:58:35 -04:00
Cory LaViska	7e4d4c3c98	2.8.0	2023-08-23 12:55:35 -04:00
Cory LaViska	b5ef3191b7	update version	2023-08-23 12:53:47 -04:00
Konnor Rogers	f30481e229	remove unused code path (#1539 )	2023-08-23 12:52:42 -04:00
Konnor Rogers	ae010c333b	fix: check `<slot>` elements for assignedElements to allow wrapping focus-trapped elements (#1537 ) * fix: internal logic for tabbable checks slotted elements * prettier * add better note for generators * prettier * fix tests * prettier * prettier * fix tabbable test for safari * prettier * Update src/internal/tabbable.ts Co-authored-by: Cory LaViska <cory@abeautifulsite.net> * Update src/internal/modal.ts Co-authored-by: Cory LaViska <cory@abeautifulsite.net> * Update src/internal/tabbable.ts Co-authored-by: Cory LaViska <cory@abeautifulsite.net> --------- Co-authored-by: Cory LaViska <cory@abeautifulsite.net>	2023-08-23 11:43:48 -04:00
Konnor Rogers	43d1f9ee7a	fix: use verbatimModuleSyntax and isolatedModules (#1534 ) * feat: use verbatimModuleSyntax and isolatedModules * prettier * remove newline * prettier	2023-08-23 10:34:40 -04:00
Cory LaViska	ec17e8736d	fix component links; closes #1538	2023-08-23 09:46:23 -04:00
Cory LaViska	44b27e791e	fix plop template	2023-08-23 09:29:24 -04:00
Cory LaViska	02385027db	fix copy button focus	2023-08-22 17:10:01 -04:00
Cory LaViska	b311072d9b	use <sl-copy-button> (#1535 )	2023-08-22 17:01:00 -04:00
Cory LaViska	87ac077b0a	fix empty attributes in properties table (#1536 )	2023-08-22 16:59:08 -04:00
Konnor Rogers	87837df35c	remove extra react component wrapper, upgrade to v2 of @lit-labs/react (#1531 ) * remove extra react wrapper, upgrade to v2 of @lit-labs/react, call define in module. * add changelog entry * prettier	2023-08-22 11:26:54 -04:00
Konnor Rogers	5d72bbd162	remove baseUrl from tsconfig for better dev experience (#1530 )	2023-08-22 10:32:15 -04:00
Cory LaViska	a4fc1c5b44	Submenus (#1527 ) * [RFC] Proof-of-concept commit for submenu support This is a Request For Comments to seek directional guidance towards implementing the submenu slot of menu-item. Includes: - SubmenuController to manage event listeners on menu-item. - Example usage in menu-item documentation. - Trivial tests to check rendering. Outstanding questions include: - Accessibility concerns. E.g. where to handle 'ArrowRight', 'ArrowLeft'? - Should selection of menu-item denoting submenu be possible or customizable? - How to parameterize contained popup? - Implementation concerns: - Use of ref / id - delegation of some rendering to the controller - What to test Related to [#620](https://github.com/shoelace-style/shoelace/issues/620). * Update submenu-controller.ts Removed extraneous `console.log()`. * PoC working of ArrowRight to focus on submenu. * Revert "PoC working of ArrowRight to focus on submenu." (Didn't mean to publish this.) This reverts commit `be04e9a221`. * [WIP] Submenu WIP continues. - Submenus now close on change-of-focus, not a timeout. - Keyboard navigation support added. - Skidding fix for better alignment. - Submenu documentation moved to Menu page. - Tests for accessibility, right and left arrow keys. * Cleanup: Removed dead code and dead code comments. * style: Eslint warnings and errors fixed. npm run verify now passes. * fix: 2 changes to menu / submenu on-click behavior: 1. Close submenu on click explicitly, so this occurs even if the menu is not inside of an sl-dropdown. 2. In menu, ignore clicks that do not explicitly target a menu-item. Clicks that were on (e.g. a menu-border) were emitting select events. * fix: Prevent menu's extraneous Enter / space key propagation. Menu's handleKeyDown calls item.click (to emit the selection). Propagating the keyboard event on Enter / space would the cause re-entry into a submenu, so prevent the needless propagation. * Submenu tweaks ... - 100 ms delay when opening submenus on mouseover - Shadows added - Distance added to popup to have submenus overlap menu slightly. * polish up submenu stuff * stay highlighted when submenu is open * update changelog * resolve feedback --------- Co-authored-by: Bryce Moore <bryce.moore@gmail.com>	2023-08-21 17:26:41 -04:00
Cory LaViska	409ac96ddf	Merge branch 'next' into current	2023-08-11 13:27:07 -04:00
Cory LaViska	1bf09f20aa	Merge branch 'next' into current	2023-07-31 15:49:04 -04:00
Cory LaViska	ba642a0886	Merge branch 'next' into current	2023-06-26 12:26:48 -04:00
Cory LaViska	c37c71d8fd	Merge branch 'next' into current	2023-06-22 11:25:55 -04:00
Cory LaViska	05b1212657	Merge branch 'next' into current	2023-06-20 15:31:04 -04:00
Cory LaViska	62b4525321	Merge branch 'next' into current	2023-04-14 13:01:22 -04:00
Cory LaViska	44628889fe	Merge branch 'next' into current	2023-03-09 16:23:15 -05:00
Cory LaViska	3168a1acf8	Merge branch 'next' into current	2023-02-28 17:11:30 -05:00
Cory LaViska	17160e3bed	Merge branch 'next' into current	2023-02-28 17:08:01 -05:00
Cory LaViska	fe2e2d6df5	Merge branch 'next' into current	2023-02-16 16:42:29 -05:00
Cory LaViska	6e2856db5f	Revert "fix play/pause buttons; #1147 " This reverts commit `6d1eb71d8e`.	2023-01-25 16:51:32 -05:00
Cory LaViska	6d1eb71d8e	fix play/pause buttons; #1147	2023-01-25 16:51:02 -05:00
Cory LaViska	a334e53a5d	Merge branch 'next' into current	2023-01-24 11:48:41 -05:00
Cory LaViska	0d50749ec8	Merge branch 'next' into current	2023-01-05 15:44:58 -05:00
Cory LaViska	316d8b52b6	Merge branch 'next' into current	2022-12-14 09:31:01 -05:00
Cory LaViska	b7b2d9265a	Merge branch 'next' into current	2022-12-08 08:53:20 -05:00
Cory LaViska	b797803a2b	Merge branch 'next' into current	2022-12-08 08:51:59 -05:00
Cory LaViska	bcb4f2267b	Revert "Update fa.ts (#1053 )" (#1058 ) This reverts commit `c951661b58`.	2022-12-08 08:50:10 -05:00
Hadi F	c951661b58	Update fa.ts (#1053 ) Improved translations by using original Farsi words rather than English ones	2022-12-08 08:45:07 -05:00