@nswds/app 1.100.0 → 1.102.0

package/dist/index.js

@@ -42,8 +42,6 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as TabsPrimitives from '@radix-ui/react-tabs';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { Command as Command$1 } from 'cmdk';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
@@ -51,6 +49,8 @@ import { useReactTable, getFacetedUniqueValues, getFacetedRowModel, getSortedRow
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import { Drawer as Drawer$1 } from 'vaul';
 import { FormProvider, Controller, useFormContext, useFormState } from 'react-hook-form';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
 import Image2 from 'next/image';
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
 import { OTPInput, OTPInputContext } from 'input-otp';
@@ -7707,7 +7707,7 @@ function CardDescription({ className, ...props }) {
     "div",
     {
       "data-slot": "card-description",
-      className: cn("text-sm text-muted-foreground", className),
+      className: cn("text-base text-muted-foreground", className),
       ...props
     }
   );
@@ -14981,8 +14981,7 @@ function getPairRating(contrastRatio) {
 }
 function getPreferredForegroundTone(backgroundTone) {
   if (backgroundTone <= 200) return 800;
-  if (backgroundTone <= 500) return 700;
-  if (backgroundTone <= 650) return 250;
+  if (backgroundTone <= 500) return 600;
   return 200;
 }
 function isPreferredDirection(backgroundTone, foregroundTone, preferredForegroundTone) {
@@ -15154,154 +15153,95 @@ function getWhiteForegroundPair(background) {
 function supportsWhiteForegroundPreview(background) {
   return background.tone >= MIN_DARK_BACKGROUND_TONE_FOR_WHITE;
 }
-function getPairingColorValue(color2, format) {
-  return getColorValue(color2, format);
-}
-var styles3 = {
-  base: [
-    // Base
-    "inline-flex items-center justify-center gap-2 rounded-sm text-sm font-medium bg-transparent transition-all whitespace-nowrap cursor-pointer border-(--toggle-border) [--toggle-border:var(--color-grey-200)] text-grey-800",
-    // States
-    "data-[state=on]:bg-grey-100 data-[state=on]:text-grey-850",
-    // Hover
-    "hover:bg-grey-100 hover:text-grey-850",
-    // Focus
-    "focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-(--toggle-border)",
-    // Dark mode
-    "dark:text-white",
-    // Dark mode states
-    "dark:data-[state=on]:bg-white/10 dark:data-[state=on]:text-white",
-    // Dark mode hover
-    "dark:hover:bg-white/10 dark:hover:text-white",
-    // Disabled
-    "disabled:pointer-events-none disabled:opacity-50",
-    // Icon
-    '[&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 [&_svg]:shrink-0',
-    // Aria invalid
-    "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
-    // Aria invalid dark mode
-    "dark:aria-invalid:ring-destructive/40"
-  ],
-  outline: [
-    // Base
-    "text-grey-800 border [--toggle-border:var(--color-grey-300)]",
-    // States
-    "hover:[--toggle-border:var(--color-grey-400)]",
-    // Dark mode
-    "dark:[--toggle-border:white]/40",
-    // Dark mode states
-    "dark:hover:[--toggle-border:white]/50",
-    // Data on
-    "data-[state=on]:bg-primary-800/10"
-  ]
-};
-var toggleVariants = cva(styles3.base, {
-  variants: {
-    variant: {
-      ghost: "",
-      outline: clsx12(styles3.outline)
-    },
-    size: {
-      default: "h-9 px-2 min-w-9",
-      sm: "h-8 px-1.5 min-w-8",
-      lg: "h-10 px-2.5 min-w-10"
-    }
-  },
-  defaultVariants: {
-    variant: "ghost",
-    size: "default"
+var SluggerContext = React5__default.createContext(null);
+function flattenText(nodes) {
+  if (nodes == null || typeof nodes === "boolean") return "";
+  if (typeof nodes === "string" || typeof nodes === "number" || typeof nodes === "bigint")
+    return String(nodes);
+  if (Array.isArray(nodes)) return nodes.map(flattenText).join("");
+  if (React5__default.isValidElement(nodes)) {
+    return flattenText(nodes.props.children);
   }
-});
-function Toggle({
-  className,
-  variant,
-  size,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    TogglePrimitive.Root,
-    {
-      "data-slot": "toggle",
-      className: cn(toggleVariants({ variant, size, className })),
-      ...props
-    }
-  );
+  return "";
 }
-var ToggleGroupContext = React5.createContext({
-  size: "default",
-  variant: "ghost"
-});
-function ToggleGroup({
-  className,
-  variant,
-  size,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    ToggleGroupPrimitive.Root,
-    {
-      "data-slot": "toggle-group",
-      "data-variant": variant,
-      "data-size": size,
-      className: cn(
-        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
-    }
-  );
+function baseSlug(input) {
+  return input.toLowerCase().trim().replace(/[\s\W]+/g, "-").replace(/^-+|-+$/g, "");
 }
-function ToggleGroupItem({
+function Heading({
   className,
+  trim = "normal",
+  size = 1,
+  level = 1,
+  display = false,
+  id: idProp,
   children,
-  variant,
-  size,
   ...props
 }) {
-  const context = React5.useContext(ToggleGroupContext);
+  const Tag = `h${level}`;
+  const slugger = useContext(SluggerContext);
+  const headingSizeClasses = {
+    1: "text-[calc(var(--heading-font-size-1)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-52)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
+    2: "text-[calc(var(--heading-font-size-2)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-44)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
+    3: "text-[calc(var(--heading-font-size-3)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-40)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
+    4: "text-[calc(var(--heading-font-size-4)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-36)] tracking-[calc(var(--heading-letter-spacing-1)_+_var(--heading-letter-spacing))]",
+    5: "text-[calc(var(--heading-font-size-5)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-32)] tracking-[calc(var(--heading-letter-spacing-1)_+_var(--heading-letter-spacing))]",
+    6: "text-[calc(var(--heading-font-size-6)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-28)] tracking-[calc(var(--letter-spacing-0)_+_var(--heading-letter-spacing))]"
+  };
+  const displaySizeClasses = {
+    1: "text-[calc(var(--display-font-size-1)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-96)] tracking-[calc(var(--heading-letter-spacing-3)_+_var(--heading-letter-spacing))]",
+    2: "text-[calc(var(--display-font-size-2)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-60)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
+    3: "text-[calc(var(--display-font-size-3)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-52)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
+    4: "text-[calc(var(--display-font-size-4)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-44)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]"
+  };
+  const sizeClass = display ? displaySizeClasses[size] : headingSizeClasses[size];
+  const trimClasses = {
+    normal: ["before:content-none after:content-none"],
+    start: [
+      'before:content-[""] before:table after:content-none',
+      "before:mb-[calc(var(--leading-trim-start,var(--default-leading-trim-start))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
+    ],
+    end: [
+      'before:content-none after:content-[""] after:table',
+      "after:mt-[calc(var(--leading-trim-end,var(--default-leading-trim-end))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
+    ],
+    both: [
+      'before:content-[""] before:table after:content-[""] after:table',
+      "before:mb-[calc(var(--leading-trim-start,var(--default-leading-trim-start))-var(--line-height,calc(1em*var(--default-line-height)))/2)]",
+      "after:mt-[calc(var(--leading-trim-end,var(--default-leading-trim-end))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
+    ]
+  };
+  const computedId = useMemo(() => {
+    if (idProp) return idProp;
+    const text = flattenText(children);
+    if (!text) return void 0;
+    const base = baseSlug(text);
+    return slugger ? slugger.slug(base) : base;
+  }, [idProp, children, slugger]);
   return /* @__PURE__ */ jsx(
-    ToggleGroupPrimitive.Item,
+    Tag,
     {
-      "data-slot": "toggle-group-item",
-      "data-variant": context.variant || variant,
-      "data-size": context.size || size,
-      className: cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size
-        }),
-        "min-w-0 shrink-0 rounded-none shadow-none first:rounded-l-sm last:rounded-r-sm focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
-        className
-      ),
       ...props,
+      id: computedId,
+      "data-anchor": true,
+      className: clsx12(
+        className,
+        trimClasses[trim],
+        "m-0",
+        "leading-[var(--line-height)] font-[var(--heading-font-family)] font-bold",
+        "[--leading-trim-end:var(--heading-leading-trim-end)] [--leading-trim-start:var(--heading-leading-trim-start)]",
+        "text-primary-800 dark:text-white",
+        sizeClass
+      ),
       children
     }
   );
 }
-function FormatToggle({ format, setFormat }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Format:" }),
-    /* @__PURE__ */ jsxs(
-      ToggleGroup,
-      {
-        type: "single",
-        value: format,
-        onValueChange: (value) => value && setFormat(value),
-        children: [
-          /* @__PURE__ */ jsx(ToggleGroupItem, { value: "hex", "aria-label": "HEX format", children: "HEX" }),
-          /* @__PURE__ */ jsx(ToggleGroupItem, { value: "rgb", "aria-label": "RGB format", children: "RGB" }),
-          /* @__PURE__ */ jsx(ToggleGroupItem, { value: "hsl", "aria-label": "HSL format", children: "HSL" }),
-          /* @__PURE__ */ jsx(ToggleGroupItem, { value: "oklch", "aria-label": "OKLCH format", children: "OKLCH" })
-        ]
-      }
-    )
-  ] });
-}
-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 AAA_NORMAL_TEXT_THRESHOLD = "7.0:1 for text below the WCAG large-text threshold. Sentence-case body copy should generally stay at 16px+ unless it is microcopy.";
+var AAA_LARGE_TEXT_THRESHOLD = "4.5:1 for WCAG large text: 24px+, or 18.5px+ bold";
 var PREFERRED_BACKGROUND_TONES = [400, 600, 200, 800, 100, 50];
+var DEFAULT_VISIBLE_FORMATS = ["hex", "rgb", "hsl", "oklch"];
+var DEFAULT_INITIAL_BACKGROUND_TOKEN = "nsw-blue-800";
+var DEFAULT_INITIAL_PAIR_ID = "nsw-blue-800:nsw-blue-200";
 function getToneFromToken(token) {
   if (!token) return null;
   const match = token.match(/-(\d+)$/);
@@ -15324,9 +15264,80 @@ function getFamilySelectorLabel(family, themeCategory, selectionRole) {
   const preferredTone = selectionRole === "primary colour" ? 800 : 600;
   return family.colors.find((color2) => color2.tone === preferredTone)?.name ?? family.label;
 }
+function getActivePaletteFamilyLabel(family, themeCategory, paletteRole) {
+  if (themeCategory !== "aboriginal") {
+    return family.label;
+  }
+  const preferredTone = paletteRole === "primary" ? 800 : paletteRole === "accent" ? 600 : 800;
+  return family.colors.find((color2) => color2.tone === preferredTone)?.name ?? family.label;
+}
 function isWhiteForegroundPair(pair) {
   return pair.foreground.token === "white";
 }
+function getWhiteForegroundGuidance(pair) {
+  if (pair.passes.aaaText) {
+    return "White is approved for headings, body copy, and calls to action on this background.";
+  }
+  if (pair.passes.aaaLarge) {
+    return "Use white only for WCAG large text on this background, such as headings at 24px+ or bold text at 18.5px+. Keep sentence-case body copy at 16px+ and use a darker recommended foreground instead.";
+  }
+  return "Do not use white on this background. Choose one of the recommended foregrounds below instead.";
+}
+function getPreviewGuidance(pair, isRecommended) {
+  if (!isWhiteForegroundPair(pair)) {
+    return "Use only AAA-recommended combinations across your selected primary, accent, and grey families.";
+  }
+  if (isRecommended) {
+    return "Use white text on dark colour only when it meets AAA for headings, body copy, and calls to action.";
+  }
+  return getWhiteForegroundGuidance(pair);
+}
+function getPairingColorDisplayName(color2) {
+  return color2.name ?? color2.token;
+}
+function WorkflowStep({
+  step,
+  title,
+  description,
+  level = 2,
+  variant = "section",
+  className
+}) {
+  if (variant === "card") {
+    return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
+      /* @__PURE__ */ jsx("span", { className: "flex size-9 items-center justify-center rounded-full bg-primary-800 text-sm font-semibold text-white dark:bg-primary-700", children: step }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(
+          Heading,
+          {
+            level,
+            size: 5,
+            className: "text-primary-800 dark:text-white",
+            trim: "normal",
+            children: title
+          }
+        ),
+        description ? /* @__PURE__ */ jsx("p", { className: "text-base/6 text-muted-foreground", children: description }) : null
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-4", className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+    /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-full bg-primary-800 text-sm font-semibold text-white dark:bg-primary-700", children: step }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-3", children: [
+      /* @__PURE__ */ jsx(
+        Heading,
+        {
+          level,
+          size: 4,
+          className: "text-primary-800 dark:text-white",
+          trim: "normal",
+          children: title
+        }
+      ),
+      description ? /* @__PURE__ */ jsx("p", { className: "text-base/6 text-muted-foreground", children: description }) : null
+    ] })
+  ] }) });
+}
 function getPreferredPairForBackground(pairs, preferredPairId) {
   if (preferredPairId) {
     const preferredPair = pairs.find((pair) => pair.id === preferredPairId);
@@ -15392,15 +15403,22 @@ function getInitialPairingState(searchParams) {
   const backgroundParam = searchParams.get("background");
   const themeCategory = paletteParam === "brand" || paletteParam === "aboriginal" ? paletteParam : "brand";
   const context = getPairingContext(themeCategory, primaryParam, accentParam);
+  const shouldUseDefaultBrandExample = !backgroundParam && !pairParam && themeCategory === "brand" && context.primary.key === "blue" && context.accent.key === "red";
+  const defaultBackgroundToken = shouldUseDefaultBrandExample ? context.backgrounds.some(
+    (background) => background.token === DEFAULT_INITIAL_BACKGROUND_TOKEN
+  ) ? DEFAULT_INITIAL_BACKGROUND_TOKEN : null : null;
+  const defaultPairId = shouldUseDefaultBrandExample && defaultBackgroundToken && context.pairsByBackground[defaultBackgroundToken]?.some(
+    (pair) => pair.id === DEFAULT_INITIAL_PAIR_ID
+  ) ? DEFAULT_INITIAL_PAIR_ID : null;
   const pairBackgroundToken = context.recommendedPairs.find((pair) => pair.id === pairParam)?.background.token ?? null;
   const selectedBackgroundToken = resolveBackgroundToken(
     context,
-    backgroundParam ?? pairBackgroundToken,
-    getToneFromToken(backgroundParam ?? pairBackgroundToken)
+    backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken,
+    getToneFromToken(backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken)
   );
   const selectedPairId = getPreferredPairForBackground(
     context.pairsByBackground[selectedBackgroundToken] ?? [],
-    pairParam
+    pairParam ?? defaultPairId
   )?.id ?? "";
   return {
     accentKey: context.accent.key,
@@ -15418,6 +15436,13 @@ function PairPreview({
   const whiteForeground = isWhiteForegroundPair(pair);
   const statusLabel = isRecommended ? "Pass" : pair.passes.aaaLarge ? "Large text only" : "Example only";
   const StatusIcon = isRecommended ? Icons.check : Icons.info;
+  const fauxButtonStyle = {
+    "--btn-bg": pair.foreground.hex,
+    "--btn-border": pair.foreground.hex,
+    "--btn-text": pair.background.hex,
+    "--btn-icon": pair.background.hex,
+    "--btn-hover-overlay": pair.background.hex
+  };
   return /* @__PURE__ */ jsx(Card, { className: "gap-0 overflow-hidden py-0", children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -15463,7 +15488,20 @@ function PairPreview({
           /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: whiteForeground && !isRecommended ? "White on colour example" : whiteForeground ? "White on colour" : "Colour on colour" }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
             /* @__PURE__ */ jsx("h3", { className: "max-w-lg text-4xl leading-none font-bold text-current sm:text-5xl", children: "Pair colour with confidence." }),
-            /* @__PURE__ */ jsx("p", { className: "max-w-md text-sm/6 sm:text-base/7", children: whiteForeground ? isRecommended ? "Use white text on dark colour only when it meets AAA for headings, body copy, and calls to action." : "This white text example is included for reference on approved dark backgrounds. Check the result card below before using it for normal or large text." : "Use only AAA-recommended combinations across your selected primary, accent, and grey families." })
+            /* @__PURE__ */ jsx("p", { className: "max-w-md text-base/6 sm:text-base/7", children: getPreviewGuidance(pair, isRecommended) }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                "data-variant": "solid",
+                className: cn(
+                  buttonVariants({ variant: "solid", size: "default" }),
+                  "pointer-events-none cursor-default px-6 text-[16px] font-[700] select-none sm:px-6 sm:text-[16px] sm:font-[700]"
+                ),
+                style: fauxButtonStyle,
+                children: "Get started"
+              }
+            )
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
@@ -15521,7 +15559,7 @@ function PreviewFallbackCard({
           /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: "Approved background" }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
             /* @__PURE__ */ jsx("h3", { className: "max-w-lg text-4xl leading-none font-bold text-current sm:text-5xl", children: "Pair colour with confidence." }),
-            /* @__PURE__ */ jsx("p", { className: "max-w-md text-sm/6 sm:text-base/7", children: "This approved background tone does not currently have a recommended AAA foreground in this tool." })
+            /* @__PURE__ */ jsx("p", { className: "max-w-md text-base/6 sm:text-base/7", children: "This approved background tone does not currently have a recommended AAA foreground in this tool. Choose another approved background tone to continue." })
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
@@ -15537,22 +15575,57 @@ function PreviewFallbackCard({
 }
 function PairDetailCard({
   color: color2,
-  format,
-  role
+  role,
+  visibleFormats
 }) {
   const [, copyToClipboardRaw] = useCopyToClipboard();
   const [copiedField, setCopiedField] = useState(null);
-  const valueLabel = format.toUpperCase();
-  const formattedValue = getPairingColorValue(color2, format);
+  const copiedFieldTimeoutRef = useRef(null);
+  const hasDisplayTone = color2.token !== "white";
+  const formatRows = visibleFormats.map((format) => ({
+    key: format,
+    label: format.toUpperCase(),
+    value: color2[format],
+    mono: true,
+    copyable: true
+  }));
+  const valueRows = [
+    { key: "token", label: "Token", value: color2.token, mono: true, copyable: true },
+    {
+      key: "tone",
+      label: "Tone",
+      value: hasDisplayTone ? String(color2.tone) : "Not applicable",
+      mono: false,
+      copyable: hasDisplayTone
+    },
+    ...formatRows
+  ];
+  useEffect(() => {
+    return () => {
+      if (copiedFieldTimeoutRef.current) {
+        clearTimeout(copiedFieldTimeoutRef.current);
+      }
+    };
+  }, []);
   const copyField = (field) => {
-    const fieldValue = field === "token" ? color2.token : field === "tone" ? String(color2.tone) : formattedValue;
+    if (field === "tone" && !hasDisplayTone) {
+      return;
+    }
+    const fieldValue = valueRows.find((row) => row.key === field)?.value;
+    if (!fieldValue) return;
     copyToClipboardRaw(fieldValue);
     setCopiedField(field);
-    const toastLabel = field === "token" ? "Token" : field === "tone" ? "Tone" : `${valueLabel} value`;
+    const toastLabel = valueRows.find((row) => row.key === field)?.label ?? "Value";
     toast(`${toastLabel} copied to clipboard`, {
       duration: 2e3
     });
-    setTimeout(() => setCopiedField(null), 2e3);
+    if (copiedFieldTimeoutRef.current) {
+      clearTimeout(copiedFieldTimeoutRef.current);
+    }
+    copiedFieldTimeoutRef.current = setTimeout(() => {
+      setCopiedField(null);
+      copiedFieldTimeoutRef.current = null;
+    }, 2e3);
   };
   const renderCopyButton = (field, srLabel, className) => /* @__PURE__ */ jsxs(
     Button2,
@@ -15567,43 +15640,40 @@ function PairDetailCard({
       ]
     }
   );
-  return /* @__PURE__ */ jsxs(Card, { className: "gap-4", children: [
-    /* @__PURE__ */ jsx(CardHeader, { className: "gap-3 border-b", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "size-14 rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
-          style: { backgroundColor: color2.hex }
-        }
-      ),
+  return /* @__PURE__ */ jsxs(Card, { className: "gap-0 pb-0", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "gap-4 border-b", children: [
       /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
         /* @__PURE__ */ jsx(CardTitle, { children: role }),
         /* @__PURE__ */ jsx(CardDescription, { children: color2.name ?? color2.token })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxs(CardContent, { className: "grid gap-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: "Token" }),
-          renderCopyButton("token", `Copy ${role.toLowerCase()} token`)
-        ] }),
-        /* @__PURE__ */ jsx("p", { className: "font-mono text-base break-all", children: color2.token })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: "Tone" }),
-          renderCopyButton("tone", `Copy ${role.toLowerCase()} tone`)
-        ] }),
-        /* @__PURE__ */ jsx("p", { className: "font-medium", children: color2.tone })
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-14 w-full rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
+          style: { backgroundColor: color2.hex }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { className: "px-0 pb-3", children: /* @__PURE__ */ jsx("div", { className: "divide-y divide-grey-100 dark:divide-grey-800", children: valueRows.map((row) => /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 px-6 py-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: row.label }),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "mt-2 min-w-0 text-base text-foreground",
+              row.mono && "font-mono text-sm break-all sm:text-base"
+            ),
+            children: row.value
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: valueLabel }),
-          renderCopyButton("value", `Copy ${role.toLowerCase()} ${valueLabel} value`)
-        ] }),
-        /* @__PURE__ */ jsx("p", { className: "font-mono text-sm break-all", children: formattedValue })
-      ] })
-    ] })
+      row.copyable ? renderCopyButton(
+        row.key,
+        `Copy ${role.toLowerCase()} ${row.label.toLowerCase()}`,
+        "mt-0.5"
+      ) : null
+    ] }, row.key)) }) })
   ] });
 }
 function ComplianceRow({
@@ -15611,31 +15681,40 @@ function ComplianceRow({
   passes,
   threshold
 }) {
-  return /* @__PURE__ */ 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__ */ jsxs("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx("p", { className: "font-medium", children: label }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: threshold })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      "span",
-      {
-        className: cn(
-          "inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-semibold",
-          passes ? "bg-success-50 text-success-800 dark:bg-success-950/30 dark:text-success-200" : "bg-danger-50 text-danger-800 dark:bg-danger-950/30 dark:text-danger-200"
-        ),
-        children: [
-          passes ? /* @__PURE__ */ jsx(Icons.check, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsx(Icons.close, { "data-slot": "icon", className: "size-4" }),
-          passes ? "Pass" : "Fail"
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between gap-4 rounded-sm border px-4 py-3",
+        passes ? "border-success-200 bg-success-50 dark:border-success-900/60 dark:bg-success-950/20" : "border-danger-200 bg-danger-50 dark:border-danger-900/60 dark:bg-danger-950/20"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "font-medium", children: label }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: threshold })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-semibold",
+              passes ? "bg-success-50 text-success-800 dark:bg-success-950/30 dark:text-success-200" : "bg-danger-50 text-danger-800 dark:bg-danger-950/30 dark:text-danger-200"
+            ),
+            children: [
+              passes ? /* @__PURE__ */ jsx(Icons.check, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsx(Icons.close, { "data-slot": "icon", className: "size-4" }),
+              passes ? "Pass" : "Fail"
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 function PairComplianceCard({ pair }) {
   return /* @__PURE__ */ jsxs(Card, { children: [
     /* @__PURE__ */ jsxs(CardHeader, { className: "gap-2 border-b", children: [
       /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "AAA compliance" }),
-      /* @__PURE__ */ 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__ */ jsx(CardDescription, { children: "This card shows the contrast result for the example above. Evaluation uses the raw contrast ratio, not the rounded display value." })
     ] }),
     /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3", children: [
       /* @__PURE__ */ 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: [
@@ -15664,71 +15743,6 @@ function PairComplianceCard({ pair }) {
     ] })
   ] });
 }
-function WhiteTextExampleCard({ pair }) {
-  return /* @__PURE__ */ jsxs(Card, { children: [
-    /* @__PURE__ */ jsxs(CardHeader, { className: "gap-2 border-b", children: [
-      /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "White text example" }),
-      /* @__PURE__ */ 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__ */ jsxs(CardContent, { className: "grid gap-6 xl:grid-cols-[minmax(0,1.1fr)_minmax(18rem,0.9fr)]", children: [
-      /* @__PURE__ */ 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__ */ jsxs("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-lg leading-tight font-semibold", children: "Large text example" }),
-              /* @__PURE__ */ jsxs("p", { className: "text-sm/6", children: [
-                "White text on ",
-                pair.background.token
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-1 text-sm/6", children: [
-              /* @__PURE__ */ jsxs("p", { children: [
-                "AAA normal text: ",
-                /* @__PURE__ */ jsx("strong", { children: pair.passes.aaaText ? "pass" : "fail" })
-              ] }),
-              /* @__PURE__ */ jsxs("p", { children: [
-                "AAA large text: ",
-                /* @__PURE__ */ jsx("strong", { children: pair.passes.aaaLarge ? "pass" : "fail" })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm/6", children: "Normal text means body text and smaller headings below 18pt, or below 14pt when bold. Large text means 18pt and above, or 14pt and above when bold." })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ 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__ */ jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: "Contrast ratio" }),
-          /* @__PURE__ */ jsxs("p", { className: "mt-1 text-2xl font-semibold", children: [
-            pair.contrastRatio.toFixed(2),
-            ":1"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(
-          ComplianceRow,
-          {
-            label: "AAA normal text",
-            passes: pair.passes.aaaText,
-            threshold: AAA_NORMAL_TEXT_THRESHOLD
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ComplianceRow,
-          {
-            label: "AAA large text",
-            passes: pair.passes.aaaLarge,
-            threshold: AAA_LARGE_TEXT_THRESHOLD
-          }
-        )
-      ] })
-    ] })
-  ] });
-}
 function ColorFamilySelector({
   families,
   label,
@@ -15738,8 +15752,8 @@ function ColorFamilySelector({
   onSelect
 }) {
   const swatchTone = selectionRole === "primary colour" ? 800 : 600;
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsx("h3", { className: "font-medium", children: label }),
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
+    /* @__PURE__ */ jsx(Heading, { level: 3, size: 6, className: "mb-4 text-foreground", trim: "normal", children: label }),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 lg:grid-cols-4 xl:grid-cols-5", children: families.map((family) => {
       const isSelected = family.key === selectedKey;
       const familySelectorLabel = getFamilySelectorLabel(family, themeCategory, selectionRole);
@@ -15771,38 +15785,64 @@ function ColorFamilySelector({
     }) })
   ] });
 }
-function ColorPairingToolContent() {
+function ColorPairingToolContent({ visibleFormats }) {
   const searchParams = useSearchParams();
-  const {
-    accentKey: initialAccentKey,
-    primaryKey: initialPrimaryKey,
-    selectedBackgroundToken: initialSelectedBackgroundToken,
-    selectedPairId: initialSelectedPairId,
-    themeCategory: initialThemeCategory
-  } = getInitialPairingState(searchParams);
-  const [themeCategory, setThemeCategory] = useState(initialThemeCategory);
-  const [format, setFormat] = useState("hex");
-  const [primaryFamilyKey, setPrimaryFamilyKey] = useState(initialPrimaryKey);
-  const [accentFamilyKey, setAccentFamilyKey] = useState(initialAccentKey);
+  const [initialState] = useState(() => getInitialPairingState(searchParams));
+  const [themeCategory, setThemeCategory] = useState(initialState.themeCategory);
+  const [primaryFamilyKey, setPrimaryFamilyKey] = useState(initialState.primaryKey);
+  const [accentFamilyKey, setAccentFamilyKey] = useState(initialState.accentKey);
+  const [, copyShareLinkRaw] = useCopyToClipboard();
+  const [copiedShareLink, setCopiedShareLink] = useState(false);
+  const copiedShareLinkTimeoutRef = useRef(null);
   const [selectedBackgroundToken, setSelectedBackgroundToken] = useState(
-    initialSelectedBackgroundToken
-  );
-  const [selectedPairId, setSelectedPairId] = useState(initialSelectedPairId);
-  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;
+    initialState.selectedBackgroundToken
+  );
+  const [selectedPairId, setSelectedPairId] = useState(initialState.selectedPairId);
+  const themeFamilies = useMemo(() => getPairingFamilies(themeCategory), [themeCategory]);
+  const context = useMemo(
+    () => getPairingContext(themeCategory, primaryFamilyKey, accentFamilyKey),
+    [themeCategory, primaryFamilyKey, accentFamilyKey]
+  );
+  const selectableFamilies = useMemo(
+    () => themeFamilies.filter((family) => family.key !== context.grey.key),
+    [themeFamilies, context.grey.key]
+  );
+  const selectableAccentFamilies = useMemo(
+    () => selectableFamilies.filter((family) => family.key !== context.primary.key),
+    [selectableFamilies, context.primary.key]
+  );
+  const selectedBackground = useMemo(
+    () => context.backgrounds.find((background) => background.token === selectedBackgroundToken) ?? context.backgrounds[0] ?? null,
+    [context.backgrounds, selectedBackgroundToken]
+  );
+  const selectedBackgroundPairs = useMemo(
+    () => selectedBackground ? context.pairsByBackground[selectedBackground.token] ?? [] : [],
+    [context.pairsByBackground, selectedBackground]
+  );
+  const selectedPair = useMemo(
+    () => getPreferredPairForBackground(selectedBackgroundPairs, selectedPairId),
+    [selectedBackgroundPairs, selectedPairId]
+  );
+  const whiteForegroundExample = useMemo(
+    () => selectedBackground && supportsWhiteForegroundPreview(selectedBackground) ? getWhiteForegroundPair(selectedBackground) : null,
+    [selectedBackground]
+  );
   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 familySummary = useMemo(
+    () => [context.primary.label, context.accent.label, context.grey.label].join(" + "),
+    [context.primary.label, context.accent.label, context.grey.label]
   );
+  useEffect(() => {
+    return () => {
+      if (copiedShareLinkTimeoutRef.current) {
+        clearTimeout(copiedShareLinkTimeoutRef.current);
+      }
+    };
+  }, []);
   const updateUrlParams = (nextThemeCategory, nextPrimaryKey, nextAccentKey, nextSelectedBackgroundToken, nextSelectedPairId) => {
     const params = new URLSearchParams(window.location.search);
+    params.delete("family");
     params.set("palette", nextThemeCategory);
     params.set("primary", nextPrimaryKey);
     params.set("accent", nextAccentKey);
@@ -15904,125 +15944,212 @@ function ColorPairingToolContent() {
       /* @__PURE__ */ jsx(CardDescription, { children: "No approved tones are available for the current palette." })
     ] }) });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Palette:" }),
-        /* @__PURE__ */ jsx(
-          SegmentedControl,
-          {
-            value: themeCategory,
-            onValueChange: (value) => handleThemeCategoryChange(value),
-            children: /* @__PURE__ */ jsxs(SegmentedControlList, { className: "w-full sm:w-fit", children: [
-              /* @__PURE__ */ jsx(SegmentedControlTrigger, { value: "brand", children: "Brand palette" }),
-              /* @__PURE__ */ jsx(SegmentedControlTrigger, { value: "aboriginal", children: "Aboriginal palette" })
-            ] })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(FormatToggle, { format, setFormat })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "grid gap-6", children: [
+  const handleCopyShareLink = () => {
+    copyShareLinkRaw(window.location.href);
+    setCopiedShareLink(true);
+    toast("Colour pairing link copied to clipboard", {
+      duration: 2e3
+    });
+    if (copiedShareLinkTimeoutRef.current) {
+      clearTimeout(copiedShareLinkTimeoutRef.current);
+    }
+    copiedShareLinkTimeoutRef.current = setTimeout(() => {
+      setCopiedShareLink(false);
+      copiedShareLinkTimeoutRef.current = null;
+    }, 2e3);
+  };
+  const activePaletteEntries = [
+    {
+      key: `primary-${context.primary.key}`,
+      label: "Primary",
+      family: context.primary,
+      familyLabel: getActivePaletteFamilyLabel(context.primary, themeCategory, "primary"),
+      swatchTone: 800
+    },
+    {
+      key: `accent-${context.accent.key}`,
+      label: "Accent",
+      family: context.accent,
+      familyLabel: getActivePaletteFamilyLabel(context.accent, themeCategory, "accent"),
+      swatchTone: 600
+    },
+    {
+      key: `grey-${context.grey.key}`,
+      label: "Grey",
+      family: context.grey,
+      familyLabel: getActivePaletteFamilyLabel(context.grey, themeCategory, "grey"),
+      swatchTone: 800
+    }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx(
-        ColorFamilySelector,
-        {
-          label: "Primary colour",
-          families: selectableFamilies,
-          selectedKey: context.primary.key,
-          selectionRole: "primary colour",
-          themeCategory,
-          onSelect: handlePrimaryColorChange
+        WorkflowStep,
+        {
+          step: 1,
+          title: "Select your palette",
+          description: "Choose the palette family you want to work from.",
+          level: 2
         }
       ),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Palette:" }),
+          /* @__PURE__ */ jsx(
+            SegmentedControl,
+            {
+              value: themeCategory,
+              onValueChange: (value) => handleThemeCategoryChange(value),
+              children: /* @__PURE__ */ jsxs(SegmentedControlList, { className: "w-full sm:w-fit", children: [
+                /* @__PURE__ */ jsx(SegmentedControlTrigger, { value: "brand", children: "Brand palette" }),
+                /* @__PURE__ */ jsx(SegmentedControlTrigger, { value: "aboriginal", children: "Aboriginal palette" })
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-3", children: /* @__PURE__ */ jsxs(Button2, { variant: "outline", size: "sm", onClick: handleCopyShareLink, children: [
+          copiedShareLink ? /* @__PURE__ */ jsx(Icons.check, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsx(Icons.content_copy, { "data-slot": "icon", className: "size-4" }),
+          copiedShareLink ? "Link copied" : "Copy link"
+        ] }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx(
-        ColorFamilySelector,
-        {
-          label: "Accent colour",
-          families: selectableFamilies.filter((family) => family.key !== context.primary.key),
-          selectedKey: context.accent.key,
-          selectionRole: "accent colour",
-          themeCategory,
-          onSelect: handleAccentColorChange
+        WorkflowStep,
+        {
+          step: 2,
+          title: "Choose your colours",
+          description: "Pick a primary and accent colour. Grey is added automatically.",
+          level: 2
         }
-      )
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-6", children: [
+        /* @__PURE__ */ jsx(
+          ColorFamilySelector,
+          {
+            label: "Primary colour",
+            families: selectableFamilies,
+            selectedKey: context.primary.key,
+            selectionRole: "primary colour",
+            themeCategory,
+            onSelect: handlePrimaryColorChange
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ColorFamilySelector,
+          {
+            label: "Accent colour",
+            families: selectableAccentFamilies,
+            selectedKey: context.accent.key,
+            selectionRole: "accent colour",
+            themeCategory,
+            onSelect: handleAccentColorChange
+          }
+        )
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [
-      /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Included families:" }),
-      context.allFamilies.map((family) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className: "rounded-sm border border-grey-200 bg-grey-50 px-4 py-4 dark:border-grey-700 dark:bg-grey-900/40", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tracking-[0.14em] text-foreground uppercase", children: "Active palette" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2 text-sm text-foreground", children: activePaletteEntries.map(({ family, familyLabel, key, label, swatchTone }) => /* @__PURE__ */ jsxs(
         "span",
         {
-          className: "inline-flex items-center gap-2 rounded-full border border-grey-200 px-3 py-1 text-muted-foreground dark:border-grey-700",
+          className: "inline-flex items-center gap-2 rounded-sm border border-grey-200 bg-background px-3 py-2 dark:border-grey-700",
           children: [
             /* @__PURE__ */ jsx(
               "span",
               {
                 className: "size-2.5 rounded-full",
-                style: { backgroundColor: getFamilySwatchColor(family) }
+                style: { backgroundColor: getFamilySwatchColor(family, swatchTone) }
               }
             ),
-            family.label
+            /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+              label,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: familyLabel })
           ]
         },
-        family.key
-      ))
-    ] }),
+        key
+      )) })
+    ] }) }),
     /* @__PURE__ */ jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxs("div", { className: "grid items-start gap-6 xl:grid-cols-[minmax(0,1.5fr)_minmax(18rem,0.72fr)]", children: [
       /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-        previewPair ? /* @__PURE__ */ jsx(
-          PairPreview,
-          {
-            familySummary,
-            isRecommended: Boolean(selectedPair),
-            pair: previewPair
-          }
-        ) : /* @__PURE__ */ jsx(
-          PreviewFallbackCard,
-          {
-            familySummary,
-            selectedBackground
-          }
-        ),
         /* @__PURE__ */ jsxs(Card, { children: [
-          /* @__PURE__ */ jsxs(CardHeader, { className: "gap-2 border-b", children: [
-            /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "Approved backgrounds" }),
-            /* @__PURE__ */ jsx(CardDescription, { children: "Choose from your selected primary, accent, and grey background tones. Filled chips have at least one recommended AAA foreground. Foregrounds are limited to white and tones 50, 200, 400, 600, and 800." })
+          /* @__PURE__ */ jsxs(CardHeader, { className: "gap-4 border-b", children: [
+            /* @__PURE__ */ jsx(
+              WorkflowStep,
+              {
+                step: 3,
+                title: "Pick a background",
+                description: "Select an approved background tone from your primary, accent, or grey families.",
+                level: 3,
+                variant: "card"
+              }
+            ),
+            /* @__PURE__ */ jsx(CardDescription, { children: "The centre dot shows the recommended foreground colour. A white slash means there is no recommended AAA foreground in this tool." })
           ] }),
           /* @__PURE__ */ jsxs(CardContent, { className: "space-y-5", children: [
-            context.backgroundGroups.map((group) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [
-                /* @__PURE__ */ jsx("span", { className: "font-medium", children: group.label }),
-                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: group.family.label })
+            /* @__PURE__ */ jsxs("div", { className: "grid gap-3 rounded-sm border border-grey-200 bg-grey-50 p-4 sm:grid-cols-2 dark:border-grey-700 dark:bg-grey-900/40", children: [
+              /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-sm border border-grey-200 bg-background px-3 py-3 dark:border-grey-700", children: [
+                /* @__PURE__ */ jsx("span", { className: "relative block size-8 rounded-[4px] border border-grey-400 bg-background dark:border-grey-500", children: /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 left-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-grey-800 dark:bg-grey-100" }) }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Recommended foreground available" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "The centre dot marks the recommended foreground colour." })
+                ] })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2 sm:grid-cols-6", children: group.backgrounds.map((background) => {
-                const pairs = context.pairsByBackground[background.token] ?? [];
-                const preferredPair = selectedBackground.token === background.token ? selectedPair ?? getPreferredPairForBackground(pairs) : getPreferredPairForBackground(pairs);
-                const hasWhiteExample = supportsWhiteForegroundPreview(background);
-                const isSelected = selectedBackground.token === background.token;
-                const ariaLabel = pairs.length > 0 ? `Select ${background.token} background, recommended with ${preferredPair?.foreground.token ?? "an AAA foreground"}` : hasWhiteExample ? `Select ${background.token} background, white text example available` : `Select ${background.token} background, no recommended foreground in this tool`;
-                return /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-label": ariaLabel,
-                    "aria-pressed": isSelected,
-                    onClick: () => handleBackgroundChange(background.token),
-                    className: cn(
-                      "group relative h-12 rounded-sm border border-grey-200 transition-transform hover:scale-[1.03] dark:border-grey-700",
-                      isSelected && "ring-2 ring-primary-500 ring-offset-2 ring-offset-background"
-                    ),
-                    style: { backgroundColor: background.hex },
-                    children: preferredPair ? /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: "absolute top-1/2 left-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/30 shadow-sm",
-                        style: { backgroundColor: preferredPair.foreground.hex }
-                      }
-                    ) : null
-                  },
-                  background.token
-                );
-              }) })
-            ] }, group.key)),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-sm border border-dashed border-grey-300 bg-background px-3 py-3 dark:border-grey-600", children: [
+                /* @__PURE__ */ jsx("span", { className: "relative block size-8 rounded-[4px] border-2 border-dashed border-grey-400 bg-grey-500 dark:border-grey-500 dark:bg-grey-700", children: /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 left-1/2 h-0.5 w-5 -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-full bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.28)]" }) }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "No recommended AAA foreground" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "A white slash marks swatches that do not currently have a recommended AAA foreground in this tool." })
+                ] })
+              ] })
+            ] }),
+            context.backgroundGroups.map((group) => {
+              const groupFamilyLabel = selectedBackground.familyKey === group.family.key ? selectedBackground.name ?? selectedBackground.token : group.family.label;
+              return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-medium", children: group.label }),
+                  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: groupFamilyLabel })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2 sm:grid-cols-6", children: group.backgrounds.map((background) => {
+                  const pairs = context.pairsByBackground[background.token] ?? [];
+                  const hasRecommendedForeground = pairs.length > 0;
+                  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__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": ariaLabel,
+                      "aria-pressed": isSelected,
+                      onClick: () => handleBackgroundChange(background.token),
+                      className: cn(
+                        "group relative h-12 rounded-sm border transition-all",
+                        hasRecommendedForeground && "border-grey-200 hover:scale-[1.03] hover:shadow-sm dark:border-grey-700",
+                        !hasRecommendedForeground && hasWhiteExample && "border-grey-300/80 hover:scale-[1.01] dark:border-grey-600/80",
+                        !hasRecommendedForeground && !hasWhiteExample && "border-dashed border-grey-300/70 hover:scale-[1.01] dark:border-grey-600/70",
+                        isSelected && "ring-2 ring-primary-500 ring-offset-2 ring-offset-background"
+                      ),
+                      style: { backgroundColor: background.hex },
+                      children: [
+                        preferredPair ? /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: "absolute top-1/2 left-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/30 shadow-sm",
+                            style: { backgroundColor: preferredPair.foreground.hex }
+                          }
+                        ) : null,
+                        !hasRecommendedForeground ? /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 left-1/2 h-0.5 w-6 -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-full bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.28)]" }) : null
+                      ]
+                    },
+                    background.token
+                  );
+                }) })
+              ] }, group.key);
+            }),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm text-muted-foreground", children: [
               /* @__PURE__ */ jsxs("span", { children: [
                 "Selected background:",
@@ -16037,9 +16164,37 @@ function ColorPairingToolContent() {
             ] })
           ] })
         ] }),
