Docs: Adding CSS Selector Info to Components (#1679)

* adding CSS selector info to component docs

* adding Copy Button to custom states' CSS selectors in component docs

packages/webawesome/docs/_layouts/component.njk

@@ -211,7 +211,12 @@
             <tr>
               <td class="table-name"><code>{{ state.name }}</code></td>
               <td class="table-description">{{ state.description | inlineMarkdown | safe }}</td>
-              <td class="table-selector"><code>:state({{ state.name }})</code></td>
+              <td class="table-selector">
+                <span class="wa-cluster wa-gap-3xs">
+                  <code>:state({{ state.name }})</code>
+                  <wa-copy-button value=":state({{ state.name }})"></wa-copy-button>
+                </span>
+              </td>
             </tr>
           {% endfor %}
         </tbody>
@@ -230,6 +235,7 @@
           <tr>
             <th class="table-name">Name</th>
             <th class="table-description">Description</th>
+            <th class="table-selector">CSS selector</th>
           </tr>
         </thead>
         <tbody>
@@ -237,6 +243,12 @@
             <tr>
               <td class="table-name"><code>{{ cssPart.name }}</code></td>
               <td class="table-description">{{ cssPart.description | inlineMarkdown | safe }}</td>
+              <td class="table-selector">
+                <span class="wa-cluster wa-gap-3xs">
+                  <code>::part({{ cssPart.name }})</code>
+                  <wa-copy-button value="::part({{ cssPart.name }})"></wa-copy-button>
+                </span>
+              </td>
             </tr>
           {% endfor %}
         </tbody>

packages/webawesome/docs/assets/styles/docs.css

@@ -665,6 +665,10 @@ wa-scroller:has(.component-table) {
     min-width: var(--line-length-xs);
   }
 
+  .table-selector .wa-cluster {
+    flex-wrap: nowrap;
+  }
+
   .table-reflect {
     text-align: center;
   }