From ce1636225756ee0095fdb845cc86a28bb1b96c2f Mon Sep 17 00:00:00 2001
From: "amaresh.sm" <amareshsm13@gmail.com>
Date: Fri, 27 May 2022 00:29:12 +0530
Subject: [PATCH 1/8] chore: reduce cumulative layout shit

---
 docs/src/_includes/components/docs-index.html           | 6 +++---
 docs/src/_includes/components/nav-version-switcher.html | 2 +-
 docs/src/_includes/components/version-switcher.html     | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/src/_includes/components/docs-index.html b/docs/src/_includes/components/docs-index.html
index 90425816582..c5652a11248 100644
--- a/docs/src/_includes/components/docs-index.html
+++ b/docs/src/_includes/components/docs-index.html
@@ -10,8 +10,8 @@
 </li>
 {%- endmacro %}
 
-<nav class="docs-index" id="docs-index">
-    <button class="docs-index-toggle" aria-label="Index" id="js-docs-index-toggle" hidden>
+<nav class="docs-index" id="docs-index" >
+    <button class="docs-index-toggle" aria-label="Index" id="js-docs-index-toggle">
         Index
         <svg width="20" height="20" viewBox="20 20 60 60">
             <path id="ham-top" d="M30,37 L70,37 Z" stroke="currentColor"></path>
@@ -19,7 +19,7 @@
             <path id="ham-bottom" d="M30,63 L70,63 Z" stroke="currentColor"></path>
         </svg>
     </button>
-    <ul class="docs-index__list" id="js-docs-index-list">
+    <ul class="docs-index__list" id="js-docs-index-list" data-open="false">
         {%- for entry in navPages %}{{ renderNavListItem(entry) }}{%- endfor -%}
     </ul>
 </nav>
diff --git a/docs/src/_includes/components/nav-version-switcher.html b/docs/src/_includes/components/nav-version-switcher.html
index 6481d4256d4..622d5a34500 100644
--- a/docs/src/_includes/components/nav-version-switcher.html
+++ b/docs/src/_includes/components/nav-version-switcher.html
@@ -1,7 +1,7 @@
 <div class="version-switcher">
     <a href="/versions/" class="switcher-fallback">Versions</a>
 
-    <div hidden role="region" class="switcher switcher--version" aria-labelledby="nav-version-switcher-label" id="nav-version-switcher">
+    <div  role="region" class="switcher switcher--version" aria-labelledby="nav-version-switcher-label" id="nav-version-switcher">
         <span id="nav-version-switcher-label" hidden>Language Switcher</span>
         <div class="infobox visually-hidden" id="nav-version-infobox">
             Selecting a language will take you to the ESLint Web site in that language.
diff --git a/docs/src/_includes/components/version-switcher.html b/docs/src/_includes/components/version-switcher.html
index 0d28ba7dc3a..346f62b58c3 100644
--- a/docs/src/_includes/components/version-switcher.html
+++ b/docs/src/_includes/components/version-switcher.html
@@ -1,7 +1,7 @@
 <div class="version-switcher">
-    <a href="/versions/" class="switcher-fallback">Versions</a>
+    <a hidden href="/versions/" class="switcher-fallback">Versions</a>
 
-    <div hidden role="region" class="switcher switcher--version" aria-labelledby="version-switcher-label" id="version-switcher">
+    <div  role="region" class="switcher switcher--version" aria-labelledby="version-switcher-label" id="version-switcher">
         <span id="version-switcher-label" hidden>Version Switcher</span>
         <div class="infobox visually-hidden" id="version-infobox">
             Selecting a version will take you to the ESLint Web site for that version.

From b8d0a4d279cd56f6f22fcf347a911ab00f7726b9 Mon Sep 17 00:00:00 2001
From: "amaresh.sm" <amareshsm13@gmail.com>
Date: Fri, 27 May 2022 16:50:52 +0530
Subject: [PATCH 2/8] docs: revert version switcher changes

---
 docs/src/_includes/components/version-switcher.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/_includes/components/version-switcher.html b/docs/src/_includes/components/version-switcher.html
index 346f62b58c3..0d28ba7dc3a 100644
--- a/docs/src/_includes/components/version-switcher.html
+++ b/docs/src/_includes/components/version-switcher.html
@@ -1,7 +1,7 @@
 <div class="version-switcher">
-    <a hidden href="/versions/" class="switcher-fallback">Versions</a>
+    <a href="/versions/" class="switcher-fallback">Versions</a>
 
-    <div  role="region" class="switcher switcher--version" aria-labelledby="version-switcher-label" id="version-switcher">
+    <div hidden role="region" class="switcher switcher--version" aria-labelledby="version-switcher-label" id="version-switcher">
         <span id="version-switcher-label" hidden>Version Switcher</span>
         <div class="infobox visually-hidden" id="version-infobox">
             Selecting a version will take you to the ESLint Web site for that version.

From 08e7697e35d8de0599f9988c1b6ed8aada619f26 Mon Sep 17 00:00:00 2001
From: "amaresh.sm" <amareshsm13@gmail.com>
Date: Fri, 27 May 2022 20:59:23 +0530
Subject: [PATCH 3/8] fix: use noscript to reduce cls

---
 docs/src/_includes/components/docs-index.html |   28 +-
 .../nav-version-switcher-noscript.html        |    3 +
 .../components/nav-version-switcher.html      |    2 -
 docs/src/_includes/components/navigation.html |   38 +-
 .../components/version-switcher.html          |   20 +-
 .../assets/css/components/docs-navigation.css |  204 +-
 docs/src/assets/css/styles.css                | 2440 ++++++++++-------
 docs/src/assets/scss/_utilities.scss          |    4 +
 .../scss/components/docs-navigation.scss      |   32 +
 9 files changed, 1694 insertions(+), 1077 deletions(-)
 create mode 100644 docs/src/_includes/components/nav-version-switcher-noscript.html

diff --git a/docs/src/_includes/components/docs-index.html b/docs/src/_includes/components/docs-index.html
index c5652a11248..e1ecfa775a9 100644
--- a/docs/src/_includes/components/docs-index.html
+++ b/docs/src/_includes/components/docs-index.html
@@ -19,7 +19,33 @@
             <path id="ham-bottom" d="M30,63 L70,63 Z" stroke="currentColor"></path>
         </svg>
     </button>
-    <ul class="docs-index__list" id="js-docs-index-list" data-open="false">
+    <noscript>
+        <style>
+            #js-docs-index-toggle{
+                display: none;
+            }
+        </style>
+        <button class="docs-index-toggle" aria-label="Index"  hidden>
+            Index
+            <svg width="20" height="20" viewBox="20 20 60 60">
+                <path id="ham-top" d="M30,37 L70,37 Z" stroke="currentColor"></path>
+                <path id="ham-middle" d="M30,50 L70,50 Z" stroke="currentColor"></path>
+                <path id="ham-bottom" d="M30,63 L70,63 Z" stroke="currentColor"></path>
+            </svg>
+        </button>
+    </noscript>
+
+    <ul class="docs-index__list" id="js-docs-index-list">
+        {%- for entry in navPages %}{{ renderNavListItem(entry) }}{%- endfor -%}
+    </ul>
+    <noscript>
+        <style>
+            #js-docs-index-list{
+                display: none;
+            }
+        </style>
+    <ul class="docs-index__list" >
         {%- for entry in navPages %}{{ renderNavListItem(entry) }}{%- endfor -%}
     </ul>
+</noscript>
 </nav>
diff --git a/docs/src/_includes/components/nav-version-switcher-noscript.html b/docs/src/_includes/components/nav-version-switcher-noscript.html
new file mode 100644
index 00000000000..21dabdf4e8c
--- /dev/null
+++ b/docs/src/_includes/components/nav-version-switcher-noscript.html
@@ -0,0 +1,3 @@
+<div class="version-switcher">
+    <a href="/versions/" class="switcher-fallback">Versions</a>
+</div>
\ No newline at end of file
diff --git a/docs/src/_includes/components/nav-version-switcher.html b/docs/src/_includes/components/nav-version-switcher.html
index 622d5a34500..f2521d39379 100644
--- a/docs/src/_includes/components/nav-version-switcher.html
+++ b/docs/src/_includes/components/nav-version-switcher.html
@@ -1,6 +1,4 @@
 <div class="version-switcher">
-    <a href="/versions/" class="switcher-fallback">Versions</a>
-
     <div  role="region" class="switcher switcher--version" aria-labelledby="nav-version-switcher-label" id="nav-version-switcher">
         <span id="nav-version-switcher-label" hidden>Language Switcher</span>
         <div class="infobox visually-hidden" id="nav-version-infobox">
diff --git a/docs/src/_includes/components/navigation.html b/docs/src/_includes/components/navigation.html
index 2aedb4bf664..74ea2355028 100644
--- a/docs/src/_includes/components/navigation.html
+++ b/docs/src/_includes/components/navigation.html
@@ -1,13 +1,29 @@
 <nav class="docs-site-nav" aria-label="Main">
     <div class="flexer">
         <a href="https://eslint.org/donate" class="c-btn c-btn--primary donate-link">Donate</a>
-        <button class="docs-site-nav-toggle" aria-label="Menu" id="nav-toggle" hidden>
+
+        <button class="docs-site-nav-toggle" aria-label="Menu" id="nav-toggle">
             <svg width="20" height="20" viewBox="20 20 60 60">
                 <path id="ham-top"    d="M30,37 L70,37 Z" stroke="currentColor"></path>
                 <path id="ham-middle" d="M30,50 L70,50 Z" stroke="currentColor"></path>
                 <path id="ham-bottom" d="M30,63 L70,63 Z" stroke="currentColor"></path>
             </svg>
         </button>
+        <noscript>
+            <style>
+                #nav-toggle{
+                    display: none;
+                }
+            </style>
+            <button class="docs-site-nav-toggle" aria-label="Menu" hidden>
+                <svg width="20" height="20" viewBox="20 20 60 60">
+                    <path id="ham-top"    d="M30,37 L70,37 Z" stroke="currentColor"></path>
+                    <path id="ham-middle" d="M30,50 L70,50 Z" stroke="currentColor"></path>
+                    <path id="ham-bottom" d="M30,63 L70,63 Z" stroke="currentColor"></path>
+                </svg>
+            </button>
+        </noscript>
+ 
     </div>
     <div class="docs-nav-panel" id="nav-panel">
         <ul id="nav-list">
@@ -22,4 +38,24 @@
             {% include 'components/nav-search.html' %}
         </div>
     </div>
+    <noscript>
+        <style>
+            #nav-panel{
+                display:none;
+            }
+        </style>
+        <div class="docs-nav-panel" >
+            <ul id="nav-list">
+                {% for item in navigation.items %}
+                <li>
+                    <a href="{{ item.url }}" {% if item.text == 'Docs' %} aria-current="true"{% endif %}>{{ item.text }}</a>
+                </li>
+                {% endfor %}
+            </ul>
+        </div>
+        <div class="mobile-only">
+            {% include 'components/nav-version-switcher-noscript.html' %}
+            {% include 'components/nav-search.html' %}
+        </div>
+    </noscript>
 </nav>
diff --git a/docs/src/_includes/components/version-switcher.html b/docs/src/_includes/components/version-switcher.html
index 0d28ba7dc3a..a97a1b1c977 100644
--- a/docs/src/_includes/components/version-switcher.html
+++ b/docs/src/_includes/components/version-switcher.html
@@ -1,7 +1,15 @@
 <div class="version-switcher">
-    <a href="/versions/" class="switcher-fallback">Versions</a>
+    <noscript>
+        <style>
+            #version-switcher {
+                display: none;
+            }
+        </style>
+        <a href="/versions/" class="switcher-fallback">Versions</a>
+    </noscript>
 
-    <div hidden role="region" class="switcher switcher--version" aria-labelledby="version-switcher-label" id="version-switcher">
+    <div role="region" class="switcher switcher--version" aria-labelledby="version-switcher-label"
+        id="version-switcher">
         <span id="version-switcher-label" hidden>Version Switcher</span>
         <div class="infobox visually-hidden" id="version-infobox">
             Selecting a version will take you to the ESLint Web site for that version.
@@ -10,16 +18,16 @@
         <label class="switcher__label label--block" for="version-select">
             Version
         </label>
-        <select name="version selector" id="version-select" aria-describedby="version-infobox" class="c-custom-select switcher__select auto-switcher">
+        <select name="version selector" id="version-select" aria-describedby="version-infobox"
+            class="c-custom-select switcher__select auto-switcher">
             <option value="{{ eslintVersion }}" selected>
                 v{{ eslintVersion }}
             </option>
             {% for version in versions.items %}
-            <option value="{{ version.number }}"
-                    data-url="{{ version.url }}">
+            <option value="{{ version.number }}" data-url="{{ version.url }}">
                 v{{ version.number }}
             </option>
             {% endfor %}
         </select>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/docs/src/assets/css/components/docs-navigation.css b/docs/src/assets/css/components/docs-navigation.css
index f32aa044b2f..a64d4753558 100644
--- a/docs/src/assets/css/components/docs-navigation.css
+++ b/docs/src/assets/css/components/docs-navigation.css
@@ -2,101 +2,157 @@
   display: flex;
   flex-direction: column;
   flex: 1;
