@nswds/app 1.99.0 → 1.100.0

package/dist/index.js

@@ -14919,7 +14919,10 @@ function ColorCard({ name, token, hex: hex2, rgb: rgb2, hsl, oklch: oklch2, form
   ] }) });
 }
 var recommendedBackgroundTones = [50, 100, 200, 400, 600, 800];
+var recommendedForegroundTones = [50, 200, 400, 600, 800];
 var AAA_NORMAL_TEXT_RATIO = 7;
+var DEFAULT_PRIMARY_FAMILY_KEY = "blue";
+var DEFAULT_ACCENT_FAMILY_KEY = "red";
 var MIN_DARK_BACKGROUND_TONE_FOR_WHITE = 600;
 var WHITE_FOREGROUND = {
   token: "white",
@@ -14928,6 +14931,8 @@ var WHITE_FOREGROUND = {
   rgb: "rgb(255, 255, 255)",
   hsl: "hsl(0, 0%, 100%)",
   oklch: "oklch(1 0 0)",
+  familyKey: "white",
+  familyLabel: "White",
   tone: 0
 };
 function extractTone(token) {
@@ -14938,23 +14943,48 @@ function formatFamilyLabel(name, key) {
   if (key === "grey") return "Grey";
   return name.replace(/^NSW Aboriginal\s+/i, "").replace(/^NSW\s+/i, "").trim();
 }
-function toPairingColor(color2) {
+function toPairingColor(color2, familyKey, familyLabel) {
   return {
     ...color2,
+    familyKey,
+    familyLabel,
     tone: extractTone(color2.token)
   };
 }
-function getPreferredForegroundTone(backgroundTone) {
-  if (backgroundTone <= 200) return 800;
-  if (backgroundTone <= 500) return 700;
-  if (backgroundTone <= 650) return 250;
-  return 200;
+function buildPairingCollections() {
+  return {
+    brand: Object.entries(colors.brand).map(([key, palette]) => {
+      const familyLabel = formatFamilyLabel(palette.name, key);
+      return {
+        key,
+        label: familyLabel,
+        paletteName: palette.name,
+        colors: palette.colors.map((color2) => toPairingColor(color2, key, familyLabel))
+      };
+    }),
+    aboriginal: Object.entries(colors.aboriginal).map(([key, palette]) => {
+      const familyLabel = formatFamilyLabel(palette.name, key);
+      return {
+        key,
+        label: familyLabel,
+        paletteName: palette.name,
+        colors: palette.colors.map((color2) => toPairingColor(color2, key, familyLabel))
+      };
+    })
+  };
 }
+var pairingFamilyCollections = buildPairingCollections();
 function getPairRating(contrastRatio) {
   if (contrastRatio >= 7) return "AAA";
   if (contrastRatio >= 4.5) return "AA";
   return "AA Large";
 }
+function getPreferredForegroundTone(backgroundTone) {
+  if (backgroundTone <= 200) return 800;
+  if (backgroundTone <= 500) return 700;
+  if (backgroundTone <= 650) return 250;
+  return 200;
+}
 function isPreferredDirection(backgroundTone, foregroundTone, preferredForegroundTone) {
   if (preferredForegroundTone < backgroundTone) {
     return foregroundTone < backgroundTone;
@@ -14977,15 +15007,27 @@ function buildPair(background, foreground) {
     rating: getPairRating(contrastRatio)
   };
 }
-function pickForeground(colorsToPair, background, minimumRatio) {
+function sortRecommendedPairs(background, pairs) {
   const preferredForegroundTone = getPreferredForegroundTone(background.tone);
-  const passingCandidates = colorsToPair.filter((color2) => color2.token !== background.token).map((color2) => buildPair(background, color2)).filter((pair) => pair.contrastRatio >= minimumRatio);
-  if (passingCandidates.length === 0) return null;
-  const preferredCandidates = passingCandidates.filter(
-    (pair) => isPreferredDirection(background.tone, pair.foreground.tone, preferredForegroundTone)
-  );
-  const candidates = preferredCandidates.length > 0 ? preferredCandidates : passingCandidates;
-  return candidates.sort((left, right) => {
+  return [...pairs].sort((left, right) => {
+    const leftPreferred = isPreferredDirection(
+      background.tone,
+      left.foreground.tone,
+      preferredForegroundTone
+    ) ? 0 : 1;
+    const rightPreferred = isPreferredDirection(
+      background.tone,
+      right.foreground.tone,
+      preferredForegroundTone
+    ) ? 0 : 1;
+    if (leftPreferred !== rightPreferred) {
+      return leftPreferred - rightPreferred;
+    }
+    const leftWhitePenalty = left.foreground.token === WHITE_FOREGROUND.token ? 1 : 0;
+    const rightWhitePenalty = right.foreground.token === WHITE_FOREGROUND.token ? 1 : 0;
+    if (leftWhitePenalty !== rightWhitePenalty) {
+      return leftWhitePenalty - rightWhitePenalty;
+    }
     const leftTargetDelta = Math.abs(left.foreground.tone - preferredForegroundTone);
     const rightTargetDelta = Math.abs(right.foreground.tone - preferredForegroundTone);
     if (leftTargetDelta !== rightTargetDelta) {
@@ -14996,49 +15038,116 @@ function pickForeground(colorsToPair, background, minimumRatio) {
     if (leftToneGap !== rightToneGap) {
       return rightToneGap - leftToneGap;
     }
-    return right.contrastRatio - left.contrastRatio;
-  })[0];
-}
-function buildRecommendedPairs(colorsToPair, minimumRatio) {
-  const backgrounds = recommendedBackgroundTones.map((tone) => colorsToPair.find((color2) => color2.tone === tone)).filter((color2) => Boolean(color2));
-  const recommendedPairs = [];
-  for (const background of backgrounds) {
-    const pair = pickForeground(colorsToPair, background, minimumRatio);
-    const whitePair = background.tone >= MIN_DARK_BACKGROUND_TONE_FOR_WHITE ? buildPair(background, WHITE_FOREGROUND) : null;
-    if (pair && !recommendedPairs.some((item) => item.id === pair.id)) {
-      recommendedPairs.push(pair);
+    if (left.foreground.familyKey === background.familyKey && right.foreground.familyKey !== background.familyKey) {
+      return -1;
     }
-    if (whitePair && whitePair.contrastRatio >= minimumRatio && !recommendedPairs.some((item) => item.id === whitePair.id)) {
-      recommendedPairs.push(whitePair);
+    if (right.foreground.familyKey === background.familyKey && left.foreground.familyKey !== background.familyKey) {
+      return 1;
     }
+    return right.contrastRatio - left.contrastRatio;
+  });
+}
+function dedupeColors(colorsToDedupe) {
+  return Array.from(new Map(colorsToDedupe.map((color2) => [color2.token, color2])).values());
+}
+function buildRecommendedPairsForBackground(background, foregrounds, minimumRatio) {
+  const candidatePairs = foregrounds.filter((foreground) => foreground.token !== background.token).map((foreground) => buildPair(background, foreground)).filter((pair) => pair.contrastRatio >= minimumRatio);
+  const whitePair = background.tone >= MIN_DARK_BACKGROUND_TONE_FOR_WHITE ? buildPair(background, WHITE_FOREGROUND) : null;
+  if (whitePair && whitePair.contrastRatio >= minimumRatio) {
+    candidatePairs.push(whitePair);
   }
-  return recommendedPairs;
+  const dedupedPairs = Array.from(new Map(candidatePairs.map((pair) => [pair.id, pair])).values());
+  return sortRecommendedPairs(background, dedupedPairs);
+}
+function findGreyFamily(families) {
+  return families.find((family) => family.key.toLowerCase().includes("grey")) ?? families[0];
+}
+function getNonGreyFamilies(families) {
+  const greyFamily = findGreyFamily(families);
+  return families.filter((family) => family.key !== greyFamily.key);
+}
+function findFamilyByKey(families, key) {
+  return key ? families.find((family) => family.key === key) : void 0;
+}
+function getDefaultPrimaryFamily(families) {
+  const nonGreyFamilies = getNonGreyFamilies(families);
+  return findFamilyByKey(nonGreyFamilies, DEFAULT_PRIMARY_FAMILY_KEY) ?? findFamilyByKey(nonGreyFamilies, "green") ?? nonGreyFamilies[0] ?? families[0];
 }
-function buildRecommendedCollections(minimumRatio) {
+function getDefaultAccentFamily(families, primaryKey) {
+  const nonGreyFamilies = getNonGreyFamilies(families).filter((family) => family.key !== primaryKey);
+  return findFamilyByKey(nonGreyFamilies, DEFAULT_ACCENT_FAMILY_KEY) ?? nonGreyFamilies[0] ?? getDefaultPrimaryFamily(families);
+}
+function isApprovedBackgroundTone(color2) {
+  return recommendedBackgroundTones.includes(
+    color2.tone
+  );
+}
+function isApprovedForegroundTone(color2) {
+  return recommendedForegroundTones.includes(
+    color2.tone
+  );
+}
+function getPairingFamilies(themeCategory) {
+  return pairingFamilyCollections[themeCategory];
+}
+function getDefaultAccentFamilyKey(themeCategory, primaryKey) {
+  return getDefaultAccentFamily(getPairingFamilies(themeCategory), primaryKey).key;
+}
+function getPairingContext(themeCategory, primaryKey, accentKey) {
+  const families = getPairingFamilies(themeCategory);
+  const primary = findFamilyByKey(getNonGreyFamilies(families), primaryKey) ?? getDefaultPrimaryFamily(families);
+  const accent = findFamilyByKey(
+    getNonGreyFamilies(families).filter((family) => family.key !== primary.key),
+    accentKey
+  ) ?? getDefaultAccentFamily(families, primary.key);
+  const grey = findGreyFamily(families);
+  const allFamilies = [primary, accent, grey];
+  const backgroundGroups = [
+    {
+      key: "primary",
+      label: "Primary backgrounds",
+      family: primary,
+      backgrounds: primary.colors.filter(isApprovedBackgroundTone)
+    },
+    {
+      key: "accent",
+      label: "Accent backgrounds",
+      family: accent,
+      backgrounds: accent.colors.filter(isApprovedBackgroundTone)
+    },
+    {
+      key: "grey",
+      label: "Grey backgrounds",
+      family: grey,
+      backgrounds: grey.colors.filter(isApprovedBackgroundTone)
+    }
+  ];
+  const backgrounds = backgroundGroups.flatMap((group) => group.backgrounds);
+  const candidateForegrounds = dedupeColors(
+    allFamilies.flatMap((family) => family.colors.filter(isApprovedForegroundTone))
+  );
+  const pairsByBackground = {};
+  for (const background of backgrounds) {
+    pairsByBackground[background.token] = buildRecommendedPairsForBackground(
+      background,
+      candidateForegrounds,
+      AAA_NORMAL_TEXT_RATIO
+    );
+  }
   return {
-    brand: Object.entries(colors.brand).map(([key, palette]) => {
-      const scale2 = palette.colors.map(toPairingColor);
-      return {
-        key,
-        label: formatFamilyLabel(palette.name, key),
-        paletteName: palette.name,
-        colors: scale2,
-        recommendedPairs: buildRecommendedPairs(scale2, minimumRatio)
-      };
-    }),
-    aboriginal: Object.entries(colors.aboriginal).map(([key, palette]) => {
-      const scale2 = palette.colors.map(toPairingColor);
-      return {
-        key,
-        label: formatFamilyLabel(palette.name, key),
-        paletteName: palette.name,
-        colors: scale2,
-        recommendedPairs: buildRecommendedPairs(scale2, minimumRatio)
-      };
-    })
+    accent,
+    allFamilies,
+    backgroundGroups,
+    backgrounds,
+    grey,
+    pairsByBackground,
+    primary,
+    recommendedPairs: backgrounds.flatMap(
+      (background) => pairsByBackground[background.token] ?? []
+    ),
+    themeCategory
   };
 }
-var recommendedAaaPairingCollections = buildRecommendedCollections(AAA_NORMAL_TEXT_RATIO);
 function getWhiteForegroundPair(background) {
   return buildPair(background, WHITE_FOREGROUND);
 }
@@ -15190,64 +15299,86 @@ function FormatToggle({ format, setFormat }) {
     )
   ] });
 }
-function getPreferredFamilyKey(families) {
-  return families.find((family) => family.key === "green")?.key ?? families[0]?.key ?? "";
-}
-function getDefaultPair(family) {
-  if (!family || family.recommendedPairs.length === 0) return null;
-  return family.recommendedPairs.reduce((bestPair, pair) => {
-    const bestDelta = Math.abs(bestPair.background.tone - 600);
-    const currentDelta = Math.abs(pair.background.tone - 600);
-    return currentDelta < bestDelta ? pair : bestPair;
-  }, family.recommendedPairs[0]);
-}
-function getFamilySwatchColor(family) {
-  return family.colors.find((color2) => color2.tone === 500)?.hex ?? family.colors.find((color2) => color2.tone === 400)?.hex ?? family.colors[Math.min(3, family.colors.length - 1)]?.hex ?? "transparent";
-}
+var AAA_NORMAL_TEXT_THRESHOLD = "7.0:1 or higher for text below 18pt, or below 14pt bold";
+var AAA_LARGE_TEXT_THRESHOLD = "4.5:1 or higher for text at 18pt and above, or 14pt and above bold";
+var PREFERRED_BACKGROUND_TONES = [400, 600, 200, 800, 100, 50];
 function getToneFromToken(token) {
   if (!token) return null;
   const match = token.match(/-(\d+)$/);
   return match ? Number.parseInt(match[1], 10) : null;
 }
-function isApprovedBackgroundTone(color2) {
-  return recommendedBackgroundTones.includes(
-    color2.tone
-  );
+function getFamilySwatchColor(family, preferredTone = 600) {
+  const exactMatch = family.colors.find((color2) => color2.tone === preferredTone);
+  if (exactMatch) {
+    return exactMatch.hex;
+  }
+  const closestMatch = [...family.colors].sort(
+    (left, right) => Math.abs(left.tone - preferredTone) - Math.abs(right.tone - preferredTone)
+  )[0];
+  return closestMatch?.hex ?? "transparent";
 }
-function getBackgroundOptions(family) {
-  return family?.colors.filter(isApprovedBackgroundTone) ?? [];
+function getFamilySelectorLabel(family, themeCategory, selectionRole) {
+  if (themeCategory !== "aboriginal") {
+    return family.label;
+  }
+  const preferredTone = selectionRole === "primary colour" ? 800 : 600;
+  return family.colors.find((color2) => color2.tone === preferredTone)?.name ?? family.label;
 }
 function isWhiteForegroundPair(pair) {
   return pair.foreground.token === "white";
 }
-function getRecommendedPairForBackground(family, backgroundToken, preferredPairId) {
-  if (!family) return null;
-  const backgroundPairs = family.recommendedPairs.filter(
-    (pair) => pair.background.token === backgroundToken
-  );
-  if (backgroundPairs.length === 0) return null;
+function getPreferredPairForBackground(pairs, preferredPairId) {
   if (preferredPairId) {
-    const preferredPair = backgroundPairs.find((pair) => pair.id === preferredPairId);
+    const preferredPair = pairs.find((pair) => pair.id === preferredPairId);
     if (preferredPair) {
       return preferredPair;
     }
   }
-  return backgroundPairs.find((pair) => !isWhiteForegroundPair(pair)) ?? backgroundPairs[0];
+  return pairs.find((pair) => !isWhiteForegroundPair(pair)) ?? pairs[0] ?? null;
 }
-function getFallbackBackgroundToken(family, preferredTone) {
-  const backgroundOptions = getBackgroundOptions(family);
-  if (preferredTone) {
-    const preferredBackground = backgroundOptions.find((color2) => color2.tone === preferredTone);
-    if (preferredBackground) {
-      return preferredBackground.token;
+function getDefaultBackgroundToken(context) {
+  for (const tone of PREFERRED_BACKGROUND_TONES) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find(
+        (background) => background.tone === tone && (context.pairsByBackground[background.token]?.length ?? 0) > 0
+      );
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  for (const tone of PREFERRED_BACKGROUND_TONES) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find((background) => background.tone === tone);
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  return context.backgrounds[0]?.token ?? "";
+}
+function resolveBackgroundToken(context, preferredToken, preferredTone) {
+  if (preferredToken && context.backgrounds.some((background) => background.token === preferredToken)) {
+    return preferredToken;
+  }
+  if (preferredTone !== null && preferredTone !== void 0) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find((background) => background.tone === preferredTone);
+      if (match) {
+        return match.token;
+      }
     }
   }
-  return getDefaultPair(family)?.background.token ?? backgroundOptions[0]?.token ?? "";
+  return getDefaultBackgroundToken(context);
 }
 function ColorPairingToolLoading() {
   return /* @__PURE__ */ jsxs("div", { className: "animate-pulse space-y-6", children: [
-    /* @__PURE__ */ jsx("div", { className: "h-40 rounded-sm border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" }),
-    /* @__PURE__ */ jsxs("div", { className: "grid gap-6 xl:grid-cols-[minmax(0,1.3fr)_minmax(20rem,0.9fr)]", children: [
+    /* @__PURE__ */ jsx("div", { className: "h-32 rounded-sm border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-6 lg:grid-cols-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-48 rounded-sm border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" }),
+      /* @__PURE__ */ jsx("div", { className: "h-48 rounded-sm border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-6 xl:grid-cols-[minmax(0,1.5fr)_minmax(18rem,0.72fr)]", children: [
       /* @__PURE__ */ jsx("div", { className: "h-96 rounded-sm border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" }),
       /* @__PURE__ */ jsx("div", { className: "h-96 rounded-sm border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" })
     ] })
@@ -15255,24 +15386,32 @@ function ColorPairingToolLoading() {
 }
 function getInitialPairingState(searchParams) {
   const paletteParam = searchParams.get("palette");
-  const familyParam = searchParams.get("family");
+  const primaryParam = searchParams.get("primary");
+  const accentParam = searchParams.get("accent");
   const pairParam = searchParams.get("pair");
   const backgroundParam = searchParams.get("background");
   const themeCategory = paletteParam === "brand" || paletteParam === "aboriginal" ? paletteParam : "brand";
-  const families = recommendedAaaPairingCollections[themeCategory];
-  const familyKey = families.some((family) => family.key === familyParam) ? familyParam : getPreferredFamilyKey(families);
-  const activeFamily = families.find((family) => family.key === familyKey) ?? families[0];
-  const backgroundOptions = getBackgroundOptions(activeFamily);
-  const pairBackgroundToken = activeFamily?.recommendedPairs.find((pair) => pair.id === pairParam)?.background.token ?? null;
-  const selectedBackgroundToken = backgroundOptions.some((color2) => color2.token === backgroundParam) ? backgroundParam : getFallbackBackgroundToken(
-    activeFamily,
+  const context = getPairingContext(themeCategory, primaryParam, accentParam);
+  const pairBackgroundToken = context.recommendedPairs.find((pair) => pair.id === pairParam)?.background.token ?? null;
+  const selectedBackgroundToken = resolveBackgroundToken(
+    context,
+    backgroundParam ?? pairBackgroundToken,
     getToneFromToken(backgroundParam ?? pairBackgroundToken)
   );
-  const selectedPairId = getRecommendedPairForBackground(activeFamily, selectedBackgroundToken, pairParam)?.id ?? "";
-  return { familyKey, selectedBackgroundToken, selectedPairId, themeCategory };
+  const selectedPairId = getPreferredPairForBackground(
+    context.pairsByBackground[selectedBackgroundToken] ?? [],
+    pairParam
+  )?.id ?? "";
+  return {
+    accentKey: context.accent.key,
+    primaryKey: context.primary.key,
+    selectedBackgroundToken,
+    selectedPairId,
+    themeCategory
+  };
 }
 function PairPreview({
-  family,
+  familySummary,
   isRecommended,
   pair
 }) {
@@ -15300,7 +15439,7 @@ function PairPreview({
               },
               children: [
                 /* @__PURE__ */ jsx(Icons.palette, { "data-slot": "icon", className: "size-4" }),
-                family.label
+                familySummary
               ]
             }
           ),
@@ -15321,10 +15460,10 @@ function PairPreview({
           )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "max-w-xl space-y-4 pb-12 sm:pb-16", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: whiteForeground && !isRecommended ? "White on colour example" : whiteForeground ? "White on colour" : "Tone on tone" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: whiteForeground && !isRecommended ? "White on colour example" : whiteForeground ? "White on colour" : "Colour on colour" }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
             /* @__PURE__ */ jsx("h3", { className: "max-w-lg text-4xl leading-none font-bold text-current sm:text-5xl", children: "Pair colour with confidence." }),
-            /* @__PURE__ */ jsx("p", { className: "max-w-md text-sm/6 sm:text-base/7", children: whiteForeground ? isRecommended ? "Use white text on dark colour only when it meets AAA for headings, body copy, and calls to action." : "This white text example is included for reference on approved dark backgrounds. Check the result card below before using it for normal or large text." : "Use only AAA-recommended tone-on-tone combinations for headings, body copy, and calls to action on colour." })
+            /* @__PURE__ */ jsx("p", { className: "max-w-md text-sm/6 sm:text-base/7", children: whiteForeground ? isRecommended ? "Use white text on dark colour only when it meets AAA for headings, body copy, and calls to action." : "This white text example is included for reference on approved dark backgrounds. Check the result card below before using it for normal or large text." : "Use only AAA-recommended combinations across your selected primary, accent, and grey families." })
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
@@ -15361,6 +15500,41 @@ function PairPreview({
     }
   ) });
 }
+function PreviewFallbackCard({
+  familySummary,
+  selectedBackground
+}) {
+  return /* @__PURE__ */ jsx(Card, { className: "gap-0 overflow-hidden py-0", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "p-6 sm:min-h-[26rem] sm:p-8",
+      style: {
+        backgroundColor: selectedBackground.hex,
+        color: selectedBackground.tone >= 600 ? "#ffffff" : "#002664"
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-[22rem] flex-col justify-between gap-8", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 rounded-full border border-current bg-transparent px-3 py-1 text-[0.72rem] font-semibold tracking-[0.16em] uppercase", children: [
+          /* @__PURE__ */ jsx(Icons.palette, { "data-slot": "icon", className: "size-4" }),
+          familySummary
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "max-w-xl space-y-4 pb-12 sm:pb-16", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: "Approved background" }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsx("h3", { className: "max-w-lg text-4xl leading-none font-bold text-current sm:text-5xl", children: "Pair colour with confidence." }),
+            /* @__PURE__ */ jsx("p", { className: "max-w-md text-sm/6 sm:text-base/7", children: "This approved background tone does not currently have a recommended AAA foreground in this tool." })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 rounded-full bg-current/10 px-4 py-2 text-sm font-semibold", children: [
+            "No recommendation",
+            /* @__PURE__ */ jsx(Icons.info, { "data-slot": "icon", className: "size-4" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "inline-flex rounded-full border border-current px-4 py-2 text-sm", children: selectedBackground.token })
+        ] })
+      ] })
+    }
+  ) });
+}
 function PairDetailCard({
   color: color2,
   format,
@@ -15476,7 +15650,7 @@ function PairComplianceCard({ pair }) {
         {
           label: "AAA normal text",
           passes: pair.passes.aaaText,
-          threshold: "7.0:1 or higher"
+          threshold: AAA_NORMAL_TEXT_THRESHOLD
         }
       ),
       /* @__PURE__ */ jsx(
@@ -15484,7 +15658,7 @@ function PairComplianceCard({ pair }) {
         {
           label: "AAA large text",
           passes: pair.passes.aaaLarge,
-          threshold: "4.5:1 or higher"
+          threshold: AAA_LARGE_TEXT_THRESHOLD
         }
       )
     ] })
@@ -15522,7 +15696,8 @@ function WhiteTextExampleCard({ pair }) {
                 "AAA large text: ",
                 /* @__PURE__ */ jsx("strong", { children: pair.passes.aaaLarge ? "pass" : "fail" })
               ] })
-            ] })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm/6", children: "Normal text means body text and smaller headings below 18pt, or below 14pt when bold. Large text means 18pt and above, or 14pt and above when bold." })
           ] })
         }
       ),
