@nswds/app 1.105.0 → 1.106.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: "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: "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);
@@ -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(),
@@ -23206,7 +23151,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" }),