-  grid-column: 1 / -1;
-  grid-row: 1; }
+  grid-column: 1/-1;
+  grid-row: 1;
+}
+.docs-site-nav ul {
+  list-style: none;
+  font-size: var(--step-1);
+  margin-top: 1rem;
+  margin-block-start: 1rem;
+  margin-bottom: 2rem;
+  margin-block-end: 2rem;
+}
+@media all and (min-width: 1023px) {
   .docs-site-nav ul {
-    list-style: none;
-    font-size: var(--step-1);
-    margin-top: 1rem;
-    margin-block-start: 1rem;
-    margin-bottom: 2rem;
-    margin-block-end: 2rem; }
-    @media all and (min-width: 1023px) {
-      .docs-site-nav ul {
-        font-size: var(--step-0);
-        margin-top: 0;
-        margin-block-start: 0;
-        margin-bottom: 0;
-        margin-block-end: 0;
-        align-items: center;
-        display: flex; } }
-  .docs-site-nav .flexer {
+    font-size: var(--step-0);
+    margin-top: 0;
+    margin-block-start: 0;
+    margin-bottom: 0;
+    margin-block-end: 0;
+    align-items: center;
     display: flex;
-    justify-self: flex-end;
-    align-self: flex-end; }
-  .docs-site-nav a:not(.c-btn) {
-    text-decoration: none;
-    color: inherit;
-    transition: color .2s linear; }
-    .docs-site-nav a:not(.c-btn):hover {
-      color: var(--link-color); }
-  .docs-site-nav a:not(.c-btn)[aria-current="page"],
-  .docs-site-nav a:not(.c-btn)[aria-current="true"] {
-    color: var(--link-color);
-    text-decoration: none;
-    font-weight: 500; }
+  }
+}
+.docs-site-nav .flexer {
+  display: flex;
+  justify-self: flex-end;
+  align-self: flex-end;
+}
+.docs-site-nav a:not(.c-btn) {
+  text-decoration: none;
+  color: inherit;
+  transition: color 0.2s linear;
+}
+.docs-site-nav a:not(.c-btn):hover {
+  color: var(--link-color);
+}
+.docs-site-nav a:not(.c-btn)[aria-current=page],
+.docs-site-nav a:not(.c-btn)[aria-current=true] {
+  color: var(--link-color);
+  text-decoration: none;
+  font-weight: 500;
+}
 
 @media all and (min-width: 1023px) {
   .docs-nav-panel {
     display: flex;
     flex-direction: row;
-    justify-content: center; } }
-
-.docs-nav-panel[data-open="false"] {
-  display: none; }
-
+    justify-content: center;
+  }
+}
+.docs-nav-panel[data-open=false] {
+  display: none;
+}
 @media all and (min-width: 1023px) {
-  .docs-nav-panel[data-open="true"] {
+  .docs-nav-panel[data-open=true] {
     display: flex;
     flex-direction: row;
-    justify-content: center; } }
+    justify-content: center;
+  }
+}
+
+@media all and (max-width: 1023px) {
+  #nav-panel {
+    display: none;
+  }
+}
+
+@media all and (max-width: 1023px) {
+  #nav-panel[data-open=true] {
+    display: block;
+  }
+}
+
+@media all and (max-width: 1023px) {
+  #js-docs-index-list {
+    display: none;
+  }
+}
+
+@media all and (max-width: 1023px) {
+  #js-docs-index-list[data-open=true] {
+    display: block;
+  }
+}
+
+@media all and (min-width: 1024px) {
+  #nav-toggle {
+    display: none;
+  }
+}
 
 @media all and (min-width: 1023px) {
   .docs-nav-panel .mobile-only {
-    display: none; } }
+    display: none;
+  }
+}
 
 .docs-site-nav-toggle {
   cursor: pointer;
   display: inline-flex;
   align-items: center;
-  margin-left: .5rem;
+  margin-left: 0.5rem;
   margin-right: -10px;
-  margin-inline-start: .5rem;
-  margin-inline-end: -10px; }
-  .docs-site-nav-toggle svg {
-    width: 40px;
-    height: 40px;
-    color: var(--headings-color);
-    fill: none;
-    stroke-width: 4;
-    stroke-linecap: round;
-    stroke-linejoin: round; }
-  .docs-site-nav-toggle #ham-top,
-  .docs-site-nav-toggle #ham-middle,
-  .docs-site-nav-toggle #ham-bottom {
-    transition: all .2s linear; }
-  .docs-site-nav-toggle #ham-top {
-    transform-origin: 30px 37px; }
-  .docs-site-nav-toggle #ham-bottom {
-    transform-origin: 30px 63px; }
-  .docs-site-nav-toggle[aria-expanded="true"] #ham-middle {
-    opacity: 0; }
-  .docs-site-nav-toggle[aria-expanded="true"] #ham-top {
-    transform: rotate(41deg); }
-  .docs-site-nav-toggle[aria-expanded="true"] #ham-bottom {
-    transform: rotate(-41deg); }
+  margin-inline-start: 0.5rem;
+  margin-inline-end: -10px;
+}
+.docs-site-nav-toggle svg {
+  width: 40px;
+  height: 40px;
+  color: var(--headings-color);
+  fill: none;
+  stroke-width: 4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.docs-site-nav-toggle #ham-top,
+.docs-site-nav-toggle #ham-middle,
+.docs-site-nav-toggle #ham-bottom {
+  transition: all 0.2s linear;
+}
+.docs-site-nav-toggle #ham-top {
+  transform-origin: 30px 37px;
+}
+.docs-site-nav-toggle #ham-bottom {
+  transform-origin: 30px 63px;
+}
+.docs-site-nav-toggle[aria-expanded=true] #ham-middle {
+  opacity: 0;
+}
+.docs-site-nav-toggle[aria-expanded=true] #ham-top {
+  transform: rotate(41deg);
+}
+.docs-site-nav-toggle[aria-expanded=true] #ham-bottom {
+  transform: rotate(-41deg);
+}
 
 @media all and (min-width: 1023px) {
   .docs-site-nav {
     flex-direction: row;
     grid-column: auto;
-    gap: 2rem; }
-    .docs-site-nav ul {
-      display: flex;
-      gap: 2rem;
-      font-size: var(--step-0); }
-      .docs-site-nav ul li {
-        margin-bottom: 0;
-        margin-block-end: 0; }
-    .docs-site-nav .flexer {
-      order: 1; } }
+    gap: 2rem;
+  }
+  .docs-site-nav ul {
+    display: flex;
+    gap: 2rem;
+    font-size: var(--step-0);
+  }
+  .docs-site-nav ul li {
+    margin-bottom: 0;
+    margin-block-end: 0;
+  }
+  .docs-site-nav .flexer {
+    order: 1;
+  }
+}
diff --git a/docs/src/assets/css/styles.css b/docs/src/assets/css/styles.css
index ff3d95c282e..a0e5b45a973 100644
--- a/docs/src/assets/css/styles.css
+++ b/docs/src/assets/css/styles.css
@@ -79,27 +79,30 @@
   --docs-lightest-background-color: var(--color-primary-50);
   --hero-background-color: var(--color-neutral-25);
   --footer-background-color: var(--color-neutral-25);
-  --outline-color: var(--color-brand); }
+  --outline-color: var(--color-brand);
+}
 
 @media (prefers-color-scheme: dark) {
-  --secondary-button-background-color: var(--color-neutral-700);
-  --secondary-button-hover-color: var(--color-neutral-800);
-  --secondary-button-text-color: var(--body-text-color);
-  --body-background-color: var(--color-neutral-900);
-  --body-text-color: var(--color-neutral-300);
-  --headings-color: #fff;
-  --divider-color: var(--color-neutral-600);
-  --border-color: var(--color-neutral-500);
-  --icon-color: var(--body-text-color);
-  --dark-icon-color: #fff;
-  --link-color: var(--color-primary-400);
-  --lighter-background-color: var(--color-neutral-800);
-  --lightest-background-color: var(--color-neutral-800);
-  --hero-background-color: var(--color-neutral-800);
-  --footer-background-color: var(--color-neutral-800);
-  --outline-color: #fff; }
-
-html[data-theme="light"] {
+  html {
+    --secondary-button-background-color: var(--color-neutral-700);
+    --secondary-button-hover-color: var(--color-neutral-800);
+    --secondary-button-text-color: var(--body-text-color);
+    --body-background-color: var(--color-neutral-900);
+    --body-text-color: var(--color-neutral-300);
+    --headings-color: #fff;
+    --divider-color: var(--color-neutral-600);
+    --border-color: var(--color-neutral-500);
+    --icon-color: var(--body-text-color);
+    --dark-icon-color: #fff;
+    --link-color: var(--color-primary-400);
+    --lighter-background-color: var(--color-neutral-800);
+    --lightest-background-color: var(--color-neutral-800);
+    --hero-background-color: var(--color-neutral-800);
+    --footer-background-color: var(--color-neutral-800);
+    --outline-color: #fff;
+  }
+}
+html[data-theme=light] {
   --body-background-color: #fff;
   --body-text-color: var(--color-neutral-500);
   --headings-color: var(--color-neutral-900);
@@ -113,9 +116,10 @@ html[data-theme="light"] {
   --docs-lightest-background-color: var(--color-primary-50);
   --hero-background-color: var(--color-neutral-25);
   --footer-background-color: var(--color-neutral-25);
-  --outline-color: var(--color-brand); }
+  --outline-color: var(--color-brand);
+}
 
-html[data-theme="dark"] {
+html[data-theme=dark] {
   --body-background-color: var(--color-neutral-900);
   --body-text-color: var(--color-neutral-300);
   --headings-color: #fff;
@@ -129,7 +133,8 @@ html[data-theme="dark"] {
   --docs-lightest-background-color: var(--color-neutral-800);
   --hero-background-color: var(--color-neutral-800);
   --footer-background-color: var(--color-neutral-800);
-  --outline-color: #fff; }
+  --outline-color: #fff;
+}
 
 /* @link https://utopia.fyi/space/calculator?c=320,16,1.125,1440,16,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|8,l-2xl|xl-3xl|xl-4xl */
 :root {
@@ -182,19 +187,22 @@ html[data-theme="dark"] {
   --spacer-3x: 3rem;
   --spacer-4x: 4rem;
   --spacer-6x: 6rem;
-  --spacer-8x: 8rem; }
+  --spacer-8x: 8rem;
+}
 
 /* @link https://utopia.fyi/type/calculator?c=320,16,1.125,1280,16,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */
 :root {
   --fluid-min-width: 320;
   --fluid-max-width: 1280;
   --fluid-screen: 100vw;
-  --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width))); }
+  --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)));
+}
 
 @media screen and (min-width: 1280px) {
   :root {
-    --fluid-screen: calc(var(--fluid-max-width) * 1px); } }
-
+    --fluid-screen: calc(var(--fluid-max-width) * 1px);
+  }
+}
 :root {
   --f--2-min: 12.64;
   --f--2-max: 10.24;
@@ -222,42 +230,46 @@ html[data-theme="dark"] {
   --step-5: calc(((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min)) * var(--fluid-bp));
   --f-6-min: 32.44;
   --f-6-max: 61.04;
-  --step-6: calc(((var(--f-6-min) / 16) * 1rem) + (var(--f-6-max) - var(--f-6-min)) * var(--fluid-bp)); }
+  --step-6: calc(((var(--f-6-min) / 16) * 1rem) + (var(--f-6-max) - var(--f-6-min)) * var(--fluid-bp));
+}
 
 :root {
   --mono-font: "Space Mono", monospace;
   --text-font: "Inter",
-            -apple-system,
-            BlinkMacSystemFont,
-            "Segoe UI",
-            Roboto,
-            Helvetica,
-            Arial,
-            sans-serif,
-            "Apple Color Emoji",
-            "Segoe UI Emoji",
-            "Segoe UI Symbol";
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          Roboto,
+          Helvetica,
+          Arial,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol";
   --display-font: "Space Grotesk",
-            -apple-system,
-            BlinkMacSystemFont,
-            "Segoe UI",
-            Roboto,
-            Helvetica,
-            Arial,
-            sans-serif,
-            "Apple Color Emoji",
-            "Segoe UI Emoji",
-            "Segoe UI Symbol"; }
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          Roboto,
+          Helvetica,
+          Arial,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol";
+}
 
 :root {
   --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.1),
-                 0px 4px 6px -2px rgba(16, 24, 40, 0.05);
+               0px 4px 6px -2px rgba(16, 24, 40, 0.05);
   --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
-  --border-radius: .5rem; }
+  --border-radius: .5rem;
+}
 
 body {
   font-size: var(--step-0);
-  line-height: 1.5; }
+  line-height: 1.5;
+}
 
 .eyebrow {
   color: var(--link-color);
@@ -265,7 +277,8 @@ body {
   font-weight: 500;
   display: block;
   margin-bottom: 1.5rem;
-  margin-block-end: 1.5rem; }
+  margin-block-end: 1.5rem;
+}
 
 h1,
 h2,
@@ -277,128 +290,121 @@ h6 {
   color: var(--headings-color);
   font-weight: 500;
   margin-top: 0;
-  margin-block-start: 0; }
+  margin-block-start: 0;
+}
 
-.post-main h2,
-.docs-main h2,
-.components-main h2, .post-main
-h3,
-.docs-main
-h3,
-.components-main
-h3, .post-main
-h4,
-.docs-main
-h4,
-.components-main
-h4, .post-main
-h5,
-.docs-main
-h5,
-.components-main
-h5, .post-main
-h6,
-.docs-main
-h6,
-.components-main
-h6 {
+.post-main h2, .docs-main h2, .components-main h2,
+.post-main h3,
+.docs-main h3,
+.components-main h3,
+.post-main h4,
+.docs-main h4,
+.components-main h4,
+.post-main h5,
+.docs-main h5,
+.components-main h5,
+.post-main h6,
+.docs-main h6,
+.components-main h6 {
   margin-top: 3rem;
   margin-bottom: 1.5rem;
   margin-block-start: 3rem;
-  margin-block-end: 1.5rem; }
-  .post-main h2:first-child,
-  .docs-main h2:first-child,
-  .components-main h2:first-child, .post-main
-  h3:first-child,
-  .docs-main
-  h3:first-child,
-  .components-main
-  h3:first-child, .post-main
-  h4:first-child,
-  .docs-main
-  h4:first-child,
-  .components-main
-  h4:first-child, .post-main
-  h5:first-child,
-  .docs-main
-  h5:first-child,
-  .components-main
-  h5:first-child, .post-main
-  h6:first-child,
-  .docs-main
-  h6:first-child,
-  .components-main
-  h6:first-child {
-    margin-top: 0;
-    margin-block-start: 0; }
+  margin-block-end: 1.5rem;
+}
+.post-main h2:first-child, .docs-main h2:first-child, .components-main h2:first-child,
+.post-main h3:first-child,
+.docs-main h3:first-child,
+.components-main h3:first-child,
+.post-main h4:first-child,
+.docs-main h4:first-child,
+.components-main h4:first-child,
+.post-main h5:first-child,
+.docs-main h5:first-child,
+.components-main h5:first-child,
+.post-main h6:first-child,
+.docs-main h6:first-child,
+.components-main h6:first-child {
+  margin-top: 0;
+  margin-block-start: 0;
+}
 
 h6,
 .h6 {
-  font-size: var(--step-0); }
+  font-size: var(--step-0);
+}
 
 h5,
 .h5 {
-  font-size: var(--step-1); }
+  font-size: var(--step-1);
+}
 
 h4,
 .h4 {
-  font-size: var(--step-2); }
+  font-size: var(--step-2);
+}
 
 h3,
 .h3 {
   font-size: var(--step-3);
-  line-height: 1.2; }
+  line-height: 1.2;
+}
 
 h2,
 .h2 {
   font-size: var(--step-4);
-  line-height: 1.2; }
+  line-height: 1.2;
+}
 
 h1,
 .h1 {
   font-size: var(--step-5);
-  line-height: 1.2; }
+  line-height: 1.2;
+}
 
 .h0 {
   font-size: var(--step-6);
-  line-height: 1.2; }
+  line-height: 1.2;
+}
 
 small,
 caption,
 cite,
 figcaption {
-  font-size: var(--step--1); }
+  font-size: var(--step--1);
+}
 
 .docs-main h6,
 .docs-main .h6 {
-  font-size: var(--step-0); }
-
+  font-size: var(--step-0);
+}
 .docs-main h5,
 .docs-main .h5 {
-  font-size: var(--step-0); }
-
+  font-size: var(--step-0);
+}
 .docs-main h4,
 .docs-main .h4 {
-  font-size: var(--step-1); }
-
+  font-size: var(--step-1);
+}
 .docs-main h3,
 .docs-main .h3 {
   font-size: var(--step-2);
-  line-height: 1.2; }
-
+  line-height: 1.2;
+}
 .docs-main h2,
 .docs-main .h2 {
   font-size: var(--step-3);
-  line-height: 1.2; }
-
+  line-height: 1.2;
+}
 .docs-main h1,
 .docs-main .h1 {
   font-size: var(--step-4);
-  line-height: 1.2; }
+  line-height: 1.2;
+}
 
 ::selection {
   background-color: var(--color-brand);
-  color: #fff; }
+  color: #fff;
+}
 
 h1:target,
 h2:target,
@@ -406,31 +412,38 @@ h3:target,
 h4:target,
 h5:target,
 h6:target {
-  background-color: var(--lighter-background-color); }
+  background-color: var(--lighter-background-color);
+}
 
 *:focus {
-  outline: none; }
+  outline: none;
+}
 
 *:focus-visible {
   outline: 2px solid var(--outline-color);
-  outline-offset: 3px; }
+  outline-offset: 3px;
+}
 
 *.focus-visible {
   outline: 2px solid var(--outline-color);
-  outline-offset: 3px; }
+  outline-offset: 3px;
+}
 
 *:focus:not(:focus-visible) {
   outline: 1px solid transparent;
-  box-shadow: none; }
+  box-shadow: none;
+}
 
 .js-focus-visible *:focus:not(.focus-visible) {
   outline: 1px solid transparent;
-  box-shadow: none; }
+  box-shadow: none;
+}
 
 *,
 *::before,
 *::after {
-  box-sizing: border-box; }
+  box-sizing: border-box;
+}
 
 html {
   accent-color: var(--link-color);
@@ -438,7 +451,8 @@ html {
   height: 100%;
   font-family: var(--text-font);
   overflow-x: hidden;
-  caret-color: var(--link-color); }
+  caret-color: var(--link-color);
+}
 
 body {
   position: relative;
@@ -448,7 +462,8 @@ body {
   flex-direction: column;
   min-height: 100%;
   background-color: var(--body-background-color);
-  color: var(--body-text-color); }
+  color: var(--body-text-color);
+}
 
 #skip-link {
   position: fixed;
