@nswds/app 1.28.2 → 1.29.0

package/dist/globals.css

@@ -1397,6 +1397,9 @@
   .border-nsw-grey-600 {
     border-color: var(--color-nsw-grey-600);
   }
+  .border-primary {
+    border-color: var(--primary);
+  }
   .border-primary-500 {
     border-color: oklch(0.719602022988773 0.1609881523353869 242.17574150873253);
   }
@@ -1463,9 +1466,21 @@
   .bg-border {
     background-color: var(--border);
   }
+  .bg-card {
+    background-color: var(--card);
+  }
   .bg-danger-450 {
     background-color: var(--color-danger-450);
   }
+  .bg-destructive {
+    background-color: var(--destructive);
+  }
+  .bg-destructive\/15 {
+    background-color: var(--destructive);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--destructive) 15%, transparent);
+    }
+  }
   .bg-gray-800 {
     background-color: var(--color-gray-800);
   }
@@ -1514,6 +1529,9 @@
   .bg-nsw-grey-800 {
     background-color: var(--color-nsw-grey-800);
   }
+  .bg-popover {
+    background-color: var(--popover);
+  }
   .bg-primary-500 {
     background-color: oklch(0.719602022988773 0.1609881523353869 242.17574150873253);
   }
@@ -1529,6 +1547,9 @@
   .bg-purple-50 {
     background-color: var(--color-purple-50);
   }
+  .bg-secondary {
+    background-color: var(--secondary);
+  }
   .bg-success-450 {
     background-color: var(--color-success-450);
   }
@@ -1574,6 +1595,9 @@
   .fill-nsw-red-600 {
     fill: var(--color-nsw-red-600);
   }
+  .fill-primary {
+    fill: var(--primary);
+  }
   .fill-primary-800 {
     fill: oklch(0.2899986864508513 0.11729574451023282 259.841936589881);
   }
@@ -2014,9 +2038,15 @@
   .text-blue-700 {
     color: var(--color-blue-700);
   }
+  .text-card-foreground {
+    color: var(--card-foreground);
+  }
   .text-current {
     color: currentcolor;
   }
+  .text-destructive {
+    color: var(--destructive);
+  }
   .text-foreground {
     color: var(--foreground);
   }
@@ -2065,6 +2095,12 @@
   .text-nsw-grey-800 {
     color: var(--color-nsw-grey-800);
   }
+  .text-popover-foreground {
+    color: var(--popover-foreground);
+  }
+  .text-primary {
+    color: var(--primary);
+  }
   .text-primary-500 {
     color: oklch(0.719602022988773 0.1609881523353869 242.17574150873253);
   }
@@ -2080,12 +2116,21 @@
   .text-primary-950 {
     color: oklch(0.13774937606415438 0.06451265948062805 259.841936589881);
   }
+  .text-primary-foreground {
+    color: var(--primary-foreground);
+  }
   .text-purple-500 {
     color: var(--color-purple-500);
   }
   .text-red-500 {
     color: var(--color-red-500);
   }
+  .text-secondary {
+    color: var(--secondary);
+  }
+  .text-secondary-foreground {
+    color: var(--secondary-foreground);
+  }
   .text-slate-500 {
     color: var(--color-slate-500);
   }
@@ -2710,6 +2755,16 @@
       border-width: 1px;
     }
   }
+  .group-data-\[viewport\=false\]\/navigation-menu\:bg-popover {
+    &:is(:where(.group\/navigation-menu)[data-viewport="false"] *) {
+      background-color: var(--popover);
+    }
+  }
+  .group-data-\[viewport\=false\]\/navigation-menu\:text-popover-foreground {
+    &:is(:where(.group\/navigation-menu)[data-viewport="false"] *) {
+      color: var(--popover-foreground);
+    }
+  }
   .group-data-\[viewport\=false\]\/navigation-menu\:shadow {
     &:is(:where(.group\/navigation-menu)[data-viewport="false"] *) {
       --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
@@ -2755,6 +2810,14 @@
       background-color: oklch(0.2899986864508513 0.11729574451023282 259.841936589881);
     }
   }
+  .selection\:text-primary-foreground {
+    & *::selection {
+      color: var(--primary-foreground);
+    }
+    &::selection {
+      color: var(--primary-foreground);
+    }
+  }
   .file\:inline-flex {
     &::file-selector-button {
       display: inline-flex;
@@ -3078,6 +3141,13 @@
       }
     }
   }
+  .hover\:bg-accent {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--accent);
+      }
+    }
+  }
   .hover\:bg-blue-100 {
     &:hover {
       @media (hover: hover) {
@@ -3085,6 +3155,16 @@
       }
     }
   }
+  .hover\:bg-destructive\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-gray-100 {
     &:hover {
       @media (hover: hover) {
@@ -3151,6 +3231,16 @@
       }
     }
   }