@@ -15539,7 +15714,7 @@ function WhiteTextExampleCard({ pair }) {
           {
             label: "AAA normal text",
             passes: pair.passes.aaaText,
-            threshold: "7.0:1 or higher"
+            threshold: AAA_NORMAL_TEXT_THRESHOLD
           }
         ),
         /* @__PURE__ */ jsx(
@@ -15547,42 +15722,90 @@ function WhiteTextExampleCard({ pair }) {
           {
             label: "AAA large text",
             passes: pair.passes.aaaLarge,
-            threshold: "4.5:1 or higher"
+            threshold: AAA_LARGE_TEXT_THRESHOLD
           }
         )
       ] })
     ] })
   ] });
 }
+function ColorFamilySelector({
+  families,
+  label,
+  selectedKey,
+  selectionRole,
+  themeCategory,
+  onSelect
+}) {
+  const swatchTone = selectionRole === "primary colour" ? 800 : 600;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx("h3", { className: "font-medium", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 lg:grid-cols-4 xl:grid-cols-5", children: families.map((family) => {
+      const isSelected = family.key === selectedKey;
+      const familySelectorLabel = getFamilySelectorLabel(family, themeCategory, selectionRole);
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Select ${familySelectorLabel} as ${selectionRole}`,
+          "aria-pressed": isSelected,
+          onClick: () => onSelect(family.key),
+          className: cn(
+            "group relative flex w-full items-center gap-3 rounded-sm border px-3 py-2 text-left transition-colors",
+            "border-grey-200 bg-background hover:bg-primary-800/10 hover:text-foreground dark:hover:bg-white/10",
+            isSelected && "border-grey-800 dark:border-grey-400"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "size-4 shrink-0 rounded-full",
+                style: { backgroundColor: getFamilySwatchColor(family, swatchTone) }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: familySelectorLabel })
+          ]
+        },
+        family.key
+      );
+    }) })
+  ] });
+}
 function ColorPairingToolContent() {
   const searchParams = useSearchParams();
   const {
-    familyKey: initialFamilyKey,
+    accentKey: initialAccentKey,
+    primaryKey: initialPrimaryKey,
     selectedBackgroundToken: initialSelectedBackgroundToken,
     selectedPairId: initialSelectedPairId,
     themeCategory: initialThemeCategory
   } = getInitialPairingState(searchParams);
   const [themeCategory, setThemeCategory] = useState(initialThemeCategory);
   const [format, setFormat] = useState("hex");
-  const [activeFamilyKey, setActiveFamilyKey] = useState(initialFamilyKey);
+  const [primaryFamilyKey, setPrimaryFamilyKey] = useState(initialPrimaryKey);
+  const [accentFamilyKey, setAccentFamilyKey] = useState(initialAccentKey);
   const [selectedBackgroundToken, setSelectedBackgroundToken] = useState(
     initialSelectedBackgroundToken
   );
   const [selectedPairId, setSelectedPairId] = useState(initialSelectedPairId);
-  const families = recommendedAaaPairingCollections[themeCategory];
-  const resolvedActiveFamilyKey = families.some((family) => family.key === activeFamilyKey) ? activeFamilyKey : getPreferredFamilyKey(families);
-  const activeFamily = families.find((family) => family.key === resolvedActiveFamilyKey) ?? families[0];
-  const backgroundOptions = getBackgroundOptions(activeFamily);
-  const selectedBackground = backgroundOptions.find((color2) => color2.token === selectedBackgroundToken) ?? backgroundOptions[0] ?? activeFamily?.colors[0] ?? null;
-  const selectedPair = selectedBackground ? getRecommendedPairForBackground(activeFamily, selectedBackground.token, selectedPairId) : null;
+  const themeFamilies = getPairingFamilies(themeCategory);
+  const context = getPairingContext(themeCategory, primaryFamilyKey, accentFamilyKey);
+  const selectableFamilies = themeFamilies.filter((family) => family.key !== context.grey.key);
+  const selectedBackground = context.backgrounds.find((background) => background.token === selectedBackgroundToken) ?? context.backgrounds[0] ?? null;
+  const selectedBackgroundPairs = selectedBackground ? context.pairsByBackground[selectedBackground.token] ?? [] : [];
+  const selectedPair = getPreferredPairForBackground(selectedBackgroundPairs, selectedPairId);
   const whiteForegroundExample = selectedBackground && supportsWhiteForegroundPreview(selectedBackground) ? getWhiteForegroundPair(selectedBackground) : null;
-  const previewPair = selectedPair ?? whiteForegroundExample;
+  const previewPair = selectedPair ?? whiteForegroundExample ?? null;
   const showWhiteForegroundExample = Boolean(whiteForegroundExample) && (!selectedPair || selectedPair.foreground.token !== "white");
   const detailForeground = selectedPair?.foreground ?? whiteForegroundExample?.foreground ?? null;
-  const updateUrlParams = (nextThemeCategory, nextFamilyKey, nextSelectedBackgroundToken, nextSelectedPairId) => {
+  const familySummary = [context.primary.label, context.accent.label, context.grey.label].join(
+    " + "
+  );
+  const updateUrlParams = (nextThemeCategory, nextPrimaryKey, nextAccentKey, nextSelectedBackgroundToken, nextSelectedPairId) => {
     const params = new URLSearchParams(window.location.search);
     params.set("palette", nextThemeCategory);
-    params.set("family", nextFamilyKey);
+    params.set("primary", nextPrimaryKey);
+    params.set("accent", nextAccentKey);
     params.set("background", nextSelectedBackgroundToken);
     if (nextSelectedPairId) {
       params.set("pair", nextSelectedPairId);
@@ -15595,79 +15818,87 @@ function ColorPairingToolContent() {
       `${window.location.pathname}?${params.toString()}${window.location.hash}`
     );
   };
-  const handleThemeCategoryChange = (nextThemeCategory) => {
-    const nextFamilies = recommendedAaaPairingCollections[nextThemeCategory];
-    const nextFamilyKey = nextFamilies.some((family) => family.key === activeFamilyKey) ? activeFamilyKey : getPreferredFamilyKey(nextFamilies);
-    const nextActiveFamily = nextFamilies.find((family) => family.key === nextFamilyKey) ?? nextFamilies[0];
-    const nextSelectedBackgroundToken = getFallbackBackgroundToken(
-      nextActiveFamily,
-      getToneFromToken(selectedBackgroundToken)
-    );
-    const nextSelectedPair = getRecommendedPairForBackground(
-      nextActiveFamily,
-      nextSelectedBackgroundToken,
-      selectedPairId
+  const syncSelection = (nextThemeCategory, nextPrimaryKey, nextAccentKey, preferredBackgroundToken, preferredPairId) => {
+    const nextContext = getPairingContext(nextThemeCategory, nextPrimaryKey, nextAccentKey);
+    const nextSelectedBackgroundToken = resolveBackgroundToken(
+      nextContext,
+      preferredBackgroundToken,
+      getToneFromToken(preferredBackgroundToken)
     );
+    const nextSelectedPairId = getPreferredPairForBackground(
+      nextContext.pairsByBackground[nextSelectedBackgroundToken] ?? [],
+      preferredPairId
+    )?.id ?? "";
     setThemeCategory(nextThemeCategory);
-    setActiveFamilyKey(nextFamilyKey);
+    setPrimaryFamilyKey(nextContext.primary.key);
+    setAccentFamilyKey(nextContext.accent.key);
     setSelectedBackgroundToken(nextSelectedBackgroundToken);
-    setSelectedPairId(nextSelectedPair?.id ?? "");
+    setSelectedPairId(nextSelectedPairId);
     updateUrlParams(
       nextThemeCategory,
-      nextFamilyKey,
+      nextContext.primary.key,
+      nextContext.accent.key,
       nextSelectedBackgroundToken,
-      nextSelectedPair?.id ?? ""
+      nextSelectedPairId
     );
   };
-  const handleFamilyChange = (nextFamilyKey) => {
-    const nextActiveFamily = families.find((family) => family.key === nextFamilyKey);
-    const nextSelectedBackgroundToken = getFallbackBackgroundToken(
-      nextActiveFamily,
-      getToneFromToken(selectedBackgroundToken)
+  const handleThemeCategoryChange = (nextThemeCategory) => {
+    syncSelection(
+      nextThemeCategory,
+      primaryFamilyKey,
+      accentFamilyKey,
+      selectedBackgroundToken,
+      selectedPairId
     );
-    const nextSelectedPair = getRecommendedPairForBackground(
-      nextActiveFamily,
-      nextSelectedBackgroundToken,
+  };
+  const handlePrimaryColorChange = (nextPrimaryKey) => {
+    const nextAccentKey = nextPrimaryKey === accentFamilyKey ? getDefaultAccentFamilyKey(themeCategory, nextPrimaryKey) : accentFamilyKey;
+    syncSelection(
+      themeCategory,
+      nextPrimaryKey,
+      nextAccentKey,
+      selectedBackgroundToken,
       selectedPairId
     );
-    setActiveFamilyKey(nextFamilyKey);
-    setSelectedBackgroundToken(nextSelectedBackgroundToken);
-    setSelectedPairId(nextSelectedPair?.id ?? "");
-    updateUrlParams(
+  };
+  const handleAccentColorChange = (nextAccentKey) => {
+    if (nextAccentKey === primaryFamilyKey) return;
+    syncSelection(
       themeCategory,
-      nextFamilyKey,
-      nextSelectedBackgroundToken,
-      nextSelectedPair?.id ?? ""
+      primaryFamilyKey,
+      nextAccentKey,
+      selectedBackgroundToken,
+      selectedPairId
     );
   };
   const handleBackgroundChange = (nextSelectedBackgroundToken) => {
-    const nextSelectedPair = getRecommendedPairForBackground(
-      activeFamily,
-      nextSelectedBackgroundToken,
+    const nextSelectedPairId = getPreferredPairForBackground(
+      context.pairsByBackground[nextSelectedBackgroundToken] ?? [],
       selectedPairId
-    );
+    )?.id ?? "";
     setSelectedBackgroundToken(nextSelectedBackgroundToken);
-    setSelectedPairId(nextSelectedPair?.id ?? "");
+    setSelectedPairId(nextSelectedPairId);
     updateUrlParams(
       themeCategory,
-      resolvedActiveFamilyKey,
+      context.primary.key,
+      context.accent.key,
       nextSelectedBackgroundToken,
-      nextSelectedPair?.id ?? ""
+      nextSelectedPairId
     );
   };
   const handlePairChange = (nextSelectedPairId) => {
-    const nextSelectedPair = activeFamily?.recommendedPairs.find((pair) => pair.id === nextSelectedPairId) ?? null;
-    if (!nextSelectedPair) return;
-    setSelectedBackgroundToken(nextSelectedPair.background.token);
+    const nextSelectedPair = selectedBackgroundPairs.find((pair) => pair.id === nextSelectedPairId);
+    if (!nextSelectedPair || !selectedBackground) return;
     setSelectedPairId(nextSelectedPairId);
     updateUrlParams(
       themeCategory,
-      resolvedActiveFamilyKey,
-      nextSelectedPair.background.token,
+      context.primary.key,
+      context.accent.key,
+      selectedBackground.token,
       nextSelectedPairId
     );
   };
-  if (!activeFamily || !selectedBackground) {
+  if (!selectedBackground) {
     return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardHeader, { children: [
       /* @__PURE__ */ jsx(CardTitle, { children: "No approved background tones available" }),
       /* @__PURE__ */ jsx(CardDescription, { children: "No approved tones are available for the current palette." })
@@ -15691,194 +15922,207 @@ function ColorPairingToolContent() {
       ] }),
       /* @__PURE__ */ jsx(FormatToggle, { format, setFormat })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 lg:grid-cols-4 xl:grid-cols-5", children: families.map((family) => {
-      const isActive = family.key === resolvedActiveFamilyKey;
-      return /* @__PURE__ */ jsxs(
-        "button",
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-6", children: [
+      /* @__PURE__ */ jsx(
+        ColorFamilySelector,
+        {
+          label: "Primary colour",
+          families: selectableFamilies,
+          selectedKey: context.primary.key,
+          selectionRole: "primary colour",
+          themeCategory,
+          onSelect: handlePrimaryColorChange
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ColorFamilySelector,
+        {
+          label: "Accent colour",
+          families: selectableFamilies.filter((family) => family.key !== context.primary.key),
+          selectedKey: context.accent.key,
+          selectionRole: "accent colour",
+          themeCategory,
+          onSelect: handleAccentColorChange
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Included families:" }),
+      context.allFamilies.map((family) => /* @__PURE__ */ jsxs(
+        "span",
         {
-          type: "button",
-          onClick: () => handleFamilyChange(family.key),
-          className: cn(
-            "group relative flex w-full items-center gap-3 rounded-sm border px-3 py-2 text-left transition-colors",
-            "border-grey-200 bg-background hover:bg-primary-800/10 hover:text-foreground dark:hover:bg-white/10",
-            isActive && "border-grey-800 dark:border-grey-400"
-          ),
+          className: "inline-flex items-center gap-2 rounded-full border border-grey-200 px-3 py-1 text-muted-foreground dark:border-grey-700",
           children: [
             /* @__PURE__ */ jsx(
               "span",
               {
-                className: "size-4 shrink-0 rounded-full",
+                className: "size-2.5 rounded-full",
                 style: { backgroundColor: getFamilySwatchColor(family) }
               }
             ),
-            /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: family.label })
+            family.label
           ]
         },
         family.key
-      );
-    }) }) }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsxs("div", { className: "grid items-start gap-6 xl:grid-cols-[minmax(0,1.5fr)_minmax(17rem,0.68fr)]", children: [
-        /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-          previewPair ? /* @__PURE__ */ jsx(
-            PairPreview,
-            {
-              family: activeFamily,
-              isRecommended: Boolean(selectedPair),
-              pair: previewPair
-            }
-          ) : /* @__PURE__ */ jsx(Card, { className: "gap-0 overflow-hidden py-0", children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "p-6 sm:min-h-[26rem] sm:p-8",
-              style: {
-                backgroundColor: selectedBackground.hex,
-                color: selectedBackground.tone >= 600 ? "#ffffff" : "#002664"
-              },
-              children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-[22rem] flex-col justify-between gap-8", children: [
-                /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 rounded-full border border-current bg-transparent px-3 py-1 text-[0.72rem] font-semibold tracking-[0.16em] uppercase", children: [
-                  /* @__PURE__ */ jsx(Icons.palette, { "data-slot": "icon", className: "size-4" }),
-                  activeFamily.label
-                ] }) }),
-                /* @__PURE__ */ jsxs("div", { className: "max-w-xl space-y-4 pb-12 sm:pb-16", children: [
-                  /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: "Approved background" }),
-                  /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-                    /* @__PURE__ */ jsx("h3", { className: "max-w-lg text-4xl leading-none font-bold text-current sm:text-5xl", children: "Pair colour with confidence." }),
-                    /* @__PURE__ */ jsx("p", { className: "max-w-md text-sm/6 sm:text-base/7", children: "This approved background tone does not currently have a recommended AAA foreground in this tool." })
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
-                  /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 rounded-full bg-current/10 px-4 py-2 text-sm font-semibold", children: [
-                    "No recommendation",
-                    /* @__PURE__ */ jsx(Icons.info, { "data-slot": "icon", className: "size-4" })
-                  ] }),
-                  /* @__PURE__ */ jsx("span", { className: "inline-flex rounded-full border border-current px-4 py-2 text-sm", children: selectedBackground.token })
-                ] })
-              ] })
-            }
-          ) }),
-          /* @__PURE__ */ jsxs(Card, { children: [
-            /* @__PURE__ */ jsxs(CardHeader, { className: "gap-2 border-b", children: [
-              /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "Background tone strip" }),
-              /* @__PURE__ */ jsx(CardDescription, { children: "Only approved background tones are shown. Filled chips have a recommended AAA foreground pair, and dark backgrounds may also offer white text where it passes AAA." })
-            ] }),
-            /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
-              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-5 gap-2 sm:grid-cols-7 lg:grid-cols-10 xl:grid-cols-[repeat(19,minmax(0,1fr))]", children: backgroundOptions.map((color2) => {
-                const pair = getRecommendedPairForBackground(activeFamily, color2.token);
-                const hasWhiteExample = supportsWhiteForegroundPreview(color2);
-                const isSelected = selectedBackground.token === color2.token;
-                return /* @__PURE__ */ jsxs(
+      ))
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxs("div", { className: "grid items-start gap-6 xl:grid-cols-[minmax(0,1.5fr)_minmax(18rem,0.72fr)]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+        previewPair ? /* @__PURE__ */ jsx(
+          PairPreview,
+          {
+            familySummary,
+            isRecommended: Boolean(selectedPair),
+            pair: previewPair
+          }
+        ) : /* @__PURE__ */ jsx(
+          PreviewFallbackCard,
+          {
+            familySummary,
+            selectedBackground
+          }
+        ),
+        /* @__PURE__ */ jsxs(Card, { children: [
+          /* @__PURE__ */ jsxs(CardHeader, { className: "gap-2 border-b", children: [
+            /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "Approved backgrounds" }),
+            /* @__PURE__ */ jsx(CardDescription, { children: "Choose from your selected primary, accent, and grey background tones. Filled chips have at least one recommended AAA foreground. Foregrounds are limited to white and tones 50, 200, 400, 600, and 800." })
+          ] }),
+          /* @__PURE__ */ jsxs(CardContent, { className: "space-y-5", children: [
+            context.backgroundGroups.map((group) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-medium", children: group.label }),
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: group.family.label })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2 sm:grid-cols-6", children: group.backgrounds.map((background) => {
+                const pairs = context.pairsByBackground[background.token] ?? [];
+                const preferredPair = selectedBackground.token === background.token ? selectedPair ?? getPreferredPairForBackground(pairs) : getPreferredPairForBackground(pairs);
+                const hasWhiteExample = supportsWhiteForegroundPreview(background);
+                const isSelected = selectedBackground.token === background.token;
+                const ariaLabel = pairs.length > 0 ? `Select ${background.token} background, recommended with ${preferredPair?.foreground.token ?? "an AAA foreground"}` : hasWhiteExample ? `Select ${background.token} background, white text example available` : `Select ${background.token} background, no recommended foreground in this tool`;
+                return /* @__PURE__ */ jsx(
                   "button",
                   {
                     type: "button",
-                    onClick: () => handleBackgroundChange(color2.token),
+                    "aria-label": ariaLabel,
+                    "aria-pressed": isSelected,
+                    onClick: () => handleBackgroundChange(background.token),
                     className: cn(
                       "group relative h-12 rounded-sm border border-grey-200 transition-transform hover:scale-[1.03] dark:border-grey-700",
                       isSelected && "ring-2 ring-primary-500 ring-offset-2 ring-offset-background"
                     ),
-                    style: { backgroundColor: color2.hex },
-                    children: [
-                      pair ? /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: "absolute top-1/2 left-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/30 shadow-sm",
-                          style: { backgroundColor: pair.foreground.hex }
-                        }
-                      ) : null,
-                      /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
-                        color2.token,
-                        pair ? ` paired with ${pair.foreground.token}` : hasWhiteExample ? " has a white text example in this tool" : " has no recommended pair in this tool"
-                      ] })
-                    ]
+                    style: { backgroundColor: background.hex },
+                    children: preferredPair ? /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "absolute top-1/2 left-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/30 shadow-sm",
+                        style: { backgroundColor: preferredPair.foreground.hex }
+                      }
+                    ) : null
                   },
-                  color2.token
+                  background.token
                 );
-              }) }),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm text-muted-foreground", children: [
-                /* @__PURE__ */ jsxs("span", { children: [
-                  "Selected background:",
-                  " ",
-                  /* @__PURE__ */ jsx("strong", { className: "text-foreground", children: selectedBackground.token })
-                ] }),
-                /* @__PURE__ */ jsxs("span", { children: [
-                  selectedPair ? "Recommended foreground:" : "White text example:",
-                  " ",
-                  /* @__PURE__ */ jsx("strong", { className: "text-foreground", children: selectedPair?.foreground.token ?? whiteForegroundExample?.foreground.token ?? "None" })
-                ] })
+              }) })
+            ] }, group.key)),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm text-muted-foreground", children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Selected background:",
+                " ",
+                /* @__PURE__ */ jsx("strong", { className: "text-foreground", children: selectedBackground.token })
+              ] }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                selectedPair ? "Selected foreground:" : "White text example:",
+                " ",
+                /* @__PURE__ */ jsx("strong", { className: "text-foreground", children: selectedPair?.foreground.token ?? whiteForegroundExample?.foreground.token ?? "None" })
               ] })
             ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
-            /* @__PURE__ */ jsx(PairDetailCard, { color: selectedBackground, format, role: "Background" }),
-            detailForeground ? /* @__PURE__ */ jsx(PairDetailCard, { color: detailForeground, format, role: "Foreground" }) : /* @__PURE__ */ jsxs(Card, { className: "gap-4", children: [
-              /* @__PURE__ */ jsx(CardHeader, { className: "gap-3 border-b", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-                /* @__PURE__ */ jsx(CardTitle, { children: "Foreground" }),
-                /* @__PURE__ */ jsx(CardDescription, { children: "No recommended foreground available" })
-              ] }) }),
-              /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Select another approved tone or review the recommended pairs list for the same family." }) })
-            ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxs(Card, { className: "h-fit", children: [
-          /* @__PURE__ */ jsxs(CardHeader, { className: "gap-2 border-b", children: [
-            /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "Recommended pairs" }),
-            /* @__PURE__ */ jsx(CardDescription, { children: "Recommended AAA combinations for this family, including white on eligible dark backgrounds." })
-          ] }),
-          /* @__PURE__ */ jsx(CardContent, { className: "grid gap-3", children: activeFamily.recommendedPairs.map((pair) => {
-            const isActive = selectedPair?.id === pair.id;
-            return /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: () => handlePairChange(pair.id),
-                className: cn(
-                  "rounded-sm border p-4 text-left transition-colors",
-                  isActive ? "border-primary-500 bg-primary-50/70 dark:bg-primary-950/30" : "border-grey-200 hover:border-grey-400 hover:bg-grey-50 dark:border-grey-700 dark:hover:border-grey-500 dark:hover:bg-grey-900/70"
-                ),
-                children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                      /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          className: "size-11 rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
-                          style: { backgroundColor: pair.background.hex }
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          className: "size-11 rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
-                          style: { backgroundColor: pair.foreground.hex }
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-grey-200 px-2.5 py-1 text-xs font-semibold text-muted-foreground dark:border-grey-700", children: [
-                      /* @__PURE__ */ jsx(Icons.contrast, { "data-slot": "icon", className: "size-4" }),
-                      pair.rating
-                    ] })
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+          /* @__PURE__ */ jsx(PairDetailCard, { color: selectedBackground, format, role: "Background" }),
+          detailForeground ? /* @__PURE__ */ jsx(PairDetailCard, { color: detailForeground, format, role: "Foreground" }) : /* @__PURE__ */ jsxs(Card, { className: "gap-4", children: [
+            /* @__PURE__ */ jsx(CardHeader, { className: "gap-3 border-b", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx(CardTitle, { children: "Foreground" }),
+              /* @__PURE__ */ jsx(CardDescription, { children: "No recommended foreground available" })
+            ] }) }),
+            /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Select another approved tone or review the recommended foregrounds for the same background." }) })
+          ] })
+        ] }),
+        selectedPair ? /* @__PURE__ */ jsx(PairComplianceCard, { pair: selectedPair }) : null,
+        showWhiteForegroundExample && whiteForegroundExample ? /* @__PURE__ */ jsx(WhiteTextExampleCard, { pair: whiteForegroundExample }) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxs(Card, { className: "h-fit", children: [
+        /* @__PURE__ */ jsxs(CardHeader, { className: "gap-2 border-b", children: [
+          /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "Recommended foregrounds" }),
+          /* @__PURE__ */ jsxs(CardDescription, { children: [
+            "AAA combinations for ",
+            selectedBackground.token,
+            ", drawn from",
+            " ",
+            context.primary.label,
+            ", ",
+            context.accent.label,
+            ", Grey, and white using only foreground tones 50, 200, 400, 600, and 800."
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(CardContent, { className: "grid gap-3", children: selectedBackgroundPairs.length > 0 ? selectedBackgroundPairs.map((pair) => {
+          const isActive = selectedPair?.id === pair.id;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Use ${pair.foreground.token} on ${pair.background.token}`,
+              "aria-pressed": isActive,
+              onClick: () => handlePairChange(pair.id),
+              className: cn(
+                "rounded-sm border p-4 text-left transition-colors",
+                isActive ? "border-primary-500 bg-primary-50/70 dark:bg-primary-950/30" : "border-grey-200 hover:border-grey-400 hover:bg-grey-50 dark:border-grey-700 dark:hover:border-grey-500 dark:hover:bg-grey-900/70"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "size-11 rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
+                        style: { backgroundColor: pair.background.hex }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "size-11 rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
+                        style: { backgroundColor: pair.foreground.hex }
+                      }
+                    )
                   ] }),
