From b962b24162ab6044963336b3cb113d6e68bc2570 Mon Sep 17 00:00:00 2001
From: Vincent Langlois <vtlanglo@gmail.com>
Date: Sun, 28 Apr 2024 12:47:14 -0400
Subject: [PATCH 1/2] Added optional `::selection` styling for `.window-body`
 children

---
 docs/index.html.ejs | 23 +++++++++++++++++++++++
 style.css           |  8 ++++++++
 2 files changed, 31 insertions(+)

diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index 088064a..c004c17 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -740,6 +740,29 @@
             </div>
           </div>
         `) %>
+
+        <p>
+          To apply custom selection styling to children of a <code>window-body</code> element, you can add the optional <code>color-highlight</code> class. Note that overriding selection styling may impact <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::selection#accessibility_concerns">accessibility</a>, so use at your own discretion. 
+        </p>
+        
+
+        <%- example(`
+        <div class="window" style="width: 300px">
+          <div class="title-bar">
+            <div class="title-bar-text">A Window With Stuff In It</div>
+            <div class="title-bar-controls">
+              <button aria-label="Minimize"></button>
+              <button aria-label="Maximize"></button>
+              <button aria-label="Close"></button>
+            </div>
+          </div>
+          <div class="window-body">
+            <p class="color-highlight">You can highlight me and a custom <code>::selection</code> styling will be present!</p>
+
+            <p> I have no custom <code>::selection</code> styling</p>
+          </div>
+        </div>
+      `) %>
       </div>
     </section>
 
diff --git a/style.css b/style.css
index 5abea5a..d8b5596 100644
--- a/style.css
+++ b/style.css
@@ -17,6 +17,8 @@
   --dialog-gray: #808080;
   --dialog-gray-light: #b5b5b5;
   --link-blue: #0000ff;
+  --highlight-blue: #00005e;
+  --text-highlight: #ffffff;
 
   /* Spacing */
   --element-spacing: 8px;
@@ -330,6 +332,12 @@ input[type="reset"]:disabled,
   margin: var(--element-spacing);
 }
 
+.window-body .color-highlight::selection,
+.window-body .color-highlight *::selection {
+  color: var(--text-highlight);
+  background-color: var(--highlight-blue);
+}
+
 fieldset {
   border-image: svg-load("./icon/groupbox-border.svg") 2;
   padding: calc(2 * var(--border-width) + var(--element-spacing));

From ab0b616a375f8e63bab7e7e609848d6bce6d4947 Mon Sep 17 00:00:00 2001
From: Vincent Langlois <vtlanglo@gmail.com>
Date: Sun, 28 Apr 2024 12:54:10 -0400
Subject: [PATCH 2/2] Removed space

---
 docs/index.html.ejs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index c004c17..67c92c5 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -745,7 +745,6 @@
           To apply custom selection styling to children of a <code>window-body</code> element, you can add the optional <code>color-highlight</code> class. Note that overriding selection styling may impact <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::selection#accessibility_concerns">accessibility</a>, so use at your own discretion. 
         </p>
         
-
         <%- example(`
         <div class="window" style="width: 300px">
           <div class="title-bar">