@@ -459,22 +474,28 @@ body {
   offset-inline-start: 0;
   offset-inline-end: auto;
   z-index: 999;
-  transition: top .1s linear; }
-  #skip-link:focus {
-    outline: 2px solid transparent;
-    top: 2px;
-    offset-block-start: 2px; }
-  #skip-link:focus-visible {
-    outline: 2px solid transparent;
-    top: 2px;
-    offset-block-start: 2px; }
+  transition: top 0.1s linear;
+}
+#skip-link:focus {
+  outline: 2px solid transparent;
+  top: 2px;
+  offset-block-start: 2px;
+}
+#skip-link:focus-visible {
+  outline: 2px solid transparent;
+  top: 2px;
+  offset-block-start: 2px;
+}
 
 main {
-  flex: 1; }
-  main:focus {
-    outline: none; }
-  main:target {
-    outline: none; }
+  flex: 1;
+}
+main:focus {
+  outline: none;
+}
+main:target {
+  outline: none;
+}
 
 hr {
   border: none;
@@ -482,91 +503,116 @@ hr {
   border-block-start: 1px solid var(--divider-color);
   background: none;
   height: 0;
-  margin: 2rem 0; }
+  margin: 2rem 0;
+}
 
 .content-container {
   width: 100%;
   margin: 0 auto;
-  padding: var(--space-xl-3xl) calc(1rem + 1vw); }
+  padding: var(--space-xl-3xl) calc(1rem + 1vw);
+}
 
 .section-head .section-supporting-text {
   text-align: center;
   max-width: 768px;
-  margin: 0 auto var(--space-l-2xl); }
+  margin: 0 auto var(--space-l-2xl);
+}
 
 .section-foot {
   margin-top: var(--space-l-2xl);
-  margin-block-start: var(--space-l-2xl); }
-  .section-foot .section-supporting-text {
-    text-align: center;
-    font-size: var(--step--1);
-    max-width: 768px;
-    margin: 0 auto; }
+  margin-block-start: var(--space-l-2xl);
+}
+.section-foot .section-supporting-text {
+  text-align: center;
+  font-size: var(--step--1);
+  max-width: 768px;
+  margin: 0 auto;
+}
 
 .section-title {
   margin-bottom: 1rem;
-  margin-block-end: 1rem; }
+  margin-block-end: 1rem;
+}
 
 .section-supporting-text {
-  font-size: var(--step-1); }
+  font-size: var(--step-1);
+}
 
 code,
 pre {
-  font-family: var(--mono-font); }
+  font-family: var(--mono-font);
+}
 
 code {
-  color: var(--link-color); }
-  pre code {
-    color: unset; }
+  color: var(--link-color);
+}
+pre code {
+  color: unset;
+}
 
 p:empty {
   display: none;
-  margin: 0; }
+  margin: 0;
+}
 
 .c-icon {
   color: var(--icon-color);
   flex: none;
-  transition: all .2s linear; }
-  @media (-ms-high-contrast: active) {
-    .c-icon {
-      color: windowText; } }
-  @media (forced-colors: active) {
-    .c-icon {
-      color: canvasText; } }
+  transition: all 0.2s linear;
+}
+@media (-ms-high-contrast: active) {
+  .c-icon {
+    color: windowText;
+  }
+}
+@media (forced-colors: active) {
+  .c-icon {
+    color: canvasText;
+  }
+}
 
 table {
   width: 100%;
   margin: 2.5rem 0;
   border-collapse: collapse;
-  border: 1px solid var(--divider-color); }
-  table td {
-    padding: .25rem .5rem;
-    border: 1px solid var(--divider-color); }
-  table th {
-    background-color: var(--lightest-background-color);
-    padding: .25rem .5rem; }
+  border: 1px solid var(--divider-color);
+}
+table td {
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--divider-color);
+}
+table th {
+  background-color: var(--lightest-background-color);
+  padding: 0.25rem 0.5rem;
+}
 
 .c-btn .c-icon:hover,
 button .c-icon:hover,
 a .c-icon:hover {
-  color: var(--link-color); }
+  color: var(--link-color);
+}
 
 a {
   color: var(--link-color);
-  transition: color .1s linear; }
-  .side-header a {
-    color: inherit;
-    text-decoration: none; }
+  transition: color 0.1s linear;
+}
+.side-header a {
+  color: inherit;
+  text-decoration: none;
+}
 
 svg {
   flex: none;
-  transition: color .1s linear; }
+  transition: color 0.1s linear;
+}
 
 p {
-  margin: 0 0 1.5em; }
-  :matches(nav, .posts-collection) p {
-    margin-bottom: .75em;
-    margin-block-end: .75em; }
+  margin: 0 0 1.5em;
+}
+:matches(nav, .posts-collection) p {
+  margin-bottom: 0.75em;
+  margin-block-end: 0.75em;
+}
 
 p,
 h1,
@@ -575,82 +621,101 @@ h3,
 h4,
 h5,
 h6 {
-  overflow-wrap: break-word; }
+  overflow-wrap: break-word;
+}
 
 ul,
 ol {
   margin-top: 0;
-  margin-block-start: 0; }
-  ul li,
-  ol li {
-    margin: 0 0 .75em; }
-  .person__bio ul, .person__bio
-  ol {
-    padding-left: 1.5rem;
-    padding-inline-start: 1.5rem; }
+  margin-block-start: 0;
+}
+ul li,
+ol li {
+  margin: 0 0 0.75em;
+}
+.person__bio ul,
+.person__bio ol {
+  padding-left: 1.5rem;
+  padding-inline-start: 1.5rem;
+}
 
 .docs-main ul,
 .post-main ul,
 .docs-main ol,
 .post-main ol {
-  margin: 1rem 0; }
+  margin: 1rem 0;
+}
 
-ul[role="list"] {
+ul[role=list] {
   list-style: none;
   margin: 0;
-  padding: 0; }
-  ul[role="list"] li {
-    margin: 0; }
+  padding: 0;
+}
+ul[role=list] li {
+  margin: 0;
+}
 
 ol {
-  list-style: decimal; }
-  ol li::marker {
-    color: var(--link-color); }
+  list-style: decimal;
+}
+ol li::marker {
+  color: var(--link-color);
+}
 
 p:empty {
   margin: 0;
-  display: none; }
+  display: none;
+}
 
 figure {
   margin-bottom: 4rem;
-  margin-block-end: 4rem; }
-  figure img {
-    margin-bottom: 1rem;
-    margin-block-end: 1rem; }
-  figure figcaption {
-    color: var(--grey); }
+  margin-block-end: 4rem;
+}
+figure img {
+  margin-bottom: 1rem;
+  margin-block-end: 1rem;
+}
+figure figcaption {
+  color: var(--grey);
+}
 
 img {
   display: block;
   position: relative;
   max-width: 100%;
-  height: auto; }
+  height: auto;
+}
 
 nav {
-  /* rarely do we display bullets for lists in navigation */ }
-  nav ol,
-  nav ul {
-    list-style: none;
-    margin: 0;
-    padding: 0; }
+  /* rarely do we display bullets for lists in navigation */
+}
+nav ol,
+nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
 
 .video {
   width: 90%;
   max-width: 1400px;
-  margin: 2em auto; }
-  .video iframe {
-    aspect-ratio: 16 / 9;
-    width: 100%;
-    height: auto; }
+  margin: 2em auto;
+}
+.video iframe {
+  aspect-ratio: 16/9;
+  width: 100%;
+  height: auto;
+}
 
 @media (prefers-reduced-motion: no-preference) {
   *:focus-visible,
-  *.focus-visible {
-    transition: outline-offset .15s linear;
-    outline-offset: 3px; } }
-
-code[class*="language-"],
-pre[class*="language-"] {
+*.focus-visible {
+    transition: outline-offset 0.15s linear;
+    outline-offset: 3px;
+  }
+}
+code[class*=language-],
+pre[class*=language-] {
   font-family: var(--mono-font), Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
   font-size: 1em;
   text-align: left;
@@ -665,48 +730,57 @@ pre[class*="language-"] {
   -webkit-hyphens: none;
   -moz-hyphens: none;
   -ms-hyphens: none;
-  hyphens: none; }
+  hyphens: none;
+}
 
 @media print {
-  code[class*="language-"],
-  pre[class*="language-"] {
-    text-shadow: none; } }
-
+  code[class*=language-],
+pre[class*=language-] {
+    text-shadow: none;
+  }
+}
 /* Code blocks */
-pre[class*="language-"] {
+pre[class*=language-] {
   padding: 1.5rem;
   margin: 1.5rem 0;
   overflow: auto;
   background-color: var(--color-neutral-50);
   border-radius: var(--border-radius);
   background-color: var(--lightest-background-color);
-  color: var(--color-neutral-900); }
-  [data-theme="dark"] pre[class*="language-"] {
-    color: var(--color-neutral-100); }
-
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-  background-color: var(--lightest-background-color); }
+  color: var(--color-neutral-900);
+}
+[data-theme=dark] pre[class*=language-] {
+  color: var(--color-neutral-100);
+}
+
+:not(pre) > code[class*=language-],
+pre[class*=language-] {
+  background-color: var(--lightest-background-color);
+}
 
 /* Inline code */
-:not(pre) > code[class*="language-"] {
-  padding: .1em;
-  border-radius: .3em;
-  white-space: normal; }
+:not(pre) > code[class*=language-] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: #6E7F8E; }
-  [data-theme="dark"] .token.comment, [data-theme="dark"]
-  .token.prolog, [data-theme="dark"]
-  .token.doctype, [data-theme="dark"]
-  .token.cdata {
-    color: #8E9FAE; }
+  color: #6E7F8E;
+}
+[data-theme=dark] .token.comment,
+[data-theme=dark] .token.prolog,
+[data-theme=dark] .token.doctype,
+[data-theme=dark] .token.cdata {
+  color: #8E9FAE;
+}
 
 .token.namespace {
-  opacity: .7; }
+  opacity: 0.7;
+}
 
 .token.selector,
 .token.attr-name,
@@ -714,25 +788,31 @@ pre[class*="language-"] {
 .token.char,
 .token.builtin,
 .token.inserted {
-  color: var(--link-color); }
+  color: var(--link-color);
+}
 
 .token.atrule,
 .token.attr-value,
 .token.keyword {
-  color: var(--link-color); }
+  color: var(--link-color);
+}
 
 .token.important,
 .token.bold {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .token.italic {
-  font-style: italic; }
+  font-style: italic;
+}
 
 .token.entity {
-  cursor: help; }
+  cursor: help;
+}
 
 pre {
-  counter-reset: lineNumber; }
+  counter-reset: lineNumber;
+}
 
 code .highlight-line:before {
   -webkit-user-select: none;
@@ -746,33 +826,39 @@ code .highlight-line:before {
   margin-inline-end: 1.2em;
   padding-inline-end: 1.2em;
   text-align: right;
-  width: 2.4em; }
+  width: 2.4em;
+}
 
 .site-header {
-  padding: .75rem 0;
+  padding: 0.75rem 0;
   border-top: 4px solid var(--link-color);
   border-bottom: 1px solid var(--divider-color);
   border-block-start: 4px solid var(--link-color);
-  border-block-end: 1px solid var(--divider-color); }
+  border-block-end: 1px solid var(--divider-color);
+}
+.site-header .docs-wrapper {
+  display: grid;
+  align-items: start;
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-block-start: 0;
+  padding-block-end: 0;
+}
+@media all and (min-width: 1024px) {
   .site-header .docs-wrapper {
-    display: grid;
-    align-items: start;
-    padding-top: 0;
-    padding-bottom: 0;
-    padding-block-start: 0;
-    padding-block-end: 0; }
-    @media all and (min-width: 1024px) {
-      .site-header .docs-wrapper {
-        justify-content: space-between; } }
+    justify-content: space-between;
+  }
+}
 
 .logo-link {
   display: inline-flex;
   justify-self: start;
   flex: none;
   place-content: center;
-  grid-column: 1 / -1;
+  grid-column: 1/-1;
   grid-row: 1;
-  padding: .5rem 0; }
+  padding: 0.5rem 0;
+}
 
 .logo svg {
   display: inline-block;
@@ -780,76 +866,96 @@ code .highlight-line:before {
   margin-block-end: -4px;
   width: 100%;
   max-width: 100px;
-  height: auto; }
+  height: auto;
+}
 
 .docs-footer {
   display: flex;
   flex-direction: column;
   gap: 2rem;
   justify-content: space-between;
-  align-items: baseline; }
-  @media all and (max-width: 800px) {
-    .docs-footer {
-      padding: 1.5rem 0 4rem; } }
+  align-items: baseline;
+}
+@media all and (max-width: 800px) {
+  .docs-footer {
+    padding: 1.5rem 0 4rem;
+  }
+}
 
 .copyright p {
-  margin: 0; }
+  margin: 0;
+}
 
 .docs-socials-and-legal {
   display: flex;
   flex-direction: column;
-  gap: 1rem; }
-  @media all and (max-width: 800px) {
-    .docs-socials-and-legal {
-      text-align: center; } }
+  gap: 1rem;
+}
+@media all and (max-width: 800px) {
+  .docs-socials-and-legal {
+    text-align: center;
+  }
+}
 
 .docs-switchers {
   display: flex;
   flex-wrap: wrap;
-  gap: 1.5rem; }
-  .docs-switchers .theme-switcher,
+  gap: 1.5rem;
+}
+.docs-switchers .theme-switcher,
+.docs-switchers .language-switcher {
+  flex: 1 1 240px;
+}
+@media all and (max-width: 800px) {
+  .docs-switchers .theme-switcher {
+    justify-content: center;
+  }
+}
+@media all and (max-width: 800px) {
   .docs-switchers .language-switcher {
-    flex: 1 1 240px; }
-  @media all and (max-width: 800px) {
-    .docs-switchers .theme-switcher {
-      justify-content: center; } }
-  @media all and (max-width: 800px) {
-    .docs-switchers .language-switcher {
-      justify-content: center; } }
+    justify-content: center;
+  }
+}
 
 .site-footer {
   text-align: center;
   background-color: var(--footer-background-color);
   border-top: 1px solid var(--divider-color);
-  border-block-start: 1px solid var(--divider-color); }
+  border-block-start: 1px solid var(--divider-color);
+}
 
 .footer-cta .logo {
   margin-bottom: 2.5rem;
-  margin-block-end: 2.5rem; }
-
+  margin-block-end: 2.5rem;
+}
 .footer-cta .section-supporting-text {
   margin-bottom: 2.5rem;
-  margin-block-end: 2.5rem; }
-
+  margin-block-end: 2.5rem;
+}
 .footer-cta .eslint-actions {
-  justify-content: center; }
+  justify-content: center;
+}
 
 .footer-legal-links ul li {
   display: inline-block;
-  margin-right: .5rem;
-  margin-inline-end: .5rem; }
-  .footer-legal-links ul li:not(:last-of-type)::after {
-    content: "|";
-    margin-left: .5rem;
-    margin-inline-start: .5rem; }
+  margin-right: 0.5rem;
+  margin-inline-end: 0.5rem;
+}
+.footer-legal-links ul li:not(:last-of-type)::after {
+  content: "|";
+  margin-left: 0.5rem;
+  margin-inline-start: 0.5rem;
+}
 
 .footer-legal-section {
   font-size: var(--step--1);
-  padding: 2rem 1rem; }
+  padding: 2rem 1rem;
+}
 
 .copyright {
   max-width: 1100px;
-  margin: 0 auto; }
+  margin: 0 auto;
+}
 
 .footer-middle {
   padding-top: 2rem;
@@ -859,11 +965,14 @@ code .highlight-line:before {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 2rem; }
-  @media all and (min-width: 768px) {
-    .footer-middle {
-      flex-direction: row;
-      justify-content: space-between; } }
+  gap: 2rem;
+}
+@media all and (min-width: 768px) {
+  .footer-middle {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
 
 .c-custom-select {
   -moz-appearance: none;
@@ -874,9 +983,9 @@ code .highlight-line:before {
   width: 100%;
   max-width: 100%;
   min-width: 0px;
-  padding: .625rem .875rem;
-  padding-right: calc(.875rem * 3);
-  padding-inline-end: calc(.875rem * 3);
+  padding: 0.625rem 0.875rem;
+  padding-right: 2.625rem;
+  padding-inline-end: 2.625rem;
   font: inherit;
   color: var(--body-text-color);
   color: inherit;
@@ -887,131 +996,161 @@ code .highlight-line:before {
   background-color: var(--body-background-color);
   background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.60938L10 12.6094L15 7.60938' stroke='%23667085' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"), linear-gradient(to bottom, var(--body-background-color) 0%, var(--body-background-color) 100%);
   background-repeat: no-repeat, repeat;
-  background-position: right calc(.875rem * 1.5) top 50%, 0 0;
-  background-size: 1em auto, 100%; }
+  background-position: right 1.3125rem top 50%, 0 0;
+  background-size: 1em auto, 100%;
+}
 
 .label__text.label__text {
   display: block;
   display: flex;
-  font-size: .875rem;
+  font-size: 0.875rem;
   color: inherit;
   align-items: center;
-  gap: .5rem;
-  font-size: .875rem;
+  gap: 0.5rem;
+  font-size: 0.875rem;
   font-family: var(--text-font);
   color: inherit;
   font-weight: 400;
   line-height: 1.5;
-  margin-bottom: .25rem;
-  margin-block-end: .25rem; }
+  margin-bottom: 0.25rem;
+  margin-block-end: 0.25rem;
+}
 
 input {
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
-  padding: .625rem .875rem;
+  padding: 0.625rem 0.875rem;
   font: inherit;
   font-size: 1rem;
   display: block;
   min-width: 0;
   max-width: 100%;
   background-color: var(--body-background-color);
-  color: inherit; }
+  color: inherit;
+}
 
 .docs {
   max-width: 1700px;
-  margin: 0 auto; }
+  margin: 0 auto;
+}
 
 .docs-ad {
-  flex: 1; }
+  flex: 1;
+}
 
 .docs-wrapper {
   padding: 0 calc(1rem + 1vw);
-  flex: 1; }
-  @media all and (min-width: 1023px) {
-    .docs-wrapper {
-      display: grid;
-      grid-template-columns: minmax(250px, 1fr) minmax(0, 3.5fr);
-      grid-gap: 0rem;
-      align-items: stretch; } }
+  flex: 1;
+}
+@media all and (min-width: 1023px) {
+  .docs-wrapper {
+    display: grid;
+    grid-template-columns: minmax(250px, 1fr) minmax(0, 3.5fr);
+    grid-gap: 0rem;
+    align-items: stretch;
+  }
+}
 
 .docs-left-sidebar {
-  grid-column: 1 / 2;
-  grid-row: 1 / 2;
+  grid-column: 1/2;
+  grid-row: 1/2;
   padding: calc(1rem + 1vw) 0;
-  font-size: .875rem;
+  font-size: 0.875rem;
   display: grid;
   grid-auto-rows: max-content;
-  align-items: start; }
-  @media all and (min-width: 1023px) {
-    .docs-left-sidebar {
-      border-right: 1px solid var(--divider-color);
-      border-right: 1px solid var(--divider-color);
-      padding-right: calc(1rem + 1vw);
-      padding-inline-end: calc(1rem + 1vw); } }
+  align-items: start;
+}
+@media all and (min-width: 1023px) {
+  .docs-left-sidebar {
+    border-right: 1px solid var(--divider-color);
+    border-right: 1px solid var(--divider-color);
+    padding-right: calc(1rem + 1vw);
+    padding-inline-end: calc(1rem + 1vw);
+  }
+}
 
 .docs-content {
-  grid-column: 2 / 3; }
-  @media all and (min-width: 800px) {
-    .docs-content {
-      display: grid;
-      grid-template-columns: minmax(0, 3fr) minmax(230px, 1fr);
-      grid-gap: 2rem; } }
-  @media all and (min-width: 1023px) {
-    .docs-content {
-      padding: calc(2rem + 1vw) 0; } }
+  grid-column: 2/3;
+}
+@media all and (min-width: 800px) {
+  .docs-content {
+    display: grid;
+    grid-template-columns: minmax(0, 3fr) minmax(230px, 1fr);
+    grid-gap: 2rem;
+  }
+}
+@media all and (min-width: 1023px) {
+  .docs-content {
+    padding: calc(2rem + 1vw) 0;
+  }
+}
 
 .docs-main {
-  flex: 1 1 65ch; }
-  @media all and (min-width: 1023px) {
-    .docs-main {
-      padding: 0 2rem; } }
+  flex: 1 1 65ch;
+}
+@media all and (min-width: 1023px) {
+  .docs-main {
+    padding: 0 2rem;
+  }
+}
 
 .docs-right-sidebar {
-  grid-column: 2 / 3;
+  grid-column: 2/3;
   display: flex;
   flex-direction: column;
-  flex: 1 1 200px; }
+  flex: 1 1 200px;
+}
 
 .docs-toc {
   flex: 1;
-  align-self: center; }
+  align-self: center;
+}
 
 .docs-edit-link {
   border-top: 1px solid var(--divider-color);
   padding-top: 1.5rem;
   padding-block-start: 1.5rem;
-  margin: 3rem 0; }
+  margin: 3rem 0;
+}
 
 div[data-correct-code],
 div[data-incorrect-code] {
-  position: relative; }
-  div[data-correct-code]::after,
-  div[data-incorrect-code]::after {
-    position: absolute;
-    top: -22px;
-    right: -22px;
-    offset-inline-end: -22px;
-    offset-block-start: -22px; }
+  position: relative;
+}
+div[data-correct-code]::after,
+div[data-incorrect-code]::after {
+  position: absolute;
+  top: -22px;
+  right: -22px;
+  offset-inline-end: -22px;
+  offset-block-start: -22px;
+}
 
 div[data-correct-code]::after {
-  content: url("data:image/svg+xml,%3Csvg width='45' height='44' viewBox='0 0 45 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' fill='%23ECFDF3'/%3E%3Cpath d='M30.5 16L19.5 27L14.5 22' stroke='%2312B76A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A"); }
+  content: url("data:image/svg+xml,%3Csvg width='45' height='44' viewBox='0 0 45 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' fill='%23ECFDF3'/%3E%3Cpath d='M30.5 16L19.5 27L14.5 22' stroke='%2312B76A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A");
+}
 
 div[data-incorrect-code]::after {
-  content: url("data:image/svg+xml,%3Csvg width='45' height='44' viewBox='0 0 45 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' fill='%23FFF1F3'/%3E%3Cpath d='M28.5 16L16.5 28M16.5 16L28.5 28' stroke='%23F63D68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A"); }
+  content: url("data:image/svg+xml,%3Csvg width='45' height='44' viewBox='0 0 45 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' fill='%23FFF1F3'/%3E%3Cpath d='M28.5 16L16.5 28M16.5 16L28.5 28' stroke='%23F63D68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A");
+}
 
