2.0.0-beta.60

.gitignore

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

custom-elements-manifest.config.js

@@ -1,5 +1,6 @@
 import fs from 'fs';
 import commentParser from 'comment-parser';
+import pascalCase from 'pascal-case';
 
 const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
 const { name, description, version, author, homepage, license } = packageData;
@@ -81,6 +82,23 @@ export default {
             });
         }
       }
+    },
+
+    {
+      name: 'shoelace-react-event-names',
+      analyzePhase({ ts, node, moduleDoc, context }) {
+        switch (node.kind) {
+          case ts.SyntaxKind.ClassDeclaration:
+            const className = node.name.getText();
+            const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
+
+            if (classDoc?.events) {
+              classDoc.events.map(event => {
+                event.reactName = `on${pascalCase(event.name)}`;
+              });
+            }
+        }
+      }
     }
   ]
 };

docs/_sidebar.md

@@ -5,6 +5,11 @@
   - [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)
@@ -21,7 +26,6 @@
   - [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,7 +61,6 @@
   border: solid 1px rgb(var(--sl-color-neutral-200));
   border-bottom: none;
   border-radius: 0 !important;
-  margin: 0;
   display: none;
 }
 
@@ -69,6 +68,10 @@
   display: block;
 }
 
+.code-block__source pre {
+  margin: 0;
+}
+
 .code-block__buttons {
   position: relative;
   border: solid 1px rgb(var(--sl-color-neutral-200));
@@ -97,6 +100,19 @@
   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;
@@ -201,3 +217,23 @@
   background-color: rgb(var(--sl-color-neutral-600));
   transform: scale(0.92);
 }
+
+/* We can apply data-flavor="html|react" to any element on the page to toggle it when the user's flavor changes */
+body.flavor-html [data-flavor]:not([data-flavor='html']) {
+  display: none;
+}
+
+body.flavor-react [data-flavor]:not([data-flavor='react']) {
+  display: none;
+}
+
+/*
+.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 {
+  display: block;
+}
+*/

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

@@ -1,10 +1,40 @@
 (() => {
+  const reactVersion = '17.0.2';
+  let flavor = getFlavor();
   let count = 1;
 
+  // Sync flavor UI on page load
+  setFlavor(getFlavor());
+
   if (!window.$docsify) {
     throw new Error('Docsify must be loaded before installing this plugin.');
   }
 
+  function convertModuleLinks(html) {
+    const version = sessionStorage.getItem('sl-version');
+
+    html = html
+      .replace(/@shoelace-style\/shoelace/g, `https://cdn.skypack.dev/@shoelace-style/shoelace@${version}`)
+      .replace(/from 'react'/g, `from 'https://cdn.skypack.dev/react@${reactVersion}'`)
+      .replace(/from "react"/g, `from "https://cdn.skypack.dev/react@${reactVersion}"`);
+
+    return html;
+  }
+
+  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');
 
@@ -18,6 +48,19 @@
     script.parentNode.replaceChild(newScript, script);
   }
 
+  function getFlavor() {
+    return localStorage.getItem('flavor') || 'html';
+  }
+
+  function setFlavor(newFlavor) {
+    flavor = ['html', 'react'].includes(newFlavor) ? newFlavor : 'html';
+    localStorage.setItem('flavor', flavor);
+
+    // Set the flavor class on the body
+    document.body.classList.toggle('flavor-html', flavor === 'html');
+    document.body.classList.toggle('flavor-react', flavor === 'react');
+  }
+
   function wrap(el, wrapper) {
     el.parentNode.insertBefore(wrapper, el);
     wrapper.appendChild(el);
@@ -28,31 +71,61 @@
     hook.afterEach(function (html, next) {
       const domParser = new DOMParser();
       const doc = domParser.parseFromString(html, 'text/html');
-      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"
+
+      const htmlButton = `
+        <button
+          type="button"
+          title="Show HTML code"
+          class="code-block__button code-block__button--html ${flavor === 'html' ? 'code-block__button--selected' : ''}"
         >
-          <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>
-    `;
+          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>
+      `;
 
       [...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);
 
@@ -65,11 +138,25 @@
                 </div>
               </div>
 
-              ${pre.outerHTML}
+              <div class="code-block__source code-block__source--html" ${hasReact ? 'data-flavor="html"' : ''}>
+                ${pre.outerHTML}
+              </div>
+
+              ${
+                hasReact
+                  ? `
+                <div class="code-block__source code-block__source--react" data-flavor="react">
+                  ${reactPre.outerHTML}
+                </div>
+              `
+                  : ''
+              }
 
               <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
+                  Source
                   <svg
                     viewBox="0 0 24 24"
                     fill="none"
@@ -88,11 +175,15 @@
           `;
 
           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);
     });
 
@@ -139,49 +230,28 @@
     });
   });
 
-  // Open in CodePen
+  // Toggle source mode
   document.addEventListener('click', event => {
     const button = event.target.closest('button');
+    const codeBlock = button?.closest('.code-block');
 
-    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();
+    if (button?.classList.contains('code-block__button--html')) {
+      setFlavor('html');
+    } else if (button?.classList.contains('code-block__button--react')) {
+      setFlavor('react');
+    } else {
+      return;
     }
+
+    // Update flavor buttons
+    [...document.querySelectorAll('.code-block')].map(codeBlock => {
+      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 and collapse code blocks
@@ -205,4 +275,87 @@
       });
     }
   });
+
+  // Open in CodePen
+  document.addEventListener('click', event => {
+    const button = event.target.closest('button');
+    const version = sessionStorage.getItem('sl-version');
+
+    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 from 'https://cdn.skypack.dev/react@${reactVersion}';\n` +
+          `import ReactDOM from 'https://cdn.skypack.dev/react-dom@${reactVersion}';\n` +
+          `import { setBasePath } from 'https://cdn.skypack.dev/@shoelace-style/shoelace@${version}/dist/utilities/base-path';\n` +
+          '\n' +
+          `// Set the base path for Shoelace assets\n` +
+          `setBasePath('https://cdn.skypack.dev/@shoelace-style/shoelace@${version}/dist/')\n` +
+          '\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' +
+        '  padding: 1rem;\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

@@ -67,7 +67,8 @@
     table.innerHTML = `
       <thead>
         <tr>
-          <th>Name</th>
+          <th data-flavor="html">Name</th>
+          <th data-flavor="react">React Event</th>
           <th>Description</th>
           <th>Event Detail</th>
         </tr>
@@ -77,7 +78,8 @@
           .map(
             event => `
               <tr>
-                <td><code class="nowrap">${escapeHtml(event.name)}</code></td>
+                <td data-flavor="html"><code class="nowrap">${escapeHtml(event.name)}</code></td>
+                <td data-flavor="react"><code class="nowrap">${escapeHtml(event.reactName)}</code></td>
                 <td>${escapeHtml(event.description)}</td>
                 <td>${event.type?.text ? `<code>${escapeHtml(event.type?.text)}` : '-'}</td>
               </tr>
@@ -392,6 +394,41 @@
           return prop.kind === 'field' && prop.privacy !== 'private';
         });
 
+        if (component.path) {
+          /* prettier-ignore */
+          result += `
+            ## Importing
+
+            <sl-tab-group>
+            <sl-tab slot="nav" panel="cdn">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
@@ -408,8 +445,20 @@
 
         if (methods?.length) {
           result += `
-          ## Methods
-          ${createMethodsTable(methods)}
+            ## Methods
+
+            <p data-flavor="html">
+              Methods can be called by obtaining a reference to the element and calling
+              <code>el.methodName()</code>.
+            </p>
+
+
+            <p data-flavor="react">
+              Methods can be called by obtaining a <code>ref</code> to the element and calling
+              <code>ref.current.methodName()</code>.
+            </p>
+
+            ${createMethodsTable(methods)}
           `;
         }
 
@@ -453,41 +502,6 @@
           `;
         }
 
-        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,7 +197,6 @@ strong {
 
 .markdown-section {
   max-width: 860px;
-  overflow-anchor: none;
 }
 
 .anchor span {

docs/components/alert.md

@@ -11,6 +11,17 @@ Alerts are used to display important messages either inline or as toast notifica
 </sl-alert>
 ```
 
+```jsx react
+import { SlAlert, SlIcon } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlAlert open>
+    <SlIcon slot="icon" name="info-circle" />
+    This is a standard alert. You can customize its content and even the icon.
+  </SlAlert>
+);
+```
+
 ?> Alerts will not be visible if the `open` attribute is not present.
 
 ## Examples
@@ -59,6 +70,52 @@ Set the `type` attribute to change the alert's type.
 </sl-alert>
 ```
 
+```jsx react
+import { SlAlert, SlIcon } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlAlert type="primary" open>
+      <SlIcon slot="icon" name="info-circle" />
+      <strong>This is super informative</strong><br />
+      You can tell by how pretty the alert is.
+    </SlAlert>
+
+    <br />
+
+    <SlAlert type="success" open>
+      <SlIcon slot="icon" name="check2-circle" />
+      <strong>Your changes have been saved</strong><br />
+      You can safely exit the app now.
+    </SlAlert>
+
+    <br />
+
+    <SlAlert type="neutral" open>
+      <SlIcon slot="icon" name="gear" />
+      <strong>Your settings have been updated</strong><br />
+      Settings will take affect on next login.
+    </SlAlert>
+
+    <br />
+
+    <SlAlert type="warning" open>
+      <SlIcon slot="icon" name="exclamation-triangle" />
+      <strong>Your session has ended</strong><br />
+      Please login again to continue.
+    </SlAlert>
+
+    <br />
+
+    <SlAlert type="danger" open>
+      <SlIcon slot="icon" name="exclamation-octagon" />
+        <strong>Your account has been deleted</strong><br />
+        We're very sorry to see you go!
+    </SlAlert>
+  </>
+);
+```
+
 ### Closable
 
 Add the `closable` attribute to show a close button that will hide the alert.
@@ -77,6 +134,31 @@ Add the `closable` attribute to show a close button that will hide the alert.
 </script>
 ```
 
+```jsx react
+import { useState } from 'react';
+import { SlAlert, SlIcon } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const [open, setOpen] = useState(true);
+
+  function handleHide() {
+    setOpen(false);
+    setTimeout(() => setOpen(true), 2000);
+  }
+
+  return (
+    <SlAlert 
+      open={open}
+      closable
+      onSlAfterHide={handleHide}
+    >
+      <SlIcon slot="icon" name="info-circle" />
+      You can close this alert any time!
+    </SlAlert>
+  );
+};
+```
+
 ### Without Icons
 
 Icons are optional. Simply omit the `icon` slot if you don't want them.
@@ -87,6 +169,16 @@ Icons are optional. Simply omit the `icon` slot if you don't want them.
 </sl-alert>
 ```
 
+```jsx react
+import { SlAlert } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlAlert type="primary" open>
+    Nothing fancy here, just a simple alert.
+  </SlAlert>
+);
+```
+
 ### Duration
 
 Set the `duration` attribute to automatically hide an alert after a period of time. This is useful for alerts that don't require acknowledgement.
@@ -116,6 +208,46 @@ Set the `duration` attribute to automatically hide an alert after a period of ti
 </style>
 ```
 
+```jsx react
+import { useState } from 'react';
+import {
+  SlAlert,
+  SlButton,
+  SlIcon
+} from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .alert-duration sl-alert {
+    margin-top: var(--sl-spacing-medium);
+  }
+`;
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <div className="alert-duration">
+        <SlButton type="primary" onClick={() => setOpen(true)}>Show Alert</SlButton>
+
+        <SlAlert 
+          type="primary" 
+          duration="3000" 
+          open={open} 
+          closable 
+          onSlAfterHide={() => setOpen(false)}
+        >
+          <SlIcon slot="icon" name="info-circle" />
+          This alert will automatically hide itself after three seconds, unless you interact with it.
+        </SlAlert>
+      </div>
+
+      <style>{css}</style>
+    </>
+  );
+};
+```
+
 ### Toast Notifications
 
 To display an alert as a toast notification, or "toast", create the alert and call its `toast()` method. This will move the alert out of its position in the DOM and into [the toast stack](#the-toast-stack) where it will be shown. Once dismissed, it will be removed from the DOM completely. To reuse a toast, store a reference to it and call `toast()` again later on.
@@ -173,6 +305,81 @@ You should always use the `closable` attribute so users can dismiss the notifica
 </script>
 ```
 
+```jsx react
+import { useRef } from 'react';
+import {
+  SlAlert,
+  SlButton,
+  SlIcon
+} from '@shoelace-style/shoelace/dist/react';
+
+function showToast(alert) {
+  alert.toast();
+}
+
+const App = () => {
+  const primary = useRef(null);
+  const success = useRef(null);
+  const neutral = useRef(null);
+  const warning = useRef(null);
+  const danger = useRef(null);
+
+  return (
+    <>
+      <SlButton type="primary" onClick={() => primary.current.toast()}>
+        Primary
+      </SlButton>
+
+      <SlButton type="success" onClick={() => success.current.toast()}>
+        Success
+      </SlButton>
+
+      <SlButton type="neutral" onClick={() => neutral.current.toast()}>
+        Neutral
+      </SlButton>
+
+      <SlButton type="warning" onClick={() => warning.current.toast()}>
+        Warning
+      </SlButton>
+
+      <SlButton type="danger" onClick={() => danger.current.toast()}>
+        Danger
+      </SlButton>
+
+      <SlAlert ref={primary} type="primary" duration="3000" closable>
+        <SlIcon slot="icon" name="info-circle" />
+        <strong>This is super informative</strong><br />
+        You can tell by how pretty the alert is.
+      </SlAlert>
+
+      <SlAlert ref={success} type="success" duration="3000" closable>
+        <SlIcon slot="icon" name="check2-circle" />
+        <strong>Your changes have been saved</strong><br />
+        You can safely exit the app now.
+      </SlAlert>
+
+      <SlAlert ref={neutral} type="neutral" duration="3000" closable>
+        <SlIcon slot="icon" name="gear" />
+        <strong>Your settings have been updated</strong><br />
+        Settings will take affect on next login.
+      </SlAlert>
+
+      <SlAlert ref={warning} type="warning" duration="3000" closable>
+        <SlIcon slot="icon" name="exclamation-triangle" />
+        <strong>Your session has ended</strong><br />
+        Please login again to continue.
+      </SlAlert>
+
+      <SlAlert ref={danger} type="danger" duration="3000" closable>
+        <SlIcon slot="icon" name="exclamation-octagon" />
+        <strong>Your account has been deleted</strong><br />
+        We're very sorry to see you go!
+      </SlAlert>
+    </>
+  );
+};
+```
+
 ### Creating Toasts Imperatively
 
 For convenience, you can create a utility that emits toast notifications with a function call rather than composing them in your HTML. To do this, generate the alert with JavaScript, append it to the body, and call the `toast()` method as shown in the example below.

docs/components/animated-image.md

@@ -6,11 +6,24 @@ A component for displaying animated GIFs and WEBPs that play and pause on intera
 
 ```html preview
 <sl-animated-image 
-  src="/assets/images/walk.gif" 
+  src="https://shoelace.style/assets/images/walk.gif" 
   alt="Animation of untied shoes walking on pavement"
 ></sl-animated-image>
 ```
 
+```jsx react
+import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlAnimatedImage
+    src="https://shoelace.style/assets/images/walk.gif" 
+    alt="Animation of untied shoes walking on pavement"
+  />
+);
+```
+
+?> This component uses `<canvas>` to draw freeze frames, so images are subject to [cross-origin restrictions](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image).
+
 ## Examples
 
 ### WEBP Images
@@ -19,31 +32,54 @@ Both GIF and WEBP images are supported.
 
 ```html preview
 <sl-animated-image 
-  src="/assets/images/tie.webp" 
+  src="https://shoelace.style/assets/images/tie.webp" 
   alt="Animation of a shoe being tied"
 ></sl-animated-image>
 ```
 
+```jsx react
+import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlAnimatedImage
+    src="https://shoelace.style/assets/images/tie.webp" 
+    alt="Animation of a shoe being tied"
+  />
+);
+```
+
 ### Setting a Width and Height
 
 To set a custom size, apply a width and/or height to the host element.
 
 ```html preview
 <sl-animated-image 
-  src="/assets/images/walk.gif" 
+  src="https://shoelace.style/assets/images/walk.gif" 
   alt="Animation of untied shoes walking on pavement"
   style="width: 150px; height: 200px;"
 >
 </sl-animated-image>
 ```
 
+```jsx react
+import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlAnimatedImage
+    src="https://shoelace.style/assets/images/walk.gif" 
+    alt="Animation of untied shoes walking on pavement"
+    style={{ width: '150px', height: '200px' }}
+  />
+);
+```
+
 ### Customizing the Control Box
 
 You can change the appearance and location of the control box by targeting the `control-box` part in your styles.
 
 ```html preview
 <sl-animated-image 
-  src="/assets/images/walk.gif" 
+  src="https://shoelace.style/assets/images/walk.gif" 
   alt="Animation of untied shoes walking on pavement"
   class="animated-image-custom-control-box"
 ></sl-animated-image>
@@ -60,4 +96,31 @@ You can change the appearance and location of the control box by targeting the `
 </style>
 ```
 
+```jsx react
+import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .animated-image-custom-control-box::part(control-box) {
+    top: auto;
+    right: auto;
+    bottom: 1rem;
+    left: 1rem;
+    background-color: deeppink;
+    color: white;
+  }
+`;
+
+const App = () => (
+  <>
+    <SlAnimatedImage
+      className="animated-image-custom-control-box"
+      src="https://shoelace.style/assets/images/walk.gif" 
+      alt="Animation of untied shoes walking on pavement"
+    />
+
+    <style>{css}</style>
+  </>
+);
+```
+
 [component-metadata:sl-animated-image]

docs/components/avatar.md

@@ -8,6 +8,14 @@ Avatars are used to represent a person or object.
 <sl-avatar></sl-avatar>
 ```
 
+```jsx react
+import { SlAvatar } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlAvatar>Button</SlAvatar>
+);
+```
+
 ## Examples
 
 ### Images
@@ -21,6 +29,17 @@ To use an image for the avatar, set the `image` and `alt` attributes. This will
 ></sl-avatar>
 ```
 
+```jsx react
+import { SlAvatar } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlAvatar
+    image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
+    alt="Gray tabby kitten looking down"
+  />
+);
+```
+
 ### Initials
 
 When you don't have an image to use, you can set the `initials` attribute to show something more personalized than an icon.
@@ -29,6 +48,14 @@ When you don't have an image to use, you can set the `initials` attribute to sho
 <sl-avatar initials="SL"></sl-avatar>
 ```
 
+```jsx react
+import { SlAvatar } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlAvatar initials="SL" />
+);
+```
+
 ### Custom Icons
 
 When no image or initials are set, an icon will be shown. The default avatar shows a generic "user" icon, but you can customize this with the `icon` slot.
@@ -47,18 +74,47 @@ When no image or initials are set, an icon will be shown. The default avatar sho
 </sl-avatar>
 ```
 
+```jsx react
+import { SlAvatar, SlIcon } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlAvatar>
+      <SlIcon slot="icon" name="image" />
+    </SlAvatar>
+
+    <SlAvatar>
+      <SlIcon slot="icon" name="archive" />
+    </SlAvatar>
+
+    <SlAvatar>
+      <SlIcon slot="icon" name="briefcase" />
+    </SlAvatar>
+  </>
+);
+```
+
 ### Shapes
 
 Avatars can be shaped using the `shape` attribute.
 
 ```html preview
 <sl-avatar shape="square"></sl-avatar>
-
 <sl-avatar shape="rounded"></sl-avatar>
-
 <sl-avatar shape="circle"></sl-avatar>
 ```
 
+```jsx react
+import { SlAvatar, SlIcon } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlAvatar shape="square" />
+    <SlAvatar shape="rounded" />
+    <SlAvatar shape="circle" />
+  </>
+);
+```
 
 ### Avatar Groups
 
@@ -83,4 +139,31 @@ You can group avatars with a few lines of CSS.
 </style>
 ```
 
+```jsx react
+import { SlAvatar, SlIcon } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .avatar-group sl-avatar:not(:first-of-type) {
+    margin-left: -1rem;
+  }
+
+  .avatar-group sl-avatar::part(base) {
+    border: solid 2px rgb(var(--sl-color-neutral-0));
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="avatar-group">
+      <SlAvatar image="https://images.unsplash.com/photo-1490150028299-bf57d78394e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&q=80&crop=right" />
+      <SlAvatar image="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80" />
+      <SlAvatar image="https://images.unsplash.com/photo-1456439663599-95b042d50252?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80" />
+      <SlAvatar image="https://images.unsplash.com/flagged/photo-1554078875-e37cb8b0e27d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=top&q=80" />
+    </div>
+
+    <style>{css}</style>    
+  </>
+);
+```
+
 [component-metadata:sl-avatar]

docs/components/badge.md

@@ -8,6 +8,14 @@ Badges are used to draw attention and display statuses or counts.
 <sl-badge>Badge</sl-badge>
 ```
 
+```jsx react
+import { SlBadge } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlBadge>Badge</SlBadge>
+);
+```
+
 ## Examples
 
 ### Types
@@ -22,6 +30,20 @@ Set the `type` attribute to change the badge's type.
 <sl-badge type="danger">Danger</sl-badge>
 ```
 
+```jsx react
+import { SlBadge } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlBadge type="primary">Primary</SlBadge>
+    <SlBadge type="success">Success</SlBadge>
+    <SlBadge type="neutral">Neutral</SlBadge>
+    <SlBadge type="warning">Warning</SlBadge>
+    <SlBadge type="danger">Danger</SlBadge>  
+  </>
+);
+```
+
 ### Pill Badges
 
 Use the `pill` attribute to give badges rounded edges.
@@ -34,6 +56,20 @@ Use the `pill` attribute to give badges rounded edges.
 <sl-badge type="danger" pill>Danger</sl-badge>
 ```
 
+```jsx react
+import { SlBadge } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlBadge type="primary" pill>Primary</SlBadge>
+    <SlBadge type="success" pill>Success</SlBadge>
+    <SlBadge type="neutral" pill>Neutral</SlBadge>
+    <SlBadge type="warning" pill>Warning</SlBadge>
+    <SlBadge type="danger" pill>Danger</SlBadge>  
+  </>
+);
+```
+
 ### Pulsating Badges
 
 Use the `pulse` attribute to draw attention to the badge with a subtle animation.
@@ -54,6 +90,30 @@ Use the `pulse` attribute to draw attention to the badge with a subtle animation
 </style>
 ```
 
+```jsx react
+import { SlBadge } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .badge-pulse sl-badge:not(:last-of-type) {
+    margin-right: 1rem;
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="badge-pulse">
+      <SlBadge type="primary" pill pulse>1</SlBadge>
+      <SlBadge type="success" pill pulse>1</SlBadge>
+      <SlBadge type="neutral" pill pulse>1</SlBadge>
+      <SlBadge type="warning" pill pulse>1</SlBadge>
+      <SlBadge type="danger" pill pulse>1</SlBadge>
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+```
+
 ### With Buttons
 
 One of the most common use cases for badges is attaching them to buttons. To make this easier, badges will be automatically positioned at the top-right when they're a child of a button.
@@ -75,6 +135,29 @@ One of the most common use cases for badges is attaching them to buttons. To mak
 </sl-button>
 ```
 
+```jsx react
+import { SlBadge, SlButton } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlButton>
+      Requests
+      <SlBadge pill>30</SlBadge>
+    </SlButton>
+
+    <SlButton style={{ marginLeft: '1rem' }}>
+      Warnings
+      <SlBadge type="warning" pill>8</SlBadge>
+    </SlButton>
+
+    <SlButton style={{ marginLeft: '1rem' }}>
+      Errors
+      <SlBadge type="danger" pill>6</SlBadge>
+    </SlButton>
+  </>
+);
+```
+
 ### With Menu Items
 
 When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly.
@@ -87,4 +170,22 @@ When including badges in menu items, use the `suffix` slot to make sure they're
 </sl-menu>
 ```
 
+```jsx react
+import { SlBadge, SlButton, SlMenu, SlMenuItem, SlMenuLabel } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlMenu 
+    style={{
+      maxWidth: '240px',
+      border: 'solid 1px rgb(var(--sl-panel-border-color))',
+      borderRadius: 'var(--sl-border-radius-medium)'
+    }}
+  >
+    <SlMenuLabel>Messages</SlMenuLabel>
+    <SlMenuItem>Comments <SlBadge slot="suffix" type="neutral" pill>4</SlBadge></SlMenuItem>
+    <SlMenuItem>Replies <SlBadge slot="suffix" type="neutral" pill>12</SlBadge></SlMenuItem>
+  </SlMenu>
+);
+```
+
 [component-metadata:sl-badge]

