@nswds/app 1.105.0 → 1.107.0

package/dist/index.cjs

@@ -19003,6 +19003,7 @@ var DEFAULT_INITIAL_PAIR_ID4 = "nsw-blue-800:nsw-blue-200";
 var COLOR_PAIRING_TOOL_V4_PATH = "/core/colour/colour-pairing-tool-4";
 var MOBILE_RESULT_SCROLL_QUERY2 = "(max-width: 1023px)";
 var PERSISTENT_DRAWER_MIN_WIDTH_QUERY2 = "(min-width: 1280px)";
+var INITIAL_VISIBLE_ALTERNATIVES = 6;
 var COLOR_PAIRING_TOOL_DRAWER_STEPS2 = [
   {
     id: "colours",
@@ -19066,10 +19067,10 @@ function getWhiteForegroundGuidance4(pair) {
 }
 function getPreviewGuidance4(pair, isRecommended) {
   if (!isWhiteForegroundPair4(pair)) {
-    return "Use only AAA-recommended combinations across your selected primary, accent, and grey families.";
+    return isRecommended ? "Use this pairing for headings, body copy, and actions on the selected background." : "Use this approved alternative when you need a different tone or stronger emphasis.";
   }
   if (isRecommended) {
-    return "Use white text on dark colour only when it meets AAA for headings, body copy, and calls to action.";
+    return "Use white text on this background for headings, body copy, and actions only while it maintains AAA contrast.";
   }
   return getWhiteForegroundGuidance4(pair);
 }
@@ -19213,37 +19214,19 @@ function getRecommendationCategory2(pair, bestPair, context) {
   if (pair.foreground.familyKey === context.primary.key) return "primary-family";
   return "approved";
 }
-function getRecommendationCategoryLabel2(category) {
-  switch (category) {
-    case "best":
-      return "Best recommended";
-    case "same-family":
-      return "Same family";
-    case "accent-family":
-      return "Accent family";
-    case "grey-option":
-      return "Grey option";
-    case "primary-family":
-      return "Primary family";
-    case "white":
-      return "White";
-    default:
-      return "Approved option";
-  }
-}
 function getRecommendationSortRank2(category) {
   switch (category) {
     case "best":
       return 0;
     case "same-family":
       return 1;
-    case "accent-family":
+    case "primary-family":
       return 2;
-    case "grey-option":
+    case "accent-family":
       return 3;
-    case "white":
+    case "grey-option":
       return 4;
-    case "primary-family":
+    case "white":
       return 5;
     default:
       return 6;
@@ -19253,13 +19236,14 @@ function getRecommendationGroupId(category) {
   switch (category) {
     case "best":
     case "same-family":
-    case "accent-family":
-    case "grey-option":
     case "primary-family":
-      return "good-alternatives";
+      return "closest";
+    case "accent-family":
     case "white":
     case "approved":
-      return "edge-options";
+      return "expressive";
+    case "grey-option":
+      return "neutral";
     default:
       return null;
   }
@@ -19275,22 +19259,29 @@ function buildRecommendationGroups(items) {
       return accumulator;
     },
     {
-      "edge-options": [],
-      "good-alternatives": []
+      closest: [],
+      expressive: [],
+      neutral: []
     }
   );
   const groups = [
     {
-      id: "good-alternatives",
-      title: "Good alternatives",
-      description: "These pairings still meet AAA and stay close to the NSW recommendation in tone, neutrality, or emphasis.",
-      items: groupedItems["good-alternatives"]
+      id: "closest",
+      title: "Closest to default",
+      description: "Stays closest to the NSW default in tone and overall treatment.",
+      items: groupedItems.closest
+    },
+    {
+      id: "expressive",
+      title: "More expressive (accent)",
+      description: "Brings more accent or emphasis into the foreground treatment.",
+      items: groupedItems.expressive
     },
     {
-      id: "edge-options",
-      title: "Edge and less common options",
-      description: "These are valid AAA pairings, but they are less typical NSW defaults and should be used more deliberately.",
-      items: groupedItems["edge-options"]
+      id: "neutral",
+      title: "Neutral/system",
+      description: "Uses quieter neutral contrast for system or utility treatments.",
+      items: groupedItems.neutral
     }
   ];
   return groups.filter((group) => group.items.length > 0);
@@ -19336,6 +19327,18 @@ function getPairingCopyText2(pair) {
     accessibilityLine
   ].join("\n");
 }
+function getAccessibilitySummaryLine(pair) {
+  if (!pair) {
+    return "Contrast unavailable";
+  }
+  if (pair.passes.aaaText) {
+    return `${pair.contrastRatio.toFixed(2)}:1 \u2014 AAA compliant (normal + large text)`;
+  }
+  if (pair.passes.aaaLarge) {
+    return `${pair.contrastRatio.toFixed(2)}:1 \u2014 AAA compliant (large text only)`;
+  }
+  return `${pair.contrastRatio.toFixed(2)}:1 \u2014 Not AAA compliant`;
+}
 function getLiveAnnouncement2(pair, background) {
   if (!background) {
     return "No approved background tones available.";
@@ -19450,65 +19453,6 @@ function BackgroundSwatchButton2({
     }
   );
 }
-function CompactAccessibilityStatus({ label, passes }) {
-  const status = passes === null ? "unavailable" : passes ? "pass" : "fail";
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-center justify-between gap-3 rounded-sm border px-4 py-3",
-        status === "pass" && "border-success-200 bg-success-50",
-        status === "fail" && "border-danger-200 bg-danger-50",
-        status === "unavailable" && "border-grey-200 bg-white"
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-foreground", children: label }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "span",
-          {
-            className: cn(
-              "inline-flex items-center gap-1 rounded-sm px-2.5 py-1 text-[0.72rem] font-semibold tracking-[0.12em] uppercase",
-              status === "pass" && "bg-success-700 text-white",
-              status === "fail" && "bg-danger-700 text-white",
-              status === "unavailable" && "bg-grey-100 text-foreground"
-            ),
-            children: [
-              status === "pass" ? /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "data-slot": "icon", className: "size-4" }) : status === "fail" ? /* @__PURE__ */ jsxRuntime.jsx(Icons.close, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.info, { "data-slot": "icon", className: "size-4" }),
-              status === "pass" ? "Pass" : status === "fail" ? "Fail" : "Unavailable"
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-function AccessibilitySummaryCard({ pair }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "gap-4 px-5 py-5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, size: 6, className: "text-foreground", trim: "normal", children: "Accessibility summary" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-grey-700", children: "Contrast ratio" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-4xl leading-none font-bold text-foreground", children: pair ? `${pair.contrastRatio.toFixed(2)}:1` : "N/A" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-3 lg:max-w-[26rem] lg:min-w-[22rem]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        CompactAccessibilityStatus,
-        {
-          label: "AAA normal text",
-          passes: pair ? pair.passes.aaaText : null
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        CompactAccessibilityStatus,
-        {
-          label: "AAA large text",
-          passes: pair ? pair.passes.aaaLarge : null
-        }
-      )
-    ] })
-  ] }) });
-}
 function CurrentResultCard2({
   bestPair,
   copiedKey,
@@ -19519,8 +19463,8 @@ function CurrentResultCard2({
 }) {
   const previewForeground = pair?.foreground.hex ?? getReadableTextColor3(selectedBackground.tone);
   const isRecommended = pair ? pair.id === bestPair?.id : false;
-  const whiteForeground = pair ? isWhiteForegroundPair4(pair) : false;
   const pairingLabel = getMainPairingLabel(pair, bestPair);
+  const accessibilitySummary = getAccessibilitySummaryLine(pair);
   const fauxButtonStyle = pair ? {
     "--btn-bg": pair.foreground.hex,
     "--btn-border": pair.foreground.hex,
@@ -19528,74 +19472,79 @@ function CurrentResultCard2({
     "--btn-icon": pair.background.hex,
     "--btn-hover-overlay": pair.background.hex
   } : null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cn("gap-0 overflow-hidden py-0", isRecommended && "border-primary-200"), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-grey-200 px-4 py-4 sm:px-6 sm:py-5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 space-y-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "span",
-          {
-            className: cn(
-              "inline-flex items-center gap-2 rounded-sm px-3 py-1 text-[0.72rem] font-semibold tracking-[0.12em] uppercase",
-              isRecommended ? "bg-primary-800 text-white" : "border border-grey-300 bg-grey-50 text-foreground"
-            ),
-            children: [
-              isRecommended ? /* @__PURE__ */ jsxRuntime.jsx(Icons.check_circle, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.info, { "data-slot": "icon", className: "size-4" }),
-              pairingLabel
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, size: 4, className: "text-foreground", trim: "normal", children: pair ? `${getPairingColorDisplayName4(pair.foreground)} on ${getPairingColorDisplayName4(pair.background)}` : `${getPairingColorDisplayName4(selectedBackground)} selected` }),
-          /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, className: "max-w-3xl text-grey-700", children: supportText })
-        ] })
-      ] }),
-      pair ? /* @__PURE__ */ jsxRuntime.jsx(
-        Button2,
-        {
-          color: "primary",
-          className: "w-full justify-center lg:w-auto lg:min-w-48",
-          onClick: onCopyPairing,
-          children: copiedKey === "current-pairing" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "data-slot": "icon", className: "size-5" }),
-            "Pairing copied"
-          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
-            "Copy pairing"
-          ] })
-        }
-      ) : null
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "p-4 sm:min-h-[26rem] sm:p-8",
-        style: {
-          backgroundColor: selectedBackground.hex,
-          color: previewForeground
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[18rem] flex-col justify-center gap-6 sm:min-h-[22rem]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-xl space-y-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: pair ? whiteForeground && !isRecommended ? "White on colour example" : whiteForeground ? "White on colour" : "Colour on colour" : "Approved background" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "max-w-lg text-3xl leading-tight font-bold text-current sm:text-5xl sm:leading-none", children: "Pair colour with confidence." }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-full text-base/6 sm:max-w-md sm:text-base/7", children: pair ? getPreviewGuidance4(pair, isRecommended) : "This approved background tone does not currently have a recommended AAA foreground in this tool. Choose another approved background tone to continue." }),
-            pair && fauxButtonStyle ? /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("gap-0 overflow-hidden py-0", isRecommended && "border-primary-200"), children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "p-4 sm:min-h-[24rem] sm:p-8",
+      style: {
+        backgroundColor: selectedBackground.hex,
+        color: previewForeground
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-[18rem] flex-col justify-between gap-8 sm:min-h-[20rem]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-3xl rounded-sm bg-white px-4 py-4 text-foreground sm:px-6 sm:py-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 space-y-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
               "span",
               {
-                "aria-hidden": "true",
-                "data-variant": "solid",
                 className: cn(
-                  buttonVariants({ variant: "solid", size: "default" }),
-                  "pointer-events-none cursor-default px-6 text-[16px] font-[700] select-none sm:px-6 sm:text-[16px] sm:font-[700]"
+                  "inline-flex items-center gap-2 rounded-sm px-3 py-1 text-[0.72rem] font-semibold tracking-[0.12em] uppercase",
+                  isRecommended ? "bg-primary-800 text-white" : "border border-grey-300 bg-grey-50 text-foreground"
                 ),
-                style: fauxButtonStyle,
-                children: "Get started"
+                children: [
+                  isRecommended ? /* @__PURE__ */ jsxRuntime.jsx(Icons.check_circle, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.info, { "data-slot": "icon", className: "size-4" }),
+                  pairingLabel
+                ]
               }
-            ) : null
-          ] })
-        ] }) })
-      }
-    )
-  ] });
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, size: 4, className: "text-foreground", trim: "normal", children: pair ? `${getPairingColorDisplayName4(pair.foreground)} on ${getPairingColorDisplayName4(pair.background)}` : `${getPairingColorDisplayName4(selectedBackground)} selected` }),
+              pair ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-mono text-[0.74rem] break-all text-muted-foreground", children: [
+                pair.foreground.token,
+                " on ",
+                pair.background.token
+              ] }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-[0.74rem] break-all text-muted-foreground", children: selectedBackground.token }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-foreground", children: accessibilitySummary }),
+              /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, className: "max-w-3xl text-grey-700", children: supportText })
+            ] })
+          ] }),
+          pair ? /* @__PURE__ */ jsxRuntime.jsx(
+            Button2,
+            {
+              color: "primary",
+              className: "w-full justify-center lg:w-auto lg:min-w-48",
+              onClick: onCopyPairing,
+              children: copiedKey === "current-pairing" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "data-slot": "icon", className: "size-5" }),
+                "Pairing copied"
+              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+                "Copy pairing"
+              ] })
+            }
+          ) : null
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-xl space-y-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "max-w-lg text-3xl leading-tight font-bold text-current sm:text-4xl", children: "Example heading" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-md text-base/7", children: pair ? getPreviewGuidance4(pair, isRecommended) : "This approved background does not currently have an AAA foreground in this tool. Choose another approved background to continue." })
+          ] }),
+          pair && fauxButtonStyle ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-variant": "solid",
+              className: cn(
+                buttonVariants({ variant: "solid", size: "default" }),
+                "pointer-events-none cursor-default self-start px-6 text-[16px] font-[700] select-none sm:px-6 sm:text-[16px] sm:font-[700]"
+              ),
+              style: fauxButtonStyle,
+              children: "Primary action"
+            }
+          ) : null
+        ] })
+      ] })
+    }
+  ) });
 }
 function RecommendationCard2({
   copiedKey,
@@ -19609,8 +19558,8 @@ function RecommendationCard2({
     "div",
     {
       className: cn(
-        "relative rounded-sm border bg-white p-4 text-left transition-colors focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden",
-        isSelected ? "border-primary-800 bg-primary-50/60 ring-1 ring-primary-700" : "border-grey-200 hover:border-primary-500 hover:bg-grey-50"
+        "relative rounded-sm border bg-white px-3 py-2.5 text-left transition-colors focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+        isSelected ? "border-primary-800 bg-primary-50/40" : "border-grey-200 hover:border-grey-400"
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -19623,65 +19572,45 @@ function RecommendationCard2({
             className: "absolute inset-0 rounded-sm focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-none relative z-10", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "span",
-              {
-                className: cn(
-                  "inline-flex items-center gap-2 rounded-sm px-2.5 py-1 text-[0.68rem] font-semibold tracking-[0.12em] uppercase",
-                  item.category === "best" ? "bg-primary-800 text-white" : "border border-grey-300 bg-grey-50 text-foreground"
-                ),
-                children: [
-                  item.category === "best" ? /* @__PURE__ */ jsxRuntime.jsx(Icons.check_circle, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.info, { "data-slot": "icon", className: "size-4" }),
-                  item.categoryLabel
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-auto shrink-0 self-start", children: /* @__PURE__ */ jsxRuntime.jsxs(
-              Button2,
-              {
-                variant: "ghost",
-                color: "grey",
-                size: "sm",
-                onClick: onCopyPairing,
-                "aria-label": `Copy pairing ${pair.background.token} and ${pair.foreground.token}`,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
-                  copiedKey === `pair:${pair.id}` ? "Copied" : "Copy"
-                ]
-              }
-            ) })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-none relative z-10 flex items-start gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-0.5 w-12 shrink-0 overflow-hidden rounded-[2px] border border-black/10", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-9 w-full", style: { backgroundColor: pair.background.hex } }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2.5 w-full", style: { backgroundColor: pair.foreground.hex } })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 sm:grid-cols-[7.5rem_minmax(0,1fr)]", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden rounded-[2px] border border-black/10", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-20 w-full", style: { backgroundColor: pair.background.hex } }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-full", style: { backgroundColor: pair.foreground.hex } })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-semibold text-foreground", children: [
+                getPairingColorDisplayName4(pair.foreground),
+                " on",
+                " ",
+                getPairingColorDisplayName4(pair.background)
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 space-y-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-semibold text-foreground", children: getPairingColorDisplayName4(pair.foreground) }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 font-mono text-[0.74rem] break-all text-muted-foreground", children: pair.foreground.token })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
-                  pair.foreground.familyLabel,
-                  " on ",
-                  pair.background.familyLabel
-                ] })
-              ] })
+              item.category === "best" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex rounded-sm bg-primary-800 px-2 py-1 text-[0.68rem] font-semibold tracking-[0.12em] text-white uppercase", children: "Default" }) : null,
+              isSelected ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex rounded-sm border border-primary-800 px-2 py-1 text-[0.68rem] font-semibold tracking-[0.12em] text-primary-800 uppercase", children: "Current" }) : null
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex flex-col items-start gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex rounded-sm border border-grey-300 px-2.5 py-1 text-sm font-semibold text-foreground", children: [
-                  pair.contrastRatio.toFixed(2),
-                  ":1"
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex rounded-sm bg-success-700 px-2.5 py-1 text-[0.72rem] font-semibold tracking-[0.12em] text-white uppercase", children: "AAA" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-primary-800", children: isSelected ? "Selected answer" : "Use pairing" })
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-mono text-[0.72rem] break-all text-muted-foreground", children: [
+              pair.foreground.token,
+              " on ",
+              pair.background.token
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+              pair.contrastRatio.toFixed(2),
+              ":1 contrast"
             ] })
