From afe7188b44c1bb967d801a86d2368c5932ae48c1 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <jamesnw@gmail.com>
Date: Tue, 28 Nov 2023 11:53:12 -0500
Subject: [PATCH 01/29] Add implementation warning for browsers

---
 .../colors/ImplementationWarning.svelte       | 26 +++++++++++++++++++
 src/lib/components/colors/index.svelte        |  2 ++
 2 files changed, 28 insertions(+)
 create mode 100644 src/lib/components/colors/ImplementationWarning.svelte

diff --git a/src/lib/components/colors/ImplementationWarning.svelte b/src/lib/components/colors/ImplementationWarning.svelte
new file mode 100644
index 00000000..59b7d261
--- /dev/null
+++ b/src/lib/components/colors/ImplementationWarning.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import ExternalLink from '$lib/components/util/ExternalLink.svelte';
+  import type { ColorFormatId } from '$lib/constants';
+  export let format: ColorFormatId;
+  import Icon from '$lib/components/util/Icon.svelte';
+  import { ColorSpace } from '$lib/stores';
+  import { getSpaceFromFormatId } from '$lib/utils';
+
+  $: targetSpace = getSpaceFromFormatId(format);
+  $: spaceObject = ColorSpace.get(targetSpace);
+  // TODO: Can be replaced with spaceObject.isUnbounded in next version of
+  // Color.js.
+  $: isUnbounded = Object.values(spaceObject.coords).every(
+    (coord) => !('range' in coord),
+  );
+</script>
+
+{#if isUnbounded}
+  <span data-color-info="warning"
+    ><Icon name="warning" /> Browser rendering of
+    {spaceObject.name} for colors outside of the display gamut is incorrect
+    <ExternalLink href="https://github.com/w3c/csswg-drafts/issues/9449">
+      according to the CSS specification.</ExternalLink
+    >
+  </span>
+{/if}
diff --git a/src/lib/components/colors/index.svelte b/src/lib/components/colors/index.svelte
index e666ed02..e2f81486 100644
--- a/src/lib/components/colors/index.svelte
+++ b/src/lib/components/colors/index.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import Formats from '$lib/components/colors/Formats.svelte';
   import Header from '$lib/components/colors/Header.svelte';
+  import ImplementationWarning from '$lib/components/colors/ImplementationWarning.svelte';
   import Sliders from '$lib/components/colors/Sliders.svelte';
   import SupportWarning from '$lib/components/colors/SupportWarning.svelte';
   import { bg, fg, format } from '$lib/stores';
@@ -9,6 +10,7 @@
 <h2 class="sr-only">Check the contrast ratio between two colors</h2>
 
 <SupportWarning format={$format} />
+<ImplementationWarning format={$format} />
 
 <form data-form="contrast-checker" data-layout="color-form">
   <Header type="bg" color={bg} format={$format} />

From c046929c36d5aef3930d7a6675bd33d4534daf02 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <jamesnw@gmail.com>
Date: Wed, 29 Nov 2023 12:48:35 -0500
Subject: [PATCH 02/29] Remove color space name from Implementation Warning

---
 src/lib/components/colors/ImplementationWarning.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/colors/ImplementationWarning.svelte b/src/lib/components/colors/ImplementationWarning.svelte
index 59b7d261..e177f1d9 100644
--- a/src/lib/components/colors/ImplementationWarning.svelte
+++ b/src/lib/components/colors/ImplementationWarning.svelte
@@ -17,8 +17,8 @@
 
 {#if isUnbounded}
   <span data-color-info="warning"
-    ><Icon name="warning" /> Browser rendering of
-    {spaceObject.name} for colors outside of the display gamut is incorrect
+    ><Icon name="warning" /> Browser rendering for colors outside of the display
+    gamut is incorrect
     <ExternalLink href="https://github.com/w3c/csswg-drafts/issues/9449">
       according to the CSS specification.</ExternalLink
     >

From 0277cdfb4ec118eb62e08fb8399cf220db4c55fb Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Wed, 29 Nov 2023 14:54:48 -0500
Subject: [PATCH 03/29] Default to P3

---
 src/lib/components/colors/ImplementationWarning.svelte | 5 +++--
 src/lib/stores.ts                                      | 6 +++---
 test/js/lib/components/SpaceSelect.spec.ts             | 6 +++---
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/colors/ImplementationWarning.svelte b/src/lib/components/colors/ImplementationWarning.svelte
index e177f1d9..77ac8b21 100644
--- a/src/lib/components/colors/ImplementationWarning.svelte
+++ b/src/lib/components/colors/ImplementationWarning.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
   import ExternalLink from '$lib/components/util/ExternalLink.svelte';
-  import type { ColorFormatId } from '$lib/constants';
-  export let format: ColorFormatId;
   import Icon from '$lib/components/util/Icon.svelte';
+  import type { ColorFormatId } from '$lib/constants';
   import { ColorSpace } from '$lib/stores';
   import { getSpaceFromFormatId } from '$lib/utils';
 
+  export let format: ColorFormatId;
+
   $: targetSpace = getSpaceFromFormatId(format);
   $: spaceObject = ColorSpace.get(targetSpace);
   // TODO: Can be replaced with spaceObject.isUnbounded in next version of
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
index bdfcdeaa..4ab1b3d1 100644
--- a/src/lib/stores.ts
+++ b/src/lib/stores.ts
@@ -31,9 +31,9 @@ ColorSpace.register(REC_2020);
 export { ColorSpace };
 
 export const INITIAL_VALUES = {
-  format: 'oklch' as ColorFormatId,
-  bg_coord: [0.3259, 0.1333, 265.49] as [number, number, number],
-  fg_coord: [0.8241, 0.1061, 0.8587] as [number, number, number],
+  format: 'p3' as ColorFormatId,
+  bg_coord: [0.0967, 0.167, 0.4494] as [number, number, number],
+  fg_coord: [0.951, 0.675, 0.7569] as [number, number, number],
   alpha: 1,
 };
 
diff --git a/test/js/lib/components/SpaceSelect.spec.ts b/test/js/lib/components/SpaceSelect.spec.ts
index f4ae511e..8979bc3e 100644
--- a/test/js/lib/components/SpaceSelect.spec.ts
+++ b/test/js/lib/components/SpaceSelect.spec.ts
@@ -2,7 +2,7 @@ import { fireEvent, render } from '@testing-library/svelte';
 import { get } from 'svelte/store';
 
 import Space from '$lib/components/SpaceSelect.svelte';
-import { bg, fg, reset } from '$lib/stores';
+import { bg, fg, INITIAL_VALUES, reset } from '$lib/stores';
 
 describe('Space', () => {
   afterEach(() => {
@@ -12,8 +12,8 @@ describe('Space', () => {
   it('renders editable space select', async () => {
     const { getByLabelText } = render(Space);
 
-    expect(get(bg).space.id).toBe('oklch');
-    expect(get(fg).space.id).toBe('oklch');
+    expect(get(bg).space.id).toBe(INITIAL_VALUES.format);
+    expect(get(fg).space.id).toBe(INITIAL_VALUES.format);
 
     const select = getByLabelText('Color Format');
     await fireEvent.change(select, { target: { value: 'hsl' } });

From 30a7bbabcb32cb70c39faeafe30ee2b8ae397607 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <jamesnw@gmail.com>
Date: Thu, 30 Nov 2023 12:21:21 -0500
Subject: [PATCH 04/29] Add color issues section

---
 src/lib/components/ratio/ColorIssues.svelte | 54 +++++++++++++++++++++
 src/lib/components/ratio/index.svelte       |  3 ++
 2 files changed, 57 insertions(+)
 create mode 100644 src/lib/components/ratio/ColorIssues.svelte

diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
new file mode 100644
index 00000000..cb15db02
--- /dev/null
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  import { RATIOS } from '$lib/constants';
+
+  import ExternalLink from '../util/ExternalLink.svelte';
+
+  export let ratio: number;
+
+  $: pass = ratio >= RATIOS['AA']['Normal'];
+
+  let startOpen = false;
+  onMount(() => {
+    startOpen = window.matchMedia('(min-width: 80em)').matches;
+  });
+</script>
+
+<details open={startOpen} data-pass={pass}>
+  <summary>Known Color Issues</summary>
+  <dl>
+    <dt>Gamut Mapping implementation</dt>
+    <dd>
+      Browsers implemented gamut mapping using clipping, which is fast but
+      provides inferior results to the algorithm defined in the <ExternalLink
+        href="https://drafts.csswg.org/css-color/#binsearch"
+        >CSS Spec</ExternalLink
+      >. Until browsers are updated, colors that are out of gamut for your
+      screen may be displayed very differently than expected.
+    </dd>
+  </dl>
+</details>
+
+<style lang="scss">
+  // Overrides the pattern from _lists
+  dl {
+    display: block;
+  }
+  dt {
+    font-weight: bold;
+  }
+  dd {
+    margin-inline-start: 0;
+  }
+  summary {
+    font-weight: bold;
+    list-style-position: outside;
+  }
+  details {
+    background-color: var(--status-result-bg, var(--bgcolor));
+    border-radius: var(--border-radius);
+    color: var(--status-result-fg, var(--fgcolor));
+    padding: var(--double-gutter);
+  }
+</style>
diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte
index 953f01ae..df00395e 100644
--- a/src/lib/components/ratio/index.svelte
+++ b/src/lib/components/ratio/index.svelte
@@ -6,6 +6,8 @@
   import { RATIOS } from '$lib/constants';
   import { bg, fg } from '$lib/stores';
 
+  import ColorIssues from './ColorIssues.svelte';
+
   $: ratio = contrast($bg, $fg, 'WCAG21');
   $: displayRatio = Math.round((ratio + Number.EPSILON) * 100) / 100;
   $: pass = ratio >= RATIOS.AA.Large;
@@ -65,6 +67,7 @@
       <dd>Bold Weight</dd>
     </dl>
   </div>
+  <ColorIssues {ratio} />
 </aside>
 
 <style lang="scss">

From af6b86db0f0c734ae876a45aabfbaf12b59c3e43 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Thu, 30 Nov 2023 15:51:15 -0500
Subject: [PATCH 05/29] review

---
 src/lib/components/ratio/ColorIssues.svelte | 12 ++++--------
 src/lib/components/ratio/index.svelte       |  5 ++---
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index cb15db02..e1a570e2 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -1,13 +1,9 @@
 <script lang="ts">
   import { onMount } from 'svelte';
 
-  import { RATIOS } from '$lib/constants';
+  import ExternalLink from '$lib/components/util/ExternalLink.svelte';
 
-  import ExternalLink from '../util/ExternalLink.svelte';
-
-  export let ratio: number;
-
-  $: pass = ratio >= RATIOS['AA']['Normal'];
+  export let pass: boolean;
 
   let startOpen = false;
   onMount(() => {
@@ -18,10 +14,10 @@
 <details open={startOpen} data-pass={pass}>
   <summary>Known Color Issues</summary>
   <dl>
-    <dt>Gamut Mapping implementation</dt>
+    <dt>Gamut Mapping Implementation</dt>
     <dd>
       Browsers implemented gamut mapping using clipping, which is fast but
-      provides inferior results to the algorithm defined in the <ExternalLink
+      provides inferior results compared to the algorithm defined in the <ExternalLink
         href="https://drafts.csswg.org/css-color/#binsearch"
         >CSS Spec</ExternalLink
       >. Until browsers are updated, colors that are out of gamut for your
diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte
index df00395e..8540c5e5 100644
--- a/src/lib/components/ratio/index.svelte
+++ b/src/lib/components/ratio/index.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
   import { contrast } from 'colorjs.io/fn';
 
+  import ColorIssues from '$lib/components/ratio/ColorIssues.svelte';
   import Result from '$lib/components/ratio/Result.svelte';
   import ExternalLink from '$lib/components/util/ExternalLink.svelte';
   import { RATIOS } from '$lib/constants';
   import { bg, fg } from '$lib/stores';
 
-  import ColorIssues from './ColorIssues.svelte';
-
   $: ratio = contrast($bg, $fg, 'WCAG21');
   $: displayRatio = Math.round((ratio + Number.EPSILON) * 100) / 100;
   $: pass = ratio >= RATIOS.AA.Large;
@@ -67,7 +66,7 @@
       <dd>Bold Weight</dd>
     </dl>
   </div>
-  <ColorIssues {ratio} />
+  <ColorIssues {pass} />
 </aside>
 
 <style lang="scss">

From f41ecf06f7417d67bf7c77680fdcc2e870def703 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Thu, 30 Nov 2023 16:03:18 -0500
Subject: [PATCH 06/29] Use AA normal for ratio background

---
 src/lib/components/ratio/index.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte
index 8540c5e5..f6155f07 100644
--- a/src/lib/components/ratio/index.svelte
+++ b/src/lib/components/ratio/index.svelte
@@ -9,7 +9,7 @@
 
   $: ratio = contrast($bg, $fg, 'WCAG21');
   $: displayRatio = Math.round((ratio + Number.EPSILON) * 100) / 100;
-  $: pass = ratio >= RATIOS.AA.Large;
+  $: pass = ratio >= RATIOS.AA.Normal;
 </script>
 
 <aside data-layout="results">

From 0ac29162610870dbbe25aefef8681cf73cf1f572 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <jamesnw@gmail.com>
Date: Tue, 12 Dec 2023 16:44:51 -0500
Subject: [PATCH 07/29] Remove implementation warning

---
 .../colors/ImplementationWarning.svelte       | 27 -------------------
 src/lib/components/colors/index.svelte        |  2 --
 2 files changed, 29 deletions(-)
 delete mode 100644 src/lib/components/colors/ImplementationWarning.svelte

diff --git a/src/lib/components/colors/ImplementationWarning.svelte b/src/lib/components/colors/ImplementationWarning.svelte
deleted file mode 100644
index 77ac8b21..00000000
--- a/src/lib/components/colors/ImplementationWarning.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-  import ExternalLink from '$lib/components/util/ExternalLink.svelte';
-  import Icon from '$lib/components/util/Icon.svelte';
-  import type { ColorFormatId } from '$lib/constants';
-  import { ColorSpace } from '$lib/stores';
-  import { getSpaceFromFormatId } from '$lib/utils';
-
-  export let format: ColorFormatId;
-
-  $: targetSpace = getSpaceFromFormatId(format);
-  $: spaceObject = ColorSpace.get(targetSpace);
-  // TODO: Can be replaced with spaceObject.isUnbounded in next version of
-  // Color.js.
-  $: isUnbounded = Object.values(spaceObject.coords).every(
-    (coord) => !('range' in coord),
-  );
-</script>
-
-{#if isUnbounded}
-  <span data-color-info="warning"
-    ><Icon name="warning" /> Browser rendering for colors outside of the display
-    gamut is incorrect
-    <ExternalLink href="https://github.com/w3c/csswg-drafts/issues/9449">
-      according to the CSS specification.</ExternalLink
-    >
-  </span>
-{/if}
diff --git a/src/lib/components/colors/index.svelte b/src/lib/components/colors/index.svelte
index e2f81486..e666ed02 100644
--- a/src/lib/components/colors/index.svelte
+++ b/src/lib/components/colors/index.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import Formats from '$lib/components/colors/Formats.svelte';
   import Header from '$lib/components/colors/Header.svelte';
-  import ImplementationWarning from '$lib/components/colors/ImplementationWarning.svelte';
   import Sliders from '$lib/components/colors/Sliders.svelte';
   import SupportWarning from '$lib/components/colors/SupportWarning.svelte';
   import { bg, fg, format } from '$lib/stores';
@@ -10,7 +9,6 @@
 <h2 class="sr-only">Check the contrast ratio between two colors</h2>
 
 <SupportWarning format={$format} />
-<ImplementationWarning format={$format} />
 
 <form data-form="contrast-checker" data-layout="color-form">
   <Header type="bg" color={bg} format={$format} />

From 794feaf509423fbc7462e4daece504907e7c347e Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <jamesnw@gmail.com>
Date: Wed, 13 Dec 2023 11:53:43 -0500
Subject: [PATCH 08/29] Add info regarding out of gamut colors

---
 src/lib/components/ratio/ColorIssues.svelte | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index e1a570e2..8764ae23 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -23,6 +23,27 @@
       >. Until browsers are updated, colors that are out of gamut for your
       screen may be displayed very differently than expected.
     </dd>
+    <dt>Checking for Out of Gamut colors</dt>
+    <dd>
+      The new color features in CSS now allow for a much wider range of colors,
+      many of which can not be shown on many (or any) screens. When selecting
+      colors, consider that most users will see these colors on a display that
+      supports the <code>sRGB</code> or <code>P3</code> gamut.There are 2
+      primary ways you can get out of gamut-
+      <ol>
+        <li>
+          Choosing a color in a space with a wider gamut, especially when a
+          channel is near one of the edges of its range.
+        </li>
+        <li>
+          Specifying a channel value that is outside its range. While the
+          sliders in this tool set hard boundaries, values outside these
+          boundaries are still valid, and can be entered in the text input.
+        </li>
+      </ol>
+      When a color is out of gamut for the user's screen, the browser will adjust
+      the color to be in gamut.
+    </dd>
   </dl>
 </details>
 

From c69b106048ad85488622f4055109778bdb9d075d Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Wed, 13 Dec 2023 15:44:45 -0500
Subject: [PATCH 09/29] Apply suggestions from code review

Co-authored-by: david herron <41588129+dvdherron@users.noreply.github.com>
---
 src/lib/components/ratio/ColorIssues.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index 8764ae23..dfa6879a 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -23,13 +23,13 @@
       >. Until browsers are updated, colors that are out of gamut for your
       screen may be displayed very differently than expected.
     </dd>
-    <dt>Checking for Out of Gamut colors</dt>
+    <dt>Checking for Out of Gamut Colors</dt>
     <dd>
       The new color features in CSS now allow for a much wider range of colors,
       many of which can not be shown on many (or any) screens. When selecting
       colors, consider that most users will see these colors on a display that
       supports the <code>sRGB</code> or <code>P3</code> gamut.There are 2
-      primary ways you can get out of gamut-
+      primary ways you can get out of gamut:
       <ol>
         <li>
           Choosing a color in a space with a wider gamut, especially when a

From 3170b673facd9d4191c0d0731dd8c270ecdcc3db Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <jamesnw@gmail.com>
Date: Wed, 13 Dec 2023 15:52:47 -0500
Subject: [PATCH 10/29] Paragraphify

---
 src/lib/components/ratio/ColorIssues.svelte | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index dfa6879a..80ae952a 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -25,11 +25,13 @@
     </dd>
     <dt>Checking for Out of Gamut Colors</dt>
     <dd>
-      The new color features in CSS now allow for a much wider range of colors,
-      many of which can not be shown on many (or any) screens. When selecting
-      colors, consider that most users will see these colors on a display that
-      supports the <code>sRGB</code> or <code>P3</code> gamut.There are 2
-      primary ways you can get out of gamut:
+      <p>
+        The new color features in CSS now allow for a much wider range of
+        colors, many of which can not be shown on many (or any) screens. When
+        selecting colors, consider that most users will see these colors on a
+        display that supports the <code>sRGB</code> or <code>P3</code> gamut.
+      </p>
+      <p>There are 2 primary ways you can get out of gamut:</p>
       <ol>
         <li>
           Choosing a color in a space with a wider gamut, especially when a
@@ -41,8 +43,10 @@
           boundaries are still valid, and can be entered in the text input.
         </li>
       </ol>
-      When a color is out of gamut for the user's screen, the browser will adjust
-      the color to be in gamut.
+      <p>
+        When a color is out of gamut for the user's screen, the browser will
+        adjust the color to be in gamut.
+      </p>
     </dd>
   </dl>
 </details>

From 77da14088fa9650daafc0a5e48b4b2d5d4a9575d Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Wed, 13 Dec 2023 17:16:16 -0500
Subject: [PATCH 11/29] copy edit

---
 src/lib/components/ratio/ColorIssues.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index 80ae952a..1a4e0c0d 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -31,7 +31,7 @@
         selecting colors, consider that most users will see these colors on a
         display that supports the <code>sRGB</code> or <code>P3</code> gamut.
       </p>
-      <p>There are 2 primary ways you can get out of gamut:</p>
+      <p>There are two primary ways a color can be out of gamut:</p>
       <ol>
         <li>
           Choosing a color in a space with a wider gamut, especially when a

From bc2b45b42f51e50cd53091f4a4387f92949e01c8 Mon Sep 17 00:00:00 2001
From: dvdherron <dvdherron@gmail.com>
Date: Mon, 18 Dec 2023 12:45:14 +0100
Subject: [PATCH 12/29] start cleaning up color issues component styles

---
 src/lib/components/ratio/ColorIssues.svelte | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index e1a570e2..a5f7709a 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -12,9 +12,9 @@
 </script>
 
 <details open={startOpen} data-pass={pass}>
-  <summary>Known Color Issues</summary>
+  <summary><strong>Known Color Issues</strong></summary>
   <dl>
-    <dt>Gamut Mapping Implementation</dt>
+    <dt><strong>Gamut Mapping Implementation</strong></dt>
     <dd>
       Browsers implemented gamut mapping using clipping, which is fast but
       provides inferior results compared to the algorithm defined in the <ExternalLink
@@ -28,17 +28,17 @@
 
 <style lang="scss">
   // Overrides the pattern from _lists
+  summary {
+    cursor: pointer;
+    margin-block-end: var(--gutter);
+  }
   dl {
     display: block;
   }
-  dt {
-    font-weight: bold;
-  }
   dd {
     margin-inline-start: 0;
   }
   summary {
-    font-weight: bold;
     list-style-position: outside;
   }
   details {

From d0ef9254e28b3a72b604f9a2b1d4cc7eacebee70 Mon Sep 17 00:00:00 2001
From: dvdherron <dvdherron@gmail.com>
Date: Mon, 18 Dec 2023 12:50:27 +0100
Subject: [PATCH 13/29] put description text in paragraph

---
 src/lib/components/ratio/ColorIssues.svelte | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index a5f7709a..ef278661 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -16,12 +16,14 @@
   <dl>
     <dt><strong>Gamut Mapping Implementation</strong></dt>
     <dd>
-      Browsers implemented gamut mapping using clipping, which is fast but
-      provides inferior results compared to the algorithm defined in the <ExternalLink
-        href="https://drafts.csswg.org/css-color/#binsearch"
-        >CSS Spec</ExternalLink
-      >. Until browsers are updated, colors that are out of gamut for your
-      screen may be displayed very differently than expected.
+      <p>
+        Browsers implemented gamut mapping using clipping, which is fast but
+        provides inferior results compared to the algorithm defined in the <ExternalLink
+          href="https://drafts.csswg.org/css-color/#binsearch"
+          >CSS Spec</ExternalLink
+        >. Until browsers are updated, colors that are out of gamut for your
+        screen may be displayed very differently than expected.
+      </p>
     </dd>
   </dl>
 </details>

From bc58670347a8c589f34423283ab9063b5f0108fc Mon Sep 17 00:00:00 2001
From: dvdherron <dvdherron@gmail.com>
Date: Mon, 18 Dec 2023 13:12:27 +0100
Subject: [PATCH 14/29] make link styles consistent

---
 src/lib/components/colors/SupportWarning.svelte |  4 ++--
 src/lib/components/ratio/ColorIssues.svelte     |  6 ------
 src/lib/components/ratio/index.svelte           |  4 ++--
 src/sass/patterns/_lists.scss                   | 10 ++++++++++
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/colors/SupportWarning.svelte b/src/lib/components/colors/SupportWarning.svelte
index 83ad9f11..c6be201f 100644
--- a/src/lib/components/colors/SupportWarning.svelte
+++ b/src/lib/components/colors/SupportWarning.svelte
@@ -26,7 +26,7 @@
     <ExternalLink
       href="https://caniuse.com/css-lch-lab,mdn-css_types_color_hsl,mdn-css_types_color_hsla,mdn-css_types_color_oklab,mdn-css_types_color_oklch,css-color-function"
     >
-      not supported by your current browser.</ExternalLink
-    >
+      not supported by your current browser</ExternalLink
+    >.
   </span>
 {/if}
diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index ef278661..0b2b9ce2 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -43,10 +43,4 @@
   summary {
     list-style-position: outside;
   }
-  details {
-    background-color: var(--status-result-bg, var(--bgcolor));
-    border-radius: var(--border-radius);
-    color: var(--status-result-fg, var(--fgcolor));
-    padding: var(--double-gutter);
-  }
 </style>
diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte
index f6155f07..f9f7f501 100644
--- a/src/lib/components/ratio/index.svelte
+++ b/src/lib/components/ratio/index.svelte
@@ -25,8 +25,8 @@
       In WCAG 2, contrast is a measure of the difference in perceived brightness
       between two colors, expressed as a ratio. <ExternalLink
         href="https://webaim.org/articles/contrast/#ratio"
-        >Learn more about contrast ratio requirements.</ExternalLink
-      >
+        >Learn more about contrast ratio requirements</ExternalLink
+      >.
     </p>
   </div>
 
diff --git a/src/sass/patterns/_lists.scss b/src/sass/patterns/_lists.scss
index 0cd64dc3..5e921afa 100644
--- a/src/sass/patterns/_lists.scss
+++ b/src/sass/patterns/_lists.scss
@@ -14,6 +14,16 @@ li {
   gap: var(--gutter);
 }
 
+details {
+  --link: var(--fgcolor);
+  --link-focus: var(--fgcolor);
+
+  background-color: var(--status-result-bg, var(--bgcolor));
+  border-radius: var(--border-radius);
+  color: var(--status-result-fg, var(--fgcolor));
+  padding: var(--double-gutter);
+}
+
 dl {
   display: grid;
   grid-template-columns: auto 1fr;

From 13ae3bdc0a1eca46c714d1e29f844a4464a2d4ca Mon Sep 17 00:00:00 2001
From: dvdherron <dvdherron@gmail.com>
Date: Mon, 18 Dec 2023 14:49:17 +0100
Subject: [PATCH 15/29] relocate some styles to lists.scss

---
 src/lib/components/ratio/ColorIssues.svelte | 10 +---------
 src/sass/patterns/_lists.scss               |  9 +++++++--
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index 0b2b9ce2..655bdee5 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -29,18 +29,10 @@
 </details>
 
 <style lang="scss">
-  // Overrides the pattern from _lists
-  summary {
-    cursor: pointer;
-    margin-block-end: var(--gutter);
-  }
   dl {
     display: block;
   }
   dd {
-    margin-inline-start: 0;
-  }
-  summary {
-    list-style-position: outside;
+    --description-margin-inline: 0;
   }
 </style>
diff --git a/src/sass/patterns/_lists.scss b/src/sass/patterns/_lists.scss
index 5e921afa..ebeff9f1 100644
--- a/src/sass/patterns/_lists.scss
+++ b/src/sass/patterns/_lists.scss
@@ -21,7 +21,12 @@ details {
   background-color: var(--status-result-bg, var(--bgcolor));
   border-radius: var(--border-radius);
   color: var(--status-result-fg, var(--fgcolor));
-  padding: var(--double-gutter);
+}
+
+summary {
+  cursor: pointer;
+  list-style-position: outside;
+  margin-block-end: var(--gutter);
 }
 
 dl {
@@ -31,5 +36,5 @@ dl {
 }
 
 dd {
-  margin-inline-start: var(--gutter);
+  margin-inline-start: var(--description-margin-inline, var(--gutter));
 }

From ea54c127a7537b9295ad025ed58dda8585bc31ce Mon Sep 17 00:00:00 2001
From: dvdherron <dvdherron@gmail.com>
Date: Mon, 18 Dec 2023 15:44:00 +0100
Subject: [PATCH 16/29] adjust grid for color issues

---
 src/lib/components/ratio/ColorIssues.svelte | 19 +++++++++++++++----
 src/lib/components/ratio/index.svelte       |  8 ++++++--
 src/sass/patterns/_lists.scss               |  1 -
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index 655bdee5..99d53b5d 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -11,9 +11,9 @@
   });
 </script>
 
-<details open={startOpen} data-pass={pass}>
+<details class="known-issues" open={startOpen} data-pass={pass}>
   <summary><strong>Known Color Issues</strong></summary>
-  <dl>
+  <dl class="issues-list">
     <dt><strong>Gamut Mapping Implementation</strong></dt>
     <dd>
       <p>
@@ -29,10 +29,21 @@
 </details>
 
 <style lang="scss">
-  dl {
-    display: block;
+  .known-issues {
+    grid-area: knownissues;
+    padding: var(--shim) var(--double-gutter);
+  }
+  .issues-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-auto-rows: auto;
+    gap: var(--gutter);
   }
   dd {
     --description-margin-inline: 0;
   }
+
+  p {
+    margin-block-end: var(--gutter);
+  }
 </style>
diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte
index f9f7f501..f7e68b92 100644
--- a/src/lib/components/ratio/index.svelte
+++ b/src/lib/components/ratio/index.svelte
@@ -79,11 +79,15 @@
     gap: var(--result-layout-gap, var(--double-gutter));
     grid-template:
       'contrastinfo' min-content
-      'status' min-content / 1fr;
+      'status' min-content
+      'contrastdefined' min-content
+      'knownissues' min-content / 1fr;
 
     @include config.between('sm-page-break', 'lg-page-break') {
       --result-layout-gap: var(--gutter-plus);
-      grid-template: 'contrastinfo status' auto / 1fr 1fr;
+      grid-template:
+        'contrastinfo status' auto
+        '... knownissues' auto / 1fr 1fr;
     }
 
     @include config.above('lg-page-break') {
diff --git a/src/sass/patterns/_lists.scss b/src/sass/patterns/_lists.scss
index ebeff9f1..987ac115 100644
--- a/src/sass/patterns/_lists.scss
+++ b/src/sass/patterns/_lists.scss
@@ -26,7 +26,6 @@ details {
 summary {
   cursor: pointer;
   list-style-position: outside;
-  margin-block-end: var(--gutter);
 }
 
 dl {

From 6942eec756f1124331eb90e37ca83c3d8fd6ecbf Mon Sep 17 00:00:00 2001
From: dvdherron <dvdherron@gmail.com>
Date: Mon, 18 Dec 2023 15:51:18 +0100
Subject: [PATCH 17/29] alpha order

---
 src/lib/components/ratio/ColorIssues.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index 99d53b5d..be7dfa33 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -35,9 +35,9 @@
   }
   .issues-list {
     display: grid;
-    grid-template-columns: 1fr;
-    grid-auto-rows: auto;
     gap: var(--gutter);
+    grid-auto-rows: auto;
+    grid-template-columns: 1fr;
   }
   dd {
     --description-margin-inline: 0;

From b7777cd24bb4bc35390904fac6e69af481c0a209 Mon Sep 17 00:00:00 2001
From: dvdherron <dvdherron@gmail.com>
Date: Mon, 18 Dec 2023 16:09:50 +0100
Subject: [PATCH 18/29] strong to bold

---
 src/lib/components/ratio/ColorIssues.svelte | 8 ++++++--
 src/sass/patterns/_lists.scss               | 1 +
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index be7dfa33..fc100ea9 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -12,9 +12,9 @@
 </script>
 
 <details class="known-issues" open={startOpen} data-pass={pass}>
-  <summary><strong>Known Color Issues</strong></summary>
+  <summary>Known Color Issues</summary>
   <dl class="issues-list">
-    <dt><strong>Gamut Mapping Implementation</strong></dt>
+    <dt>Gamut Mapping Implementation</dt>
     <dd>
       <p>
         Browsers implemented gamut mapping using clipping, which is fast but
@@ -39,6 +39,10 @@
     grid-auto-rows: auto;
     grid-template-columns: 1fr;
   }
+
+  dt {
+    font-weight: bold;
+  }
   dd {
     --description-margin-inline: 0;
   }
diff --git a/src/sass/patterns/_lists.scss b/src/sass/patterns/_lists.scss
index 987ac115..d23b40c7 100644
--- a/src/sass/patterns/_lists.scss
+++ b/src/sass/patterns/_lists.scss
@@ -25,6 +25,7 @@ details {
 
 summary {
   cursor: pointer;
+  font-weight: bold;
   list-style-position: outside;
 }
 

From 88bac505d33a9425bb118819f7259268f88d985b Mon Sep 17 00:00:00 2001
From: dvdherron <dvdherron@gmail.com>
Date: Mon, 18 Dec 2023 16:22:29 +0100
Subject: [PATCH 19/29] adjust grid spacing

---
 src/sass/patterns/_lists.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sass/patterns/_lists.scss b/src/sass/patterns/_lists.scss
index d23b40c7..fc1443d6 100644
--- a/src/sass/patterns/_lists.scss
+++ b/src/sass/patterns/_lists.scss
@@ -11,7 +11,7 @@ li {
 [data-list='inline'] {
   align-items: center;
   display: flex;
-  gap: var(--gutter);
+  gap: var(--shim);
 }
 
 details {

From 2ad6e3b1c3a5ec56c41d9d485d70b8d95ca74aa7 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Mon, 18 Dec 2023 15:19:57 -0500
Subject: [PATCH 20/29] copy edits from stacy

---
 src/lib/components/ratio/ColorIssues.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index 55cf61e6..62b49855 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -28,10 +28,10 @@
     <dt>Checking for Out of Gamut Colors</dt>
     <dd>
       <p>
-        The new color features in CSS now allow for a much wider range of
-        colors, many of which can not be shown on many (or any) screens. When
-        selecting colors, consider that most users will see these colors on a
-        display that supports the <code>sRGB</code> or <code>P3</code> gamut.
+        The new color features in CSS allow for a much wider range of colors,
+        many of which cannot be shown on many (or any) screens. When selecting
+        colors, consider that most users will see these colors on a display that
+        supports the <code>sRGB</code> or <code>P3</code> gamut.
       </p>
       <p>There are two primary ways a color can be out of gamut:</p>
       <ol>

From 72e099cb82200f7bf98680625eb19eb26f6c08bf Mon Sep 17 00:00:00 2001
From: dvdherron <dvdherron@gmail.com>
Date: Tue, 19 Dec 2023 14:40:14 +0100
Subject: [PATCH 21/29] review edits

---
 src/lib/components/ratio/ColorIssues.svelte | 31 +++++++++++++++++++--
 src/lib/components/ratio/index.svelte       |  2 +-
 src/sass/config/scale/_ui.scss              |  2 ++
 src/sass/patterns/_lists.scss               |  4 +++
 src/sass/patterns/_themes.scss              |  2 ++
 5 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index fc100ea9..fb2d561e 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -31,13 +31,40 @@
 <style lang="scss">
   .known-issues {
     grid-area: knownissues;
-    padding: var(--shim) var(--double-gutter);
+    margin-inline: calc(var(--gutter) * -1);
+    padding: var(--gutter);
+  }
+
+  summary {
+    align-items: center;
+    display: grid;
+    gap: var(--shim-plus);
+    grid-template-columns: max-content var(--triangle-height);
+    &::marker {
+      content: none;
+    }
+    &::before {
+      border-color: transparent transparent transparent currentColor;
+      border-style: solid;
+      border-width: var(--triangle-width) 0 var(--triangle-width)
+        var(--triangle-height);
+      content: '';
+      grid-column: 2;
+      grid-row: 1;
+      margin-top: var(--half-shim);
+      transform: rotate;
+    }
+  }
+
+  [open] summary::before {
+    transform: rotate(90deg);
   }
   .issues-list {
     display: grid;
-    gap: var(--gutter);
+    gap: var(--half-shim);
     grid-auto-rows: auto;
     grid-template-columns: 1fr;
+    margin-block-start: var(--gutter);
   }
 
   dt {
diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte
index f7e68b92..db8e1828 100644
--- a/src/lib/components/ratio/index.svelte
+++ b/src/lib/components/ratio/index.svelte
@@ -76,7 +76,7 @@
     background-color: var(--bgcolor);
     color: var(--fgcolor);
     display: grid;
-    gap: var(--result-layout-gap, var(--double-gutter));
+    gap: var(--result-layout-gap, var(--shim));
     grid-template:
       'contrastinfo' min-content
       'status' min-content
diff --git a/src/sass/config/scale/_ui.scss b/src/sass/config/scale/_ui.scss
index 0ce73c07..bc6de04c 100644
--- a/src/sass/config/scale/_ui.scss
+++ b/src/sass/config/scale/_ui.scss
@@ -15,3 +15,5 @@ $icon-medium: 1.5em;
 $ratio-width: 10rem;
 $range-thumb-size: 1.35rem;
 $range-input: 0.85rem;
+$triangle-width: var(--shim);
+$triangle-height: var(--shim-plus);
diff --git a/src/sass/patterns/_lists.scss b/src/sass/patterns/_lists.scss
index fc1443d6..6cc42edd 100644
--- a/src/sass/patterns/_lists.scss
+++ b/src/sass/patterns/_lists.scss
@@ -33,6 +33,10 @@ dl {
   display: grid;
   grid-template-columns: auto 1fr;
   margin-block: var(--half-shim) var(--double-gutter);
+
+  &:last-child {
+    margin-block-end: 0;
+  }
 }
 
 dd {
diff --git a/src/sass/patterns/_themes.scss b/src/sass/patterns/_themes.scss
index 4ab1d921..8a4862cc 100644
--- a/src/sass/patterns/_themes.scss
+++ b/src/sass/patterns/_themes.scss
@@ -5,6 +5,8 @@
 
 // If the ratio is too low, make sure important info has high enough contrast
 [data-pass='false'] {
+  --link: var(--status-result-fg);
+  --link-focus: var(--status-result-fg);
   --status-result-bg: var(--text);
   --status-result-fg: var(--bg);
 }

From bc04fb51cc34805a48459b8584999a3bc29614a3 Mon Sep 17 00:00:00 2001
From: dvdherron <dvdherron@gmail.com>
Date: Tue, 19 Dec 2023 14:41:51 +0100
Subject: [PATCH 22/29] remove unnecessary property

---
 src/sass/patterns/_lists.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/sass/patterns/_lists.scss b/src/sass/patterns/_lists.scss
index 6cc42edd..edd5bce5 100644
--- a/src/sass/patterns/_lists.scss
+++ b/src/sass/patterns/_lists.scss
@@ -26,7 +26,6 @@ details {
 summary {
   cursor: pointer;
   font-weight: bold;
-  list-style-position: outside;
 }
 
 dl {

From c18e25ecb23647722436c0cfee230525f166644d Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Thu, 21 Dec 2023 11:42:15 -0600
Subject: [PATCH 23/29] add animation

---
 src/lib/components/ratio/ColorIssues.svelte | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index f62640a9..a40abbe8 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -65,9 +65,11 @@
     display: grid;
     gap: var(--shim-plus);
     grid-template-columns: max-content var(--triangle-height);
+
     &::marker {
       content: none;
     }
+
     &::before {
       border-color: transparent transparent transparent currentColor;
       border-style: solid;
@@ -76,14 +78,16 @@
       content: '';
       grid-column: 2;
       grid-row: 1;
-      margin-top: var(--half-shim);
-      transform: rotate;
+      margin-block-start: var(--half-shim);
+      transform: rotate(0);
+      transition: transform 150ms;
     }
   }
 
   [open] summary::before {
     transform: rotate(90deg);
   }
+
   .issues-list {
     display: grid;
     gap: var(--half-shim);
@@ -95,6 +99,7 @@
   dt {
     font-weight: bold;
   }
+
   dd {
     --description-margin-inline: 0;
   }

From 5f35287ea0e1dff0ef5e94fb4e3482c87222705d Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Thu, 21 Dec 2023 17:50:29 -0600
Subject: [PATCH 24/29] move disclosure styles to it's own partial, add fix for
 safari double marker

---
 src/lib/components/ratio/ColorIssues.svelte | 21 -----------
 src/sass/patterns/_disclosure.scss          | 42 +++++++++++++++++++++
 src/sass/patterns/_index.scss               |  1 +
 src/sass/patterns/_lists.scss               | 13 -------
 4 files changed, 43 insertions(+), 34 deletions(-)
 create mode 100644 src/sass/patterns/_disclosure.scss

diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index a40abbe8..73817be8 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -65,27 +65,6 @@
     display: grid;
     gap: var(--shim-plus);
     grid-template-columns: max-content var(--triangle-height);
-
-    &::marker {
-      content: none;
-    }
-
-    &::before {
-      border-color: transparent transparent transparent currentColor;
-      border-style: solid;
-      border-width: var(--triangle-width) 0 var(--triangle-width)
-        var(--triangle-height);
-      content: '';
-      grid-column: 2;
-      grid-row: 1;
-      margin-block-start: var(--half-shim);
-      transform: rotate(0);
-      transition: transform 150ms;
-    }
-  }
-
-  [open] summary::before {
-    transform: rotate(90deg);
   }
 
   .issues-list {
diff --git a/src/sass/patterns/_disclosure.scss b/src/sass/patterns/_disclosure.scss
new file mode 100644
index 00000000..6dd18522
--- /dev/null
+++ b/src/sass/patterns/_disclosure.scss
@@ -0,0 +1,42 @@
+// The Details disclosure element
+// ------------------------------
+
+details {
+  --link: var(--fgcolor);
+  --link-focus: var(--fgcolor);
+
+  background-color: var(--status-result-bg, var(--bgcolor));
+  border-radius: var(--border-radius);
+  color: var(--status-result-fg, var(--fgcolor));
+}
+
+summary {
+  cursor: pointer;
+  font-weight: bold;
+
+  // Hides marker some browsers add
+  &::marker {
+    content: none;
+  }
+
+  // Hides marker webkit adds
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  &::before {
+    border-color: transparent transparent transparent currentColor;
+    border-style: solid;
+    border-width: var(--triangle-width) 0 var(--triangle-width)
+    var(--triangle-height);
+    content: '';
+    grid-column: 2;
+    grid-row: 1;
+    transform: rotate(0deg);
+    transition: all 1s ease-out 100ms;
+
+    [open] & {
+      transform: rotate(90deg);
+    }
+  }
+}
diff --git a/src/sass/patterns/_index.scss b/src/sass/patterns/_index.scss
index 85b59cbe..902cbf1a 100644
--- a/src/sass/patterns/_index.scss
+++ b/src/sass/patterns/_index.scss
@@ -7,4 +7,5 @@
 @forward 'buttons';
 @forward 'icons';
 @forward 'lists';
+@forward 'disclosure';
 @forward 'themes';
diff --git a/src/sass/patterns/_lists.scss b/src/sass/patterns/_lists.scss
index edd5bce5..50f91434 100644
--- a/src/sass/patterns/_lists.scss
+++ b/src/sass/patterns/_lists.scss
@@ -14,19 +14,6 @@ li {
   gap: var(--shim);
 }
 
-details {
-  --link: var(--fgcolor);
-  --link-focus: var(--fgcolor);
-
-  background-color: var(--status-result-bg, var(--bgcolor));
-  border-radius: var(--border-radius);
-  color: var(--status-result-fg, var(--fgcolor));
-}
-
-summary {
-  cursor: pointer;
-  font-weight: bold;
-}
 
 dl {
   display: grid;

From 94c675f9d2b8583499de97402fa4eaa4c9f5849f Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Sat, 23 Dec 2023 15:22:08 -0500
Subject: [PATCH 25/29] lint

---
 src/sass/patterns/_disclosure.scss | 4 ++--
 src/sass/patterns/_lists.scss      | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/sass/patterns/_disclosure.scss b/src/sass/patterns/_disclosure.scss
index 6dd18522..a2e92d3c 100644
--- a/src/sass/patterns/_disclosure.scss
+++ b/src/sass/patterns/_disclosure.scss
@@ -25,10 +25,10 @@ summary {
   }
 
   &::before {
-    border-color: transparent transparent transparent currentColor;
+    border-color: transparent transparent transparent currentcolor;
     border-style: solid;
     border-width: var(--triangle-width) 0 var(--triangle-width)
-    var(--triangle-height);
+      var(--triangle-height);
     content: '';
     grid-column: 2;
     grid-row: 1;
diff --git a/src/sass/patterns/_lists.scss b/src/sass/patterns/_lists.scss
index 50f91434..ede95def 100644
--- a/src/sass/patterns/_lists.scss
+++ b/src/sass/patterns/_lists.scss
@@ -14,7 +14,6 @@ li {
   gap: var(--shim);
 }
 
-
 dl {
   display: grid;
   grid-template-columns: auto 1fr;

From 6d725fa7325d4daf38061fe1bc4d3b2647ae21f9 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Mon, 8 Jan 2024 15:55:18 -0600
Subject: [PATCH 26/29] remove testing animation values

---
 src/sass/patterns/_disclosure.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sass/patterns/_disclosure.scss b/src/sass/patterns/_disclosure.scss
index a2e92d3c..4b4a13e9 100644
--- a/src/sass/patterns/_disclosure.scss
+++ b/src/sass/patterns/_disclosure.scss
@@ -33,7 +33,7 @@ summary {
     grid-column: 2;
     grid-row: 1;
     transform: rotate(0deg);
-    transition: all 1s ease-out 100ms;
+    transition: transform var(--fast);
 
     [open] & {
       transform: rotate(90deg);

From 137bc34bb979f43ec75d80bdffae557a912ac34b Mon Sep 17 00:00:00 2001
From: dvdherron <dvdherron@gmail.com>
Date: Tue, 9 Jan 2024 14:02:19 +0100
Subject: [PATCH 27/29] negative margin only on wide screens. fixes #158

---
 src/lib/components/ratio/ColorIssues.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index 73817be8..39af8e77 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -54,10 +54,14 @@
 </details>
 
 <style lang="scss">
+  @use 'config';
   .known-issues {
     grid-area: knownissues;
-    margin-inline: calc(var(--gutter) * -1);
     padding: var(--gutter);
+
+    @include config.above('lg-page-break') {
+      margin-inline: calc(var(--gutter) * -1);
+    }
   }
 
   summary {

From 281ad199d85f46db0519d6c6e5a0cb362df926f7 Mon Sep 17 00:00:00 2001
From: dvdherron <dvdherron@gmail.com>
Date: Tue, 9 Jan 2024 14:22:19 +0100
Subject: [PATCH 28/29] center marker vertically

---
 src/sass/patterns/_disclosure.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/sass/patterns/_disclosure.scss b/src/sass/patterns/_disclosure.scss
index 4b4a13e9..e772c311 100644
--- a/src/sass/patterns/_disclosure.scss
+++ b/src/sass/patterns/_disclosure.scss
@@ -32,6 +32,7 @@ summary {
     content: '';
     grid-column: 2;
     grid-row: 1;
+    margin-block-start: var(--half-shim);
     transform: rotate(0deg);
     transition: transform var(--fast);
 

From fee5ca9495bcc3643b9fc1de0defd642b4efd2d3 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Tue, 9 Jan 2024 09:22:26 -0600
Subject: [PATCH 29/29] trying css rotate now

---
 src/sass/patterns/_disclosure.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/sass/patterns/_disclosure.scss b/src/sass/patterns/_disclosure.scss
index e772c311..2e2f9c06 100644
--- a/src/sass/patterns/_disclosure.scss
+++ b/src/sass/patterns/_disclosure.scss
@@ -33,11 +33,11 @@ summary {
     grid-column: 2;
     grid-row: 1;
     margin-block-start: var(--half-shim);
-    transform: rotate(0deg);
-    transition: transform var(--fast);
+    rotate: var(--rotate-triangle, none);
+    transition: rotate var(--fast);
 
     [open] & {
-      transform: rotate(90deg);
+      --rotate-triangle: 90deg;
     }
   }
 }