-pre[class*="language-"] {
-  position: relative; }
+pre[class*=language-] {
+  position: relative;
+}
 
 .c-btn.c-btn--playground {
   position: absolute;
   font-size: var(--step--1);
-  bottom: .5rem;
-  right: .5rem;
-  offset-block-end: .5rem;
-  offset-inline-end: .5rem; }
-  @media all and (max-width: 768px) {
-    .c-btn.c-btn--playground {
-      display: none; } }
+  bottom: 0.5rem;
+  right: 0.5rem;
+  offset-block-end: 0.5rem;
+  offset-inline-end: 0.5rem;
+}
+@media all and (max-width: 768px) {
+  .c-btn.c-btn--playground {
+    display: none;
+  }
+}
 
 button {
   border: none;
@@ -1021,7 +1160,8 @@ button {
   line-height: inherit;
   display: inline-flex;
   align-items: center;
-  justify-content: center; }
+  justify-content: center;
+}
 
 .c-btn {
   background: none;
@@ -1033,206 +1173,282 @@ button {
   font-weight: 500;
   font-size: var(--step-0);
   display: inline-flex;
-  padding: .75em 1.125em;
+  padding: 0.75em 1.125em;
   align-items: center;
   justify-content: center;
   border-radius: var(--border-radius);
-  transition: background-color .2s linear, border-color .2s linear; }
-  .c-btn svg {
-    color: inherit; }
+  transition: background-color 0.2s linear, border-color 0.2s linear;
+}
+.c-btn svg {
+  color: inherit;
+}
 
 .c-btn--large {
   font-size: 1.125rem;
-  padding: .88em 1.5em; }
+  padding: 0.88em 1.5em;
+}
 
 .c-btn--block {
   display: flex;
-  width: 100%; }
+  width: 100%;
+}
 
 a.c-btn {
   text-decoration: none;
   display: inline-flex;
   flex-wrap: wrap;
-  gap: .5rem;
-  align-items: center; }
+  gap: 0.5rem;
+  align-items: center;
+}
 
 .c-btn--primary {
   background-color: var(--primary-button-background-color);
-  color: var(--primary-button-text-color); }
-  .c-btn--primary:hover {
-    background-color: var(--primary-button-hover-color); }
+  color: var(--primary-button-text-color);
+}
+.c-btn--primary:hover {
+  background-color: var(--primary-button-hover-color);
+}
 
 .c-btn--secondary {
   background-color: var(--secondary-button-background-color);
   color: var(--secondary-button-text-color);
-  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); }
-  .c-btn--secondary:hover {
-    background-color: var(--secondary-button-hover-color); }
+  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
+}
+.c-btn--secondary:hover {
+  background-color: var(--secondary-button-hover-color);
+}
 
 .c-btn--ghost {
   color: var(--body-text-color);
-  border: 1px solid var(--border-color); }
-  .c-btn--ghost:hover {
-    border-color: var(--link-color); }
+  border: 1px solid var(--border-color);
+}
+.c-btn--ghost:hover {
+  border-color: var(--link-color);
+}
 
 .docs-site-nav {
   display: flex;
   flex-direction: column;
   flex: 1;
-  grid-column: 1 / -1;
-  grid-row: 1; }
+  grid-column: 1/-1;
+  grid-row: 1;
+}
+.docs-site-nav ul {
+  list-style: none;
+  font-size: var(--step-1);
+  margin-top: 1rem;
+  margin-block-start: 1rem;
+  margin-bottom: 2rem;
+  margin-block-end: 2rem;
+}
+@media all and (min-width: 1023px) {
   .docs-site-nav ul {
-    list-style: none;
-    font-size: var(--step-1);
-    margin-top: 1rem;
-    margin-block-start: 1rem;
-    margin-bottom: 2rem;
-    margin-block-end: 2rem; }
-    @media all and (min-width: 1023px) {
-      .docs-site-nav ul {
-        font-size: var(--step-0);
-        margin-top: 0;
-        margin-block-start: 0;
-        margin-bottom: 0;
-        margin-block-end: 0;
-        align-items: center;
-        display: flex; } }
-  .docs-site-nav .flexer {
+    font-size: var(--step-0);
+    margin-top: 0;
+    margin-block-start: 0;
+    margin-bottom: 0;
+    margin-block-end: 0;
+    align-items: center;
     display: flex;
-    justify-self: flex-end;
-    align-self: flex-end; }
-  .docs-site-nav a:not(.c-btn) {
-    text-decoration: none;
-    color: inherit;
-    transition: color .2s linear; }
-    .docs-site-nav a:not(.c-btn):hover {
-      color: var(--link-color); }
-  .docs-site-nav a:not(.c-btn)[aria-current="page"],
-  .docs-site-nav a:not(.c-btn)[aria-current="true"] {
-    color: var(--link-color);
-    text-decoration: none;
-    font-weight: 500; }
+  }
+}
+.docs-site-nav .flexer {
+  display: flex;
+  justify-self: flex-end;
+  align-self: flex-end;
+}
+.docs-site-nav a:not(.c-btn) {
+  text-decoration: none;
+  color: inherit;
+  transition: color 0.2s linear;
+}
+.docs-site-nav a:not(.c-btn):hover {
+  color: var(--link-color);
+}
+.docs-site-nav a:not(.c-btn)[aria-current=page],
+.docs-site-nav a:not(.c-btn)[aria-current=true] {
+  color: var(--link-color);
+  text-decoration: none;
+  font-weight: 500;
+}
 
 @media all and (min-width: 1023px) {
   .docs-nav-panel {
     display: flex;
     flex-direction: row;
-    justify-content: center; } }
-
-.docs-nav-panel[data-open="false"] {
-  display: none; }
-
+    justify-content: center;
+  }
+}
+.docs-nav-panel[data-open=false] {
+  display: none;
+}
 @media all and (min-width: 1023px) {
-  .docs-nav-panel[data-open="true"] {
+  .docs-nav-panel[data-open=true] {
     display: flex;
     flex-direction: row;
-    justify-content: center; } }
+    justify-content: center;
+  }
+}
+
+@media all and (max-width: 1023px) {
+  #nav-panel {
+    display: none;
+  }
+}
+
+@media all and (max-width: 1023px) {
+  #nav-panel[data-open=true] {
+    display: block;
+  }
+}
+
+@media all and (max-width: 1023px) {
+  #js-docs-index-list {
+    display: none;
+  }
+}
+
+@media all and (max-width: 1023px) {
+  #js-docs-index-list[data-open=true] {
+    display: block;
+  }
+}
+
+@media all and (min-width: 1024px) {
+  #nav-toggle {
+    display: none;
+  }
+}
 
 @media all and (min-width: 1023px) {
   .docs-nav-panel .mobile-only {
-    display: none; } }
+    display: none;
+  }
+}
 
 .docs-site-nav-toggle {
   cursor: pointer;
   display: inline-flex;
   align-items: center;
-  margin-left: .5rem;
+  margin-left: 0.5rem;
   margin-right: -10px;
-  margin-inline-start: .5rem;
-  margin-inline-end: -10px; }
-  .docs-site-nav-toggle svg {
-    width: 40px;
-    height: 40px;
-    color: var(--headings-color);
-    fill: none;
-    stroke-width: 4;
-    stroke-linecap: round;
-    stroke-linejoin: round; }
-  .docs-site-nav-toggle #ham-top,
-  .docs-site-nav-toggle #ham-middle,
-  .docs-site-nav-toggle #ham-bottom {
-    transition: all .2s linear; }
-  .docs-site-nav-toggle #ham-top {
-    transform-origin: 30px 37px; }
-  .docs-site-nav-toggle #ham-bottom {
-    transform-origin: 30px 63px; }
-  .docs-site-nav-toggle[aria-expanded="true"] #ham-middle {
-    opacity: 0; }
-  .docs-site-nav-toggle[aria-expanded="true"] #ham-top {
-    transform: rotate(41deg); }
-  .docs-site-nav-toggle[aria-expanded="true"] #ham-bottom {
-    transform: rotate(-41deg); }
+  margin-inline-start: 0.5rem;
+  margin-inline-end: -10px;
+}
+.docs-site-nav-toggle svg {
+  width: 40px;
+  height: 40px;
+  color: var(--headings-color);
+  fill: none;
+  stroke-width: 4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.docs-site-nav-toggle #ham-top,
+.docs-site-nav-toggle #ham-middle,
+.docs-site-nav-toggle #ham-bottom {
+  transition: all 0.2s linear;
+}
+.docs-site-nav-toggle #ham-top {
+  transform-origin: 30px 37px;
+}
+.docs-site-nav-toggle #ham-bottom {
+  transform-origin: 30px 63px;
+}
+.docs-site-nav-toggle[aria-expanded=true] #ham-middle {
+  opacity: 0;
+}
+.docs-site-nav-toggle[aria-expanded=true] #ham-top {
+  transform: rotate(41deg);
+}
+.docs-site-nav-toggle[aria-expanded=true] #ham-bottom {
+  transform: rotate(-41deg);
+}
 
 @media all and (min-width: 1023px) {
   .docs-site-nav {
     flex-direction: row;
     grid-column: auto;
-    gap: 2rem; }
-    .docs-site-nav ul {
-      display: flex;
-      gap: 2rem;
-      font-size: var(--step-0); }
-      .docs-site-nav ul li {
-        margin-bottom: 0;
-        margin-block-end: 0; }
-    .docs-site-nav .flexer {
-      order: 1; } }
-
+    gap: 2rem;
+  }
+  .docs-site-nav ul {
+    display: flex;
+    gap: 2rem;
+    font-size: var(--step-0);
+  }
+  .docs-site-nav ul li {
+    margin-bottom: 0;
+    margin-block-end: 0;
+  }
+  .docs-site-nav .flexer {
+    order: 1;
+  }
+}
 .docs-toc {
-  margin: 2rem 0; }
+  margin: 2rem 0;
+}
 
 .c-toc ol {
-  margin: 0; }
-  .c-toc ol li {
-    position: relative;
-    margin-bottom: .25rem;
-    margin-block-end: .25rem;
-    padding-left: 1rem;
-    padding-inline-start: 1rem; }
-    .c-toc ol li > ol {
-      margin-top: .25rem; }
-  .c-toc ol li::before {
-    content: "└";
-    color: var(--icon-color);
-    position: absolute;
-    left: -.4rem;
-    offset-inline-start: -.4rem; }
-
+  margin: 0;
+}
+.c-toc ol li {
+  position: relative;
+  margin-bottom: 0.25rem;
+  margin-block-end: 0.25rem;
+  padding-left: 1rem;
+  padding-inline-start: 1rem;
+}
+.c-toc ol li > ol {
+  margin-top: 0.25rem;
+}
+.c-toc ol li::before {
+  content: "└";
+  color: var(--icon-color);
+  position: absolute;
+  left: -0.4rem;
+  offset-inline-start: -0.4rem;
+}
 .c-toc a {
   text-decoration: none;
-  color: var(--headings-color); }
-  .c-toc a:hover {
-    color: var(--link-color); }
+  color: var(--headings-color);
+}
+.c-toc a:hover {
+  color: var(--link-color);
+}
 
 .c-toc__label.c-toc__label {
   font-size: var(--step-0);
   color: var(--body-text-color);
   font-family: var(--text-font);
-  margin-bottom: .5rem;
-  margin-block-end: .5rem; }
+  margin-bottom: 0.5rem;
+  margin-block-end: 0.5rem;
+}
 
 .c-toc__label {
-  width: fit-content; }
-  .c-toc__label button {
-    color: var(--link-color);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font: inherit;
-    font-size: inherit;
-    font-weight: 500;
-    width: 100%;
-    height: 100%;
-    text-align: left;
-    line-height: 1.5;
-    padding: 0;
-    border-radius: 0;
-    position: relative;
-    border: none;
-    transition: outline 0.1s linear; }
-    .c-toc__label button svg {
-      flex: none; }
+  width: fit-content;
+}
+.c-toc__label button {
+  color: var(--link-color);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font: inherit;
+  font-size: inherit;
+  font-weight: 500;
+  width: 100%;
+  height: 100%;
+  text-align: left;
+  line-height: 1.5;
+  padding: 0;
+  border-radius: 0;
+  position: relative;
+  border: none;
+  transition: outline 0.1s linear;
+}
+.c-toc__label button svg {
+  flex: none;
+}
 
 /* Styles for the accordion icon */
 .toc-trigger-icon {
@@ -1243,28 +1459,34 @@ a.c-btn {
   margin-left: 3rem;
   margin-inline-start: 3rem;
   transition: all 0.1s linear;
-  color: var(--color-neutral-400); }
-  [aria-expanded="true"] .toc-trigger-icon {
-    -ms-transform: translateY(-50%) rotate(180deg);
-    transform: translateY(-50%) rotate(180deg); }
-
-.c-toc__panel[data-open="false"] {
-  display: none; }
-
-.c-toc__panel[data-open="true"] {
-  display: block; }
+  color: var(--color-neutral-400);
+}
+[aria-expanded=true] .toc-trigger-icon {
+  -ms-transform: translateY(-50%) rotate(180deg);
+  transform: translateY(-50%) rotate(180deg);
+}
+
+.c-toc__panel[data-open=false] {
+  display: none;
+}
+.c-toc__panel[data-open=true] {
+  display: block;
+}
 
 .search {
-  margin-bottom: 1.5rem; }
+  margin-bottom: 1.5rem;
+}
 
 .search__input-wrapper {
-  position: relative; }
+  position: relative;
+}
 
 .search__input {
   padding-left: 2.5rem;
   padding-inline-start: 2.5rem;
   outline-offset: 1px;
-  width: 100%; }
+  width: 100%;
+}
 
 .search__icon {
   color: var(--body-text-color);
@@ -1272,115 +1494,145 @@ a.c-btn {
   top: 50%;
   offset-block-start: 50%;
   transform: translateY(-50%);
-  left: .75rem;
-  offset-inline-start: .75rem; }
+  left: 0.75rem;
+  offset-inline-start: 0.75rem;
+}
 
 .algolia-docsearch-suggestion--highlight {
-  background-color: var(--color-warning-300); }
+  background-color: var(--color-warning-300);
+}
 
 .alert {
   position: relative;
   display: grid;
   grid-template-columns: auto 1fr;
   padding: 1rem;
-  gap: .75rem;
+  gap: 0.75rem;
   margin-bottom: 1.5rem;
   margin-block-end: 1.5rem;
   align-items: start;
-  font-size: .875rem;
+  font-size: 0.875rem;
   background-color: var(--body-background-color);
-  border-radius: var(--border-radius); }
-  .alert.alert--warning {
-    border: 1px solid var(--color-rose-300); }
-  .alert.alert--important {
-    border: 1px solid var(--color-warning-300); }
-  .alert.alert--tip {
-    border: 1px solid var(--color-success-300); }
-
-[data-theme="dark"] .alert.alert--warning {
-  border: 1px solid var(--color-rose-300); }
-
-[data-theme="dark"] .alert.alert--important {
-  border: 1px solid var(--color-warning-300); }
-
-[data-theme="dark"] .alert.alert--tip {
-  border: 1px solid var(--color-success-300); }
+  border-radius: var(--border-radius);
+}
+.alert.alert--warning {
+  border: 1px solid var(--color-rose-300);
+}
+.alert.alert--important {
+  border: 1px solid var(--color-warning-300);
+}
+.alert.alert--tip {
+  border: 1px solid var(--color-success-300);
+}
+
+[data-theme=dark] .alert.alert--warning {
+  border: 1px solid var(--color-rose-300);
+}
+[data-theme=dark] .alert.alert--important {
+  border: 1px solid var(--color-warning-300);
+}
+[data-theme=dark] .alert.alert--tip {
+  border: 1px solid var(--color-success-300);
+}
 
 .alert__icon {
   color: inherit;
   position: relative;
   top: 2px;
-  offset-block-start: 2px; }
+  offset-block-start: 2px;
+}
 
 .alert__type {
   font-weight: 500;
-  margin-bottom: .25rem;
-  margin-block-end: .25rem; }
+  margin-bottom: 0.25rem;
+  margin-block-end: 0.25rem;
+}
 
 .alert--warning {
-  color: var(--color-rose-600); }
+  color: var(--color-rose-600);
+}
 
 .alert--important {
-  color: var(--color-warning-600); }
+  color: var(--color-warning-600);
+}
 
 .alert--tip {
-  color: var(--color-success-600); }
-
-[data-theme="dark"] .alert--warning {
-  color: var(--color-rose-400); }
-
-[data-theme="dark"] .alert--important {
-  color: var(--color-warning-400); }
-
-[data-theme="dark"] .alert--tip {
-  color: var(--color-success-400); }
+  color: var(--color-success-600);
+}
+
+[data-theme=dark] .alert--warning {
+  color: var(--color-rose-400);
+}
+[data-theme=dark] .alert--important {
+  color: var(--color-warning-400);
+}
+[data-theme=dark] .alert--tip {
+  color: var(--color-success-400);
+}
 
 .alert__type {
   font-weight: 500;
-  margin-bottom: .25rem; }
-  .alert--warning .alert__type {
-    color: var(--color-rose-700); }
-    [data-theme="dark"] .alert--warning .alert__type {
-      color: var(--color-rose-300); }
-  .alert--important .alert__type {
-    color: var(--color-warning-700); }
-    [data-theme="dark"] .alert--important .alert__type {
-      color: var(--color-warning-300); }
-  .alert--tip .alert__type {
-    color: var(--color-success-700); }
-    [data-theme="dark"] .alert--tip .alert__type {
-      color: var(--color-success-300); }
+  margin-bottom: 0.25rem;
+}
+.alert--warning .alert__type {
+  color: var(--color-rose-700);
+}
+[data-theme=dark] .alert--warning .alert__type {
+  color: var(--color-rose-300);
+}
+.alert--important .alert__type {
+  color: var(--color-warning-700);
+}
+[data-theme=dark] .alert--important .alert__type {
+  color: var(--color-warning-300);
+}
+.alert--tip .alert__type {
+  color: var(--color-success-700);
+}
+[data-theme=dark] .alert--tip .alert__type {
+  color: var(--color-success-300);
+}
 
 .alert__learn-more {
   display: block;
   font-weight: 500;
-  margin-top: .75rem;
-  margin-block-start: .75rem; }
-  .alert--warning .alert__learn-more {
-    color: var(--color-rose-700); }
-    [data-theme="dark"] .alert--warning .alert__learn-more {
-      color: var(--color-rose-300); }
-  .alert--important .alert__learn-more {
-    color: var(--color-warning-700); }
-    [data-theme="dark"] .alert--important .alert__learn-more {
-      color: var(--color-warning-300); }
-  .alert--tip .alert__learn-more {
-    color: var(--color-success-700); }
-    [data-theme="dark"] .alert--tip .alert__learn-more {
-      color: var(--color-success-300); }
+  margin-top: 0.75rem;
+  margin-block-start: 0.75rem;
+}
+.alert--warning .alert__learn-more {
+  color: var(--color-rose-700);
+}
+[data-theme=dark] .alert--warning .alert__learn-more {
+  color: var(--color-rose-300);
+}
+.alert--important .alert__learn-more {
+  color: var(--color-warning-700);
+}
+[data-theme=dark] .alert--important .alert__learn-more {
+  color: var(--color-warning-300);
+}
+.alert--tip .alert__learn-more {
+  color: var(--color-success-700);
+}
+[data-theme=dark] .alert--tip .alert__learn-more {
+  color: var(--color-success-300);
+}
 
 .rule-categories {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 2rem 1rem;
-  margin-bottom: 3rem; }
-  .rule-categories .rule-category {
-    margin: 0;
-    padding: 0;
-    background: none;
-    border: none; }
-  .rule-categories .rule-category__description {
-    flex: 1 1 45ch; }
+  margin-bottom: 3rem;
+}
+.rule-categories .rule-category {
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: none;
+}
+.rule-categories .rule-category__description {
+  flex: 1 1 45ch;
+}
 
 .rule-category {
   font-size: var(--step--1);
@@ -1392,11 +1644,14 @@ a.c-btn {
   margin: 1.5rem 0;
   border-radius: var(--border-radius);
   border: 1px solid var(--divider-color);
-  background-color: var(--lightest-background-color); }
-  .rule-category p {
-    margin: 0; }
-  .rule-category .rule-category__description {
-    flex: 1 1 30ch; }
+  background-color: var(--lightest-background-color);
+}
+.rule-category p {
+  margin: 0;
+}
+.rule-category .rule-category__description {
+  flex: 1 1 30ch;
+}
 
 .rule {
   border-radius: var(--border-radius);
@@ -1406,50 +1661,61 @@ a.c-btn {
   align-items: center;
   gap: 1rem;
   padding: 1rem;
-  margin: .5rem 0;
-  position: relative; }
-  .rule p:last-of-type {
-    margin: 0; }
+  margin: 0.5rem 0;
+  position: relative;
+}
+.rule p:last-of-type {
+  margin: 0;
+}
 
 .rule__content {
-  flex: 1 1 35ch; }
+  flex: 1 1 35ch;
+}
 
 .rule__name {
   font-weight: 500;
-  font-size: .875rem;
-  margin-bottom: .25rem;
-  margin-block-end: .25rem; }
-  .rule__name::after {
-    position: absolute;
-    content: "";
-    width: 100%;
-    height: 100%;
-    top: 0;
-    offset-block-start: 0;
-    left: 0;
-    offset-inline-start: 0; }
+  font-size: 0.875rem;
+  margin-bottom: 0.25rem;
+  margin-block-end: 0.25rem;
+}
+.rule__name::after {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  top: 0;
+  offset-block-start: 0;
+  left: 0;
+  offset-inline-start: 0;
+}
 
 a.rule__name {
-  text-decoration: none; }
-  a.rule__name:hover {
-    text-decoration: underline; }
+  text-decoration: none;
+}
+a.rule__name:hover {
+  text-decoration: underline;
+}
 
 .rule__description {
-  font-size: var(--step--1); }
+  font-size: var(--step--1);
+}
 
 .rule__categories {
-  font-size: .875rem;
+  font-size: 0.875rem;
   display: flex;
   align-items: center;
   gap: 1rem;
   border-radius: var(--border-radius);
-  padding: 2px 4px; }
-  .rule__categories p {
-    display: inline-flex;
-    margin: 0;
-    align-items: center; }
-  [data-theme="dark"] .rule__categories {
-    background: var(--body-background-color); }
+  padding: 2px 4px;
+}
+.rule__categories p {
+  display: inline-flex;
+  margin: 0;
+  align-items: center;
+}
+[data-theme=dark] .rule__categories {
+  background: var(--body-background-color);
+}
 
 .rule__status {
   color: var(--color-rose-500);
@@ -1457,249 +1723,300 @@ a.rule__name {
   border-radius: var(--border-radius);
   display: inline-block;
   font-weight: normal;
-  margin-left: .5rem;
-  margin-inline-start: .5rem;
+  margin-left: 0.5rem;
+  margin-inline-start: 0.5rem;
   font-size: var(--step--1);
-  padding: 0 .5rem; }
-  [data-theme="dark"] .rule__status {
-    background: var(--body-background-color); }
+  padding: 0 0.5rem;
+}
+[data-theme=dark] .rule__status {
+  background: var(--body-background-color);
+}
 