-          ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-auto shrink-0 self-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+            Button2,
+            {
+              variant: "ghost",
+              color: "grey",
+              size: "icon",
+              className: "size-8 text-muted-foreground hover:text-foreground",
+              onClick: onCopyPairing,
+              "aria-label": `Copy pairing ${pair.background.token} and ${pair.foreground.token}`,
+              title: copiedKey === `pair:${pair.id}` ? "Copied" : "Copy pairing",
+              children: copiedKey === `pair:${pair.id}` ? /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.content_copy, { "data-slot": "icon", className: "size-4" })
+            }
+          ) })
         ] })
       ]
     }
@@ -19692,20 +19621,14 @@ function RecommendationGroupSection({
   description,
   title
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, size: 6, className: "text-foreground", trim: "normal", children: title }),
-      /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, children: description })
+      /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, className: "text-muted-foreground", children: description })
     ] }),
     children
   ] });
 }
-function DrawerSummaryItem({ label, value }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 border-t border-grey-200 pt-3 first:border-t-0 first:pt-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.72rem] font-semibold tracking-[0.12em] text-muted-foreground uppercase", children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-foreground", children: value })
-  ] });
-}
 function TechnicalDetailsPanel2({
   color: color2,
   copiedKey,
@@ -19815,11 +19738,12 @@ function ColorPairingToolV4Content({
   const [selectedPairId, setSelectedPairId] = React5.useState(initialState.selectedPairId);
   const [drawerStepIndex, setDrawerStepIndex] = React5.useState(0);
   const [isCompactControlsOpen, setIsCompactControlsOpen] = React5.useState(false);
+  const [isShowingAllAlternatives, setIsShowingAllAlternatives] = React5.useState(false);
+  const [isTechnicalDetailsOpen, setIsTechnicalDetailsOpen] = React5.useState(false);
   const [, copyToClipboardRaw] = usehooks.useCopyToClipboard();
   const [copiedKey, setCopiedKey] = React5.useState(null);
   const copiedKeyTimeoutRef = React5.useRef(null);
   const resultSectionRef = React5.useRef(null);
-  const technicalDetailsSectionRef = React5.useRef(null);
   const noValidStateRef = React5.useRef(/* @__PURE__ */ new Set());
   const technicalDetailsViewedRef = React5.useRef(false);
   const emitAnalyticsEvent = React5.useCallback(
@@ -19902,7 +19826,6 @@ function ColorPairingToolV4Content({
       const category = getRecommendationCategory2(pair, bestRecommendedPair, context);
       return {
         category,
-        categoryLabel: getRecommendationCategoryLabel2(category),
         pair
       };
     }).sort(
@@ -19915,6 +19838,37 @@ function ColorPairingToolV4Content({
     ),
     [recommendationItems, selectedPair?.id]
   );
+  const visibleAlternativeRecommendationGroups = React5.useMemo(() => {
+    if (isShowingAllAlternatives) {
+      return alternativeRecommendationGroups;
+    }
+    let remaining = INITIAL_VISIBLE_ALTERNATIVES;
+    return alternativeRecommendationGroups.reduce((groups, group) => {
+      if (remaining <= 0) {
+        return groups;
+      }
+      const items = group.items.slice(0, remaining);
+      if (items.length > 0) {
+        groups.push({
+          ...group,
+          items
+        });
+        remaining -= items.length;
+      }
+      return groups;
+    }, []);
+  }, [alternativeRecommendationGroups, isShowingAllAlternatives]);
+  const hiddenAlternativeCount = React5.useMemo(() => {
+    const totalAlternatives = alternativeRecommendationGroups.reduce(
+      (count, group) => count + group.items.length,
+      0
+    );
+    const visibleAlternatives = visibleAlternativeRecommendationGroups.reduce(
+      (count, group) => count + group.items.length,
+      0
+    );
+    return Math.max(0, totalAlternatives - visibleAlternatives);
+  }, [alternativeRecommendationGroups, visibleAlternativeRecommendationGroups]);
   const liveAnnouncement = React5.useMemo(
     () => getLiveAnnouncement2(previewPair, selectedBackground),
     [previewPair, selectedBackground]
@@ -20022,6 +19976,7 @@ function ColorPairingToolV4Content({
       selectedBackgroundToken,
       null
     );
+    setIsShowingAllAlternatives(false);
     applyResolvedSelection(nextState);
     emitAnalyticsEvent({
       name: "palette_change",
@@ -20041,6 +19996,7 @@ function ColorPairingToolV4Content({
       selectedBackgroundToken,
       null
     );
+    setIsShowingAllAlternatives(false);
     applyResolvedSelection(nextState);
     emitAnalyticsEvent({
       name: "primary_change",
@@ -20060,6 +20016,7 @@ function ColorPairingToolV4Content({
       selectedBackgroundToken,
       null
     );
+    setIsShowingAllAlternatives(false);
     applyResolvedSelection(nextState);
     emitAnalyticsEvent({
       name: "accent_change",
@@ -20080,6 +20037,7 @@ function ColorPairingToolV4Content({
       selectedPairId: nextSelectedPairId,
       themeCategory
     };
+    setIsShowingAllAlternatives(false);
     applyResolvedSelection(nextState);
     emitAnalyticsEvent({
       name: "background_selection",
@@ -20153,50 +20111,17 @@ function ColorPairingToolV4Content({
     themeCategory
   ]);
   React5.useEffect(() => {
-    if (technicalDetailsViewedRef.current) {
+    if (!isTechnicalDetailsOpen || technicalDetailsViewedRef.current) {
       return;
     }
-    const section = technicalDetailsSectionRef.current;
-    if (!section) {
-      return;
-    }
-    const emitViewedEvent = () => {
-      if (technicalDetailsViewedRef.current) {
-        return;
-      }
-      technicalDetailsViewedRef.current = true;
-      emitAnalyticsEvent({
-        name: "technical_details_viewed",
-        ...buildAnalyticsContext({
-          source: "details"
-        })
-      });
-    };
-    if (typeof IntersectionObserver === "undefined") {
-      const rect = section.getBoundingClientRect();
-      const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
-      if (rect.top < viewportHeight && rect.bottom > 0) {
-        emitViewedEvent();
-      }
-      return;
-    }
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const [entry] = entries;
-        if (entry?.isIntersecting) {
-          emitViewedEvent();
-          observer.disconnect();
-        }
-      },
-      {
-        threshold: 0.2
-      }
-    );
-    observer.observe(section);
-    return () => {
-      observer.disconnect();
-    };
-  }, [buildAnalyticsContext, emitAnalyticsEvent]);
+    technicalDetailsViewedRef.current = true;
+    emitAnalyticsEvent({
+      name: "technical_details_viewed",
+      ...buildAnalyticsContext({
+        source: "details"
+      })
+    });
+  }, [buildAnalyticsContext, emitAnalyticsEvent, isTechnicalDetailsOpen]);
   if (!selectedBackground) {
     return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "px-6 py-6", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "No approved background tones available" }),
@@ -20342,36 +20267,10 @@ function ColorPairingToolV4Content({
             },
             group.key
           )) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("section", { className: "h-full w-full shrink-0 overflow-y-auto px-5 py-5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 pr-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-sm border border-grey-200 bg-white px-4 py-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 4, size: 6, className: "text-foreground", trim: "normal", children: "Current configuration" }),
-                /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, children: "The drawer only sets the palette, families, and background. The result panel is where the pairing is shown and, if needed, overridden." })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-5 space-y-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  DrawerSummaryItem,
-                  {
-                    label: "Palette",
-                    value: themeCategory === "brand" ? "Brand palette" : "Aboriginal palette"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(DrawerSummaryItem, { label: "Primary family", value: context.primary.label }),
-                /* @__PURE__ */ jsxRuntime.jsx(DrawerSummaryItem, { label: "Accent family", value: context.accent.label }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  DrawerSummaryItem,
-                  {
-                    label: "Background",
-                    value: getPairingColorDisplayName4(selectedBackground)
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-sm border border-grey-200 bg-grey-50 px-4 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 4, size: 6, className: "text-foreground", trim: "normal", children: "Review the result on the right" }),
-              /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, children: "The right panel always shows the current NSW default pairing for this selection. Alternative AAA options stay there as a secondary override path." })
-            ] }) })
-          ] }) })
+          /* @__PURE__ */ jsxRuntime.jsx("section", { className: "h-full w-full shrink-0 overflow-y-auto px-5 py-5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4 pr-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-sm border border-grey-200 bg-grey-50 px-4 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 4, size: 6, className: "text-foreground", trim: "normal", children: "Review the result on the right" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, children: "The right panel shows one recommended pairing first. Use approved alternatives there only when you need a different tone or emphasis." })
+          ] }) }) }) })
         ]
       }
     ) }),