docs/components/breadcrumb-item.md

@@ -15,6 +15,21 @@ Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to repres
 </sl-breadcrumb>
 ```
 
+```jsx react
+import { SlBreadcrumb, SlBreadcrumbItem, SlIcon } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlBreadcrumb>
+    <SlBreadcrumbItem>
+      <SlIcon slot="prefix" name="house"></SlIcon>
+      Home
+    </SlBreadcrumbItem>
+    <SlBreadcrumbItem>Clothing</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Shirts</SlBreadcrumbItem>
+  </SlBreadcrumb>
+);
+```
+
 ?> Additional demonstrations can be found in the [breadcrumb examples](/components/breadcrumb).
 
 [component-metadata:sl-breadcrumb-item]

docs/components/breadcrumb.md

@@ -15,6 +15,19 @@ Breadcrumbs are usually placed before a page's main content with the current pag
 </sl-breadcrumb>
 ```
 
+```jsx react
+import { SlBreadcrumb, SlBreadcrumbItem } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlBreadcrumb>
+    <SlBreadcrumbItem>Catalog</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Clothing</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Women's</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Shirts &amp; Tops</SlBreadcrumbItem>
+  </SlBreadcrumb>
+);
+```
+
 ## Examples
 
 ### Breadcrumb Links
@@ -43,6 +56,30 @@ For websites, you'll probably want to use links instead. You can make any breadc
 </sl-breadcrumb>
 ```
 
+```jsx react
+import { SlBreadcrumb, SlBreadcrumbItem } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlBreadcrumb>
+    <SlBreadcrumbItem href="https://example.com/home">
+      Homepage
+    </SlBreadcrumbItem>
+
+    <SlBreadcrumbItem href="https://example.com/home/services">
+      Our Services
+    </SlBreadcrumbItem>
+
+    <SlBreadcrumbItem href="https://example.com/home/services/digital">
+      Digital Media
+    </SlBreadcrumbItem>
+
+    <SlBreadcrumbItem href="https://example.com/home/services/digital/web-design">
+      Web Design
+    </SlBreadcrumbItem>
+  </SlBreadcrumb>
+);
+```
+
 ### Custom Separators
 
 Use the `separator` slot to change the separator that goes between breadcrumb items. Icons work well, but you can also use text or an image.
@@ -74,6 +111,40 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
 </sl-breadcrumb>
 ```
 
+```jsx react
+import '@shoelace-style/shoelace/dist/components/icon/icon.js';
+import { SlBreadcrumb, SlBreadcrumbItem, SlIcon } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlBreadcrumb>
+      <sl-icon name="dot" slot="separator" />
+      <SlBreadcrumbItem>First</SlBreadcrumbItem>
+      <SlBreadcrumbItem>Second</SlBreadcrumbItem>
+      <SlBreadcrumbItem>Third</SlBreadcrumbItem> 
+    </SlBreadcrumb>
+
+    <br />
+
+    <SlBreadcrumb>
+      <sl-icon name="arrow-right" slot="separator" />
+      <SlBreadcrumbItem>First</SlBreadcrumbItem>
+      <SlBreadcrumbItem>Second</SlBreadcrumbItem>
+      <SlBreadcrumbItem>Third</SlBreadcrumbItem> 
+    </SlBreadcrumb>
+
+    <br />
+
+    <SlBreadcrumb>
+      <span slot="separator">/</span>
+      <SlBreadcrumbItem>First</SlBreadcrumbItem>
+      <SlBreadcrumbItem>Second</SlBreadcrumbItem>
+      <SlBreadcrumbItem>Third</SlBreadcrumbItem> 
+    </SlBreadcrumb>
+  </>
+);
+```
+
 ### Prefixes
 
 Use the `prefix` slot to add content before any breadcrumb item.
@@ -89,6 +160,21 @@ Use the `prefix` slot to add content before any breadcrumb item.
 </sl-breadcrumb>
 ```
 
+```jsx react
+import { SlBreadcrumb, SlBreadcrumbItem, SlIcon } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlBreadcrumb>
+    <SlBreadcrumbItem>
+      <sl-icon slot="prefix" name="house"></sl-icon>
+      Home
+    </SlBreadcrumbItem>
+    <SlBreadcrumbItem>Articles</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Traveling</SlBreadcrumbItem>
+  </SlBreadcrumb>
+);
+```
+
 ### Suffixes
 
 Use the `suffix` slot to add content after any breadcrumb item.
@@ -104,6 +190,21 @@ Use the `suffix` slot to add content after any breadcrumb item.
 </sl-breadcrumb>
 ```
 
+```jsx react
+import { SlBreadcrumb, SlBreadcrumbItem, SlIcon } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlBreadcrumb>
+    <SlBreadcrumbItem>Documents</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Policies</SlBreadcrumbItem>
+    <SlBreadcrumbItem>
+      Security
+      <SlIcon slot="suffix" name="shield-lock"></SlIcon>
+    </SlBreadcrumbItem>
+  </SlBreadcrumb>
+);
+```
+
 ### With Dropdowns
 
 Dropdown menus can be placed in a prefix or suffix slot to provide additional options.
@@ -129,4 +230,37 @@ Dropdown menus can be placed in a prefix or suffix slot to provide additional op
 </sl-breadcrumb>
 ```
 
+```jsx react
+import { 
+  SlBreadcrumb, 
+  SlBreadcrumbItem, 
+  SlButton,
+  SlDropdown,
+  SlIcon,
+  SlMenu,
+  SlMenuItem
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlBreadcrumb>
+    <SlBreadcrumbItem>Homepage</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Our Services</SlBreadcrumbItem>
+    <SlBreadcrumbItem>Digital Media</SlBreadcrumbItem>
+    <SlBreadcrumbItem>
+      Web Design
+      <SlDropdown slot="suffix">
+        <SlButton slot="trigger" size="small" circle>
+          <SlIcon label="More options" name="three-dots"></SlIcon>
+        </SlButton>
+        <SlMenu>
+          <SlMenuItem checked>Web Design</SlMenuItem>
+          <SlMenuItem>Web Development</SlMenuItem>
+          <SlMenuItem>Marketing</SlMenuItem>
+        </SlMenu>
+      </SlDropdown>    
+    </SlBreadcrumbItem>
+  </SlBreadcrumb>
+);
+```
+
 [component-metadata:sl-breadcrumb]

docs/components/button-group.md

@@ -12,6 +12,18 @@ Button groups can be used to group related buttons into sections.
 </sl-button-group>
 ```
 
+```jsx react
+import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlButtonGroup>
+    <SlButton>Left</SlButton>
+    <SlButton>Center</SlButton>
+    <SlButton>Right</SlButton>
+  </SlButtonGroup>
+);
+```
+
 ## Examples
 
 ### Button Sizes
@@ -42,6 +54,36 @@ All button sizes are supported, but avoid mixing sizes within the same button gr
 </sl-button-group>
 ```
 
+```jsx react
+import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlButtonGroup>
+      <SlButton size="small">Left</SlButton>
+      <SlButton size="small">Center</SlButton>
+      <SlButton size="small">Right</SlButton>
+    </SlButtonGroup>
+
+    <br /><br />
+
+    <SlButtonGroup>
+      <SlButton size="medium">Left</SlButton>
+      <SlButton size="medium">Center</SlButton>
+      <SlButton size="medium">Right</SlButton>
+    </SlButtonGroup>
+
+    <br /><br />
+
+    <SlButtonGroup>
+      <SlButton size="large">Left</SlButton>
+      <SlButton size="large">Center</SlButton>
+      <SlButton size="large">Right</SlButton>
+    </SlButtonGroup>
+  </>
+);
+```
+
 ### Theme Buttons
 
 Theme buttons are supported through the button's `type` attribute.
@@ -86,6 +128,52 @@ Theme buttons are supported through the button's `type` attribute.
 </sl-button-group>
 ```
 
+```jsx react
+import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlButtonGroup>
+      <SlButton type="primary">Left</SlButton>
+      <SlButton type="primary">Center</SlButton>
+      <SlButton type="primary">Right</SlButton>
+    </SlButtonGroup>
+
+    <br /><br />
+
+    <SlButtonGroup>
+      <SlButton type="success">Left</SlButton>
+      <SlButton type="success">Center</SlButton>
+      <SlButton type="success">Right</SlButton>
+    </SlButtonGroup>
+
+    <br /><br />
+
+    <SlButtonGroup>
+      <SlButton type="neutral">Left</SlButton>
+      <SlButton type="neutral">Center</SlButton>
+      <SlButton type="neutral">Right</SlButton>
+    </SlButtonGroup>
+
+    <br /><br />
+
+    <SlButtonGroup>
+      <SlButton type="warning">Left</SlButton>
+      <SlButton type="warning">Center</SlButton>
+      <SlButton type="warning">Right</SlButton>
+    </SlButtonGroup>
+
+    <br /><br />
+
+    <SlButtonGroup>
+      <SlButton type="danger">Left</SlButton>
+      <SlButton type="danger">Center</SlButton>
+      <SlButton type="danger">Right</SlButton>
+    </SlButtonGroup>
+  </>
+);
+```
+
 ### Pill Buttons
 
 Pill buttons are supported through the button's `pill` attribute.
@@ -114,6 +202,36 @@ Pill buttons are supported through the button's `pill` attribute.
 </sl-button-group>
 ```
 
+```jsx react
+import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlButtonGroup>
+      <SlButton size="small" pill>Left</SlButton>
+      <SlButton size="small" pill>Center</SlButton>
+      <SlButton size="small" pill>Right</SlButton>
+    </SlButtonGroup>
+
+    <br /><br />
+
+    <SlButtonGroup>
+      <SlButton size="medium" pill>Left</SlButton>
+      <SlButton size="medium" pill>Center</SlButton>
+      <SlButton size="medium" pill>Right</SlButton>
+    </SlButtonGroup>
+
+    <br /><br />
+
+    <SlButtonGroup>
+      <SlButton size="large" pill>Left</SlButton>
+      <SlButton size="large" pill>Center</SlButton>
+      <SlButton size="large" pill>Right</SlButton>
+    </SlButtonGroup>
+  </>
+);
+```
+
 ### Dropdowns in Button Groups
 
 Dropdowns can be placed inside button groups as long as the trigger is an `<sl-button>` element.
@@ -133,6 +251,31 @@ Dropdowns can be placed inside button groups as long as the trigger is an `<sl-b
 </sl-button-group>
 ```
 
+```jsx react
+import { 
+  SlButton, 
+  SlButtonGroup,
+  SlDropdown,
+  SlMenu,
+  SlMenuItem,
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlButtonGroup> 
+    <SlButton>Button</SlButton>
+    <SlButton>Button</SlButton>
+    <SlDropdown>
+      <SlButton slot="trigger" caret>Dropdown</SlButton>
+      <SlMenu>
+        <SlMenuItem>Item 1</SlMenuItem>
+        <SlMenuItem>Item 2</SlMenuItem>
+        <SlMenuItem>Item 3</SlMenuItem>
+      </SlMenu>
+    </SlDropdown>
+  </SlButtonGroup>
+);
+```
+
 ### Split Buttons
 
 Create a split button using a button and a dropdown.
@@ -151,6 +294,30 @@ Create a split button using a button and a dropdown.
 </sl-button-group>
 ```
 
+```jsx react
+import { 
+  SlButton, 
+  SlButtonGroup,
+  SlDropdown,
+  SlMenu,
+  SlMenuItem,
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlButtonGroup> 
+    <SlButton type="primary">Save</SlButton>
+    <SlDropdown placement="bottom-end">
+      <SlButton slot="trigger" type="primary" caret></SlButton>
+      <SlMenu>
+        <SlMenuItem>Save</SlMenuItem>
+        <SlMenuItem>Save as&hellip;</SlMenuItem>
+        <SlMenuItem>Save all</SlMenuItem>
+      </SlMenu>
+    </SlDropdown>
+  </SlButtonGroup>
+);
+```
+
 ### Tooltips in Button Groups
 
 Buttons can be wrapped in tooltips to provide more detail when the user interacts with them.
@@ -171,6 +338,32 @@ Buttons can be wrapped in tooltips to provide more detail when the user interact
 </sl-button-group>
 ```
 
+```jsx react
+import { 
+  SlButton, 
+  SlButtonGroup,
+  SlTooltip
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlButtonGroup>
+      <SlTooltip content="I'm on the left">
+        <SlButton>Left</SlButton>
+      </SlTooltip>
+
+      <SlTooltip content="I'm in the middle">
+        <SlButton>Center</SlButton>
+      </SlTooltip>
+
+      <SlTooltip content="I'm on the right">
+        <SlButton>Right</SlButton>
+      </SlTooltip>
+    </SlButtonGroup>
+  </>
+);
+```
+
 ### Toolbar Example
 
 Create interactive toolbars with button groups.
@@ -218,4 +411,60 @@ Create interactive toolbars with button groups.
 </style>
 ```
 
+```jsx react
+import { 
+  SlButton, 
+  SlButtonGroup,
+  SlIcon,
+  SlTooltip
+} from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .button-group-toolbar sl-button-group:not(:last-of-type) {
+    margin-right: var(--sl-spacing-x-small);
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="button-group-toolbar">
+      <SlButtonGroup label="History">
+        <SlTooltip content="Undo">
+          <SlButton><SlIcon name="arrow-counterclockwise"></SlIcon></SlButton>
+        </SlTooltip>
+        <SlTooltip content="Redo">
+          <SlButton><SlIcon name="arrow-clockwise"></SlIcon></SlButton>
+        </SlTooltip>
+      </SlButtonGroup>
+
+      <SlButtonGroup label="Formatting">
+        <SlTooltip content="Bold">
+          <SlButton><SlIcon name="type-bold"></SlIcon></SlButton>
+        </SlTooltip>
+        <SlTooltip content="Italic">
+          <SlButton><SlIcon name="type-italic"></SlIcon></SlButton>
+        </SlTooltip>
+        <SlTooltip content="Underline">
+          <SlButton><SlIcon name="type-underline"></SlIcon></SlButton>
+        </SlTooltip>
+      </SlButtonGroup>
+
+      <SlButtonGroup label="Alignment">
+        <SlTooltip content="Align Left">
+          <SlButton><SlIcon name="justify-left"></SlIcon></SlButton>
+        </SlTooltip>
+        <SlTooltip content="Align Center">
+          <SlButton><SlIcon name="justify"></SlIcon></SlButton>
+        </SlTooltip>
+        <SlTooltip content="Align Right">
+          <SlButton><SlIcon name="justify-right"></SlIcon></SlButton>
+        </SlTooltip>
+      </SlButtonGroup>
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+```
+
 [component-metadata:sl-button-group]

docs/components/button.md

@@ -8,6 +8,14 @@ Buttons represent actions that are available to the user.
 <sl-button>Button</sl-button>
 ```
 
+```jsx react
+import { SlButton } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlButton>Button</SlButton>
+);
+```
+
 ## Examples
 
 ### Types
@@ -23,6 +31,21 @@ Use the `type` attribute to set the button's type.
 <sl-button type="danger">Danger</sl-button>
 ```
 
+```jsx react
+import { SlButton } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlButton type="default">Default</SlButton>
+    <SlButton type="primary">Primary</SlButton>
+    <SlButton type="success">Success</SlButton>
+    <SlButton type="neutral">Neutral</SlButton>
+    <SlButton type="warning">Warning</SlButton>
+    <SlButton type="danger">Danger</SlButton>  
+  </>
+);
+```
+
 ### Sizes
 
 Use the `size` attribute to change a button's size.
@@ -33,6 +56,18 @@ Use the `size` attribute to change a button's size.
 <sl-button size="large">Large</sl-button>
 ```
 
+```jsx react
+import { SlButton } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlButton size="small">Small</SlButton>
+    <SlButton size="medium">Medium</SlButton>
+    <SlButton size="large">Large</SlButton>
+  </>
+);
+```
+
 ### Outline Buttons
 
 Use the `outline` attribute to draw outlined buttons with transparent backgrounds.
@@ -46,6 +81,21 @@ Use the `outline` attribute to draw outlined buttons with transparent background
 <sl-button type="danger" outline>Danger</sl-button>
 ```
 
+```jsx react
+import { SlButton } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlButton type="default" outline>Default</SlButton>
+    <SlButton type="primary" outline>Primary</SlButton>
+    <SlButton type="success" outline>Success</SlButton>
+    <SlButton type="neutral" outline>Neutral</SlButton>
+    <SlButton type="warning" outline>Warning</SlButton>
+    <SlButton type="danger" outline>Danger</SlButton>
+  </>
+);
+```
+
 ### Pill Buttons
 
 Use the `pill` attribute to give buttons rounded edges.
@@ -56,6 +106,18 @@ Use the `pill` attribute to give buttons rounded edges.
 <sl-button size="large" pill>Large</sl-button>
 ```
 
+```jsx react
+import { SlButton } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlButton size="small" pill>Small</SlButton>
+    <SlButton size="medium" pill>Medium</SlButton>
+    <SlButton size="large" pill>Large</SlButton>
+  </>
+);
+```
+
 ### Circle Buttons
 
 Use the `circle` attribute to create circular icon buttons.
@@ -66,6 +128,18 @@ Use the `circle` attribute to create circular icon buttons.
 <sl-button type="default" size="large" circle><sl-icon name="gear"></sl-icon></sl-button>
 ```
 
+```jsx react
+import { SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlButton type="default" size="small" circle><SlIcon name="gear" /></SlButton>
+    <SlButton type="default" size="medium" circle><SlIcon name="gear" /></SlButton>
+    <SlButton type="default" size="large" circle><SlIcon name="gear" /></SlButton>
+  </>
+);
+```
+
 ### Text Buttons
 
 Use the `text` type to create text buttons that share the same size as regular buttons but don't have backgrounds or borders.
@@ -76,6 +150,18 @@ Use the `text` type to create text buttons that share the same size as regular b
 <sl-button type="text" size="large">Text</sl-button>
 ```
 
+```jsx react
+import { SlButton } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlButton type="text" size="small">Text</SlButton>
+    <SlButton type="text" size="medium">Text</SlButton>
+    <SlButton type="text" size="large">Text</SlButton>
+  </>
+);
+```
+
 ### Link Buttons
 
 It's often helpful to have a button that works like a link. This is possible by setting the `href` attribute, which will make the component render an `<a>` under the hood. This gives you all the default link behavior the browser provides (e.g. <kbd>CMD/CTRL/SHIFT + CLICK</kbd>) and exposes the `target` and `download` attributes.
@@ -87,6 +173,19 @@ It's often helpful to have a button that works like a link. This is possible by
 <sl-button href="https://example.com/" disabled>Disabled</sl-button>
 ```
 
+```jsx react
+import { SlButton } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlButton href="https://example.com/">Link</SlButton>
+    <SlButton href="https://example.com/" target="_blank">New Window</SlButton>
+    <SlButton href="/assets/images/wordmark.svg" download="shoelace.svg">Download</SlButton>
+    <SlButton href="https://example.com/" disabled>Disabled</SlButton>
+  </>
+);
+```
+
 ?> When a `target` is set, the link will receive `rel="noreferrer noopener"` for [security reasons](https://mathiasbynens.github.io/rel-noopener/).
 
 ### Setting a Custom Width
@@ -99,6 +198,18 @@ As expected, buttons can be given a custom width by setting its `width`. This is
 <sl-button type="default" size="large" style="width: 100%;">Large</sl-button>
 ```
 
+```jsx react
+import { SlButton } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlButton type="default" size="small" style={{ width: '100%', marginBottom: '1rem' }}>Small</SlButton>
+    <SlButton type="default" size="medium" style={{ width: '100%', marginBottom: '1rem' }}>Medium</SlButton>
+    <SlButton type="default" size="large" style={{ width: '100%' }}>Large</SlButton>
+  </>
+);
+```
+
 ### Prefix and Suffix Icons
 
 Use the `prefix` and `suffix` slots to add icons.
@@ -157,6 +268,66 @@ Use the `prefix` and `suffix` slots to add icons.
 </sl-button>
 ```
 
+```jsx react
+import { SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlButton type="default" size="small">
+      <SlIcon slot="prefix" name="gear"></SlIcon>
+      Settings
+    </SlButton>
+
+    <SlButton type="default" size="small">
+      <SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
+      Refresh
+    </SlButton>
+
+    <SlButton type="default" size="small">
+      <SlIcon slot="prefix" name="link-45deg"></SlIcon>
+      <SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
+      Open
+    </SlButton>
+
+    <br /><br/ >
+
+    <SlButton type="default">
+      <SlIcon slot="prefix" name="gear"></SlIcon>
+      Settings
+    </SlButton>
+
+    <SlButton type="default">
+      <SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
+      Refresh
+    </SlButton>
+
+    <SlButton type="default">
+      <SlIcon slot="prefix" name="link-45deg"></SlIcon>
+      <SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
+      Open
+    </SlButton>
+
+    <br /><br />
+
+    <SlButton type="default" size="large">
+      <SlIcon slot="prefix" name="gear"></SlIcon>
+      Settings
+    </SlButton>
+
+    <SlButton type="default" size="large">
+      <SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
+      Refresh
+    </SlButton>
+
+    <SlButton type="default" size="large">
+      <SlIcon slot="prefix" name="link-45deg"></SlIcon>
+      <SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
+      Open
+    </SlButton>
+  </>
+);
+```
+
 ### Caret
 
 Use the `caret` attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.
@@ -167,6 +338,18 @@ Use the `caret` attribute to add a dropdown indicator when a button will trigger
 <sl-button size="large" caret>Large</sl-button>
 ```
 
+```jsx react
+import { SlButton } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlButton size="small" caret>Small</SlButton>
+    <SlButton size="medium" caret>Medium</SlButton>
+    <SlButton size="large" caret>Large</SlButton>
+  </>
+);
+```
+
 ### Loading
 
 Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. Clicks will be suppressed until the loading state is removed.
@@ -180,6 +363,21 @@ Use the `loading` attribute to make a button busy. The width will remain the sam
 <sl-button type="danger" loading>Danger</sl-button>
 ```
 
+```jsx react
+import { SlButton } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlButton type="default" loading>Default</SlButton>
+    <SlButton type="primary" loading>Primary</SlButton>
+    <SlButton type="success" loading>Success</SlButton>
+    <SlButton type="neutral" loading>Neutral</SlButton>
+    <SlButton type="warning" loading>Warning</SlButton>
+    <SlButton type="danger" loading>Danger</SlButton>
+  </>
+);
+```
+
 ### Disabled
 
 Use the `disabled` attribute to disable a button. Clicks will be suppressed until the disabled state is removed.
@@ -193,6 +391,21 @@ Use the `disabled` attribute to disable a button. Clicks will be suppressed unti
 <sl-button type="danger" disabled>Danger</sl-button>
 ```
 
+```jsx react
+import { SlButton } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlButton type="default" disabled>Default</SlButton>
+    <SlButton type="primary" disabled>Primary</SlButton>
+    <SlButton type="success" disabled>Success</SlButton>
+    <SlButton type="neutral" disabled>Neutral</SlButton>
+    <SlButton type="warning" disabled>Warning</SlButton>
+    <SlButton type="danger" disabled>Danger</SlButton>
+  </>
+);
+```
+
 ### Styling Buttons
 
 This example demonstrates how to style buttons using a custom class. This is the recommended approach if you need to add additional variations. To customize an existing variation, modify the selector to target the button's type attribute instead of a class (e.g. `sl-button[type="primary"]`).

docs/components/card.md

@@ -39,6 +39,53 @@ Cards can be used to group related subjects in a container.
 </style>
 ```
 
+```jsx react
+import { 
+  SlButton, 
+  SlCard, 
+  SlRating 
+} from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .card-overview {
+    max-width: 300px;
+  }
+
+  .card-overview small {
+    color: rgb(var(--sl-color-neutral-500));
+  }
+
+  .card-overview [slot="footer"] {
+    display: flex; 
+    justify-content: space-between; 
+    align-items: center;
+  }
+`;
+
+const App = () => (
+  <>
+    <SlCard className="card-overview">
+      <img 
+        slot="image" 
+        src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" 
+        alt="A kitten sits patiently between a terracotta pot and decorative grasses."
+      />
+
+      <strong>Mittens</strong><br />
+      This kitten is as cute as he is playful. Bring him home today!<br />
+      <small>6 weeks old</small>
+
+      <div slot="footer">
+        <SlButton type="primary" pill>More Info</SlButton>
+        <SlRating></SlRating>
+      </div>
+    </SlCard>
+
+    <style>{css}</style>
+  </>
+);
+```
+
 ## Examples
 
 ## Basic Card
@@ -57,6 +104,26 @@ Basic cards aren't very exciting, but they can display any content you want them
 </style>
 ```
 