+  .hover\:bg-secondary\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--secondary);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
+        }
+      }
+    }
+  }
   .hover\:font-semibold {
     &:hover {
       @media (hover: hover) {
@@ -3159,6 +3249,13 @@
       }
     }
   }
+  .hover\:text-accent-foreground {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--accent-foreground);
+      }
+    }
+  }
   .hover\:text-blue-600 {
     &:hover {
       @media (hover: hover) {
@@ -3208,6 +3305,13 @@
       }
     }
   }
+  .hover\:text-primary {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--primary);
+      }
+    }
+  }
   .hover\:text-primary-700 {
     &:hover {
       @media (hover: hover) {
@@ -3295,6 +3399,11 @@
       font-weight: var(--font-weight-bold);
     }
   }
+  .focus\:text-accent-foreground {
+    &:focus {
+      color: var(--accent-foreground);
+    }
+  }
   .focus\:text-primary-800 {
     &:focus {
       color: oklch(0.2899986864508513 0.11729574451023282 259.841936589881);
@@ -3480,6 +3589,19 @@
       column-gap: calc(var(--spacing) * 3);
     }
   }
+  .aria-invalid\:border-destructive {
+    &[aria-invalid="true"] {
+      border-color: var(--destructive);
+    }
+  }
+  .aria-invalid\:ring-destructive\/20 {
+    &[aria-invalid="true"] {
+      --tw-ring-color: var(--destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+      }
+    }
+  }
   .data-active\:border-\(--btn-bg\) {
     &[data-active] {
       border-color: var(--btn-bg);
@@ -3539,6 +3661,11 @@
       }
     }
   }
+  .data-\[active\=true\]\:text-accent-foreground {
+    &[data-active="true"] {
+      color: var(--accent-foreground);
+    }
+  }
   .data-\[active\=true\]\:hover\:bg-primary-800\/10 {
     &[data-active="true"] {
       &:hover {
@@ -3575,6 +3702,11 @@
       opacity: 50%;
     }
   }
+  .data-\[error\=true\]\:text-destructive {
+    &[data-error="true"] {
+      color: var(--destructive);
+    }
+  }
   .data-\[inset\]\:pl-8 {
     &[data-inset] {
       padding-left: calc(var(--spacing) * 8);
@@ -3754,6 +3886,11 @@
       background-color: color-mix(in oklab, oklch(0.2899986864508513 0.11729574451023282 259.841936589881) 10%, transparent);
     }
   }
+  .data-\[selected\=true\]\:text-accent-foreground {
+    &[data-selected="true"] {
+      color: var(--accent-foreground);
+    }
+  }
   .data-\[side\=bottom\]\:translate-y-1 {
     &[data-side="bottom"] {
       --tw-translate-y: calc(var(--spacing) * 1);
@@ -3808,6 +3945,16 @@
       height: calc(var(--spacing) * 9);
     }
   }
+  .\*\:data-\[slot\=alert-description\]\:text-destructive\/90 {
+    :is(& > *) {
+      &[data-slot="alert-description"] {
+        color: var(--destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--destructive) 90%, transparent);
+        }
+      }
+    }
+  }
   .\*\*\:data-\[slot\=command-input-wrapper\]\:h-12 {
     :is(& *) {
       &[data-slot="command-input-wrapper"] {
@@ -3917,6 +4064,11 @@
       }
     }
   }
+  .data-\[state\=active\]\:border-accent {
+    &[data-state="active"] {
+      border-color: var(--accent);
+    }
+  }
   .data-\[state\=active\]\:bg-background {
     &[data-state="active"] {
       background-color: var(--background);
@@ -3954,6 +4106,11 @@
       background-color: oklch(0.2899986864508513 0.11729574451023282 259.841936589881);
     }
   }
+  .data-\[state\=checked\]\:text-primary-foreground {
+    &[data-state="checked"] {
+      color: var(--primary-foreground);
+    }
+  }
   .data-\[state\=closed\]\:duration-300 {
     &[data-state="closed"] {
       --tw-duration: 300ms;
@@ -4089,6 +4246,11 @@
       background-color: color-mix(in oklab, oklch(0.2899986864508513 0.11729574451023282 259.841936589881) 10%, transparent);
     }
   }
+  .data-\[state\=open\]\:text-accent-foreground {
+    &[data-state="open"] {
+      color: var(--accent-foreground);
+    }
+  }
   .data-\[state\=open\]\:duration-500 {
     &[data-state="open"] {
       --tw-duration: 500ms;
@@ -4221,6 +4383,28 @@
       --tw-enter-opacity: 0;
     }
   }
+  .data-\[variant\=destructive\]\:text-destructive {
+    &[data-variant="destructive"] {
+      color: var(--destructive);
+    }
+  }
+  .data-\[variant\=destructive\]\:focus\:bg-destructive\/10 {
+    &[data-variant="destructive"] {
+      &:focus {
+        background-color: var(--destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+        }
+      }
+    }
+  }
+  .data-\[variant\=destructive\]\:focus\:text-destructive {
+    &[data-variant="destructive"] {
+      &:focus {
+        color: var(--destructive);
+      }
+    }
+  }
   .data-\[variant\=outline\]\:border-l-0 {
     &[data-variant="outline"] {
       border-left-style: var(--tw-border-style);
@@ -5510,6 +5694,16 @@
       }
     }
   }
