Merge branch 'next' into orientation-attribute

Author: claviska

docs/_includes/sidebar.njk

@@ -14,6 +14,7 @@
   <li><a href="https://github.com/shoelace-style/webawesome-alpha/discussions" target="_blank">Help &amp; Support</a></li>
   <li><a href="/docs/resources/community">Community</a></li>
   <li><a href="/docs/resources/accessibility">Accessibility</a></li>
+  <li><a href="/docs/resources/browser-support">Browser Support</a></li>
   <li><a href="/docs/resources/contributing">Contributing</a></li>
   <li><a href="/docs/resources/changelog">Changelog</a></li>
   <li><a href="/docs/resources/visual-tests">Visual Tests</a></li>

docs/_layouts/component.njk

@@ -19,7 +19,7 @@
     <h2>Slots</h2>
     <p>Learn more about <a href="/docs/usage/#slots">using slots</a>.</p>
 
-    <div class="table-scroll">
+    <wa-scroller>
       <table class="component-table">
         <thead>
           <tr>
@@ -42,21 +42,21 @@
           {% endfor %}
         </tbody>
       </table>
-    </div>
+    </wa-scroller>
   {% endif %}
 
   {# Properties #}
   {% if component.properties.length %}
     <h2>Attributes & Properties</h2>
     <p>Learn more about <a href="/docs/usage/#attributes-and-properties">attributes and properties</a>.</p>
 
-    <div class="table-scroll">
+    <wa-scroller>
       <table class="component-table">
         <thead>
           <tr>
             <th class="table-name">Name</th>
             <th class="table-description">Description</th>
-            <th class="table-reflects">Reflects</th>
+            <th class="table-reflect">Reflects</th>
           </tr>
         </thead>
         <tbody>
@@ -77,7 +77,7 @@
                   <div><small><strong>Default</strong>&nbsp;<code>{{ prop.default | inlineMarkdown | safe }}</code></small></div>
                 {% endif %}
               </td>
-              <td class="table-checkmark">
+              <td class="table-reflect">
                 {% if prop.reflects %}
                   <wa-icon name="check"></wa-icon>
                 {% endif %}
@@ -89,15 +89,15 @@
           {% endfor %}
         </tbody>
       </table>
-    </div>
+    </wa-scroller>
   {% endif %}
 
   {# Methods #}
   {% if component.methods.length %}
     <h2>Methods</h2>
     <p>Learn more about <a href="/docs/usage/#methods">methods</a>.</p>
 
-    <div class="table-scroll">
+    <wa-scroller>
       <table class="component-table">
         <thead>
           <tr>
@@ -124,15 +124,15 @@
           {% endfor %}
         </tbody>
       </table>
-    </div>
+    </wa-scroller>
   {% endif %}
 
   {# Events #}
   {% if component.events.length %}
     <h2>Events</h2>
     <p>Learn more about <a href="/docs/usage/#events">events</a>.</p>
 
-    <div class="table-scroll">
+    <wa-scroller>
       <table class="component-table">
         <thead>
           <tr>
@@ -151,15 +151,15 @@
           {% endfor %}
         </tbody>
       </table>
-    </div>
+    </wa-scroller>
   {% endif %}
 
   {# Custom Properties #}
   {% if component.cssProperties.length %}
     <h2>CSS custom properties</h2>
     <p>Learn more about <a href="/docs/customizing/#custom-properties">CSS custom properties</a>.</p>
 
-    <div class="table-scroll">
+    <wa-scroller>
       <table class="component-table">
         <thead>
           <tr>
@@ -183,15 +183,15 @@
           {% endfor %}
         </tbody>
       </table>
-    </div>
+    </wa-scroller>
   {% endif %}
 
   {# Custom States #}
   {% if component.cssStates.length %}
     <h2>Custom States</h2>
     <p>Learn more about <a href="/docs/customizing/#custom-states">custom states</a>.</p>
 
-    <div class="table-scroll">
+    <wa-scroller>
       <table class="component-table">
         <thead>
           <tr>
@@ -210,15 +210,15 @@
           {% endfor %}
         </tbody>
       </table>
-    </div>
+    </wa-scroller>
   {% endif %}
 
   {# CSS Parts #}
   {% if component.cssParts.length %}
     <h2>CSS parts</h2>
     <p>Learn more about <a href="/docs/customizing/#css-parts">CSS parts</a>.</p>
 
-    <div class="table-scroll">
+    <wa-scroller>
       <table class="component-table">
         <thead>
           <tr>
@@ -235,7 +235,7 @@
           {% endfor %}
         </tbody>
       </table>
-    </div>
+    </wa-scroller>
   {% endif %}
 
   {# Dependencies #}