+```jsx react
+import { SlCard } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .card-basic {
+    max-width: 300px;
+  }
+`;
+
+const App = () => (
+  <>
+    <SlCard className="card-basic">
+      This is just a basic card. No image, no header, and no footer. Just your content.
+    </SlCard>
+
+    <style>{css}</style>
+  </>
+);
+```
+
 ## Card with Header
 
 Headers can be used to display titles and more.
@@ -73,26 +140,66 @@ Headers can be used to display titles and more.
 </sl-card>
 
 <style>
-.card-header {
-  max-width: 300px;
-}
+  .card-header {
+    max-width: 300px;
+  }
 
-.card-header [slot="header"] {
-  display: flex; 
-  align-items: center; 
-  justify-content: space-between;
-}
+  .card-header [slot="header"] {
+    display: flex; 
+    align-items: center; 
+    justify-content: space-between;
+  }
 
-.card-header h3 {
-  margin: 0;
-}
+  .card-header h3 {
+    margin: 0;
+  }
 
-.card-header sl-icon-button {
-  font-size: var(--sl-font-size-medium);
-}
+  .card-header sl-icon-button {
+    font-size: var(--sl-font-size-medium);
+  }
 </style>
 ```
 
+```jsx react
+import { SlCard, SlIconButton } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .card-header {
+    max-width: 300px;
+  }
+
+  .card-header [slot="header"] {
+    display: flex; 
+    align-items: center; 
+    justify-content: space-between;
+  }
+
+  .card-header h3 {
+    margin: 0;
+  }
+
+  .card-header sl-icon-button {
+    font-size: var(--sl-font-size-medium);
+  }
+`;
+
+const App = () => (
+  <>
+    <SlCard className="card-header">
+      <div slot="header">
+        Header Title
+
+        <SlIconButton name="gear"></SlIconButton>
+      </div>
+
+      This card has a header. You can put all sorts of things in it!
+    </SlCard>
+
+    <style>{css}</style>
+  </>
+);
+```
+
 ## Card with Footer
 
 Footers can be used to display actions, summaries, or other relevant content.
@@ -120,6 +227,41 @@ Footers can be used to display actions, summaries, or other relevant content.
 </style>
 ```
 
+```jsx react
+import { 
+  SlButton, 
+  SlCard, 
+  SlRating 
+} from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .card-footer {
+    max-width: 300px;
+  }
+
+  .card-footer [slot="footer"] {
+    display: flex; 
+    justify-content: space-between; 
+    align-items: center;
+  }
+`;
+
+const App = () => (
+  <>
+    <SlCard className="card-footer">
+      This card has a footer. You can put all sorts of things in it!
+
+      <div slot="footer">
+        <SlRating></SlRating>
+        <SlButton slot="footer" type="primary">Preview</SlButton>
+      </div>
+    </SlCard>
+
+    <style>{css}</style>
+  </>
+);
+```
+
 ## Images
 
 Cards accept an `image` slot. The image is displayed atop the card and stretches to fit.
@@ -141,4 +283,29 @@ Cards accept an `image` slot. The image is displayed atop the card and stretches
 </style>
 ```
 
+```jsx react
+import { SlCard } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .card-image {
+    max-width: 300px;
+  }
+`;
+
+const App = () => (
+  <>
+    <SlCard className="card-image">
+      <img 
+        slot="image" 
+        src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80" 
+        alt="A kitten walks towards camera on top of pallet."
+      />
+      This is a kitten, but not just any kitten. This kitten likes walking along pallets.
+    </SlCard>
+
+    <style>{css}</style>
+  </>
+);
+```
+
 [component-metadata:sl-card]

docs/components/checkbox.md

@@ -8,6 +8,14 @@ Checkboxes allow the user to toggle an option on or off.
 <sl-checkbox>Checkbox</sl-checkbox>
 ```
 
+```jsx react
+import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlCheckbox>Checkbox</SlCheckbox>
+);
+```
+
 ?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
 
 ## Examples
@@ -20,6 +28,14 @@ Use the `checked` attribute to activate the checkbox.
 <sl-checkbox checked>Checked</sl-checkbox>
 ```
 
+```jsx react
+import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlCheckbox checked>Checked</SlCheckbox>
+);
+```
+
 ### Indeterminate
 
 Use the `indeterminate` attribute to make the checkbox indeterminate.
@@ -28,6 +44,14 @@ Use the `indeterminate` attribute to make the checkbox indeterminate.
 <sl-checkbox indeterminate>Indeterminate</sl-checkbox>
 ```
 
+```jsx react
+import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlCheckbox indeterminate>Indeterminate</SlCheckbox>
+);
+```
+
 ### Disabled
 
 Use the `disabled` attribute to disable the checkbox.
@@ -36,4 +60,12 @@ Use the `disabled` attribute to disable the checkbox.
 <sl-checkbox disabled>Disabled</sl-checkbox>
 ```
 
+```jsx react
+import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlCheckbox disabled>Disabled</SlCheckbox>
+);
+```
+
 [component-metadata:sl-checkbox]

docs/components/color-picker.md

@@ -8,6 +8,14 @@ Color pickers allow the user to select a color.
 <sl-color-picker></sl-color-picker>
 ```
 
+```jsx react
+import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlColorPicker />
+);
+```
+
 ## Examples
 
 ### Opacity
@@ -18,6 +26,14 @@ Use the `opacity` attribute to enable the opacity slider. When this is enabled,
 <sl-color-picker opacity></sl-color-picker>
 ```
 
+```jsx react
+import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlColorPicker opacity />
+);
+```
+
 ### Formats
 
 Set the color picker's format with the `format` attribute. Valid options include `hex`, `rgb`, and `hsl`. Note that the color picker's input will accept any parsable format (including CSS color names) regardless of this option.
@@ -30,6 +46,18 @@ To prevent users from toggling the format themselves, add the `no-format-toggle`
 <sl-color-picker format="hsl" value="hsl(290, 87%, 47%)"></sl-color-picker>
 ```
 
+```jsx react
+import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlColorPicker format="hex" value="#4a90e2" />
+    <SlColorPicker format="rgb" value="rgb(80, 227, 194)" />
+    <SlColorPicker format="hsl" value="hsl(290, 87%, 47%)" />
+  </>
+);
+```
+
 ### Sizes
 
 Use the `size` attribute to change the color picker's trigger size.
@@ -40,6 +68,17 @@ Use the `size` attribute to change the color picker's trigger size.
 <sl-color-picker size="large"></sl-color-picker>
 ```
 
+```jsx react
+import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlColorPicker size="small" />
+    <SlColorPicker size="medium" />
+    <SlColorPicker size="large" />
+  </>
+);
+```
 
 ### Inline
 
@@ -49,4 +88,12 @@ The color picker can be rendered inline instead of in a dropdown using the `inli
 <sl-color-picker inline></sl-color-picker>
 ```
 
+```jsx react
+import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlColorPicker inline />
+);
+```
+
 [component-metadata:sl-color-picker]

docs/components/context-menu.md

@@ -1,140 +0,0 @@
-# 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/details.md

@@ -11,6 +11,17 @@ Details show a brief summary and expand to show additional content.
 </sl-details>
 ```
 
+```jsx react
+import { SlDetails } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlDetails summary="Toggle Me">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </SlDetails>
+);
+```
+
 ## Examples
 
 ### Disabled
@@ -24,6 +35,17 @@ Use the `disable` attribute to prevent the details from expanding.
 </sl-details>
 ```
 
+```jsx react
+import { SlDetails } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlDetails summary="Disabled" disabled>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </SlDetails>
+);
+```
+
 ### Grouping Details
 
 Details are designed to function independently, but you can simulate a group or "accordion" where only one is shown at a time by listening for the `sl-show` event.

docs/components/dialog.md

@@ -22,6 +22,28 @@ Dialogs, sometimes called "modals", appear above the page and require the user's
 </script>
 ```
 
+```jsx react
+import { useState } from 'react';
+import { SlButton, SlDialog } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDialog>
+
+      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
+    </>
+  );
+};
+```
+
 ## UX Tips
 
 - Use a dialog when you immediately require the user's attention, e.g. confirming a destructive action.
@@ -52,6 +74,33 @@ Use the `--width` custom property to set the dialog's width.
 </script>
 ```
 
+```jsx react
+import { useState } from 'react';
+import { SlButton, SlDialog } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDialog 
+        label="Dialog" 
+        open={open} 
+        style={{ '--width': '50vw' }} 
+        onSlAfterHide={() => setOpen(false)}
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDialog>
+
+      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
+    </>
+  );
+};
+```
+
 ### Scrolling
 
 By design, a dialog's height will never exceed that of the viewport. As such, dialogs will not scroll with the page ensuring the header and footer are always accessible to the user.
@@ -76,6 +125,35 @@ By design, a dialog's height will never exceed that of the viewport. As such, di
 </script>
 ```
 
+```jsx react
+import { useState } from 'react';
+import { SlButton, SlDialog } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
+        <div style={{
+          height: '150vh',
+          border: 'dashed 2px rgb(var(--sl-color-neutral-200))',
+          padding: '0 1rem'
+        }}>
+          <p>Scroll down and give it a try! 👇</p>
+        </div>
+
+        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDialog>
+
+      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
+    </>
+  );
+};
+```
+
 ### Preventing the Dialog from Closing
 
 By default, dialogs will close when the user clicks the close button, clicks the overlay, or presses the <kbd>Escape</kbd> key. In most cases, the default behavior is the best behavior in terms of UX. However, there are situations where this may be undesirable, such as when data loss will occur.
@@ -102,6 +180,33 @@ To keep the dialog open in such cases, you can cancel the `sl-request-close` eve
 </script>
 ```
 
+```jsx react
+import { useState } from 'react';
+import { SlButton, SlDialog } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDialog 
+        label="Dialog" 
+        open={open} 
+        onSlRequestClose={event => event.preventDefault()}
+        onSlAfterHide={() => setOpen(false)}
+      >
+        This dialog will not close unless you use the button below.
+        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+          Save &amp; Close
+        </SlButton>
+      </SlDialog>
+
+      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
+    </>
+  );
+};
+```
+
 ### Customizing Initial Focus
 
 By default, the dialog's panel will gain focus when opened. This allows the first tab press to focus on the first tabbable element within the dialog. To set focus on a different element, listen for and cancel the `sl-initial-focus` event.
@@ -130,4 +235,41 @@ By default, the dialog's panel will gain focus when opened. This allows the firs
 </script>
 ```
 
+```jsx react
+import { useRef, useState } from 'react';
+import { 
+  SlButton, 
+  SlDialog, 
+  SlInput 
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const input = useRef(null);
+  const [open, setOpen] = useState(false);
+
+  function handleInitialFocus(event) {
+    event.preventDefault();
+    input.current.focus();
+  }
+
+  return (
+    <>
+      <SlDialog 
+        label="Dialog" 
+        open={open} 
+        onSlInitialFocus={handleInitialFocus}
+        onSlAfterHide={() => setOpen(false)}
+      >
+        <SlInput ref={input} placeholder="I will have focus when the dialog is opened" />
+        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDialog>
+
+      <SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
+    </>
+  );
+};
+```
+
 [component-metadata:sl-dialog]

docs/components/divider.md

@@ -8,6 +8,13 @@ Dividers are used to visually separate or group elements.
 <sl-divider></sl-divider>
 ```
 
+```jsx react
+import { SlDivider } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlDivider />
+);
+```
 ## Examples
 
 ### Width
@@ -18,6 +25,14 @@ Use the `--width` custom property to change the width of the divider.
 <sl-divider style="--width: 4px;"></sl-divider>
 ```
 
+```jsx react
+import { SlDivider } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlDivider style={{ '--width': '4px' }} />
+);
+```
+
 ### Color
 
 Use the `--color` custom property to change the color of the divider.
@@ -26,6 +41,14 @@ Use the `--color` custom property to change the color of the divider.
 <sl-divider style="--color: tomato;"></sl-divider>
 ```
 
+```jsx react
+import { SlDivider } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlDivider style={{ '--color': 'tomato' }} />
+);
+```
+
 ### Spacing
 
 Use the `--spacing` custom property to change the amount of space between the divider and it's neighboring elements.
@@ -38,6 +61,18 @@ Use the `--spacing` custom property to change the amount of space between the di
 </div>
 ```
 
+```jsx react
+import { SlDivider } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    Above
+    <SlDivider style={{ '--spacing': '2rem' }} />
+    Below
+  </>
+);
+```
+
 ### Vertical
 
 Add the `vertical` attribute to draw the divider in a vertical orientation. The divider will span the full height of its container. Vertical dividers work especially well inside of a flex container.
@@ -52,6 +87,26 @@ Add the `vertical` attribute to draw the divider in a vertical orientation. The
 </div>
 ```
 
+```jsx react
+import { SlDivider } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <div 
+    style={{ 
+      display: 'flex', 
+      alignItems: 'center', 
+      height: '2rem'
+    }}
+  >
+    First
+    <SlDivider vertical />
+    Middle
+    <SlDivider vertical />
+    Last
+  </div>
+);
+```
+
 ### Menu Dividers
 
 Use dividers in [menus](/components/menu) to visually group menu items.
@@ -68,4 +123,30 @@ Use dividers in [menus](/components/menu) to visually group menu items.
 </sl-menu>
 ```
 
+```jsx react
+import { 
+  SlDivider, 
+  SlMenu, 
+  SlMenuItem 
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlMenu 
+    style={{
+      maxWidth: '200px',
+      border: 'solid 1px rgb(var(--sl-panel-border-color))',
+      borderRadius: 'var(--sl-border-radius-medium)'
+    }}
+  >
+    <SlMenuItem value="1">Option 1</SlMenuItem>
+    <SlMenuItem value="2">Option 2</SlMenuItem>
+    <SlMenuItem value="3">Option 3</SlMenuItem>
+    <sl-divider />
+    <SlMenuItem value="4">Option 4</SlMenuItem>
+    <SlMenuItem value="5">Option 5</SlMenuItem>
+    <SlMenuItem value="6">Option 6</SlMenuItem>
+  </SlMenu>
+);
+```
+
 [component-metadata:sl-divider]

docs/components/drawer.md

@@ -22,6 +22,28 @@ Drawers slide in from a container to expose additional options and information.
 </script>
 ```
 
+```jsx react
+import { useState } from 'react';
+import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDrawer>
+
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+    </>
+  );
+};
+```
+
 ## Examples
 
 ### Slide in From Start
@@ -46,6 +68,33 @@ By default, drawers slide in from the end. To make the drawer slide in from the
 </script>
 ```
 
+```jsx react
+import { useState } from 'react';
+import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDrawer 
+        label="Drawer" 
+        placement="start" 
+        open={open} 
+        onSlAfterHide={() => setOpen(false)}
+      >
+        This drawer slides in from the start.
+        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDrawer>
+
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+    </>
+  );
+};
+```
+
 ### Slide in From Top
 
 To make the drawer slide in from the top, set the `placement` attribute to `top`.
@@ -68,6 +117,33 @@ To make the drawer slide in from the top, set the `placement` attribute to `top`
 </script>
 ```
 
+```jsx react
+import { useState } from 'react';
+import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDrawer 
+        label="Drawer" 
+        placement="top" 
+        open={open} 
+        onSlAfterHide={() => setOpen(false)}
+      >
+        This drawer slides in from the top.
+        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDrawer>
+
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+    </>
+  );
+};
+```
+
 ### Slide in From Bottom
 
 To make the drawer slide in from the bottom, set the `placement` attribute to `bottom`.
@@ -90,6 +166,33 @@ To make the drawer slide in from the bottom, set the `placement` attribute to `b
 </script>
 ```
 
+```jsx react
+import { useState } from 'react';
+import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDrawer 
+        label="Drawer" 
+        placement="bottom" 
+        open={open} 
+        onSlAfterHide={() => setOpen(false)}
+      >
+        This drawer slides in from the bottom.
+        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDrawer>
+
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+    </>
+  );
+};
+```
+
 ### Contained to an Element
 
 By default, the drawer slides out of its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block), which is usually the viewport. To make the drawer slide out of its parent element, add the `contained` attribute and `position: relative` to the parent.
@@ -118,6 +221,46 @@ By default, the drawer slides out of its [containing block](https://developer.mo
 </script>
 ```
 
+```jsx react
+import { useState } from 'react';
+import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <div
+        style={{
+          position: 'relative',
+          border: 'solid 2px rgb(var(--sl-panel-border-color))',
+          height: '300px',
+          padding: '1rem',
+          marginBottom: '1rem'
+        }}
+      >
+        The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer opens.
+
+        <SlDrawer
+          label="Drawer" 
+          contained 
+          open={open} 
+          onSlAfterHide={() => setOpen(false)}
+          style={{ '--size': '50%' }}
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+            Close
+          </SlButton>
+        </SlDrawer>
+      </div>
+
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+    </>
+  );
+};
+```
+
 ### Custom Size
 
 Use the `--size` custom property to set the drawer's size. This will be applied to the drawer's width or height depending on its `placement`.
@@ -140,6 +283,32 @@ Use the `--size` custom property to set the drawer's size. This will be applied
 </script>
 ```
 
+```jsx react
+import { useState } from 'react';
+import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDrawer 
+        label="Drawer" 
+        open={open} onSlAfterHide={() => setOpen(false)}
+        style={{ '--size': '50vw' }}
+      >
+        This drawer is always 50% of the viewport.
+        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDrawer>
+
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+    </>
+  );
+};
+```
+
 ### Scrolling
 
 By design, a drawer's height will never exceed 100% of its container. As such, drawers will not scroll with the page to ensure the header and footer are always accessible to the user.
@@ -164,6 +333,36 @@ By design, a drawer's height will never exceed 100% of its container. As such, d
 </script>
 ```
 
+```jsx react
+import { useState } from 'react';
+import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)}>
+        <div 
+          style={{
+            height: '150vh',
+            border: 'dashed 2px rgb(var(--sl-color-neutral-200))',
+            padding: '0 1rem'
+          }}
+        >
+          <p>Scroll down and give it a try! 👇</p>
+        </div>
+        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDrawer>
+
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+    </>
+  );
+};
+```
+
 ### Preventing the Drawer from Closing
 
 By default, drawers will close when the user clicks the close button, clicks the overlay, or presses the <kbd>Escape</kbd> key. In most cases, the default behavior is the best behavior in terms of UX. However, there are situations where this may be undesirable, such as when data loss will occur.
@@ -173,7 +372,7 @@ To keep the drawer open in such cases, you can cancel the `sl-request-close` eve
 
 ```html preview
 <sl-drawer label="Drawer" class="drawer-deny-close">
-  This dialog will not close unless you use the button below.
+  This drawer will not close unless you use the button below.
   <sl-button slot="footer" type="primary">Save &amp; Close</sl-button>
 </sl-drawer>
 
@@ -191,6 +390,33 @@ To keep the drawer open in such cases, you can cancel the `sl-request-close` eve
 </script>
 ```
 
+```jsx react
+import { useState } from 'react';
+import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlDrawer 
+        label="Drawer" 
+        open={open} 
+        onSlRequestClose={event => event.preventDefault()}
+        onSlAfterHide={() => setOpen(false)}
+      >
+        This drawer will not close unless you use the button below.
+        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+          Save &amp; Close
+        </SlButton>
+      </SlDrawer>
+
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+    </>
+  );
+};
+```
+
 ### Customizing Initial Focus
 
 By default, the drawer's panel will gain focus when opened. This allows the first tab press to focus on the first tabbable element within the drawer. To set focus on a different element, listen for and cancel the `sl-initial-focus` event.
@@ -219,4 +445,41 @@ By default, the drawer's panel will gain focus when opened. This allows the firs
 </script>
 ```
 
+```jsx react
+import { useRef, useState } from 'react';
+import { 
+  SlButton, 
+  SlDrawer, 
+  SlInput 
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const input = useRef(null);
+  const [open, setOpen] = useState(false);
+
+  function handleInitialFocus(event) {
+    event.preventDefault();
+    input.current.focus();
+  }
+
+  return (
+    <>
+      <SlDrawer 
+        label="Drawer" 
+        open={open} 
+        onSlInitialFocus={handleInitialFocus}
+        onSlAfterHide={() => setOpen(false)}
+      >
+        <SlInput ref={input} placeholder="I will have focus when the drawer is opened" />
+        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+          Close
+        </SlButton>
+      </SlDrawer>
+
+      <SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
+    </>
+  );
+};
+```
+
 [component-metadata:sl-drawer]

docs/components/dropdown.md

@@ -31,6 +31,40 @@ Dropdowns are designed to work well with [menus](/components/menu) to provide a
 </sl-dropdown>
 ```
 
+```jsx react
+import { 
+  SlButton,
+  SlDivider,
+  SlDropdown,
+  SlIcon,
+  SlMenu,
+  SlMenuItem
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlDropdown>
+    <SlButton slot="trigger" caret>Dropdown</SlButton>
+    <SlMenu>
+      <SlMenuItem>Dropdown Item 1</SlMenuItem>
+      <SlMenuItem>Dropdown Item 2</SlMenuItem>
+      <SlMenuItem>Dropdown Item 3</SlMenuItem>
+      <SlDivider />
+      <SlMenuItem checked>Checked</SlMenuItem>
+      <SlMenuItem disabled>Disabled</SlMenuItem>
+      <SlDivider />
+      <SlMenuItem>
+        Prefix
+        <SlIcon slot="prefix" name="gift" />
+      </SlMenuItem>
+      <SlMenuItem>
+        Suffix Icon
+        <SlIcon slot="suffix" name="heart" />
+      </SlMenuItem>
+    </SlMenu>
+  </SlDropdown>  
+);
+```
+
 ## Examples
 
 ### Getting the Selected Item
@@ -60,6 +94,93 @@ When dropdowns are used with [menus](/components/menu), you can listen for the `
 </script>
 ```
 
+```jsx react
+import { 
+  SlButton,
+  SlDropdown,
+  SlMenu,
+  SlMenuItem
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  function handleSelect(event) {
+    const selectedItem = event.detail.item;
+    console.log(selectedItem.value);
+  }
+
+  return (
+    <SlDropdown>
+      <SlButton slot="trigger" caret>Edit</SlButton>
+      <SlMenu onSlSelect={handleSelect}>
+        <SlMenuItem value="cut">Cut</SlMenuItem>
+        <SlMenuItem value="copy">Copy</SlMenuItem>
+        <SlMenuItem value="paste">Paste</SlMenuItem>
+      </SlMenu>
+    </SlDropdown> 
+  );
+};
+```
+
+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>
+```
+
+```jsx react
+import { 
+  SlButton,
+  SlDropdown,
+  SlMenu,
+  SlMenuItem
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  function handleCut() {
+    console.log('cut');
+  }
+
+  function handleCopy() {
+    console.log('copy');
+  }
+
+  function handlePaste() {
+    console.log('paste');
+  }
+
+  return (
+    <SlDropdown>
+      <SlButton slot="trigger" caret>Edit</SlButton>
+      <SlMenu>
+        <SlMenuItem onClick={handleCut}>Cut</SlMenuItem>
+        <SlMenuItem onClick={handleCopy}>Copy</SlMenuItem>
+        <SlMenuItem onClick={handlePaste}>Paste</SlMenuItem>
+      </SlMenu>
+    </SlDropdown> 
+  );
+};
+```
+
 ### 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.
@@ -78,6 +199,30 @@ The preferred placement of the dropdown can be set with the `placement` attribut
 </sl-dropdown>
 ```
 
+```jsx react
+import { 
+  SlButton,
+  SlDivider,
+  SlDropdown,
+  SlMenu,
+  SlMenuItem
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlDropdown placement="top-start">
+    <SlButton slot="trigger" caret>Edit</SlButton>
+    <SlMenu>
+      <SlMenuItem>Cut</SlMenuItem>
+      <SlMenuItem>Copy</SlMenuItem>
+      <SlMenuItem>Paste</SlMenuItem>
+      <SlDivider />
+      <SlMenuItem>Find</SlMenuItem>
+      <SlMenuItem>Replace</SlMenuItem>
+    </SlMenu>
+  </SlDropdown> 
+);
+```
+
 ### Distance
 
 The distance from the panel to the trigger can be customized using the `distance` attribute. This value is specified in pixels.
