@ebay/skin 18.0.8 → 18.2.0

package/src/modules/table.marko

@@ -0,0 +1,947 @@
+<div id="table">
+    <section-header metadata=input.metadata name=input.name alpha="true"/>
+
+    <p>A table represents tabular data in rows and columns with incrementally enhanced feature set added on top for sorting, editing, etc.</p>
+
+    <p>Interactive elements should be tabbed into in correct sequence top down row by row and column by column based on the respective LTR or RTL mode.</p>
+
+    <p>The top-level container element should have a <span class="highlight">tabindex="0"</span> to make it focusable, an <span class="highlight">aria-label</span> to relay context of the component, and should have a role of group to make it accessible to screen readers. That will also allow the table element to be scrollable inside the container, both vertically (when overflowing) and horizontally.</p>
+
+    <h3>Basic Default Table</h3>
+    <div class="demo">
+        <div class="demo__inner">
+            <div class="table" role="group" aria-label="Video games for sale" tabindex="0">
+                <table>
+                    <thead>
+                        <tr>
+                            <th class="table__cell">Seller</th>
+                            <th class="table__cell">Item</th>
+                            <th class="table__cell">Image</th>
+                            <th class="table__cell table__cell--numeric">List Price</th>
+                            <th class="table__cell table__cell--numeric">Quantity Available</th>
+                            <th class="table__cell table__cell--numeric">Quantity Sold</th>
+                            <th class="table__cell table__cell--numeric">Watchers</th>
+                            <th class="table__cell table__cell--numeric">Protection</th>
+                            <th class="table__cell">Shipping</th>
+                            <th class="table__cell">Delivery</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <th class="table__cell">Nintendo</th>
+                            <td class="table__cell">Switch</td>
+                            <td class="table__cell"></td>
+                            <td class="table__cell table__cell--numeric">$287.96</td>
+                            <td class="table__cell table__cell--numeric">300</td>
+                            <td class="table__cell table__cell--numeric">207</td>
+                            <td class="table__cell table__cell--numeric">95</td>
+                            <td class="table__cell table__cell--numeric">$17.99</td>
+                            <td class="table__cell">FREE</td>
+                            <td class="table__cell">4/1 - 4/5</td>
+                        </tr>
+                        <tr>
+                            <th class="table__cell">Nintendo</th>
+                            <td class="table__cell">SNES</td>
+                            <td class="table__cell"></td>
+                            <td class="table__cell table__cell--numeric">$89.85</td>
+                            <td class="table__cell table__cell--numeric">45</td>
+                            <td class="table__cell table__cell--numeric">17</td>
+                            <td class="table__cell table__cell--numeric">5</td>
+                            <td class="table__cell table__cell--numeric">$18.95</td>
+                            <td class="table__cell">FREE</td>
+                            <td class="table__cell">4/11 - 4/15</td>
+                        </tr>
+                        <tr>
+                            <th class="table__cell">Microsoft</th>
+                            <td class="table__cell">XBOX 360</td>
+                            <td class="table__cell"></td>
+                            <td class="table__cell table__cell--numeric">$499.99</td>
+                            <td class="table__cell table__cell--numeric">345</td>
+                            <td class="table__cell table__cell--numeric">455</td>
+                            <td class="table__cell table__cell--numeric">205</td>
+                            <td class="table__cell table__cell--numeric">$17.99</td>
+                            <td class="table__cell">FREE</td>
+                            <td class="table__cell">4/17 - 4/25</td>
+                        </tr>
+                        <tr>
+                            <th class="table__cell">Microsoft</th>
+                            <td class="table__cell">XBOX One</td>
+                            <td class="table__cell"></td>
+                            <td class="table__cell table__cell--numeric">$499.99</td>
+                            <td class="table__cell table__cell--numeric">399</td>
+                            <td class="table__cell table__cell--numeric">407</td>
+                            <td class="table__cell table__cell--numeric">305</td>
+                            <td class="table__cell table__cell--numeric">$27.99</td>
+                            <td class="table__cell">FREE</td>
+                            <td class="table__cell">4/9 - 4/11</td>
+                        </tr>
+                        <tr>
+                            <th class="table__cell">Sony</th>
+                            <td class="table__cell">Playstation 5</td>
+                            <td class="table__cell"></td>
+                            <td class="table__cell table__cell--numeric">$519.99</td>
+                            <td class="table__cell table__cell--numeric">205</td>
+                            <td class="table__cell table__cell--numeric">265</td>
+                            <td class="table__cell table__cell--numeric">199</td>
+                            <td class="table__cell table__cell--numeric">$29.99</td>
+                            <td class="table__cell">FREE</td>
+                            <td class="table__cell">4/11 - 4/15</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code type="html">
+<div class="table" role="group" aria-label="Video games for sale" tabindex="0">
+    <table>
+        <thead>
+            <tr>
+                <th class="table__cell">Seller</th>
+                <th class="table__cell">Item</th>
+                <th class="table__cell">Image</th>
+                <th class="table__cell table__cell--numeric">List Price</th>
+                <th class="table__cell table__cell--numeric">Quantity Available</th>
+                <th class="table__cell table__cell--numeric">Quantity Sold</th>
+                <th class="table__cell table__cell--numeric">Watchers</th>
+                <th class="table__cell table__cell--numeric">Protection</th>
+                <th class="table__cell">Shipping</th>
+                <th class="table__cell">Delivery</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <th class="table__cell">Nintendo</th>
+                <td class="table__cell">Switch</td>
+                <td class="table__cell"></td>
+                <td class="table__cell table__cell--numeric">$287.96</td>
+                <td class="table__cell table__cell--numeric">300</td>
+                <td class="table__cell table__cell--numeric">207</td>
+                <td class="table__cell table__cell--numeric">95</td>
+                <td class="table__cell table__cell--numeric">$17.99</td>
+                <td class="table__cell">FREE</td>
+                <td class="table__cell">4/1 - 4/5</td>
+            </tr>
+            <tr>
+                <th class="table__cell">Nintendo</th>
+                <td class="table__cell">SNES</td>
+                <td class="table__cell"></td>
+                <td class="table__cell table__cell--numeric">$89.85</td>
+                <td class="table__cell table__cell--numeric">45</td>
+                <td class="table__cell table__cell--numeric">17</td>
+                <td class="table__cell table__cell--numeric">5</td>
+                <td class="table__cell table__cell--numeric">$18.95</td>
+                <td class="table__cell">FREE</td>
+                <td class="table__cell">4/11 - 4/15</td>
+            </tr>
+            <tr>
+                <th class="table__cell">Microsoft</th>
+                <td class="table__cell">XBOX 360</td>
+                <td class="table__cell"></td>
+                <td class="table__cell table__cell--numeric">$499.99</td>
+                <td class="table__cell table__cell--numeric">345</td>
+                <td class="table__cell table__cell--numeric">455</td>
+                <td class="table__cell table__cell--numeric">205</td>
+                <td class="table__cell table__cell--numeric">$17.99</td>
+                <td class="table__cell">FREE</td>
+                <td class="table__cell">4/17 - 4/25</td>
+            </tr>
+            <tr>
+                <th class="table__cell">Microsoft</th>
+                <td class="table__cell">XBOX One</td>
+                <td class="table__cell"></td>
+                <td class="table__cell table__cell--numeric">$499.99</td>
+                <td class="table__cell table__cell--numeric">399</td>
+                <td class="table__cell table__cell--numeric">407</td>
+                <td class="table__cell table__cell--numeric">305</td>
+                <td class="table__cell table__cell--numeric">$27.99</td>
+                <td class="table__cell">FREE</td>
+                <td class="table__cell">4/9 - 4/11</td>
+            </tr>
+            <tr>
+                <th class="table__cell">Sony</th>
+                <td class="table__cell">Playstation 5</td>
+                <td class="table__cell"></td>
+                <td class="table__cell table__cell--numeric">$519.99</td>
+                <td class="table__cell table__cell--numeric">205</td>
+                <td class="table__cell table__cell--numeric">265</td>
+                <td class="table__cell table__cell--numeric">199</td>
+                <td class="table__cell table__cell--numeric">$29.99</td>
+                <td class="table__cell">FREE</td>
+                <td class="table__cell">4/11 - 4/15</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+    </highlight-code>
+
+    <h3>Compact Density Table</h3>
+    <div class="demo">
+        <div class="demo__inner">
+            <div class="table table--density-compact" role="group" aria-label="Video games for sale" tabindex="0">
+                <table>
+                    <thead>
+                        <tr>
+                            <th class="table__cell">Seller</th>
+                            <th class="table__cell">Item</th>
+                            <th class="table__cell">Image</th>
+                            <th class="table__cell table__cell--numeric">List Price</th>
+                            <th class="table__cell table__cell--numeric">Quantity Available</th>
+                            <th class="table__cell table__cell--numeric">Quantity Sold</th>
+                            <th class="table__cell table__cell--numeric">Watchers</th>
+                            <th class="table__cell table__cell--numeric">Protection</th>
+                            <th class="table__cell">Shipping</th>
+                            <th class="table__cell">Delivery</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <th class="table__cell">Nintendo</th>
+                            <td class="table__cell">Switch</td>
+                            <td class="table__cell"></td>
+                            <td class="table__cell table__cell--numeric">$287.96</td>
+                            <td class="table__cell table__cell--numeric">300</td>
+                            <td class="table__cell table__cell--numeric">207</td>
+                            <td class="table__cell table__cell--numeric">95</td>
+                            <td class="table__cell table__cell--numeric">$17.99</td>
+                            <td class="table__cell">FREE</td>
+                            <td class="table__cell">4/1 - 4/5</td>
+                        </tr>
+                        <tr>
+                            <th class="table__cell">Nintendo</th>
+                            <td class="table__cell">SNES</td>
+                            <td class="table__cell"></td>
+                            <td class="table__cell table__cell--numeric">$89.85</td>
+                            <td class="table__cell table__cell--numeric">45</td>
+                            <td class="table__cell table__cell--numeric">17</td>
+                            <td class="table__cell table__cell--numeric">5</td>
+                            <td class="table__cell table__cell--numeric">$18.95</td>
+                            <td class="table__cell">FREE</td>
+                            <td class="table__cell">4/11 - 4/15</td>
+                        </tr>
+                        <tr>
+                            <th class="table__cell">Microsoft</th>
+                            <td class="table__cell">XBOX 360</td>
+                            <td class="table__cell"></td>
+                            <td class="table__cell table__cell--numeric">$499.99</td>
+                            <td class="table__cell table__cell--numeric">345</td>
+                            <td class="table__cell table__cell--numeric">455</td>
+                            <td class="table__cell table__cell--numeric">205</td>
+                            <td class="table__cell table__cell--numeric">$17.99</td>
+                            <td class="table__cell">FREE</td>
+                            <td class="table__cell">4/17 - 4/25</td>
+                        </tr>
+                        <tr>
+                            <th class="table__cell">Microsoft</th>
+                            <td class="table__cell">XBOX One</td>
+                            <td class="table__cell"></td>
+                            <td class="table__cell table__cell--numeric">$499.99</td>
+                            <td class="table__cell table__cell--numeric">399</td>
+                            <td class="table__cell table__cell--numeric">407</td>
+                            <td class="table__cell table__cell--numeric">305</td>
+                            <td class="table__cell table__cell--numeric">$27.99</td>
+                            <td class="table__cell">FREE</td>
+                            <td class="table__cell">4/9 - 4/11</td>
+                        </tr>
+                        <tr>
+                            <th class="table__cell">Sony</th>
+                            <td class="table__cell">Playstation 5</td>
+                            <td class="table__cell"></td>
+                            <td class="table__cell table__cell--numeric">$519.99</td>
+                            <td class="table__cell table__cell--numeric">205</td>
+                            <td class="table__cell table__cell--numeric">265</td>
+                            <td class="table__cell table__cell--numeric">199</td>
+                            <td class="table__cell table__cell--numeric">$29.99</td>
+                            <td class="table__cell">FREE</td>
+                            <td class="table__cell">4/11 - 4/15</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code type="html">
+<div class="table table--density-compact" role="group" aria-label="Video games for sale" tabindex="0">
+    <table>
+        <thead>
+            <tr>
+                <th class="table__cell">Seller</th>
+                <th class="table__cell">Item</th>
+                <th class="table__cell">Image</th>
+                <th class="table__cell table__cell--numeric">List Price</th>
+                <th class="table__cell table__cell--numeric">Quantity Available</th>
+                <th class="table__cell table__cell--numeric">Quantity Sold</th>
+                <th class="table__cell table__cell--numeric">Watchers</th>
+                <th class="table__cell table__cell--numeric">Protection</th>
+                <th class="table__cell">Shipping</th>
+                <th class="table__cell">Delivery</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <th class="table__cell">Nintendo</th>
+                <td class="table__cell">Switch</td>
+                <td class="table__cell"></td>
+                <td class="table__cell table__cell--numeric">$287.96</td>
+                <td class="table__cell table__cell--numeric">300</td>
+                <td class="table__cell table__cell--numeric">207</td>
+                <td class="table__cell table__cell--numeric">95</td>
+                <td class="table__cell table__cell--numeric">$17.99</td>
+                <td class="table__cell">FREE</td>
+                <td class="table__cell">4/1 - 4/5</td>
+            </tr>
+            <tr>
+                <th class="table__cell">Nintendo</th>
+                <td class="table__cell">SNES</td>
+                <td class="table__cell"></td>
+                <td class="table__cell table__cell--numeric">$89.85</td>
+                <td class="table__cell table__cell--numeric">45</td>
+                <td class="table__cell table__cell--numeric">17</td>
+                <td class="table__cell table__cell--numeric">5</td>
+                <td class="table__cell table__cell--numeric">$18.95</td>
+                <td class="table__cell">FREE</td>
+                <td class="table__cell">4/11 - 4/15</td>
+            </tr>
+            <tr>
+                <th class="table__cell">Microsoft</th>
+                <td class="table__cell">XBOX 360</td>
+                <td class="table__cell"></td>
+                <td class="table__cell table__cell--numeric">$499.99</td>
+                <td class="table__cell table__cell--numeric">345</td>
+                <td class="table__cell table__cell--numeric">455</td>
+                <td class="table__cell table__cell--numeric">205</td>
+                <td class="table__cell table__cell--numeric">$17.99</td>
+                <td class="table__cell">FREE</td>
+                <td class="table__cell">4/17 - 4/25</td>
+            </tr>
+            <tr>
+                <th class="table__cell">Microsoft</th>
+                <td class="table__cell">XBOX One</td>
+                <td class="table__cell"></td>
+                <td class="table__cell table__cell--numeric">$499.99</td>
+                <td class="table__cell table__cell--numeric">399</td>
+                <td class="table__cell table__cell--numeric">407</td>
+                <td class="table__cell table__cell--numeric">305</td>
+                <td class="table__cell table__cell--numeric">$27.99</td>
+                <td class="table__cell">FREE</td>
+                <td class="table__cell">4/9 - 4/11</td>
+            </tr>
+            <tr>
+                <th class="table__cell">Sony</th>
+                <td class="table__cell">Playstation 5</td>
+                <td class="table__cell"></td>
+                <td class="table__cell table__cell--numeric">$519.99</td>
+                <td class="table__cell table__cell--numeric">205</td>
+                <td class="table__cell table__cell--numeric">265</td>
+                <td class="table__cell table__cell--numeric">199</td>
+                <td class="table__cell table__cell--numeric">$29.99</td>
+                <td class="table__cell">FREE</td>
+                <td class="table__cell">4/11 - 4/15</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+    </highlight-code>
+
+    <h3>Relaxed Density Table</h3>
+    <div class="demo">
+        <div class="demo__inner">
+            <div class="table table--density-relaxed" role="group" aria-label="Video games for sale" tabindex="0">
+                <table>
+                    <thead>
+                        <tr>
+                            <th class="table__cell">Seller</th>
+                            <th class="table__cell">Item</th>
+                            <th class="table__cell">Image</th>
+                            <th class="table__cell table__cell--numeric">List Price</th>
+                            <th class="table__cell table__cell--numeric">Quantity Available</th>
+                            <th class="table__cell table__cell--numeric">Quantity Sold</th>
+                            <th class="table__cell table__cell--numeric">Watchers</th>
+                            <th class="table__cell table__cell--numeric">Protection</th>
+                            <th class="table__cell">Shipping</th>
+                            <th class="table__cell">Delivery</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <th class="table__cell">Nintendo</th>
+                            <td class="table__cell">Switch</td>
+                            <td class="table__cell"></td>
+                            <td class="table__cell table__cell--numeric">$287.96</td>
+                            <td class="table__cell table__cell--numeric">300</td>
+                            <td class="table__cell table__cell--numeric">207</td>
+                            <td class="table__cell table__cell--numeric">95</td>
+                            <td class="table__cell table__cell--numeric">$17.99</td>
+                            <td class="table__cell">FREE</td>
+                            <td class="table__cell">4/1 - 4/5</td>
+                        </tr>
+                        <tr>
+                            <th class="table__cell">Nintendo</th>
+                            <td class="table__cell">SNES</td>
+                            <td class="table__cell"></td>
+                            <td class="table__cell table__cell--numeric">$89.85</td>
+                            <td class="table__cell table__cell--numeric">45</td>
+                            <td class="table__cell table__cell--numeric">17</td>
+                            <td class="table__cell table__cell--numeric">5</td>
+                            <td class="table__cell table__cell--numeric">$18.95</td>
+                            <td class="table__cell">FREE</td>
+                            <td class="table__cell">4/11 - 4/15</td>
+                        </tr>
+                        <tr>
+                            <th class="table__cell">Microsoft</th>
+                            <td class="table__cell">XBOX 360</td>
+                            <td class="table__cell"></td>
+                            <td class="table__cell table__cell--numeric">$499.99</td>
+                            <td class="table__cell table__cell--numeric">345</td>
+                            <td class="table__cell table__cell--numeric">455</td>
+                            <td class="table__cell table__cell--numeric">205</td>
+                            <td class="table__cell table__cell--numeric">$17.99</td>
+                            <td class="table__cell">FREE</td>
+                            <td class="table__cell">4/17 - 4/25</td>
+                        </tr>
+                        <tr>
+                            <th class="table__cell">Microsoft</th>
+                            <td class="table__cell">XBOX One</td>
+                            <td class="table__cell"></td>
+                            <td class="table__cell table__cell--numeric">$499.99</td>
+                            <td class="table__cell table__cell--numeric">399</td>
+                            <td class="table__cell table__cell--numeric">407</td>
+                            <td class="table__cell table__cell--numeric">305</td>
+                            <td class="table__cell table__cell--numeric">$27.99</td>
+                            <td class="table__cell">FREE</td>
+                            <td class="table__cell">4/9 - 4/11</td>
+                        </tr>
+                        <tr>
+                            <th class="table__cell">Sony</th>
+                            <td class="table__cell">Playstation 5</td>
+                            <td class="table__cell"></td>
+                            <td class="table__cell table__cell--numeric">$519.99</td>
+                            <td class="table__cell table__cell--numeric">205</td>
+                            <td class="table__cell table__cell--numeric">265</td>
+                            <td class="table__cell table__cell--numeric">199</td>
+                            <td class="table__cell table__cell--numeric">$29.99</td>
+                            <td class="table__cell">FREE</td>
+                            <td class="table__cell">4/11 - 4/15</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code type="html">
+<div class="table table--density-relaxed" role="group" aria-label="Video games for sale" tabindex="0">
+    <table>
+        <thead>
+            <tr>
+                <th class="table__cell">Seller</th>
+                <th class="table__cell">Item</th>
+                <th class="table__cell">Image</th>
+                <th class="table__cell table__cell--numeric">List Price</th>
+                <th class="table__cell table__cell--numeric">Quantity Available</th>
+                <th class="table__cell table__cell--numeric">Quantity Sold</th>
+                <th class="table__cell table__cell--numeric">Watchers</th>
+                <th class="table__cell table__cell--numeric">Protection</th>
+                <th class="table__cell">Shipping</th>
+                <th class="table__cell">Delivery</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <th class="table__cell">Nintendo</th>
+                <td class="table__cell">Switch</td>
+                <td class="table__cell"></td>
+                <td class="table__cell table__cell--numeric">$287.96</td>
+                <td class="table__cell table__cell--numeric">300</td>
+                <td class="table__cell table__cell--numeric">207</td>
+                <td class="table__cell table__cell--numeric">95</td>
+                <td class="table__cell table__cell--numeric">$17.99</td>
+                <td class="table__cell">FREE</td>
+                <td class="table__cell">4/1 - 4/5</td>
+            </tr>
+            <tr>
+                <th class="table__cell">Nintendo</th>
+                <td class="table__cell">SNES</td>
+                <td class="table__cell"></td>
+                <td class="table__cell table__cell--numeric">$89.85</td>
+                <td class="table__cell table__cell--numeric">45</td>
+                <td class="table__cell table__cell--numeric">17</td>
+                <td class="table__cell table__cell--numeric">5</td>
+                <td class="table__cell table__cell--numeric">$18.95</td>
+                <td class="table__cell">FREE</td>
+                <td class="table__cell">4/11 - 4/15</td>
+            </tr>
+            <tr>
+                <th class="table__cell">Microsoft</th>
+                <td class="table__cell">XBOX 360</td>
+                <td class="table__cell"></td>
+                <td class="table__cell table__cell--numeric">$499.99</td>
+                <td class="table__cell table__cell--numeric">345</td>
+                <td class="table__cell table__cell--numeric">455</td>
+                <td class="table__cell table__cell--numeric">205</td>
+                <td class="table__cell table__cell--numeric">$17.99</td>
+                <td class="table__cell">FREE</td>
+                <td class="table__cell">4/17 - 4/25</td>
+            </tr>
+            <tr>
+                <th class="table__cell">Microsoft</th>
+                <td class="table__cell">XBOX One</td>
+                <td class="table__cell"></td>
+                <td class="table__cell table__cell--numeric">$499.99</td>
+                <td class="table__cell table__cell--numeric">399</td>
+                <td class="table__cell table__cell--numeric">407</td>
+                <td class="table__cell table__cell--numeric">305</td>
+                <td class="table__cell table__cell--numeric">$27.99</td>
+                <td class="table__cell">FREE</td>
+                <td class="table__cell">4/9 - 4/11</td>
+            </tr>
+            <tr>
+                <th class="table__cell">Sony</th>
+                <td class="table__cell">Playstation 5</td>
+                <td class="table__cell"></td>
+                <td class="table__cell table__cell--numeric">$519.99</td>
+                <td class="table__cell table__cell--numeric">205</td>
+                <td class="table__cell table__cell--numeric">265</td>
+                <td class="table__cell table__cell--numeric">199</td>
+                <td class="table__cell table__cell--numeric">$29.99</td>
+                <td class="table__cell">FREE</td>
+                <td class="table__cell">4/11 - 4/15</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+    </highlight-code>
+
+    <h3>Table in Selection Mode</h3>
+
+    <p>
+        A table can be put into 'selection mode' by adding the class <span class="highlight">table--mode-selection</span> to the component parent. This will make slight spacing accommodations for the layout.
+    </p>
+
+    <p>
+        A table in selection mode allows users to select rows within a table. This is useful when users need to perform actions on selected rows.
+    </p>
+
+    <p>
+        The first column of the table will contain a checkbox that allows users to select the row. The first row of the table will contain a checkbox that allows users to select all rows. The checkbox in the table header should have an aria-label of something like, "Select all rows" while all other checkboxes should have an aria-label of something like, "Select row".
+    </p>
+
+    <p>
+        Each row should have one column that is its unique idenitifier. That column should typically be the first static column in the row. That column should be indicated using <span class="highlight">&lt;th scope="row"&gt;</span> element, which affords various accessibility benefits.
+    </p>
+
+
+    <div class="demo">
+        <div class="demo__inner">
+            <div class="table table--mode-selection" role="group" aria-label="Video games for sale" tabindex="0">
+                <table>
+                    <thead>
+                        <tr>
+                            <th class="table__cell">
+                                <span class="checkbox">
+                                    <input
+                                        aria-label="Select all rows"
+                                        class="checkbox__control"
+                                        type="checkbox"
+                                        name="checkbox-default"
+                                        >
+                                    <span class="checkbox__icon" hidden>
+                                        <svg
+                                            class="checkbox__unchecked"
+                                            height="18"
+                                            width="18"
+                                            aria-hidden="true"
+                                        >
+                                            <icon-symbol name="checkbox-unchecked-18"/>
+                                        </svg>
+                                        <svg
+                                            class="checkbox__checked"
+                                            height="18"
+                                            width="18"
+                                            aria-hidden="true"
+                                        >
+                                            <icon-symbol name="checkbox-checked-18"/>
+                                        </svg>
+                                    </span>
+                                </span>
+                            </th>
+                            <th class="table__cell">Seller</th>
+                            <th class="table__cell">Item</th>
+                            <th class="table__cell">Image</th>
+                            <th class="table__cell table__cell--numeric">List Price</th>
+                            <th class="table__cell table__cell--numeric">Quantity Available</th>
+                            <th class="table__cell table__cell--numeric">Quantity Sold</th>
+                            <th class="table__cell table__cell--numeric">Watchers</th>
+                            <th class="table__cell table__cell--numeric">Protection</th>
+                            <th class="table__cell">Shipping</th>
+                            <th class="table__cell">Delivery</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td class="table__cell">
+                                <span class="checkbox">
+                                    <input
+                                        aria-label="Select row"
+                                        class="checkbox__control"
+                                        type="checkbox"
+                                        name="checkbox-default"
+                                        >
+                                    <span class="checkbox__icon" hidden>
+                                        <svg
+                                            class="checkbox__unchecked"
+                                            height="18"
+                                            width="18"
+                                            aria-hidden="true"
+                                        >
+                                            <icon-symbol name="checkbox-unchecked-18"/>
+                                        </svg>
+                                        <svg
+                                            class="checkbox__checked"
+                                            height="18"
+                                            width="18"
+                                            aria-hidden="true"
+                                        >
+                                            <icon-symbol name="checkbox-checked-18"/>
+                                        </svg>
+                                    </span>
+                                </span>
+                            </td>
+                            <th class="table__cell">Nintendo</th>
+                            <td class="table__cell">Switch</td>
+                            <td class="table__cell"></td>
+                            <td class="table__cell table__cell--numeric">$287.96</td>
+                            <td class="table__cell table__cell--numeric">300</td>
+                            <td class="table__cell table__cell--numeric">207</td>
+                            <td class="table__cell table__cell--numeric">95</td>
+                            <td class="table__cell table__cell--numeric">$17.99</td>
+                            <td class="table__cell">FREE</td>
+                            <td class="table__cell">4/1 - 4/5</td>
+                        </tr>
+                        <tr>
+                            <td class="table__cell">
+                                <span class="checkbox">
+                                    <input
+                                        aria-label="Select row"
+                                        class="checkbox__control"
+                                        type="checkbox"
+                                        name="checkbox-default"
+                                        >
+                                    <span class="checkbox__icon" hidden>
+                                        <svg
+                                            class="checkbox__unchecked"
+                                            height="18"
+                                            width="18"
+                                            aria-hidden="true"
+                                        >
+                                            <icon-symbol name="checkbox-unchecked-18"/>
+                                        </svg>
+                                        <svg
+                                            class="checkbox__checked"
+                                            height="18"
+                                            width="18"
+                                            aria-hidden="true"
+                                        >
+                                            <icon-symbol name="checkbox-checked-18"/>
+                                        </svg>
+                                    </span>
+                                </span>
+                            </td>
+                            <th class="table__cell" scope="row">Nintendo</th>
+                            <td class="table__cell">SNES</td>
+                            <td class="table__cell"></td>
+                            <td class="table__cell table__cell--numeric">$89.85</td>
+                            <td class="table__cell table__cell--numeric">45</td>
+                            <td class="table__cell table__cell--numeric">17</td>
+                            <td class="table__cell table__cell--numeric">5</td>
+                            <td class="table__cell table__cell--numeric">$18.95</td>
+                            <td class="table__cell">FREE</td>
+                            <td class="table__cell">4/11 - 4/15</td>
+                        </tr>
+                        <tr>
+                            <td class="table__cell">
+                                <span class="checkbox">
+                                    <input
+                                        aria-label="Select row"
+                                        class="checkbox__control"
+                                        type="checkbox"
+                                        name="checkbox-default"
+                                        >
+                                    <span class="checkbox__icon" hidden>
+                                        <svg
+                                            class="checkbox__unchecked"
+                                            height="18"
+                                            width="18"
+                                            aria-hidden="true"
+                                        >
+                                            <icon-symbol name="checkbox-unchecked-18"/>
+                                        </svg>
+                                        <svg
+                                            class="checkbox__checked"
+                                            height="18"
+                                            width="18"
+                                            aria-hidden="true"
+                                        >
+                                            <icon-symbol name="checkbox-checked-18"/>
+                                        </svg>
+                                    </span>
+                                </span>
+                            </td>
+                            <th class="table__cell" scope="row">Microsoft</th>
+                            <td class="table__cell">XBOX 360</td>
+                            <td class="table__cell"></td>
+                            <td class="table__cell table__cell--numeric">$499.99</td>
+                            <td class="table__cell table__cell--numeric">345</td>
+                            <td class="table__cell table__cell--numeric">455</td>
+                            <td class="table__cell table__cell--numeric">205</td>
+                            <td class="table__cell table__cell--numeric">$17.99</td>
+                            <td class="table__cell">FREE</td>
+                            <td class="table__cell">4/17 - 4/25</td>
+                        </tr>
+                        <tr>
+                            <td class="table__cell">
+                                <span class="checkbox">
+                                    <input
+                                        aria-label="Select row"
+                                        class="checkbox__control"
+                                        type="checkbox"
+                                        name="checkbox-default"
+                                        >
+                                    <span class="checkbox__icon" hidden>
+                                        <svg
+                                            class="checkbox__unchecked"
+                                            height="18"
+                                            width="18"
+                                            aria-hidden="true"
+                                        >
+                                            <icon-symbol name="checkbox-unchecked-18"/>
+                                        </svg>
+                                        <svg
+                                            class="checkbox__checked"
+                                            height="18"
+                                            width="18"
+                                            aria-hidden="true"
+                                        >
+                                            <icon-symbol name="checkbox-checked-18"/>
+                                        </svg>
+                                    </span>
+                                </span>
+                            </td>
+                            <th class="table__cell" scope="row">Microsoft</th>
+                            <td class="table__cell">XBOX One</td>
+                            <td class="table__cell"></td>
+                            <td class="table__cell table__cell--numeric">$499.99</td>
+                            <td class="table__cell table__cell--numeric">399</td>
+                            <td class="table__cell table__cell--numeric">407</td>
+                            <td class="table__cell table__cell--numeric">305</td>
+                            <td class="table__cell table__cell--numeric">$27.99</td>
+                            <td class="table__cell">FREE</td>
+                            <td class="table__cell">4/9 - 4/11</td>
+                        </tr>
+                        <tr>
+                            <td class="table__cell">
+                                <span class="checkbox">
+                                    <input
+                                        aria-label="Select row"
+                                        class="checkbox__control"
+                                        type="checkbox"
+                                        name="checkbox-default"
+                                        >
+                                    <span class="checkbox__icon" hidden>
+                                        <svg
+                                            class="checkbox__unchecked"
+                                            height="18"
+                                            width="18"
+                                            aria-hidden="true"
+                                        >
+                                            <icon-symbol name="checkbox-unchecked-18"/>
+                                        </svg>
+                                        <svg
+                                            class="checkbox__checked"
+                                            height="18"
+                                            width="18"
+                                            aria-hidden="true"
+                                        >
+                                            <icon-symbol name="checkbox-checked-18"/>
+                                        </svg>
+                                    </span>
+                                </span>
+                            </td>
+                            <th class="table__cell" scope="row">Sony</th>
+                            <td class="table__cell">Playstation 5</td>
+                            <td class="table__cell"></td>
+                            <td class="table__cell table__cell--numeric">$519.99</td>
+                            <td class="table__cell table__cell--numeric">205</td>
+                            <td class="table__cell table__cell--numeric">265</td>
+                            <td class="table__cell table__cell--numeric">199</td>
+                            <td class="table__cell table__cell--numeric">$29.99</td>
+                            <td class="table__cell">FREE</td>
+                            <td class="table__cell">4/11 - 4/15</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code type="html">
+<div class="table table--mode-selection" role="group" aria-label="Video games for sale" tabindex="0">
+    <table>
+        <thead>
+            <tr>
+                <th class="table__cell">
+                    <span class="checkbox">
+                        <input
+                            aria-label="Select all rows"
+                            class="checkbox__control"
+                            type="checkbox"
+                            name="checkbox-default"
+                            >
+                        <pseudo-code-checkbox-icon/>
+                    </span>
+                </th>
+                <th class="table__cell">Seller</th>
+                <th class="table__cell">Item</th>
+                <th class="table__cell">Image</th>
+                <th class="table__cell table__cell--numeric">List Price</th>
+                <th class="table__cell table__cell--numeric">Quantity Available</th>
+                <th class="table__cell table__cell--numeric">Quantity Sold</th>
+                <th class="table__cell table__cell--numeric">Watchers</th>
+                <th class="table__cell table__cell--numeric">Protection</th>
+                <th class="table__cell">Shipping</th>
+                <th class="table__cell">Delivery</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td class="table__cell">
+                    <span class="checkbox">
+                        <input
+                            aria-label="Select row"
+                            class="checkbox__control"
+                            type="checkbox"
+                            name="checkbox-default"
+                            >
+                        <pseudo-code-checkbox-icon/>
+                    </span>
+                </td>
+                <th class="table__cell" scope="row">Nintendo</th>
+                <td class="table__cell">Switch</td>
+                <td class="table__cell"></td>
+                <td class="table__cell table__cell--numeric">$287.96</td>
+                <td class="table__cell table__cell--numeric">300</td>
+                <td class="table__cell table__cell--numeric">207</td>
+                <td class="table__cell table__cell--numeric">95</td>
+                <td class="table__cell table__cell--numeric">$17.99</td>
+                <td class="table__cell">FREE</td>
+                <td class="table__cell">4/1 - 4/5</td>
+            </tr>
+            <tr>
+                <td class="table__cell">
+                    <span class="checkbox">
+                        <input
+                            aria-label="Select row"
+                            class="checkbox__control"
+                            type="checkbox"
+                            name="checkbox-default"
+                            >
+                        <pseudo-code-checkbox-icon/>
+                    </span>
+                </td>
+                <th class="table__cell">Nintendo</th>
+                <td class="table__cell">SNES</td>
+                <td class="table__cell"></td>
+                <td class="table__cell table__cell--numeric">
+                $89.85
+                </td>
+                <td class="table__cell table__cell--numeric">45</td>
+                <td class="table__cell table__cell--numeric">17</td>
+                <td class="table__cell table__cell--numeric">5</td>
+                <td class="table__cell table__cell--numeric">$18.95</td>
+                <td class="table__cell">FREE</td>
+                <td class="table__cell">4/11 - 4/15</td>
+            </tr>
+            <tr>
+                <td class="table__cell">
+                    <span class="checkbox">
+                        <input
+                            aria-label="Select row"
+                            class="checkbox__control"
+                            type="checkbox"
+                            name="checkbox-default"
+                            >
+                        <pseudo-code-checkbox-icon/>
+                    </span>
+                </td>
+                <th class="table__cell" scope="row">Microsoft</th>
+                <td class="table__cell">XBOX 360</td>
+                <td class="table__cell"></td>
+                <td class="table__cell table__cell--numeric">$499.99</td>
+                <td class="table__cell table__cell--numeric">345</td>
+                <td class="table__cell table__cell--numeric">455</td>
+                <td class="table__cell table__cell--numeric">205</td>
+                <td class="table__cell table__cell--numeric">$17.99</td>
+                <td class="table__cell">FREE</td>
+                <td class="table__cell">4/17 - 4/25</td>
+            </tr>
+            <tr>
+                <td class="table__cell">
+                    <span class="checkbox">
+                        <input
+                            aria-label="Select row"
+                            class="checkbox__control"
+                            type="checkbox"
+                            name="checkbox-default"
+                            >
+                        <pseudo-code-checkbox-icon/>
+                    </span>
+                </td>
+                <th class="table__cell" scope="row">Microsoft</th>
+                <td class="table__cell">XBOX One</td>
+                <td class="table__cell"></td>
+                <td class="table__cell table__cell--numeric">$499.99</td>
+                <td class="table__cell table__cell--numeric">399</td>
+                <td class="table__cell table__cell--numeric">407</td>
+                <td class="table__cell table__cell--numeric">305</td>
+                <td class="table__cell table__cell--numeric">$27.99</td>
+                <td class="table__cell">FREE</td>
+                <td class="table__cell">4/9 - 4/11</td>
+            </tr>
+            <tr>
+                <td class="table__cell">
+                    <span class="checkbox">
+                        <input
+                            aria-label="Select row"
+                            class="checkbox__control"
+                            type="checkbox"
+                            name="checkbox-default"
+                            >
+                        <pseudo-code-checkbox-icon/>
+                    </span>
+                </td>
+                <th class="table__cell" scope="row">Sony</th>
+                <td class="table__cell">Playstation 5</td>
+                <td class="table__cell"></td>
+                <td class="table__cell table__cell--numeric">$519.99</td>
+                <td class="table__cell table__cell--numeric">205</td>
+                <td class="table__cell table__cell--numeric">265</td>
+                <td class="table__cell table__cell--numeric">199</td>
+                <td class="table__cell table__cell--numeric">$29.99</td>
+                <td class="table__cell">FREE</td>
+                <td class="table__cell">4/11 - 4/15</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+    </highlight-code>
+
+</div>
+export const metadata = {
+    "ds-component": {
+        name: "table",
+        version: 0.1,
+        alpha: true,
+    },
+};