-.rule__categories__type[aria-hidden="true"] {
-  opacity: .25; }
+.rule__categories__type[aria-hidden=true] {
+  opacity: 0.25;
+}
 
 /* related rules */
 .related-rules__list {
   display: flex;
-  gap: .5rem;
+  gap: 0.5rem;
   flex-wrap: wrap;
-  justify-content: start; }
+  justify-content: start;
+}
 
 .related-rules__list__item svg {
-  color: inherit; }
-
+  color: inherit;
+}
 .related-rules__list__item a {
   text-decoration: none;
   color: var(--headings-color);
-  padding: .625rem;
+  padding: 0.625rem;
   display: inline-flex;
-  gap: .5rem;
+  gap: 0.5rem;
   align-items: center;
   border: 1px solid var(--divider-color);
   border-radius: var(--border-radius);
-  background-color: var(--lightest-background-color); }
-  .related-rules__list__item a:hover {
-    color: var(--link-color);
-    background-color: var(--lighter-background-color); }
+  background-color: var(--lightest-background-color);
+}
+.related-rules__list__item a:hover {
+  color: var(--link-color);
+  background-color: var(--lighter-background-color);
+}
 
 .languages-list {
   margin: 0;
   padding: 0;
-  font-size: var(--step-0); }
-  .languages-list li {
-    margin: 0; }
-    .languages-list li:last-of-type a {
-      border-bottom: 0; }
-  .languages-list a {
-    color: inherit;
-    display: block;
-    width: 100%;
-    padding: .75rem .1rem;
-    text-decoration: none;
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid var(--divider-color);
-    border-block-end: 1px solid var(--divider-color); }
-    .languages-list a[aria-current="true"] {
-      font-weight: 500;
-      color: var(--link-color); }
-      .languages-list a[aria-current="true"]::after {
-        content: "✔️"; }
-    .languages-list a:hover {
-      color: var(--link-color); }
+  font-size: var(--step-0);
+}
+.languages-list li {
+  margin: 0;
+}
+.languages-list li:last-of-type a {
+  border-bottom: 0;
+}
+.languages-list a {
+  color: inherit;
+  display: block;
+  width: 100%;
+  padding: 0.75rem 0.1rem;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--divider-color);
+  border-block-end: 1px solid var(--divider-color);
+}
+.languages-list a[aria-current=true] {
+  font-weight: 500;
+  color: var(--link-color);
+}
+.languages-list a[aria-current=true]::after {
+  content: "✔️";
+}
+.languages-list a:hover {
+  color: var(--link-color);
+}
 
 .languages-section .flag {
   font-size: 2em;
-  margin-right: .5rem;
-  margin-inline-end: .5rem; }
+  margin-right: 0.5rem;
+  margin-inline-end: 0.5rem;
+}
 
 .languages-section .languages-list {
   font-size: var(--step-1);
   border-left: 4px solid var(--tab-border-color);
   padding-left: 1rem;
   border-inline-start: 4px solid var(--tab-border-color);
-  padding-inline-start: 1rem; }
+  padding-inline-start: 1rem;
+}
 
 .versions-list {
   margin: 0;
   padding: 0;
-  font-size: var(--step-1); }
-  .versions-list li {
-    margin: 0; }
-    .versions-list li:last-of-type a {
-      border-bottom: 0;
-      border-block-end: 0; }
-  .versions-list a {
-    color: var(--link-color);
-    display: block;
-    width: 100%;
-    padding: 1rem .5rem;
-    text-decoration: none;
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid var(--divider-color);
-    border-block-end: 1px solid var(--divider-color); }
-    .versions-list a[data-current="true"] {
-      font-weight: 500;
-      color: var(--link-color); }
-      .versions-list a[data-current="true"]::after {
-        content: "✔️"; }
-    .versions-list a:hover {
-      background-color: var(--lightest-background-color); }
+  font-size: var(--step-1);
+}
+.versions-list li {
+  margin: 0;
+}
+.versions-list li:last-of-type a {
+  border-bottom: 0;
+  border-block-end: 0;
+}
+.versions-list a {
+  color: var(--link-color);
+  display: block;
+  width: 100%;
+  padding: 1rem 0.5rem;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--divider-color);
+  border-block-end: 1px solid var(--divider-color);
+}
+.versions-list a[data-current=true] {
+  font-weight: 500;
+  color: var(--link-color);
+}
+.versions-list a[data-current=true]::after {
+  content: "✔️";
+}
+.versions-list a:hover {
+  background-color: var(--lightest-background-color);
+}
 
 .versions-section .versions-list {
   font-size: var(--step-1);
   border-left: 4px solid var(--tab-border-color);
   padding-left: 1rem;
   border-inline-start: 4px solid var(--tab-border-color);
-  padding-inline-start: 1rem; }
+  padding-inline-start: 1rem;
+}
 
 .eslint-social-icons {
   margin-bottom: -1rem;
-  margin-block-end: -1rem; }
-  .eslint-social-icons ul {
-    margin: 0;
-    padding: 0;
-    margin-left: -1rem;
-    margin-inline-start: -1rem;
-    display: inline-flex; }
-    .eslint-social-icons ul li {
-      margin: 0;
-      display: inline-flex;
-      align-items: center; }
-      .eslint-social-icons ul li a {
-        display: flex;
-        padding: 1rem; }
+  margin-block-end: -1rem;
+}
+.eslint-social-icons ul {
+  margin: 0;
+  padding: 0;
+  margin-left: -1rem;
+  margin-inline-start: -1rem;
+  display: inline-flex;
+}
+.eslint-social-icons ul li {
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+}
+.eslint-social-icons ul li a {
+  display: flex;
+  padding: 1rem;
+}
 
 @media all and (min-width: 800px) {
   .hero .grid {
     display: grid;
     grid-template-columns: 2fr 1fr;
     grid-gap: 2rem;
-    align-items: center; } }
-
+    align-items: center;
+  }
+}
 .hero .grid .span-1-7 {
-  grid-column: 1 / 2; }
-
+  grid-column: 1/2;
+}
 .hero .grid .span-10-12 {
-  grid-column: 2 / 3;
-  justify-self: end; }
+  grid-column: 2/3;
+  justify-self: end;
+}
 
 .hero {
   border-bottom: 1px solid var(--divider-color);
   border-block-end: 1px solid var(--divider-color);
-  background-color: var(--hero-background-color); }
-  @media all and (min-width: 800px) {
-    .hero {
-      min-height: calc(285px + var(--space-xl-4xl)); } }
-  .hero .content-container {
-    padding: var(--space-xl-4xl) 0;
-    margin: 0; }
-  .hero > .content-container {
-    margin: 0 auto;
-    padding: 0 calc(1rem + 1vw);
-    padding-bottom: 0;
-    align-items: center; }
+  background-color: var(--hero-background-color);
+}
+@media all and (min-width: 800px) {
+  .hero {
+    min-height: calc(285px + var(--space-xl-4xl));
+  }
+}
+.hero .content-container {
+  padding: var(--space-xl-4xl) 0;
+  margin: 0;
+}
+.hero > .content-container {
+  margin: 0 auto;
+  padding: 0 calc(1rem + 1vw);
+  padding-bottom: 0;
+  align-items: center;
+}
 
 .hero--homepage .section-title {
   margin-bottom: 1.5rem;
-  margin-block-end: 1.5rem; }
-
+  margin-block-end: 1.5rem;
+}
 .hero--homepage .section-supporting-text {
   margin: 0;
   font-size: var(--step-1);
-  text-align: left; }
-
+  text-align: left;
+}
 .hero--homepage .eslint-actions {
   font-size: var(--step-1);
   margin-top: 3rem;
-  margin-block-start: 3rem; }
+  margin-block-start: 3rem;
+}
 
 .theme-switcher {
   display: inline-flex;
   align-items: center;
-  gap: .5rem;
-  position: relative; }
+  gap: 0.5rem;
+  position: relative;
+}
 
 .theme-switcher-label.theme-switcher-label {
   font-size: inherit;
   color: inherit;
   font: inherit;
   font-family: var(--text-font);
-  margin: 0; }
+  margin: 0;
+}
 
 .theme-switcher__buttons {
   display: flex;
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
-  background-color: var(--body-background-color); }
+  background-color: var(--body-background-color);
+}
 
 .theme-switcher__button {
   flex: 0;
   box-shadow: var(--shadow-xs);
-  padding: .625rem .875rem;
+  padding: 0.625rem 0.875rem;
   display: inline-flex;
   align-items: center;
   margin: 0;
   width: 40px;
-  height: 40px; }
-  .theme-switcher__button:first-of-type {
-    border-right: 0.5px solid var(--border-color);
-    border-inline-end: 0.5px solid var(--border-color); }
-  .theme-switcher__button:last-of-type {
-    border-left: 0.5px solid var(--border-color);
-    border-inline-start: 0.5px solid var(--border-color); }
-  .theme-switcher__button .theme-switcher__icon {
-    color: var(--icon-color); }
-  .theme-switcher__button:hover .theme-switcher__icon {
-    color: var(--link-color); }
-
-.theme-switcher__button[aria-pressed="true"] .theme-switcher__icon {
-  color: var(--link-color); }
-
-.theme-switcher__button[aria-pressed="true"]:hover .theme-switcher__icon {
-  color: var(--link-color); }
-
-.theme-switcher__button[aria-pressed="false"] .theme-switcher__icon {
-  color: var(--icon-color); }
-
-.theme-switcher__button[aria-pressed="false"]:hover .theme-switcher__icon {
-  color: var(--link-color); }
+  height: 40px;
+}
+.theme-switcher__button:first-of-type {
+  border-right: 0.5px solid var(--border-color);
+  border-inline-end: 0.5px solid var(--border-color);
+}
+.theme-switcher__button:last-of-type {
+  border-left: 0.5px solid var(--border-color);
+  border-inline-start: 0.5px solid var(--border-color);
+}
+.theme-switcher__button .theme-switcher__icon {
+  color: var(--icon-color);
+}
+.theme-switcher__button:hover .theme-switcher__icon {
+  color: var(--link-color);
+}
+
+.theme-switcher__button[aria-pressed=true] .theme-switcher__icon {
+  color: var(--link-color);
+}
+.theme-switcher__button[aria-pressed=true]:hover .theme-switcher__icon {
+  color: var(--link-color);
+}
+
+.theme-switcher__button[aria-pressed=false] .theme-switcher__icon {
+  color: var(--icon-color);
+}
+.theme-switcher__button[aria-pressed=false]:hover .theme-switcher__icon {
+  color: var(--link-color);
+}
 
 .theme-switcher__button:hover .theme-switcher__icon {
-  color: var(--link-color); }
+  color: var(--link-color);
+}
 
 .version-switcher {
   margin-bottom: 1.5rem;
-  margin-block-end: 1.5rem; }
+  margin-block-end: 1.5rem;
+}
 
 .switcher--language {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: .25rem .5rem;
+  gap: 0.25rem 0.5rem;
   position: relative;
   min-width: 15rem;
-  padding: 0; }
+  padding: 0;
+}
 
 .switcher--language .label__text {
-  flex: 1 0 10ch; }
+  flex: 1 0 10ch;
+}
 
 .switcher--language .switcher__select {
   min-width: 15rem;
-  flex: 1 0 15rem; }
+  flex: 1 0 15rem;
+}
 
 .language-switcher {
-  display: inline-flex; }
+  display: inline-flex;
+}
 
 .docs-index a {
   border-radius: var(--border-radius);
@@ -1707,30 +2024,37 @@ a.rule__name {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: .5rem .75rem;
-  margin-left: -.75rem;
-  margin-inline-start: -.75rem;
-  color: var(--headings-color); }
-  .docs-index a:hover, .docs-index a[aria-current="true"] {
-    background-color: var(--docs-lightest-background-color);
-    color: var(--link-color); }
+  padding: 0.5rem 0.75rem;
+  margin-left: -0.75rem;
+  margin-inline-start: -0.75rem;
+  color: var(--headings-color);
+}
+.docs-index a:hover, .docs-index a[aria-current=true] {
+  background-color: var(--docs-lightest-background-color);
+  color: var(--link-color);
+}
 
 .docs-index__item {
-  margin: 0; }
-  .docs-index__item ul ul {
-    padding-left: .75rem; }
-  .docs-index__item[data-has-children] {
-    margin-bottom: .5rem; }
+  margin: 0;
+}
+.docs-index__item ul ul {
+  padding-left: 0.75rem;
+}
+.docs-index__item[data-has-children] {
+  margin-bottom: 0.5rem;
+}
 
 .docs-index > ul > .docs-index__item {
   margin-top: 1.5rem;
-  margin-block-start: 1.5rem; }
-  .docs-index > ul > .docs-index__item > a {
-    color: var(--icon-color);
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    font-size: .875rem;
-    font-weight: 500; }
+  margin-block-start: 1.5rem;
+}
+.docs-index > ul > .docs-index__item > a {
+  color: var(--icon-color);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
 
 /* Styles for the accordion icon */
 .index-js .index-icon {
@@ -1739,79 +2063,101 @@ a.rule__name {
   height: 0.5rem;
   transform-origin: 50% 50%;
   transition: all 0.1s linear;
-  color: inherit; }
+  color: inherit;
+}
 
-.index-js [aria-expanded="true"] .index-icon {
+.index-js [aria-expanded=true] .index-icon {
   -ms-transform: rotate(180deg);
-  transform: rotate(180deg); }
-
-.index-js [aria-hidden="true"] {
-  display: none; }
+  transform: rotate(180deg);
+}
 
-.index-js [aria-hidden="false"] {
-  display: block; }
+.index-js [aria-hidden=true] {
+  display: none;
+}
 
-.docs-index__list[data-open="false"] {
-  display: none; }
-  @media all and (min-width: 1023px) {
-    .docs-index__list[data-open="false"] {
-      display: block; } }
+.index-js [aria-hidden=false] {
+  display: block;
+}
 
-.docs-index__list[data-open="true"] {
-  display: block; }
-  @media all and (min-width: 1023px) {
-    .docs-index__list[data-open="true"] {
-      display: block; } }
+.docs-index__list[data-open=false] {
+  display: none;
+}
+@media all and (min-width: 1023px) {
+  .docs-index__list[data-open=false] {
+    display: block;
+  }
+}
+.docs-index__list[data-open=true] {
+  display: block;
+}
+@media all and (min-width: 1023px) {
+  .docs-index__list[data-open=true] {
+    display: block;
+  }
+}
 
 .docs-index-toggle {
   cursor: pointer;
   display: flex;
   width: 100%;
-  padding: .75rem 1.125rem;
+  padding: 0.75rem 1.125rem;
   align-items: center;
   justify-content: space-between;
-  gap: .5rem;
+  gap: 0.5rem;
   font-weight: 500;
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   background-color: var(--secondary-button-background-color);
   color: var(--secondary-button-text-color);
-  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); }
-  .docs-index-toggle:hover {
-    background-color: var(--secondary-button-hover-color); }
-  @media all and (min-width: 1023px) {
-    .docs-index-toggle {
-      display: none; } }
-  .docs-index-toggle svg {
-    width: 1.5em;
-    height: 1.5em;
-    color: inherit;
-    fill: none;
-    stroke-width: 4;
-    stroke-linecap: round;
-    stroke-linejoin: round; }
-  .docs-index-toggle #ham-top,
-  .docs-index-toggle #ham-middle,
-  .docs-index-toggle #ham-bottom {
-    transition: all .2s linear; }
-  .docs-index-toggle #ham-top {
-    transform-origin: 30px 37px; }
-  .docs-index-toggle #ham-bottom {
-    transform-origin: 30px 63px; }
-  .docs-index-toggle[aria-expanded="true"] #ham-middle {
-    opacity: 0; }
-  .docs-index-toggle[aria-expanded="true"] #ham-top {
-    transform: rotate(41deg); }
-  .docs-index-toggle[aria-expanded="true"] #ham-bottom {
-    transform: rotate(-41deg); }
+  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
+}
+.docs-index-toggle:hover {
+  background-color: var(--secondary-button-hover-color);
+}
+@media all and (min-width: 1023px) {
+  .docs-index-toggle {
+    display: none;
+  }
+}
+.docs-index-toggle svg {
+  width: 1.5em;
+  height: 1.5em;
+  color: inherit;
+  fill: none;
+  stroke-width: 4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.docs-index-toggle #ham-top,
+.docs-index-toggle #ham-middle,
+.docs-index-toggle #ham-bottom {
+  transition: all 0.2s linear;
+}
+.docs-index-toggle #ham-top {
+  transform-origin: 30px 37px;
+}
+.docs-index-toggle #ham-bottom {
+  transform-origin: 30px 63px;
+}
+.docs-index-toggle[aria-expanded=true] #ham-middle {
+  opacity: 0;
+}
+.docs-index-toggle[aria-expanded=true] #ham-top {
+  transform: rotate(41deg);
+}
+.docs-index-toggle[aria-expanded=true] #ham-bottom {
+  transform: rotate(-41deg);
+}
 
 .c-tabs pre {
   margin-top: 0;
-  margin-block-start: 0; }
+  margin-block-start: 0;
+}
 
 .js-tabs .c-tabs__tablist {
   display: flex;
-  justify-content: start; }
+  justify-content: start;
+}
 
 .c-tabs__tab {
   background: none;
@@ -1824,32 +2170,39 @@ a.rule__name {
   font-weight: 500;
   font-size: var(--step-0);
   display: inline-flex;
-  padding: .75rem 1.125rem;
+  padding: 0.75rem 1.125rem;
   align-items: center;
   justify-content: center;
   border-radius: var(--border-radius) var(--border-radius) 0 0;
-  transition: background-color .2s linear, border-color .2s linear; }
-  .c-tabs__tab:hover {
-    color: var(--link-color); }
-  .c-tabs__tab[aria-selected="true"] {
-    color: var(--link-color);
-    background-color: var(--lightest-background-color); }
+  transition: background-color 0.2s linear, border-color 0.2s linear;
+}
+.c-tabs__tab:hover {
+  color: var(--link-color);
+}
+.c-tabs__tab[aria-selected=true] {
+  color: var(--link-color);
+  background-color: var(--lightest-background-color);
+}
 
 .c-tabs__tabpanel {
   margin-bottom: 2rem;
   margin-block-end: 2rem;
   background-color: var(--lightest-background-color);
-  border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius); }
-  .js-tabs .c-tabs__tabpanel {
-    margin-bottom: 0;
-    margin-block-end: 0; }
+  border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
+}
+.js-tabs .c-tabs__tabpanel {
+  margin-bottom: 0;
+  margin-block-end: 0;
+}
 
 .c-tabs__tabpanel__title {
   margin-bottom: 1.5rem;
-  margin-block-end: 1.5rem; }
+  margin-block-end: 1.5rem;
+}
 
 .js-tabs .c-tabs__tabpanel__title {
-  display: none; }
+  display: none;
+}
 
 .resource {
   display: flex;
@@ -1858,142 +2211,177 @@ a.rule__name {
   background-color: var(--lightest-background-color);
   align-items: stretch;
   overflow: hidden;
-  margin-bottom: .5rem;
-  margin-block-end: .5rem;
+  margin-bottom: 0.5rem;
+  margin-block-end: 0.5rem;
   position: relative;
-  transition: all .2s linear; }
-  .resource:hover {
-    background-color: var(--lighter-background-color); }
+  transition: all 0.2s linear;
+}
+.resource:hover {
+  background-color: var(--lighter-background-color);
+}
 
 .resource__image {
   flex: 1 0 5.5rem;
   max-width: 5.5rem;
   overflow: hidden;
-  padding: .25rem; }
-  .resource__image img {
-    display: block;
-    height: 100%;
-    width: 100%;
-    object-fit: contain; }
+  padding: 0.25rem;
+}
+.resource__image img {
+  display: block;
+  height: 100%;
+  width: 100%;
+  object-fit: contain;
+}
 
 .resource__content {
   flex: 4;
-  padding: .75rem;
-  align-self: center; }
+  padding: 0.75rem;
+  align-self: center;
+}
 
 .resource__title {
   text-decoration: none;
   color: var(--headings-color);
   font-weight: 500;
-  margin-bottom: .125rem; }
-  .resource__title::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    offset-inline-start: 0;
-    top: 0;
-    block-inline-start: 0;
-    width: 100%;
-    height: 100%; }
+  margin-bottom: 0.125rem;
+}
+.resource__title::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  offset-inline-start: 0;
+  top: 0;
+  block-inline-start: 0;
+  width: 100%;
+  height: 100%;
+}
 
 .resource__domain,
 .resource__domain a {
   text-decoration: none;
   color: var(--body-text-color);
-  font-size: .875rem; }
+  font-size: 0.875rem;
+}
 
 .resource__icon {
   color: var(--headings-color);
   margin: 1rem;
-  align-self: center; }
+  align-self: center;
+}
 
 .index {
   margin-bottom: 4rem;
-  margin-block-end: 4rem; }
+  margin-block-end: 4rem;
+}
 
 .index__item {
-  margin: 0; }
-  .index__item a {
-    display: block;
-    color: inherit;
-    text-decoration: none;
-    padding: .625rem .875rem;
-    font-size: var(--step-0);
-    border-radius: var(--border-radius); }
-    .index__item a:hover {
-      color: var(--link-color); }
-  .index__item a[aria-current="page"] {
-    color: var(--link-color);
-    background-color: var(--lightest-background-color);
-    font-weight: 500; }
+  margin: 0;
+}
+.index__item a {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+  padding: 0.625rem 0.875rem;
+  font-size: var(--step-0);
+  border-radius: var(--border-radius);
+}
+.index__item a:hover {
+  color: var(--link-color);
+}
+.index__item a[aria-current=page] {
+  color: var(--link-color);
+  background-color: var(--lightest-background-color);
+  font-weight: 500;
+}
 
 .index__toggle {
   cursor: pointer;
   display: flex;
   width: 100%;
-  padding: .75rem 1.125rem;
+  padding: 0.75rem 1.125rem;
   align-items: center;
   justify-content: space-between;
-  gap: .5rem;
+  gap: 0.5rem;
   font-weight: 500;
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   background-color: var(--secondary-button-background-color);
   color: var(--secondary-button-text-color);
-  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); }
-  .index__toggle:hover {
-    background-color: var(--secondary-button-hover-color); }
-  @media all and (min-width: 1023px) {
-    .index__toggle {
-      display: none; } }
-  .index__toggle svg {
-    width: 1.5em;
-    height: 1.5em;
-    color: inherit;
-    fill: none;
-    stroke-width: 4;
-    stroke-linecap: round;
-    stroke-linejoin: round; }
-  .index__toggle #ham-top,
-  .index__toggle #ham-middle,
-  .index__toggle #ham-bottom {
-    transition: all .2s linear; }
-  .index__toggle #ham-top {
-    transform-origin: 30px 37px; }
-  .index__toggle #ham-bottom {
-    transform-origin: 30px 63px; }
-  .index__toggle[aria-expanded="true"] #ham-middle {
-    opacity: 0; }
-  .index__toggle[aria-expanded="true"] #ham-top {
-    transform: rotate(41deg); }
-  .index__toggle[aria-expanded="true"] #ham-bottom {
-    transform: rotate(-41deg); }
+  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
+}
+.index__toggle:hover {
+  background-color: var(--secondary-button-hover-color);
+}
+@media all and (min-width: 1023px) {
+  .index__toggle {
+    display: none;
+  }
+}
+.index__toggle svg {
+  width: 1.5em;
+  height: 1.5em;
+  color: inherit;
+  fill: none;
+  stroke-width: 4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.index__toggle #ham-top,
+.index__toggle #ham-middle,
+.index__toggle #ham-bottom {
+  transition: all 0.2s linear;
+}
+.index__toggle #ham-top {
+  transform-origin: 30px 37px;
+}
+.index__toggle #ham-bottom {
+  transform-origin: 30px 63px;
+}
+.index__toggle[aria-expanded=true] #ham-middle {
+  opacity: 0;
+}
+.index__toggle[aria-expanded=true] #ham-top {
+  transform: rotate(41deg);
+}
+.index__toggle[aria-expanded=true] #ham-bottom {
+  transform: rotate(-41deg);
+}
 
 .index__list {
-  display: block; }
-  .index__list[data-open="false"] {
-    display: none; }
-    @media all and (min-width: 1023px) {
-      .index__list[data-open="false"] {
-        display: block; } }
-  .index__list[data-open="true"] {
-    display: block; }
-    @media all and (min-width: 1023px) {
-      .index__list[data-open="true"] {
-        display: block; } }
+  display: block;
+}
+.index__list[data-open=false] {
+  display: none;
+}
+@media all and (min-width: 1023px) {
+  .index__list[data-open=false] {
+    display: block;
+  }
+}
+.index__list[data-open=true] {
+  display: block;
+}
+@media all and (min-width: 1023px) {
+  .index__list[data-open=true] {
+    display: block;
+  }
+}
 
 @media all and (max-width: 800px) {
   .hero-ad {
-    display: none; } }
+    display: none;
+  }
+}
 
 #carbonads * {
   margin: initial;
