From 84734a56b63cddccbb9622085dc3f1786bb4c7f3 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Fri, 20 Dec 2024 13:19:56 -0500
Subject: [PATCH] Add class names to utility class pages

---
 docs/_layouts/utilities.njk            | 5 +++--
 docs/docs/utilities/appearance.md      | 5 +++++
 docs/docs/utilities/color.md           | 6 ++++++
 docs/docs/utilities/size.md            | 5 +++++
 docs/docs/utilities/visually-hidden.md | 5 +++--
 src/styles/utilities/size.css          | 7 ++++++-
 6 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/docs/_layouts/utilities.njk b/docs/_layouts/utilities.njk
index f0d89be27..dd09e8265 100644
--- a/docs/_layouts/utilities.njk
+++ b/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>
diff --git a/docs/docs/utilities/appearance.md b/docs/docs/utilities/appearance.md
index 4c9888a3f..aa6a2b226 100644
--- a/docs/docs/utilities/appearance.md
+++ b/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:
diff --git a/docs/docs/utilities/color.md b/docs/docs/utilities/color.md
index f896c5d34..116219315 100644
--- a/docs/docs/utilities/color.md
+++ b/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:
diff --git a/docs/docs/utilities/size.md b/docs/docs/utilities/size.md
index afd408c81..98b7a4766 100644
--- a/docs/docs/utilities/size.md
+++ b/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:
diff --git a/docs/docs/utilities/visually-hidden.md b/docs/docs/utilities/visually-hidden.md
index d667b4807..391b18b84 100644
--- a/docs/docs/utilities/visually-hidden.md
+++ b/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/)
 
diff --git a/src/styles/utilities/size.css b/src/styles/utilities/size.css
index a7e75354e..96d1cf9ad 100644
--- a/src/styles/utilities/size.css
+++ b/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']),