Add class names to utility class pages

docs/_layouts/utilities.njk

@@ -7,8 +7,9 @@
 {% block beforeContent %}
   <h1 class="title">{{ title }}</h1>
   <div class="component-info">
-    {% for tag, url in elements %}
-      <code class="tag"><a href="{{ url }}">{{ tag }}</a></code>
+
+    {% for className in classes %}
+      <code class="class">.{{ className }}</code>
     {% endfor %}
     {% include '../_includes/status.njk' %}
   </div>

docs/docs/utilities/appearance.md

@@ -1,6 +1,11 @@
 ---
 title: Appearance Variants
 description: Appearance utilities apply a collection of properties to achieve certain effects, like making elements accented, outlined, filled, or plain.
+classes:
+  - wa-accent
+  - wa-outlined
+  - wa-filled
+  - wa-plain
 ---
 
 Some Web Awesome components, like `<wa-button>`, allow you to change their overall style by using an `appearance` attribute:

docs/docs/utilities/color.md

@@ -2,6 +2,12 @@
 title: Color Variants
 description: Color utilities allow you to apply the brand, neutral, success, warning, and danger colors from your theme to any element.
 icon: theming/color
+classes:
+  - wa-brand
+  - wa-neutral
+  - wa-success
+  - wa-warning
+  - wa-danger
 ---
 
 Some Web Awesome components, like `<wa-button>`, allow you to change the color by using a `variant` attribute:

docs/docs/utilities/size.md

@@ -2,6 +2,11 @@
 title: Size
 description: Size utilities give elements one of three preset sizes (small, medium, or large).
 icon: theming/space
+status: experimental
+classes:
+  - wa-size-s
+  - wa-size-m
+  - wa-size-l
 ---
 
 Some Web Awesome components, like `<wa-button>`, allow you to change their size to one of three presets: `small`, `medium`, and `large` by using a `size` attribute:

docs/docs/utilities/visually-hidden.md

@@ -2,10 +2,11 @@
 title: Visually Hidden
 description: The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
 icon: visually-hidden
+classes:
+  - wa-visually-hidden
+  - wa-visually-hidden-force
 ---
 
-`.wa-visually-hidden` `.wa-visually-hidden-force`
-
 > "there are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers. For instance, hiding a search field's label as a common magnifying glass icon is used in its stead."
 > — [The A11Y Project](https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/)
 

src/styles/utilities/size.css

@@ -21,7 +21,12 @@
 .wa-size-s,
 .wa-size-m,
 .wa-size-l {
-  --wa-form-control-height: calc(2 * var(--wa-space-smaller) + 1em * var(--wa-form-control-value-line-height));
+  --_wa-form-control-height: calc(2 * var(--wa-space-smaller) + 1em * var(--wa-form-control-value-line-height));
+  --wa-form-control-height: var(--wa-form-control-height-raw);
+
+  @supports (height: round(1.2px, 1px)) {
+    --wa-form-control-height: round(var(--_wa-form-control-height), 1px);
+  }
 }
 
 :host([size='small']),