@nswds/app 1.122.0 → 1.124.0

package/dist/index.cjs

@@ -15147,7 +15147,7 @@ function resolveBackgroundToken(themeCategory, primaryKey, accentKey, preferredT
 function getContrastRatio(backgroundHex, foregroundHex) {
   return culori__namespace.wcagContrast(backgroundHex, foregroundHex) ?? 0;
 }
-function getContrastLevel(contrastRatio) {
+function getContrastComplianceSummary(contrastRatio) {
   if (contrastRatio >= AAA_NORMAL_CONTRAST_RATIO) {
     return "Passes AA large, AA normal, AAA large, and AAA normal";
   }
@@ -15164,6 +15164,12 @@ function getContrastTone(contrastRatio) {
   if (contrastRatio >= AA_LARGE_CONTRAST_RATIO) return "warning";
   return "danger";
 }
+function supportsNormalTextPreview(contrastRatio) {
+  return contrastRatio >= AA_NORMAL_CONTRAST_RATIO;
+}
+function supportsLargeTextPreview(contrastRatio) {
+  return contrastRatio >= AA_LARGE_CONTRAST_RATIO;
+}
 function getPreviewHeroRatingLabel(contrastRatio) {
   if (contrastRatio >= AAA_NORMAL_CONTRAST_RATIO) return "AAA normal";
   if (contrastRatio >= AA_NORMAL_CONTRAST_RATIO) return "AA normal";
@@ -15287,12 +15293,12 @@ function getRecommendedCandidate(themeCategory, background, primaryFamily, accen
   }
   return null;
 }
-function getAccessibleForegroundOptions(themeCategory, background, primaryFamily, accentFamily) {
+function getForegroundOptionsMeetingAaLarge(themeCategory, background, primaryFamily, accentFamily) {
   return scoreForegroundCandidates(themeCategory, background, primaryFamily, accentFamily).filter((candidate) => candidate.contrastRatio >= AA_LARGE_CONTRAST_RATIO).sort((left, right) => right.contrastRatio - left.contrastRatio);
 }
 function getPreviewAnnouncement(background, foreground) {
   if (!foreground) {
-    return `${background.token} selected. No accessible foreground options meeting 3 to 1 are available.`;
+    return `${background.token} selected. No foreground options meeting AA large (3 to 1) are available.`;
   }
   return `${background.token} paired with ${foreground.token}. Contrast ratio ${foreground.contrastRatio.toFixed(2)} to 1.`;
 }
@@ -15350,7 +15356,7 @@ function getInitialPairingState(searchParams) {
   const backgroundShade = [...primaryFamily.shades, ...accentFamily.shades, ...greyFamily.shades].find(
     (shade) => shade.token === selectedBackgroundToken
   ) ?? getShadeForTone(primaryFamily, DEFAULT_BACKGROUND_TONE);
-  const selectedForegroundId = getAccessibleForegroundOptions(
+  const selectedForegroundId = getForegroundOptionsMeetingAaLarge(
     themeCategory,
     backgroundShade,
     primaryFamily,
@@ -15567,7 +15573,7 @@ function ForegroundOption({
           " ",
           candidate.contrastRatio.toFixed(2),
           " to 1, ",
-          getForegroundOptionBadge(candidate).label
+          badge.label
         ] })
       ]
     }
@@ -15610,7 +15616,12 @@ function ColorPairingToolContent({ visibleFormats }) {
     [backgroundShadeOptions, selectedBackgroundToken]
   );
   const accessibleForegroundOptions = React5.useMemo(
-    () => getAccessibleForegroundOptions(themeCategory, backgroundShade, primaryFamily, accentFamily),
+    () => getForegroundOptionsMeetingAaLarge(
+      themeCategory,
+      backgroundShade,
+      primaryFamily,
+      accentFamily
+    ),
     [accentFamily, backgroundShade, primaryFamily, themeCategory]
   );
   const recommendedForeground = React5.useMemo(
@@ -15747,7 +15758,7 @@ function ColorPairingToolContent({ visibleFormats }) {
         `format: ${getColorFormatLabel(resolvedCopyFormat)}`,
         `foreground: ${previewForeground.token} (${getColorValue(previewForeground, resolvedCopyFormat)})`,
         `background: ${backgroundShade.token} (${getColorValue(backgroundShade, resolvedCopyFormat)})`,
-        `contrast: ${previewForeground.contrastRatio.toFixed(2)}:1 ${getContrastLevel(previewForeground.contrastRatio)}`
+        `contrast: ${previewForeground.contrastRatio.toFixed(2)}:1 ${getContrastComplianceSummary(previewForeground.contrastRatio)}`
       ].join("\n")
     );
     setCopiedKey("pairing");
@@ -15779,6 +15790,8 @@ function ColorPairingToolContent({ visibleFormats }) {
   const previewHeroRatingLabel = getPreviewHeroRatingLabel(contrastRatio);
   const previewHeroStatusLabel = getPreviewHeroStatusLabel(contrastRatio);
   const contrastTone = getContrastTone(contrastRatio);
+  const showNormalTextPreview = supportsNormalTextPreview(contrastRatio);
+  const showLargeTextPreview = supportsLargeTextPreview(contrastRatio);
   const resolvedCopyFormat = visibleFormats.includes(copyFormat) ? copyFormat : visibleFormats[0] ?? DEFAULT_VISIBLE_FORMATS[0];
   return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "min-w-0 overflow-hidden rounded-sm bg-white text-grey-800", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid min-w-0 xl:min-h-[46rem] xl:grid-cols-[260px_minmax(0,1fr)] xl:gap-x-6", children: [
     /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "border-b border-grey-200 px-4 py-5 sm:px-6 xl:border-b-0 xl:px-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
@@ -15904,38 +15917,49 @@ function ColorPairingToolContent({ visibleFormats }) {
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-[42rem] space-y-5 pb-12 sm:pb-8", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.82rem] font-semibold tracking-[0.12em] uppercase", children: "NSW Government Digital" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-4xl leading-none font-bold sm:text-5xl", children: "Connecting communities to services that matter" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-[38rem] text-base leading-7 sm:text-lg sm:leading-8", children: "Review how each pairing performs against AA and AAA requirements for normal and large text across your selected primary, accent, and grey families." }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3 pt-1", children: [
-                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "max-w-[42rem] space-y-5",
+                        showNormalTextPreview && "pb-12 sm:pb-8"
                       ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          "data-variant": "outline",
-                          className: cn(
-                            buttonVariants({ variant: "outline", 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: "Learn more"
-                        }
-                      )
-                    ] })
-                  ] }) }),
+                      children: [
+                        showNormalTextPreview ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.82rem] font-semibold tracking-[0.12em] uppercase", children: "NSW Government Digital" }) : null,
+                        showLargeTextPreview ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-4xl leading-none font-bold sm:text-5xl", children: "Connecting communities to services that matter" }) : null,
+                        showNormalTextPreview ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-[38rem] text-base leading-7 sm:text-lg sm:leading-8", children: "Review how each pairing performs against AA and AAA requirements for normal and large text across your selected primary, accent, and grey families." }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3 pt-1", children: [
+                            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                              "span",
+                              {
+                                "data-variant": "outline",
+                                className: cn(
+                                  buttonVariants({ variant: "outline", 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: "Learn more"
+                              }
+                            )
+                          ] })
+                        ] }) : null
+                      ]
+                    }
+                  ) }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs(
                       "span",
@@ -16124,7 +16148,7 @@ function ColorPairingToolContent({ visibleFormats }) {
             onClick: () => handleForegroundChange(candidate.id)
           },
           candidate.id
-        )) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-3 text-sm text-grey-600", children: "No accessible foreground options meeting 3:1 are available for this background." }) })
+        )) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-3 text-sm text-grey-600", children: "No foreground options meeting AA large (3:1) are available for this background." }) })
       ] })
     ] })
   ] }) });
@@ -19025,7 +19049,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.121.2"};
+  version: "1.123.0"};
 var SluggerContext = React5__namespace.default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";