@nswds/app 1.98.0 → 1.100.0

package/dist/index.cjs

@@ -4159,7 +4159,7 @@ function AccordionContent({
   );
 }
 var alertVariants = classVarianceAuthority.cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  "relative w-full rounded-sm border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
   {
     variants: {
       variant: {
@@ -4605,7 +4605,7 @@ var AlertDialogContent = React5__namespace.forwardRef(function AlertDialogConten
         ref,
         "data-slot": "alert-dialog-content",
         className: cn(
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-sm border bg-background p-6 shadow-lg duration-200 sm:max-w-lg",
           "data-[state=closed]:animate-out data-[state=open]:animate-in",
           "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
           "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -5071,7 +5071,7 @@ var ChartTooltip = ({ active, payload, label, valueFormatter }) => {
       {
         className: cn(
           // base
-          "rounded-md border text-sm shadow-md",
+          "rounded-sm border text-sm shadow-md",
           // border color
           "border-gray-200 dark:border-gray-800",
           // background color
@@ -6346,7 +6346,7 @@ var ChartTooltip2 = ({ active, payload, label, valueFormatter }) => {
       {
         className: cn(
           // base
-          "rounded-md border text-sm shadow-md",
+          "rounded-sm border text-sm shadow-md",
           // border color
           "border-gray-200 dark:border-gray-800",
           // background color
@@ -7440,7 +7440,7 @@ function DropdownMenuSubContent({
           // Base
           ""
         ],
-        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-sm border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       ),
       ...props
@@ -7532,7 +7532,7 @@ function Breadcrumbs({
   ] }) });
 }
 var buttonVariants2 = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer",
   {
     variants: {
       variant: {
@@ -7626,7 +7626,7 @@ function Calendar({
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
-          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          "relative rounded-sm border border-input shadow-xs has-focus:border-ring has-focus:ring-ring/50 has-focus:ring-[3px]",
           defaultClassNames.dropdown_root
         ),
         dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
@@ -7712,7 +7712,7 @@ function CalendarDayButton({
       "data-range-end": modifiers.range_end,
       "data-range-middle": modifiers.range_middle,
       className: cn(
-        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary-800 data-[selected-single=true]:text-white dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-sm data-[range-end=true]:rounded-r-sm data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-sm data-[range-start=true]:rounded-l-sm data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary-800 data-[selected-single=true]:text-white dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className
       ),
@@ -7726,7 +7726,7 @@ function Card({ className, ...props }) {
     {
       "data-slot": "card",
       className: cn(
-        "flex flex-col gap-6 rounded-md border border-grey-200 bg-card py-6 text-card-foreground dark:border-grey-700",
+        "flex flex-col gap-6 rounded-sm border border-grey-200 bg-card py-6 text-card-foreground dark:border-grey-700",
         className
       ),
       ...props
@@ -8289,7 +8289,7 @@ function ChartTooltipContent({
     "div",
     {
       className: cn(
-        "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+        "grid min-w-[8rem] items-start gap-1.5 rounded-sm border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
         className
       ),
       children: [
@@ -8310,7 +8310,7 @@ function ChartTooltipContent({
                   "div",
                   {
                     className: cn(
-                      "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                      "shrink-0 rounded-sm border-(--color-border) bg-(--color-bg)",
                       {
                         "h-2.5 w-2.5": indicator === "dot",
                         "w-1": indicator === "line",
@@ -8417,7 +8417,7 @@ function Checkbox({ className, ...props }) {
       "data-slot": "checkbox",
       className: cn(
         // Base styles
-        "peer flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-[4px] border border-primary-800 shadow-xs ring-offset-white transition-shadow outline-none",
+        "peer flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm border border-primary-800 shadow-xs ring-offset-white transition-shadow outline-none",
         // Dark mode styles
         "dark:bg-input/30",
         // Checked styles
@@ -13579,7 +13579,7 @@ function PreWithCopy(props) {
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
-        className: "absolute top-2 right-2 m-0.5 inline-flex h-8 items-center justify-center rounded-lg border border-gray-200 bg-white px-2.5 py-2 text-gray-900 opacity-0 transition-opacity group-hover:opacity-100 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700",
+        className: "absolute top-2 right-2 m-0.5 inline-flex h-8 items-center justify-center rounded-sm border border-gray-200 bg-white px-2.5 py-2 text-gray-900 opacity-0 transition-opacity group-hover:opacity-100 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700",
         "aria-label": "Copy code to clipboard",
         onClick: handleCopy,
         children: [
@@ -13645,7 +13645,7 @@ function PopoverContent({
       className: cn(
         [
           // Base
-          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-background p-4 text-foreground shadow-md outline-hidden",
+          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-sm border bg-background p-4 text-foreground shadow-md outline-hidden",
           // Open
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           // Closed
@@ -14022,7 +14022,7 @@ function SegmentedControlTrigger({
     {
       "data-slot": "segmented-control-trigger",
       className: cn(
-        "inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:shadow-sm dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-sm border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:shadow-sm dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -14048,7 +14048,7 @@ function ThemeSelectorLoading() {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 w-20 rounded bg-grey-200" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-3 rounded-md border border-muted bg-muted/30 p-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-3 rounded-sm border border-muted bg-muted/30 p-3", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex min-w-0 items-center justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-48 rounded bg-grey-200" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 rounded bg-grey-200" })
@@ -14228,7 +14228,7 @@ function ThemeSelectorContent({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-medium", children: "Share Theme" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-3 rounded-md border border-muted bg-muted/30 p-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-3 rounded-sm border border-muted bg-muted/30 p-3", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex min-w-0 items-center justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Copy this URL to share your theme selection:" }),
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -14246,7 +14246,7 @@ function ThemeSelectorContent({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("code", { className: "block w-full rounded border bg-background px-2 py-1.5 font-mono text-xs break-all text-foreground", children: themeUrl })
+        /* @__PURE__ */ jsxRuntime.jsx("code", { className: "block w-full rounded-sm border bg-background px-2 py-1.5 font-mono text-xs break-all text-foreground", children: themeUrl })
       ] })
     ] })
   ] });
@@ -14298,7 +14298,7 @@ function TooltipContent({
 }
 function CodeDemoLoading() {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 animate-pulse", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full rounded-t-xl border border-grey-200 bg-grey-50 p-4 dark:border-grey-600 dark:bg-grey-700", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full rounded-t-sm border border-grey-200 bg-grey-50 p-4 dark:border-grey-600 dark:bg-grey-700", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-32 rounded bg-grey-200 dark:bg-grey-600" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-32 rounded bg-grey-200 dark:bg-grey-600" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-3", children: [
@@ -14309,7 +14309,7 @@ function CodeDemoLoading() {
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex border-x border-grey-200 bg-white bg-gradient-to-r p-5 dark:border-grey-600 dark:bg-grey-900", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-64 w-full rounded bg-grey-200 dark:bg-grey-600" }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border border-grey-200 dark:border-grey-600", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full rounded-t-md border-b border-grey-200 bg-grey-50 p-2 dark:border-grey-600 dark:bg-grey-700", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-24 rounded bg-grey-200 dark:bg-grey-600" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full rounded-t-sm border-b border-grey-200 bg-grey-50 p-2 dark:border-grey-600 dark:bg-grey-700", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-24 rounded bg-grey-200 dark:bg-grey-600" }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-48 bg-grey-100 dark:bg-grey-800" })
     ] })
   ] });
@@ -14493,7 +14493,7 @@ function CodeDemoContent({ data, showCode = true, controls = defaultControls })
     }
   }, [themeCategory, primaryColor, accentColor, greyColor, isThemeInitialized]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full rounded-t-xl border border-grey-200 bg-grey-50 p-4 dark:border-grey-600 dark:bg-grey-700", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex w-full items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full rounded-t-sm border border-grey-200 bg-grey-50 p-4 dark:border-grey-600 dark:bg-grey-700", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex w-full items-center", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
         data.githubSlug && /* @__PURE__ */ jsxRuntime.jsx(EditOnGithubButton, { githubSlug: data.githubSlug }),
         data.figmaSlug && /* @__PURE__ */ jsxRuntime.jsx(OpenInFigmaButton, { figmaSlug: data.figmaSlug })
@@ -14552,7 +14552,7 @@ function CodeDemoContent({ data, showCode = true, controls = defaultControls })
           shouldExpand && "pb-[41px]"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full rounded-t-md border-b border-grey-200 bg-grey-50 dark:border-grey-600 dark:bg-grey-700", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full rounded-t-sm border-b border-grey-200 bg-grey-50 dark:border-grey-600 dark:bg-grey-700", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Tabs, { tabIndex, items: codeItems, onSelect: setTabIndex }),
             variants.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Select, { onValueChange: (value) => handleSelectVariant(value), children: [
               /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select a variant" }) }),
@@ -14972,8 +14972,23 @@ function ColorCard({ name, token, hex: hex2, rgb: rgb2, hsl, oklch: oklch2, form
     ] })
   ] }) });
 }
-var recommendedBackgroundTones = [100, 200, 400, 500, 600, 700, 800];
+var recommendedBackgroundTones = [50, 100, 200, 400, 600, 800];
+var recommendedForegroundTones = [50, 200, 400, 600, 800];
 var AAA_NORMAL_TEXT_RATIO = 7;
+var DEFAULT_PRIMARY_FAMILY_KEY = "blue";
+var DEFAULT_ACCENT_FAMILY_KEY = "red";
+var MIN_DARK_BACKGROUND_TONE_FOR_WHITE = 600;
+var WHITE_FOREGROUND = {
+  token: "white",
+  name: "White",
+  hex: "#ffffff",
+  rgb: "rgb(255, 255, 255)",
+  hsl: "hsl(0, 0%, 100%)",
+  oklch: "oklch(1 0 0)",
+  familyKey: "white",
+  familyLabel: "White",
+  tone: 0
+};
 function extractTone(token) {
   const match = token.match(/-(\d+)$/);
   return match ? Number.parseInt(match[1], 10) : 0;
@@ -14982,23 +14997,48 @@ function formatFamilyLabel(name, key) {
   if (key === "grey") return "Grey";
   return name.replace(/^NSW Aboriginal\s+/i, "").replace(/^NSW\s+/i, "").trim();
 }
-function toPairingColor(color2) {
+function toPairingColor(color2, familyKey, familyLabel) {
   return {
     ...color2,
+    familyKey,
+    familyLabel,
     tone: extractTone(color2.token)
   };
 }
-function getPreferredForegroundTone(backgroundTone) {
-  if (backgroundTone <= 200) return 800;
-  if (backgroundTone <= 500) return 700;
-  if (backgroundTone <= 650) return 250;
-  return 200;
+function buildPairingCollections() {
+  return {
+    brand: Object.entries(colors.brand).map(([key, palette]) => {
+      const familyLabel = formatFamilyLabel(palette.name, key);
+      return {
+        key,
+        label: familyLabel,
+        paletteName: palette.name,
+        colors: palette.colors.map((color2) => toPairingColor(color2, key, familyLabel))
+      };
+    }),
+    aboriginal: Object.entries(colors.aboriginal).map(([key, palette]) => {
+      const familyLabel = formatFamilyLabel(palette.name, key);
+      return {
+        key,
+        label: familyLabel,
+        paletteName: palette.name,
+        colors: palette.colors.map((color2) => toPairingColor(color2, key, familyLabel))
+      };
+    })
+  };
 }
+var pairingFamilyCollections = buildPairingCollections();
 function getPairRating(contrastRatio) {
   if (contrastRatio >= 7) return "AAA";
   if (contrastRatio >= 4.5) return "AA";
   return "AA Large";
 }
+function getPreferredForegroundTone(backgroundTone) {
+  if (backgroundTone <= 200) return 800;
+  if (backgroundTone <= 500) return 700;
+  if (backgroundTone <= 650) return 250;
+  return 200;
+}
 function isPreferredDirection(backgroundTone, foregroundTone, preferredForegroundTone) {
   if (preferredForegroundTone < backgroundTone) {
     return foregroundTone < backgroundTone;
@@ -15021,15 +15061,27 @@ function buildPair(background, foreground) {
     rating: getPairRating(contrastRatio)
   };
 }
-function pickForeground(colorsToPair, background, minimumRatio) {
+function sortRecommendedPairs(background, pairs) {
   const preferredForegroundTone = getPreferredForegroundTone(background.tone);
-  const passingCandidates = colorsToPair.filter((color2) => color2.token !== background.token).map((color2) => buildPair(background, color2)).filter((pair) => pair.contrastRatio >= minimumRatio);
-  if (passingCandidates.length === 0) return null;
-  const preferredCandidates = passingCandidates.filter(
-    (pair) => isPreferredDirection(background.tone, pair.foreground.tone, preferredForegroundTone)
-  );
-  const candidates = preferredCandidates.length > 0 ? preferredCandidates : passingCandidates;
-  return candidates.sort((left, right) => {
+  return [...pairs].sort((left, right) => {
+    const leftPreferred = isPreferredDirection(
+      background.tone,
+      left.foreground.tone,
+      preferredForegroundTone
+    ) ? 0 : 1;
+    const rightPreferred = isPreferredDirection(
+      background.tone,
+      right.foreground.tone,
+      preferredForegroundTone
+    ) ? 0 : 1;
+    if (leftPreferred !== rightPreferred) {
+      return leftPreferred - rightPreferred;
+    }
+    const leftWhitePenalty = left.foreground.token === WHITE_FOREGROUND.token ? 1 : 0;
+    const rightWhitePenalty = right.foreground.token === WHITE_FOREGROUND.token ? 1 : 0;
+    if (leftWhitePenalty !== rightWhitePenalty) {
+      return leftWhitePenalty - rightWhitePenalty;
+    }
     const leftTargetDelta = Math.abs(left.foreground.tone - preferredForegroundTone);
     const rightTargetDelta = Math.abs(right.foreground.tone - preferredForegroundTone);
     if (leftTargetDelta !== rightTargetDelta) {
@@ -15040,46 +15092,122 @@ function pickForeground(colorsToPair, background, minimumRatio) {
     if (leftToneGap !== rightToneGap) {
       return rightToneGap - leftToneGap;
     }
+    if (left.foreground.familyKey === background.familyKey && right.foreground.familyKey !== background.familyKey) {
+      return -1;
+    }
+    if (right.foreground.familyKey === background.familyKey && left.foreground.familyKey !== background.familyKey) {
+      return 1;
+    }
     return right.contrastRatio - left.contrastRatio;
-  })[0];
+  });
 }
-function buildRecommendedPairs(colorsToPair, minimumRatio) {
-  const backgrounds = recommendedBackgroundTones.map((tone) => colorsToPair.find((color2) => color2.tone === tone)).filter((color2) => Boolean(color2));
-  const recommendedPairs = [];
-  for (const background of backgrounds) {
-    const pair = pickForeground(colorsToPair, background, minimumRatio);
-    if (!pair || recommendedPairs.some((item) => item.id === pair.id)) {
-      continue;
-    }
-    recommendedPairs.push(pair);
+function dedupeColors(colorsToDedupe) {
+  return Array.from(new Map(colorsToDedupe.map((color2) => [color2.token, color2])).values());
+}
+function buildRecommendedPairsForBackground(background, foregrounds, minimumRatio) {
+  const candidatePairs = foregrounds.filter((foreground) => foreground.token !== background.token).map((foreground) => buildPair(background, foreground)).filter((pair) => pair.contrastRatio >= minimumRatio);
+  const whitePair = background.tone >= MIN_DARK_BACKGROUND_TONE_FOR_WHITE ? buildPair(background, WHITE_FOREGROUND) : null;
+  if (whitePair && whitePair.contrastRatio >= minimumRatio) {
+    candidatePairs.push(whitePair);
   }
-  return recommendedPairs;
+  const dedupedPairs = Array.from(new Map(candidatePairs.map((pair) => [pair.id, pair])).values());
+  return sortRecommendedPairs(background, dedupedPairs);
+}
+function findGreyFamily(families) {
+  return families.find((family) => family.key.toLowerCase().includes("grey")) ?? families[0];
+}
+function getNonGreyFamilies(families) {
+  const greyFamily = findGreyFamily(families);
+  return families.filter((family) => family.key !== greyFamily.key);
+}
+function findFamilyByKey(families, key) {
+  return key ? families.find((family) => family.key === key) : void 0;
+}
+function getDefaultPrimaryFamily(families) {
+  const nonGreyFamilies = getNonGreyFamilies(families);
+  return findFamilyByKey(nonGreyFamilies, DEFAULT_PRIMARY_FAMILY_KEY) ?? findFamilyByKey(nonGreyFamilies, "green") ?? nonGreyFamilies[0] ?? families[0];
 }
-function buildRecommendedCollections(minimumRatio) {
+function getDefaultAccentFamily(families, primaryKey) {
+  const nonGreyFamilies = getNonGreyFamilies(families).filter((family) => family.key !== primaryKey);
+  return findFamilyByKey(nonGreyFamilies, DEFAULT_ACCENT_FAMILY_KEY) ?? nonGreyFamilies[0] ?? getDefaultPrimaryFamily(families);
+}
+function isApprovedBackgroundTone(color2) {
+  return recommendedBackgroundTones.includes(
+    color2.tone
+  );
+}
+function isApprovedForegroundTone(color2) {
+  return recommendedForegroundTones.includes(
+    color2.tone
+  );
+}
+function getPairingFamilies(themeCategory) {
+  return pairingFamilyCollections[themeCategory];
+}
+function getDefaultAccentFamilyKey(themeCategory, primaryKey) {
+  return getDefaultAccentFamily(getPairingFamilies(themeCategory), primaryKey).key;
+}
+function getPairingContext(themeCategory, primaryKey, accentKey) {
+  const families = getPairingFamilies(themeCategory);
+  const primary = findFamilyByKey(getNonGreyFamilies(families), primaryKey) ?? getDefaultPrimaryFamily(families);
+  const accent = findFamilyByKey(
+    getNonGreyFamilies(families).filter((family) => family.key !== primary.key),
+    accentKey
+  ) ?? getDefaultAccentFamily(families, primary.key);
+  const grey = findGreyFamily(families);
+  const allFamilies = [primary, accent, grey];
+  const backgroundGroups = [
+    {
+      key: "primary",
+      label: "Primary backgrounds",
+      family: primary,
+      backgrounds: primary.colors.filter(isApprovedBackgroundTone)
+    },
+    {
+      key: "accent",
+      label: "Accent backgrounds",
+      family: accent,
+      backgrounds: accent.colors.filter(isApprovedBackgroundTone)
+    },
+    {
+      key: "grey",
+      label: "Grey backgrounds",
+      family: grey,
+      backgrounds: grey.colors.filter(isApprovedBackgroundTone)
+    }
+  ];
+  const backgrounds = backgroundGroups.flatMap((group) => group.backgrounds);
+  const candidateForegrounds = dedupeColors(
+    allFamilies.flatMap((family) => family.colors.filter(isApprovedForegroundTone))
+  );
+  const pairsByBackground = {};
+  for (const background of backgrounds) {
+    pairsByBackground[background.token] = buildRecommendedPairsForBackground(
+      background,
+      candidateForegrounds,
+      AAA_NORMAL_TEXT_RATIO
+    );
+  }
   return {
-    brand: Object.entries(colors.brand).map(([key, palette]) => {
-      const scale2 = palette.colors.map(toPairingColor);
-      return {
-        key,
-        label: formatFamilyLabel(palette.name, key),
-        paletteName: palette.name,
-        colors: scale2,
-        recommendedPairs: buildRecommendedPairs(scale2, minimumRatio)
-      };
-    }),
-    aboriginal: Object.entries(colors.aboriginal).map(([key, palette]) => {
-      const scale2 = palette.colors.map(toPairingColor);
-      return {
-        key,
-        label: formatFamilyLabel(palette.name, key),
-        paletteName: palette.name,
-        colors: scale2,
-        recommendedPairs: buildRecommendedPairs(scale2, minimumRatio)
-      };
-    })
+    accent,
+    allFamilies,
+    backgroundGroups,
+    backgrounds,
+    grey,
+    pairsByBackground,
+    primary,
+    recommendedPairs: backgrounds.flatMap(
+      (background) => pairsByBackground[background.token] ?? []
+    ),
+    themeCategory
   };
 }
-var recommendedAaaPairingCollections = buildRecommendedCollections(AAA_NORMAL_TEXT_RATIO);
+function getWhiteForegroundPair(background) {
+  return buildPair(background, WHITE_FOREGROUND);
+}
+function supportsWhiteForegroundPreview(background) {
+  return background.tone >= MIN_DARK_BACKGROUND_TONE_FOR_WHITE;
+}
 function getPairingColorValue(color2, format) {
   return getColorValue(color2, format);
 }
@@ -15225,42 +15353,125 @@ function FormatToggle({ format, setFormat }) {
     )
   ] });
 }
-function getPreferredFamilyKey(families) {
-  return families.find((family) => family.key === "green")?.key ?? families[0]?.key ?? "";
+var AAA_NORMAL_TEXT_THRESHOLD = "7.0:1 or higher for text below 18pt, or below 14pt bold";
+var AAA_LARGE_TEXT_THRESHOLD = "4.5:1 or higher for text at 18pt and above, or 14pt and above bold";
+var PREFERRED_BACKGROUND_TONES = [400, 600, 200, 800, 100, 50];
+function getToneFromToken(token) {
+  if (!token) return null;
+  const match = token.match(/-(\d+)$/);
+  return match ? Number.parseInt(match[1], 10) : null;
+}
+function getFamilySwatchColor(family, preferredTone = 600) {
+  const exactMatch = family.colors.find((color2) => color2.tone === preferredTone);
+  if (exactMatch) {
+    return exactMatch.hex;
+  }
+  const closestMatch = [...family.colors].sort(
+    (left, right) => Math.abs(left.tone - preferredTone) - Math.abs(right.tone - preferredTone)
+  )[0];
+  return closestMatch?.hex ?? "transparent";
+}
+function getFamilySelectorLabel(family, themeCategory, selectionRole) {
+  if (themeCategory !== "aboriginal") {
+    return family.label;
+  }
+  const preferredTone = selectionRole === "primary colour" ? 800 : 600;
+  return family.colors.find((color2) => color2.tone === preferredTone)?.name ?? family.label;
 }
-function getDefaultPair(family) {
-  if (!family || family.recommendedPairs.length === 0) return null;
-  return family.recommendedPairs.reduce((bestPair, pair) => {
-    const bestDelta = Math.abs(bestPair.background.tone - 600);
-    const currentDelta = Math.abs(pair.background.tone - 600);
-    return currentDelta < bestDelta ? pair : bestPair;
-  }, family.recommendedPairs[0]);
+function isWhiteForegroundPair(pair) {
+  return pair.foreground.token === "white";
 }
-function getFamilySwatchColor(family) {
-  return family.colors.find((color2) => color2.tone === 500)?.hex ?? family.colors.find((color2) => color2.tone === 400)?.hex ?? family.colors[Math.min(3, family.colors.length - 1)]?.hex ?? "transparent";
+function getPreferredPairForBackground(pairs, preferredPairId) {
+  if (preferredPairId) {
+    const preferredPair = pairs.find((pair) => pair.id === preferredPairId);
+    if (preferredPair) {
+      return preferredPair;
+    }
+  }
+  return pairs.find((pair) => !isWhiteForegroundPair(pair)) ?? pairs[0] ?? null;
+}
+function getDefaultBackgroundToken(context) {
+  for (const tone of PREFERRED_BACKGROUND_TONES) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find(
+        (background) => background.tone === tone && (context.pairsByBackground[background.token]?.length ?? 0) > 0
+      );
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  for (const tone of PREFERRED_BACKGROUND_TONES) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find((background) => background.tone === tone);
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  return context.backgrounds[0]?.token ?? "";
+}
+function resolveBackgroundToken(context, preferredToken, preferredTone) {
+  if (preferredToken && context.backgrounds.some((background) => background.token === preferredToken)) {
+    return preferredToken;
+  }
+  if (preferredTone !== null && preferredTone !== void 0) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find((background) => background.tone === preferredTone);
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  return getDefaultBackgroundToken(context);
 }
 function ColorPairingToolLoading() {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse space-y-6", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-40 rounded-md border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 xl:grid-cols-[minmax(0,1.3fr)_minmax(20rem,0.9fr)]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-96 rounded-md border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-96 rounded-md border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-32 rounded-sm border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 lg:grid-cols-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-48 rounded-sm border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-48 rounded-sm border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 xl:grid-cols-[minmax(0,1.5fr)_minmax(18rem,0.72fr)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-96 rounded-sm border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-96 rounded-sm border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" })
     ] })
   ] });
 }
 function getInitialPairingState(searchParams) {
   const paletteParam = searchParams.get("palette");
-  const familyParam = searchParams.get("family");
+  const primaryParam = searchParams.get("primary");
+  const accentParam = searchParams.get("accent");
   const pairParam = searchParams.get("pair");
+  const backgroundParam = searchParams.get("background");
   const themeCategory = paletteParam === "brand" || paletteParam === "aboriginal" ? paletteParam : "brand";
-  const families = recommendedAaaPairingCollections[themeCategory];
-  const familyKey = families.some((family) => family.key === familyParam) ? familyParam : getPreferredFamilyKey(families);
-  const activeFamily = families.find((family) => family.key === familyKey) ?? families[0];
-  const defaultPair = getDefaultPair(activeFamily);
-  const selectedPairId = activeFamily?.recommendedPairs.some((pair) => pair.id === pairParam) ? pairParam : defaultPair?.id ?? "";
-  return { familyKey, selectedPairId, themeCategory };
-}
-function PairPreview({ family, pair }) {
+  const context = getPairingContext(themeCategory, primaryParam, accentParam);
+  const pairBackgroundToken = context.recommendedPairs.find((pair) => pair.id === pairParam)?.background.token ?? null;
+  const selectedBackgroundToken = resolveBackgroundToken(
+    context,
+    backgroundParam ?? pairBackgroundToken,
+    getToneFromToken(backgroundParam ?? pairBackgroundToken)
+  );
+  const selectedPairId = getPreferredPairForBackground(
+    context.pairsByBackground[selectedBackgroundToken] ?? [],
+    pairParam
+  )?.id ?? "";
+  return {
+    accentKey: context.accent.key,
+    primaryKey: context.primary.key,
+    selectedBackgroundToken,
+    selectedPairId,
+    themeCategory
+  };
+}
+function PairPreview({
+  familySummary,
+  isRecommended,
+  pair
+}) {
+  const whiteForeground = isWhiteForegroundPair(pair);
+  const statusLabel = isRecommended ? "Pass" : pair.passes.aaaLarge ? "Large text only" : "Example only";
+  const StatusIcon = isRecommended ? Icons.check : Icons.info;
   return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "gap-0 overflow-hidden py-0", children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -15282,7 +15493,7 @@ function PairPreview({ family, pair }) {
               },
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(Icons.palette, { "data-slot": "icon", className: "size-4" }),
-                family.label
+                familySummary
               ]
             }
           ),
@@ -15303,10 +15514,10 @@ function PairPreview({ family, pair }) {
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-xl space-y-4 pb-12 sm:pb-16", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: "Tone on tone" }),
+          /* @__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-4xl leading-none font-bold text-current sm:text-5xl", children: "Pair colour with confidence." }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-md text-sm/6 sm:text-base/7", children: "Use only AAA-approved tone-on-tone combinations for headings, body copy, and calls to action on colour." })
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-md text-sm/6 sm:text-base/7", children: whiteForeground ? isRecommended ? "Use white text on dark colour only when it meets AAA for headings, body copy, and calls to action." : "This white text example is included for reference on approved dark backgrounds. Check the result card below before using it for normal or large text." : "Use only AAA-recommended combinations across your selected primary, accent, and grey families." })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
@@ -15319,8 +15530,8 @@ function PairPreview({ family, pair }) {
                 color: pair.background.hex
               },
               children: [
-                "Pass",
-                /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "data-slot": "icon", className: "size-4" })
+                statusLabel,
+                /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { "data-slot": "icon", className: "size-4" })
               ]
             }
           ),
@@ -15343,6 +15554,41 @@ function PairPreview({ family, pair }) {
     }
   ) });
 }
+function PreviewFallbackCard({
+  familySummary,
+  selectedBackground
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "gap-0 overflow-hidden py-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "p-6 sm:min-h-[26rem] sm:p-8",
+      style: {
+        backgroundColor: selectedBackground.hex,
+        color: selectedBackground.tone >= 600 ? "#ffffff" : "#002664"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-[22rem] flex-col justify-between gap-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2 rounded-full border border-current bg-transparent px-3 py-1 text-[0.72rem] font-semibold tracking-[0.16em] uppercase", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icons.palette, { "data-slot": "icon", className: "size-4" }),
+          familySummary
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-xl space-y-4 pb-12 sm:pb-16", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: "Approved background" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "max-w-lg text-4xl leading-none font-bold text-current sm:text-5xl", children: "Pair colour with confidence." }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-md text-sm/6 sm:text-base/7", children: "This approved background tone does not currently have a recommended AAA foreground in this tool." })
+          ] })
+        ] }),
+        /* @__PURE__ */ 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 bg-current/10 px-4 py-2 text-sm font-semibold", children: [
+            "No recommendation",
+            /* @__PURE__ */ jsxRuntime.jsx(Icons.info, { "data-slot": "icon", className: "size-4" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex rounded-full border border-current px-4 py-2 text-sm", children: selectedBackground.token })
+        ] })
+      ] })
+    }
+  ) });
+}
 function PairDetailCard({
   color: color2,
   format,
@@ -15380,7 +15626,7 @@ function PairDetailCard({
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: "size-14 rounded-2xl border border-grey-200 shadow-sm dark:border-grey-700",
+          className: "size-14 rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
           style: { backgroundColor: color2.hex }
         }
       ),
@@ -15419,7 +15665,7 @@ function ComplianceRow({
   passes,
   threshold
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 rounded-xl border border-grey-200 px-4 py-3 dark:border-grey-700", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 rounded-sm border border-grey-200 px-4 py-3 dark:border-grey-700", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: label }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: threshold })
@@ -15446,7 +15692,7 @@ function PairComplianceCard({ pair }) {
       /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "Only pairs that pass AAA normal-text contrast are suggested here. Evaluation uses the raw contrast ratio, not the rounded display value." })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-grey-200 bg-grey-50 px-4 py-3 dark:border-grey-700 dark:bg-grey-900/60", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-sm border border-grey-200 bg-grey-50 px-4 py-3 dark:border-grey-700 dark:bg-grey-900/60", children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: "Contrast ratio" }),
         /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 text-2xl font-semibold", children: [
           pair.contrastRatio.toFixed(2),
@@ -15458,7 +15704,7 @@ function PairComplianceCard({ pair }) {
         {
           label: "AAA normal text",
           passes: pair.passes.aaaText,
-          threshold: "7.0:1 or higher"
+          threshold: AAA_NORMAL_TEXT_THRESHOLD
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -15466,31 +15712,155 @@ function PairComplianceCard({ pair }) {
         {
           label: "AAA large text",
           passes: pair.passes.aaaLarge,
-          threshold: "4.5:1 or higher"
+          threshold: AAA_LARGE_TEXT_THRESHOLD
         }
       )
     ] })
   ] });
 }
+function WhiteTextExampleCard({ pair }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "gap-2 border-b", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-base", children: "White text example" }),
+      /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "For approved dark backgrounds, white text may be suitable for large text. It is only recommended in this tool when it also passes AAA normal text." })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "grid gap-6 xl:grid-cols-[minmax(0,1.1fr)_minmax(18rem,0.9fr)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "rounded-sm border border-grey-200 p-6 dark:border-grey-700",
+          style: {
+            backgroundColor: pair.background.hex,
+            color: pair.foreground.hex
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg leading-tight font-semibold", children: "Large text example" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm/6", children: [
+                "White text on ",
+                pair.background.token
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 text-sm/6", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+                "AAA normal text: ",
+                /* @__PURE__ */ jsxRuntime.jsx("strong", { children: pair.passes.aaaText ? "pass" : "fail" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+                "AAA large text: ",
+                /* @__PURE__ */ jsxRuntime.jsx("strong", { children: pair.passes.aaaLarge ? "pass" : "fail" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm/6", children: "Normal text means body text and smaller headings below 18pt, or below 14pt when bold. Large text means 18pt and above, or 14pt and above when bold." })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-sm border border-grey-200 bg-grey-50 px-4 py-3 dark:border-grey-700 dark:bg-grey-900/60", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: "Contrast ratio" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 text-2xl font-semibold", children: [
+            pair.contrastRatio.toFixed(2),
+            ":1"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ComplianceRow,
+          {
+            label: "AAA normal text",
+            passes: pair.passes.aaaText,
+            threshold: AAA_NORMAL_TEXT_THRESHOLD
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ComplianceRow,
+          {
+            label: "AAA large text",
+            passes: pair.passes.aaaLarge,
+            threshold: AAA_LARGE_TEXT_THRESHOLD
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function ColorFamilySelector({
+  families,
+  label,
+  selectedKey,
+  selectionRole,
+  themeCategory,
+  onSelect
+}) {
+  const swatchTone = selectionRole === "primary colour" ? 800 : 600;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-medium", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2 lg:grid-cols-4 xl:grid-cols-5", children: families.map((family) => {
+      const isSelected = family.key === selectedKey;
+      const familySelectorLabel = getFamilySelectorLabel(family, themeCategory, selectionRole);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Select ${familySelectorLabel} as ${selectionRole}`,
+          "aria-pressed": isSelected,
+          onClick: () => onSelect(family.key),
+          className: cn(
+            "group relative flex w-full items-center gap-3 rounded-sm border px-3 py-2 text-left transition-colors",
+            "border-grey-200 bg-background hover:bg-primary-800/10 hover:text-foreground dark:hover:bg-white/10",
+            isSelected && "border-grey-800 dark:border-grey-400"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "size-4 shrink-0 rounded-full",
+                style: { backgroundColor: getFamilySwatchColor(family, swatchTone) }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: familySelectorLabel })
+          ]
+        },
+        family.key
+      );
+    }) })
+  ] });
+}
 function ColorPairingToolContent() {
   const searchParams = navigation.useSearchParams();
   const {
-    familyKey: initialFamilyKey,
+    accentKey: initialAccentKey,
+    primaryKey: initialPrimaryKey,
+    selectedBackgroundToken: initialSelectedBackgroundToken,
     selectedPairId: initialSelectedPairId,
     themeCategory: initialThemeCategory
   } = getInitialPairingState(searchParams);
   const [themeCategory, setThemeCategory] = React5.useState(initialThemeCategory);
   const [format, setFormat] = React5.useState("hex");
-  const [activeFamilyKey, setActiveFamilyKey] = React5.useState(initialFamilyKey);
+  const [primaryFamilyKey, setPrimaryFamilyKey] = React5.useState(initialPrimaryKey);
+  const [accentFamilyKey, setAccentFamilyKey] = React5.useState(initialAccentKey);
+  const [selectedBackgroundToken, setSelectedBackgroundToken] = React5.useState(
+    initialSelectedBackgroundToken
+  );
   const [selectedPairId, setSelectedPairId] = React5.useState(initialSelectedPairId);
-  const families = recommendedAaaPairingCollections[themeCategory];
-  const resolvedActiveFamilyKey = families.some((family) => family.key === activeFamilyKey) ? activeFamilyKey : getPreferredFamilyKey(families);
-  const activeFamily = families.find((family) => family.key === resolvedActiveFamilyKey) ?? families[0];
-  const selectedPair = activeFamily?.recommendedPairs.find((pair) => pair.id === selectedPairId) ?? getDefaultPair(activeFamily);
-  const updateUrlParams = (nextThemeCategory, nextFamilyKey, nextSelectedPairId) => {
+  const themeFamilies = getPairingFamilies(themeCategory);
+  const context = getPairingContext(themeCategory, primaryFamilyKey, accentFamilyKey);
+  const selectableFamilies = themeFamilies.filter((family) => family.key !== context.grey.key);
+  const selectedBackground = context.backgrounds.find((background) => background.token === selectedBackgroundToken) ?? context.backgrounds[0] ?? null;
+  const selectedBackgroundPairs = selectedBackground ? context.pairsByBackground[selectedBackground.token] ?? [] : [];
+  const selectedPair = getPreferredPairForBackground(selectedBackgroundPairs, selectedPairId);
+  const whiteForegroundExample = selectedBackground && supportsWhiteForegroundPreview(selectedBackground) ? getWhiteForegroundPair(selectedBackground) : null;
+  const previewPair = selectedPair ?? whiteForegroundExample ?? null;
+  const showWhiteForegroundExample = Boolean(whiteForegroundExample) && (!selectedPair || selectedPair.foreground.token !== "white");
+  const detailForeground = selectedPair?.foreground ?? whiteForegroundExample?.foreground ?? null;
+  const familySummary = [context.primary.label, context.accent.label, context.grey.label].join(
+    " + "
+  );
+  const updateUrlParams = (nextThemeCategory, nextPrimaryKey, nextAccentKey, nextSelectedBackgroundToken, nextSelectedPairId) => {
     const params = new URLSearchParams(window.location.search);
     params.set("palette", nextThemeCategory);
-    params.set("family", nextFamilyKey);
+    params.set("primary", nextPrimaryKey);
+    params.set("accent", nextAccentKey);
+    params.set("background", nextSelectedBackgroundToken);
     if (nextSelectedPairId) {
       params.set("pair", nextSelectedPairId);
     } else {
@@ -15502,31 +15872,90 @@ function ColorPairingToolContent() {
       `${window.location.pathname}?${params.toString()}${window.location.hash}`
     );
   };
-  const handleThemeCategoryChange = (nextThemeCategory) => {
-    const nextFamilies = recommendedAaaPairingCollections[nextThemeCategory];
-    const nextFamilyKey = nextFamilies.some((family) => family.key === activeFamilyKey) ? activeFamilyKey : getPreferredFamilyKey(nextFamilies);
-    const nextActiveFamily = nextFamilies.find((family) => family.key === nextFamilyKey) ?? nextFamilies[0];
-    const nextSelectedPair = nextActiveFamily?.recommendedPairs.find((pair) => pair.id === selectedPairId) ?? getDefaultPair(nextActiveFamily);
+  const syncSelection = (nextThemeCategory, nextPrimaryKey, nextAccentKey, preferredBackgroundToken, preferredPairId) => {
+    const nextContext = getPairingContext(nextThemeCategory, nextPrimaryKey, nextAccentKey);
+    const nextSelectedBackgroundToken = resolveBackgroundToken(
+      nextContext,
+      preferredBackgroundToken,
+      getToneFromToken(preferredBackgroundToken)
+    );
+    const nextSelectedPairId = getPreferredPairForBackground(
+      nextContext.pairsByBackground[nextSelectedBackgroundToken] ?? [],
+      preferredPairId
+    )?.id ?? "";
     setThemeCategory(nextThemeCategory);
-    setActiveFamilyKey(nextFamilyKey);
-    setSelectedPairId(nextSelectedPair?.id ?? "");
-    updateUrlParams(nextThemeCategory, nextFamilyKey, nextSelectedPair?.id ?? "");
+    setPrimaryFamilyKey(nextContext.primary.key);
+    setAccentFamilyKey(nextContext.accent.key);
+    setSelectedBackgroundToken(nextSelectedBackgroundToken);
+    setSelectedPairId(nextSelectedPairId);
+    updateUrlParams(
+      nextThemeCategory,
+      nextContext.primary.key,
+      nextContext.accent.key,
+      nextSelectedBackgroundToken,
+      nextSelectedPairId
+    );
   };
-  const handleFamilyChange = (nextFamilyKey) => {
-    const nextActiveFamily = families.find((family) => family.key === nextFamilyKey);
-    const nextSelectedPair = nextActiveFamily?.recommendedPairs.find((pair) => pair.id === selectedPairId) ?? getDefaultPair(nextActiveFamily);
-    setActiveFamilyKey(nextFamilyKey);
-    setSelectedPairId(nextSelectedPair?.id ?? "");
-    updateUrlParams(themeCategory, nextFamilyKey, nextSelectedPair?.id ?? "");
+  const handleThemeCategoryChange = (nextThemeCategory) => {
+    syncSelection(
+      nextThemeCategory,
+      primaryFamilyKey,
+      accentFamilyKey,
+      selectedBackgroundToken,
+      selectedPairId
+    );
+  };
+  const handlePrimaryColorChange = (nextPrimaryKey) => {
+    const nextAccentKey = nextPrimaryKey === accentFamilyKey ? getDefaultAccentFamilyKey(themeCategory, nextPrimaryKey) : accentFamilyKey;
+    syncSelection(
+      themeCategory,
+      nextPrimaryKey,
+      nextAccentKey,
+      selectedBackgroundToken,
+      selectedPairId
+    );
+  };
+  const handleAccentColorChange = (nextAccentKey) => {
+    if (nextAccentKey === primaryFamilyKey) return;
+    syncSelection(
+      themeCategory,
+      primaryFamilyKey,
+      nextAccentKey,
+      selectedBackgroundToken,
+      selectedPairId
+    );
+  };
+  const handleBackgroundChange = (nextSelectedBackgroundToken) => {
+    const nextSelectedPairId = getPreferredPairForBackground(
+      context.pairsByBackground[nextSelectedBackgroundToken] ?? [],
+      selectedPairId
+    )?.id ?? "";
+    setSelectedBackgroundToken(nextSelectedBackgroundToken);
+    setSelectedPairId(nextSelectedPairId);
+    updateUrlParams(
+      themeCategory,
+      context.primary.key,
+      context.accent.key,
+      nextSelectedBackgroundToken,
+      nextSelectedPairId
+    );
   };
   const handlePairChange = (nextSelectedPairId) => {
+    const nextSelectedPair = selectedBackgroundPairs.find((pair) => pair.id === nextSelectedPairId);
+    if (!nextSelectedPair || !selectedBackground) return;
     setSelectedPairId(nextSelectedPairId);
-    updateUrlParams(themeCategory, resolvedActiveFamilyKey, nextSelectedPairId);
+    updateUrlParams(
+      themeCategory,
+      context.primary.key,
+      context.accent.key,
+      selectedBackground.token,
+      nextSelectedPairId
+    );
   };
-  if (!activeFamily || !selectedPair) {
+  if (!selectedBackground) {
     return /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "No recommended AAA pairs available" }),
-      /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "No recommended pairs are available for the current palette." })
+      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "No approved background tones available" }),
+      /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "No approved tones are available for the current palette." })
     ] }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
@@ -15547,154 +15976,207 @@ function ColorPairingToolContent() {
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(FormatToggle, { format, setFormat })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2 lg:grid-cols-4 xl:grid-cols-5", children: families.map((family) => {
-      const isActive = family.key === resolvedActiveFamilyKey;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ColorFamilySelector,
+        {
+          label: "Primary colour",
+          families: selectableFamilies,
+          selectedKey: context.primary.key,
+          selectionRole: "primary colour",
+          themeCategory,
+          onSelect: handlePrimaryColorChange
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ColorFamilySelector,
+        {
+          label: "Accent colour",
+          families: selectableFamilies.filter((family) => family.key !== context.primary.key),
+          selectedKey: context.accent.key,
+          selectionRole: "accent colour",
+          themeCategory,
+          onSelect: handleAccentColorChange
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Included families:" }),
+      context.allFamilies.map((family) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
         {
-          type: "button",
-          onClick: () => handleFamilyChange(family.key),
-          className: cn(
-            "group relative flex w-full items-center gap-3 rounded-sm border px-3 py-2 text-left transition-colors",
-            "border-grey-200 bg-background hover:bg-primary-800/10 hover:text-foreground dark:hover:bg-white/10",
-            isActive && "border-grey-800 dark:border-grey-400"
-          ),
+          className: "inline-flex items-center gap-2 rounded-full border border-grey-200 px-3 py-1 text-muted-foreground dark:border-grey-700",
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
-                className: "size-4 shrink-0 rounded-full",
+                className: "size-2.5 rounded-full",
                 style: { backgroundColor: getFamilySwatchColor(family) }
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: family.label })
+            family.label
           ]
         },
         family.key
-      );
-    }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-start gap-6 xl:grid-cols-[minmax(0,1.5fr)_minmax(17rem,0.68fr)]", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(PairPreview, { family: activeFamily, pair: selectedPair }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "gap-2 border-b", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-base", children: "Background tone strip" }),
-              /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "Filled chips have a recommended AAA foreground pair. Select one to update the preview." })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5 gap-2 sm:grid-cols-7 lg:grid-cols-10 xl:grid-cols-[repeat(19,minmax(0,1fr))]", children: activeFamily.colors.map((color2) => {
-                const pair = activeFamily.recommendedPairs.find(
-                  (item) => item.background.token === color2.token
-                );
-                const isSelected = selectedPair.background.token === color2.token;
-                return /* @__PURE__ */ jsxRuntime.jsxs(
+      ))
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-start gap-6 xl:grid-cols-[minmax(0,1.5fr)_minmax(18rem,0.72fr)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+        previewPair ? /* @__PURE__ */ jsxRuntime.jsx(
+          PairPreview,
+          {
+            familySummary,
+            isRecommended: Boolean(selectedPair),
+            pair: previewPair
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          PreviewFallbackCard,
+          {
+            familySummary,
+            selectedBackground
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "gap-2 border-b", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-base", children: "Approved backgrounds" }),
+            /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "Choose from your selected primary, accent, and grey background tones. Filled chips have at least one recommended AAA foreground. Foregrounds are limited to white and tones 50, 200, 400, 600, and 800." })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-5", children: [
+            context.backgroundGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: group.label }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: group.family.label })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2 sm:grid-cols-6", children: group.backgrounds.map((background) => {
+                const pairs = context.pairsByBackground[background.token] ?? [];
+                const preferredPair = selectedBackground.token === background.token ? selectedPair ?? getPreferredPairForBackground(pairs) : getPreferredPairForBackground(pairs);
+                const hasWhiteExample = supportsWhiteForegroundPreview(background);
+                const isSelected = selectedBackground.token === background.token;
+                const ariaLabel = pairs.length > 0 ? `Select ${background.token} background, recommended with ${preferredPair?.foreground.token ?? "an AAA foreground"}` : hasWhiteExample ? `Select ${background.token} background, white text example available` : `Select ${background.token} background, no recommended foreground in this tool`;
+                return /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
                     type: "button",
-                    disabled: !pair,
-                    onClick: () => pair && handlePairChange(pair.id),
+                    "aria-label": ariaLabel,
+                    "aria-pressed": isSelected,
+                    onClick: () => handleBackgroundChange(background.token),
                     className: cn(
-                      "group relative h-12 rounded-xl border transition-transform",
-                      pair ? "cursor-pointer border-grey-200 hover:scale-[1.03] dark:border-grey-700" : "cursor-not-allowed border-grey-100 dark:border-grey-800",
+                      "group relative h-12 rounded-sm border border-grey-200 transition-transform hover:scale-[1.03] dark:border-grey-700",
                       isSelected && "ring-2 ring-primary-500 ring-offset-2 ring-offset-background"
                     ),
-                    style: { backgroundColor: color2.hex },
-                    children: [
-                      pair && /* @__PURE__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          className: "absolute top-1/2 left-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/30 shadow-sm",
-                          style: { backgroundColor: pair.foreground.hex }
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sr-only", children: [
-                        color2.token,
-                        pair ? ` paired with ${pair.foreground.token}` : " has no recommended pair in this tool"
-                      ] })
-                    ]
+                    style: { backgroundColor: background.hex },
+                    children: preferredPair ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: "absolute top-1/2 left-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/30 shadow-sm",
+                        style: { backgroundColor: preferredPair.foreground.hex }
+                      }
+                    ) : null
                   },
-                  color2.token
+                  background.token
                 );
-              }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm text-muted-foreground", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                  "Selected background:",
-                  " ",
-                  /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-foreground", children: selectedPair.background.token })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                  "Recommended foreground:",
-                  " ",
-                  /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-foreground", children: selectedPair.foreground.token })
-                ] })
+              }) })
+            ] }, group.key)),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm text-muted-foreground", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                "Selected background:",
+                " ",
+                /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-foreground", children: selectedBackground.token })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                selectedPair ? "Selected foreground:" : "White text example:",
+                " ",
+                /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-foreground", children: selectedPair?.foreground.token ?? whiteForegroundExample?.foreground.token ?? "None" })
               ] })
             ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(PairDetailCard, { color: selectedPair.background, format, role: "Background" }),
-            /* @__PURE__ */ jsxRuntime.jsx(PairDetailCard, { color: selectedPair.foreground, format, role: "Foreground" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "h-fit", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "gap-2 border-b", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-base", children: "Recommended pairs" }),
-            /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "Recommended same-family combinations that meet AAA normal-text contrast." })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "grid gap-3", children: activeFamily.recommendedPairs.map((pair) => {
-            const isActive = selectedPair.id === pair.id;
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: () => handlePairChange(pair.id),
-                className: cn(
-                  "rounded-2xl border p-4 text-left transition-colors",
-                  isActive ? "border-primary-500 bg-primary-50/70 dark:bg-primary-950/30" : "border-grey-200 hover:border-grey-400 hover:bg-grey-50 dark:border-grey-700 dark:hover:border-grey-500 dark:hover:bg-grey-900/70"
-                ),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          className: "size-11 rounded-2xl border border-grey-200 shadow-sm dark:border-grey-700",
-                          style: { backgroundColor: pair.background.hex }
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          className: "size-11 rounded-2xl border border-grey-200 shadow-sm dark:border-grey-700",
-                          style: { backgroundColor: pair.foreground.hex }
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-grey-200 px-2.5 py-1 text-xs font-semibold text-muted-foreground dark:border-grey-700", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(Icons.contrast, { "data-slot": "icon", className: "size-4" }),
-                      pair.rating
-                    ] })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PairDetailCard, { color: selectedBackground, format, role: "Background" }),
+          detailForeground ? /* @__PURE__ */ jsxRuntime.jsx(PairDetailCard, { color: detailForeground, format, role: "Foreground" }) : /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { className: "gap-3 border-b", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "Foreground" }),
+              /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "No recommended foreground available" })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Select another approved tone or review the recommended foregrounds for the same background." }) })
+          ] })
+        ] }),
+        selectedPair ? /* @__PURE__ */ jsxRuntime.jsx(PairComplianceCard, { pair: selectedPair }) : null,
+        showWhiteForegroundExample && whiteForegroundExample ? /* @__PURE__ */ jsxRuntime.jsx(WhiteTextExampleCard, { pair: whiteForegroundExample }) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "h-fit", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "gap-2 border-b", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-base", children: "Recommended foregrounds" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(CardDescription, { children: [
+            "AAA combinations for ",
+            selectedBackground.token,
+            ", drawn from",
+            " ",
+            context.primary.label,
+            ", ",
+            context.accent.label,
+            ", Grey, and white using only foreground tones 50, 200, 400, 600, and 800."
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "grid gap-3", children: selectedBackgroundPairs.length > 0 ? selectedBackgroundPairs.map((pair) => {
+          const isActive = selectedPair?.id === pair.id;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Use ${pair.foreground.token} on ${pair.background.token}`,
+              "aria-pressed": isActive,
+              onClick: () => handlePairChange(pair.id),
+              className: cn(
+                "rounded-sm border p-4 text-left transition-colors",
+                isActive ? "border-primary-500 bg-primary-50/70 dark:bg-primary-950/30" : "border-grey-200 hover:border-grey-400 hover:bg-grey-50 dark:border-grey-700 dark:hover:border-grey-500 dark:hover:bg-grey-900/70"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: "size-11 rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
+                        style: { backgroundColor: pair.background.hex }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: "size-11 rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
+                        style: { backgroundColor: pair.foreground.hex }
+                      }
+                    )
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-1", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-medium text-foreground", children: [
-                      pair.background.token,
-                      " / ",
-                      pair.foreground.token
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
-                      pair.contrastRatio.toFixed(2),
-                      ":1 contrast ratio"
-                    ] })
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-grey-200 px-2.5 py-1 text-xs font-semibold text-muted-foreground dark:border-grey-700", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Icons.contrast, { "data-slot": "icon", className: "size-4" }),
+                    pair.rating
                   ] })
-                ]
-              },
-              pair.id
-            );
-          }) })
-        ] }) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(PairComplianceCard, { pair: selectedPair })
-    ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-medium text-foreground", children: [
+                    pair.background.token,
+                    " / ",
+                    pair.foreground.token
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+                    pair.foreground.familyLabel,
+                    " on ",
+                    pair.background.familyLabel
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+                    pair.contrastRatio.toFixed(2),
+                    ":1 contrast ratio"
+                  ] })
+                ] })
+              ]
+            },
+            pair.id
+          );
+        }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-sm border border-grey-200 p-4 text-sm text-muted-foreground dark:border-grey-700", children: "No recommended AAA foregrounds are available for this background." }) })
+      ] }) })
+    ] }) })
   ] });
 }
 function ColorPairingTool() {
@@ -16061,7 +16543,7 @@ var ChartTooltip4 = ({
       {
         className: cn(
           // base
-          "rounded-md border text-sm shadow-md",
+          "rounded-sm border text-sm shadow-md",
           // border color
           "border-gray-200 dark:border-gray-800",
           // background color
@@ -16653,7 +17135,7 @@ function DialogContent({
       {
         "data-slot": "dialog-content",
         className: cn(
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-sm border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
           className
         ),
         ...props,
@@ -16883,7 +17365,7 @@ function ContextMenuSubContent({
     {
       "data-slot": "context-menu-sub-content",
       className: cn(
-        "z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-sm border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       ),
       ...props
@@ -16899,7 +17381,7 @@ function ContextMenuContent({
     {
       "data-slot": "context-menu-content",
       className: cn(
-        "z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-sm border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       ),
       ...props
@@ -17406,7 +17888,7 @@ function DataTable({
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 p-1", children: [
     /* @__PURE__ */ jsxRuntime.jsx(DataTableToolbar, { table, search, toolbar }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-sm border", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: headerGroup.headers.map((header) => {
         return /* @__PURE__ */ jsxRuntime.jsx(TableHead, { colSpan: header.colSpan, children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id);
       }) }, headerGroup.id)) }),
@@ -17524,7 +18006,7 @@ var ChartTooltip5 = ({ active, payload, valueFormatter }) => {
       {
         className: cn(
           // base
-          "rounded-md border text-sm shadow-md",
+          "rounded-sm border text-sm shadow-md",
           // border color
           "border-gray-200 dark:border-gray-800",
           // background color
@@ -17762,8 +18244,8 @@ function DrawerContent({
         "data-slot": "drawer-content",
         className: cn(
           "group/drawer-content fixed z-50 flex h-auto flex-col bg-background",
-          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
-          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-sm data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-sm data-[vaul-drawer-direction=bottom]:border-t",
           "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
           "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
           className
@@ -18182,7 +18664,7 @@ function FormMessage({ className, ...props }) {
 
 // package.json
 var package_default = {
-  version: "1.97.13"};
+  version: "1.99.0"};
 var SluggerContext = React5__namespace.default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";
@@ -18333,7 +18815,7 @@ function SiteSearch({ navigation: navigation$1 }) {
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden text-grey-600 lg:inline-flex dark:text-grey-200", children: "Search site..." }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex lg:hidden dark:text-grey-200", children: "Search..." }),
-          /* @__PURE__ */ jsxRuntime.jsxs("kbd", { className: "pointer-events-none absolute top-2 right-2 hidden h-5 items-center gap-1 rounded border bg-muted px-2 font-mono text-xs font-medium opacity-100 select-none sm:flex", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("kbd", { className: "pointer-events-none absolute top-2 right-2 hidden h-5 items-center gap-1 rounded-sm border bg-muted px-2 font-mono text-xs font-medium opacity-100 select-none sm:flex", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", children: "\u2318" }),
             "K"
           ] })
@@ -18548,7 +19030,7 @@ function HoverCardContent({
       align,
       sideOffset,
       className: cn(
-        "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-sm border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       ),
       ...props
@@ -18586,7 +19068,7 @@ function InputOTPSlot({
       "data-slot": "input-otp-slot",
       "data-active": isActive,
       className: cn(
-        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all outline-none first:rounded-l-sm first:border-l last:rounded-r-sm aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
         className
       ),
       ...props,
@@ -18871,7 +19353,7 @@ var ChartTooltip6 = ({ active, payload, label, valueFormatter }) => {
       {
         className: cn(
           // base
-          "rounded-md border text-sm shadow-md",
+          "rounded-sm border text-sm shadow-md",
           // border color
           "border-gray-200 dark:border-gray-800",
           // background color
@@ -19766,7 +20248,7 @@ function Menubar({ className, ...props }) {
     {
       "data-slot": "menubar",
       className: cn(
-        "flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-xs",
+        "flex h-9 items-center gap-1 rounded-sm border bg-background p-1 shadow-xs",
         className
       ),
       ...props
@@ -19816,7 +20298,7 @@ function MenubarContent({
       alignOffset,
       sideOffset,
       className: cn(
-        "z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-sm border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       ),
       ...props
@@ -19960,7 +20442,7 @@ function MenubarSubContent({
     {
       "data-slot": "menubar-sub-content",
       className: cn(
-        "z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-sm border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       ),
       ...props
@@ -28379,7 +28861,7 @@ function NavigationLink({
       href,
       onClick,
       className: clsx12__default.default(
-        "inline-block w-full cursor-pointer rounded-r-md border-l py-1 pr-2 pl-4 text-left text-base/8 sm:text-sm/6",
+        "inline-block w-full cursor-pointer rounded-r-sm border-l py-1 pr-2 pl-4 text-left text-base/8 sm:text-sm/6",
         "hover:border-grey-950 hover:bg-primary-800/10 hover:font-semibold hover:text-grey-950",
         "dark:text-grey-400 dark:hover:border-grey-400 dark:hover:text-white",
         href === pathname && "border-l border-primary-800 bg-primary-800/10 font-bold text-primary-800 dark:border-white dark:bg-white/20"
@@ -28481,7 +28963,7 @@ function NavigationMenuContent({
       "data-slot": "navigation-menu-content",
       className: cn(
         "top-0 left-0 w-full p-2 pr-2.5 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto",
-        "group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95",
+        "group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-sm group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95",
         className
       ),
       ...props
@@ -28497,7 +28979,7 @@ function NavigationMenuViewport({
     {
       "data-slot": "navigation-menu-viewport",
       className: cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-sm border bg-popover text-popover-foreground shadow data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
         className
       ),
       ...props
@@ -28820,7 +29302,7 @@ function NSWCard({
           "div",
           {
             className: cn(
-              "h-full rounded-md border border-(--nsw-card-border)",
+              "h-full rounded-sm border border-(--nsw-card-border)",
               hasImage && "border-t-none rounded-t-none"
             ),
             children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full flex-col p-8", children: bodyChildren })
@@ -28832,7 +29314,7 @@ function NSWCard({
           "div",
           {
             className: cn(
-              "flex h-full flex-col rounded-md border border-(--nsw-card-border) p-8",
+              "flex h-full flex-col rounded-sm border border-(--nsw-card-border) p-8",
               hasImage && "border-t-none rounded-t-none"
             ),
             children: bodyChildren
@@ -29387,7 +29869,7 @@ function ResizableHandle({
         className
       ),
       ...props,
-      children: withHandle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.drag_indicator, { className: "size-2.5" }) })
+      children: withHandle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.drag_indicator, { className: "size-2.5" }) })
     }
   );
 }
@@ -29686,7 +30168,7 @@ function Sidebar({
               {
                 "data-sidebar": "sidebar",
                 "data-slot": "sidebar-inner",
-                className: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm",
+                className: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-sm group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm",
                 children
               }
             )
@@ -30145,7 +30627,7 @@ function SidebarLink({ link, pathname, onLinkClick, depth }) {
   const isActive = pathname === link.href;
   const isActiveOrHasActiveDescendant = isLinkOrDescendantActive(link, pathname);
   const baseLinkClasses = clsx12__default.default(
-    "w-full cursor-pointer rounded-r-md border-l py-1 pr-2 pl-4 text-left text-base/8 sm:text-sm/6",
+    "w-full cursor-pointer rounded-r-sm border-l py-1 pr-2 pl-4 text-left text-base/8 sm:text-sm/6",
     "hover:border-grey-950 hover:bg-primary-800/10 hover:font-semibold hover:text-grey-950",
     "dark:text-grey-400 dark:hover:border-grey-400 dark:hover:text-white",
     isActive && "border-l border-primary-800 bg-primary-800/10 font-bold text-primary-800 dark:border-white dark:bg-white/20"
@@ -31081,7 +31563,7 @@ var TabNavigation = React5__namespace.default.forwardRef(({ className, children,
               motion.div,
               {
                 layoutId: "hoverBackground",
-                className: "absolute top-2 bottom-2 transform rounded-md border border-grey-100 bg-grey-150 transition-all duration-200 ease-out dark:border-grey-700 dark:bg-grey-800",
+                className: "absolute top-2 bottom-2 transform rounded-sm border border-grey-100 bg-grey-150 transition-all duration-200 ease-out dark:border-grey-700 dark:bg-grey-800",
                 transition: {
                   type: "spring",
                   stiffness: 500,
@@ -31617,7 +32099,7 @@ var Tracker = React5__namespace.default.forwardRef(
 );
 Tracker.displayName = "Tracker";
 var buttonVariants4 = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
@@ -31736,7 +32218,7 @@ var Artifact = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     className: cn(
-      "flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm",
+      "flex flex-col overflow-hidden rounded-sm border bg-background shadow-sm",
       className
     ),
     ...props
@@ -31982,7 +32464,7 @@ function isFunction(value) {
   return typeof value === "function";
 }
 var badgeVariants2 = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  "inline-flex items-center justify-center rounded-sm border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
       variant: {
@@ -32167,7 +32649,7 @@ var CodeBlock = ({
   "div",
   {
     className: cn(
-      "relative w-full overflow-hidden rounded-md border bg-background text-foreground",
+      "relative w-full overflow-hidden rounded-sm border bg-background text-foreground",
       className
     ),
     ...props,
@@ -32282,7 +32764,7 @@ function HoverCardContent2({
       align,
       sideOffset,
       className: cn(
-        "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-sm border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       ),
       ...props
@@ -32986,7 +33468,7 @@ function DropdownMenuContent2({
       "data-slot": "dropdown-menu-content",
       sideOffset,
       className: cn(
-        "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-sm border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       ),
       ...props
@@ -33273,7 +33755,7 @@ function Textarea2({ className, ...props }) {
     {
       "data-slot": "textarea",
       className: cn(
-        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        "flex field-sizing-content min-h-16 w-full rounded-sm border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
         className
       ),
       ...props
@@ -33293,7 +33775,7 @@ function PromptInputAttachment({ data, className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn("group relative h-14 w-14 rounded-md border", className),
+      className: cn("group relative h-14 w-14 rounded-sm border", className),
       ...props,
       children: [
         data.mediaType?.startsWith("image/") && data.url ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -33571,7 +34053,7 @@ var PromptInput = ({
       "form",
       {
         className: cn(
-          "w-full divide-y overflow-hidden rounded-xl border bg-background shadow-sm",
+          "w-full divide-y overflow-hidden rounded-sm border bg-background shadow-sm",
           className
         ),
         onSubmit: handleSubmit,
@@ -33936,7 +34418,7 @@ var TaskItemFile = ({ children, className, ...props }) => /* @__PURE__ */ jsxRun
   "div",
   {
     className: cn(
-      "inline-flex items-center gap-1 rounded-md border bg-secondary px-1.5 py-0.5 text-xs text-foreground",
+      "inline-flex items-center gap-1 rounded-sm border bg-secondary px-1.5 py-0.5 text-xs text-foreground",
       className
     ),
     ...props,
@@ -33971,7 +34453,7 @@ var TaskContent = ({ children, className, ...props }) => /* @__PURE__ */ jsxRunt
     children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 space-y-2 border-l-2 border-muted pl-4", children })
   }
 );
-var Tool = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(Collapsible2, { className: cn("not-prose mb-4 w-full rounded-md border", className), ...props });
+var Tool = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(Collapsible2, { className: cn("not-prose mb-4 w-full rounded-sm border", className), ...props });
 var getStatusBadge = (status) => {
   const labels = {
     "input-streaming": "Pending",
@@ -34053,7 +34535,7 @@ function Input2({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "h-9 w-full min-w-0 rounded-sm border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
         "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
         "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
         className
@@ -34092,7 +34574,7 @@ var WebPreview = ({
   return /* @__PURE__ */ jsxRuntime.jsx(WebPreviewContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: cn("flex size-full flex-col rounded-lg border bg-card", className),
+      className: cn("flex size-full flex-col rounded-sm border bg-card", className),
       ...props,
       children
     }