-  padding: initial; }
+  padding: initial;
+}
 
 #carbonads {
   display: inline-block;
   margin: 2rem 0;
-  padding: .6em;
+  padding: 0.6em;
   font-size: 16px;
   line-height: 1.35;
   overflow: hidden;
@@ -2001,48 +2389,61 @@ a.rule__name {
   background-color: var(--body-background-color);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
-  box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.1); }
-  .docs-main #carbonads {
-    margin: 0 0 2rem; }
-  @media all and (max-width: 800px) {
-    #carbonads {
-      display: none !important; } }
+  box-shadow: 0 1px 4px 1px hsla(0deg, 0%, 0%, 0.1);
+}
+.docs-main #carbonads {
+  margin: 0 0 2rem;
+}
+@media all and (max-width: 800px) {
+  #carbonads {
+    display: none !important;
+  }
+}
 
 .jumbotron #carbonads {
-  border: solid 1px rgba(111, 102, 153, 0.6);
-  background-color: rgba(179, 179, 179, 0.15); }
+  border: solid 1px hsla(250deg, 20%, 50%, 0.6);
+  background-color: hsla(0deg, 0%, 70%, 0.15);
+}
 
 #carbonads a {
   font-weight: 500;
-  color: inherit; }
+  color: inherit;
+}
 
 #carbonads a:hover {
   text-decoration: none;