@@ -20409,7 +20308,7 @@ function ColorPairingToolV4Content({
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "gap-4 px-5 py-5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "Configuration" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, children: "Open the drawer to change palette, colour families, or background. The result panel always shows the current NSW pairing for this selection." }),
+            /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, children: "Open the drawer to set palette, colour families, and background. The result panel shows the NSW recommendation first." }),
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: compactControlsSummary })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -20464,53 +20363,99 @@ function ColorPairingToolV4Content({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("section", { children: /* @__PURE__ */ jsxRuntime.jsx(AccessibilitySummaryCard, { pair: previewPair }) }),
-      bestRecommendedPair || alternativeRecommendationGroups.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "Alternative AAA options" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, children: "These approved alternatives can be used when a different tone, stronger emphasis, or a more neutral system treatment is needed." })
+      bestRecommendedPair || alternativeRecommendationGroups.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "Approved alternatives" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, className: "text-muted-foreground", children: "These are approved alternatives for different tone or emphasis." })
         ] }),
-        alternativeRecommendationGroups.length > 0 ? alternativeRecommendationGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsx(
-          RecommendationGroupSection,
-          {
-            title: group.title,
-            description: group.description,
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: group.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-              RecommendationCard2,
-              {
-                copiedKey,
-                item,
-                isSelected: item.pair.id === selectedPair?.id,
-                onCopyPairing: () => copyValue(
-                  `pair:${item.pair.id}`,
-                  getPairingCopyText2(item.pair),
-                  "Pairing copied",
-                  item.pair.id === bestRecommendedPair?.id ? {
-                    name: "best_recommendation_copied",
-                    ...buildAnalyticsContext({
-                      foregroundToken: item.pair.foreground.token,
-                      pairId: item.pair.id,
-                      source: "recommendations-list"
-                    })
-                  } : void 0
-                ),
-                onSelect: () => handlePairChange(item.pair.id, "recommendations-list")
-              },
-              item.pair.id
-            )) })
-          },
-          group.id
-        )) : /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "px-6 py-6", children: [
+        alternativeRecommendationGroups.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          visibleAlternativeRecommendationGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsx(
+            RecommendationGroupSection,
+            {
+              title: group.title,
+              description: group.description,
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: group.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                RecommendationCard2,
+                {
+                  copiedKey,
+                  item,
+                  isSelected: item.pair.id === selectedPair?.id,
+                  onCopyPairing: () => copyValue(
+                    `pair:${item.pair.id}`,
+                    getPairingCopyText2(item.pair),
+                    "Pairing copied",
+                    item.pair.id === bestRecommendedPair?.id ? {
+                      name: "best_recommendation_copied",
+                      ...buildAnalyticsContext({
+                        foregroundToken: item.pair.foreground.token,
+                        pairId: item.pair.id,
+                        source: "recommendations-list"
+                      })
+                    } : void 0
+                  ),
+                  onSelect: () => handlePairChange(item.pair.id, "recommendations-list")
+                },
+                item.pair.id
+              )) })
+            },
+            group.id
+          )),
+          hiddenAlternativeCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
+            Button2,
+            {
+              variant: "ghost",
+              color: "grey",
+              className: "w-full justify-center border border-grey-200 bg-white sm:w-auto",
+              onClick: () => setIsShowingAllAlternatives(true),
+              children: [
+                "Show ",
+                hiddenAlternativeCount,
+                " more"
+              ]
+            }
+          ) : null
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "px-6 py-6", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, size: 6, className: "text-foreground", trim: "normal", children: "No other AAA alternatives" }),
           /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, className: "mt-3", children: "The NSW recommended pairing is the only AAA-compliant foreground option for this background." })
         ] })
       ] }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx("section", { ref: technicalDetailsSectionRef, className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-sm border border-grey-200 bg-white", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 border-b border-grey-200 px-4 py-4 sm:px-5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "Technical colour values" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, children: "Token, tone, HEX, RGB, HSL, and OKLCH values for the current selection." })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-4 sm:px-5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("section", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntime.jsx(Collapsible, { open: isTechnicalDetailsOpen, onOpenChange: setIsTechnicalDetailsOpen, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-sm border border-grey-200 bg-white", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: "flex w-full items-center justify-between gap-4 px-4 py-4 text-left transition-colors hover:bg-grey-50 focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden sm:px-5",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, size: 6, className: "text-foreground", trim: "normal", children: "Technical colour values" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, className: "text-muted-foreground", children: "Token, tone, HEX, RGB, HSL, and OKLCH values for advanced use." })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: cn(
+                    "inline-flex items-center gap-2 text-sm font-semibold text-primary-800",
+                    isTechnicalDetailsOpen && "text-foreground"
+                  ),
+                  children: [
+                    isTechnicalDetailsOpen ? "Hide" : "Show",
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      Icons.keyboard_arrow_down,
+                      {
+                        "data-slot": "icon",
+                        className: cn(
+                          "size-5 transition-transform",
+                          isTechnicalDetailsOpen && "rotate-180"
+                        )
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-grey-200 px-4 py-4 sm:px-5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             TechnicalDetailsPanel2,
             {
@@ -20531,20 +20476,20 @@ function ColorPairingToolV4Content({
               onCopyValue: (copyKey, value, toastLabel) => copyValue(copyKey, value, toastLabel)
             }
           )
-        ] }) })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, size: 6, className: "mb-4 text-foreground", trim: "normal", children: "Share colour pairing" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-sm border border-grey-200 bg-white p-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Copy this URL to share your current colour pairing:" }),
+        ] }) }) })
+      ] }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, size: 6, className: "text-foreground", trim: "normal", children: "Share colour pairing" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-sm border border-grey-200 bg-white px-4 py-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Copy a link to this current result." }),
             /* @__PURE__ */ jsxRuntime.jsx(
               Button2,
               {
                 variant: "ghost",
                 color: "grey",
                 size: "sm",
-                className: "shrink-0 self-center",
+                className: "shrink-0 self-start sm:self-center",
                 onClick: () => copyValue(
                   "share-url",
                   typeof window === "undefined" ? shareUrl : new URL(shareUrl, window.location.origin).toString(),
@@ -20582,6 +20527,1623 @@ function ColorPairingToolV4({
     }
   ) });
 }