@@ -96,6 +241,30 @@ The distance from the panel to the trigger can be customized using the `distance
 </sl-dropdown>
 ```
 
+```jsx react
+import { 
+  SlButton,
+  SlDivider,
+  SlDropdown,
+  SlMenu,
+  SlMenuItem
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlDropdown distance={30}>
+    <SlButton slot="trigger" caret>Edit</SlButton>
+    <SlMenu>
+      <SlMenuItem>Cut</SlMenuItem>
+      <SlMenuItem>Copy</SlMenuItem>
+      <SlMenuItem>Paste</SlMenuItem>
+      <SlDivider />
+      <SlMenuItem>Find</SlMenuItem>
+      <SlMenuItem>Replace</SlMenuItem>
+    </SlMenu>
+  </SlDropdown> 
+);
+```
+
 ### Skidding
 
 The offset of the panel along the trigger can be customized using the `skidding` attribute. This value is specified in pixels.
@@ -114,6 +283,30 @@ The offset of the panel along the trigger can be customized using the `skidding`
 </sl-dropdown>
 ```
 
+```jsx react
+import { 
+  SlButton,
+  SlDivider,
+  SlDropdown,
+  SlMenu,
+  SlMenuItem
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlDropdown skidding={30}>
+    <SlButton slot="trigger" caret>Edit</SlButton>
+    <SlMenu>
+      <SlMenuItem>Cut</SlMenuItem>
+      <SlMenuItem>Copy</SlMenuItem>
+      <SlMenuItem>Paste</SlMenuItem>
+      <SlDivider />
+      <SlMenuItem>Find</SlMenuItem>
+      <SlMenuItem>Replace</SlMenuItem>
+    </SlMenu>
+  </SlDropdown> 
+);
+```
+
 ### 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, 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.
@@ -148,4 +341,49 @@ Dropdown panels will be clipped if they're inside a container that has `overflow
 </style>
 ```
 
+```jsx react
+import { 
+  SlButton,
+  SlDivider,
+  SlDropdown,
+  SlIcon,
+  SlMenu,
+  SlMenuItem
+} from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .dropdown-hoist {
+    border: solid 2px rgb(var(--sl-panel-border-color));
+    padding: var(--sl-spacing-medium);
+    overflow: hidden;
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="dropdown-hoist">
+      <SlDropdown>
+        <SlButton slot="trigger" caret>No Hoist</SlButton>
+        <SlMenu>
+          <SlMenuItem>Item 1</SlMenuItem>
+          <SlMenuItem>Item 2</SlMenuItem>
+          <SlMenuItem>Item 3</SlMenuItem>
+        </SlMenu>
+      </SlDropdown>
+
+      <SlDropdown hoist>
+        <SlButton slot="trigger" caret>Hoist</SlButton>
+        <SlMenu>
+          <SlMenuItem>Item 1</SlMenuItem>
+          <SlMenuItem>Item 2</SlMenuItem>
+          <SlMenuItem>Item 3</SlMenuItem>
+        </SlMenu>
+      </SlDropdown>
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+```
+
 [component-metadata:sl-dropdown]

docs/components/form.md

@@ -67,6 +67,69 @@ Shoelace forms don't make use of `action` and `method` attributes and they don't
 </script>
 ```
 
+```jsx react
+import { 
+  SlButton,
+  SlCheckbox, 
+  SlForm, 
+  SlInput,
+  SlMenuItem, 
+  SlSelect,
+} from '@shoelace-style/shoelace/dist/react';
+
+function handleSubmit(event) {
+  const formData = event.detail.formData;
+  let output = '';
+
+  //
+  // Example 1: Post data to a server and wait for a JSON response
+  //
+  fetch('https://jsonplaceholder.typicode.com/posts', {
+    method: 'POST',
+    body: formData
+  })
+  .then(response => response.json())
+  .then(result => {
+    console.log('Success:', result);
+  })
+  .catch(error => {
+    console.error('Error:', error);
+  });
+
+  //
+  // Example 2: Output all form control names + values
+  //
+  for (const entry of formData.entries()) {
+    output += `${entry[0]}: ${entry[1]}\n`;
+  }
+  alert(output);
+
+  //
+  // Example 3: Get all form controls that were serialized as 
+  // an array of HTML elements
+  //
+  console.log(event.detail.formControls);
+}
+
+const App = () => (
+  <SlForm onSlSubmit={handleSubmit}>
+    <SlInput name="name" type="text" label="Name" />
+    <br />
+    <SlSelect name="favorite" label="Select your favorite">
+      <SlMenuItem value="birds">Birds</SlMenuItem>
+      <SlMenuItem value="cats">Cats</SlMenuItem>
+      <SlMenuItem value="dogs">Dogs</SlMenuItem>
+    </SlSelect>
+    <br />
+    <SlCheckbox name="agree" value="yes">
+      I totally agree
+    </SlCheckbox>
+    <br /><br />
+    <SlButton submit>Submit</SlButton>
+  </SlForm>
+);
+```
+
 ## Form Control Validation
 
 Client-side validation can be enabled through the browser's [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) for many form controls. You can enable it using props such as `required`, `pattern`, `minlength`, and `maxlength`. As the user interacts with the form control, the `invalid` attribute will reflect its validity based on its current value and the constraints that have been defined.
@@ -105,6 +168,37 @@ To make a field required, use the `required` prop. The form will not be submitte
 </script>
 ```
 
+```jsx react
+import { 
+  SlButton,
+  SlCheckbox, 
+  SlForm, 
+  SlInput,
+  SlMenuItem, 
+  SlSelect,
+  SlTextarea
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlForm onSlSubmit={() => alert('All fields are valid!')}>
+    <SlInput name="name" label="Name" required />
+    <br />
+    <SlSelect label="Favorite Animal" clearable required>
+      <SlMenuItem value="birds">Birds</SlMenuItem>
+      <SlMenuItem value="cats">Cats</SlMenuItem>
+      <SlMenuItem value="dogs">Dogs</SlMenuItem>
+      <SlMenuItem value="other">Other</SlMenuItem>
+    </SlSelect>
+    <br />
+    <SlTextarea name="comment" label="Comment" required></SlTextarea>
+    <br />
+    <SlCheckbox required>Check me before submitting</SlCheckbox>
+    <br /><br />
+    <SlButton type="primary" submit>Submit</SlButton>
+  </SlForm>
+);
+```
+
 ### Input Patterns
 
 To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern), use the `pattern` attribute. This example only allows the letters A-Z, so the form will not submit if a number or symbol is entered. This only works with `<sl-input>` elements.
@@ -122,6 +216,22 @@ To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/
 </script>
 ```
 
+```jsx react
+import { 
+  SlButton,
+  SlForm, 
+  SlInput
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlForm onSlSubmit={() => alert('All fields are valid!')}>
+    <SlInput name="letters" required label="Letters" pattern="[A-Za-z]+" />
+    <br />
+    <SlButton type="primary" submit>Submit</SlButton>
+  </SlForm>
+);
+```
+
 ### Input Types
 
 Some input types will automatically trigger constraints, such as `email` and `url`.
@@ -141,6 +251,24 @@ Some input types will automatically trigger constraints, such as `email` and `ur
 </script>
 ```
 
+```jsx react
+import { 
+  SlButton,
+  SlForm, 
+  SlInput
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlForm onSlSubmit={() => alert('All fields are valid!')}>
+    <SlInput type="email" label="Email" placeholder="you@example.com" required />
+    <br />
+    <SlInput type="url" label="URL" placeholder="https://example.com/" required />
+    <br />
+    <SlButton type="primary" submit>Submit</SlButton>
+  </SlForm>
+);
+```
+
 ### Custom Validation
 
 To create a custom validation error, use the `setCustomValidity` method. The form will not be submitted when this method is called with anything other than an empty string, and its message will be shown by the browser as the validation error. To make the input valid again, call the method a second time with an empty string as the argument.
@@ -167,6 +295,44 @@ To create a custom validation error, use the `setCustomValidity` method. The for
 </script>
 ```
 
+```jsx react
+import { useRef, useState } from 'react';
+import { 
+  SlButton,
+  SlForm, 
+  SlInput
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const input = useRef(null);
+  const [value, setValue] = useState('');
+
+  function handleInput(event) {
+    setValue(event.target.value);
+
+    if (event.target.value === 'shoelace') {
+      input.current.setCustomValidity('');
+    } else {
+      input.current.setCustomValidity('Hey, you\'re supposed to type \'shoelace\' before submitting this!');
+    }
+  }
+
+  return (
+    <SlForm onSlSubmit={() => alert('All fields are valid!')}>
+      <SlInput 
+        ref={input}
+        label="Type 'shoelace'" 
+        required 
+        value={value} 
+        onSlInput={handleInput}
+      />
+      <br />
+      <SlButton type="primary" submit>Submit</SlButton>
+    </SlForm>
+  );
+};
+```
+
 ### Custom Validation Styles
 
 The `invalid` attribute reflects the form control's validity, so you can style invalid fields using the `[invalid]` selector. The example below demonstrates how you can give erroneous fields a different appearance. Type something other than "shoelace" to demonstrate this.
@@ -192,6 +358,35 @@ The `invalid` attribute reflects the form control's validity, so you can style i
 </style>
 ```
 
+```jsx react
+import { SlInput } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .custom-input[invalid]:not([disabled])::part(label),
+  .custom-input[invalid]:not([disabled])::part(help-text) {
+    color: rgb(var(--sl-color-danger-600));
+  }
+
+  .custom-input[invalid]:not([disabled])::part(base) {      
+    border-color: rgb(var(--sl-color-danger-500));
+  } 
+
+  .custom-input[invalid]:focus-within::part(base) {
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-danger-500) / var(--sl-focus-ring-alpha));
+  }
+`;
+
+const App = () => (
+  <>
+    <SlInput className="custom-input" required pattern="shoelace">
+      <small slot="help-text">Please enter "shoelace" to continue</small>
+    </SlInput>
+
+    <style>{css}</style>
+  </>
+);
+```
+
 ### Third-party Validation
 
 To opt out of the browser's built-in validation and use your own, add the `novalidate` attribute to the form. This will ignore all constraints and prevent the browser from showing its own warnings when form controls are invalid.

docs/components/format-bytes.md

@@ -20,6 +20,34 @@ Formats a number as a human readable bytes value.
 </script>
 ```
 
+
+```jsx react
+import { useState } from 'react';
+import { 
+  SlButton, 
+  SlFormatBytes, 
+  SlInput 
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const [value, setValue] = useState(1000);
+
+  return (
+    <>
+      The file is <SlFormatBytes value={value} /> in size.
+      <br /><br />
+      <SlInput 
+        type="number" 
+        value={value}
+        label="Number to Format" 
+        style={{ maxWidth: '180px' }}
+        onSlInput={event => setValue(event.target.value)}
+      />
+    </>
+  );
+};
+```
+
 ## Examples
 
 ### Formatting Bytes
@@ -33,6 +61,20 @@ Set the `value` attribute to a number to get the value in bytes.
 <sl-format-bytes value="1200000000"></sl-format-bytes>
 ```
 
+
+```jsx react
+import { SlFormatBytes } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlFormatBytes value="12" /><br />
+    <SlFormatBytes value="1200" /><br />
+    <SlFormatBytes value="1200000" /><br />
+    <SlFormatBytes value="1200000000" />
+  </>
+);
+```
+
 ### Formatting Bits
 
 To get the value in bits, set the `unit` attribute to `bits`.
@@ -44,6 +86,19 @@ To get the value in bits, set the `unit` attribute to `bits`.
 <sl-format-bytes value="1200000000" unit="bits"></sl-format-bytes>
 ```
 
+```jsx react
+import { SlFormatBytes } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlFormatBytes value="12" unit="bits" /><br />
+    <SlFormatBytes value="1200" unit="bits" /><br />
+    <SlFormatBytes value="1200000" unit="bits" /><br />
+    <SlFormatBytes value="1200000000" unit="bits" />
+  </>
+);
+```
+
 ### Localization
 
 Use the `locale` attribute to set the number formatting locale.
@@ -55,4 +110,17 @@ Use the `locale` attribute to set the number formatting locale.
 <sl-format-bytes value="1200000000" locale="de"></sl-format-bytes>
 ```
 
+```jsx react
+import { SlFormatBytes } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlFormatBytes value="12" locale="de" /><br />
+    <SlFormatBytes value="1200" locale="de" /><br />
+    <SlFormatBytes value="1200000" locale="de" /><br />
+    <SlFormatBytes value="1200000000" locale="de" />
+  </>
+);
+```
+
 [component-metadata:sl-format-bytes]

docs/components/format-date.md

@@ -11,11 +11,18 @@ Localization is handled by the browser's [`Intl.DateTimeFormat` API](https://dev
 <sl-format-date date="2020-07-15T09:17:00-04:00"></sl-format-date>
 ```
 
+```jsx react
+import { SlFormatDate } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlFormatDate date="2020-07-15T09:17:00-04:00" />
+);
+```
+
 The `date` attribute determines the date/time to use when formatting. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript. If omitted, the current date/time will be assumed.
 
 ?> When using strings, avoid ambiguous dates such as `03/04/2020` which can be interpreted as March 4 or April 3 depending on the user's browser and locale. Instead, always use a valid [ISO 8601 date time string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Date_Time_String_Format) to ensure the date will be parsed properly by all clients.
 
-
 ## Examples
 
 ### Date & Time Formatting
@@ -42,6 +49,32 @@ Formatting options are based on those found in the [`Intl.DateTimeFormat` API](h
 <sl-format-date></sl-format-date>
 ```
 
+```jsx react
+import { SlFormatDate } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    {/* Human-readable date */}
+    <SlFormatDate month="long" day="numeric" year="numeric" /><br />
+
+    {/* Time */}
+    <SlFormatDate hour="numeric" minute="numeric" /><br />
+
+    {/* Weekday */}
+    <SlFormatDate weekday="long" /><br />
+
+    {/* Month */}
+    <SlFormatDate month="long" /><br />
+
+    {/* Year */}
+    <SlFormatDate year="numeric" /><br />
+
+    {/* No formatting options */}
+    <SlFormatDate />
+  </>
+);
+```
+
 ### Hour Formatting
 
 By default, the browser will determine whether to use 12-hour or 24-hour time. To force one or the other, set the `hour-format` attribute to `12` or `24`.
@@ -51,6 +84,17 @@ By default, the browser will determine whether to use 12-hour or 24-hour time. T
 <sl-format-date hour="numeric" minute="numeric" hour-format="24"></sl-format-date>
 ```
 
+```jsx react
+import { SlFormatDate } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlFormatDate hour="numeric" minute="numeric" hour-format="12" /><br />
+    <SlFormatDate hour="numeric" minute="numeric" hour-format="24" />
+  </>
+);
+```
+
 ### Localization
 
 Use the `locale` attribute to set the date/time formatting locale.
@@ -58,7 +102,19 @@ Use the `locale` attribute to set the date/time formatting locale.
 ```html preview
 English: <sl-format-date locale="en"></sl-format-date><br>
 French: <sl-format-date locale="fr"></sl-format-date><br>
-Russian: <sl-format-date locale="ru"></sl-format-date><br>
+Russian: <sl-format-date locale="ru"></sl-format-date>
+```
+
+```jsx react
+import { SlFormatDate } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    English: <SlFormatDate locale="en" /><br />
+    French: <SlFormatDate locale="fr" /><br />
+    Russian: <SlFormatDate locale="ru" />
+  </>
+);
 ```
 
 [component-metadata:sl-format-date]

docs/components/format-number.md

@@ -22,6 +22,29 @@ Localization is handled by the browser's [`Intl.NumberFormat` API](https://devel
 </script>
 ```
 
+```jsx react
+import { useState } from 'react';
+import { SlFormatNumber, SlInput } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const [value, setValue] = useState(1000);
+
+  return (
+    <>
+      <SlFormatNumber value={value} />
+      <br /><br />
+      <SlInput 
+        type="number" 
+        value={value} 
+        label="Number to Format" 
+        style={{ maxWidth: '180px' }}
+        onSlInput={event => setValue(event.target.value)}
+      />
+    </>
+  );
+};
+```
+
 ## Examples
 
 ### Percentages
@@ -30,12 +53,26 @@ To get the value as a percent, set the `type` attribute to `percent`.
 
 ```html preview
 <sl-format-number type="percent" value="0"></sl-format-number><br>
-<sl-format-number type="percent" value=".25"></sl-format-number><br>
-<sl-format-number type="percent" value=".50"></sl-format-number><br>
-<sl-format-number type="percent" value=".75"></sl-format-number><br>
+<sl-format-number type="percent" value="0.25"></sl-format-number><br>
+<sl-format-number type="percent" value="0.50"></sl-format-number><br>
+<sl-format-number type="percent" value="0.75"></sl-format-number><br>
 <sl-format-number type="percent" value="1"></sl-format-number>
 ```
 
+```jsx react
+import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlFormatNumber type="percent" value={0} /><br />
+    <SlFormatNumber type="percent" value={0.25} /><br />
+    <SlFormatNumber type="percent" value={0.50} /><br />
+    <SlFormatNumber type="percent" value={0.75} /><br />
+    <SlFormatNumber type="percent" value={1} />  
+  </>
+);
+```
+
 ### Localization
 
 Use the `locale` attribute to set the number formatting locale.
@@ -46,6 +83,18 @@ German: <sl-format-number value="2000" locale="de" minimum-fraction-digits="2"><
 Russian: <sl-format-number value="2000" locale="ru" minimum-fraction-digits="2"></sl-format-number>
 ```
 
+```jsx react
+import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    English: <SlFormatNumber value="2000" locale="en" minimum-fraction-digits="2" /><br />
+    German: <SlFormatNumber value="2000" locale="de" minimum-fraction-digits="2" /><br />
+    Russian: <SlFormatNumber value="2000" locale="ru" minimum-fraction-digits="2" />
+  </>
+);
+```
+
 ### Currency
 
 To format a number as a monetary value, set the `type` attribute to `currency` and set the `currency` attribute to the desired ISO 4217 currency code. You should also specify `locale` to ensure the the number is formatted correctly for the target locale.
@@ -58,4 +107,18 @@ To format a number as a monetary value, set the `type` attribute to `currency` a
 <sl-format-number type="currency" currency="CNY" value="2000" locale="zh-cn"></sl-format-number>
 ```
 
+```jsx react
+import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlFormatNumber type="currency" currency="USD" value="2000" locale="en-US" /><br />
+    <SlFormatNumber type="currency" currency="GBP" value="2000" locale="en-GB" /><br />
+    <SlFormatNumber type="currency" currency="EUR" value="2000" locale="de" /><br />
+    <SlFormatNumber type="currency" currency="RUB" value="2000" locale="ru" /><br />
+    <SlFormatNumber type="currency" currency="CNY" value="2000" locale="zh-cn" />
+  </>
+);
+```
+
 [component-metadata:sl-format-number]

docs/components/icon-button.md

@@ -10,6 +10,14 @@ For a full list of icons that come bundled with Shoelace, refer to the [icon com
 <sl-icon-button name="gear" label="Settings"></sl-icon-button>
 ```
 
+```jsx react
+import { SlIconButton } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlIconButton name="gear" label="Settings" />
+);
+```
+
 ## Examples
 
 ### Sizes
@@ -22,6 +30,18 @@ Icon buttons inherit their parent element's `font-size`.
 <sl-icon-button name="pencil" label="Edit" style="font-size: 2.5rem;"></sl-icon-button>
 ```
 
+```jsx react
+import { SlIconButton } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlIconButton name="pencil" label="Edit" style={{ fontSize: '1.5rem' }} />
+    <SlIconButton name="pencil" label="Edit" style={{ fontSize: '2rem' }} />
+    <SlIconButton name="pencil" label="Edit" style={{ fontSize: '2.5rem' }} />
+  </>
+);
+```
+
 ### Colors
 
 Icon buttons are designed to have a uniform appearance, so their color is not inherited. However, you can still customize them by styling the `base` part.
@@ -49,6 +69,37 @@ Icon buttons are designed to have a uniform appearance, so their color is not in
 </style>
 ```
 
+```jsx react
+import { SlIconButton } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .icon-button-color sl-icon-button::part(base) {
+    color: #b00091;
+  }
+
+  .icon-button-color sl-icon-button::part(base):hover,
+  .icon-button-color sl-icon-button::part(base):focus {
+    color: #c913aa;
+  }
+
+  .icon-button-color sl-icon-button::part(base):active {
+    color: #960077;
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="icon-button-color">
+      <SlIconButton name="type-bold" label="Bold" />
+      <SlIconButton name="type-italic" label="Italic" />
+      <SlIconButton name="type-underline" label="Underline" />
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+```
+
 ### Link Buttons
 
 Use the `href` attribute to convert the button to a link.
@@ -57,6 +108,19 @@ Use the `href` attribute to convert the button to a link.
 <sl-icon-button name="gear" label="Settings" href="https://example.com" target="_blank"></sl-icon-button>
 ```
 
+```jsx react
+import { SlIconButton } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlIconButton 
+    name="gear" 
+    label="Settings" 
+    href="https://example.com" 
+    target="_blank"
+  />
+);
+```
+
 ### Icon Button with Tooltip
 
 Wrap a tooltip around an icon button to provide contextual information to the user.
@@ -67,6 +131,16 @@ Wrap a tooltip around an icon button to provide contextual information to the us
 </sl-tooltip>
 ```
 
+```jsx react
+import { SlIconButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTooltip content="Settings">
+    <SlIconButton name="gear" label="Settings" />
+  </SlTooltip>
+);
+```
+
 ### Disabled
 
 Use the `disabled` attribute to disable the icon button.
@@ -75,4 +149,12 @@ Use the `disabled` attribute to disable the icon button.
 <sl-icon-button name="gear" label="Settings" disabled></sl-icon-button>
 ```
 
+```jsx react
+import { SlIconButton } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlIconButton name="gear" label="Settings" disabled />
+);
+```
+
 [component-metadata:sl-icon-button]

docs/components/icon.md

@@ -40,6 +40,7 @@ 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>
@@ -50,16 +51,49 @@ 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>
 ```
 
+```jsx react
+import { SlIcon } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <div style={{ fontSize: '32px' }}>
+    <SlIcon name="exclamation-triangle" />
+    <SlIcon name="archive" />
+    <SlIcon name="battery-charging" />
+    <SlIcon name="bell" />
+    <SlIcon name="clock" />
+    <SlIcon name="cloud" />
+    <SlIcon name="download" />
+    <SlIcon name="file-earmark" />
+    <SlIcon name="flag" />
+    <SlIcon name="heart" />
+    <SlIcon name="image" />
+    <SlIcon name="lightning" />
+    <SlIcon name="mic" />
+    <SlIcon name="search" />
+    <SlIcon name="star" />
+    <SlIcon name="trash" />
+  </div>  
+);
+```
+
 ### Custom Icons
 
 Custom icons can be loaded individually with the `src` attribute. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon, it might make sense to register a [custom icon library](#icon-libraries).
 
 ```html preview
-<sl-icon src="/assets/images/shoe.svg" style="font-size: 8rem;"></sl-icon>
+<sl-icon src="https://shoelace.style/assets/images/shoe.svg" style="font-size: 8rem;"></sl-icon>
+```
+
+
+```jsx react
+import { SlIcon } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlIcon src="https://shoelace.style/assets/images/shoe.svg" style={{ fontSize: '8rem' }}></SlIcon>
+);
 ```
 
 ## Icon Libraries
@@ -509,7 +543,7 @@ If you want to change the icons Shoelace uses internally, you can register an ic
         item.setAttribute('data-name', i.name);
         item.setAttribute('data-terms', [i.name, i.title, ...(i.tags || []), ...(i.categories || [])].join(' '));
         item.innerHTML = `
-          <svg width="1em" height="1em">
+          <svg width="1em" height="1em" fill="currentColor">
             <use xlink:href="/assets/icons/sprite.svg#${i.name}"></use>
           </svg>      
         `;

docs/components/image-comparer.md

@@ -13,6 +13,17 @@ For best results, use images that share the same dimensions. The slider can be c
 </sl-image-comparer>
 ```
 
+```jsx react
+import { SlImageComparer } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlImageComparer>
+    <img slot="before" src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80&sat=-100&bri=-5" alt="Grayscale version of kittens in a basket looking around." />
+    <img slot="after" src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="Color version of kittens in a basket looking around." />
+  </SlImageComparer>
+);
+```
+
 ## Examples
 
 ### Initial Position
@@ -26,4 +37,15 @@ Use the `position` attribute to set the initial position of the slider. This is
 </sl-image-comparer>
 ```
 