+        previewPair ? /* @__PURE__ */ jsx(
+          PairPreview,
+          {
+            familySummary,
+            isRecommended: Boolean(selectedPair),
+            pair: previewPair
+          }
+        ) : /* @__PURE__ */ jsx(
+          PreviewFallbackCard,
+          {
+            familySummary,
+            selectedBackground
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
-          /* @__PURE__ */ jsx(PairDetailCard, { color: selectedBackground, format, role: "Background" }),
-          detailForeground ? /* @__PURE__ */ jsx(PairDetailCard, { color: detailForeground, format, role: "Foreground" }) : /* @__PURE__ */ jsxs(Card, { className: "gap-4", children: [
+          /* @__PURE__ */ jsx(
+            PairDetailCard,
+            {
+              color: selectedBackground,
+              role: "Background",
+              visibleFormats
+            }
+          ),
+          detailForeground ? /* @__PURE__ */ jsx(
+            PairDetailCard,
+            {
+              color: detailForeground,
+              role: "Foreground",
+              visibleFormats
+            }
+          ) : /* @__PURE__ */ jsxs(Card, { className: "gap-4", children: [
             /* @__PURE__ */ jsx(CardHeader, { className: "gap-3 border-b", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
               /* @__PURE__ */ jsx(CardTitle, { children: "Foreground" }),
               /* @__PURE__ */ jsx(CardDescription, { children: "No recommended foreground available" })
@@ -16047,21 +16202,27 @@ function ColorPairingToolContent() {
             /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Select another approved tone or review the recommended foregrounds for the same background." }) })
           ] })
         ] }),
-        selectedPair ? /* @__PURE__ */ jsx(PairComplianceCard, { pair: selectedPair }) : null,
-        showWhiteForegroundExample && whiteForegroundExample ? /* @__PURE__ */ jsx(WhiteTextExampleCard, { pair: whiteForegroundExample }) : null
+        previewPair ? /* @__PURE__ */ jsx(PairComplianceCard, { pair: previewPair }) : null
       ] }),
       /* @__PURE__ */ jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxs(Card, { className: "h-fit", children: [
-        /* @__PURE__ */ jsxs(CardHeader, { className: "gap-2 border-b", children: [
-          /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "Recommended foregrounds" }),
+        /* @__PURE__ */ jsxs(CardHeader, { className: "gap-4 border-b", children: [
+          /* @__PURE__ */ jsx(
+            WorkflowStep,
+            {
+              step: 4,
+              title: "Choose a foreground",
+              description: `Review the AAA combinations available for ${selectedBackground.token}.`,
+              level: 3,
+              variant: "card"
+            }
+          ),
           /* @__PURE__ */ jsxs(CardDescription, { children: [
-            "AAA combinations for ",
-            selectedBackground.token,
-            ", drawn from",
-            " ",
+            "Recommended foregrounds are drawn from ",
             context.primary.label,
-            ", ",
+            ",",
+            " ",
             context.accent.label,
-            ", Grey, and white using only foreground tones 50, 200, 400, 600, and 800."
+            ", Grey, and white where it meets AAA."
           ] })
         ] }),
         /* @__PURE__ */ jsx(CardContent, { className: "grid gap-3", children: selectedBackgroundPairs.length > 0 ? selectedBackgroundPairs.map((pair) => {
@@ -16070,7 +16231,7 @@ function ColorPairingToolContent() {
             "button",
             {
               type: "button",
-              "aria-label": `Use ${pair.foreground.token} on ${pair.background.token}`,
+              "aria-label": `Use ${getPairingColorDisplayName(pair.foreground)} on ${getPairingColorDisplayName(pair.background)}`,
               "aria-pressed": isActive,
               onClick: () => handlePairChange(pair.id),
               className: cn(
@@ -16079,32 +16240,43 @@ function ColorPairingToolContent() {
               ),
               children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: "size-11 rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
-                        style: { backgroundColor: pair.background.hex }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: "size-11 rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
-                        style: { backgroundColor: pair.foreground.hex }
-                      }
-                    )
+                  /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-[0.65rem] font-semibold tracking-[0.14em] text-muted-foreground uppercase", children: [
+                      /* @__PURE__ */ jsx("span", { className: "w-11 text-center", children: "BG" }),
+                      /* @__PURE__ */ jsx("span", { className: "w-11 text-center", children: "FG" })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "size-11 rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
+                          style: {
+                            backgroundColor: pair.background.hex
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "size-11 rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
+                          style: {
+                            backgroundColor: pair.foreground.hex
+                          }
+                        }
+                      )
+                    ] })
                   ] }),
-                  /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-grey-200 px-2.5 py-1 text-xs font-semibold text-muted-foreground dark:border-grey-700", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-success-200 bg-success-50 px-2.5 py-1 text-xs font-semibold text-success-800 dark:border-success-900/60 dark:bg-success-950/20 dark:text-success-200", children: [
                     /* @__PURE__ */ jsx(Icons.contrast, { "data-slot": "icon", className: "size-4" }),
                     pair.rating
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-1", children: [
                   /* @__PURE__ */ jsxs("p", { className: "font-medium text-foreground", children: [
-                    pair.background.token,
-                    " / ",
-                    pair.foreground.token
+                    getPairingColorDisplayName(pair.background),
+                    " /",
+                    " ",
+                    getPairingColorDisplayName(pair.foreground)
                   ] }),
                   /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
                     pair.foreground.familyLabel,
@@ -16125,8 +16297,11 @@ function ColorPairingToolContent() {
     ] }) })
   ] });
 }