-  color: inherit; }
+  color: inherit;
+}
 
 .jumbotron #carbonads a {
-  color: #eee; }
+  color: #eee;
+}
 
 .jumbotron #carbonads a:hover {
-  color: #ccc; }
+  color: #ccc;
+}
 
 #carbonads span {
   display: block;
   position: relative;
-  overflow: hidden; }
+  overflow: hidden;
+}
 
 #carbonads .carbon-wrap {
   display: flex;
   flex-direction: column;
-  max-width: 130px; }
+  max-width: 130px;
+}
 
 #carbonads .carbon-img img {
-  display: block; }
+  display: block;
+}
 
 #carbonads .carbon-text {
   margin-top: 10px;
   font-size: 14px;
-  text-align: left; }
+  text-align: left;
+}
 
 #carbonads .carbon-poweredby {
   display: block;
@@ -2050,32 +2451,42 @@ a.rule__name {
   font-size: 10px;
   line-height: 1;
   letter-spacing: 1px;
-  text-transform: uppercase; }
+  text-transform: uppercase;
+}
 
 @media only screen and (min-width: 320px) and (max-width: 759px) {
   #carbonads {
     margin-top: 0;
-    font-size: 12px; }
+    font-size: 12px;
+  }
+
   #carbonads .carbon-wrap {
     display: flex;
     flex-direction: row;
-    max-width: 330px; }
+    max-width: 330px;
+  }
+
   #carbonads .carbon-text {
     margin: 0 0 14px 10px;
     font-size: 14px;
-    text-align: left; }
+    text-align: left;
+  }
+
   #carbonads .carbon-poweredby {
     position: absolute;
     bottom: 0;
     left: 142px;
-    font-size: 8px; } }
-
+    font-size: 8px;
+  }
+}
 @media all and (min-width: 1023px) {
   .grid {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     grid-gap: 2rem;
-    align-items: start; } }
+    align-items: start;
+  }
+}
 
 .visually-hidden {
   clip: rect(0 0 0 0);
@@ -2084,120 +2495,163 @@ a.rule__name {
   overflow: hidden;
   position: absolute;
   width: 1px;
-  white-space: nowrap; }
+  white-space: nowrap;
+}
 
 [hidden] {
-  display: none !important; }
+  display: none !important;
+}
 
 @media all and (min-width: 1023px) {
   .mobile-only {
-    display: none; } }
+    display: none;
+  }
+}
 
 @media all and (max-width: 1023px) {
   .desktop-only {
-    display: none; } }
+    display: none;
+  }
+}
 
 .text.text {
   font-size: inherit;
   color: inherit;
   font: inherit;
   font-family: var(--text-font);
-  margin: 0; }
+  margin: 0;
+}
 
 .color-brand {
-  color: var(--link-color); }
+  color: var(--link-color);
+}
 
 .font-weight-medium {
-  font-weight: 500; }
+  font-weight: 500;
+}
 
 .center-text {
   text-align: center;
-  grid-column: 1 / -1; }
+  grid-column: 1/-1;
+}
 
 .text-dark {
-  color: var(--headings-color); }
+  color: var(--headings-color);
+}
 
 .divider {
   border-bottom: 1px solid var(--divider-color);
-  border-block-end: 1px solid var(--divider-color); }
+  border-block-end: 1px solid var(--divider-color);
+}
 
 .fs-step--1 {
-  font-size: .875rem; }
+  font-size: 0.875rem;
+}
 
 .fs-step-0 {
-  font-size: var(--step-0); }
+  font-size: var(--step-0);
+}
 
 .fs-step-1 {
-  font-size: var(--step-1); }
+  font-size: var(--step-1);
+}
 
 .fs-step-2 {
-  font-size: var(--step-2); }
+  font-size: var(--step-2);
+}
 
 .fs-step-3 {
-  font-size: var(--step-3); }
+  font-size: var(--step-3);
+}
 
 .fs-step-4 {
-  font-size: var(--step-4); }
+  font-size: var(--step-4);
+}
 
 .fs-step-5 {
-  font-size: var(--step-5); }
+  font-size: var(--step-5);
+}
 
 .fs-step-6 {
-  font-size: var(--step-6); }
+  font-size: var(--step-6);
+}
 
 .grid--center-items {
-  align-items: center; }
+  align-items: center;
+}
 
 .span-1-3 {
-  grid-column: 1 / 4; }
+  grid-column: 1/4;
+}
 
 .span-1-4 {
-  grid-column: 1 / 5; }
+  grid-column: 1/5;
+}
 
 .span-1-5 {
-  grid-column: 1 / 6; }
+  grid-column: 1/6;
+}
 
 .span-1-6 {
-  grid-column: 1 / 7; }
+  grid-column: 1/7;
+}
 
 .span-1-7 {
-  grid-column: 1 / 8; }
+  grid-column: 1/8;
+}
 
 .span-1-12 {
-  grid-column: 1 / -1; }
+  grid-column: 1/-1;
+}
 
 .span-4-12 {
-  grid-column: 4 / 13; }
+  grid-column: 4/13;
+}
 
 .span-6-12 {
-  grid-column: 6 / 13; }
+  grid-column: 6/13;
+}
 
 .span-7-12 {
-  grid-column: 7 / 13; }
+  grid-column: 7/13;
+}
 
 .span-8-12 {
-  grid-column: 8 / 13; }
+  grid-column: 8/13;
+}
 
 .span-10-12 {
-  grid-column: 10 / 13; }
+  grid-column: 10/13;
+}
 
 .span-11-12 {
-  grid-column: 11 / 13; }
+  grid-column: 11/13;
+}
 
 .span-4-9 {
-  grid-column: 4 / 10; }
+  grid-column: 4/10;
+}
 
 .span-4-11 {
-  grid-column: 4 / 11; }
+  grid-column: 4/11;
+}
 
 .span-5-12 {
-  grid-column: 5 / 12; }
+  grid-column: 5/12;
+}
 
 .span-3-10 {
-  grid-column: 3 / 11; }
+  grid-column: 3/11;
+}
 
 .span-6-7 {
-  grid-column: 6 / 8; }
+  grid-column: 6/8;
+}
 
 .span-5-8 {
-  grid-column: 5 / 9; }
+  grid-column: 5/9;
+}
+
+noscript {
+  display: grid;
+}
diff --git a/docs/src/assets/scss/_utilities.scss b/docs/src/assets/scss/_utilities.scss
index ede62ca53a9..8455fa55da2 100644
--- a/docs/src/assets/scss/_utilities.scss
+++ b/docs/src/assets/scss/_utilities.scss
@@ -172,3 +172,7 @@
 .span-5-8 {
     grid-column: 5 / 9;
 }
+
+noscript{
+    display: grid;
+}
\ No newline at end of file
diff --git a/docs/src/assets/scss/components/docs-navigation.scss b/docs/src/assets/scss/components/docs-navigation.scss
index 56409288e6c..ad303d17ed1 100644
--- a/docs/src/assets/scss/components/docs-navigation.scss
+++ b/docs/src/assets/scss/components/docs-navigation.scss
@@ -70,6 +70,38 @@
     }
 }
 
+#nav-panel{
+    @media all and (max-width: 1023px) {
+        display: none;
+    }
+}
+
+#nav-panel[data-open="true"]{
+    @media all and (max-width: 1023px) {
+    display: block;
+    }
+}
+
+#js-docs-index-list {
+    @media all and (max-width: 1023px) {
+        display: none;
+    }
+}
+
+#js-docs-index-list[data-open="true"]{
+    @media all and (max-width: 1023px) {
+    display: block;
+    }
+}
+
+
+
+#nav-toggle{
+    @media all and (min-width: 1024px) {
+        display: none;
+    }
+}
+
 .docs-nav-panel .mobile-only {
     @media all and (min-width: 1023px) {
         display: none;

From 834b95e7693a8da053d60a13812c2a750980daee Mon Sep 17 00:00:00 2001
From: "amaresh.sm" <amareshsm13@gmail.com>
Date: Sat, 28 May 2022 00:51:54 +0530
Subject: [PATCH 4/8] chore: revamped cls

---
 docs/src/_includes/components/docs-index.html | 26 -------------------
 docs/src/_includes/components/navigation.html | 21 ---------------
 .../components/version-switcher.html          |  6 -----
 docs/src/_includes/layouts/base.njk           | 10 +++++++
 .../assets/css/components/docs-navigation.css |  5 ++++
 docs/src/assets/css/styles.css                |  7 +++++
 .../scss/components/docs-navigation.scss      |  7 +++++
 7 files changed, 29 insertions(+), 53 deletions(-)

diff --git a/docs/src/_includes/components/docs-index.html b/docs/src/_includes/components/docs-index.html
index e1ecfa775a9..b2bf7d439ea 100644
--- a/docs/src/_includes/components/docs-index.html
+++ b/docs/src/_includes/components/docs-index.html
@@ -19,33 +19,7 @@
             <path id="ham-bottom" d="M30,63 L70,63 Z" stroke="currentColor"></path>
         </svg>
     </button>
-    <noscript>
-        <style>
-            #js-docs-index-toggle{
-                display: none;
-            }
-        </style>
-        <button class="docs-index-toggle" aria-label="Index"  hidden>
-            Index
-            <svg width="20" height="20" viewBox="20 20 60 60">
-                <path id="ham-top" d="M30,37 L70,37 Z" stroke="currentColor"></path>
-                <path id="ham-middle" d="M30,50 L70,50 Z" stroke="currentColor"></path>
-                <path id="ham-bottom" d="M30,63 L70,63 Z" stroke="currentColor"></path>
-            </svg>
-        </button>
-    </noscript>
-
     <ul class="docs-index__list" id="js-docs-index-list">
         {%- for entry in navPages %}{{ renderNavListItem(entry) }}{%- endfor -%}
     </ul>
-    <noscript>
-        <style>
-            #js-docs-index-list{
-                display: none;
-            }
-        </style>
-    <ul class="docs-index__list" >
-        {%- for entry in navPages %}{{ renderNavListItem(entry) }}{%- endfor -%}
-    </ul>
-</noscript>
 </nav>
diff --git a/docs/src/_includes/components/navigation.html b/docs/src/_includes/components/navigation.html
index 74ea2355028..a95b1bf1ae0 100644
--- a/docs/src/_includes/components/navigation.html
+++ b/docs/src/_includes/components/navigation.html
@@ -1,7 +1,6 @@
 <nav class="docs-site-nav" aria-label="Main">
     <div class="flexer">
         <a href="https://eslint.org/donate" class="c-btn c-btn--primary donate-link">Donate</a>
-
         <button class="docs-site-nav-toggle" aria-label="Menu" id="nav-toggle">
             <svg width="20" height="20" viewBox="20 20 60 60">
                 <path id="ham-top"    d="M30,37 L70,37 Z" stroke="currentColor"></path>
@@ -9,21 +8,6 @@
                 <path id="ham-bottom" d="M30,63 L70,63 Z" stroke="currentColor"></path>
             </svg>
         </button>
-        <noscript>
-            <style>
-                #nav-toggle{
-                    display: none;
-                }
-            </style>
-            <button class="docs-site-nav-toggle" aria-label="Menu" hidden>
-                <svg width="20" height="20" viewBox="20 20 60 60">
-                    <path id="ham-top"    d="M30,37 L70,37 Z" stroke="currentColor"></path>
-                    <path id="ham-middle" d="M30,50 L70,50 Z" stroke="currentColor"></path>
-                    <path id="ham-bottom" d="M30,63 L70,63 Z" stroke="currentColor"></path>
-                </svg>
-            </button>
-        </noscript>
- 
     </div>
     <div class="docs-nav-panel" id="nav-panel">
         <ul id="nav-list">
