From 0c40579be4cc15d6f10a01eb134aceb254127b9d Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Sat, 14 Dec 2024 15:30:51 -0500
Subject: [PATCH] Split visually hidden into a separate file that components
 can import

---
 src/styles/applied.css                   | 13 ++-----------
 src/styles/utilities/visually-hidden.css | 12 ++++++++++++
 2 files changed, 14 insertions(+), 11 deletions(-)
 create mode 100644 src/styles/utilities/visually-hidden.css

diff --git a/src/styles/applied.css b/src/styles/applied.css
index 886c6f3d4..f0354e192 100644
--- a/src/styles/applied.css
+++ b/src/styles/applied.css
@@ -1,3 +1,5 @@
+@import url('utilities/visually-hidden.css');
+
 /**
  * Applied styles are used to "reset" a page and provide defaults for typography and native HTML elements based on
  * Web Awesome's design tokens.
@@ -456,17 +458,6 @@ textarea {
 }
 
 /* Utilities */
-.wa-visually-hidden:not(:focus-within) {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  clip: rect(0 0 0 0) !important;
-  clip-path: inset(50%) !important;
-  border: none !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  padding: 0 !important;
-}
 
 table.wa-alternating-row-colors tbody tr:nth-child(2n + 1) {
   background-color: color-mix(in oklab, var(--wa-color-neutral-fill-normal), transparent 80%);
diff --git a/src/styles/utilities/visually-hidden.css b/src/styles/utilities/visually-hidden.css
new file mode 100644
index 000000000..88cdaac6a
--- /dev/null
+++ b/src/styles/utilities/visually-hidden.css
@@ -0,0 +1,12 @@
+.wa-visually-hidden:not(:focus-within),
+.wa-visually-hidden-force {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  clip: rect(0 0 0 0) !important;
+  clip-path: inset(50%) !important;
+  border: none !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+}