@tanstack/query-devtools 5.90.1 → 5.91.1

package/build/index.cjs

@@ -12154,6 +12154,7 @@ function Explorer(props) {
   });
   const subEntryPages = createMemo(() => chunkArray(subEntries(), 100));
   const currentDataPath = props.dataPath ?? [];
+  const inputId = createUniqueId();
   return (() => {
     var _el$6 = _tmpl$72();
     insert(_el$6, createComponent(Show, {
@@ -12229,15 +12230,17 @@ function Explorer(props) {
             }
           }), null);
           createRenderEffect((_p$) => {
-            var _v$3 = styles().expanderButtonContainer, _v$4 = styles().expanderButton, _v$5 = styles().info;
+            var _v$3 = styles().expanderButtonContainer, _v$4 = styles().expanderButton, _v$5 = expanded() ? "true" : "false", _v$6 = styles().info;
             _v$3 !== _p$.e && className(_el$7, _p$.e = _v$3);
             _v$4 !== _p$.t && className(_el$8, _p$.t = _v$4);
-            _v$5 !== _p$.a && className(_el$10, _p$.a = _v$5);
+            _v$5 !== _p$.a && setAttribute(_el$8, "aria-expanded", _p$.a = _v$5);
+            _v$6 !== _p$.o && className(_el$10, _p$.o = _v$6);
             return _p$;
           }, {
             e: void 0,
             t: void 0,
-            a: void 0
+            a: void 0,
+            o: void 0
           });
           return _el$7;
         })(), createComponent(Show, {
@@ -12342,9 +12345,9 @@ function Explorer(props) {
                       }
                     }), null);
                     createRenderEffect((_p$) => {
-                      var _v$0 = styles().entry, _v$1 = styles().expanderButton;
-                      _v$0 !== _p$.e && className(_el$22, _p$.e = _v$0);
-                      _v$1 !== _p$.t && className(_el$23, _p$.t = _v$1);
+                      var _v$1 = styles().entry, _v$10 = styles().expanderButton;
+                      _v$1 !== _p$.e && className(_el$22, _p$.e = _v$1);
+                      _v$10 !== _p$.t && className(_el$23, _p$.t = _v$10);
                       return _p$;
                     }, {
                       e: void 0,
@@ -12367,6 +12370,7 @@ function Explorer(props) {
       },
       get children() {
         var _el$16 = _tmpl$110(), _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild;
+        setAttribute(_el$17, "for", inputId);
         insert(_el$17, () => props.label, _el$18);
         insert(_el$16, createComponent(Show, {
           get when() {
@@ -12392,10 +12396,11 @@ function Explorer(props) {
                   const newData = updateNestedDataByPath(oldData, currentDataPath, type() === "number" ? changeEvent.target.valueAsNumber : changeEvent.target.value);
                   queryClient.setQueryData(props.activeQuery.queryKey, newData);
                 });
+                setAttribute(_el$19, "id", inputId);
                 createRenderEffect((_p$) => {
-                  var _v$6 = type() === "number" ? "number" : "text", _v$7 = clsx(styles().value, styles().editableInput);
-                  _v$6 !== _p$.e && setAttribute(_el$19, "type", _p$.e = _v$6);
-                  _v$7 !== _p$.t && className(_el$19, _p$.t = _v$7);
+                  var _v$7 = type() === "number" ? "number" : "text", _v$8 = clsx(styles().value, styles().editableInput);
+                  _v$7 !== _p$.e && setAttribute(_el$19, "type", _p$.e = _v$7);
+                  _v$8 !== _p$.t && className(_el$19, _p$.t = _v$8);
                   return _p$;
                 }, {
                   e: void 0,
@@ -12440,9 +12445,9 @@ function Explorer(props) {
           }
         }), null);
         createRenderEffect((_p$) => {
-          var _v$8 = styles().row, _v$9 = styles().label;
-          _v$8 !== _p$.e && className(_el$16, _p$.e = _v$8);
-          _v$9 !== _p$.t && className(_el$17, _p$.t = _v$9);
+          var _v$9 = styles().row, _v$0 = styles().label;
+          _v$9 !== _p$.e && className(_el$16, _p$.e = _v$9);
+          _v$0 !== _p$.t && className(_el$17, _p$.t = _v$0);
           return _p$;
         }, {
           e: void 0,
@@ -12486,7 +12491,7 @@ var init_Explorer = __esm({
     _tmpl$82 = /* @__PURE__ */ template(`<div><button> <span></span> <span> `);
     _tmpl$92 = /* @__PURE__ */ template(`<input>`);
     _tmpl$02 = /* @__PURE__ */ template(`<span>`);
-    _tmpl$110 = /* @__PURE__ */ template(`<div><span>:`);
+    _tmpl$110 = /* @__PURE__ */ template(`<div><label>:`);
     _tmpl$102 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
     Expander = (props) => {
       const theme = useTheme();
@@ -12853,9 +12858,9 @@ var init_Devtools = __esm({
     _tmpl$31 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value=""disabled selected>`);
     _tmpl$322 = /* @__PURE__ */ template(`<div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer">`);
     _tmpl$332 = /* @__PURE__ */ template(`<form><textarea name=data></textarea><div><span></span><div><button type=button>Cancel</button><button>Save`);
-    _tmpl$34 = /* @__PURE__ */ template(`<div><div>Query Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-observers-count><span>Observers:</span><span></span></div><div class=tsqd-query-details-last-updated><span>Last Updated:</span><span></span></div></div><div>Actions</div><div><button><span></span>Refetch</button><button><span></span>Invalidate</button><button><span></span>Reset</button><button><span></span>Remove</button><button><span></span> Loading</button></div><div>Data </div><div>Query Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
+    _tmpl$34 = /* @__PURE__ */ template(`<div><div>Query Details</div><div role=status aria-live=polite aria-atomic=true><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-observers-count><span>Observers:</span><span></span></div><div class=tsqd-query-details-last-updated><span>Last Updated:</span><span></span></div></div><div>Actions</div><div><button><span></span>Refetch</button><button><span></span>Invalidate</button><button><span></span>Reset</button><button><span></span>Remove</button><button><span></span> Loading</button></div><div>Data </div><div>Query Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
     _tmpl$35 = /* @__PURE__ */ template(`<option>`);
-    _tmpl$36 = /* @__PURE__ */ template(`<div><div>Mutation Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-last-updated><span>Submitted At:</span><span></span></div></div><div>Variables Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Context Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Mutations Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
+    _tmpl$36 = /* @__PURE__ */ template(`<div><div>Mutation Details</div><div role=status aria-live=polite aria-atomic=true><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-last-updated><span>Submitted At:</span><span></span></div></div><div>Variables Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Context Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Mutations Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
     [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
     [selectedMutationId, setSelectedMutationId] = createSignal(null);
     [panelWidth, setPanelWidth] = createSignal(0);
@@ -13484,6 +13489,8 @@ var init_Devtools = __esm({
               get ["class"]() {
                 return clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-settings");
               },
+              "aria-label": "Open settings menu",
+              title: "Open settings menu",
               get children() {
                 return createComponent(Settings, {});
               }
@@ -13530,51 +13537,48 @@ var init_Devtools = __esm({
                                     return clsx(styles().settingsMenu, "tsqd-settings-submenu");
                                   },
                                   get children() {
-                                    return [createComponent(dropdown_menu_exports.Item, {
-                                      onSelect: () => {
-                                        setDevtoolsPosition("top");
-                                      },
-                                      as: "button",
-                                      get ["class"]() {
-                                        return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
-                                      },
-                                      get children() {
-                                        return [_tmpl$111(), createComponent(ArrowUp, {})];
-                                      }
-                                    }), createComponent(dropdown_menu_exports.Item, {
-                                      onSelect: () => {
-                                        setDevtoolsPosition("bottom");
-                                      },
-                                      as: "button",
-                                      get ["class"]() {
-                                        return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
-                                      },
-                                      get children() {
-                                        return [_tmpl$103(), createComponent(ArrowDown, {})];
-                                      }
-                                    }), createComponent(dropdown_menu_exports.Item, {
-                                      onSelect: () => {
-                                        setDevtoolsPosition("left");
-                                      },
-                                      as: "button",
-                                      get ["class"]() {
-                                        return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
-                                      },
-                                      get children() {
-                                        return [_tmpl$112(), createComponent(ArrowLeft, {})];
-                                      }
-                                    }), createComponent(dropdown_menu_exports.Item, {
-                                      onSelect: () => {
-                                        setDevtoolsPosition("right");
-                                      },
-                                      as: "button",
-                                      get ["class"]() {
-                                        return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
+                                    return createComponent(dropdown_menu_exports.RadioGroup, {
+                                      "aria-label": "Position settings",
+                                      get value() {
+                                        return props.localStore.position;
                                       },
+                                      onChange: (value) => setDevtoolsPosition(value),
                                       get children() {
-                                        return [_tmpl$122(), createComponent(ArrowRight, {})];
+                                        return [createComponent(dropdown_menu_exports.RadioItem, {
+                                          value: "top",
+                                          get ["class"]() {
+                                            return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
+                                          },
+                                          get children() {
+                                            return [_tmpl$111(), createComponent(ArrowUp, {})];
+                                          }
+                                        }), createComponent(dropdown_menu_exports.RadioItem, {
+                                          value: "bottom",
+                                          get ["class"]() {
+                                            return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
+                                          },
+                                          get children() {
+                                            return [_tmpl$103(), createComponent(ArrowDown, {})];
+                                          }
+                                        }), createComponent(dropdown_menu_exports.RadioItem, {
+                                          value: "left",
+                                          get ["class"]() {
+                                            return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
+                                          },
+                                          get children() {
+                                            return [_tmpl$112(), createComponent(ArrowLeft, {})];
+                                          }
+                                        }), createComponent(dropdown_menu_exports.RadioItem, {
+                                          value: "right",
+                                          get ["class"]() {
+                                            return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
+                                          },
+                                          get children() {
+                                            return [_tmpl$122(), createComponent(ArrowRight, {})];
+                                          }
+                                        })];
                                       }
-                                    })];
+                                    });
                                   }
                                 });
                               }
@@ -13605,40 +13609,42 @@ var init_Devtools = __esm({
                                 return clsx(styles().settingsMenu, "tsqd-settings-submenu");
                               },
                               get children() {
-                                return [createComponent(dropdown_menu_exports.Item, {
-                                  onSelect: () => {
-                                    props.setLocalStore("theme_preference", "light");
-                                  },
-                                  as: "button",
-                                  get ["class"]() {
-                                    return clsx(styles().settingsSubButton, props.localStore.theme_preference === "light" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
+                                return createComponent(dropdown_menu_exports.RadioGroup, {
+                                  get value() {
+                                    return props.localStore.theme_preference;
                                   },
-                                  get children() {
-                                    return [_tmpl$142(), createComponent(Sun, {})];
-                                  }
-                                }), createComponent(dropdown_menu_exports.Item, {
-                                  onSelect: () => {
-                                    props.setLocalStore("theme_preference", "dark");
-                                  },
-                                  as: "button",
-                                  get ["class"]() {
-                                    return clsx(styles().settingsSubButton, props.localStore.theme_preference === "dark" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
+                                  onChange: (value) => {
+                                    props.setLocalStore("theme_preference", value);
                                   },
+                                  "aria-label": "Theme preference",
                                   get children() {
-                                    return [_tmpl$152(), createComponent(Moon, {})];
-                                  }
-                                }), createComponent(dropdown_menu_exports.Item, {
-                                  onSelect: () => {
-                                    props.setLocalStore("theme_preference", "system");
-                                  },
-                                  as: "button",
-                                  get ["class"]() {
-                                    return clsx(styles().settingsSubButton, props.localStore.theme_preference === "system" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
-                                  },
-                                  get children() {
-                                    return [_tmpl$162(), createComponent(Monitor, {})];
+                                    return [createComponent(dropdown_menu_exports.RadioItem, {
+                                      value: "light",
+                                      get ["class"]() {
+                                        return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
+                                      },
+                                      get children() {
+                                        return [_tmpl$142(), createComponent(Sun, {})];
+                                      }
+                                    }), createComponent(dropdown_menu_exports.RadioItem, {
+                                      value: "dark",
+                                      get ["class"]() {
+                                        return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
+                                      },
+                                      get children() {
+                                        return [_tmpl$152(), createComponent(Moon, {})];
+                                      }
+                                    }), createComponent(dropdown_menu_exports.RadioItem, {
+                                      value: "system",
+                                      get ["class"]() {
+                                        return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
+                                      },
+                                      get children() {
+                                        return [_tmpl$162(), createComponent(Monitor, {})];
+                                      }
+                                    })];
                                   }
-                                })];
+                                });
                               }
                             });
                           }
@@ -13666,44 +13672,47 @@ var init_Devtools = __esm({
                               get ["class"]() {
                                 return clsx(styles().settingsMenu, "tsqd-settings-submenu");
                               },
+                              "aria-label": "Hide disabled queries setting",
                               get children() {
-                                return [createComponent(dropdown_menu_exports.Item, {
-                                  onSelect: () => {
-                                    props.setLocalStore("hideDisabledQueries", "false");
-                                  },
-                                  as: "button",
-                                  get ["class"]() {
-                                    return clsx(styles().settingsSubButton, props.localStore.hideDisabledQueries !== "true" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-show");
+                                return createComponent(dropdown_menu_exports.RadioGroup, {
+                                  get value() {
+                                    return props.localStore.hideDisabledQueries;
                                   },
+                                  onChange: (value) => props.setLocalStore("hideDisabledQueries", value),
                                   get children() {
-                                    return [_tmpl$182(), createComponent(Show, {
-                                      get when() {
-                                        return props.localStore.hideDisabledQueries !== "true";
+                                    return [createComponent(dropdown_menu_exports.RadioItem, {
+                                      value: "false",
+                                      get ["class"]() {
+                                        return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-show");
                                       },
                                       get children() {
-                                        return createComponent(CheckCircle, {});
+                                        return [_tmpl$182(), createComponent(Show, {
+                                          get when() {
+                                            return props.localStore.hideDisabledQueries !== "true";
+                                          },
+                                          get children() {
+                                            return createComponent(CheckCircle, {});
+                                          }
+                                        })];
                                       }
-                                    })];
-                                  }
-                                }), createComponent(dropdown_menu_exports.Item, {
-                                  onSelect: () => {
-                                    props.setLocalStore("hideDisabledQueries", "true");
-                                  },
-                                  as: "button",
-                                  get ["class"]() {
-                                    return clsx(styles().settingsSubButton, props.localStore.hideDisabledQueries === "true" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-hide");
-                                  },
-                                  get children() {
-                                    return [_tmpl$192(), createComponent(Show, {
-                                      get when() {
-                                        return props.localStore.hideDisabledQueries === "true";
+                                    }), createComponent(dropdown_menu_exports.RadioItem, {
+                                      value: "true",
+                                      get ["class"]() {
+                                        return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-hide");
                                       },
                                       get children() {
-                                        return createComponent(CheckCircle, {});
+                                        return [_tmpl$192(), createComponent(Show, {
+                                          get when() {
+                                            return props.localStore.hideDisabledQueries === "true";
+                                          },
+                                          get children() {
+                                            return createComponent(CheckCircle, {});
+                                          }
+                                        })];
                                       }
                                     })];
                                   }
-                                })];
+                                });
                               }
                             });
                           }
@@ -15776,15 +15785,15 @@ var init_Devtools = __esm({
         outline-offset: 2px;
         outline: 2px solid ${colors.blue[800]};
       }
-    `,
-        themeSelectedButton: css`
-      background-color: ${t2(colors.purple[100], colors.purple[900])};
-      color: ${t2(colors.purple[700], colors.purple[300])};
-      & svg {
-        color: ${t2(colors.purple[700], colors.purple[300])};
-      }
-      &:hover {
+      &[data-checked] {
         background-color: ${t2(colors.purple[100], colors.purple[900])};
+        color: ${t2(colors.purple[700], colors.purple[300])};
+        & svg {
+          color: ${t2(colors.purple[700], colors.purple[300])};
+        }
+        &:hover {
+          background-color: ${t2(colors.purple[100], colors.purple[900])};
+        }
       }
     `,
         viewToggle: css`
@@ -15934,7 +15943,7 @@ var init_DevtoolsComponent = __esm({
       });
       const colorScheme = getPreferredColorScheme();
       const theme = createMemo(() => {
-        const preference = localStore.theme_preference || THEME_PREFERENCE;
+        const preference = props.theme || localStore.theme_preference || THEME_PREFERENCE;
         if (preference !== "system") return preference;
         return colorScheme();
       });
@@ -15984,7 +15993,7 @@ var init_DevtoolsPanelComponent = __esm({
       });
       const colorScheme = getPreferredColorScheme();
       const theme = createMemo(() => {
-        const preference = localStore.theme_preference || THEME_PREFERENCE;
+        const preference = props.theme || localStore.theme_preference || THEME_PREFERENCE;
         if (preference !== "system") return preference;
         return colorScheme();
       });
@@ -16042,6 +16051,7 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
   #errorTypes;
   #hideDisabledQueries;
   #Component;
+  #theme;
   #dispose;
   constructor(config) {
     const {
@@ -16055,7 +16065,8 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
       errorTypes,
       styleNonce,
       shadowDOMTarget,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     } = config;
     this.#client = createSignal(client);
     this.#queryFlavor = queryFlavor;
@@ -16068,6 +16079,7 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
     this.#initialIsOpen = createSignal(initialIsOpen);
     this.#errorTypes = createSignal(errorTypes);
     this.#hideDisabledQueries = createSignal(hideDisabledQueries);
+    this.#theme = createSignal(theme);
   }
   setButtonPosition(position) {
     this.#buttonPosition[1](position);
@@ -16084,6 +16096,9 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
   setClient(client) {
     this.#client[1](client);
   }
+  setTheme(theme) {
+    this.#theme[1](theme);
+  }
   mount(el) {
     if (this.#isMounted) {
       throw new Error("Devtools is already mounted");
@@ -16096,6 +16111,7 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
       const [errors] = this.#errorTypes;
       const [hideDisabledQueries] = this.#hideDisabledQueries;
       const [queryClient] = this.#client;
+      const [theme] = this.#theme;
       let Devtools2;
       if (this.#Component) {
         Devtools2 = this.#Component;
@@ -16135,6 +16151,9 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
         },
         get hideDisabledQueries() {
           return hideDisabledQueries();
+        },
+        get theme() {
+          return theme();
         }
       }));
     }, el);
@@ -16171,6 +16190,7 @@ exports.TanstackQueryDevtoolsPanel = class TanstackQueryDevtoolsPanel {
   #hideDisabledQueries;
   #onClose;
   #Component;
+  #theme;
   #dispose;
   constructor(config) {
     const {
@@ -16185,7 +16205,8 @@ exports.TanstackQueryDevtoolsPanel = class TanstackQueryDevtoolsPanel {
       styleNonce,
       shadowDOMTarget,
       onClose,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     } = config;
     this.#client = createSignal(client);
     this.#queryFlavor = queryFlavor;
@@ -16199,6 +16220,7 @@ exports.TanstackQueryDevtoolsPanel = class TanstackQueryDevtoolsPanel {
     this.#errorTypes = createSignal(errorTypes);
     this.#hideDisabledQueries = createSignal(hideDisabledQueries);
     this.#onClose = createSignal(onClose);
+    this.#theme = createSignal(theme);
   }
   setButtonPosition(position) {
     this.#buttonPosition[1](position);
@@ -16218,6 +16240,9 @@ exports.TanstackQueryDevtoolsPanel = class TanstackQueryDevtoolsPanel {
   setOnClose(onClose) {
     this.#onClose[1](() => onClose);
   }
+  setTheme(theme) {
+    this.#theme[1](theme);
+  }
   mount(el) {
     if (this.#isMounted) {
       throw new Error("Devtools is already mounted");
@@ -16231,6 +16256,7 @@ exports.TanstackQueryDevtoolsPanel = class TanstackQueryDevtoolsPanel {
       const [hideDisabledQueries] = this.#hideDisabledQueries;
       const [queryClient] = this.#client;
       const [onClose] = this.#onClose;
+      const [theme] = this.#theme;
       let Devtools2;
       if (this.#Component) {
         Devtools2 = this.#Component;
@@ -16273,6 +16299,9 @@ exports.TanstackQueryDevtoolsPanel = class TanstackQueryDevtoolsPanel {
         },
         get onClose() {
           return onClose();
+        },
+        get theme() {
+          return theme();
         }
       }));
     }, el);

package/build/index.d.cts

@@ -4,6 +4,7 @@ type XPosition = 'left' | 'right';
 type YPosition = 'top' | 'bottom';
 type DevtoolsPosition = XPosition | YPosition;
 type DevtoolsButtonPosition = `${YPosition}-${XPosition}` | 'relative';
+type Theme = 'dark' | 'light' | 'system';
 interface DevtoolsErrorType {
     /**
      * The name of the error.
@@ -26,6 +27,7 @@ interface QueryDevtoolsProps {
     shadowDOMTarget?: ShadowRoot;
     onClose?: () => unknown;
     hideDisabledQueries?: boolean;
+    theme?: Theme;
 }
 
 interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {
@@ -40,6 +42,7 @@ declare class TanstackQueryDevtools {
     setInitialIsOpen(isOpen: boolean): void;
     setErrorTypes(errorTypes: Array<DevtoolsErrorType>): void;
     setClient(client: QueryClient): void;
+    setTheme(theme?: Theme): void;
     mount<T extends HTMLElement>(el: T): void;
     unmount(): void;
 }
@@ -58,8 +61,9 @@ declare class TanstackQueryDevtoolsPanel {
     setErrorTypes(errorTypes: Array<DevtoolsErrorType>): void;
     setClient(client: QueryClient): void;
     setOnClose(onClose: () => unknown): void;
+    setTheme(theme?: Theme): void;
     mount<T extends HTMLElement>(el: T): void;
     unmount(): void;
 }
 
-export { type DevtoolsButtonPosition, type DevtoolsErrorType, type DevtoolsPosition, TanstackQueryDevtools, type TanstackQueryDevtoolsConfig, TanstackQueryDevtoolsPanel, type TanstackQueryDevtoolsPanelConfig };
+export { type DevtoolsButtonPosition, type DevtoolsErrorType, type DevtoolsPosition, TanstackQueryDevtools, type TanstackQueryDevtoolsConfig, TanstackQueryDevtoolsPanel, type TanstackQueryDevtoolsPanelConfig, type Theme };

package/build/index.d.ts

@@ -4,6 +4,7 @@ type XPosition = 'left' | 'right';
 type YPosition = 'top' | 'bottom';
 type DevtoolsPosition = XPosition | YPosition;
 type DevtoolsButtonPosition = `${YPosition}-${XPosition}` | 'relative';
+type Theme = 'dark' | 'light' | 'system';
 interface DevtoolsErrorType {
     /**
      * The name of the error.
@@ -26,6 +27,7 @@ interface QueryDevtoolsProps {
     shadowDOMTarget?: ShadowRoot;
     onClose?: () => unknown;
     hideDisabledQueries?: boolean;
+    theme?: Theme;
 }
 
 interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {
@@ -40,6 +42,7 @@ declare class TanstackQueryDevtools {
     setInitialIsOpen(isOpen: boolean): void;
     setErrorTypes(errorTypes: Array<DevtoolsErrorType>): void;
     setClient(client: QueryClient): void;
+    setTheme(theme?: Theme): void;
     mount<T extends HTMLElement>(el: T): void;
     unmount(): void;
 }
@@ -58,8 +61,9 @@ declare class TanstackQueryDevtoolsPanel {
     setErrorTypes(errorTypes: Array<DevtoolsErrorType>): void;
     setClient(client: QueryClient): void;
     setOnClose(onClose: () => unknown): void;
+    setTheme(theme?: Theme): void;
     mount<T extends HTMLElement>(el: T): void;
     unmount(): void;
 }
 
-export { type DevtoolsButtonPosition, type DevtoolsErrorType, type DevtoolsPosition, TanstackQueryDevtools, type TanstackQueryDevtoolsConfig, TanstackQueryDevtoolsPanel, type TanstackQueryDevtoolsPanelConfig };
+export { type DevtoolsButtonPosition, type DevtoolsErrorType, type DevtoolsPosition, TanstackQueryDevtools, type TanstackQueryDevtoolsConfig, TanstackQueryDevtoolsPanel, type TanstackQueryDevtoolsPanelConfig, type Theme };