+```jsx react
+import { SlImageComparer } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlImageComparer position={25}>
+    <img slot="before" src="https://images.unsplash.com/photo-1520903074185-8eca362b3dce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80" alt="A person sitting on bricks wearing untied boots." />
+    <img slot="after" src="https://images.unsplash.com/photo-1520640023173-50a135e35804?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="A person sitting on a yellow curb tying shoelaces on a boot." />
+  </SlImageComparer>
+);
+```
+
 [component-metadata:sl-image-comparer]

docs/components/include.md

@@ -8,8 +8,16 @@ Included files are asynchronously requested using `window.fetch()`. Requests are
 
 The included content will be inserted into the `<sl-include>` element's default slot so it can be easily accessed and styled through the light DOM.
 
-```html preview no-codepen
-<sl-include src="/assets/examples/include.html"></sl-include>
+```html preview
+<sl-include src="https://shoelace.style/assets/examples/include.html"></sl-include>
+```
+
+```jsx react
+import { SlInclude } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlInclude src="https://shoelace.style/assets/examples/include.html" />
+);
 ```
 
 ## Examples
@@ -21,7 +29,7 @@ When an include file loads successfully, the `sl-load` event will be emitted. Yo
 If the request fails, the `sl-error` event will be emitted. In this case, `event.detail.status` will contain the resulting HTTP status code of the request, e.g. 404 (not found).
 
 ```html
-<sl-include src="/assets/examples/include.html"></sl-include>
+<sl-include src="https://shoelace.style/assets/examples/include.html"></sl-include>
 
 <script>
   const include = document.querySelector('sl-include');

docs/components/input.md

@@ -8,6 +8,14 @@ Inputs collect data from the user.
 <sl-input></sl-input>
 ```
 
+```jsx react
+import { SlInput } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlInput />
+);
+```
+
 ?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
 
 ?> Please refer to the section on [form control validation](/components/form?id=form-control-validation) to learn how to do client-side validation.
@@ -22,6 +30,14 @@ Use the `placeholder` attribute to add a placeholder.
 <sl-input placeholder="Type something"></sl-input>
 ```
 
+```jsx react
+import { SlInput } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlInput placeholder="Type something" />
+);
+```
+
 ### Clearable
 
 Add the `clearable` attribute to add a clear button when the input has content.
@@ -30,6 +46,14 @@ Add the `clearable` attribute to add a clear button when the input has content.
 <sl-input placeholder="Clearable" clearable></sl-input>
 ```
 
+```jsx react
+import { SlInput } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlInput placeholder="Clearable" clearable />
+);
+```
+
 ### Toggle Password
 
 Add the `toggle-password` attribute to add a toggle button that will show the password when activated.
@@ -42,6 +66,20 @@ Add the `toggle-password` attribute to add a toggle button that will show the pa
 <sl-input type="password" placeholder="Password Toggle" size="large" toggle-password></sl-input>
 ```
 
+```jsx react
+import { SlInput } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlInput type="password" placeholder="Password Toggle" size="small" toggle-password />
+    <br />
+    <SlInput type="password" placeholder="Password Toggle" size="medium" toggle-password />
+    <br />
+    <SlInput type="password" placeholder="Password Toggle" size="large" toggle-password />  
+  </>
+);
+```
+
 ### Filled Inputs
 
 Add the `filled` attribute to draw a filled input.
@@ -50,6 +88,14 @@ Add the `filled` attribute to draw a filled input.
 <sl-input placeholder="Type something" filled></sl-input>
 ```
 
+```jsx react
+import { SlInput } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlInput placeholder="Type something" filled />
+);
+```
+
 ### Pill
 
 Use the `pill` attribute to give inputs rounded edges.
@@ -62,6 +108,20 @@ Use the `pill` attribute to give inputs rounded edges.
 <sl-input placeholder="Large" size="large" pill></sl-input>
 ```
 
+```jsx react
+import { SlInput } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlInput placeholder="Small" size="small" pill />
+    <br />
+    <SlInput placeholder="Medium" size="medium" pill />
+    <br />
+    <SlInput placeholder="Large" size="large" pill />
+  </>
+);
+```
+
 ### Input Types
 
 The `type` attribute controls the type of input the browser renders.
@@ -74,6 +134,20 @@ The `type` attribute controls the type of input the browser renders.
 <sl-input type="date" Placeholder="Date"></sl-input>
 ```
 
+```jsx react
+import { SlInput } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlInput type="email" Placeholder="Email" />
+    <br />
+    <SlInput type="number" Placeholder="Number" />
+    <br />
+    <SlInput type="date" Placeholder="Date" />
+  </>
+);
+```
+
 ### Disabled
 
 Use the `disabled` attribute to disable an input.
@@ -86,6 +160,20 @@ Use the `disabled` attribute to disable an input.
 <sl-input placeholder="Disabled" size="large" disabled></sl-input>
 ```
 
+```jsx react
+import { SlInput } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlInput placeholder="Disabled" size="small" disabled />
+    <br />
+    <SlInput placeholder="Disabled" size="medium" disabled />
+    <br />
+    <SlInput placeholder="Disabled" size="large" disabled />
+  </>
+);
+```
+
 ### Sizes
 
 Use the `size` attribute to change an input's size.
@@ -98,6 +186,20 @@ Use the `size` attribute to change an input's size.
 <sl-input placeholder="Large" size="large"></sl-input>
 ```
 
+```jsx react
+import { SlInput } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlInput placeholder="Small" size="small" />
+    <br />
+    <SlInput placeholder="Medium" size="medium" />
+    <br />
+    <SlInput placeholder="Large" size="large" />
+  </>
+);
+```
+
 ### Prefix & Suffix Icons
 
 Use the `prefix` and `suffix` slots to add icons.
@@ -119,6 +221,29 @@ Use the `prefix` and `suffix` slots to add icons.
 </sl-input>
 ```
 
+```jsx react
+import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlInput placeholder="Small" size="small">
+      <SlIcon name="house" slot="prefix"></SlIcon>
+      <SlIcon name="chat" slot="suffix"></SlIcon>
+    </SlInput>
+    <br />
+    <SlInput placeholder="Medium" size="medium">
+      <SlIcon name="house" slot="prefix"></SlIcon>
+      <SlIcon name="chat" slot="suffix"></SlIcon>
+    </SlInput>
+    <br />
+    <SlInput placeholder="Large" size="large">
+      <SlIcon name="house" slot="prefix"></SlIcon>
+      <SlIcon name="chat" slot="suffix"></SlIcon>
+    </SlInput>
+  </>
+);
+```
+
 ### Labels
 
 Use the `label` attribute to give the input an accessible label. For labels that contain HTML, use the `label` slot instead.
@@ -127,6 +252,14 @@ Use the `label` attribute to give the input an accessible label. For labels that
 <sl-input label="What is your name?"></sl-input>
 ```
 
+```jsx react
+import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlInput label="What is your name?" />
+);
+```
+
 ### Help Text
 
 Add descriptive help text to an input with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
@@ -138,4 +271,15 @@ Add descriptive help text to an input with the `help-text` attribute. For help t
 ></sl-input>
 ```
 
+```jsx react
+import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlInput 
+    label="Nickname" 
+    help-text="What would you like people to call you?" 
+  />
+);
+```
+
 [component-metadata:sl-input]

docs/components/menu-item.md

@@ -24,6 +24,41 @@ Menu items provide options for the user to pick from in a menu.
 </sl-menu>
 ```
 
+```jsx react
+import { 
+  SlDivider,
+  SlIcon,
+  SlMenu,
+  SlMenuItem
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlMenu 
+    style={{
+      maxWidth: '200px',
+      border: 'solid 1px rgb(var(--sl-panel-border-color))',
+      borderRadius: 'var(--sl-border-radius-medium)'
+    }}
+  >
+    <SlMenuItem>Option 1</SlMenuItem>
+    <SlMenuItem>Option 2</SlMenuItem>
+    <SlMenuItem>Option 3</SlMenuItem>
+    <SlDivider />
+    <SlMenuItem checked>Checked</SlMenuItem>
+    <SlMenuItem disabled>Disabled</SlMenuItem>
+    <SlDivider />
+    <SlMenuItem>
+      Prefix Icon
+      <SlIcon slot="prefix" name="gift" />
+    </SlMenuItem>
+    <SlMenuItem>
+      Suffix Icon
+      <SlIcon slot="suffix" name="heart" />
+    </SlMenuItem>
+  </SlMenu>  
+);
+```
+
 ## Examples
 
 ### Checked
@@ -38,6 +73,27 @@ Use the `checked` attribute to draw menu items in a checked state.
 </sl-menu>
 ```
 
+```jsx react
+import { 
+  SlMenu,
+  SlMenuItem
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlMenu 
+    style={{
+      maxWidth: '200px',
+      border: 'solid 1px rgb(var(--sl-panel-border-color))',
+      borderRadius: 'var(--sl-border-radius-medium)'
+    }}
+  >
+    <SlMenuItem>Option 1</SlMenuItem>
+    <SlMenuItem checked>Option 2</SlMenuItem>
+    <SlMenuItem>Option 3</SlMenuItem>
+  </SlMenu>  
+);
+```
+
 ### Disabled
 
 Add the `disabled` attribute to disable the menu item so it cannot be selected.
@@ -50,6 +106,27 @@ Add the `disabled` attribute to disable the menu item so it cannot be selected.
 </sl-menu>
 ```
 
+```jsx react
+import { 
+  SlMenu,
+  SlMenuItem
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlMenu 
+    style={{
+      maxWidth: '200px',
+      border: 'solid 1px rgb(var(--sl-panel-border-color))',
+      borderRadius: 'var(--sl-border-radius-medium)'
+    }}
+  >
+    <SlMenuItem>Option 1</SlMenuItem>
+    <SlMenuItem disabled>Option 2</SlMenuItem>
+    <SlMenuItem>Option 3</SlMenuItem>
+  </SlMenu>  
+);
+```
+
 ### Prefix & Suffix
 
 Add content to the start and end of menu items using the `prefix` and `suffix` slots.
@@ -76,6 +153,44 @@ Add content to the start and end of menu items using the `prefix` and `suffix` s
 </sl-menu>
 ```
 
+```jsx react
+import {
+  SlBadge,
+  SlDivider,
+  SlIcon,
+  SlMenu,
+  SlMenuItem
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlMenu 
+    style={{
+      maxWidth: '200px',
+      border: 'solid 1px rgb(var(--sl-panel-border-color))',
+      borderRadius: 'var(--sl-border-radius-medium)'
+    }}
+  >
+    <SlMenuItem>
+      <SlIcon slot="prefix" name="house" />
+      Home
+    </SlMenuItem>
+
+    <SlMenuItem>
+      <SlIcon slot="prefix" name="envelope" />
+      Messages
+      <SlBadge slot="suffix" type="primary" pill>12</SlBadge>
+    </SlMenuItem>
+
+    <SlDivider />
+
+    <SlMenuItem>
+      <SlIcon slot="prefix" name="gear" />
+      Settings
+    </SlMenuItem>
+  </SlMenu>  
+);
+```
+
 ### Value & Selection
 
 The `value` attribute can be used to assign a hidden value, such as a unique identifier, to a menu item. When an item is selected, the `sl-select` event will be emitted and a reference to the item will be available at `event.detail.item`. You can use this reference to access the selected item's value, its checked state, and more.
@@ -102,4 +217,39 @@ The `value` attribute can be used to assign a hidden value, such as a unique ide
 </script>
 ```
 
+```jsx react
+import { 
+  SlMenu,
+  SlMenuItem
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+
+  function handleSelect(event) {
+    const item = event.detail.item;
+
+    // Toggle checked state
+    item.checked = !item.checked;
+
+    // Log value
+    console.log(`Selected value: ${item.value}`);
+  }
+
+  return (
+    <SlMenu 
+      style={{
+        maxWidth: '200px',
+        border: 'solid 1px rgb(var(--sl-panel-border-color))',
+        borderRadius: 'var(--sl-border-radius-medium)'
+      }}
+      onSlSelect={handleSelect}
+    >
+      <SlMenuItem value="opt-1">Option 1</SlMenuItem>
+      <SlMenuItem value="opt-2">Option 2</SlMenuItem>
+      <SlMenuItem value="opt-3">Option 3</SlMenuItem>
+    </SlMenu>
+  );
+};
+```
+
 [component-metadata:sl-menu-item]

docs/components/menu-label.md

@@ -20,4 +20,33 @@ Menu labels are used to describe a group of menu items.
 </sl-menu>
 ```
 
+```jsx react
+import { 
+  SlDivider,
+  SlMenu,
+  SlMenuLabel,
+  SlMenuItem
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlMenu 
+    style={{
+      maxWidth: '200px',
+      border: 'solid 1px rgb(var(--sl-panel-border-color))',
+      borderRadius: 'var(--sl-border-radius-medium)'
+    }}
+  >
+    <SlMenuLabel>Fruits</SlMenuLabel>
+    <SlMenuItem value="apple">Apple</SlMenuItem>
+    <SlMenuItem value="banana">Banana</SlMenuItem>
+    <SlMenuItem value="orange">Orange</SlMenuItem>
+    <SlDivider />
+    <SlMenuLabel>Vegetables</SlMenuLabel>
+    <SlMenuItem value="broccoli">Broccoli</SlMenuItem>
+    <SlMenuItem value="carrot">Carrot</SlMenuItem>
+    <SlMenuItem value="zucchini">Zucchini</SlMenuItem>
+  </SlMenu>  
+);
+```
+
 [component-metadata:sl-menu-label]

docs/components/menu.md

@@ -18,6 +18,32 @@ You can use [menu items](/components/menu-item), [menu labels](/components/menu-
 </sl-menu>
 ```
 
+```jsx react
+import { 
+  SlDivider,
+  SlMenu,
+  SlMenuItem
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlMenu 
+    style={{
+      maxWidth: '200px',
+      border: 'solid 1px rgb(var(--sl-panel-border-color))',
+      borderRadius: 'var(--sl-border-radius-medium)'
+    }}
+  >
+    <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>
+    <SlMenuItem value="delete">Delete</SlMenuItem>
+  </SlMenu>  
+);
+```
+
 ?> 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.
 
 [component-metadata:sl-menu]

docs/components/mutation-observer.md

@@ -8,7 +8,7 @@ The mutation observer will report changes to the content it wraps through the `s
 
 ```html preview
 <div class="mutation-overview">
-  <sl-mutation-observer attr>
+  <sl-mutation-observer attr="type">
     <sl-button type="primary">Click to mutate</sl-button>
   </sl-mutation-observer>
 
@@ -42,6 +42,47 @@ The mutation observer will report changes to the content it wraps through the `s
 </div>
 ```
 
+```jsx react
+import { useState } from 'react';
+import { SlButton, SlMutationObserver } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .resize-observer-overview div {
+    display: flex; 
+    border: solid 2px rgb(var(--sl-input-border-color)); 
+    align-items: center; 
+    justify-content: center;
+    text-align: center;
+    padding: 4rem 2rem;
+  }
+`;
+
+const types = ['primary', 'success', 'neutral', 'warning', 'danger']; 
+let clicks = 0;
+
+const App = () => {
+  const [type, setType] = useState('primary');
+
+  function handleClick() {
+    clicks++;
+    setType(types[clicks % types.length]);
+  }
+
+  return (
+    <>
+      <SlMutationObserver 
+        attr="*"
+        onSlMutation={event => console.log(event.detail)}
+      >
+        <SlButton type={type} onClick={handleClick}>Click to mutate</SlButton>
+      </SlMutationObserver>
+
+      <style>{css}</style>
+    </>
+  );
+};
+```
+
 ?> When you create a mutation observer, you must indicate what changes it should respond to by including at least one of `attr`, `child-list`, or `char-data`. If you don't specify at least one of these attributes, no mutation events will be emitted.
 
 ## Examples
@@ -101,4 +142,55 @@ Use the `child-list` attribute to watch for new child elements that are added or
 </div>
 ```
 
+```jsx react
+import { useState } from 'react';
+import { SlButton, SlMutationObserver } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .mutation-child-list .buttons {
+    display: flex;
+    gap: .25rem;
+    flex-wrap: wrap;
+    margin-bottom: 1rem;
+  }
+`;
+
+let buttonCount = 0;
+
+const App = () => {
+  const [buttonIds, setButtonIds] = useState([]);
+
+  function addButton() {
+    setButtonIds([...buttonIds, ++buttonCount]);
+  }
+
+  function removeButton(id) {
+    setButtonIds(buttonIds.filter(i => i !== id));
+  }
+
+  return (
+    <>
+      <div className="mutation-child-list">
+        <SlMutationObserver 
+          child-list 
+          onSlMutation={event => console.log(event.detail)}
+        >
+          <div className="buttons">
+            <SlButton type="primary" onClick={addButton}>Add button</SlButton>
+            {buttonIds.map(id => (
+              <SlButton key={id} type="default" onClick={() => removeButton(id)}>
+                {id}
+              </SlButton>
+            ))}
+          </div>
+        </SlMutationObserver>
+      </div>
+
+      👆 Add and remove buttons and watch the console
+      <style>{css}</style>
+    </>
+  );
+};
+```
+
 [component-metadata:sl-mutation-observer]

docs/components/progress-bar.md

@@ -8,6 +8,14 @@ Progress bars are used to show the status of an ongoing operation.
 <sl-progress-bar value="50"></sl-progress-bar>
 ```
 
+```jsx react
+import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlProgressBar value={50} />
+);
+```
+
 ## Examples
 
 ### Custom Height
@@ -18,6 +26,17 @@ Use the `--height` custom property to set the progress bar's height.
 <sl-progress-bar value="50" style="--height: 6px;"></sl-progress-bar>
 ```
 
+```jsx react
+import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlProgressBar 
+    value={50}
+    style={{ '--height': '6px' }}
+  />
+);
+```
+
 ### Labels
 
 Use the `label` attribute to label the progress bar and tell assistive devices how to announce it.
@@ -26,6 +45,17 @@ Use the `label` attribute to label the progress bar and tell assistive devices h
 <sl-progress-bar value="50" label="Upload progress"></sl-progress-bar>
 ```
 
+```jsx react
+import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlProgressBar
+    value="50" 
+    label="Upload progress"
+  />
+);
+```
+
 ### Showing Values
 
 Use the default slot to show a value.
@@ -57,6 +87,44 @@ Use the default slot to show a value.
 </script>
 ```
 
+```jsx react
+import { useState } from 'react';
+import { 
+  SlButton,
+  SlIcon,
+  SlProgressBar
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const [value, setValue] = useState(50);
+
+  function adjustValue(amount) {
+    let newValue = value + amount;
+    if (newValue < 0) newValue = 0;
+    if (newValue > 100) newValue = 100;
+    setValue(newValue);
+  }
+
+  return (
+    <>
+      <SlProgressBar value={value}>
+        {value}%
+      </SlProgressBar>
+
+      <br />
+
+      <SlButton circle onClick={() => adjustValue(-10)}>
+        <SlIcon name="dash" />
+      </SlButton>
+
+      <SlButton circle onClick={() => adjustValue(10)}>
+        <SlIcon name="plus" />
+      </SlButton>
+    </>
+  );
+};
+```
+
 ### Indeterminate
 
 The `indeterminate` attribute can be used to inform the user that the operation is pending, but its status cannot currently be determined. In this state, `value` is ignored and the label, if present, will not be shown.
@@ -65,4 +133,12 @@ The `indeterminate` attribute can be used to inform the user that the operation
 <sl-progress-bar indeterminate></sl-progress-bar>
 ```
 
+```jsx react
+import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlProgressBar indeterminate />
+);
+```
+
 [component-metadata:sl-progress-bar]

docs/components/progress-ring.md

@@ -8,6 +8,14 @@ Progress rings are used to show the progress of a determinate operation in a cir
 <sl-progress-ring value="25"></sl-progress-ring>
 ```
 
+```jsx react
+import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlProgressRing value="25" />
+);
+```
+
 ## Examples
 
 ### Size
@@ -18,6 +26,17 @@ Use the `--size` custom property to set the diameter of the progress ring.
 <sl-progress-ring value="50" style="--size: 200px;"></sl-progress-ring>
 ```
 
+```jsx react
+import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlProgressRing 
+    value="50" 
+    style={{ '--size': '200px' }}
+  />
+);
+```
+
 ### Track Width
 
 Use the `--track-width` custom property to set the width of the progress ring's track.
@@ -26,6 +45,17 @@ Use the `--track-width` custom property to set the width of the progress ring's
 <sl-progress-ring value="50" style="--track-width: 10px;"></sl-progress-ring>
 ```
 
+```jsx react
+import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlProgressRing 
+    value="50" 
+    style={{ '--track-width': '10px' }}
+  />
+);
+```
+
 ### Colors
 
 To change the color, use the `--track-color` and `--indicator-color` custom properties.
@@ -40,6 +70,20 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop
 ></sl-progress-ring>
 ```
 
+```jsx react
+import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlProgressRing 
+    value="50" 
+    style={{ 
+      '--track-color': 'pink',
+      '--indicator-color': 'deeppink'
+    }}
+  />
+);
+```
+
 ### Labels
 
 Use the `label` attribute to label the progress ring and tell assistive devices how to announce it.
@@ -48,9 +92,20 @@ Use the `label` attribute to label the progress ring and tell assistive devices
 <sl-progress-ring value="50" label="Upload progress"></sl-progress-ring>
 ```
 
+```jsx react
+import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlProgressRing 
+    value="50" 
+    label="Upload progress"
+  />
+);
+```
+
 ### Showing Values
 
-Use the default slot to show a label.
+Use the default slot to show a label inside the progress ring.
 
 ```html preview
 <sl-progress-ring value="50" class="progress-ring-values" style="margin-bottom: .5rem;">50%</sl-progress-ring>
@@ -79,4 +134,45 @@ Use the default slot to show a label.
 </script>
 ```
 
+```jsx react
+import { useState } from 'react';
+import { 
+  SlButton,
+  SlIcon,
+  SlProgressRing
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const [value, setValue] = useState(50);
+
+  function adjustValue(amount) {
+    let newValue = value + amount;
+    if (newValue < 0) newValue = 0;
+    if (newValue > 100) newValue = 100;
+    setValue(newValue);
+  }
+
+  return (
+    <>
+      <SlProgressRing 
+        value={value} 
+        style={{ marginBottom: '.5rem' }}
+      >
+        {value}%
+      </SlProgressRing>
+
+      <br />
+
+      <SlButton circle onClick={() => adjustValue(-10)}>
+        <SlIcon name="dash" />
+      </SlButton>
+
+      <SlButton circle onClick={() => adjustValue(10)}>
+        <SlIcon name="plus" />
+      </SlButton>
+    </>
+  );
+};
+```
+
 [component-metadata:sl-progress-ring]

docs/components/qr-code.md

@@ -34,6 +34,38 @@ QR codes are useful for providing small pieces of information to users who can q
 </style>
 ```
 
+```jsx react
+import { useState } from 'react';
+import { SlQrCode, SlInput } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .qr-overview {
+    max-width: 256px;
+  }
+
+  .qr-overview sl-input {
+    margin-top: 1rem;
+  }
+`;
+
+const App = () => {
+  const [value, setValue] = useState('https://shoelace.style/');
+
+  return (
+    <>
+      <div className="qr-overview">
+        <SlQrCode value={value} label="Scan this code to visit Shoelace on the web!" />
+        <br />
+
+        <SlInput maxlength="255" clearable onInput={event => setValue(event.target.value)} />
+      </div>
+
+      <style>{css}</style>
+    </>
+  );
+};
+```
+
 ## Examples
 
 ### Colors
@@ -44,6 +76,14 @@ Use the `fill` and `background` attributes to modify the QR code's colors. You s
 <sl-qr-code value="https://shoelace.style/" fill="deeppink" background="white"></sl-qr-code>
 ```
 
+```jsx react
+import { SlQrCode } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlQrCode value="https://shoelace.style/" fill="deeppink" background="white" />
+);
+```
+
 ### Size
 
 Use the `size` attribute to change the size of the QR code.
@@ -52,6 +92,14 @@ Use the `size` attribute to change the size of the QR code.
 <sl-qr-code value="https://shoelace.style/" size="64"></sl-qr-code>
 ```
 
+```jsx react
+import { SlQrCode } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlQrCode value="https://shoelace.style/" size="64" />
+);
+```
+
 ### Radius
 
 Create a rounded effect with the `radius` attribute.
