Improve table styles in docs

docs/assets/plugins/metadata/metadata.js

@@ -7,7 +7,6 @@
       <thead>
         <tr>
           <th>Property</th>
-          <th>Attribute</th>
           <th>Description</th>
           <th>Type</th>
           <th>Default</th>
@@ -18,11 +17,20 @@
           .map(
             prop => `
         <tr>
-          <td><code>${escapeHtml(prop.name)}</code></td>
-          <td><code style="white-space: nowrap;">${escapeHtml(prop.attr)}</code></td>
+          <td>
+            <code>${escapeHtml(prop.name)}</code>
+            ${prop.name !== prop.attr && prop.attr !== undefined ? (`
+              <br>
+              <small>
+                <sl-tooltip content="Use the kebab-case variation in your HTML">
+                  <code class="attribute-tooltip">${escapeHtml(prop.attr)}</code>
+                </sl-tooltip>
+              </small>`
+            ) : ''}
+          </td>
           <td>${escapeHtml(prop.docs)}</td>
-          <td><code>${escapeHtml(prop.type)}</code></td>
-          <td><code>${escapeHtml(prop.default)}</code></td>
+          <td><code style="white-space: normal;">${escapeHtml(prop.type)}</code></td>
+          <td><code style="white-space: normal;">${escapeHtml(prop.default)}</code></td>
         </tr>
         `
           )
@@ -129,7 +137,7 @@
           .map(
             style => `
         <tr>
-          <td><code style="white-space: nowrap;">${escapeHtml(style.name)}</code></td>
+          <td><code>${escapeHtml(style.name)}</code></td>
           <td>${escapeHtml(style.docs)}</td>
         </tr>
         `

docs/assets/styles/docs.css

@@ -283,10 +283,6 @@ strong {
   padding: 2px 4px;
 }
 
-.markdown-section table code:not([class*="lang-"]):not([class*="language-"]) {
-  white-space: normal;
-}
-
 /* Code blocks */
 .markdown-section pre {
   position: relative;
@@ -401,6 +397,16 @@ strong {
   border-right: none;
 }
 
+.markdown-section td code {
+  white-space: nowrap;
+}
+
+.markdown-section table .attribute-tooltip {
+  background: none;
+  border-bottom: dashed 1px var(--sl-color-gray-80);
+  cursor: help;
+}
+
 /* Tips & Warnings */
 .markdown-section p.tip,
 .markdown-section p.warn {