-                  /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-1", children: [
-                    /* @__PURE__ */ jsxs("p", { className: "font-medium text-foreground", children: [
-                      pair.background.token,
-                      " / ",
-                      pair.foreground.token
-                    ] }),
-                    /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
-                      pair.contrastRatio.toFixed(2),
-                      ":1 contrast ratio"
-                    ] })
+                  /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-grey-200 px-2.5 py-1 text-xs font-semibold text-muted-foreground dark:border-grey-700", children: [
+                    /* @__PURE__ */ jsx(Icons.contrast, { "data-slot": "icon", className: "size-4" }),
+                    pair.rating
                   ] })
-                ]
-              },
-              pair.id
-            );
-          }) })
-        ] }) })
-      ] }),
-      selectedPair ? /* @__PURE__ */ jsx(PairComplianceCard, { pair: selectedPair }) : null,
-      showWhiteForegroundExample && whiteForegroundExample ? /* @__PURE__ */ jsx(WhiteTextExampleCard, { pair: whiteForegroundExample }) : null
-    ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-1", children: [
+                  /* @__PURE__ */ jsxs("p", { className: "font-medium text-foreground", children: [
+                    pair.background.token,
+                    " / ",
+                    pair.foreground.token
+                  ] }),
+                  /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+                    pair.foreground.familyLabel,
+                    " on ",
+                    pair.background.familyLabel
+                  ] }),
+                  /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+                    pair.contrastRatio.toFixed(2),
+                    ":1 contrast ratio"
+                  ] })
+                ] })
+              ]
+            },
+            pair.id
+          );
+        }) : /* @__PURE__ */ jsx("div", { className: "rounded-sm border border-grey-200 p-4 text-sm text-muted-foreground dark:border-grey-700", children: "No recommended AAA foregrounds are available for this background." }) })
+      ] }) })
+    ] }) })
   ] });
 }
 function ColorPairingTool() {
@@ -18366,7 +18610,7 @@ function FormMessage({ className, ...props }) {
 
 // package.json
 var package_default = {
-  version: "1.98.0"};
+  version: "1.99.0"};
 var SluggerContext = React5__default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";