@@ -60,6 +108,14 @@ Create a rounded effect with the `radius` attribute.
 <sl-qr-code value="https://shoelace.style/" radius="0.5"></sl-qr-code>
 ```
 
+```jsx react
+import { SlQrCode } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlQrCode value="https://shoelace.style/" radius="0.5" />
+);
+```
+
 ### Error Correction
 
 QR codes can be rendered with various levels of [error correction](https://www.qrcode.com/en/about/error_correction.html) that can be set using the `error-correction` attribute. This example generates four codes with the same value using different error correction levels.
@@ -81,4 +137,31 @@ QR codes can be rendered with various levels of [error correction](https://www.q
 </style>
 ```
 
+```jsx react
+import { SlQrCode } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .qr-error-correction {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+`;
+
+const App = () => {
+  return (
+    <>
+      <div className="qr-error-correction">
+        <SlQrCode value="https://shoelace.style/" error-correction="L" />
+        <SlQrCode value="https://shoelace.style/" error-correction="M" />
+        <SlQrCode value="https://shoelace.style/" error-correction="Q" />
+        <SlQrCode value="https://shoelace.style/" error-correction="H" />
+      </div>
+
+      <style>{css}</style>
+    </>
+  );
+};
+```
+
 [component-metadata:sl-qr-code]

docs/components/radio-group.md

@@ -5,13 +5,25 @@
 Radio Groups are used to group multiple radios so they function as a single control.
 
 ```html preview
-<sl-radio-group label="Select an item">
-  <sl-radio value="1" checked>Item 1</sl-radio>
-  <sl-radio value="2">Item 2</sl-radio>
-  <sl-radio value="3">Item 3</sl-radio>
+<sl-radio-group label="Select an option">
+  <sl-radio value="1" checked>Option 1</sl-radio>
+  <sl-radio value="2">Option 2</sl-radio>
+  <sl-radio value="3">Option 3</sl-radio>
 </sl-radio-group>
 ```
 
+```jsx react
+import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRadioGroup label="Select an option">
+    <SlRadio value="1" checked>Option 1</SlRadio>
+    <SlRadio value="2">Option 2</SlRadio>
+    <SlRadio value="3">Option 3</SlRadio>
+  </SlRadioGroup>
+);
+```
+
 ## Examples
 
 ### Showing the Fieldset
@@ -19,11 +31,22 @@ Radio Groups are used to group multiple radios so they function as a single cont
 You can show a fieldset and legend that wraps the radio group using the `fieldset` attribute.
 
 ```html preview
-<sl-radio-group label="Select an item" fieldset>
-  <sl-radio value="1" checked>Item 1</sl-radio>
-  <sl-radio value="2">Item 2</sl-radio>
-  <sl-radio value="3">Item 3</sl-radio>
+<sl-radio-group label="Select an option" fieldset>
+  <sl-radio value="1" checked>Option 1</sl-radio>
+  <sl-radio value="2">Option 2</sl-radio>
+  <sl-radio value="3">Option 3</sl-radio>
 </sl-radio-group>
 ```
 
+```jsx react
+import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRadioGroup label="Select an option" fieldset>
+    <SlRadio value="1" checked>Option 1</SlRadio>
+    <SlRadio value="2">Option 2</SlRadio>
+    <SlRadio value="3">Option 3</SlRadio>
+  </SlRadioGroup>
+);
+```
 [component-metadata:sl-radio-group]

docs/components/radio.md

@@ -7,13 +7,25 @@ Radios allow the user to select one option from a group of many.
 Radios are designed to be used with [radio groups](/components/radio-group). As such, all of the examples on this page utilize them to demonstrate their correct usage.
 
 ```html preview
-<sl-radio-group label="Select an option" no-fieldset>
+<sl-radio-group label="Select an option">
   <sl-radio value="1" checked>Option 1</sl-radio>
   <sl-radio value="2">Option 2</sl-radio>
   <sl-radio value="3">Option 3</sl-radio>
 </sl-radio-group>
 ```
 
+```jsx react
+import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRadioGroup label="Select an option">
+    <SlRadio value="1" checked>Option 1</SlRadio>
+    <SlRadio value="2">Option 2</SlRadio>
+    <SlRadio value="3">Option 3</SlRadio>
+  </SlRadioGroup>
+);
+```
+
 ?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
 
 ## Examples
@@ -23,7 +35,7 @@ Radios are designed to be used with [radio groups](/components/radio-group). As
 Use the `disabled` attribute to disable a radio.
 
 ```html preview
-<sl-radio-group label="Select an option" no-fieldset>
+<sl-radio-group label="Select an option">
   <sl-radio value="1" checked>Option 1</sl-radio>
   <sl-radio value="2">Option 2</sl-radio>
   <sl-radio value="3">Option 3</sl-radio>
@@ -31,4 +43,17 @@ Use the `disabled` attribute to disable a radio.
 </sl-radio-group>
 ```
 
+```jsx react
+import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRadioGroup label="Select an option">
+    <SlRadio value="1" checked>Option 1</SlRadio>
+    <SlRadio value="2">Option 2</SlRadio>
+    <SlRadio value="3">Option 3</SlRadio>
+    <SlRadio value="4" disabled>Disabled</SlRadio>
+  </SlRadioGroup>
+);
+```
+
 [component-metadata:sl-radio]

docs/components/range.md

@@ -8,16 +8,49 @@ Ranges allow the user to select a single value within a given range using a slid
 <sl-range></sl-range>
 ```
 
+```jsx react
+import { SlRange } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRange />
+);
+```
+
 ?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
 
 ## Examples
 
+### Min, Max, and Step
+
+Use the `min` and `max` attributes to set the range's minimum and maximum values, respectively. The `step` attribute determines the value's interval when increasing and decreasing.
+
+```html preview
+<sl-range min="0" max="10" step="1"></sl-range>
+```
+
+```jsx react
+import { SlRange } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRange min={0} max={10} step={1} />
+);
+```
+
 ### Disabled
 
 Use the `disabled` attribute to disable a slider.
 
 ```html preview
-<sl-range min="0" max="100" step="1" disabled></sl-range>
+<sl-range disabled></sl-range>
+```
+
+
+```jsx react
+import { SlRange } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRange disabled />
+);
 ```
 
 ### Tooltip Placement
@@ -25,7 +58,15 @@ Use the `disabled` attribute to disable a slider.
 By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it below the slider.
 
 ```html preview
-<sl-range min="0" max="100" step="1" tooltip="bottom"></sl-range>
+<sl-range tooltip="bottom"></sl-range>
+```
+
+```jsx react
+import { SlRange } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRange tooltip="bottom" />
+);
 ```
 
 ### Disable the Tooltip
@@ -33,7 +74,15 @@ By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it be
 To disable the tooltip, set `tooltip` to `none`.
 
 ```html preview
-<sl-range min="0" max="100" step="1" tooltip="none"></sl-range>
+<sl-range tooltip="none"></sl-range>
+```
+
+```jsx react
+import { SlRange } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRange tooltip="none" />
+);
 ```
 
 ### Custom Track Colors
@@ -47,6 +96,19 @@ You can customize the active and inactive portions of the track using the `--tra
 "></sl-range>
 ```
 
+```jsx react
+import { SlRange } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRange 
+    style={{
+      '--track-color-active': 'rgb(var(--sl-color-primary-600))',
+      '--track-color-inactive': 'rgb(var(--sl-color-primary-200))'
+    }}
+  />
+);
+```
+
 ### Custom Tooltip Formatter
 
 You can change the tooltip's content by setting the `tooltipFormatter` property to a function that accepts the range's value as an argument.
@@ -60,6 +122,19 @@ You can change the tooltip's content by setting the `tooltipFormatter` property
 </script>
 ```
 
+```jsx react
+import { SlRange } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRange 
+    min={0}
+    max={100}
+    step={1}
+    tooltipFormatter={value => `Total - ${value}%`}
+  />
+);
+```
+
 ### Labels
 
 Use the `label` attribute to give the range an accessible label. For labels that contain HTML, use the `label` slot instead.
@@ -68,6 +143,14 @@ Use the `label` attribute to give the range an accessible label. For labels that
 <sl-range label="Volume" min="0" max="100"></sl-input>
 ```
 
+```jsx react
+import { SlRange } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRange label="Volume" min={0} max={100} />
+);
+```
+
 ### Help Text
 
 Add descriptive help text to a range with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
@@ -81,4 +164,17 @@ Add descriptive help text to a range with the `help-text` attribute. For help te
 ></sl-input>
 ```
 
+```jsx react
+import { SlRange } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRange 
+    label="Volume" 
+    help-text="Controls the volume of the current song."
+    min={0}
+    max={100}
+  />
+);
+```
+
 [component-metadata:sl-range]

docs/components/rating.md

@@ -8,6 +8,14 @@ Ratings give users a way to quickly view and provide feedback.
 <sl-rating></sl-rating>
 ```
 
+```jsx react
+import { SlRating } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRating />
+);
+```
+
 ## Examples
 
 ### Maximum Value
@@ -18,12 +26,28 @@ Ratings are 0-5 by default. To change the maximum possible value, use the `max`
 <sl-rating max="3"></sl-rating>
 ```
 
+```jsx react
+import { SlRating } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRating max={3} />
+);
+```
+
 ### Precision
 
 Use the `precision` attribute to let users select fractional ratings.
 
 ```html preview
-<sl-rating precision=".5" value="2.5"></sl-rating>
+<sl-rating precision="0.5" value="2.5"></sl-rating>
+```
+
+```jsx react
+import { SlRating } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRating precision={0.5} value={2.5} />
+);
 ```
 
 ## Symbol Sizes
@@ -34,6 +58,14 @@ Set the `--symbol-size` custom property to adjust the size.
 <sl-rating style="--symbol-size: 2rem;"></sl-rating>
 ```
 
+```jsx react
+import { SlRating } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRating style={{ '--symbol-size': '2rem' }} />
+);
+```
+
 ### Readonly
 
 Use the `readonly` attribute to display a rating that users can't change.
@@ -42,6 +74,14 @@ Use the `readonly` attribute to display a rating that users can't change.
 <sl-rating readonly value="3"></sl-rating>
 ```
 
+```jsx react
+import { SlRating } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRating readonly value={3} />
+);
+```
+
 ### Disabled
 
 Use the `disable` attribute to disable the rating.
@@ -50,6 +90,14 @@ Use the `disable` attribute to disable the rating.
 <sl-rating disabled value="3"></sl-rating>
 ```
 
+```jsx react
+import { SlRating } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRating disabled value={3} />
+);
+```
+
 ### Custom Icons
 
 ```html preview
@@ -61,6 +109,18 @@ Use the `disable` attribute to disable the rating.
 </script>
 ```
 
+```jsx react
+import '@shoelace-style/shoelace/dist/components/icon/icon';
+import { SlRating } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRating 
+    getSymbol={() => '<sl-icon name="heart-fill"></sl-icon>'}
+    style={{ '--symbol-color-active': '#ff4136' }} 
+  />
+);
+```
+
 ### Value-based Icons
 
 ```html preview
@@ -76,4 +136,18 @@ Use the `disable` attribute to disable the rating.
 </script>
 ```
 
+```jsx react
+import '@shoelace-style/shoelace/dist/components/icon/icon';
+import { SlRating } from '@shoelace-style/shoelace/dist/react';
+
+function getSymbol(value) {
+  const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
+  return `<sl-icon name="${icons[value - 1]}"></sl-icon>`;
+}
+
+const App = () => (
+  <SlRating getSymbol={getSymbol} />
+);
+```
+
 [component-metadata:sl-rating]

docs/components/relative-time.md

@@ -11,6 +11,14 @@ Localization is handled by the browser's [`Intl.RelativeTimeFormat` API](https:/
 <sl-relative-time date="2020-07-15T09:17:00-04:00"></sl-relative-time>
 ```
 
+```jsx react
+import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRelativeTime date="2020-07-15T09:17:00-04:00" />
+);
+```
+
 The `date` attribute determines when the date/time is calculated from. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript.
 
 ?> When using strings, avoid ambiguous dates such as `03/04/2020` which can be interpreted as March 4 or April 3 depending on the user's browser and locale. Instead, always use a valid [ISO 8601 date time string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Date_Time_String_Format) to ensure the date will be parsed properly by all clients.
@@ -36,6 +44,16 @@ Use the `sync` attribute to update the displayed value automatically as time pas
 </script>
 ```
 
+```jsx react
+import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
+
+const date = new Date(new Date().getTime() - 60000);
+
+const App = () => (
+  <SlRelativeTime date={date} sync />
+);
+```
+
 ### Formatting Styles
 
 You can change how the time is displayed using the `format` attribute. Note that some locales may display the same values for `narrow` and `short` formats.
@@ -46,6 +64,18 @@ You can change how the time is displayed using the `format` attribute. Note that
 <sl-relative-time date="2020-07-15T09:17:00-04:00" format="long"></sl-relative-time>
 ```
 
+```jsx react
+import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlRelativeTime date="2020-07-15T09:17:00-04:00" format="narrow" /><br />
+    <SlRelativeTime date="2020-07-15T09:17:00-04:00" format="short" /><br />
+    <SlRelativeTime date="2020-07-15T09:17:00-04:00" format="long" />
+  </>
+);
+```
+
 ### Localization
 
 Use the `locale` attribute to set the desired locale.
@@ -58,4 +88,18 @@ Greek: <sl-relative-time date="2020-07-15T09:17:00-04:00" locale="el"></sl-relat
 Russian: <sl-relative-time date="2020-07-15T09:17:00-04:00" locale="ru"></sl-relative-time>
 ```
 
+```jsx react
+import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    English: <SlRelativeTime date="2020-07-15T09:17:00-04:00" locale="en-US" /><br />
+    Chinese: <SlRelativeTime date="2020-07-15T09:17:00-04:00" locale="zh-CN" /><br />
+    German: <SlRelativeTime date="2020-07-15T09:17:00-04:00" locale="de" /><br />
+    Greek: <SlRelativeTime date="2020-07-15T09:17:00-04:00" locale="el" /><br />
+    Russian: <SlRelativeTime date="2020-07-15T09:17:00-04:00" locale="ru" />
+  </>
+);
+```
+
 [component-metadata:sl-relative-time]

docs/components/resize-observer.md

@@ -36,4 +36,33 @@ The resize observer will report changes to the dimensions of the elements it wra
 </style>
 ```
 
+```jsx react
+import { SlResizeObserver } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .resize-observer-overview div {
+    display: flex; 
+    border: solid 2px rgb(var(--sl-input-border-color)); 
+    align-items: center; 
+    justify-content: center;
+    text-align: center;
+    padding: 4rem 2rem;
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="resize-observer-overview">
+      <SlResizeObserver onSlResize={event => console.log(event.detail)}>
+        <div>
+          Resize this box and watch the console 👉
+        </div>
+      </SlResizeObserver>
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+```
+
 [component-metadata:sl-resize-observer]

docs/components/responsive-media.md

@@ -12,6 +12,19 @@ You can slot in any [replaced element](https://developer.mozilla.org/en-US/docs/
 </sl-responsive-media>
 ```
 
+```jsx react
+import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlResponsiveMedia>
+    <img 
+      src="https://images.unsplash.com/photo-1541427468627-a89a96e5ca1d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80"
+      alt="A train riding through autumn foliage with mountains in the distance."
+    />
+  </SlResponsiveMedia>
+);
+```
+
 ## Examples
 
 ### Responsive Images
@@ -24,6 +37,19 @@ The following image maintains a `4:3` aspect ratio as its container is resized.
 </sl-responsive-media>
 ```
 
+```jsx react
+import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlResponsiveMedia aspect-ratio="4:3">
+    <img 
+      src="https://images.unsplash.com/photo-1473186578172-c141e6798cf4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80" 
+      alt="Two blue chairs on a sandy beach."
+    />
+  </SlResponsiveMedia>
+);
+```
+
 ### Responsive Videos
 
 The following video is embedded using an `iframe` and maintains a `16:9` aspect ratio as its container is resized.
@@ -34,4 +60,14 @@ The following video is embedded using an `iframe` and maintains a `16:9` aspect
 </sl-responsive-media>
 ```
 
+```jsx react
+import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlResponsiveMedia aspect-ratio="16:9">
+    <iframe src="https://player.vimeo.com/video/1053647?title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen />
+  </SlResponsiveMedia>
+);
+```
+
 [component-metadata:sl-responsive-media]

docs/components/select.md

@@ -16,6 +16,22 @@ Selects allow you to choose one or more items from a dropdown menu.
 </sl-select>
 ```
 
+```jsx react
+import { SlDivider, SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlSelect>
+    <SlMenuItem value="option-1">Option 1</SlMenuItem>
+    <SlMenuItem value="option-2">Option 2</SlMenuItem>
+    <SlMenuItem value="option-3">Option 3</SlMenuItem>
+    <SlDivider />
+    <SlMenuItem value="option-4">Option 4</SlMenuItem>
+    <SlMenuItem value="option-5">Option 5</SlMenuItem>
+    <SlMenuItem value="option-6">Option 6</SlMenuItem>
+  </SlSelect>
+);
+```
+
 ?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
 
 ## Examples
@@ -32,6 +48,18 @@ Use the `placeholder` attribute to add a placeholder.
 </sl-select>
 ```
 
+```jsx react
+import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlSelect placeholder="Select one">
+    <SlMenuItem value="option-1">Option 1</SlMenuItem>
+    <SlMenuItem value="option-2">Option 2</SlMenuItem>
+    <SlMenuItem value="option-3">Option 3</SlMenuItem>
+  </SlSelect>
+);
+```
+
 ### Clearable
 
 Use the `clearable` attribute to make the control clearable.
@@ -44,6 +72,18 @@ Use the `clearable` attribute to make the control clearable.
 </sl-select>
 ```
 
+```jsx react
+import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlSelect placeholder="Clearable" clearable>
+    <SlMenuItem value="option-1">Option 1</SlMenuItem>
+    <SlMenuItem value="option-2">Option 2</SlMenuItem>
+    <SlMenuItem value="option-3">Option 3</SlMenuItem>
+  </SlSelect>
+);
+```
+
 ### Filled Selects
 
 Add the `filled` attribute to draw a filled select.
@@ -56,6 +96,18 @@ Add the `filled` attribute to draw a filled select.
 </sl-select>
 ```
 
+```jsx react
+import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlSelect filled>
+    <SlMenuItem value="option-1">Option 1</SlMenuItem>
+    <SlMenuItem value="option-2">Option 2</SlMenuItem>
+    <SlMenuItem value="option-3">Option 3</SlMenuItem>
+  </SlSelect>
+);
+```
+
 ### Pill
 
 Use the `pill` attribute to give selects rounded edges.
@@ -68,6 +120,18 @@ Use the `pill` attribute to give selects rounded edges.
 </sl-select>
 ```
 
+```jsx react
+import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlSelect pill>
+    <SlMenuItem value="option-1">Option 1</SlMenuItem>
+    <SlMenuItem value="option-2">Option 2</SlMenuItem>
+    <SlMenuItem value="option-3">Option 3</SlMenuItem>
+  </SlSelect>
+);
+```
+
 ### Disabled
 
 Use the `disabled` attribute to disable a select.
@@ -80,6 +144,18 @@ Use the `disabled` attribute to disable a select.
 </sl-select>
 ```
 
+```jsx react
+import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlSelect placeholder="Disabled" disabled>
+    <SlMenuItem value="option-1">Option 1</SlMenuItem>
+    <SlMenuItem value="option-2">Option 2</SlMenuItem>
+    <SlMenuItem value="option-3">Option 3</SlMenuItem>
+  </SlSelect>
+);
+```
+
 ### Multiple
 
 To allow multiple options to be selected, use the `multiple` attribute. It's a good practice to use `clearable` when this option is enabled. When using this option, `value` will be an array instead of a string.
@@ -96,6 +172,22 @@ To allow multiple options to be selected, use the `multiple` attribute. It's a g
 </sl-select>
 ```
 
+```jsx react
+import { SlDivider, SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlSelect placeholder="Select a few" multiple clearable>
+    <SlMenuItem value="option-1">Option 1</SlMenuItem>
+    <SlMenuItem value="option-2">Option 2</SlMenuItem>
+    <SlMenuItem value="option-3">Option 3</SlMenuItem>
+    <SlDivider />
+    <SlMenuItem value="option-4">Option 4</SlMenuItem>
+    <SlMenuItem value="option-5">Option 5</SlMenuItem>
+    <SlMenuItem value="option-6">Option 6</SlMenuItem>
+  </SlSelect>
+);
+```
+
 ### Grouping Options
 
 Options can be grouped visually using menu labels and dividers.
@@ -114,6 +206,24 @@ Options can be grouped visually using menu labels and dividers.
 </sl-select>
 ```
 
+```jsx react
+import { SlDivider, SlMenuItem, SlMenuLabel, SlSelect } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlSelect placeholder="Select one">
+    <SlMenuLabel>Group 1</SlMenuLabel>
+    <SlMenuItem value="option-1">Option 1</SlMenuItem>
+    <SlMenuItem value="option-2">Option 2</SlMenuItem>
+    <SlMenuItem value="option-3">Option 3</SlMenuItem>
+    <SlDivider></SlDivider>
+    <SlMenuLabel>Group 2</SlMenuLabel>
+    <SlMenuItem value="option-4">Option 4</SlMenuItem>
+    <SlMenuItem value="option-5">Option 5</SlMenuItem>
+    <SlMenuItem value="option-6">Option 6</SlMenuItem>
+  </SlSelect>
+);
+```
+
 ### Sizes
 
 Use the `size` attribute to change a select's size.
@@ -142,13 +252,43 @@ Use the `size` attribute to change a select's size.
 </sl-select>
 ```
 
+```jsx react
+import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlSelect placeholder="Small" size="small" multiple>
+      <SlMenuItem value="option-1">Option 1</SlMenuItem>
+      <SlMenuItem value="option-2">Option 2</SlMenuItem>
+      <SlMenuItem value="option-3">Option 3</SlMenuItem>
+    </SlSelect>
+
+    <br />
+
+    <SlSelect placeholder="Medium" size="medium" multiple>
+      <SlMenuItem value="option-1">Option 1</SlMenuItem>
+      <SlMenuItem value="option-2">Option 2</SlMenuItem>
+      <SlMenuItem value="option-3">Option 3</SlMenuItem>
+    </SlSelect>
+
+    <br />
+
+    <SlSelect placeholder="Large" size="large" multiple>
+      <SlMenuItem value="option-1">Option 1</SlMenuItem>
+      <SlMenuItem value="option-2">Option 2</SlMenuItem>
+      <SlMenuItem value="option-3">Option 3</SlMenuItem>
+    </SlSelect>
+  </>
+);
+```
+
 ### Selecting Options Programmatically
 
 The `value` property is bound to the current selection. As the selection changes, so will the value. To programmatically manage the selection, update the `value` property.
 
 ```html preview
 <div class="selecting-example">
-  <sl-select placeholder="">
+  <sl-select>
     <sl-menu-item value="option-1">Option 1</sl-menu-item>
     <sl-menu-item value="option-2">Option 2</sl-menu-item>
     <sl-menu-item value="option-3">Option 3</sl-menu-item>
@@ -173,6 +313,31 @@ The `value` property is bound to the current selection. As the selection changes
 </script>
 ```
 
+```jsx react
+import { useState } from 'react';
+import { SlButton, SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const [value, setValue] = useState('option-1');
+
+  return (
+    <>
+      <SlSelect value={value} onSlChange={event => setValue(event.target.value)}>
+        <SlMenuItem value="option-1">Option 1</SlMenuItem>
+        <SlMenuItem value="option-2">Option 2</SlMenuItem>
+        <SlMenuItem value="option-3">Option 3</SlMenuItem>
+      </SlSelect>
+
+      <br />
+
+      <SlButton onClick={() => setValue('option-1')}>Set 1</SlButton>
+      <SlButton onClick={() => setValue('option-2')}>Set 2</SlButton>
+      <SlButton onClick={() => setValue('option-3')}>Set 3</SlButton>
+    </>
+  );
+};
+```
+
 ### Labels
 
 Use the `label` attribute to give the select an accessible label. For labels that contain HTML, use the `label` slot instead.
@@ -185,6 +350,18 @@ Use the `label` attribute to give the select an accessible label. For labels tha
 </sl-select>
 ```
 
+```jsx react
+import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlSelect label="Select one">
+    <SlMenuItem value="option-1">Option 1</SlMenuItem>
+    <SlMenuItem value="option-2">Option 2</SlMenuItem>
+    <SlMenuItem value="option-3">Option 3</SlMenuItem>
+  </SlSelect>
+);
+```
+
 ### Help Text
 
 Add descriptive help text to a select with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