-function ColorPairingTool() {
-  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ColorPairingToolLoading, {}), children: /* @__PURE__ */ jsx(ColorPairingToolContent, {}) });
+function ColorPairingTool({
+  visibleFormats = DEFAULT_VISIBLE_FORMATS
+} = {}) {
+  const normalizedVisibleFormats = [...new Set(visibleFormats)];
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ColorPairingToolLoading, {}), children: /* @__PURE__ */ jsx(ColorPairingToolContent, { visibleFormats: normalizedVisibleFormats }) });
 }
 function ColorSwatches({ theme: theme2, format, viewMode }) {
   return /* @__PURE__ */ jsx(
@@ -18607,93 +18782,152 @@ function FormMessage({ className, ...props }) {
     }
   );
 }
-
-// package.json
-var package_default = {
-  version: "1.99.0"};
-var SluggerContext = React5__default.createContext(null);
-function flattenText(nodes) {
-  if (nodes == null || typeof nodes === "boolean") return "";
-  if (typeof nodes === "string" || typeof nodes === "number" || typeof nodes === "bigint")
-    return String(nodes);
-  if (Array.isArray(nodes)) return nodes.map(flattenText).join("");
-  if (React5__default.isValidElement(nodes)) {
-    return flattenText(nodes.props.children);
+var styles3 = {
+  base: [
+    // Base
+    "inline-flex items-center justify-center gap-2 rounded-sm text-sm font-medium bg-transparent transition-all whitespace-nowrap cursor-pointer border-(--toggle-border) [--toggle-border:var(--color-grey-200)] text-grey-800",
+    // States
+    "data-[state=on]:bg-grey-100 data-[state=on]:text-grey-850",
+    // Hover
+    "hover:bg-grey-100 hover:text-grey-850",
+    // Focus
+    "focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-(--toggle-border)",
+    // Dark mode
+    "dark:text-white",
+    // Dark mode states
+    "dark:data-[state=on]:bg-white/10 dark:data-[state=on]:text-white",
+    // Dark mode hover
+    "dark:hover:bg-white/10 dark:hover:text-white",
+    // Disabled
+    "disabled:pointer-events-none disabled:opacity-50",
+    // Icon
+    '[&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 [&_svg]:shrink-0',
+    // Aria invalid
+    "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+    // Aria invalid dark mode
+    "dark:aria-invalid:ring-destructive/40"
+  ],
+  outline: [
+    // Base
+    "text-grey-800 border [--toggle-border:var(--color-grey-300)]",
+    // States
+    "hover:[--toggle-border:var(--color-grey-400)]",
+    // Dark mode
+    "dark:[--toggle-border:white]/40",
+    // Dark mode states
+    "dark:hover:[--toggle-border:white]/50",
+    // Data on
+    "data-[state=on]:bg-primary-800/10"
+  ]
+};
+var toggleVariants = cva(styles3.base, {
+  variants: {
+    variant: {
+      ghost: "",
+      outline: clsx12(styles3.outline)
+    },
+    size: {
+      default: "h-9 px-2 min-w-9",
+      sm: "h-8 px-1.5 min-w-8",
+      lg: "h-10 px-2.5 min-w-10"
+    }
+  },
+  defaultVariants: {
+    variant: "ghost",
+    size: "default"
   }
-  return "";
-}
-function baseSlug(input) {
-  return input.toLowerCase().trim().replace(/[\s\W]+/g, "-").replace(/^-+|-+$/g, "");
+});
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TogglePrimitive.Root,
+    {
+      "data-slot": "toggle",
+      className: cn(toggleVariants({ variant, size, className })),
+      ...props
+    }
+  );
 }