@@ -39,11 +23,6 @@
         </div>
     </div>
     <noscript>
-        <style>
-            #nav-panel{
-                display:none;
-            }
-        </style>
         <div class="docs-nav-panel" >
             <ul id="nav-list">
                 {% for item in navigation.items %}
diff --git a/docs/src/_includes/components/version-switcher.html b/docs/src/_includes/components/version-switcher.html
index a97a1b1c977..759ad2f8a1e 100644
--- a/docs/src/_includes/components/version-switcher.html
+++ b/docs/src/_includes/components/version-switcher.html
@@ -1,13 +1,7 @@
 <div class="version-switcher">
     <noscript>
-        <style>
-            #version-switcher {
-                display: none;
-            }
-        </style>
         <a href="/versions/" class="switcher-fallback">Versions</a>
     </noscript>
-
     <div role="region" class="switcher switcher--version" aria-labelledby="version-switcher-label"
         id="version-switcher">
         <span id="version-switcher-label" hidden>Version Switcher</span>
diff --git a/docs/src/_includes/layouts/base.njk b/docs/src/_includes/layouts/base.njk
index 36d84377997..3b816c27c57 100644
--- a/docs/src/_includes/layouts/base.njk
+++ b/docs/src/_includes/layouts/base.njk
@@ -34,6 +34,16 @@
     <meta name="twitter:image" content="{{ cover }}">
     <meta name="twitter:creator" content="@geteslint">
 
+    <noscript>
+        <style>
+            #js-docs-index-toggle, #nav-toggle, #nav-panel, #version-switcher {
+                display: none;
+            }
+           #js-docs-index-list {
+             display: block !important
+            }
+        </style>
+    </noscript>
 
     <script type="module">
         // This is a capable browser, let's improve the UI further!
diff --git a/docs/src/assets/css/components/docs-navigation.css b/docs/src/assets/css/components/docs-navigation.css
index a64d4753558..b1ca77a4999 100644
--- a/docs/src/assets/css/components/docs-navigation.css
+++ b/docs/src/assets/css/components/docs-navigation.css
@@ -43,6 +43,11 @@
   text-decoration: none;
   font-weight: 500;
 }
+.docs-site-nav a.switcher-fallback {
+  color: var(--link-color);
+  transition: color 0.1s linear;
+  text-decoration: underline;
+}
 
 @media all and (min-width: 1023px) {
   .docs-nav-panel {
diff --git a/docs/src/assets/css/styles.css b/docs/src/assets/css/styles.css
index a0e5b45a973..2e5669b08c9 100644
--- a/docs/src/assets/css/styles.css
+++ b/docs/src/assets/css/styles.css
@@ -1271,6 +1271,11 @@ a.c-btn {
   text-decoration: none;
   font-weight: 500;
 }
+.docs-site-nav a.switcher-fallback {
+  color: var(--link-color);
+  transition: color 0.1s linear;
+  text-decoration: underline;
+}
 
 @media all and (min-width: 1023px) {
   .docs-nav-panel {
@@ -2655,3 +2660,5 @@ a.rule__name:hover {
 noscript {
   display: grid;
 }
+
+/*# sourceMappingURL=styles.css.map */
diff --git a/docs/src/assets/scss/components/docs-navigation.scss b/docs/src/assets/scss/components/docs-navigation.scss
index ad303d17ed1..68e105dc4af 100644
--- a/docs/src/assets/scss/components/docs-navigation.scss
+++ b/docs/src/assets/scss/components/docs-navigation.scss
@@ -47,6 +47,13 @@
         text-decoration: none;
         font-weight: 500;
     }
+
+    a.switcher-fallback{
+        color: var(--link-color);
+        transition: color 0.1s linear;
+        text-decoration: underline;
+    }
+
 }
 
 

From 5442a0c8f5767443678b84849f3c1853db2adfb7 Mon Sep 17 00:00:00 2001
From: "amaresh.sm" <amareshsm13@gmail.com>
Date: Sat, 28 May 2022 13:36:22 +0530
Subject: [PATCH 5/8] fix: use no-js class & remove duplicate code

---
 .../components/nav-version-switcher.html      |  3 +++
 docs/src/_includes/components/navigation.html |  6 ++---
 docs/src/_includes/layouts/base.njk           | 25 ++++++++++---------
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/docs/src/_includes/components/nav-version-switcher.html b/docs/src/_includes/components/nav-version-switcher.html
index f2521d39379..38c1ff55612 100644
--- a/docs/src/_includes/components/nav-version-switcher.html
+++ b/docs/src/_includes/components/nav-version-switcher.html
@@ -1,4 +1,7 @@
 <div class="version-switcher">
+    <noscript>
+            <a href="/versions/" class="switcher-fallback">Versions</a>
+    </noscript> 
     <div  role="region" class="switcher switcher--version" aria-labelledby="nav-version-switcher-label" id="nav-version-switcher">
         <span id="nav-version-switcher-label" hidden>Language Switcher</span>
         <div class="infobox visually-hidden" id="nav-version-infobox">
diff --git a/docs/src/_includes/components/navigation.html b/docs/src/_includes/components/navigation.html
index a95b1bf1ae0..89fc2c80f58 100644
--- a/docs/src/_includes/components/navigation.html
+++ b/docs/src/_includes/components/navigation.html
@@ -22,7 +22,7 @@
             {% include 'components/nav-search.html' %}
         </div>
     </div>
-    <noscript>
+    <!-- <noscript>
         <div class="docs-nav-panel" >
             <ul id="nav-list">
                 {% for item in navigation.items %}
@@ -31,10 +31,10 @@
                 </li>
                 {% endfor %}
             </ul>
-        </div>
         <div class="mobile-only">
             {% include 'components/nav-version-switcher-noscript.html' %}
             {% include 'components/nav-search.html' %}
         </div>
-    </noscript>
+    </div>
+    </noscript> -->
 </nav>
diff --git a/docs/src/_includes/layouts/base.njk b/docs/src/_includes/layouts/base.njk
index 3b816c27c57..a8dd0862ec9 100644
--- a/docs/src/_includes/layouts/base.njk
+++ b/docs/src/_includes/layouts/base.njk
@@ -34,23 +34,24 @@
     <meta name="twitter:image" content="{{ cover }}">
     <meta name="twitter:creator" content="@geteslint">
 
-    <noscript>
-        <style>
-            #js-docs-index-toggle, #nav-toggle, #nav-panel, #version-switcher {
-                display: none;
-            }
-           #js-docs-index-list {
-             display: block !important
-            }
-        </style>
-    </noscript>
-
-    <script type="module">
+    <script>
         // This is a capable browser, let's improve the UI further!
         document.documentElement.classList.add("enhanced");
         document.documentElement.classList.remove('no-js');
     </script>
 
+    <style>
+        .no-js #js-docs-index-toggle, .no-js #nav-toggle, .no-js #version-switcher, .no-js #nav-version-switcher {
+            display: none;
+        }
+        .no-js #js-docs-index-list {
+            display: block !important
+        }
+        .no-js #nav-panel{
+            display:grid !important;
+            }
+    </style>
+
     <link rel="preload" href="{{ '/assets/fonts/SpaceGrotesk-Medium-subset.woff2' | url }}" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="{{ '/assets/fonts/Inter-Regular-subset.woff2' | url }}" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="{{ '/assets/fonts/SpaceMono-Regular-subset.woff2' | url }}" as="font" type="font/woff2" crossorigin>

From de800214a277bbf634e3c7b5746f828ac0665217 Mon Sep 17 00:00:00 2001
From: "amaresh.sm" <amareshsm13@gmail.com>
Date: Sat, 28 May 2022 14:06:56 +0530
Subject: [PATCH 6/8] fix: removed unused code

---
 .../components/nav-version-switcher-noscript.html |  3 ---
 docs/src/_includes/components/navigation.html     | 15 ---------------
 2 files changed, 18 deletions(-)
 delete mode 100644 docs/src/_includes/components/nav-version-switcher-noscript.html

diff --git a/docs/src/_includes/components/nav-version-switcher-noscript.html b/docs/src/_includes/components/nav-version-switcher-noscript.html
deleted file mode 100644
index 21dabdf4e8c..00000000000
--- a/docs/src/_includes/components/nav-version-switcher-noscript.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="version-switcher">
-    <a href="/versions/" class="switcher-fallback">Versions</a>
-</div>
\ No newline at end of file
diff --git a/docs/src/_includes/components/navigation.html b/docs/src/_includes/components/navigation.html
index 89fc2c80f58..f93709aa3a9 100644
--- a/docs/src/_includes/components/navigation.html
+++ b/docs/src/_includes/components/navigation.html
@@ -22,19 +22,4 @@
             {% include 'components/nav-search.html' %}
         </div>
     </div>
-    <!-- <noscript>
-        <div class="docs-nav-panel" >
-            <ul id="nav-list">
-                {% for item in navigation.items %}
-                <li>
-                    <a href="{{ item.url }}" {% if item.text == 'Docs' %} aria-current="true"{% endif %}>{{ item.text }}</a>
-                </li>
-                {% endfor %}
-            </ul>
-        <div class="mobile-only">
-            {% include 'components/nav-version-switcher-noscript.html' %}
-            {% include 'components/nav-search.html' %}
-        </div>
-    </div>
-    </noscript> -->
 </nav>

From 6ca670a3a37c2a3a5b4f48a3c29853ddb2987be7 Mon Sep 17 00:00:00 2001
From: "amaresh.sm" <amareshsm13@gmail.com>
Date: Sat, 28 May 2022 23:14:03 +0530
Subject: [PATCH 7/8] fix: use enhanced instead of noscript

---
 docs/src/_includes/components/nav-version-switcher.html | 6 +++---
 docs/src/_includes/components/version-switcher.html     | 6 +++---
 docs/src/_includes/layouts/base.njk                     | 7 +++++--
 docs/src/assets/css/styles.css                          | 4 ----
 docs/src/assets/scss/_utilities.scss                    | 4 ----
 5 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/docs/src/_includes/components/nav-version-switcher.html b/docs/src/_includes/components/nav-version-switcher.html
index 38c1ff55612..2f5c14f763c 100644
--- a/docs/src/_includes/components/nav-version-switcher.html
+++ b/docs/src/_includes/components/nav-version-switcher.html
@@ -1,7 +1,7 @@
 <div class="version-switcher">
-    <noscript>
-            <a href="/versions/" class="switcher-fallback">Versions</a>
-    </noscript> 
+
+    <a href="/versions/" class="switcher-fallback">Versions</a>
+
     <div  role="region" class="switcher switcher--version" aria-labelledby="nav-version-switcher-label" id="nav-version-switcher">
         <span id="nav-version-switcher-label" hidden>Language Switcher</span>
         <div class="infobox visually-hidden" id="nav-version-infobox">
diff --git a/docs/src/_includes/components/version-switcher.html b/docs/src/_includes/components/version-switcher.html
index 759ad2f8a1e..0c440e078fa 100644
--- a/docs/src/_includes/components/version-switcher.html
+++ b/docs/src/_includes/components/version-switcher.html
@@ -1,7 +1,7 @@
 <div class="version-switcher">
-    <noscript>
-        <a href="/versions/" class="switcher-fallback">Versions</a>
-    </noscript>
+    
+    <a href="/versions/" class="switcher-fallback">Versions</a>
+
     <div role="region" class="switcher switcher--version" aria-labelledby="version-switcher-label"
         id="version-switcher">
         <span id="version-switcher-label" hidden>Version Switcher</span>
diff --git a/docs/src/_includes/layouts/base.njk b/docs/src/_includes/layouts/base.njk
index a8dd0862ec9..808e685974e 100644
--- a/docs/src/_includes/layouts/base.njk
+++ b/docs/src/_includes/layouts/base.njk
@@ -41,15 +41,18 @@
     </script>
 
     <style>
+        .enhanced .switcher-fallback {
+            display: none !important 
+        }
         .no-js #js-docs-index-toggle, .no-js #nav-toggle, .no-js #version-switcher, .no-js #nav-version-switcher {
             display: none;
         }
         .no-js #js-docs-index-list {
             display: block !important
         }
-        .no-js #nav-panel{
+        .no-js #nav-panel {
             display:grid !important;
-            }
+        }
     </style>
 
     <link rel="preload" href="{{ '/assets/fonts/SpaceGrotesk-Medium-subset.woff2' | url }}" as="font" type="font/woff2" crossorigin>
diff --git a/docs/src/assets/css/styles.css b/docs/src/assets/css/styles.css
index 2e5669b08c9..7973f5d9503 100644
--- a/docs/src/assets/css/styles.css
+++ b/docs/src/assets/css/styles.css
@@ -2657,8 +2657,4 @@ a.rule__name:hover {
   grid-column: 5/9;
 }
 
-noscript {
-  display: grid;
-}
-
 /*# sourceMappingURL=styles.css.map */
diff --git a/docs/src/assets/scss/_utilities.scss b/docs/src/assets/scss/_utilities.scss
index 8455fa55da2..b79dac6a437 100644
--- a/docs/src/assets/scss/_utilities.scss
+++ b/docs/src/assets/scss/_utilities.scss
@@ -171,8 +171,4 @@
 
 .span-5-8 {
     grid-column: 5 / 9;
-}
-
-noscript{
-    display: grid;
 }
\ No newline at end of file

From 93ecd0e738f46d23a4016efaaa1ef8a74b318fca Mon Sep 17 00:00:00 2001
From: "amaresh.sm" <amareshsm13@gmail.com>
Date: Sun, 29 May 2022 19:29:29 +0530
Subject: [PATCH 8/8] fix: amend styles

---
 docs/src/_includes/layouts/base.njk                  | 6 ++++--
 docs/src/assets/css/components/docs-navigation.css   | 8 ++------
 docs/src/assets/css/styles.css                       | 6 ------
 docs/src/assets/scss/components/docs-navigation.scss | 8 --------
 4 files changed, 6 insertions(+), 22 deletions(-)

diff --git a/docs/src/_includes/layouts/base.njk b/docs/src/_includes/layouts/base.njk
index 808e685974e..97381d0a749 100644
--- a/docs/src/_includes/layouts/base.njk
+++ b/docs/src/_includes/layouts/base.njk
@@ -50,8 +50,10 @@
         .no-js #js-docs-index-list {
             display: block !important
         }
-        .no-js #nav-panel {
-            display:grid !important;
+        @media all and (max-width: 1023px) {
+            .no-js #nav-panel {
+                display: block !important;
+            } 
         }
     </style>
 
diff --git a/docs/src/assets/css/components/docs-navigation.css b/docs/src/assets/css/components/docs-navigation.css
index b1ca77a4999..106547d9e62 100644
--- a/docs/src/assets/css/components/docs-navigation.css
+++ b/docs/src/assets/css/components/docs-navigation.css
@@ -97,12 +97,6 @@
   }
 }
 
-@media all and (min-width: 1023px) {
-  .docs-nav-panel .mobile-only {
-    display: none;
-  }
-}
-
 .docs-site-nav-toggle {
   cursor: pointer;
   display: inline-flex;
@@ -161,3 +155,5 @@
     order: 1;
   }
 }
+
+/*# sourceMappingURL=docs-navigation.css.map */
diff --git a/docs/src/assets/css/styles.css b/docs/src/assets/css/styles.css
index 7973f5d9503..08e1d0c6cf8 100644
--- a/docs/src/assets/css/styles.css
+++ b/docs/src/assets/css/styles.css
@@ -1325,12 +1325,6 @@ a.c-btn {
   }
 }
 
-@media all and (min-width: 1023px) {
-  .docs-nav-panel .mobile-only {
-    display: none;
-  }
-}
-
 .docs-site-nav-toggle {
   cursor: pointer;
   display: inline-flex;
diff --git a/docs/src/assets/scss/components/docs-navigation.scss b/docs/src/assets/scss/components/docs-navigation.scss
index 68e105dc4af..5ecb80884ce 100644
--- a/docs/src/assets/scss/components/docs-navigation.scss
+++ b/docs/src/assets/scss/components/docs-navigation.scss
@@ -101,20 +101,12 @@
     }
 }
 
-
-
 #nav-toggle{
     @media all and (min-width: 1024px) {
         display: none;
     }
 }
 
-.docs-nav-panel .mobile-only {
-    @media all and (min-width: 1023px) {
-        display: none;
-    }
-}
-
 .docs-site-nav-toggle {
     cursor: pointer;
     display: inline-flex;