@@ -194,12 +371,27 @@ Add descriptive help text to a select with the `help-text` attribute. For help t
   label="Experience" 
   help-text="Please tell us your skill level."
 >
-  <sl-menu-item value="option-1">Novice</sl-menu-item>
-  <sl-menu-item value="option-2">Intermediate</sl-menu-item>
-  <sl-menu-item value="option-3">Advanced</sl-menu-item>
+  <sl-menu-item value="1">Novice</sl-menu-item>
+  <sl-menu-item value="2">Intermediate</sl-menu-item>
+  <sl-menu-item value="3">Advanced</sl-menu-item>
 </sl-select>
 ```
 
+```jsx react
+import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlSelect 
+    label="Experience"
+    help-text="Please tell us your skill level."
+  >
+    <SlMenuItem value="1">Novice</SlMenuItem>
+    <SlMenuItem value="2">Intermediate</SlMenuItem>
+    <SlMenuItem value="3">Advanced</SlMenuItem>
+  </SlSelect>
+);
+```
+
 ### Prefix & Suffix Icons
 
 Use the `prefix` and `suffix` slots to add icons.
@@ -230,4 +422,36 @@ Use the `prefix` and `suffix` slots to add icons.
 </sl-select>
 ```
 
+```jsx react
+import { SlIcon, SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlSelect placeholder="Small" size="small">
+      <SlIcon name="house" slot="prefix"></SlIcon>
+      <SlMenuItem value="option-1">Option 1</SlMenuItem>
+      <SlMenuItem value="option-2">Option 2</SlMenuItem>
+      <SlMenuItem value="option-3">Option 3</SlMenuItem>
+      <SlIcon name="chat" slot="suffix"></SlIcon>
+    </SlSelect>
+    <br />
+    <SlSelect placeholder="Medium" size="medium">
+      <SlIcon name="house" slot="prefix"></SlIcon>
+      <SlMenuItem value="option-1">Option 1</SlMenuItem>
+      <SlMenuItem value="option-2">Option 2</SlMenuItem>
+      <SlMenuItem value="option-3">Option 3</SlMenuItem>
+      <SlIcon name="chat" slot="suffix"></SlIcon>
+    </SlSelect>
+    <br />
+    <SlSelect placeholder="Large" size="large">
+      <SlIcon name="house" slot="prefix"></SlIcon>
+      <SlMenuItem value="option-1">Option 1</SlMenuItem>
+      <SlMenuItem value="option-2">Option 2</SlMenuItem>
+      <SlMenuItem value="option-3">Option 3</SlMenuItem>
+      <SlIcon name="chat" slot="suffix"></SlIcon>
+    </SlSelect>
+  </>
+);
+```
+
 [component-metadata:sl-select]

docs/components/skeleton.md

@@ -54,6 +54,60 @@ Skeletons try not to be opinionated, as there are endless possibilities for desi
 </style>
 ```
 
+```jsx react
+import { SlSkeleton } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .skeleton-overview header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+
+  .skeleton-overview header sl-skeleton:last-child {
+    flex: 0 0 auto;
+    width: 30%;
+  }
+
+  .skeleton-overview sl-skeleton {
+    margin-bottom: 1rem;
+  }
+
+  .skeleton-overview sl-skeleton:nth-child(1) {
+    float: left;
+    width: 3rem;
+    height: 3rem;
+    margin-right: 1rem;
+    vertical-align: middle;
+  }
+
+  .skeleton-overview sl-skeleton:nth-child(3) {
+    width: 95%;
+  }
+
+  .skeleton-overview sl-skeleton:nth-child(4) {
+    width: 80%;
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="skeleton-overview">
+      <header>
+        <SlSkeleton />
+        <SlSkeleton />
+      </header>
+
+      <SlSkeleton />
+      <SlSkeleton />
+      <SlSkeleton />
+    </div>  
+
+    <style>{css}</style>
+  </>
+);
+```
+
 ## Examples
 
 ### Effects
@@ -83,6 +137,37 @@ There are two built-in effects, `sheen` and `pulse`. Effects are intentionally s
 </style>
 ```
 
+```jsx react
+import { SlSkeleton } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .skeleton-effects {
+    font-size: var(--sl-font-size-small);
+  }
+
+  .skeleton-effects sl-skeleton:not(:first-child) {
+    margin-top: 1rem;
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="skeleton-effects">
+      <SlSkeleton effect="none" />
+      None
+
+      <SlSkeleton effect="sheen" />
+      Sheen
+
+      <SlSkeleton effect="pulse" />
+      Pulse
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+```
+
 ### Paragraphs
 
 Use multiple skeletons and some clever styles to simulate paragraphs.
@@ -115,6 +200,42 @@ Use multiple skeletons and some clever styles to simulate paragraphs.
 </style>
 ```
 
+```jsx react
+import { SlSkeleton } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .skeleton-paragraphs sl-skeleton {
+    margin-bottom: 1rem;
+  }
+
+  .skeleton-paragraphs sl-skeleton:nth-child(2) {
+    width: 95%;
+  }
+
+  .skeleton-paragraphs sl-skeleton:nth-child(4) {
+    width: 90%;
+  }
+
+  .skeleton-paragraphs sl-skeleton:last-child {
+    width: 50%;
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="skeleton-paragraphs">
+      <SlSkeleton />
+      <SlSkeleton />
+      <SlSkeleton />
+      <SlSkeleton />
+      <SlSkeleton />
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+```
+
 ### Avatars
 
 Set a matching width and height to make a circle, square, or rounded avatar skeleton.
@@ -144,6 +265,39 @@ Set a matching width and height to make a circle, square, or rounded avatar skel
 </style>
 ```
 
+```jsx react
+import { SlSkeleton } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .skeleton-avatars sl-skeleton {
+    display: inline-block;
+    width: 3rem;
+    height: 3rem;
+    margin-right: .5rem;
+  }
+
+  .skeleton-avatars sl-skeleton:nth-child(1) {
+    --border-radius: 0;
+  }
+  
+  .skeleton-avatars sl-skeleton:nth-child(2) {
+    --border-radius: var(--sl-border-radius-medium);
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="skeleton-avatars">
+      <SlSkeleton />
+      <SlSkeleton />
+      <SlSkeleton />
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+```
+
 ### Custom Shapes
 
 Use the `--border-radius` custom property to make circles, squares, and rectangles. For more complex shapes, you can apply `clip-path` to the `indicator` part. [Try Clippy](https://bennettfeely.com/clippy/) if you need help generating custom shapes.
@@ -193,6 +347,59 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl
 </style>
 ```
 
+```jsx react
+import { SlSkeleton } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .skeleton-shapes sl-skeleton {
+    display: inline-flex;
+    width: 50px;
+    height: 50px;
+  }
+
+  .skeleton-shapes .square::part(indicator) {
+    --border-radius: var(--sl-border-radius-medium);
+  }
+
+  .skeleton-shapes .circle::part(indicator) {
+    --border-radius: var(--sl-border-radius-circle);
+  }
+
+  .skeleton-shapes .triangle::part(indicator) {
+    --border-radius: 0;
+    clip-path: polygon(50% 0, 0 100%, 100% 100%);
+  }
+
+  .skeleton-shapes .cross::part(indicator) {
+    --border-radius: 0;
+    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
+  }
+
+  .skeleton-shapes .comment::part(indicator) {
+    --border-radius: 0;
+    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
+  }
+
+  .skeleton-shapes sl-skeleton:not(:last-child) {
+    margin-right: .5rem;
+  }
+`;
+
+const App = () => (
+  <>
+  <div className="skeleton-shapes">
+    <SlSkeleton className="square" />
+    <SlSkeleton className="circle" />
+    <SlSkeleton className="triangle" />
+    <SlSkeleton className="cross" />
+    <SlSkeleton className="comment" />
+  </div>
+
+    <style>{css}</style>
+  </>
+);
+```
+
 ### Custom Colors
 
 Set the `--color` and `--sheen-color` custom properties to adjust the skeleton's color.
@@ -201,4 +408,32 @@ Set the `--color` and `--sheen-color` custom properties to adjust the skeleton's
 <sl-skeleton effect="sheen" style="--color: tomato; --sheen-color: #ffb094;"></sl-skeleton>
 ```
 
+```jsx react
+import { SlSkeleton } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .skeleton-avatars sl-skeleton {
+    display: inline-block;
+    width: 3rem;
+    height: 3rem;
+    margin-right: .5rem;
+  }
+
+  .skeleton-avatars sl-skeleton:nth-child(1) {
+    --border-radius: 0;
+  }
+  
+  .skeleton-avatars sl-skeleton:nth-child(2) {
+    --border-radius: var(--sl-border-radius-medium);
+  }
+`;
+
+const App = () => (
+  <SlSkeleton 
+    effect="sheen" 
+    style={{ '--color': 'tomato', '--sheen-color': '#ffb094' }} 
+  />
+);
+```
+
 [component-metadata:sl-skeleton]

docs/components/spinner.md

@@ -8,6 +8,14 @@ Spinners are used to show the progress of an indeterminate operation.
 <sl-spinner></sl-spinner>
 ```
 
+```jsx react
+import { SlSpinner } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlSpinner />
+);
+```
+
 ## Examples
 
 ### Size
@@ -20,6 +28,18 @@ Spinners are sized based on the current font size. To change their size, set the
 <sl-spinner style="font-size: 3rem;"></sl-spinner>
 ```
 
+```jsx react
+import { SlSpinner } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlSpinner />
+    <SlSpinner style={{ fontSize: '2rem' }} />
+    <SlSpinner style={{ fontSize: '3rem' }} />
+  </>
+);
+```
+
 ### Track Width
 
 The width of the spinner's track can be changed by setting the `--track-width` custom property.
@@ -28,6 +48,19 @@ The width of the spinner's track can be changed by setting the `--track-width` c
 <sl-spinner style="font-size: 3rem; --track-width: 6px;"></sl-spinner>
 ```
 
+```jsx react
+import { SlSpinner } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlSpinner 
+    style={{
+      fontSize: '3rem',
+      '--track-width': '6px'
+    }} 
+  />
+);
+```
+
 ### Color
 
 The spinner's colors can be changed by setting the `--indicator-color` and `--track-color` custom properties.
@@ -36,4 +69,18 @@ The spinner's colors can be changed by setting the `--indicator-color` and `--tr
 <sl-spinner style="font-size: 3rem; --indicator-color: deeppink; --track-color: pink;"></sl-spinner>
 ```
 
+```jsx react
+import { SlSpinner } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlSpinner 
+    style={{
+      fontSize: '3rem',
+      '--indicator-color': 'deeppink',
+      '--track-color': 'pink'
+    }} 
+  />
+);
+```
+
 [component-metadata:sl-spinner]

docs/components/switch.md

@@ -8,6 +8,14 @@ Switches allow the user to toggle an option on or off.
 <sl-switch>Switch</sl-switch>
 ```
 
+```jsx react
+import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlSwitch>Switch</SlSwitch>
+);
+```
+
 ?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
 
 ## Examples
@@ -20,6 +28,14 @@ Use the `checked` attribute to activate the switch.
 <sl-switch checked>Checked</sl-switch>
 ```
 
+```jsx react
+import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlSwitch checked>Checked</SlSwitch>
+);
+```
+
 ### Disabled
 
 Use the `disabled` attribute to disable the switch.
@@ -28,6 +44,14 @@ Use the `disabled` attribute to disable the switch.
 <sl-switch disabled>Disabled</sl-switch>
 ```
 
+```jsx react
+import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlSwitch disabled>Disabled</SlSwitch>
+);
+```
+
 ### Custom Size
 
 Use the available custom properties to make the switch a different size.
@@ -36,4 +60,18 @@ Use the available custom properties to make the switch a different size.
 <sl-switch style="--width: 80px; --height: 32px; --thumb-size: 26px;"></sl-switch>
 ```
 
+```jsx react
+import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlSwitch 
+    style={{
+      '--width': '80px',
+      '--height': '32px',
+      '--thumb-size': '26px'
+    }} 
+  />
+);
+```
+
 [component-metadata:sl-switch]

docs/components/tab-group.md

@@ -20,6 +20,24 @@ Tab groups make use of [tabs](/components/tab) and [tab panels](/components/tab-
 </sl-tab-group>
 ```
 
+```jsx react
+import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTabGroup>
+    <SlTab slot="nav" panel="general">General</SlTab>
+    <SlTab slot="nav" panel="custom">Custom</SlTab>
+    <SlTab slot="nav" panel="advanced">Advanced</SlTab>
+    <SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab>
+
+    <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
+    <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
+    <SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
+    <SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
+  </SlTabGroup>
+);
+```
+
 ## Examples
 
 ### Tabs on Bottom
@@ -40,6 +58,24 @@ Tabs can be shown on the bottom by setting `placement` to `bottom`.
 </sl-tab-group>
 ```
 
+```jsx react
+import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTabGroup placement="bottom">
+    <SlTab slot="nav" panel="general">General</SlTab>
+    <SlTab slot="nav" panel="custom">Custom</SlTab>
+    <SlTab slot="nav" panel="advanced">Advanced</SlTab>
+    <SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab>
+
+    <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
+    <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
+    <SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
+    <SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
+  </SlTabGroup>
+);
+```
+
 ### Tabs on Start
 
 Tabs can be shown on the starting side by setting `placement` to `start`.
@@ -58,6 +94,25 @@ Tabs can be shown on the starting side by setting `placement` to `start`.
 </sl-tab-group>
 ```
 
+
+```jsx react
+import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTabGroup placement="start">
+    <SlTab slot="nav" panel="general">General</SlTab>
+    <SlTab slot="nav" panel="custom">Custom</SlTab>
+    <SlTab slot="nav" panel="advanced">Advanced</SlTab>
+    <SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab>
+
+    <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
+    <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
+    <SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
+    <SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
+  </SlTabGroup>
+);
+```
+
 ### Tabs on End
 
 Tabs can be shown on the ending side by setting `placement` to `end`.
@@ -76,6 +131,25 @@ Tabs can be shown on the ending side by setting `placement` to `end`.
 </sl-tab-group>
 ```
 
+
+```jsx react
+import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTabGroup placement="end">
+    <SlTab slot="nav" panel="general">General</SlTab>
+    <SlTab slot="nav" panel="custom">Custom</SlTab>
+    <SlTab slot="nav" panel="advanced">Advanced</SlTab>
+    <SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab>
+
+    <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
+    <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
+    <SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
+    <SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
+  </SlTabGroup>
+);
+```
+
 ### Closable Tabs
 
 Add the `closable` attribute to a tab to show a close button. This example shows how you can dynamically remove tabs from the DOM when the close button is activated.
@@ -112,6 +186,40 @@ Add the `closable` attribute to a tab to show a close button. This example shows
 </script>
 ```
 
+```jsx react
+import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  function handleClose(event) {
+    //
+    // This is a crude example that removes the tab and its panel from the DOM. 
+    // There are better ways to manage tab creation/removal in React, but that
+    // would significantly complicate the example.
+    //
+    const tab = event.target;
+    const tabGroup = tab.closest('sl-tab-group');
+    const tabPanel = tabGroup.querySelector(`[aria-labelledby="${tab.id}"]`);
+    
+    tab.remove();
+    tabPanel.remove();
+  }
+
+  return (
+    <SlTabGroup className="tabs-closable" onSlClose={handleClose}>
+      <SlTab slot="nav" panel="general">General</SlTab>
+      <SlTab slot="nav" panel="closable-1" closable onSlClose={handleClose}>Closable 1</SlTab>
+      <SlTab slot="nav" panel="closable-2" closable onSlClose={handleClose}>Closable 2</SlTab>
+      <SlTab slot="nav" panel="closable-3" closable onSlClose={handleClose}>Closable 3</SlTab>
+
+      <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
+      <SlTabPanel name="closable-1">This is the first closable tab panel.</SlTabPanel>
+      <SlTabPanel name="closable-2">This is the second closable tab panel.</SlTabPanel>
+      <SlTabPanel name="closable-3">This is the third closable tab panel.</SlTabPanel>
+    </SlTabGroup>
+  );
+};
+```
+
 ### Scrolling Tabs
 
 When there are more tabs than horizontal space allows, the nav will be scrollable.
@@ -162,6 +270,56 @@ When there are more tabs than horizontal space allows, the nav will be scrollabl
 </sl-tab-group>
 ```
 
+```jsx react
+import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTabGroup>
+    <SlTab slot="nav" panel="tab-1">Tab 1</SlTab>
+    <SlTab slot="nav" panel="tab-2">Tab 2</SlTab>
+    <SlTab slot="nav" panel="tab-3">Tab 3</SlTab>
+    <SlTab slot="nav" panel="tab-4">Tab 4</SlTab>
+    <SlTab slot="nav" panel="tab-5">Tab 5</SlTab>
+    <SlTab slot="nav" panel="tab-6">Tab 6</SlTab>
+    <SlTab slot="nav" panel="tab-7">Tab 7</SlTab>
+    <SlTab slot="nav" panel="tab-8">Tab 8</SlTab>
+    <SlTab slot="nav" panel="tab-9">Tab 9</SlTab>
+    <SlTab slot="nav" panel="tab-10">Tab 10</SlTab>
+    <SlTab slot="nav" panel="tab-11">Tab 11</SlTab>
+    <SlTab slot="nav" panel="tab-12">Tab 12</SlTab>
+    <SlTab slot="nav" panel="tab-13">Tab 13</SlTab>
+    <SlTab slot="nav" panel="tab-14">Tab 14</SlTab>
+    <SlTab slot="nav" panel="tab-15">Tab 15</SlTab>
+    <SlTab slot="nav" panel="tab-16">Tab 16</SlTab>
+    <SlTab slot="nav" panel="tab-17">Tab 17</SlTab>
+    <SlTab slot="nav" panel="tab-18">Tab 18</SlTab>
+    <SlTab slot="nav" panel="tab-19">Tab 19</SlTab>
+    <SlTab slot="nav" panel="tab-20">Tab 20</SlTab>
+
+    <SlTabPanel name="tab-1">Tab panel 1</SlTabPanel>
+    <SlTabPanel name="tab-2">Tab panel 2</SlTabPanel>
+    <SlTabPanel name="tab-3">Tab panel 3</SlTabPanel>
+    <SlTabPanel name="tab-4">Tab panel 4</SlTabPanel>
+    <SlTabPanel name="tab-5">Tab panel 5</SlTabPanel>
+    <SlTabPanel name="tab-6">Tab panel 6</SlTabPanel>
+    <SlTabPanel name="tab-7">Tab panel 7</SlTabPanel>
+    <SlTabPanel name="tab-8">Tab panel 8</SlTabPanel>
+    <SlTabPanel name="tab-9">Tab panel 9</SlTabPanel>
+    <SlTabPanel name="tab-10">Tab panel 10</SlTabPanel>
+    <SlTabPanel name="tab-11">Tab panel 11</SlTabPanel>
+    <SlTabPanel name="tab-12">Tab panel 12</SlTabPanel>
+    <SlTabPanel name="tab-13">Tab panel 13</SlTabPanel>
+    <SlTabPanel name="tab-14">Tab panel 14</SlTabPanel>
+    <SlTabPanel name="tab-15">Tab panel 15</SlTabPanel>
+    <SlTabPanel name="tab-16">Tab panel 16</SlTabPanel>
+    <SlTabPanel name="tab-17">Tab panel 17</SlTabPanel>
+    <SlTabPanel name="tab-18">Tab panel 18</SlTabPanel>
+    <SlTabPanel name="tab-19">Tab panel 19</SlTabPanel>
+    <SlTabPanel name="tab-20">Tab panel 20</SlTabPanel>
+  </SlTabGroup>
+);
+```
+
 ### Manual Activation
 
 When focused, keyboard users can press <kbd>Left</kbd> or <kbd>Right</kbd> to select the desired tab. By default, the corresponding tab panel will be shown immediately (automatic activation). You can change this behavior by setting `activation="manual"` which will require the user to press <kbd>Space</kbd> or <kbd>Enter</kbd> before showing the tab panel (manual activation).
@@ -180,4 +338,22 @@ When focused, keyboard users can press <kbd>Left</kbd> or <kbd>Right</kbd> to se
 </sl-tab-group>
 ```
 
+```jsx react
+import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTabGroup activation="manual">
+    <SlTab slot="nav" panel="general">General</SlTab>
+    <SlTab slot="nav" panel="custom">Custom</SlTab>
+    <SlTab slot="nav" panel="advanced">Advanced</SlTab>
+    <SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab>
+
+    <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
+    <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
+    <SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
+    <SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
+  </SlTabGroup>
+);
+```
+
 [component-metadata:sl-tab-group]

docs/components/tab-panel.md

@@ -18,6 +18,24 @@ Tab panels are used inside [tab groups](/components/tab-group) to display tabbed
 </sl-tab-group>
 ```
 
+```jsx react
+import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTabGroup>
+    <SlTab slot="nav" panel="general">General</SlTab>
+    <SlTab slot="nav" panel="custom">Custom</SlTab>
+    <SlTab slot="nav" panel="advanced">Advanced</SlTab>
+    <SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab>
+
+    <SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
+    <SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
+    <SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
+    <SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
+  </SlTabGroup>
+);
+```
+
 ?> Additional demonstrations can be found in the [tab group examples](/components/tab-group).
 
 [component-metadata:sl-tab-panel]

docs/components/tab.md

@@ -11,6 +11,19 @@ Tabs are used inside [tab groups](/components/tab-group) to represent and activa
 <sl-tab disabled>Disabled</sl-tab>
 ```
 
+```jsx react
+import { SlTab } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlTab>Tab</SlTab>
+    <SlTab active>Active</SlTab>
+    <SlTab closable>Closable</SlTab>
+    <SlTab disabled>Disabled</SlTab>
+  </>
+);
+```
+
 ?> Additional demonstrations can be found in the [tab group examples](/components/tab-group).
 
 [component-metadata:sl-tab]

docs/components/tag.md

@@ -12,6 +12,21 @@ Tags are used as labels to organize things or to indicate a selection.
 <sl-tag type="danger">Danger</sl-tag>
 ```
 
+
+```jsx react
+import { SlTag } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlTag type="primary">Primary</SlTag>
+    <SlTag type="success">Success</SlTag>
+    <SlTag type="neutral">Neutral</SlTag>
+    <SlTag type="warning">Warning</SlTag>
+    <SlTag type="danger">Danger</SlTag> 
+  </>
+);
+```
+
 ## Examples
 
 ### Sizes
@@ -24,6 +39,18 @@ Use the `size` attribute to change a tab's size.
 <sl-tag size="large">Large</sl-tag>
 ```
 
+```jsx react
+import { SlTag } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlTag size="small">Small</SlTag>
+    <SlTag size="medium">Medium</SlTag>
+    <SlTag size="large">Large</SlTag>
+  </>
+);
+```
+
 ### Pill
 
 Use the `pill` attribute to give tabs rounded edges.
@@ -34,6 +61,18 @@ Use the `pill` attribute to give tabs rounded edges.
 <sl-tag size="large" pill>Large</sl-tag>
 ```
 
+```jsx react
+import { SlTag } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlTag size="small" pill>Small</SlTag>
+    <SlTag size="medium" pill>Medium</SlTag>
+    <SlTag size="large" pill>Large</SlTag>
+  </>
+);
+```
+
 ### Removable
 
 Use the `removable` attribute to add a remove button to the tag.
@@ -62,4 +101,42 @@ Use the `removable` attribute to add a remove button to the tag.
 </style>
 ```
 
+```jsx react
+import { SlTag } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .tags-removable sl-tag {
+    transition: var(--sl-transition-medium) opacity;
+  }
+`;
+
+const App = () => {
+  function handleRemove(event) {
+    const tag = event.target;
+    tag.style.opacity = '0';
+    setTimeout(() => tag.style.opacity = '1', 2000);
+  }
+
+  return (
+    <>
+      <div className="tags-removable">
+        <SlTag size="small" removable onSlRemove={handleRemove}>
+          Small
+        </SlTag>
+
+        <SlTag size="medium" removable onSlRemove={handleRemove}>
+          Medium
+        </SlTag>
+
+        <SlTag size="large" removable onSlRemove={handleRemove}>
+          Large
+        </SlTag>
+      </div>
+
+      <style>{css}</style>
+    </>
+  )
+};
+```
+
 [component-metadata:sl-tag]

docs/components/textarea.md

@@ -8,6 +8,14 @@ Textareas collect data from the user and allow multiple lines of text.
 <sl-textarea></sl-textarea>
 ```
 
+```jsx react
+import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTextarea />
+);
+```
+
 ?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
 
 ?> Please refer to the section on [form control validation](/components/form?id=form-control-validation) to learn how to do client-side validation.