+  .dark\:aria-invalid\:ring-destructive\/40 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      &[aria-invalid="true"] {
+        --tw-ring-color: var(--destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+        }
+      }
+    }
+  }
   .dark\:data-hover\:decoration-white {
     &:where([data-theme=dark], [data-theme=dark] *) {
       &[data-hover] {
@@ -5541,6 +5735,13 @@
       }
     }
   }
+  .dark\:data-\[state\=checked\]\:bg-primary-foreground {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      &[data-state="checked"] {
+        background-color: var(--primary-foreground);
+      }
+    }
+  }
   .dark\:data-\[state\=on\]\:bg-white\/10 {
     &:where([data-theme=dark], [data-theme=dark] *) {
       &[data-state="on"] {
@@ -5575,6 +5776,18 @@
       }
     }
   }
+  .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      &[data-variant="destructive"] {
+        &:focus {
+          background-color: var(--destructive);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+          }
+        }
+      }
+    }
+  }
   .dark\:data-\[variant\=ghost\]\:bg-transparent {
     &:where([data-theme=dark], [data-theme=dark] *) {
       &[data-variant="ghost"] {
@@ -6003,6 +6216,15 @@
       }
     }
   }
+  .data-\[variant\=destructive\]\:\*\:\[svg\]\:\!text-destructive {
+    &[data-variant="destructive"] {
+      :is(& > *) {
+        &:is(svg) {
+          color: var(--destructive) !important;
+        }
+      }
+    }
+  }
   .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] {
     &>[role=checkbox] {
       --tw-translate-y: 2px;
@@ -6505,13 +6727,38 @@ code.language-html .token.comment {
 }
 :root {
   --scaling: 1;
-  --background: var(--color-white);
-  --foreground: var(--color-grey-800);
-  --muted: var(--color-grey-100);
-  --muted-foreground: var(--color-grey-600);
-  --border: var(--color-grey-100);
-  --input: var(--color-grey-200);
-  --ring: var(--color-grey-600);
+  --radius: 0.25rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
 }
 :root {
   --font-size-1: calc(18px * var(--scaling));
@@ -6610,13 +6857,37 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 [data-theme='dark'] {
-  --background: var(--color-grey-900);
-  --foreground: var(--color-grey-50);
-  --muted: var(--color-grey-600);
-  --muted-foreground: var(--color-grey-200);
-  --border: var(--color-grey-100) / 10;
-  --input: var(--color-grey-50);
-  --ring: var(--color-grey-200);
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
 }
 @layer base {
   * {

package/dist/index.cjs

@@ -7454,7 +7454,7 @@ function Heading({
 
 // package.json
 var package_default = {
-  version: "1.27.0"};
+  version: "1.28.3"};
 function Logo(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "NSW Government" }),
@@ -9011,23 +9011,29 @@ function TableOfContents({ tableOfContents }) {
   }, []);
   React6.useEffect(() => {
     if (tableOfContents.length === 0) return;
-    const headings = getHeadings2(tableOfContents);
-    function onScroll() {
-      const top = window.scrollY;
-      let current = headings[0].id;
-      for (const heading of headings) {
-        if (top >= heading.top - 10) {
-          current = heading.id;
-        } else {
-          break;
+    const timer = setTimeout(() => {
+      const headings = getHeadings2(tableOfContents);
+      if (headings.length === 0) return;
+      function onScroll() {
+        const top = window.scrollY;
+        let current = headings[0].id;
+        for (const heading of headings) {
+          if (top >= heading.top - 10) {
+            current = heading.id;
+          } else {
+            break;
+          }
         }
+        setCurrentSection(current);
       }
-      setCurrentSection(current);
-    }
-    window.addEventListener("scroll", onScroll, { passive: true });
-    onScroll();
+      window.addEventListener("scroll", onScroll, { passive: true });
+      onScroll();
+      return () => {
+        window.removeEventListener("scroll", onScroll);
+      };
+    }, 100);
     return () => {
-      window.removeEventListener("scroll", onScroll);
+      clearTimeout(timer);
     };
   }, [getHeadings2, tableOfContents]);
   function isActive(section) {
@@ -9386,6 +9392,10 @@ var TocContext = React6.createContext({
 });
 function TocProvider({ children }) {
   const [toc, setToc] = React6.useState(true);
+  const pathname = navigation.usePathname();
+  React6.useEffect(() => {
+    setToc(true);
+  }, [pathname]);
   return /* @__PURE__ */ jsxRuntime.jsx(TocContext.Provider, { value: { toc, setToc }, children });
 }
 function useToc() {