@nswds/app 1.72.3 → 1.73.0

package/dist/globals.css

@@ -2524,6 +2524,12 @@
   .bg-black {
     background-color: var(--color-black);
   }
+  .bg-black\/10 {
+    background-color: color-mix(in srgb, #000 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
+    }
+  }
   .bg-black\/50 {
     background-color: color-mix(in srgb, #000 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {

package/dist/index.cjs

@@ -49,6 +49,7 @@ var vaul = require('vaul');
 var reactHookForm = require('react-hook-form');
 var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
 var TogglePrimitive = require('@radix-ui/react-toggle');
+var slugify = require('@sindresorhus/slugify');
 var Image2 = require('next/image');
 var HoverCardPrimitive = require('@radix-ui/react-hover-card');
 var inputOtp = require('input-otp');
@@ -58,7 +59,6 @@ var ProgressPrimitive = require('@radix-ui/react-progress');
 var tailwindVariants = require('tailwind-variants');
 var ResizablePrimitive = require('react-resizable-panels');
 var SliderPrimitive = require('@radix-ui/react-slider');
-var slugify = require('@sindresorhus/slugify');
 var zustand = require('zustand');
 var middleware = require('zustand/middleware');
 
@@ -7406,7 +7406,7 @@ function Breadcrumbs({
       return "";
     }
     if (transformLabel) {
-      return segment.replace(/-/g, " ").replace(/_/g, " ").split(" ").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+      return segment.replace(/[-_]/g, " ").toLowerCase().replace(/^\w/, (c) => c.toUpperCase());
     }
     return segment;
   };
@@ -17465,16 +17465,36 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.70.0"};
+  version: "1.72.4"};
+function isReactElement(child) {
+  return typeof child === "object" && child !== null && "props" in child;
+}
+function textFromChildren(node) {
+  let out = "";
+  React5.Children.forEach(node, (child) => {
+    if (typeof child === "string" || typeof child === "number") {
+      out += String(child);
+    } else if (isReactElement(child) && child.props && typeof child.props === "object" && "children" in child.props) {
+      out += textFromChildren(child.props.children);
+    }
+  });
+  return out.trim();
+}
 function Heading({
   className,
   trim = "normal",
+  id: id3,
   size = 1,
   level = 1,
   display = false,
+  children,
   ...props
 }) {
   const Element2 = `h${level}`;
+  const slugify$1 = slugify.slugifyWithCounter();
+  const computedId = id3 ?? slugify$1(textFromChildren(children));
+  if (typeof window === "undefined") console.log("SSR id:", id3);
+  else console.log("Client id:", id3);
   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))]",
@@ -17510,6 +17530,7 @@ function Heading({
     Element2,
     {
       ...props,
+      id: computedId,
       className: clsx12__default.default(
         className,
         trimClasses[trim],
@@ -17518,7 +17539,8 @@ function Heading({
         "[--leading-trim-end:var(--heading-leading-trim-end)] [--leading-trim-start:var(--heading-leading-trim-start)]",
         "text-primary-800 dark:text-white",
         sizeClass
-      )
+      ),
+      children
     }
   );
 }
@@ -29909,12 +29931,24 @@ function useActiveSectionObserver(tableOfContents) {
   return currentSection;
 }
 function TableOfContents({ tableOfContents }) {
-  const currentSection = useActiveSectionObserver(tableOfContents);
-  function isActive(section) {
-    if (section.id === currentSection) return true;
-    return section.children?.some(isActive) ?? false;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-labelledby": "on-this-page-title", className: "w-56", children: tableOfContents.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  const [mounted, setMounted] = React5.useState(false);
+  React5.useEffect(() => setMounted(true), []);
+  const currentSection = useActiveSectionObserver(mounted ? tableOfContents : []);
+  const isActive = React5.useMemo(() => {
+    const check = (section) => {
+      if (section.id === currentSection) return true;
+      return section.children?.some(check) ?? false;
+    };
+    return check;
+  }, [currentSection]);
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-labelledby": "on-this-page-title", className: "w-56", suppressHydrationWarning: true, children: !mounted ? (
+    // lightweight placeholder to avoid layout shift (optional)
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-hidden": true, className: "mt-3 space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-40 animate-pulse rounded bg-black/10 dark:bg-white/10" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-32 animate-pulse rounded bg-black/10 dark:bg-white/10" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-48 animate-pulse rounded bg-black/10 dark:bg-white/10" })
+    ] })
+  ) : tableOfContents.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "h2",
       {
@@ -29937,6 +29971,7 @@ function TableOfContents({ tableOfContents }) {
             Link12__default.default,
             {
               href: `#${section.id}`,
+              prefetch: false,
               className: clsx12__default.default(
                 "-ml-px inline-block border-l pl-4",
                 "hover:border-primary-800 dark:hover:border-white",
@@ -29949,6 +29984,7 @@ function TableOfContents({ tableOfContents }) {
             Link12__default.default,
             {
               href: `#${subSection.id}`,
+              prefetch: false,
               className: clsx12__default.default(
                 "-ml-px inline-block border-l pl-8",
                 "hover:border-primary-800 dark:hover:border-white",
@@ -29960,7 +29996,7 @@ function TableOfContents({ tableOfContents }) {
         ] }, section.id))
       }
     )
-  ] }) });
+  ] }) : null });
 }
 function getSubtree(options, content) {
   const { asChild, children } = options;