@@ -22,6 +30,14 @@ Use the `rows` attribute to change the number of text rows that get shown.
 <sl-textarea rows="2"></sl-textarea>
 ```
 
+```jsx react
+import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTextarea rows={2} />
+);
+```
+
 ### Placeholders
 
 Use the `placeholder` attribute to add a placeholder.
@@ -30,6 +46,14 @@ Use the `placeholder` attribute to add a placeholder.
 <sl-textarea placeholder="Type something"></sl-textarea>
 ```
 
+```jsx react
+import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTextarea placeholder="Type something" />
+);
+```
+
 ### Filled Textareas
 
 Add the `filled` attribute to draw a filled textarea.
@@ -38,6 +62,14 @@ Add the `filled` attribute to draw a filled textarea.
 <sl-textarea placeholder="Type something" filled></sl-textarea>
 ```
 
+```jsx react
+import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTextarea placeholder="Type something" filled />
+);
+```
+
 ### Disabled
 
 Use the `disabled` attribute to disable a textarea.
@@ -46,6 +78,14 @@ Use the `disabled` attribute to disable a textarea.
 <sl-textarea placeholder="Textarea" disabled></sl-textarea>
 ```
 
+```jsx react
+import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTextarea placeholder="Textarea" disabled />
+);
+```
+
 ### Sizes
 
 Use the `size` attribute to change a textarea's size.
@@ -58,6 +98,20 @@ Use the `size` attribute to change a textarea's size.
 <sl-textarea placeholder="Large" size="large"></sl-textarea>
 ```
 
+```jsx react
+import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlTextarea placeholder="Small" size="small"></SlTextarea>
+    <br />
+    <SlTextarea placeholder="Medium" size="medium"></SlTextarea>
+    <br />
+    <SlTextarea placeholder="Large" size="large"></SlTextarea>
+  </>
+);
+```
+
 ### Labels
 
 Use the `label` attribute to give the textarea an accessible label. For labels that contain HTML, use the `label` slot instead.
@@ -66,6 +120,14 @@ Use the `label` attribute to give the textarea an accessible label. For labels t
 <sl-textarea label="Comments"></sl-textarea>
 ```
 
+```jsx react
+import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTextarea label="Comments" />
+);
+```
+
 ### Help Text
 
 Add descriptive help text to a textarea with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
@@ -78,6 +140,17 @@ Add descriptive help text to a textarea with the `help-text` attribute. For help
 </sl-textarea>
 ```
 
+```jsx react
+import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTextarea
+    label="Feedback"
+    help-text="Please tell us what you think."
+  />
+);
+```
+
 ### Prevent Resizing
 
 By default, textareas can be resized vertically by the user. To prevent resizing, set the `resize` attribute to `none`.
@@ -86,6 +159,14 @@ By default, textareas can be resized vertically by the user. To prevent resizing
 <sl-textarea resize="none"></sl-textarea>
 ```
 
+```jsx react
+import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTextarea resize="none" />
+);
+```
+
 ### Expand with Content
 
 Textareas will automatically resize to expand to fit their content when `resize` is set to `auto`.
@@ -94,4 +175,12 @@ Textareas will automatically resize to expand to fit their content when `resize`
 <sl-textarea resize="auto"></sl-textarea>
 ```
 
+```jsx react
+import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTextarea resize="auto" />
+);
+```
+
 [component-metadata:sl-textarea]

docs/components/tooltip.md

@@ -14,6 +14,16 @@ Tooltips use `display: contents` so they won't interfere with how elements are p
 </sl-tooltip>
 ```
 
+```jsx react
+import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTooltip content="This is a tooltip">
+    <SlButton>Hover Me</SlButton>
+  </SlTooltip>  
+);
+```
+
 ## Examples
 
 ### Placement
@@ -41,7 +51,7 @@ Use the `placement` attribute to set the preferred placement of the tooltip.
       <sl-button></sl-button>
     </sl-tooltip>
 
-    <sl-tooltip content="right-start" placement="right-start" style="margin-left: 400px;">
+    <sl-tooltip content="right-start" placement="right-start">
       <sl-button></sl-button>
     </sl-tooltip>
   </div>
@@ -99,17 +109,119 @@ Use the `placement` attribute to set the preferred placement of the tooltip.
     margin-bottom: 0.25rem;
   }
 
-  .tooltip-placement-example [placement='top-start'] sl-button,
-  .tooltip-placement-example [placement='bottom-start'] sl-button {
+  .tooltip-placement-example-row:nth-child(1) sl-tooltip:first-child sl-button,
+  .tooltip-placement-example-row:nth-child(5) sl-tooltip:first-child sl-button {
     margin-left: calc(40px + 0.25rem);
   }
 
-  .tooltip-placement-example [placement^='right'] sl-button {
+  .tooltip-placement-example-row:nth-child(2) sl-tooltip:nth-child(2) sl-button,
+  .tooltip-placement-example-row:nth-child(3) sl-tooltip:nth-child(2) sl-button,
+  .tooltip-placement-example-row:nth-child(4) sl-tooltip:nth-child(2) sl-button {
     margin-left: calc((40px * 3) + (0.25rem * 3));
   }
 </style>
 ```
 
+```jsx react
+import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .tooltip-placement-example {
+    width: 250px;
+  }
+
+  .tooltip-placement-example-row:after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+
+  .tooltip-placement-example sl-button {
+    float: left;
+    width: 2.5rem;
+    margin-right: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .tooltip-placement-example-row:nth-child(1) sl-tooltip:first-child sl-button,
+  .tooltip-placement-example-row:nth-child(5) sl-tooltip:first-child sl-button {
+    margin-left: calc(40px + 0.25rem);
+  }
+
+  .tooltip-placement-example-row:nth-child(2) sl-tooltip:nth-child(2) sl-button,
+  .tooltip-placement-example-row:nth-child(3) sl-tooltip:nth-child(2) sl-button,
+  .tooltip-placement-example-row:nth-child(4) sl-tooltip:nth-child(2) sl-button {
+    margin-left: calc((40px * 3) + (0.25rem * 3));
+  }
+`;
+
+const App = () => (
+  <>
+    <div className="tooltip-placement-example">
+      <div className="tooltip-placement-example-row">
+        <SlTooltip content="top-start" placement="top-start">
+          <SlButton />
+        </SlTooltip>
+
+        <SlTooltip content="top" placement="top">
+          <SlButton />
+        </SlTooltip>
+
+        <SlTooltip content="top-end" placement="top-end">
+          <SlButton />
+        </SlTooltip>
+      </div>
+
+      <div className="tooltip-placement-example-row">
+        <SlTooltip content="left-start" placement="left-start">
+          <SlButton />
+        </SlTooltip>
+
+        <SlTooltip content="right-start" placement="right-start">
+          <SlButton />
+        </SlTooltip>
+      </div>
+
+      <div className="tooltip-placement-example-row">
+        <SlTooltip content="left" placement="left">
+          <SlButton />
+        </SlTooltip>
+
+        <SlTooltip content="right" placement="right">
+          <SlButton />
+        </SlTooltip>
+      </div>
+
+      <div className="tooltip-placement-example-row">
+        <SlTooltip content="left-end" placement="left-end">
+          <SlButton />
+        </SlTooltip>
+
+        <SlTooltip content="right-end" placement="right-end">
+          <SlButton />
+        </SlTooltip>
+      </div>
+
+      <div className="tooltip-placement-example-row">
+        <SlTooltip content="bottom-start" placement="bottom-start">
+          <SlButton />
+        </SlTooltip>
+
+        <SlTooltip content="bottom" placement="bottom">
+          <SlButton />
+        </SlTooltip>
+
+        <SlTooltip content="bottom-end" placement="bottom-end">
+          <SlButton />
+        </SlTooltip>
+      </div>
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+```
+
 ### Click Trigger
 
 Set the `trigger` attribute to `click` to toggle the tooltip on click instead of hover.
@@ -120,6 +232,16 @@ Set the `trigger` attribute to `click` to toggle the tooltip on click instead of
 </sl-tooltip>
 ```
 
+```jsx react
+import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTooltip content="Click again to dismiss" trigger="click">
+    <SlButton>Click to Toggle</SlButton>
+  </SlTooltip>  
+);
+```
+
 ### Manual Trigger
 
 Tooltips can be controller programmatically by setting the `trigger` attribute to `manual`. Use the `open` attribute to control when the tooltip is shown.
@@ -139,6 +261,30 @@ Tooltips can be controller programmatically by setting the `trigger` attribute t
 </script>
 ```
 
+```jsx react
+import { useState } from 'react';
+import { SlAvatar, SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <SlButton
+        style={{ marginRight: '4rem' }}
+        onClick={() => setOpen(!open)}
+      >
+        Toggle Manually
+      </SlButton>
+
+      <SlTooltip open={open} content="This is an avatar" trigger="manual">
+        <SlAvatar />
+      </SlTooltip>
+    </>
+  );
+};
+```
+
 ### Remove Arrows
 
 You can control the size of tooltip arrows by overriding the `--sl-tooltip-arrow-size` design token.
@@ -155,6 +301,22 @@ You can control the size of tooltip arrows by overriding the `--sl-tooltip-arrow
 </div>
 ```
 
+```jsx react
+import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <div style={{ '--sl-tooltip-arrow-size': '0' }}>
+    <SlTooltip content="This is a tooltip">
+      <SlButton>Above</SlButton>
+    </SlTooltip>
+
+    <SlTooltip content="This is a tooltip" placement="bottom">
+      <SlButton>Below</SlButton>
+    </SlTooltip>
+  </div>
+);
+```
+
 To override it globally, set it in a root block in your stylesheet after the Shoelace stylesheet is loaded.
 
 ```css
@@ -169,11 +331,28 @@ Use the `content` slot to create tooltips with HTML content. Tooltips are design
 
 ```html preview
 <sl-tooltip>
-  <div slot="content">I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!</div>
+  <div slot="content">
+    I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!
+  </div>
+  
   <sl-button>Hover me</sl-button>
 </sl-tooltip>
 ```
 
+```jsx react
+import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlTooltip content="This is a tooltip">
+    <div slot="content">
+      I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!
+    </div>
+
+    <SlButton>Hover Me</SlButton>
+  </SlTooltip>  
+);
+```
+
 ### Hoisting
 
 Tooltips will be clipped if they're inside a container that has `overflow: auto|hidden|scroll`. The `hoist` attribute forces the tooltip to use a fixed positioning strategy, allowing it to break out of the container. In this case, the tooltip will be positioned relative to its 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.
@@ -199,4 +378,33 @@ Tooltips will be clipped if they're inside a container that has `overflow: auto|
 </style>
 ```
 
+```jsx react
+import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .tooltip-hoist {
+    border: solid 2px rgb(var(--sl-panel-border-color));
+    overflow: hidden;
+    padding: var(--sl-spacing-medium);
+    position: relative;
+  }
+`;
+
+const App = () => (
+  <>
+    <div class="tooltip-hoist">
+      <SlTooltip content="This is a tooltip">
+        <SlButton>No Hoist</SlButton>
+      </SlTooltip>
+
+      <SlTooltip content="This is a tooltip" hoist>
+        <SlButton>Hoist</SlButton>
+      </SlTooltip>
+    </div>
+
+    <style>{css}</style>
+  </>
+);
+```
+
 [component-metadata:sl-tooltip]

docs/frameworks/angular.md

@@ -0,0 +1,22 @@
+# 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

@@ -0,0 +1,88 @@
+# React
+
+React [doesn't play nice](https://custom-elements-everywhere.com/#react) with custom elements, so Shoelace offers a React version of its components to provide an idiomatic experience for React users. You can easily toggle between HTML and React examples throughout the documentation.
+
+## 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

@@ -0,0 +1,71 @@
+# 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,7 +2,9 @@
 
 You can use Shoelace via CDN or by installing it locally. You can also [cherry pick](#cherry-picking) individual components for faster load times.
 
-## CDN Installation (Recommended)
+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)
 
 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.
 
@@ -11,6 +13,8 @@ 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)
@@ -77,7 +81,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, but 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 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.
 
 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 wrappers](/getting-started/usage#react)
+- First-class [React support](/frameworks/react)
 - Open source 😸
 
 Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
@@ -41,7 +41,8 @@ Now you have access to all of Shoelace's components! Try adding a button:
 <sl-button>Click me</sl-button>
 ```
 
-See the [installation instructions](getting-started/installation) for more details and other ways to install Shoelace.
+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).
+
 
 ## New to Web Components?
 

docs/getting-started/usage.md

@@ -1,10 +1,10 @@
 # Usage
 
-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.
+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.
 
-## Web Component Basics
+If you're new to custom elements, often referred to as "web components," this section will familiarize you with how to use them. 
 
-### 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,123 +128,3 @@ 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>
+  <body data-shoelace="/dist">
     <div id="app"></div>
     <script>
       // Set the initial theme to prevent flashing
@@ -88,8 +88,9 @@
     <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.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="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="/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,13 +6,23 @@ 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._ 🐛
 
-## Next
+## 2.0.0-beta.60
 
-- Added experimental `<sl-context-menu>` component
+- Added React examples and CodePen links to all components
+- Changed the `attr` in experimental `<sl-mutation-observer>` to require `"*"` instead of `""` to target all attributes
+- Fixed a bug in `<sl-progress-bar>` where the `label` attribute didn't set the label
+- Fixed a bug in `<sl-rating>` that caused disabled and readonly controls to transition on hover
+- The `panel` property of `<sl-tab>` is now reflected
+- The `name` property of `<sl-tab-panel>` is now reflected
+
+## 2.0.0-beta.59
+
+- Added React wrappers as first-class citizens
 - 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
-- Refactored positioning logic in `<sl-dropdown>` so Popper is only active when the menu is open
+- Switched clearable icon from `x-circle` to `x-circle-fill` to make it easier to recognize
+- Updated to Bootstrap Icons to 1.7.0
 - 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/react-wrapper copy-webpack-plugin next-compose-plugins next-transpile-modules
+yarn add @shoelace-style/shoelace @shoelace-style/shoelace copy-webpack-plugin next-compose-plugins next-transpile-modules
 ```
 
 ### Importing the Default Theme

package-lock.json

@@ -1,14 +1,15 @@
 {
   "name": "@shoelace-style/shoelace",
-  "version": "2.0.0-beta.58",
+  "version": "2.0.0-beta.60",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@shoelace-style/shoelace",
-      "version": "2.0.0-beta.58",
+      "version": "2.0.0-beta.60",
       "license": "MIT",
       "dependencies": {
+        "@lit-labs/react": "^1.0.1",
         "@popperjs/core": "^2.7.0",
         "@shoelace-style/animations": "^1.1.0",
         "color": "^3.1.3",
@@ -18,11 +19,12 @@
         "@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.6.1",
+        "bootstrap-icons": "^1.7.0",
         "browser-sync": "^2.26.14",
         "chalk": "^4.1.0",
         "command-line-args": "^5.2.0",
@@ -40,6 +42,7 @@
         "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",
@@ -173,6 +176,11 @@
         "@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",
@@ -740,6 +748,12 @@
       "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",
@@ -752,6 +766,17 @@
       "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",
@@ -761,6 +786,12 @@
         "@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",
@@ -1665,9 +1696,9 @@
       "dev": true
     },
     "node_modules/bootstrap-icons": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.6.1.tgz",
-      "integrity": "sha512-MNpF89+njCdVJePDRbCd2DrUusqIyNsPlBrdKqBEXAvFZpwb+Gc8k2VlyF2ueiDQn1PoeTSg9UqQNgx8tGqHAA==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.7.0.tgz",
+      "integrity": "sha512-x2ORQ3lv1QdSnIzzQdU8mf83fbCq4FIaUinrAWw+a/d186vO3Ph7qUfqzvQDBA41AD6IoxdRHD6zUt9IXC1J6A==",
       "dev": true,
       "engines": {
         "node": ">=10"
@@ -2982,6 +3013,12 @@
         "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",
@@ -6410,6 +6447,18 @@
         "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",
@@ -8362,6 +8411,19 @@
         "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",
@@ -11293,6 +11355,11 @@
         "@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",
@@ -11843,6 +11910,12 @@
       "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",
@@ -11855,6 +11928,17 @@
       "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",
@@ -11864,6 +11948,12 @@
         "@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",
@@ -12579,9 +12669,9 @@
       "dev": true
     },
     "bootstrap-icons": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.6.1.tgz",
-      "integrity": "sha512-MNpF89+njCdVJePDRbCd2DrUusqIyNsPlBrdKqBEXAvFZpwb+Gc8k2VlyF2ueiDQn1PoeTSg9UqQNgx8tGqHAA==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.7.0.tgz",
+      "integrity": "sha512-x2ORQ3lv1QdSnIzzQdU8mf83fbCq4FIaUinrAWw+a/d186vO3Ph7qUfqzvQDBA41AD6IoxdRHD6zUt9IXC1J6A==",
       "dev": true
     },
     "brace-expansion": {
@@ -13670,6 +13760,12 @@
         }
       }
     },
+    "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",
@@ -16389,6 +16485,15 @@
         }
       }
     },
+    "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",
@@ -17951,6 +18056,16 @@
         "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.58",
+  "version": "2.0.0-beta.60",
   "homepage": "https://github.com/shoelace-style/shoelace",
   "author": "Cory LaViska",
   "license": "MIT",
@@ -39,6 +39,7 @@
     "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",
@@ -48,11 +49,12 @@
     "@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.6.1",
+    "bootstrap-icons": "^1.7.0",
     "browser-sync": "^2.26.14",
     "chalk": "^4.1.0",
     "command-line-args": "^5.2.0",
@@ -70,6 +72,7 @@
     "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,17 +30,19 @@ 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',
@@ -53,13 +55,15 @@ mkdirp.sync(outdir);
         // Public utilities
         ...(await glob('./src/utilities/**/!(*.(style|test)).ts')),
         // Theme stylesheets
-        ...(await glob('./src/themes/**/!(*.test).ts'))
+        ...(await glob('./src/themes/**/!(*.test).ts')),
+        // React wrappers
+        ...(await glob('./src/react/**/*.ts'))
       ],
       outdir,
       chunkNames: 'chunks/[name].[hash]',
       incremental: serve,
       define: {
-        // Popper.js expects this to be set
+        // Popper.js requires this to be set
         'process.env.NODE_ENV': '"production"'
       },
       bundle: true,
@@ -67,7 +71,11 @@ 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.)
       //
-      external: bundle ? undefined : ['@popperjs/core', '@shoelace-style/animations', 'lit', 'qr-creator'],
+      // We never bundle React or @lit-labs/react though!
+      //
+      external: bundle
+        ? alwaysExternal
+        : [...alwaysExternal, '@popperjs/core', '@shoelace-style/animations', 'lit', 'qr-creator'],
       splitting: true,
       plugins: []
     })

scripts/make-react.js

@@ -0,0 +1,66 @@
+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,9 +5,10 @@ export function getAllComponents(metadata) {
     module.declarations?.map(declaration => {
       if (declaration.customElement) {
         const component = declaration;
+        const modulePath = module.path;
 
         if (component) {
-          allComponents.push(component);
+          allComponents.push(Object.assign(component, { modulePath }));
         }
       }
     });

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

@@ -1,43 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,292 +0,0 @@
-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,6 +100,28 @@ 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() {
@@ -109,6 +131,7 @@ export default class SlDropdown extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.hide();
+    this.popover.destroy();
   }
 
   focusOnTrigger() {
@@ -184,13 +207,40 @@ 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.getAllItems() : [];
+    const menuItems = menu ? ([...menu.querySelectorAll('sl-menu-item')] as SlMenuItem[]) : [];
     const firstMenuItem = menuItems[0];
     const lastMenuItem = menuItems[menuItems.length - 1];
 
@@ -212,7 +262,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', 'Home', 'End'].includes(event.key)) {
+    if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
       event.preventDefault();
 
       // Show the menu if it's not already open
@@ -221,14 +271,14 @@ export default class SlDropdown extends LitElement {
       }
 
       // Focus on a menu item
-      if (['ArrowDown', 'Home'].includes(event.key) && firstMenuItem) {
+      if (event.key === 'ArrowDown' && firstMenuItem) {
         const menu = this.getMenu();
         menu.setCurrentItem(firstMenuItem);
         firstMenuItem.focus();
         return;
       }
 
-      if (['ArrowUp', 'End'].includes(event.key) && lastMenuItem) {
+      if (event.key === 'ArrowUp' && lastMenuItem) {
         menu.setCurrentItem(lastMenuItem);
         lastMenuItem.focus();
         return;
@@ -277,7 +327,7 @@ export default class SlDropdown extends LitElement {
     }
   }
 
-  /** Shows the dropdown panel */
+  /** Shows the dropdown panel. */
   async show() {
     if (this.open) {
       return;
@@ -302,9 +352,11 @@ export default class SlDropdown extends LitElement {
    * is activated.
    */
   reposition() {
-    if (this.popover) {
-      this.popover.update();
+    if (!this.open) {
+      return;
     }
+
+    this.popover.update();
   }
 
   @watch('open', { waitUntilFirstUpdate: true })
@@ -324,26 +376,7 @@ export default class SlDropdown extends LitElement {
       document.addEventListener('mousedown', this.handleDocumentMouseDown);
 
       await stopAnimations(this);
-
-      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.popover.update();
       this.panel.hidden = false;
       const { keyframes, options } = getAnimation(this, 'dropdown.show');
       await animateTo(this.panel, keyframes, options);

src/components/icon/library.system.ts

@@ -76,10 +76,9 @@ 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': `
-    <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"/>
+  '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>
     </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" library="system"></sl-icon>
+                    <sl-icon name="x-circle-fill" library="system"></sl-icon>
                   </slot>
                 </button>
               `

src/components/mutation-observer/mutation-observer.ts

@@ -19,8 +19,8 @@ export default class SlMutationObserver extends LitElement {
   private mutationObserver: MutationObserver;
 
   /**
-   * Watches for changes to attributes. If empty, all changes will be reported. To watch only specific attributes,
-   * separate them by a space.
+   * Watches for changes to attributes. If set to *, all changes will be reported. To watch only specific attributes,
+   * separate them by a space, e.g. "class id title".
    */
   @property({ reflect: true }) attr: string;
 
@@ -80,12 +80,15 @@ export default class SlMutationObserver extends LitElement {
   }
 
   startObserver() {
+    const observeAttributes = typeof this.attr === 'string' && this.attr.length > 0;
+    const attributeFilter = observeAttributes && this.attr !== '*' ? this.attr.split(' ') : undefined;
+
     try {
       this.mutationObserver.observe(this, {
         subtree: true,
         childList: this.childList,
-        attributes: typeof this.attr === 'string',
-        attributeFilter: typeof this.attr === 'string' && this.attr.length > 0 ? this.attr.split(' ') : undefined,
+        attributes: observeAttributes,
+        attributeFilter,
         attributeOldValue: this.attrOldValue,
         characterData: this.charData,
         characterDataOldValue: this.charDataOldValue

src/components/progress-bar/progress-bar.ts

@@ -52,7 +52,7 @@ export default class SlProgressBar extends LitElement {
           ${!this.indeterminate
             ? html`
                 <span part="label" class="progress-bar__label">
-                  <slot></slot>
+                  <slot>${this.label}</slot>
                 </span>
               `
             : ''}

src/components/rating/rating.styles.ts

@@ -64,7 +64,8 @@ export default css`
     cursor: default;
   }
 
-  .rating--disabled .rating__symbol--hover .rating--readonly .rating__symbol--hover {
+  .rating--disabled .rating__symbol--hover,
+  .rating--readonly .rating__symbol--hover {
     transform: none;
   }
 

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"
+                    name="x-circle-fill"
                     library="system"
                     @click=${this.handleClearClick}
                     tabindex="-1"

src/components/tab-panel/tab-panel.ts

@@ -21,7 +21,7 @@ export default class SlTabPanel extends LitElement {
   private componentId = `tab-panel-${++id}`;
 
   /** The tab panel's name. */
-  @property() name = '';
+  @property({ reflect: true }) name = '';
 
   /** When true, the tab panel will be shown. */
   @property({ type: Boolean, reflect: true }) active = false;

src/components/tab/tab.ts

@@ -30,7 +30,7 @@ export default class SlTab extends LitElement {
   private componentId = `tab-${++id}`;
 
   /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */
-  @property() panel = '';
+  @property({ reflect: true }) panel = '';
 
   /** Draws the tab in an active state. */
   @property({ type: Boolean, reflect: true }) active = false;

src/shoelace.ts

@@ -11,7 +11,6 @@ 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';