From ddfb01052f21b684a7ed655ca81f9d0ac310d7c1 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <jamesnw@gmail.com>
Date: Thu, 26 Oct 2023 13:44:16 +0000
Subject: [PATCH 01/16] Group formats

---
 src/lib/components/colors/FormatGroup.svelte | 38 ++++++++++++++++++++
 src/lib/components/colors/Formats.svelte     | 26 +++++++++++---
 src/lib/components/colors/Output.svelte      | 12 +------
 src/lib/constants.ts                         |  6 ++++
 4 files changed, 66 insertions(+), 16 deletions(-)
 create mode 100644 src/lib/components/colors/FormatGroup.svelte

diff --git a/src/lib/components/colors/FormatGroup.svelte b/src/lib/components/colors/FormatGroup.svelte
new file mode 100644
index 00000000..f3dca99e
--- /dev/null
+++ b/src/lib/components/colors/FormatGroup.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { inGamut, to } from 'colorjs.io/fn';
+  import type { PlainColorObject } from 'colorjs.io/types/src/color';
+
+  import Output from '$lib/components/colors/Output.svelte';
+  import type { ColorFormatId } from '$lib/constants';
+  import { getSpaceFromFormatId } from '$lib/utils';
+
+  import ExternalLink from '../util/ExternalLink.svelte';
+
+  export let type: 'bg' | 'fg';
+  export let color: PlainColorObject;
+  export let name: string;
+  export let formats: ColorFormatId[];
+
+  $: targetSpace = getSpaceFromFormatId(formats[0] as ColorFormatId);
+  $: targetColor = to(color, targetSpace);
+  $: isInGamut = inGamut(targetColor);
+</script>
+
+<div data-content="format-group">
+  <h5>{name}</h5>
+  {#if !isInGamut}
+    <span data-color-info="warning"
+      >Selected color is outside the {targetColor.space.name} gamut.</span
+    ><ExternalLink href="https://www.w3.org/TR/css-color-4/#out-of-gamut"
+    ></ExternalLink>
+  {/if}
+  {#each formats as format (format)}
+    <Output {type} {color} {format} />
+  {/each}
+</div>
+
+<style lang="scss">
+  [data-color-info='warning'] {
+    grid-area: message;
+  }
+</style>
diff --git a/src/lib/components/colors/Formats.svelte b/src/lib/components/colors/Formats.svelte
index ef706db6..e39ce764 100644
--- a/src/lib/components/colors/Formats.svelte
+++ b/src/lib/components/colors/Formats.svelte
@@ -1,22 +1,38 @@
 <script lang="ts">
   import type { PlainColorObject } from 'colorjs.io/types/src/color';
 
-  import Output from '$lib/components/colors/Output.svelte';
+  import FormatGroup from '$lib/components/colors/FormatGroup.svelte';
   import type { ColorFormatId } from '$lib/constants';
-  import { FORMATS } from '$lib/constants';
+  import { FORMAT_GROUPS, FORMATS } from '$lib/constants';
 
   export let type: 'bg' | 'fg';
   export let color: PlainColorObject;
   export let format: ColorFormatId;
 
+  function otherFormatGroups(
+    selectedFormat: ColorFormatId,
+  ): typeof FORMAT_GROUPS {
+    const otherFormats: typeof FORMAT_GROUPS = {};
+    FORMATS.filter((s) => s !== format);
+    Object.keys(FORMAT_GROUPS).forEach((key) => {
+      const groupFormats = FORMAT_GROUPS[key]!.filter(
+        (s) => s !== selectedFormat,
+      );
+      if (groupFormats.length) {
+        otherFormats[key] = groupFormats;
+      }
+    });
+    return otherFormats;
+  }
+
   $: displayType = type === 'bg' ? 'Background' : 'Foreground';
-  $: otherFormats = FORMATS.filter((s) => s !== format);
+  $: otherFormats = otherFormatGroups(format);
 </script>
 
 <div data-content="formats" data-column="tool">
   <h4 class="small-only label">{displayType} Color</h4>
-  {#each otherFormats as format (format)}
-    <Output {type} {color} {format} />
+  {#each Object.entries(otherFormats) as [name, formats]}
+    <FormatGroup {type} {color} {name} {formats} />
   {/each}
 </div>
 
diff --git a/src/lib/components/colors/Output.svelte b/src/lib/components/colors/Output.svelte
index 6a906f44..a2d62995 100644
--- a/src/lib/components/colors/Output.svelte
+++ b/src/lib/components/colors/Output.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { inGamut, serialize, to } from 'colorjs.io/fn';
+  import { serialize, to } from 'colorjs.io/fn';
   import type { PlainColorObject } from 'colorjs.io/types/src/color';
 
   import SupportWarning from '$lib/components/colors/SupportWarning.svelte';
@@ -13,7 +13,6 @@
 
   $: targetSpace = getSpaceFromFormatId(format);
   $: targetColor = to(color, targetSpace);
-  $: isInGamut = inGamut(targetColor);
   $: targetColorValue = serialize(targetColor, {
     format,
     inGamut: false,
@@ -25,11 +24,6 @@
     <CopyButton text={targetColorValue} />
     <span data-color-info="value">{targetColorValue}</span>
     <SupportWarning {format} />
-    {#if !isInGamut}
-      <span data-color-info="warning"
-        >This color is outside the {targetColor.space.name} gamut.</span
-      >
-    {/if}
   </li>
 </ul>
 
@@ -45,8 +39,4 @@
   [data-color-info='value'] {
     grid-area: color;
   }
-
-  [data-color-info='warning'] {
-    grid-area: message;
-  }
 </style>
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 885bf128..54d5196a 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -24,6 +24,12 @@ export const FORMATS: ColorFormatId[] = [
   'srgb',
 ];
 
+export const FORMAT_GROUPS: { [key: string]: ColorFormatId[] } = {
+  'sRGB Formats': ['hex', 'hsl', 'srgb'],
+  'Unbounded Spaces': ['lab', 'lch', 'oklab', 'oklch'],
+  'Display p3 Space': ['p3'],
+};
+
 export const RATIOS = {
   AA: {
     Normal: 4.5,

From 135b86bc79277686d6711e04beb7eb9832ca978f Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <jamesnw@gmail.com>
Date: Thu, 26 Oct 2023 13:53:36 +0000
Subject: [PATCH 02/16] Fix test

---
 test/js/lib/components/colors/Output.spec.ts | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/test/js/lib/components/colors/Output.spec.ts b/test/js/lib/components/colors/Output.spec.ts
index 16f3e3bb..9671417c 100644
--- a/test/js/lib/components/colors/Output.spec.ts
+++ b/test/js/lib/components/colors/Output.spec.ts
@@ -28,19 +28,4 @@ describe('Output', () => {
       getByText(serialize(to(HSL_WHITE, 'oklch'), { inGamut: false })),
     ).toBeVisible();
   });
-
-  it('renders warning if out of gamut', () => {
-    const color: PlainColorObject = {
-      space: ColorSpace.get('oklch'),
-      coords: [0.01, 0.02, 0],
-      alpha: 1,
-    };
-    const { getByText } = render(Output, {
-      type: 'fg',
-      color,
-      format: 'hsl',
-    });
-
-    expect(getByText('outside the HSL gamut', { exact: false })).toBeVisible();
-  });
 });

From 77ff48a042e6eefd3cfdb390210aaad8ddaf5317 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <jamesnw@gmail.com>
Date: Thu, 26 Oct 2023 13:58:33 +0000
Subject: [PATCH 03/16] Lint

---
 test/js/lib/components/colors/Output.spec.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/test/js/lib/components/colors/Output.spec.ts b/test/js/lib/components/colors/Output.spec.ts
index 9671417c..93882a10 100644
--- a/test/js/lib/components/colors/Output.spec.ts
+++ b/test/js/lib/components/colors/Output.spec.ts
@@ -1,9 +1,7 @@
 import { render } from '@testing-library/svelte';
 import { serialize, to } from 'colorjs.io/fn';
-import type { PlainColorObject } from 'colorjs.io/types/src/color';
 
 import Output from '$lib/components/colors/Output.svelte';
-import { ColorSpace } from '$lib/stores';
 import { HSL_WHITE, HSL_WHITE_SERIALIZED } from '$test/fixtures';
 
 describe('Output', () => {

From 68dae998a9fe1bfa791d82117c222bd2a21cb6ed Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <jamesnw@gmail.com>
Date: Thu, 26 Oct 2023 14:23:08 +0000
Subject: [PATCH 04/16] Tests for FormatGroup

---
 src/lib/components/colors/Output.svelte       |  2 +-
 test/js/fixtures.ts                           |  6 +++
 .../lib/components/colors/FormatGroup.spec.ts | 40 +++++++++++++++++++
 3 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 test/js/lib/components/colors/FormatGroup.spec.ts

diff --git a/src/lib/components/colors/Output.svelte b/src/lib/components/colors/Output.svelte
index a2d62995..77f83dc8 100644
--- a/src/lib/components/colors/Output.svelte
+++ b/src/lib/components/colors/Output.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <ul data-group="output {type}">
-  <li>
+  <li data-testid={`format-${format}`}>
     <CopyButton text={targetColorValue} />
     <span data-color-info="value">{targetColorValue}</span>
     <SupportWarning {format} />
diff --git a/test/js/fixtures.ts b/test/js/fixtures.ts
index 4f46fb68..61d597f2 100644
--- a/test/js/fixtures.ts
+++ b/test/js/fixtures.ts
@@ -18,3 +18,9 @@ export const HSL_BLACK: PlainColorObject = {
 };
 
 export const HSL_WHITE_SERIALIZED = serialize(HSL_WHITE, { inGamut: false });
+
+export const OUT_OF_BOUNDED_GAMUTS: PlainColorObject = {
+  space: ColorSpace.get('oklch'),
+  coords: [1, 1, 1],
+  alpha: 1,
+};
diff --git a/test/js/lib/components/colors/FormatGroup.spec.ts b/test/js/lib/components/colors/FormatGroup.spec.ts
new file mode 100644
index 00000000..fddaab8e
--- /dev/null
+++ b/test/js/lib/components/colors/FormatGroup.spec.ts
@@ -0,0 +1,40 @@
+import { render } from '@testing-library/svelte';
+
+import FormatGroup from '$lib/components/colors/FormatGroup.svelte';
+import { FORMAT_GROUPS } from '$src/lib/constants';
+import { HSL_WHITE, OUT_OF_BOUNDED_GAMUTS } from '$test/fixtures';
+
+describe('FormatGroup', () => {
+  it('renders selected group', () => {
+    const GROUP_NAME = 'sRGB Formats';
+    const { getByTestId, getByText } = render(FormatGroup, {
+      type: 'bg',
+      color: HSL_WHITE,
+      name: GROUP_NAME,
+      formats: FORMAT_GROUPS[GROUP_NAME]!,
+    });
+
+    expect(getByText(GROUP_NAME)).toBeVisible();
+    FORMAT_GROUPS[GROUP_NAME]?.forEach((format) => {
+      expect(getByTestId(`format-${format}`)).toBeVisible();
+    });
+  });
+
+  it('renders warning if out of gamut', () => {
+    const GROUP_NAME = 'sRGB Formats';
+    const { getByTestId, getByText } = render(FormatGroup, {
+      type: 'bg',
+      color: OUT_OF_BOUNDED_GAMUTS,
+      name: GROUP_NAME,
+      formats: FORMAT_GROUPS[GROUP_NAME]!,
+    });
+
+    expect(getByText(GROUP_NAME)).toBeVisible();
+    FORMAT_GROUPS[GROUP_NAME]?.forEach((format) => {
+      expect(getByTestId(`format-${format}`)).toBeVisible();
+    });
+    expect(
+      getByText('Selected color is outside the sRGB gamut.'),
+    ).toBeVisible();
+  });
+});

From 7cf4118d5117edc7ef89c192bb55035306c7ff06 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Tue, 31 Oct 2023 10:38:17 -0400
Subject: [PATCH 05/16] review

---
 src/lib/components/colors/FormatGroup.svelte | 10 ++++++----
 src/lib/components/colors/Formats.svelte     |  3 +--
 src/lib/components/colors/Output.svelte      | 11 ++++-------
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/colors/FormatGroup.svelte b/src/lib/components/colors/FormatGroup.svelte
index f3dca99e..4c6ad656 100644
--- a/src/lib/components/colors/FormatGroup.svelte
+++ b/src/lib/components/colors/FormatGroup.svelte
@@ -22,12 +22,14 @@
   <h5>{name}</h5>
   {#if !isInGamut}
     <span data-color-info="warning"
-      >Selected color is outside the {targetColor.space.name} gamut.</span
-    ><ExternalLink href="https://www.w3.org/TR/css-color-4/#out-of-gamut"
-    ></ExternalLink>
+      >Selected color is <ExternalLink
+        href="https://www.w3.org/TR/css-color-4/#out-of-gamut"
+        >outside the {targetColor.space.name} gamut.</ExternalLink
+      ></span
+    >
   {/if}
   {#each formats as format (format)}
-    <Output {type} {color} {format} />
+    <Output {type} color={targetColor} {format} />
   {/each}
 </div>
 
diff --git a/src/lib/components/colors/Formats.svelte b/src/lib/components/colors/Formats.svelte
index e39ce764..8147f16e 100644
--- a/src/lib/components/colors/Formats.svelte
+++ b/src/lib/components/colors/Formats.svelte
@@ -3,7 +3,7 @@
 
   import FormatGroup from '$lib/components/colors/FormatGroup.svelte';
   import type { ColorFormatId } from '$lib/constants';
-  import { FORMAT_GROUPS, FORMATS } from '$lib/constants';
+  import { FORMAT_GROUPS } from '$lib/constants';
 
   export let type: 'bg' | 'fg';
   export let color: PlainColorObject;
@@ -13,7 +13,6 @@
     selectedFormat: ColorFormatId,
   ): typeof FORMAT_GROUPS {
     const otherFormats: typeof FORMAT_GROUPS = {};
-    FORMATS.filter((s) => s !== format);
     Object.keys(FORMAT_GROUPS).forEach((key) => {
       const groupFormats = FORMAT_GROUPS[key]!.filter(
         (s) => s !== selectedFormat,
diff --git a/src/lib/components/colors/Output.svelte b/src/lib/components/colors/Output.svelte
index 77f83dc8..971271f8 100644
--- a/src/lib/components/colors/Output.svelte
+++ b/src/lib/components/colors/Output.svelte
@@ -1,19 +1,16 @@
 <script lang="ts">
-  import { serialize, to } from 'colorjs.io/fn';
+  import { serialize } from 'colorjs.io/fn';
   import type { PlainColorObject } from 'colorjs.io/types/src/color';
 
   import SupportWarning from '$lib/components/colors/SupportWarning.svelte';
   import CopyButton from '$lib/components/util/CopyButton.svelte';
   import type { ColorFormatId } from '$lib/constants';
-  import { getSpaceFromFormatId } from '$lib/utils';
 
   export let type: 'bg' | 'fg';
   export let color: PlainColorObject;
   export let format: ColorFormatId;
 
-  $: targetSpace = getSpaceFromFormatId(format);
-  $: targetColor = to(color, targetSpace);
-  $: targetColorValue = serialize(targetColor, {
+  $: colorValue = serialize(color, {
     format,
     inGamut: false,
   });
@@ -21,8 +18,8 @@
 
 <ul data-group="output {type}">
   <li data-testid={`format-${format}`}>
-    <CopyButton text={targetColorValue} />
-    <span data-color-info="value">{targetColorValue}</span>
+    <CopyButton text={colorValue} />
+    <span data-color-info="value">{colorValue}</span>
     <SupportWarning {format} />
   </li>
 </ul>

From 2152706a233949ad1ce4784dd638de5975b1c341 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Tue, 31 Oct 2023 10:43:07 -0400
Subject: [PATCH 06/16] fix target spaces

---
 src/lib/components/colors/FormatGroup.svelte | 14 ++++++++------
 src/lib/components/colors/Output.svelte      | 11 +++++++----
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/colors/FormatGroup.svelte b/src/lib/components/colors/FormatGroup.svelte
index 4c6ad656..934ffbaf 100644
--- a/src/lib/components/colors/FormatGroup.svelte
+++ b/src/lib/components/colors/FormatGroup.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { inGamut, to } from 'colorjs.io/fn';
+  import { inGamut } from 'colorjs.io/fn';
   import type { PlainColorObject } from 'colorjs.io/types/src/color';
 
   import Output from '$lib/components/colors/Output.svelte';
   import type { ColorFormatId } from '$lib/constants';
+  import { ColorSpace } from '$lib/stores';
   import { getSpaceFromFormatId } from '$lib/utils';
 
   import ExternalLink from '../util/ExternalLink.svelte';
@@ -13,9 +14,10 @@
   export let name: string;
   export let formats: ColorFormatId[];
 
-  $: targetSpace = getSpaceFromFormatId(formats[0] as ColorFormatId);
-  $: targetColor = to(color, targetSpace);
-  $: isInGamut = inGamut(targetColor);
+  $: gamutSpace = ColorSpace.get(
+    getSpaceFromFormatId(formats[0] as ColorFormatId),
+  );
+  $: isInGamut = inGamut(color, gamutSpace);
 </script>
 
 <div data-content="format-group">
@@ -24,12 +26,12 @@
     <span data-color-info="warning"
       >Selected color is <ExternalLink
         href="https://www.w3.org/TR/css-color-4/#out-of-gamut"
-        >outside the {targetColor.space.name} gamut.</ExternalLink
+        >outside the {gamutSpace.name} gamut.</ExternalLink
       ></span
     >
   {/if}
   {#each formats as format (format)}
-    <Output {type} color={targetColor} {format} />
+    <Output {type} {color} {format} />
   {/each}
 </div>
 
diff --git a/src/lib/components/colors/Output.svelte b/src/lib/components/colors/Output.svelte
index 971271f8..77f83dc8 100644
--- a/src/lib/components/colors/Output.svelte
+++ b/src/lib/components/colors/Output.svelte
@@ -1,16 +1,19 @@
 <script lang="ts">
-  import { serialize } from 'colorjs.io/fn';
+  import { serialize, to } from 'colorjs.io/fn';
   import type { PlainColorObject } from 'colorjs.io/types/src/color';
 
   import SupportWarning from '$lib/components/colors/SupportWarning.svelte';
   import CopyButton from '$lib/components/util/CopyButton.svelte';
   import type { ColorFormatId } from '$lib/constants';
+  import { getSpaceFromFormatId } from '$lib/utils';
 
   export let type: 'bg' | 'fg';
   export let color: PlainColorObject;
   export let format: ColorFormatId;
 
-  $: colorValue = serialize(color, {
+  $: targetSpace = getSpaceFromFormatId(format);
+  $: targetColor = to(color, targetSpace);
+  $: targetColorValue = serialize(targetColor, {
     format,
     inGamut: false,
   });
@@ -18,8 +21,8 @@
 
 <ul data-group="output {type}">
   <li data-testid={`format-${format}`}>
-    <CopyButton text={colorValue} />
-    <span data-color-info="value">{colorValue}</span>
+    <CopyButton text={targetColorValue} />
+    <span data-color-info="value">{targetColorValue}</span>
     <SupportWarning {format} />
   </li>
 </ul>

From 82a5ab94970b12a860a29947f547ebd6fe298214 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Tue, 31 Oct 2023 10:47:52 -0400
Subject: [PATCH 07/16] test

---
 test/js/lib/components/colors/FormatGroup.spec.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/test/js/lib/components/colors/FormatGroup.spec.ts b/test/js/lib/components/colors/FormatGroup.spec.ts
index fddaab8e..a7c0a9e5 100644
--- a/test/js/lib/components/colors/FormatGroup.spec.ts
+++ b/test/js/lib/components/colors/FormatGroup.spec.ts
@@ -33,8 +33,6 @@ describe('FormatGroup', () => {
     FORMAT_GROUPS[GROUP_NAME]?.forEach((format) => {
       expect(getByTestId(`format-${format}`)).toBeVisible();
     });
-    expect(
-      getByText('Selected color is outside the sRGB gamut.'),
-    ).toBeVisible();
+    expect(getByText('outside the sRGB gamut.')).toBeVisible();
   });
 });

From dbb0d393ccd1055dd32ad5eb7a3516f71eb41cfd Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <jamesnw@gmail.com>
Date: Tue, 31 Oct 2023 16:40:56 +0000
Subject: [PATCH 08/16] Add explicit name, gamut name, and gamut testing format
 for Format Groups

---
 src/lib/components/colors/FormatGroup.svelte  | 23 +++++++++--------
 src/lib/components/colors/Formats.svelte      | 19 +++++++-------
 src/lib/constants.ts                          | 25 ++++++++++++++++---
 .../lib/components/colors/FormatGroup.spec.ts | 18 ++++++-------
 4 files changed, 52 insertions(+), 33 deletions(-)

diff --git a/src/lib/components/colors/FormatGroup.svelte b/src/lib/components/colors/FormatGroup.svelte
index 934ffbaf..b401f15f 100644
--- a/src/lib/components/colors/FormatGroup.svelte
+++ b/src/lib/components/colors/FormatGroup.svelte
@@ -3,7 +3,7 @@
   import type { PlainColorObject } from 'colorjs.io/types/src/color';
 
   import Output from '$lib/components/colors/Output.svelte';
-  import type { ColorFormatId } from '$lib/constants';
+  import type { FormatGroup } from '$lib/constants';
   import { ColorSpace } from '$lib/stores';
   import { getSpaceFromFormatId } from '$lib/utils';
 
@@ -11,26 +11,29 @@
 
   export let type: 'bg' | 'fg';
   export let color: PlainColorObject;
-  export let name: string;
-  export let formats: ColorFormatId[];
+  export let formatGroup: FormatGroup;
 
-  $: gamutSpace = ColorSpace.get(
-    getSpaceFromFormatId(formats[0] as ColorFormatId),
-  );
-  $: isInGamut = inGamut(color, gamutSpace);
+  function inGamutForSpace(color: PlainColorObject) {
+    if (!formatGroup.gamutFormat) return true;
+    const gamutSpace = ColorSpace.get(
+      getSpaceFromFormatId(formatGroup.gamutFormat),
+    );
+    return inGamut(color, gamutSpace);
+  }
+  $: isInGamut = inGamutForSpace(color);
 </script>
 
 <div data-content="format-group">
-  <h5>{name}</h5>
+  <h5>{formatGroup.name}</h5>
   {#if !isInGamut}
     <span data-color-info="warning"
       >Selected color is <ExternalLink
         href="https://www.w3.org/TR/css-color-4/#out-of-gamut"
-        >outside the {gamutSpace.name} gamut.</ExternalLink
+        >outside the {formatGroup.gamutName} gamut.</ExternalLink
       ></span
     >
   {/if}
-  {#each formats as format (format)}
+  {#each formatGroup.formats as format (format)}
     <Output {type} {color} {format} />
   {/each}
 </div>
diff --git a/src/lib/components/colors/Formats.svelte b/src/lib/components/colors/Formats.svelte
index 8147f16e..6512655c 100644
--- a/src/lib/components/colors/Formats.svelte
+++ b/src/lib/components/colors/Formats.svelte
@@ -2,7 +2,10 @@
   import type { PlainColorObject } from 'colorjs.io/types/src/color';
 
   import FormatGroup from '$lib/components/colors/FormatGroup.svelte';
-  import type { ColorFormatId } from '$lib/constants';
+  import type {
+    ColorFormatId,
+    FormatGroup as FormatGroupType,
+  } from '$lib/constants';
   import { FORMAT_GROUPS } from '$lib/constants';
 
   export let type: 'bg' | 'fg';
@@ -12,13 +15,11 @@
   function otherFormatGroups(
     selectedFormat: ColorFormatId,
   ): typeof FORMAT_GROUPS {
-    const otherFormats: typeof FORMAT_GROUPS = {};
-    Object.keys(FORMAT_GROUPS).forEach((key) => {
-      const groupFormats = FORMAT_GROUPS[key]!.filter(
-        (s) => s !== selectedFormat,
-      );
+    const otherFormats: FormatGroupType[] = [];
+    FORMAT_GROUPS.forEach((group) => {
+      const groupFormats = group.formats.filter((s) => s !== selectedFormat);
       if (groupFormats.length) {
-        otherFormats[key] = groupFormats;
+        otherFormats.push({ ...group, formats: groupFormats });
       }
     });
     return otherFormats;
@@ -30,8 +31,8 @@
 
 <div data-content="formats" data-column="tool">
   <h4 class="small-only label">{displayType} Color</h4>
-  {#each Object.entries(otherFormats) as [name, formats]}
-    <FormatGroup {type} {color} {name} {formats} />
+  {#each otherFormats as formatGroup}
+    <FormatGroup {type} {color} {formatGroup} />
   {/each}
 </div>
 
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 54d5196a..1c925524 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -24,12 +24,29 @@ export const FORMATS: ColorFormatId[] = [
   'srgb',
 ];
 
-export const FORMAT_GROUPS: { [key: string]: ColorFormatId[] } = {
-  'sRGB Formats': ['hex', 'hsl', 'srgb'],
-  'Unbounded Spaces': ['lab', 'lch', 'oklab', 'oklch'],
-  'Display p3 Space': ['p3'],
+export type FormatGroup = {
+  name: string;
+  formats: ColorFormatId[];
+  gamutFormat?: ColorFormatId;
+  gamutName?: string;
 };
 
+export const FORMAT_GROUPS: FormatGroup[] = [
+  {
+    name: 'sRGB Formats',
+    formats: ['hex', 'hsl', 'srgb'],
+    gamutFormat: 'srgb',
+    gamutName: 'sRGB',
+  },
+  { name: 'Unbounded Spaces', formats: ['lab', 'lch', 'oklab', 'oklch'] },
+  {
+    name: 'Display p3 Space',
+    formats: ['p3'],
+    gamutFormat: 'p3',
+    gamutName: 'p3',
+  },
+];
+
 export const RATIOS = {
   AA: {
     Normal: 4.5,
diff --git a/test/js/lib/components/colors/FormatGroup.spec.ts b/test/js/lib/components/colors/FormatGroup.spec.ts
index a7c0a9e5..1c90f326 100644
--- a/test/js/lib/components/colors/FormatGroup.spec.ts
+++ b/test/js/lib/components/colors/FormatGroup.spec.ts
@@ -6,31 +6,29 @@ import { HSL_WHITE, OUT_OF_BOUNDED_GAMUTS } from '$test/fixtures';
 
 describe('FormatGroup', () => {
   it('renders selected group', () => {
-    const GROUP_NAME = 'sRGB Formats';
+    const FORMAT_GROUP = FORMAT_GROUPS[0]!;
     const { getByTestId, getByText } = render(FormatGroup, {
       type: 'bg',
       color: HSL_WHITE,
-      name: GROUP_NAME,
-      formats: FORMAT_GROUPS[GROUP_NAME]!,
+      formatGroup: FORMAT_GROUP,
     });
 
-    expect(getByText(GROUP_NAME)).toBeVisible();
-    FORMAT_GROUPS[GROUP_NAME]?.forEach((format) => {
+    expect(getByText(FORMAT_GROUP.name)).toBeVisible();
+    FORMAT_GROUP.formats.forEach((format) => {
       expect(getByTestId(`format-${format}`)).toBeVisible();
     });
   });
 
   it('renders warning if out of gamut', () => {
-    const GROUP_NAME = 'sRGB Formats';
+    const FORMAT_GROUP = FORMAT_GROUPS[0]!;
     const { getByTestId, getByText } = render(FormatGroup, {
       type: 'bg',
       color: OUT_OF_BOUNDED_GAMUTS,
-      name: GROUP_NAME,
-      formats: FORMAT_GROUPS[GROUP_NAME]!,
+      formatGroup: FORMAT_GROUP,
     });
 
-    expect(getByText(GROUP_NAME)).toBeVisible();
-    FORMAT_GROUPS[GROUP_NAME]?.forEach((format) => {
+    expect(getByText(FORMAT_GROUP.name)).toBeVisible();
+    FORMAT_GROUP.formats.forEach((format) => {
       expect(getByTestId(`format-${format}`)).toBeVisible();
     });
     expect(getByText('outside the sRGB gamut.')).toBeVisible();

From 5b436b7a0877a4554df589330d361bdcf3e07fa5 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Mon, 13 Nov 2023 08:40:14 -0600
Subject: [PATCH 09/16] move headings up a level as they are independent of the
 result ratio

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

diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte
index 953f01ae..d8325503 100644
--- a/src/lib/components/ratio/index.svelte
+++ b/src/lib/components/ratio/index.svelte
@@ -37,7 +37,7 @@
   </div>
 
   <div class="contrast-defined">
-    <h4 class="label">AA Contrast Ratio</h4>
+    <h3 class="label">AA Contrast Ratio</h3>
 
     <dl>
       <dt><strong>{RATIOS.AA.Normal}</strong> : 1</dt>
@@ -47,7 +47,7 @@
       <dd>Large Text</dd>
     </dl>
 
-    <h4 class="label">AAA Contrast Ratio</h4>
+    <h3 class="label">AAA Contrast Ratio</h3>
     <dl>
       <dt><strong>{RATIOS.AAA.Normal}</strong> : 1</dt>
       <dd>Normal Text</dd>
@@ -56,7 +56,7 @@
       <dd>Large Text</dd>
     </dl>
 
-    <h4 class="label">Large Text Size</h4>
+    <h3 class="label">Large Text Size</h3>
     <dl>
       <dt><strong>≥ 24px</strong></dt>
       <dd>Regular Weight</dd>
@@ -135,8 +135,11 @@
     align-items: start;
     display: inline-flex;
     grid-area: number;
-    justify-content: flex-end;
     line-height: 0.7; // weird number alignment
+
+    @include config.between('sm-column-break', 'lg-page-break') {
+      justify-content: flex-end;
+    }
   }
 
   .result-ratio-number {

From 4d60df12fd898717055fb544623d890e03dcce1f Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Mon, 13 Nov 2023 08:40:48 -0600
Subject: [PATCH 10/16] remove unused

---
 src/lib/components/colors/index.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/components/colors/index.svelte b/src/lib/components/colors/index.svelte
index e666ed02..ee82c135 100644
--- a/src/lib/components/colors/index.svelte
+++ b/src/lib/components/colors/index.svelte
@@ -18,7 +18,6 @@
   <Sliders type="fg" color={fg} format={$format} />
 </form>
 
-<h3 class="label section-heading">Additional Formats</h3>
 <div data-layout="split">
   <Formats type="bg" color={$bg} format={$format} />
   <Formats type="fg" color={$fg} format={$format} />

From 41aa52978d90a534643f587e97f552fe00c556ed Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Mon, 13 Nov 2023 09:58:38 -0600
Subject: [PATCH 11/16] Update styles for grouped formats

---
 src/lib/components/colors/FormatGroup.svelte | 11 ++++++++---
 src/lib/components/colors/Formats.svelte     |  8 ++++----
 src/lib/components/colors/Output.svelte      | 12 +++++-------
 src/sass/initial/_type.scss                  |  5 ++---
 4 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/colors/FormatGroup.svelte b/src/lib/components/colors/FormatGroup.svelte
index b401f15f..3f03843b 100644
--- a/src/lib/components/colors/FormatGroup.svelte
+++ b/src/lib/components/colors/FormatGroup.svelte
@@ -24,7 +24,7 @@
 </script>
 
 <div data-content="format-group">
-  <h5>{formatGroup.name}</h5>
+  <h2 class="label section-heading">{formatGroup.name}</h2>
   {#if !isInGamut}
     <span data-color-info="warning"
       >Selected color is <ExternalLink
@@ -39,7 +39,12 @@
 </div>
 
 <style lang="scss">
-  [data-color-info='warning'] {
-    grid-area: message;
+  [data-content~='format-group'] {
+    --heading-transform: none;
+
+    column-gap: var(--gutter);
+    display: grid;
+    grid-template-columns: auto 1fr;
+    margin-block-end: var(--double-gutter);
   }
 </style>
diff --git a/src/lib/components/colors/Formats.svelte b/src/lib/components/colors/Formats.svelte
index 6512655c..320e93d4 100644
--- a/src/lib/components/colors/Formats.svelte
+++ b/src/lib/components/colors/Formats.svelte
@@ -30,7 +30,7 @@
 </script>
 
 <div data-content="formats" data-column="tool">
-  <h4 class="small-only label">{displayType} Color</h4>
+  <h2 class="small-only label">{displayType} Color</h2>
   {#each otherFormats as formatGroup}
     <FormatGroup {type} {color} {formatGroup} />
   {/each}
@@ -38,10 +38,10 @@
 
 <style lang="scss">
   [data-content~='formats'] {
-    margin-bottom: var(--double-gutter);
+    margin-block-end: var(--double-gutter);
   }
 
-  .label {
-    --label-margin-bottom: var(--gutter);
+  .small-only {
+    margin-block-end: var(--gutter);
   }
 </style>
diff --git a/src/lib/components/colors/Output.svelte b/src/lib/components/colors/Output.svelte
index 77f83dc8..37a7db09 100644
--- a/src/lib/components/colors/Output.svelte
+++ b/src/lib/components/colors/Output.svelte
@@ -28,15 +28,13 @@
 </ul>
 
 <style lang="scss">
+  [data-group~='output'] {
+    grid-column: 1 / -1;
+  }
+
   li {
     column-gap: 1ch;
     display: grid;
-    grid-template:
-      'copy color' auto
-      'copy message' 3ex / auto 1fr;
-  }
-
-  [data-color-info='value'] {
-    grid-area: color;
+    grid-template-columns: auto 1fr;
   }
 </style>
diff --git a/src/sass/initial/_type.scss b/src/sass/initial/_type.scss
index f3f42728..7f8f7781 100644
--- a/src/sass/initial/_type.scss
+++ b/src/sass/initial/_type.scss
@@ -22,8 +22,7 @@
 
 h1,
 h2,
-h3,
-h4 {
+h3 {
   font-weight: normal;
   margin: 0;
 }
@@ -49,7 +48,7 @@ h4 {
 .section-heading {
   @include heading;
 
-  --label-margin-bottom: var(--gutter-plus);
+  --label-margin-bottom: var(--gutter);
 
   @include config.below('sm-page-break') {
     --heading-size: var(--medium);

From b3cbf677a9f6ce5b9098ab19ee14e067b1901ec3 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Mon, 13 Nov 2023 09:59:08 -0600
Subject: [PATCH 12/16] capitalization from source since sRGB should have
 lowercase "s"

---
 src/lib/constants.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 1c925524..592d4b42 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -33,14 +33,14 @@ export type FormatGroup = {
 
 export const FORMAT_GROUPS: FormatGroup[] = [
   {
-    name: 'sRGB Formats',
+    name: 'sRGB FORMATS',
     formats: ['hex', 'hsl', 'srgb'],
     gamutFormat: 'srgb',
     gamutName: 'sRGB',
   },
-  { name: 'Unbounded Spaces', formats: ['lab', 'lch', 'oklab', 'oklch'] },
+  { name: 'UNBOUNDED SPACES', formats: ['lab', 'lch', 'oklab', 'oklch'] },
   {
-    name: 'Display p3 Space',
+    name: 'DISPLAY P3 SPACE',
     formats: ['p3'],
     gamutFormat: 'p3',
     gamutName: 'p3',

From d999b997e27125609954ba16cf2b38f31aa05616 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Mon, 13 Nov 2023 11:24:00 -0500
Subject: [PATCH 13/16] capitalize P3

---
 src/lib/constants.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 592d4b42..4bb8aea8 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -43,7 +43,7 @@ export const FORMAT_GROUPS: FormatGroup[] = [
     name: 'DISPLAY P3 SPACE',
     formats: ['p3'],
     gamutFormat: 'p3',
-    gamutName: 'p3',
+    gamutName: 'P3',
   },
 ];
 

From 8bd1ceffec0eb3a1fc2441855b265dd957cf9ff4 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Mon, 13 Nov 2023 10:12:52 -0600
Subject: [PATCH 14/16] use logical properties

---
 src/lib/components/colors/Formats.svelte | 2 +-
 src/lib/components/colors/Header.svelte  | 2 +-
 src/lib/components/colors/Sliders.svelte | 2 +-
 src/sass/initial/_type.scss              | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/colors/Formats.svelte b/src/lib/components/colors/Formats.svelte
index 320e93d4..a19ab637 100644
--- a/src/lib/components/colors/Formats.svelte
+++ b/src/lib/components/colors/Formats.svelte
@@ -42,6 +42,6 @@
   }
 
   .small-only {
-    margin-block-end: var(--gutter);
+    --label-margin-block-end: var(--gutter);
   }
 </style>
diff --git a/src/lib/components/colors/Header.svelte b/src/lib/components/colors/Header.svelte
index 3d96363f..407c2fd3 100644
--- a/src/lib/components/colors/Header.svelte
+++ b/src/lib/components/colors/Header.svelte
@@ -165,7 +165,7 @@
   }
 
   [data-label] {
-    --label-margin-bottom: var(--half-shim);
+    --label-margin-block-end: var(--half-shim);
     grid-area: label;
   }
 
diff --git a/src/lib/components/colors/Sliders.svelte b/src/lib/components/colors/Sliders.svelte
index 2e1e98d5..9afa1d5c 100644
--- a/src/lib/components/colors/Sliders.svelte
+++ b/src/lib/components/colors/Sliders.svelte
@@ -103,7 +103,7 @@
   }
 
   [data-group~='sliders'] {
-    --label-margin-bottom: var(--half-shim);
+    --label-margin-block-end: var(--half-shim);
     margin-bottom: var(--triple-gutter);
   }
 
diff --git a/src/sass/initial/_type.scss b/src/sass/initial/_type.scss
index 7f8f7781..cfe5b2f7 100644
--- a/src/sass/initial/_type.scss
+++ b/src/sass/initial/_type.scss
@@ -41,14 +41,14 @@ h3 {
   display: block;
   font-size: var(--heading-size, var(--label-size));
   letter-spacing: var(--heading-letterspacing, 0.05rem);
-  margin-bottom: var(--label-margin-bottom, 0);
+  margin-block-end: var(--label-margin-block-end, 0);
   text-transform: var(--heading-transform, uppercase);
 }
 
 .section-heading {
   @include heading;
 
-  --label-margin-bottom: var(--gutter);
+  --label-margin-block-end: var(--gutter);
 
   @include config.below('sm-page-break') {
     --heading-size: var(--medium);

From 8be40b01d2cc0e218bc65338d12110b45133274d Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Tue, 21 Nov 2023 15:47:48 -0600
Subject: [PATCH 15/16] Add flex container to section headers and errors

---
 src/lib/components/colors/FormatGroup.svelte | 28 +++++++++++++-------
 src/sass/initial/_type.scss                  |  2 --
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/colors/FormatGroup.svelte b/src/lib/components/colors/FormatGroup.svelte
index 3f03843b..435feb72 100644
--- a/src/lib/components/colors/FormatGroup.svelte
+++ b/src/lib/components/colors/FormatGroup.svelte
@@ -24,15 +24,17 @@
 </script>
 
 <div data-content="format-group">
-  <h2 class="label section-heading">{formatGroup.name}</h2>
-  {#if !isInGamut}
-    <span data-color-info="warning"
-      >Selected color is <ExternalLink
-        href="https://www.w3.org/TR/css-color-4/#out-of-gamut"
-        >outside the {formatGroup.gamutName} gamut.</ExternalLink
-      ></span
-    >
-  {/if}
+  <div class="format-group-heading">
+    <h2 class="label section-heading">{formatGroup.name}</h2>
+    {#if !isInGamut}
+      <span data-color-info="warning"
+        >Selected color is <ExternalLink
+          href="https://www.w3.org/TR/css-color-4/#out-of-gamut"
+          >outside the {formatGroup.gamutName} gamut.</ExternalLink
+        ></span
+      >
+    {/if}
+  </div>
   {#each formatGroup.formats as format (format)}
     <Output {type} {color} {format} />
   {/each}
@@ -47,4 +49,12 @@
     grid-template-columns: auto 1fr;
     margin-block-end: var(--double-gutter);
   }
+
+  .format-group-heading {
+    align-items: baseline;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--shim);
+    margin-block-end: var(--gutter);
+  }
 </style>
diff --git a/src/sass/initial/_type.scss b/src/sass/initial/_type.scss
index cfe5b2f7..baab320a 100644
--- a/src/sass/initial/_type.scss
+++ b/src/sass/initial/_type.scss
@@ -48,8 +48,6 @@ h3 {
 .section-heading {
   @include heading;
 
-  --label-margin-block-end: var(--gutter);
-
   @include config.below('sm-page-break') {
     --heading-size: var(--medium);
   }

From 8b130b1374a4394016de38c3d551a172a7842d0b Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Mon, 18 Dec 2023 22:13:59 -0600
Subject: [PATCH 16/16] remove unused grid

---
 src/lib/components/colors/FormatGroup.svelte | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/lib/components/colors/FormatGroup.svelte b/src/lib/components/colors/FormatGroup.svelte
index 435feb72..28fb4c82 100644
--- a/src/lib/components/colors/FormatGroup.svelte
+++ b/src/lib/components/colors/FormatGroup.svelte
@@ -44,9 +44,6 @@
   [data-content~='format-group'] {
     --heading-transform: none;
 
-    column-gap: var(--gutter);
-    display: grid;
-    grid-template-columns: auto 1fr;
     margin-block-end: var(--double-gutter);
   }