+var PREFERRED_BACKGROUND_TONES5 = [400, 600, 200, 800, 100, 50];
+var DEFAULT_VISIBLE_FORMATS5 = ["hex", "rgb", "hsl", "oklch"];
+var DEFAULT_INITIAL_BACKGROUND_TOKEN5 = "nsw-blue-800";
+var DEFAULT_INITIAL_PAIR_ID5 = "nsw-blue-800:nsw-blue-200";
+var COLOR_PAIRING_TOOL_V5_PATH = "/core/colour/colour-pairing-tool-5";
+var MOBILE_RESULT_SCROLL_QUERY3 = "(max-width: 1023px)";
+var PERSISTENT_DRAWER_MIN_WIDTH_QUERY3 = "(min-width: 1280px)";
+var INITIAL_VISIBLE_ALTERNATIVES2 = 6;
+var COLOR_PAIRING_TOOL_DRAWER_STEPS3 = [
+  {
+    id: "colours",
+    title: "Choose colours",
+    eyebrow: "Step 1 of 3",
+    description: "Select the palette, primary family, and accent family."
+  },
+  {
+    id: "backgrounds",
+    title: "Choose background",
+    eyebrow: "Step 2 of 3",
+    description: "Pick the background tone that you want to pair."
+  },
+  {
+    id: "refine",
+    title: "Refine or override recommendation",
+    eyebrow: "Step 3 of 3",
+    description: "Use the result panel to review the NSW default pairing and override it only when a different approved option is needed."
+  }
+];
+var COLOR_PAIRING_TOOL_V5_ANALYTICS_EVENT = "nsw-colour-pairing-tool-v5";
+function getToneFromToken5(token) {
+  if (!token) return null;
+  const match = token.match(/-(\d+)$/);
+  return match ? Number.parseInt(match[1], 10) : null;
+}
+function getFamilySwatchColor5(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 getFamilySelectorLabel5(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 getPairingColorDisplayName5(color2) {
+  return color2.name ?? `${color2.familyLabel} ${color2.tone}`;
+}
+function isWhiteForegroundPair5(pair) {
+  return pair.foreground.token === "white";
+}
+function isLargeTextOnlyPair3(pair) {
+  return pair.passes.aaaLarge && !pair.passes.aaaText;
+}
+function getWhiteForegroundGuidance5(pair) {
+  if (pair.passes.aaaText) {
+    return "White is approved for headings, body copy, and calls to action on this background.";
+  }
+  if (pair.passes.aaaLarge) {
+    return "Use white only for WCAG large text on this background, such as headings at 24px+ or bold text at 18.5px+. Keep sentence-case body copy at 16px+ and use a darker recommended foreground instead.";
+  }
+  return "Do not use white on this background. Choose one of the recommended foregrounds below instead.";
+}
+function getPreviewGuidance5(pair, isRecommended) {
+  if (!isWhiteForegroundPair5(pair)) {
+    return isRecommended ? "Use this pairing for headings, body copy, and actions on the selected background." : "Use this approved alternative when you need a different tone or stronger emphasis.";
+  }
+  if (isRecommended) {
+    return "Use white text on this background for headings, body copy, and actions only while it maintains AAA contrast.";
+  }
+  return getWhiteForegroundGuidance5(pair);
+}
+function getPreferredPairForBackground5(pairs, preferredPairId) {
+  if (preferredPairId) {
+    const preferredPair = pairs.find((pair) => pair.id === preferredPairId);
+    if (preferredPair) {
+      return preferredPair;
+    }
+  }
+  return pairs.find((pair) => !isWhiteForegroundPair5(pair)) ?? pairs[0] ?? null;
+}
+function getDefaultBackgroundToken5(context) {
+  for (const tone of PREFERRED_BACKGROUND_TONES5) {
+    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_TONES5) {
+    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 resolveBackgroundToken5(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 getDefaultBackgroundToken5(context);
+}
+function getInitialPairingState5(searchParams) {
+  const paletteParam = searchParams.get("palette");
+  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 context = getPairingContext(themeCategory, primaryParam, accentParam);
+  const shouldUseDefaultBrandExample = !backgroundParam && !pairParam && themeCategory === "brand" && context.primary.key === "blue" && context.accent.key === "red";
+  const defaultBackgroundToken = shouldUseDefaultBrandExample ? context.backgrounds.some(
+    (background) => background.token === DEFAULT_INITIAL_BACKGROUND_TOKEN5
+  ) ? DEFAULT_INITIAL_BACKGROUND_TOKEN5 : null : null;
+  const defaultPairId = shouldUseDefaultBrandExample && defaultBackgroundToken && context.pairsByBackground[defaultBackgroundToken]?.some(
+    (pair) => pair.id === DEFAULT_INITIAL_PAIR_ID5
+  ) ? DEFAULT_INITIAL_PAIR_ID5 : null;
+  const pairBackgroundToken = context.recommendedPairs.find((pair) => pair.id === pairParam)?.background.token ?? null;
+  const selectedBackgroundToken = resolveBackgroundToken5(
+    context,
+    backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken,
+    getToneFromToken5(backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken)
+  );
+  const selectedPairId = getPreferredPairForBackground5(
+    context.pairsByBackground[selectedBackgroundToken] ?? [],
+    pairParam ?? defaultPairId
+  )?.id ?? "";
+  return {
+    accentKey: context.accent.key,
+    primaryKey: context.primary.key,
+    selectedBackgroundToken,
+    selectedPairId,
+    themeCategory
+  };
+}
+function getReadableTextColor4(tone) {
+  return tone >= 600 ? "#ffffff" : "#002664";
+}
+function getBackgroundOptionName3(background) {
+  return background.name ?? `${background.familyLabel} ${background.tone}`;
+}
+function getMainPairingLabel2(pair, bestPair) {
+  if (!pair) {
+    return "No AAA pairing available";
+  }
+  if (pair.id === bestPair?.id) {
+    return "NSW recommended pairing";
+  }
+  if (isWhiteForegroundPair5(pair) && isLargeTextOnlyPair3(pair)) {
+    return "Large-text example only";
+  }
+  if (isWhiteForegroundPair5(pair) && !pair.passes.aaaLarge) {
+    return "Example only";
+  }
+  return "Approved alternative";
+}
+function getMainPairingSupportCopy2(pair, bestPair, context) {
+  if (!pair) {
+    return "No AAA-compliant foreground available for this background.";
+  }
+  if (pair.id === bestPair?.id) {
+    return getBestRecommendationReason3(pair, context);
+  }
+  if (isWhiteForegroundPair5(pair) && isLargeTextOnlyPair3(pair)) {
+    return "White works here for large text only. Use the NSW default for standard body copy and smaller interface text.";
+  }
+  if (isWhiteForegroundPair5(pair) && !pair.passes.aaaLarge) {
+    return "White does not meet AAA on this background. Choose a different approved background or foreground.";
+  }
+  return "Approved AAA alternative when a different tone or emphasis is needed.";
+}
+function getBestRecommendationReason3(pair, context) {
+  if (isWhiteForegroundPair5(pair)) {
+    return "Recommended because this background is dark enough to support white text at AAA contrast.";
+  }
+  if (pair.foreground.familyKey === pair.background.familyKey) {
+    return "Recommended because it stays within the same colour family while keeping clear AAA contrast.";
+  }
+  if (pair.foreground.familyKey === context.grey.key) {
+    return "Recommended because grey provides a strong neutral contrast without competing with the background.";
+  }
+  if (pair.foreground.familyKey === context.accent.key) {
+    return "Recommended because the selected accent family adds emphasis while preserving AAA contrast.";
+  }
+  if (pair.foreground.familyKey === context.primary.key) {
+    return "Recommended because the selected primary family gives the clearest AAA-compliant contrast for this background.";
+  }
+  return "Recommended because it is the clearest NSW-approved AAA pairing for this background.";
+}
+function getRecommendationCategory3(pair, bestPair, context) {
+  if (pair.id === bestPair?.id) return "best";
+  if (isWhiteForegroundPair5(pair)) return "white";
+  if (pair.foreground.familyKey === pair.background.familyKey) return "same-family";
+  if (pair.foreground.familyKey === context.accent.key) return "accent-family";
+  if (pair.foreground.familyKey === context.grey.key) return "grey-option";
+  if (pair.foreground.familyKey === context.primary.key) return "primary-family";
+  return "approved";
+}
+function getRecommendationSortRank3(category) {
+  switch (category) {
+    case "best":
+      return 0;
+    case "same-family":
+      return 1;
+    case "primary-family":
+      return 2;
+    case "accent-family":
+      return 3;
+    case "grey-option":
+      return 4;
+    case "white":
+      return 5;
+    default:
+      return 6;
+  }
+}
+function getRecommendationGroupId2(category) {
+  switch (category) {
+    case "best":
+    case "same-family":
+    case "primary-family":
+      return "closest";
+    case "accent-family":
+    case "white":
+    case "approved":
+      return "expressive";
+    case "grey-option":
+      return "neutral";
+    default:
+      return null;
+  }
+}
+function buildRecommendationGroups2(items) {
+  const groupedItems = items.reduce(
+    (accumulator, item) => {
+      const groupId = getRecommendationGroupId2(item.category);
+      if (!groupId) {
+        return accumulator;
+      }
+      accumulator[groupId].push(item);
+      return accumulator;
+    },
+    {
+      closest: [],
+      expressive: [],
+      neutral: []
+    }
+  );
+  const groups = [
+    {
+      id: "closest",
+      title: "Closest to default",
+      description: "Stays closest to the NSW default in tone and overall treatment.",
+      items: groupedItems.closest
+    },
+    {
+      id: "expressive",
+      title: "More expressive (accent)",
+      description: "Brings more accent or emphasis into the foreground treatment.",
+      items: groupedItems.expressive
+    },
+    {
+      id: "neutral",
+      title: "Neutral/system",
+      description: "Uses quieter neutral contrast for system or utility treatments.",
+      items: groupedItems.neutral
+    }
+  ];
+  return groups.filter((group) => group.items.length > 0);
+}
+function getAvailabilityMeta3(isSelected, hasPairs) {
+  if (isSelected && hasPairs) {
+    return {
+      description: "Selected background with AAA foreground options.",
+      icon: Icons.check_circle,
+      label: "Selected",
+      tone: "selected"
+    };
+  }
+  if (isSelected) {
+    return {
+      description: "Selected background with no AAA-compliant foreground available.",
+      icon: Icons.warning,
+      label: "Selected, no AAA",
+      tone: "unavailable"
+    };
+  }
+  if (hasPairs) {
+    return {
+      description: "AAA foreground options available.",
+      icon: Icons.radio_button_checked,
+      label: "Available",
+      tone: "available"
+    };
+  }
+  return {
+    description: "No AAA-compliant foreground available for this background.",
+    icon: Icons.close,
+    label: "No AAA",
+    tone: "unavailable"
+  };
+}
+function getPairingCopyText3(pair) {
+  const accessibilityLine = pair.passes.aaaText ? "Accessibility: Meets AAA for normal and large text" : pair.passes.aaaLarge ? "Accessibility: Meets AAA for large text only" : "Accessibility: Fails AAA for normal and large text";
+  return [
+    `Background: ${pair.background.token} (${pair.background.hex})`,
+    `Foreground: ${pair.foreground.token} (${pair.foreground.hex})`,
+    `Contrast ratio: ${pair.contrastRatio.toFixed(2)}:1`,
+    accessibilityLine
+  ].join("\n");
+}
+function getAccessibilitySummaryLine2(pair) {
+  if (!pair) {
+    return "Contrast unavailable";
+  }
+  if (pair.passes.aaaText) {
+    return `${pair.contrastRatio.toFixed(2)}:1 \u2014 AAA compliant (normal + large text)`;
+  }
+  if (pair.passes.aaaLarge) {
+    return `${pair.contrastRatio.toFixed(2)}:1 \u2014 AAA compliant (large text only)`;
+  }
+  return `${pair.contrastRatio.toFixed(2)}:1 \u2014 Not AAA compliant`;
+}
+function getLiveAnnouncement3(pair, background) {
+  if (!background) {
+    return "No approved background tones available.";
+  }
+  if (!pair) {
+    return `${background.token} selected. No AAA-compliant foreground options available for this selection.`;
+  }
+  if (isWhiteForegroundPair5(pair) && isLargeTextOnlyPair3(pair)) {
+    return `${background.token} with white. Contrast ratio ${pair.contrastRatio.toFixed(2)} to 1. Meets AAA for large text only.`;
+  }
+  if (isWhiteForegroundPair5(pair) && !pair.passes.aaaLarge) {
+    return `${background.token} with white. Contrast ratio ${pair.contrastRatio.toFixed(2)} to 1. Fails AAA for normal and large text.`;
+  }
+  return `${background.token} with ${pair.foreground.token}. Contrast ratio ${pair.contrastRatio.toFixed(2)} to 1. Meets AAA for normal and large text.`;
+}
+function formatValueRows3(color2, visibleFormats) {
+  const hasDisplayTone = color2.token !== "white";
+  return [
+    { key: "token", label: "Token", value: color2.token, copyable: true },
+    {
+      key: "tone",
+      label: "Tone",
+      value: hasDisplayTone ? String(color2.tone) : "Not applicable",
+      copyable: hasDisplayTone
+    },
+    ...visibleFormats.map((format) => ({
+      key: format,
+      label: format.toUpperCase(),
+      value: color2[format],
+      copyable: true
+    }))
+  ];
+}
+function SelectorButton3({
+  description,
+  isSelected,
+  label,
+  onClick,
+  swatch
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": isSelected,
+      onClick,
+      className: cn(
+        "w-full rounded-sm border px-3 py-3 text-left transition-colors focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+        isSelected ? "border-primary-800 bg-primary-50" : "border-grey-300 bg-white hover:border-primary-500 hover:bg-grey-50"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+        swatch ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "mt-0.5 size-4 shrink-0 rounded-full border border-black/10",
+            style: { backgroundColor: swatch }
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-foreground", children: label }),
+          description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs/5 text-muted-foreground", children: description }) : null
+        ] })
+      ] })
+    }
+  );
+}
+function BackgroundSwatchButton3({
+  background,
+  hasPairs,
+  isSelected,
+  onClick
+}) {
+  const status = getAvailabilityMeta3(isSelected, hasPairs);
+  const StatusIcon = status.icon;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": isSelected,
+      "aria-label": `Select ${background.token} background. ${status.description}`,
+      onClick,
+      className: cn(
+        "w-full rounded-sm border bg-white p-3 text-left transition-colors focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+        isSelected ? "border-primary-800 bg-primary-50" : hasPairs ? "border-grey-300 hover:border-primary-500 hover:bg-grey-50" : "border-grey-300 hover:border-grey-500"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-foreground", children: getBackgroundOptionName3(background) }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 font-mono text-[0.72rem] break-all text-muted-foreground", children: background.token })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center gap-1 rounded-sm border px-2 py-1 text-[0.68rem] font-semibold uppercase",
+                status.tone === "selected" && "border-primary-800 bg-primary-800 text-white dark:border-primary-500 dark:bg-primary-500",
+                status.tone === "available" && "border-grey-300 bg-grey-50 text-foreground",
+                status.tone === "unavailable" && "border-danger-300 bg-danger-50 text-danger-900 dark:border-danger-800 dark:bg-danger-950/20 dark:text-danger-200"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { "data-slot": "icon", className: "size-4" }),
+                status.label
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 overflow-hidden rounded-[2px] border border-black/10", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-14 w-full", style: { backgroundColor: background.hex } }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-xs/5 text-muted-foreground", children: status.description })
+      ]
+    }
+  );
+}
+function CurrentResultCard3({
+  bestPair,
+  copiedKey,
+  familySummary,
+  onCopyPairing,
+  pair,
+  supportText,
+  selectedBackground
+}) {
+  const previewForeground = pair?.foreground.hex ?? getReadableTextColor4(selectedBackground.tone);
+  const isRecommended = pair ? pair.id === bestPair?.id : false;
+  const pairingLabel = getMainPairingLabel2(pair, bestPair);
+  const accessibilitySummary = getAccessibilitySummaryLine2(pair);
+  const whiteForeground = pair ? isWhiteForegroundPair5(pair) : false;
+  const fauxButtonStyle = pair ? {
+    "--btn-bg": pair.foreground.hex,
+    "--btn-border": pair.foreground.hex,
+    "--btn-text": pair.background.hex,
+    "--btn-icon": pair.background.hex,
+    "--btn-hover-overlay": pair.background.hex
+  } : null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Card,
+    {
+      className: cn(
+        "gap-0 overflow-hidden border-grey-200 bg-white py-0",
+        isRecommended && "border-primary-100"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "p-3 sm:min-h-[21rem] sm:p-5",
+          style: {
+            backgroundColor: selectedBackground.hex,
+            color: previewForeground
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-[16rem] flex-col gap-5 sm:min-h-[17.5rem] sm:gap-6", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[42rem] rounded-sm bg-white/92 px-4 py-3.5 text-foreground sm:px-5 sm:py-5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 space-y-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    className: cn(
+                      "inline-flex items-center gap-2 rounded-sm border px-2.5 py-1 text-[0.68rem] font-semibold tracking-[0.1em] uppercase",
+                      isRecommended ? "border-primary-200 bg-primary-50 text-primary-900" : "border-grey-300 bg-white text-foreground"
+                    ),
+                    children: [
+                      isRecommended ? /* @__PURE__ */ jsxRuntime.jsx(Icons.check_circle, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.info, { "data-slot": "icon", className: "size-4" }),
+                      pairingLabel
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, size: 4, className: "text-foreground", trim: "normal", children: pair ? `${getPairingColorDisplayName5(pair.foreground)} on ${getPairingColorDisplayName5(pair.background)}` : `${getPairingColorDisplayName5(selectedBackground)} selected` }),
+                  pair ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-mono text-[0.74rem] break-all text-muted-foreground", children: [
+                    pair.foreground.token,
+                    " on ",
+                    pair.background.token
+                  ] }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-[0.74rem] break-all text-muted-foreground", children: selectedBackground.token }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.95rem] font-semibold text-foreground", children: accessibilitySummary }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, className: "max-w-3xl text-grey-700", children: supportText })
+                ] })
+              ] }),
+              pair ? /* @__PURE__ */ jsxRuntime.jsx(
+                Button2,
+                {
+                  variant: "outline",
+                  color: "grey",
+                  size: "sm",
+                  className: "w-full justify-center bg-white/90 lg:w-auto lg:min-w-40",
+                  onClick: onCopyPairing,
+                  children: copiedKey === "current-pairing" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "data-slot": "icon", className: "size-5" }),
+                    "Pairing copied"
+                  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+                    "Copy pairing"
+                  ] })
+                }
+              ) : null
+            ] }) }),
+            pair ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-[12rem] flex-col justify-between gap-5", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    className: "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[0.72rem] font-semibold tracking-[0.16em] uppercase",
+                    style: {
+                      borderColor: pair.foreground.hex,
+                      backgroundColor: pair.foreground.hex,
+                      color: pair.background.hex
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(Icons.palette, { "data-slot": "icon", className: "size-4" }),
+                      familySummary
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    className: "inline-flex rounded-full border px-3 py-1 text-[0.72rem] font-semibold tracking-[0.16em] uppercase",
+                    style: {
+                      borderColor: pair.foreground.hex
+                    },
+                    children: [
+                      pair.rating,
+                      " ",
+                      pair.contrastRatio.toFixed(2),
+                      ":1"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-xl space-y-4 pb-8 sm:pb-10", children: [
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "max-w-lg text-[2.8rem] leading-none font-bold text-current sm:text-[4rem]", children: "Pair colour with confidence." }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-md text-[0.96rem]/7 sm:text-base/7", children: getPreviewGuidance5(pair, isRecommended) }),
+                  fauxButtonStyle ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      "data-variant": "solid",
+                      className: cn(
+                        buttonVariants({ variant: "solid", size: "default" }),
+                        "pointer-events-none cursor-default px-5 text-[15px] font-[700] select-none sm:px-6 sm:text-[16px] sm:font-[700]"
+                      ),
+                      style: fauxButtonStyle,
+                      children: "Get started"
+                    }
+                  ) : null
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    className: "inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold",
+                    style: {
+                      backgroundColor: pair.foreground.hex,
+                      color: pair.background.hex
+                    },
+                    children: [
+                      "Pass",
+                      /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "data-slot": "icon", className: "size-4" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    className: "inline-flex rounded-full border px-4 py-2 text-sm",
+                    style: {
+                      borderColor: pair.foreground.hex
+                    },
+                    children: [
+                      pair.background.token,
+                      " / ",
+                      pair.foreground.token
+                    ]
+                  }
+                )
+              ] })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-lg space-y-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "max-w-lg text-[1.9rem] leading-tight font-bold text-current sm:text-[2.25rem]", children: "No AAA combination available." }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-md text-[0.96rem]/7 sm:text-base/7", children: "This approved background does not currently have an AAA foreground in this tool. Choose another approved background to continue." })
+            ] }) })
+          ] })
+        }
+      )
+    }
+  );
+}
+function RecommendationCard3({
+  copiedKey,
+  isSelected,
+  item,
+  onCopyPairing,
+  onSelect
+}) {
+  const { pair } = item;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "relative rounded-sm border bg-white/95 px-3 py-2 text-left transition-colors focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+        isSelected ? "border-primary-700 bg-primary-50/30" : "border-grey-200 hover:border-grey-300"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": isSelected,
+            "aria-label": `Use ${pair.foreground.token} on ${pair.background.token}`,
+            onClick: onSelect,
+            className: "absolute inset-0 rounded-sm focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-none relative z-10 flex items-start gap-2.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-0.5 w-10 shrink-0 overflow-hidden rounded-[2px] border border-black/10", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-full", style: { backgroundColor: pair.background.hex } }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full", style: { backgroundColor: pair.foreground.hex } })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 space-y-0.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[0.94rem] leading-6 font-semibold text-foreground", children: [
+                getPairingColorDisplayName5(pair.foreground),
+                " on",
+                " ",
+                getPairingColorDisplayName5(pair.background)
+              ] }),
+              item.category === "best" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex rounded-sm border border-primary-200 bg-primary-50 px-1.5 py-0.5 text-[0.64rem] font-semibold tracking-[0.1em] text-primary-900 uppercase", children: "Default" }) : null,
+              isSelected ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex rounded-sm border border-primary-700 px-1.5 py-0.5 text-[0.64rem] font-semibold tracking-[0.1em] text-primary-800 uppercase", children: "Current" }) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-mono text-[0.72rem] break-all text-muted-foreground", children: [
+              pair.foreground.token,
+              " on ",
+              pair.background.token
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[0.82rem] text-muted-foreground", children: [
+              pair.contrastRatio.toFixed(2),
+              ":1 contrast"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-auto shrink-0 self-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+            Button2,
+            {
+              variant: "ghost",
+              color: "grey",
+              size: "icon",
+              className: "size-7 text-muted-foreground hover:text-foreground",
+              onClick: onCopyPairing,
+              "aria-label": `Copy pairing ${pair.background.token} and ${pair.foreground.token}`,
+              title: copiedKey === `pair:${pair.id}` ? "Copied" : "Copy pairing",
+              children: copiedKey === `pair:${pair.id}` ? /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.content_copy, { "data-slot": "icon", className: "size-4" })
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+function RecommendationGroupSection2({
+  children,
+  description,
+  title
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, size: 6, className: "text-foreground", trim: "normal", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, className: "text-grey-600", children: description })
+    ] }),
+    children
+  ] });
+}
+function TechnicalDetailsPanel3({
+  color: color2,
+  copiedKey,
+  onCopyValue,
+  title,
+  visibleFormats
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-sm border border-grey-200 bg-white", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-grey-200 px-4 py-3.5 sm:px-5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, size: 6, className: "text-foreground", trim: "normal", children: title }),
+      color2 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: getPairingColorDisplayName5(color2) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3.5 overflow-hidden rounded-sm border border-black/10 bg-white", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-16 w-full sm:h-20", style: { backgroundColor: color2.hex } }) })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "No AAA foreground available." })
+    ] }),
+    color2 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-grey-200", children: formatValueRows3(color2, visibleFormats).map((row) => {
+      const copyKey = `${title}-${row.key}`;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "flex flex-col items-start gap-3 px-4 py-3.5 sm:flex-row sm:items-start sm:justify-between sm:gap-4 sm:px-5",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.72rem] font-semibold tracking-[0.12em] text-muted-foreground uppercase", children: row.label }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-2 text-sm text-foreground",
+                    row.key !== "tone" && "font-mono break-all"
+                  ),
+                  children: row.value
+                }
+              )
+            ] }),
+            row.copyable ? /* @__PURE__ */ jsxRuntime.jsx(
+              Button2,
+              {
+                variant: "ghost",
+                color: "grey",
+                size: "sm",
+                className: "self-start",
+                onClick: () => onCopyValue(copyKey, row.value, `${row.label} copied`),
+                "aria-label": `Copy ${title.toLowerCase()} ${row.label.toLowerCase()}`,
+                children: copiedKey === copyKey ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Icons.check_circle, { "data-slot": "icon", className: "size-5" }),
+                  "Copied"
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+                  "Copy"
+                ] })
+              }
+            ) : null
+          ]
+        },
+        row.key
+      );
+    }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "No technical values are shown because there is no AAA-compliant foreground for this background." }) })
+  ] });
+}
+function resolveSelectionState3(nextThemeCategory, nextPrimaryKey, nextAccentKey, preferredBackgroundToken, preferredPairId) {
+  const context = getPairingContext(nextThemeCategory, nextPrimaryKey, nextAccentKey);
+  const selectedBackgroundToken = resolveBackgroundToken5(
+    context,
+    preferredBackgroundToken,
+    getToneFromToken5(preferredBackgroundToken)
+  );
+  const selectedPairId = getPreferredPairForBackground5(
+    context.pairsByBackground[selectedBackgroundToken] ?? [],
+    preferredPairId
+  )?.id ?? "";
+  return {
+    accentKey: context.accent.key,
+    context,
+    primaryKey: context.primary.key,
+    selectedBackgroundToken,
+    selectedPairId,
+    themeCategory: nextThemeCategory
+  };
+}
+function ColorPairingToolV5Loading() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-8 xl:grid-cols-[minmax(18rem,24rem)_minmax(0,1fr)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-52 rounded-sm border border-grey-200 bg-grey-50" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[32rem] rounded-sm border border-grey-200 bg-grey-50" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-96 rounded-sm border border-grey-200 bg-grey-50" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-64 rounded-sm border border-grey-200 bg-grey-50" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-72 rounded-sm border border-grey-200 bg-grey-50" })
+    ] })
+  ] });
+}
+function ColorPairingToolV5Content({
+  onAnalyticsEvent,
+  visibleFormats
+}) {
+  const searchParams = navigation.useSearchParams();
+  const stickyOffset = useStickyOffset(24);
+  const [initialState] = React5.useState(() => getInitialPairingState5(searchParams));
+  const [themeCategory, setThemeCategory] = React5.useState(initialState.themeCategory);
+  const [primaryFamilyKey, setPrimaryFamilyKey] = React5.useState(initialState.primaryKey);
+  const [accentFamilyKey, setAccentFamilyKey] = React5.useState(initialState.accentKey);
+  const [selectedBackgroundToken, setSelectedBackgroundToken] = React5.useState(
+    initialState.selectedBackgroundToken
+  );
+  const [selectedPairId, setSelectedPairId] = React5.useState(initialState.selectedPairId);
+  const [drawerStepIndex, setDrawerStepIndex] = React5.useState(0);
+  const [isCompactControlsOpen, setIsCompactControlsOpen] = React5.useState(false);
+  const [isShowingAllAlternatives, setIsShowingAllAlternatives] = React5.useState(false);
+  const [isTechnicalDetailsOpen, setIsTechnicalDetailsOpen] = React5.useState(false);
+  const [, copyToClipboardRaw] = usehooks.useCopyToClipboard();
+  const [copiedKey, setCopiedKey] = React5.useState(null);
+  const copiedKeyTimeoutRef = React5.useRef(null);
+  const resultSectionRef = React5.useRef(null);
+  const noValidStateRef = React5.useRef(/* @__PURE__ */ new Set());
+  const technicalDetailsViewedRef = React5.useRef(false);
+  const emitAnalyticsEvent = React5.useCallback(
+    (event) => {
+      onAnalyticsEvent(event);
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(
+          new CustomEvent(COLOR_PAIRING_TOOL_V5_ANALYTICS_EVENT, {
+            detail: event
+          })
+        );
+      }
+    },
+    [onAnalyticsEvent]
+  );
+  React5.useEffect(() => {
+    return () => {
+      if (copiedKeyTimeoutRef.current) {
+        clearTimeout(copiedKeyTimeoutRef.current);
+      }
+    };
+  }, []);
+  React5.useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const mediaQuery = window.matchMedia(PERSISTENT_DRAWER_MIN_WIDTH_QUERY3);
+    const handleChange = (event) => {
+      if (event?.matches ?? mediaQuery.matches) {
+        setIsCompactControlsOpen(false);
+      }
+    };
+    handleChange();
+    mediaQuery.addEventListener("change", handleChange);
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, []);
+  const themeFamilies = React5.useMemo(() => getPairingFamilies(themeCategory), [themeCategory]);
+  const context = React5.useMemo(
+    () => getPairingContext(themeCategory, primaryFamilyKey, accentFamilyKey),
+    [themeCategory, primaryFamilyKey, accentFamilyKey]
+  );
+  const selectableFamilies = React5.useMemo(
+    () => themeFamilies.filter((family) => family.key !== context.grey.key),
+    [themeFamilies, context.grey.key]
+  );
+  const selectableAccentFamilies = React5.useMemo(
+    () => selectableFamilies.filter((family) => family.key !== context.primary.key),
+    [selectableFamilies, context.primary.key]
+  );
+  const selectedBackground = React5.useMemo(
+    () => context.backgrounds.find((background) => background.token === selectedBackgroundToken) ?? context.backgrounds[0] ?? null,
+    [context.backgrounds, selectedBackgroundToken]
+  );
+  const selectedBackgroundPairs = React5.useMemo(
+    () => selectedBackground ? context.pairsByBackground[selectedBackground.token] ?? [] : [],
+    [context.pairsByBackground, selectedBackground]
+  );
+  const bestRecommendedPair = React5.useMemo(
+    () => getPreferredPairForBackground5(selectedBackgroundPairs),
+    [selectedBackgroundPairs]
+  );
+  const selectedPair = React5.useMemo(
+    () => getPreferredPairForBackground5(selectedBackgroundPairs, selectedPairId),
+    [selectedBackgroundPairs, selectedPairId]
+  );
+  const whiteForegroundExample = React5.useMemo(
+    () => selectedBackground && supportsWhiteForegroundPreview(selectedBackground) ? getWhiteForegroundPair(selectedBackground) : null,
+    [selectedBackground]
+  );
+  const previewPair = selectedPair ?? whiteForegroundExample ?? null;
+  const detailForeground = selectedPair?.foreground ?? whiteForegroundExample?.foreground ?? null;
+  const currentPairSupportText = React5.useMemo(
+    () => getMainPairingSupportCopy2(previewPair, bestRecommendedPair, context),
+    [bestRecommendedPair, context, previewPair]
+  );
+  const recommendationItems = React5.useMemo(() => {
+    return selectedBackgroundPairs.map((pair) => {
+      const category = getRecommendationCategory3(pair, bestRecommendedPair, context);
+      return {
+        category,
+        pair
+      };
+    }).sort(
+      (left, right) => getRecommendationSortRank3(left.category) - getRecommendationSortRank3(right.category)
+    );
+  }, [bestRecommendedPair, context, selectedBackgroundPairs]);
+  const alternativeRecommendationGroups = React5.useMemo(
+    () => buildRecommendationGroups2(
+      recommendationItems.filter((item) => item.pair.id !== selectedPair?.id)
+    ),
+    [recommendationItems, selectedPair?.id]
+  );
+  const visibleAlternativeRecommendationGroups = React5.useMemo(() => {
+    if (isShowingAllAlternatives) {
+      return alternativeRecommendationGroups;
+    }
+    let remaining = INITIAL_VISIBLE_ALTERNATIVES2;
+    return alternativeRecommendationGroups.reduce((groups, group) => {
+      if (remaining <= 0) {
+        return groups;
+      }
+      const items = group.items.slice(0, remaining);
+      if (items.length > 0) {
+        groups.push({
+          ...group,
+          items
+        });
+        remaining -= items.length;
+      }
+      return groups;
+    }, []);
+  }, [alternativeRecommendationGroups, isShowingAllAlternatives]);
+  const hiddenAlternativeCount = React5.useMemo(() => {
+    const totalAlternatives = alternativeRecommendationGroups.reduce(
+      (count, group) => count + group.items.length,
+      0
+    );
+    const visibleAlternatives = visibleAlternativeRecommendationGroups.reduce(
+      (count, group) => count + group.items.length,
+      0
+    );
+    return Math.max(0, totalAlternatives - visibleAlternatives);
+  }, [alternativeRecommendationGroups, visibleAlternativeRecommendationGroups]);
+  const liveAnnouncement = React5.useMemo(
+    () => getLiveAnnouncement3(previewPair, selectedBackground),
+    [previewPair, selectedBackground]
+  );
+  const familySummary = React5.useMemo(
+    () => [context.primary.label, context.accent.label, context.grey.label].join(" + "),
+    [context.accent.label, context.grey.label, context.primary.label]
+  );
+  const shareBackgroundToken = selectedBackground?.token ?? selectedBackgroundToken;
+  const shareUrl = React5.useMemo(() => {
+    const params = new URLSearchParams();
+    params.set("palette", themeCategory);
+    params.set("primary", context.primary.key);
+    params.set("accent", context.accent.key);
+    if (shareBackgroundToken) {
+      params.set("background", shareBackgroundToken);
+    }
+    if (selectedPairId) {
+      params.set("pair", selectedPairId);
+    }
+    const query = params.toString();
+    return `${COLOR_PAIRING_TOOL_V5_PATH}${query ? `?${query}` : ""}`;
+  }, [context.accent.key, context.primary.key, shareBackgroundToken, selectedPairId, themeCategory]);
+  const activeDrawerStep = COLOR_PAIRING_TOOL_DRAWER_STEPS3[drawerStepIndex];
+  const isFirstDrawerStep = drawerStepIndex === 0;
+  const isLastDrawerStep = drawerStepIndex === COLOR_PAIRING_TOOL_DRAWER_STEPS3.length - 1;
+  const desktopSidebarStyle = React5.useMemo(
+    () => ({
+      "--tool-sidebar-max-height": `calc(100vh - ${stickyOffset}px)`,
+      "--tool-sidebar-top": `${stickyOffset}px`
+    }),
+    [stickyOffset]
+  );
+  const goToDrawerStep = React5.useCallback((stepIndex) => {
+    setDrawerStepIndex(Math.max(0, Math.min(stepIndex, COLOR_PAIRING_TOOL_DRAWER_STEPS3.length - 1)));
+  }, []);
+  const goToNextDrawerStep = React5.useCallback(() => {
+    setDrawerStepIndex(
+      (currentStep) => Math.min(currentStep + 1, COLOR_PAIRING_TOOL_DRAWER_STEPS3.length - 1)
+    );
+  }, []);
+  const goToPreviousDrawerStep = React5.useCallback(() => {
+    setDrawerStepIndex((currentStep) => Math.max(currentStep - 1, 0));
+  }, []);
+  const updateUrlParams = React5.useCallback((nextState) => {
+    const params = new URLSearchParams(window.location.search);
+    params.delete("family");
+    params.set("palette", nextState.themeCategory);
+    params.set("primary", nextState.primaryKey);
+    params.set("accent", nextState.accentKey);
+    params.set("background", nextState.selectedBackgroundToken);
+    if (nextState.selectedPairId) {
+      params.set("pair", nextState.selectedPairId);
+    } else {
+      params.delete("pair");
+    }
+    window.history.replaceState(
+      null,
+      "",
+      `${window.location.pathname}?${params.toString()}${window.location.hash}`
+    );
+  }, []);
+  const applyResolvedSelection = React5.useCallback(
+    (nextState) => {
+      setThemeCategory(nextState.themeCategory);
+      setPrimaryFamilyKey(nextState.primaryKey);
+      setAccentFamilyKey(nextState.accentKey);
+      setSelectedBackgroundToken(nextState.selectedBackgroundToken);
+      setSelectedPairId(nextState.selectedPairId);
+      updateUrlParams(nextState);
+    },
+    [updateUrlParams]
+  );
+  const buildAnalyticsContext = React5.useCallback(
+    (overrides) => ({
+      accentKey: context.accent.key,
+      backgroundToken: selectedBackground?.token,
+      foregroundToken: selectedPair?.foreground.token,
+      pairId: selectedPair?.id,
+      palette: themeCategory,
+      primaryKey: context.primary.key,
+      ...overrides
+    }),
+    [context.accent.key, context.primary.key, selectedBackground, selectedPair, themeCategory]
+  );
+  const copyValue = React5.useCallback(
+    (copyKey, value, toastLabel, analyticsEvent) => {
+      copyToClipboardRaw(value);
+      setCopiedKey(copyKey);
+      sonner.toast(toastLabel, { duration: 2e3 });
+      if (analyticsEvent) {
+        emitAnalyticsEvent(analyticsEvent);
+      }
+      if (copiedKeyTimeoutRef.current) {
+        clearTimeout(copiedKeyTimeoutRef.current);
+      }
+      copiedKeyTimeoutRef.current = setTimeout(() => {
+        setCopiedKey(null);
+        copiedKeyTimeoutRef.current = null;
+      }, 2e3);
+    },
+    [copyToClipboardRaw, emitAnalyticsEvent]
+  );
+  const handleThemeCategoryChange = (nextThemeCategory) => {
+    const nextState = resolveSelectionState3(
+      nextThemeCategory,
+      primaryFamilyKey,
+      accentFamilyKey,
+      selectedBackgroundToken,
+      null
+    );
+    setIsShowingAllAlternatives(false);
+    applyResolvedSelection(nextState);
+    emitAnalyticsEvent({
+      name: "palette_change",
+      accentKey: nextState.accentKey,
+      backgroundToken: nextState.selectedBackgroundToken,
+      pairId: nextState.selectedPairId,
+      palette: nextState.themeCategory,
+      primaryKey: nextState.primaryKey
+    });
+  };
+  const handlePrimaryColorChange = (nextPrimaryKey) => {
+    const nextAccentKey = nextPrimaryKey === accentFamilyKey ? getDefaultAccentFamilyKey(themeCategory, nextPrimaryKey) : accentFamilyKey;
+    const nextState = resolveSelectionState3(
+      themeCategory,
+      nextPrimaryKey,
+      nextAccentKey,
+      selectedBackgroundToken,
+      null
+    );
+    setIsShowingAllAlternatives(false);
+    applyResolvedSelection(nextState);
+    emitAnalyticsEvent({
+      name: "primary_change",
+      accentKey: nextState.accentKey,
+      backgroundToken: nextState.selectedBackgroundToken,
+      pairId: nextState.selectedPairId,
+      palette: nextState.themeCategory,
+      primaryKey: nextState.primaryKey
+    });
+  };
+  const handleAccentColorChange = (nextAccentKey) => {
+    if (nextAccentKey === primaryFamilyKey) return;
+    const nextState = resolveSelectionState3(
+      themeCategory,
+      primaryFamilyKey,
+      nextAccentKey,
+      selectedBackgroundToken,
+      null
+    );
+    setIsShowingAllAlternatives(false);
+    applyResolvedSelection(nextState);
+    emitAnalyticsEvent({
+      name: "accent_change",
+      accentKey: nextState.accentKey,
+      backgroundToken: nextState.selectedBackgroundToken,
+      pairId: nextState.selectedPairId,
+      palette: nextState.themeCategory,
+      primaryKey: nextState.primaryKey
+    });
+  };
+  const handleBackgroundChange = (nextSelectedBackgroundToken) => {
+    const nextSelectedPairId = getPreferredPairForBackground5(context.pairsByBackground[nextSelectedBackgroundToken] ?? [])?.id ?? "";
+    const nextState = {
+      accentKey: context.accent.key,
+      context,
+      primaryKey: context.primary.key,
+      selectedBackgroundToken: nextSelectedBackgroundToken,
+      selectedPairId: nextSelectedPairId,
+      themeCategory
+    };
+    setIsShowingAllAlternatives(false);
+    applyResolvedSelection(nextState);
+    emitAnalyticsEvent({
+      name: "background_selection",
+      ...buildAnalyticsContext({
+        backgroundToken: nextSelectedBackgroundToken,
+        foregroundToken: context.pairsByBackground[nextSelectedBackgroundToken]?.find(
+          (pair) => pair.id === nextSelectedPairId
+        )?.foreground.token,
+        pairId: nextSelectedPairId
+      })
+    });
+    if (typeof window !== "undefined" && window.matchMedia(MOBILE_RESULT_SCROLL_QUERY3).matches) {
+      requestAnimationFrame(() => {
+        resultSectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+      });
+    }
+  };
+  const handlePairChange = (nextSelectedPairId, source) => {
+    if (!selectedBackground) return;
+    const nextPair = selectedBackgroundPairs.find((pair) => pair.id === nextSelectedPairId) ?? null;
+    setSelectedPairId(nextSelectedPairId);
+    updateUrlParams({
+      accentKey: context.accent.key,
+      context,
+      primaryKey: context.primary.key,
+      selectedBackgroundToken: selectedBackground.token,
+      selectedPairId: nextSelectedPairId,
+      themeCategory
+    });
+    emitAnalyticsEvent({
+      name: "foreground_selection",
+      ...buildAnalyticsContext({
+        foregroundToken: nextPair?.foreground.token,
+        pairId: nextSelectedPairId,
+        source
+      })
+    });
+    if (bestRecommendedPair && nextSelectedPairId !== bestRecommendedPair.id) {
+      emitAnalyticsEvent({
+        name: "alternative_combination_selected",
+        ...buildAnalyticsContext({
+          foregroundToken: nextPair?.foreground.token,
+          pairId: nextSelectedPairId,
+          source
+        })
+      });
+    }
+  };
+  React5.useEffect(() => {
+    if (!selectedBackground || selectedBackgroundPairs.length > 0) {
+      return;
+    }
+    const key = `${themeCategory}:${context.primary.key}:${context.accent.key}:${selectedBackground.token}`;
+    if (noValidStateRef.current.has(key)) {
+      return;
+    }
+    noValidStateRef.current.add(key);
+    emitAnalyticsEvent({
+      name: "no_valid_combination_state",
+      ...buildAnalyticsContext({
+        backgroundToken: selectedBackground.token
+      })
+    });
+  }, [
+    buildAnalyticsContext,
+    context.accent.key,
+    context.primary.key,
+    emitAnalyticsEvent,
+    selectedBackground,
+    selectedBackgroundPairs.length,
+    themeCategory
+  ]);
+  React5.useEffect(() => {
+    if (!isTechnicalDetailsOpen || technicalDetailsViewedRef.current) {
+      return;
+    }
+    technicalDetailsViewedRef.current = true;
+    emitAnalyticsEvent({
+      name: "technical_details_viewed",
+      ...buildAnalyticsContext({
+        source: "details"
+      })
+    });
+  }, [buildAnalyticsContext, emitAnalyticsEvent, isTechnicalDetailsOpen]);
+  if (!selectedBackground) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "px-6 py-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "No approved background tones available" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, className: "mt-3", children: "No approved tones are available for the current palette and colour selection." })
+    ] });
+  }
+  const compactControlsSummary = `${themeCategory === "brand" ? "Brand" : "Aboriginal"} palette, ${context.primary.label} primary, ${context.accent.label} accent, ${getPairingColorDisplayName5(
+    selectedBackground
+  )} background.`;
+  const renderControlsPanel = (isOverlay = false) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-grey-200 px-5 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "Configuration" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        !isFirstDrawerStep ? /* @__PURE__ */ jsxRuntime.jsxs(Button2, { variant: "ghost", color: "grey", size: "sm", onClick: goToPreviousDrawerStep, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icons.west, { "data-slot": "icon", className: "size-5" }),
+          "Back"
+        ] }) : null,
+        isOverlay ? /* @__PURE__ */ jsxRuntime.jsx(
+          Button2,
+          {
+            variant: "ghost",
+            color: "grey",
+            size: "icon",
+            onClick: () => setIsCompactControlsOpen(false),
+            "aria-label": "Close configuration",
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icons.close, { "data-slot": "icon", className: "size-5" })
+          }
+        ) : null
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-grey-200 px-5 py-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        COLOR_PAIRING_TOOL_DRAWER_STEPS3.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-current": index === drawerStepIndex ? "step" : void 0,
+            "aria-label": `${step.eyebrow}: ${step.title}`,
+            onClick: () => goToDrawerStep(index),
+            className: "flex-1 rounded-sm focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "block h-1.5 rounded-full transition-colors",
+                  index <= drawerStepIndex ? "bg-primary-800" : "bg-grey-200"
+                )
+              }
+            )
+          },
+          step.id
+        )),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-2 basis-full text-[0.68rem] font-semibold tracking-[0.12em] text-primary-800 uppercase sm:mt-0 sm:ml-2 sm:basis-auto sm:text-[0.72rem]", children: activeDrawerStep.eyebrow })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: activeDrawerStep.title }),
+        /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, children: activeDrawerStep.description })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "flex h-full transition-transform duration-300 ease-out",
+        style: { transform: `translateX(-${drawerStepIndex * 100}%)` },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("section", { className: "h-full w-full shrink-0 overflow-y-auto px-5 py-5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 pr-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 4, size: 6, className: "mb-3 text-foreground", trim: "normal", children: "Palette" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: ["brand", "aboriginal"].map((palette) => {
+                const isSelected = themeCategory === palette;
+                const label = palette === "brand" ? "Brand palette" : "Aboriginal palette";
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  SelectorButton3,
+                  {
+                    label,
+                    isSelected,
+                    onClick: () => handleThemeCategoryChange(palette)
+                  },
+                  palette
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 4, size: 6, className: "mb-3 text-foreground", trim: "normal", children: "Primary colour family" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: selectableFamilies.map((family) => {
+                const label = getFamilySelectorLabel5(family, themeCategory, "primary colour");
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  SelectorButton3,
+                  {
+                    label,
+                    isSelected: family.key === context.primary.key,
+                    onClick: () => handlePrimaryColorChange(family.key),
+                    swatch: getFamilySwatchColor5(family, 800)
+                  },
+                  family.key
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 4, size: 6, className: "mb-3 text-foreground", trim: "normal", children: "Accent colour family" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: selectableAccentFamilies.map((family) => {
+                const label = getFamilySelectorLabel5(family, themeCategory, "accent colour");
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  SelectorButton3,
+                  {
+                    label,
+                    isSelected: family.key === context.accent.key,
+                    onClick: () => handleAccentColorChange(family.key),
+                    swatch: getFamilySwatchColor5(family, 600)
+                  },
+                  family.key
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-grey-200 pt-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-foreground", children: "Grey is always included" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "Neutral grey options are automatically added so every selection includes a practical fallback family." })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("section", { className: "h-full w-full shrink-0 overflow-y-auto px-5 py-5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6 pr-1", children: context.backgroundGroups.map((group, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "section",
+            {
+              className: cn("space-y-3", index > 0 && "border-t border-grey-200 pt-6"),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(Heading, { level: 4, size: 6, className: "text-foreground", trim: "normal", children: [
+                    group.family.label,
+                    " backgrounds"
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: group.label })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-3", children: group.backgrounds.map((background) => /* @__PURE__ */ jsxRuntime.jsx(
+                  BackgroundSwatchButton3,
+                  {
+                    background,
+                    hasPairs: (context.pairsByBackground[background.token]?.length ?? 0) > 0,
+                    isSelected: selectedBackground.token === background.token,
+                    onClick: () => handleBackgroundChange(background.token)
+                  },
+                  background.token
+                )) })
+              ]
+            },
+            group.key
+          )) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("section", { className: "h-full w-full shrink-0 overflow-y-auto px-5 py-5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4 pr-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-sm border border-grey-200 bg-grey-50 px-4 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 4, size: 6, className: "text-foreground", trim: "normal", children: "Review the result on the right" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, children: "The right panel shows one recommended pairing first. Use approved alternatives there only when you need a different tone or emphasis." })
+          ] }) }) }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-grey-200 px-5 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-10 flex-1", children: isLastDrawerStep ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Review the NSW recommendation in the result panel. Use alternatives there only if you need a different approved treatment." }) : null }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-2 sm:w-auto sm:flex-none", children: [
+        isOverlay && isLastDrawerStep ? /* @__PURE__ */ jsxRuntime.jsx(
+          Button2,
+          {
+            color: "primary",
+            className: "w-full sm:w-auto sm:min-w-40",
+            onClick: () => setIsCompactControlsOpen(false),
+            children: "Review result"
+          }
+        ) : null,
+        !isLastDrawerStep ? /* @__PURE__ */ jsxRuntime.jsxs(Button2, { color: "primary", className: "w-full sm:w-auto", onClick: goToNextDrawerStep, children: [
+          "Continue",
+          /* @__PURE__ */ jsxRuntime.jsx(Icons.east, { "data-slot": "icon", className: "size-5" })
+        ] }) : null
+      ] })
+    ] }) })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-8 xl:grid-cols-[minmax(18rem,24rem)_minmax(0,1fr)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-slot": "tool-sidebar",
+        className: "hidden xl:sticky xl:top-[var(--tool-sidebar-top)] xl:block xl:self-start",
+        style: desktopSidebarStyle,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "h-[40rem] max-h-[40rem] gap-0 overflow-hidden border-grey-200 bg-grey-50/60 py-0 sm:h-[44rem] sm:max-h-[44rem] xl:h-[var(--tool-sidebar-max-height)] xl:max-h-[var(--tool-sidebar-max-height)]", children: renderControlsPanel() })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "tool-results", className: "space-y-5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-4 xl:hidden", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "gap-4 px-5 py-5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "Configuration" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, children: "Open the drawer to set palette, colour families, and background. The result panel shows the NSW recommendation first." }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: compactControlsSummary })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Button2,
+            {
+              color: "primary",
+              className: "w-full sm:w-auto",
+              onClick: () => setIsCompactControlsOpen(true),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Icons.edit_square, { "data-slot": "icon", className: "size-5" }),
+                "Open configuration"
+              ]
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open: isCompactControlsOpen, onOpenChange: setIsCompactControlsOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          SheetContent,
+          {
+            side: "left",
+            showClose: false,
+            className: "w-[30rem] max-w-[90vw] overflow-hidden p-0",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: "Colour pairing configuration" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full flex-col bg-background", children: renderControlsPanel(true) })
+            ]
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("section", { ref: resultSectionRef, className: "space-y-5", "aria-label": "Current result", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", "aria-live": "polite", children: liveAnnouncement }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CurrentResultCard3,
+          {
+            bestPair: bestRecommendedPair,
+            copiedKey,
+            familySummary,
+            onCopyPairing: () => previewPair ? copyValue(
+              "current-pairing",
+              getPairingCopyText3(previewPair),
+              "Pairing copied",
+              previewPair.id === bestRecommendedPair?.id ? {
+                name: "best_recommendation_copied",
+                ...buildAnalyticsContext({
+                  foregroundToken: previewPair.foreground.token,
+                  pairId: previewPair.id,
+                  source: "current-result"
+                })
+              } : void 0
+            ) : void 0,
+            pair: previewPair,
+            supportText: currentPairSupportText,
+            selectedBackground
+          }
+        )
+      ] }),
+      bestRecommendedPair || alternativeRecommendationGroups.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, size: 6, className: "text-foreground", trim: "normal", children: "Approved alternatives" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, className: "text-grey-600", children: "These are approved alternatives for different tone or emphasis." })
+        ] }),
+        alternativeRecommendationGroups.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          visibleAlternativeRecommendationGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsx(
+            RecommendationGroupSection2,
+            {
+              title: group.title,
+              description: group.description,
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5", children: group.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                RecommendationCard3,
+                {
+                  copiedKey,
+                  item,
+                  isSelected: item.pair.id === selectedPair?.id,
+                  onCopyPairing: () => copyValue(
+                    `pair:${item.pair.id}`,
+                    getPairingCopyText3(item.pair),
+                    "Pairing copied",
+                    item.pair.id === bestRecommendedPair?.id ? {
+                      name: "best_recommendation_copied",
+                      ...buildAnalyticsContext({
+                        foregroundToken: item.pair.foreground.token,
+                        pairId: item.pair.id,
+                        source: "recommendations-list"
+                      })
+                    } : void 0
+                  ),
+                  onSelect: () => handlePairChange(item.pair.id, "recommendations-list")
+                },
+                item.pair.id
+              )) })
+            },
+            group.id
+          )),
+          hiddenAlternativeCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
+            Button2,
+            {
+              variant: "ghost",
+              color: "grey",
+              className: "w-full justify-center border border-grey-200 bg-white sm:w-auto",
+              onClick: () => setIsShowingAllAlternatives(true),
+              children: [
+                "Show ",
+                hiddenAlternativeCount,
+                " more"
+              ]
+            }
+          ) : null
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "px-6 py-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, size: 6, className: "text-foreground", trim: "normal", children: "No other AAA alternatives" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, className: "mt-3", children: "The NSW recommended pairing is the only AAA-compliant foreground option for this background." })
+        ] })
+      ] }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("section", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntime.jsxs(Collapsible, { open: isTechnicalDetailsOpen, onOpenChange: setIsTechnicalDetailsOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: "flex w-full items-center justify-between gap-4 rounded-sm border border-grey-200 bg-white px-4 py-3.5 text-left transition-colors hover:bg-grey-50 focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden sm:px-5",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, size: 6, className: "text-foreground", trim: "normal", children: "Technical colour values" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, className: "text-muted-foreground", children: "Token, tone, HEX, RGB, HSL, and OKLCH values for advanced use." })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: cn(
+                    "inline-flex items-center gap-2 text-sm font-semibold text-primary-800",
+                    isTechnicalDetailsOpen && "text-foreground"
+                  ),
+                  children: [
+                    isTechnicalDetailsOpen ? "Hide" : "Show",
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      Icons.keyboard_arrow_down,
+                      {
+                        "data-slot": "icon",
+                        className: cn(
+                          "size-5 transition-transform",
+                          isTechnicalDetailsOpen && "rotate-180"
+                        )
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TechnicalDetailsPanel3,
+            {
+              title: "Background values",
+              color: selectedBackground,
+              visibleFormats,
+              copiedKey,
+              onCopyValue: (copyKey, value, toastLabel) => copyValue(copyKey, value, toastLabel)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TechnicalDetailsPanel3,
+            {
+              title: "Foreground values",
+              color: detailForeground,
+              visibleFormats,
+              copiedKey,
+              onCopyValue: (copyKey, value, toastLabel) => copyValue(copyKey, value, toastLabel)
+            }
+          )
+        ] }) }) })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, size: 6, className: "text-foreground", trim: "normal", children: "Share colour pairing" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-sm border border-grey-200 bg-white px-4 py-3.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Copy a link to this current result." }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button2,
+              {
+                variant: "ghost",
+                color: "grey",
+                size: "sm",
+                className: "shrink-0 self-start sm:self-center",
+                onClick: () => copyValue(
+                  "share-url",
+                  typeof window === "undefined" ? shareUrl : new URL(shareUrl, window.location.origin).toString(),
+                  "Colour pairing link copied"
+                ),
+                "aria-label": copiedKey === "share-url" ? "Colour pairing URL copied to clipboard" : "Copy colour pairing URL to clipboard",
+                title: copiedKey === "share-url" ? "Copied" : "Copy URL",
+                children: copiedKey === "share-url" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "data-slot": "icon", className: "size-5" }),
+                  "Copied"
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+                  "Copy URL"
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("code", { className: "mt-2.5 block w-full rounded-sm border border-grey-200 bg-background px-3 py-2 font-mono text-[11px] break-all text-foreground sm:text-xs", children: shareUrl })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function ColorPairingToolV5({
+  onAnalyticsEvent = () => {
+  },
+  visibleFormats = DEFAULT_VISIBLE_FORMATS5
+} = {}) {
+  const normalizedVisibleFormats = [...new Set(visibleFormats)];
+  return /* @__PURE__ */ jsxRuntime.jsx(React5.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(ColorPairingToolV5Loading, {}), children: /* @__PURE__ */ jsxRuntime.jsx(
+    ColorPairingToolV5Content,
+    {
+      onAnalyticsEvent,
+      visibleFormats: normalizedVisibleFormats
+    }
+  ) });
+}
 function ColorSwatches({ theme: theme2, format, viewMode }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -23206,7 +24768,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.104.0"};
+  version: "1.105.0"};
 function Logo(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "NSW Government" }),
@@ -39190,6 +40752,7 @@ exports.ColorPairingTool = ColorPairingTool;
 exports.ColorPairingToolV2 = ColorPairingToolV2;
 exports.ColorPairingToolV3 = ColorPairingToolV3;
 exports.ColorPairingToolV4 = ColorPairingToolV4;
+exports.ColorPairingToolV5 = ColorPairingToolV5;
 exports.ColorSwatches = ColorSwatches;
 exports.ColourScale = ColourScale;
 exports.ComboChart = ComboChart;