@nswds/app 1.92.0 → 1.93.0

package/dist/globals.css

@@ -9718,6 +9718,11 @@
       }
     }
   }
+  .dark\:bg-grey-600 {
+    &:where([data-theme=dark], [data-theme=dark] *) {
+      background-color: var(--color-grey-600);
+    }
+  }
   .dark\:bg-grey-700 {
     &:where([data-theme=dark], [data-theme=dark] *) {
       background-color: var(--color-grey-700);
@@ -12974,7 +12979,7 @@
     background-color: #111827;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fillRule='evenodd'%3E%3Cg fill='%236b7280' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
   }
-  .dark code[class*='language-'], .dark pre[class*='language-'] {
+  .dark code[class*='language-'], .dark pre[class*='language-'], pre.dark[class*='language-'] {
     --tw-text-opacity: 1;
     color: rgb(241 126 184 / var(--tw-text-opacity, 1));
   }
@@ -12982,7 +12987,7 @@
     --tw-bg-opacity: 1;
     background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
   }
-  .dark .code-preview-wrapper + .code-syntax-wrapper > .code-syntax > .relative > [data-code-wrapper] > .highlight > pre[class*='language-'], .dark .highlight pre[class*='language-'], .dark :not(pre) > code[class*='language-'], .dark pre[class*='language-'] {
+  .dark .code-preview-wrapper + .code-syntax-wrapper > .code-syntax > .relative > [data-code-wrapper] > .highlight > pre[class*='language-'], .dark .highlight pre[class*='language-'], .dark :not(pre) > code[class*='language-'], .dark pre[class*='language-'], pre.dark[class*='language-'] {
     --tw-bg-opacity: 1;
     background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
   }

package/dist/index.cjs

@@ -13602,17 +13602,27 @@ function CodeHighlight({
   language,
   className,
   withCopy = false,
+  "data-theme": dataTheme,
   ...props
 }) {
   const highlightedCode = Prism__default.default.highlight(code.trim(), Prism__default.default.languages[language], language);
   const Component2 = withCopy ? PreWithCopy : "pre";
-  return /* @__PURE__ */ jsxRuntime.jsx(Component2, { className: tailwindMerge.twMerge(`language-${language}`, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "code",
+  const themeClassName = dataTheme !== void 0 ? dataTheme === "dark" ? "dark" : "light" : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component2,
     {
-      className: `language-${language}`,
-      dangerouslySetInnerHTML: { __html: highlightedCode }
+      className: tailwindMerge.twMerge(`language-${language}`, themeClassName, className),
+      "data-theme": dataTheme,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "code",
+        {
+          className: `language-${language}`,
+          dangerouslySetInnerHTML: { __html: highlightedCode }
+        }
+      )
     }
-  ) });
+  );
 }
 function Popover({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Root, { "data-slot": "popover", ...props });
@@ -14286,18 +14296,18 @@ function TooltipContent({
 function CodeDemoLoading() {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 animate-pulse", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full rounded-t-xl border border-grey-200 bg-grey-50 p-4 dark:border-grey-600 dark:bg-grey-700", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-32 rounded bg-grey-200" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-32 rounded bg-grey-200" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-32 rounded bg-grey-200 dark:bg-grey-600" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-32 rounded bg-grey-200 dark:bg-grey-600" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-20 rounded bg-grey-200" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-16 rounded bg-grey-200" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-10 rounded bg-grey-200" })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-20 rounded bg-grey-200 dark:bg-grey-600" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-16 rounded bg-grey-200 dark:bg-grey-600" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-10 rounded bg-grey-200 dark:bg-grey-600" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex border-x border-grey-200 bg-white bg-gradient-to-r p-5 dark:border-grey-600 dark:bg-grey-900", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-64 w-full rounded bg-grey-200" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex border-x border-grey-200 bg-white bg-gradient-to-r p-5 dark:border-grey-600 dark:bg-grey-900", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-64 w-full rounded bg-grey-200 dark:bg-grey-600" }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border border-grey-200 dark:border-grey-600", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full rounded-t-md border-b border-grey-200 bg-grey-50 p-2 dark:border-grey-600 dark:bg-grey-700", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-24 rounded bg-grey-200" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-48 bg-grey-100" })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full rounded-t-md border-b border-grey-200 bg-grey-50 p-2 dark:border-grey-600 dark:bg-grey-700", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-24 rounded bg-grey-200 dark:bg-grey-600" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-48 bg-grey-100 dark:bg-grey-800" })
     ] })
   ] });
 }
@@ -14453,6 +14463,7 @@ function CodeDemoContent({ data, showCode = true, controls = defaultControls })
   const codeItems = getCodeItems(code);
   const current = getCurrent(codeItems, tabIndex);
   const shouldExpand = getShouldExpand(current.code.trim());
+  const codeTheme = isDarkMode === null ? void 0 : isDarkMode ? "dark" : "light";
   const variantLabels = React5__namespace.default.useMemo(() => {
     const explicit = data.labels ?? {};
     return Object.fromEntries(variants.map((v) => [v, explicit[v] ?? humaniseVariant(v)]));
@@ -14561,7 +14572,8 @@ function CodeDemoContent({ data, showCode = true, controls = defaultControls })
                 {
                   className: "!mb-0 !rounded-none",
                   code: current.code,
-                  language: current.language
+                  language: current.language,
+                  "data-theme": codeTheme
                 }
               )
             }
@@ -14584,12 +14596,21 @@ function CodeDemo(props) {
 var IFrame = React5__namespace.default.forwardRef(
   ({ iframe, isRTL, isDarkMode }, ref) => {
     React5.useEffect(() => {
-      const document2 = ref?.current?.contentDocument;
-      const root = document2?.documentElement;
-      if (document2 && root) {
+      const frame2 = ref?.current;
+      if (!frame2) return;
+      const applyFrameSettings = () => {
+        const document2 = frame2.contentDocument;
+        const root = document2?.documentElement;
+        if (!document2 || !root) return;
         root.setAttribute("dir", isRTL ? "rtl" : "ltr");
-        root.classList.toggle("dark", !!isDarkMode);
-      }
+        if (isDarkMode !== null) {
+          root.setAttribute("data-theme", isDarkMode ? "dark" : "light");
+          root.classList.toggle("dark", !!isDarkMode);
+        }
+      };
+      applyFrameSettings();
+      frame2.addEventListener("load", applyFrameSettings);
+      return () => frame2.removeEventListener("load", applyFrameSettings);
     }, [isRTL, isDarkMode, ref]);
     if (typeof iframe === "number") {
       return /* @__PURE__ */ jsxRuntime.jsx("iframe", { ref, src: "", height: iframe, width: "100%", className: "w-full" });
@@ -14646,9 +14667,9 @@ function CodePreview({
         {
           className: tailwindMerge.twMerge(
             "code-responsive-wrapper w-full",
-            isDarkMode !== null && (isDarkMode ? "dark" : "light")
+            isDarkMode !== null ? isDarkMode ? "dark" : "light" : void 0
           ),
-          "data-theme": isDarkMode !== null && (isDarkMode ? "dark" : "light"),
+          "data-theme": isDarkMode !== null ? isDarkMode ? "dark" : "light" : void 0,
           children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -17572,7 +17593,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.91.0"};
+  version: "1.92.0"};
 var SluggerContext = React5__namespace.default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";