-function Heading({
+var ToggleGroupContext = React5.createContext({
+  size: "default",
+  variant: "ghost"
+});
+function ToggleGroup({
   className,
-  trim = "normal",
-  size = 1,
-  level = 1,
-  display = false,
-  id: idProp,
+  variant,
+  size,
   children,
   ...props
 }) {
-  const Tag = `h${level}`;
-  const slugger = useContext(SluggerContext);
-  const headingSizeClasses = {
-    1: "text-[calc(var(--heading-font-size-1)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-52)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
-    2: "text-[calc(var(--heading-font-size-2)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-44)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
-    3: "text-[calc(var(--heading-font-size-3)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-40)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
-    4: "text-[calc(var(--heading-font-size-4)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-36)] tracking-[calc(var(--heading-letter-spacing-1)_+_var(--heading-letter-spacing))]",
-    5: "text-[calc(var(--heading-font-size-5)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-32)] tracking-[calc(var(--heading-letter-spacing-1)_+_var(--heading-letter-spacing))]",
-    6: "text-[calc(var(--heading-font-size-6)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-28)] tracking-[calc(var(--letter-spacing-0)_+_var(--heading-letter-spacing))]"
-  };
-  const displaySizeClasses = {
-    1: "text-[calc(var(--display-font-size-1)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-96)] tracking-[calc(var(--heading-letter-spacing-3)_+_var(--heading-letter-spacing))]",
-    2: "text-[calc(var(--display-font-size-2)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-60)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
-    3: "text-[calc(var(--display-font-size-3)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-52)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
-    4: "text-[calc(var(--display-font-size-4)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-44)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]"
-  };
-  const sizeClass = display ? displaySizeClasses[size] : headingSizeClasses[size];
-  const trimClasses = {
-    normal: ["before:content-none after:content-none"],
-    start: [
-      'before:content-[""] before:table after:content-none',
-      "before:mb-[calc(var(--leading-trim-start,var(--default-leading-trim-start))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
-    ],
-    end: [
-      'before:content-none after:content-[""] after:table',
-      "after:mt-[calc(var(--leading-trim-end,var(--default-leading-trim-end))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
-    ],
-    both: [
-      'before:content-[""] before:table after:content-[""] after:table',
-      "before:mb-[calc(var(--leading-trim-start,var(--default-leading-trim-start))-var(--line-height,calc(1em*var(--default-line-height)))/2)]",
-      "after:mt-[calc(var(--leading-trim-end,var(--default-leading-trim-end))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
-    ]
-  };
-  const computedId = useMemo(() => {
-    if (idProp) return idProp;
-    const text = flattenText(children);
-    if (!text) return void 0;
-    const base = baseSlug(text);
-    return slugger ? slugger.slug(base) : base;
-  }, [idProp, children, slugger]);
   return /* @__PURE__ */ jsx(
-    Tag,
+    ToggleGroupPrimitive.Root,
     {
+      "data-slot": "toggle-group",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(
+        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+        className
+      ),
       ...props,
-      id: computedId,
-      "data-anchor": true,
-      className: clsx12(
-        className,
-        trimClasses[trim],
-        "m-0",
-        "leading-[var(--line-height)] font-[var(--heading-font-family)] font-bold",
-        "[--leading-trim-end:var(--heading-leading-trim-end)] [--leading-trim-start:var(--heading-leading-trim-start)]",
-        "text-primary-800 dark:text-white",
-        sizeClass
+      children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}) {
+  const context = React5.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Item,
+    {
+      "data-slot": "toggle-group-item",
+      "data-variant": context.variant || variant,
+      "data-size": context.size || size,
+      className: cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        "min-w-0 shrink-0 rounded-none shadow-none first:rounded-l-sm last:rounded-r-sm focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        className
       ),
+      ...props,
       children
     }
   );
 }
+function FormatToggle({ format, setFormat }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Format:" }),
+    /* @__PURE__ */ jsxs(
+      ToggleGroup,
+      {
+        type: "single",
+        value: format,
+        onValueChange: (value) => value && setFormat(value),
+        children: [
+          /* @__PURE__ */ jsx(ToggleGroupItem, { value: "hex", "aria-label": "HEX format", children: "HEX" }),
+          /* @__PURE__ */ jsx(ToggleGroupItem, { value: "rgb", "aria-label": "RGB format", children: "RGB" }),
+          /* @__PURE__ */ jsx(ToggleGroupItem, { value: "hsl", "aria-label": "HSL format", children: "HSL" }),
+          /* @__PURE__ */ jsx(ToggleGroupItem, { value: "oklch", "aria-label": "OKLCH format", children: "OKLCH" })
+        ]
+      }
+    )
+  ] });
+}
+
+// package.json
+var package_default = {
+  version: "1.101.0"};
 function Logo(props) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { className: "sr-only", children: "NSW Government" }),