@tanstack/query-devtools 5.91.1 → 5.92.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/build/index.cjs CHANGED
@@ -11949,7 +11949,7 @@ var init_QueryDevtoolsContext = __esm({
11949
11949
  });
11950
11950
 
11951
11951
  // src/contexts/PiPContext.tsx
11952
- var PiPContext, PiPProvider, usePiPWindow;
11952
+ var PipOpenError, PiPContext, PiPProvider, usePiPWindow;
11953
11953
  var init_PiPContext = __esm({
11954
11954
  "src/contexts/PiPContext.tsx"() {
11955
11955
  init_web();
@@ -11957,6 +11957,8 @@ var init_PiPContext = __esm({
11957
11957
  init_web();
11958
11958
  init_constants();
11959
11959
  init_QueryDevtoolsContext();
11960
+ PipOpenError = class extends Error {
11961
+ };
11960
11962
  PiPContext = createContext(void 0);
11961
11963
  PiPProvider = (props) => {
11962
11964
  const [pipWindow, setPipWindow] = createSignal(null);
@@ -11973,7 +11975,7 @@ var init_PiPContext = __esm({
11973
11975
  }
11974
11976
  const pip = window.open("", "TSQD-Devtools-Panel", `width=${width},height=${height},popup`);
11975
11977
  if (!pip) {
11976
- throw new Error("Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode.");
11978
+ throw new PipOpenError("Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode.");
11977
11979
  }
11978
11980
  pip.document.head.innerHTML = "";
11979
11981
  pip.document.body.innerHTML = "";
@@ -12017,7 +12019,16 @@ var init_PiPContext = __esm({
12017
12019
  createEffect(() => {
12018
12020
  const pip_open = props.localStore.pip_open ?? "false";
12019
12021
  if (pip_open === "true" && !props.disabled) {
12020
- requestPipWindow(Number(window.innerWidth), Number(props.localStore.height || PIP_DEFAULT_HEIGHT));
12022
+ try {
12023
+ requestPipWindow(Number(window.innerWidth), Number(props.localStore.height || PIP_DEFAULT_HEIGHT));
12024
+ } catch (error) {
12025
+ if (error instanceof PipOpenError) {
12026
+ props.setLocalStore("pip_open", "false");
12027
+ props.setLocalStore("open", "false");
12028
+ return;
12029
+ }
12030
+ throw error;
12031
+ }
12021
12032
  }
12022
12033
  });
12023
12034
  createEffect(() => {
@@ -12825,9 +12836,9 @@ var init_Devtools = __esm({
12825
12836
  init_constants();
12826
12837
  _tmpl$25 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button type=button aria-label="Open Tanstack query devtools"class=tsqd-open-btn>`);
12827
12838
  _tmpl$26 = /* @__PURE__ */ template(`<div>`);
12828
- _tmpl$33 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div></div><button aria-label="Close tanstack query devtools">`);
12829
- _tmpl$43 = /* @__PURE__ */ template(`<select name=tsqd-queries-filter-sort>`);
12830
- _tmpl$53 = /* @__PURE__ */ template(`<select name=tsqd-mutations-filter-sort>`);
12839
+ _tmpl$33 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div role=separator aria-label="Resize devtools panel"tabindex=0></div><button aria-label="Close tanstack query devtools">`);
12840
+ _tmpl$43 = /* @__PURE__ */ template(`<select name=tsqd-queries-filter-sort aria-label="Sort queries by">`);
12841
+ _tmpl$53 = /* @__PURE__ */ template(`<select name=tsqd-mutations-filter-sort aria-label="Sort mutations by">`);
12831
12842
  _tmpl$63 = /* @__PURE__ */ template(`<span>Asc`);
12832
12843
  _tmpl$73 = /* @__PURE__ */ template(`<span>Desc`);
12833
12844
  _tmpl$83 = /* @__PURE__ */ template(`<button aria-label="Open in picture-in-picture mode"title="Open in picture-in-picture mode">`);
@@ -12848,19 +12859,19 @@ var init_Devtools = __esm({
12848
12859
  _tmpl$212 = /* @__PURE__ */ template(`<div><div class=tsqd-mutations-container>`);
12849
12860
  _tmpl$222 = /* @__PURE__ */ template(`<div><div><div><button aria-label="Close Tanstack query devtools"><span>TANSTACK</span><span> v</span></button></div></div><div><div><div><input aria-label="Filter queries by query key"type=text placeholder=Filter name=tsqd-query-filter-input></div><div></div><button class=tsqd-query-filter-sort-order-btn></button></div><div><button aria-label="Clear query cache"></button><button>`);
12850
12861
  _tmpl$232 = /* @__PURE__ */ template(`<option>Sort by `);
12851
- _tmpl$242 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator>disabled`);
12852
- _tmpl$252 = /* @__PURE__ */ template(`<div class=tsqd-query-static-indicator>static`);
12862
+ _tmpl$242 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator aria-hidden=true>disabled`);
12863
+ _tmpl$252 = /* @__PURE__ */ template(`<div class=tsqd-query-static-indicator aria-hidden=true>static`);
12853
12864
  _tmpl$262 = /* @__PURE__ */ template(`<button><div></div><code class=tsqd-query-hash>`);
12854
12865
  _tmpl$27 = /* @__PURE__ */ template(`<div role=tooltip id=tsqd-status-tooltip>`);
12855
12866
  _tmpl$28 = /* @__PURE__ */ template(`<span>`);
12856
- _tmpl$29 = /* @__PURE__ */ template(`<button><span></span><span>`);
12857
- _tmpl$30 = /* @__PURE__ */ template(`<button><span></span> Error`);
12858
- _tmpl$31 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value=""disabled selected>`);
12867
+ _tmpl$29 = /* @__PURE__ */ template(`<button><span aria-hidden=true></span><span>`);
12868
+ _tmpl$30 = /* @__PURE__ */ template(`<button><span aria-hidden=true></span> Error`);
12869
+ _tmpl$31 = /* @__PURE__ */ template(`<div><span aria-hidden=true></span>Trigger Error<select aria-label="Select error type to trigger"><option value=""disabled selected>`);
12859
12870
  _tmpl$322 = /* @__PURE__ */ template(`<div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer">`);
12860
- _tmpl$332 = /* @__PURE__ */ template(`<form><textarea name=data></textarea><div><span></span><div><button type=button>Cancel</button><button>Save`);
12861
- _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">`);
12871
+ _tmpl$332 = /* @__PURE__ */ template(`<form><textarea name=data aria-label="Edit query data as JSON"></textarea><div><span></span><div><button type=button>Cancel</button><button>Save`);
12872
+ _tmpl$34 = /* @__PURE__ */ template(`<div><div role=heading aria-level=2>Query Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span role=status aria-live=polite></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 role=heading aria-level=2>Actions</div><div><button><span aria-hidden=true></span>Refetch</button><button><span aria-hidden=true></span>Invalidate</button><button><span aria-hidden=true></span>Reset</button><button><span aria-hidden=true></span>Remove</button><button><span aria-hidden=true></span> Loading</button></div><div role=heading aria-level=2>Data </div><div role=heading aria-level=2>Query Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
12862
12873
  _tmpl$35 = /* @__PURE__ */ template(`<option>`);
12863
- _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">`);
12874
+ _tmpl$36 = /* @__PURE__ */ template(`<div><div role=heading aria-level=2>Mutation Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span role=status aria-live=polite></span></div><div class=tsqd-query-details-last-updated><span>Submitted At:</span><span></span></div></div><div role=heading aria-level=2>Variables Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div role=heading aria-level=2>Context Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div role=heading aria-level=2>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div role=heading aria-level=2>Mutations Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
12864
12875
  [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
12865
12876
  [selectedMutationId, setSelectedMutationId] = createSignal(null);
12866
12877
  [panelWidth, setPanelWidth] = createSignal(0);
@@ -13116,6 +13127,10 @@ var init_Devtools = __esm({
13116
13127
  const styles = createMemo(() => {
13117
13128
  return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
13118
13129
  });
13130
+ let closeBtnRef;
13131
+ onMount(() => {
13132
+ closeBtnRef.focus();
13133
+ });
13119
13134
  const [isResizing, setIsResizing] = createSignal(false);
13120
13135
  const position = createMemo(() => props.localStore.position || useQueryDevtoolsContext().position || POSITION);
13121
13136
  const handleDragStart = (event) => {
@@ -13159,7 +13174,7 @@ var init_Devtools = __esm({
13159
13174
  setIsResizing(false);
13160
13175
  }
13161
13176
  document.removeEventListener("mousemove", runDrag, false);
13162
- document.removeEventListener("mouseUp", unsubscribe, false);
13177
+ document.removeEventListener("mouseup", unsubscribe, false);
13163
13178
  };
13164
13179
  document.addEventListener("mousemove", runDrag, false);
13165
13180
  document.addEventListener("mouseup", unsubscribe, false);
@@ -13220,8 +13235,32 @@ var init_Devtools = __esm({
13220
13235
  var _el$7 = _tmpl$33(), _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
13221
13236
  var _ref$3 = panelRef;
13222
13237
  typeof _ref$3 === "function" ? use(_ref$3, _el$7) : panelRef = _el$7;
13238
+ _el$8.$$keydown = (e2) => {
13239
+ const step = 10;
13240
+ const minHeight = convertRemToPixels(3.5);
13241
+ const minWidth = convertRemToPixels(12);
13242
+ if (position() === "top" || position() === "bottom") {
13243
+ if (e2.key === "ArrowUp" || e2.key === "ArrowDown") {
13244
+ e2.preventDefault();
13245
+ const currentHeight = Number(props.localStore.height || DEFAULT_HEIGHT);
13246
+ const delta = position() === "bottom" ? e2.key === "ArrowUp" ? step : -10 : e2.key === "ArrowDown" ? step : -10;
13247
+ const newHeight = Math.max(minHeight, currentHeight + delta);
13248
+ props.setLocalStore("height", String(newHeight));
13249
+ }
13250
+ } else {
13251
+ if (e2.key === "ArrowLeft" || e2.key === "ArrowRight") {
13252
+ e2.preventDefault();
13253
+ const currentWidth = Number(props.localStore.width || DEFAULT_WIDTH);
13254
+ const delta = position() === "right" ? e2.key === "ArrowLeft" ? step : -10 : e2.key === "ArrowRight" ? step : -10;
13255
+ const newWidth = Math.max(minWidth, currentWidth + delta);
13256
+ props.setLocalStore("width", String(newWidth));
13257
+ }
13258
+ }
13259
+ };
13223
13260
  _el$8.$$mousedown = handleDragStart;
13224
13261
  _el$9.$$click = () => props.setLocalStore("open", "false");
13262
+ var _ref$4 = closeBtnRef;
13263
+ typeof _ref$4 === "function" ? use(_ref$4, _el$9) : closeBtnRef = _el$9;
13225
13264
  insert(_el$9, createComponent(ChevronDown, {}));
13226
13265
  insert(_el$7, createComponent(ContentView, props), null);
13227
13266
  createRenderEffect((_p$) => {
@@ -13229,19 +13268,25 @@ var init_Devtools = __esm({
13229
13268
  [css`
13230
13269
  min-width: min-content;
13231
13270
  `]: panelWidth() < thirdBreakpoint && (position() === "right" || position() === "left")
13232
- }, "tsqd-main-panel"), _v$2 = position() === "bottom" || position() === "top" ? `${props.localStore.height || DEFAULT_HEIGHT}px` : "auto", _v$3 = position() === "right" || position() === "left" ? `${props.localStore.width || DEFAULT_WIDTH}px` : "auto", _v$4 = clsx(styles().dragHandle, styles()[`dragHandle-position-${position()}`], "tsqd-drag-handle"), _v$5 = clsx(styles().closeBtn, styles()[`closeBtn-position-${position()}`], "tsqd-minimize-btn");
13271
+ }, "tsqd-main-panel"), _v$2 = position() === "bottom" || position() === "top" ? `${props.localStore.height || DEFAULT_HEIGHT}px` : "auto", _v$3 = position() === "right" || position() === "left" ? `${props.localStore.width || DEFAULT_WIDTH}px` : "auto", _v$4 = position() === "top" || position() === "bottom" ? "horizontal" : "vertical", _v$5 = position() === "top" || position() === "bottom" ? convertRemToPixels(3.5) : convertRemToPixels(12), _v$6 = position() === "top" || position() === "bottom" ? Number(props.localStore.height || DEFAULT_HEIGHT) : Number(props.localStore.width || DEFAULT_WIDTH), _v$7 = clsx(styles().dragHandle, styles()[`dragHandle-position-${position()}`], "tsqd-drag-handle"), _v$8 = clsx(styles().closeBtn, styles()[`closeBtn-position-${position()}`], "tsqd-minimize-btn");
13233
13272
  _v$ !== _p$.e && className(_el$7, _p$.e = _v$);
13234
13273
  _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$7.style.setProperty("height", _v$2) : _el$7.style.removeProperty("height"));
13235
13274
  _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$7.style.setProperty("width", _v$3) : _el$7.style.removeProperty("width"));
13236
- _v$4 !== _p$.o && className(_el$8, _p$.o = _v$4);
13237
- _v$5 !== _p$.i && className(_el$9, _p$.i = _v$5);
13275
+ _v$4 !== _p$.o && setAttribute(_el$8, "aria-orientation", _p$.o = _v$4);
13276
+ _v$5 !== _p$.i && setAttribute(_el$8, "aria-valuemin", _p$.i = _v$5);
13277
+ _v$6 !== _p$.n && setAttribute(_el$8, "aria-valuenow", _p$.n = _v$6);
13278
+ _v$7 !== _p$.s && className(_el$8, _p$.s = _v$7);
13279
+ _v$8 !== _p$.h && className(_el$9, _p$.h = _v$8);
13238
13280
  return _p$;
13239
13281
  }, {
13240
13282
  e: void 0,
13241
13283
  t: void 0,
13242
13284
  a: void 0,
13243
13285
  o: void 0,
13244
- i: void 0
13286
+ i: void 0,
13287
+ n: void 0,
13288
+ s: void 0,
13289
+ h: void 0
13245
13290
  });
13246
13291
  return _el$7;
13247
13292
  })();
@@ -13306,8 +13351,8 @@ var init_Devtools = __esm({
13306
13351
  };
13307
13352
  return [(() => {
13308
13353
  var _el$0 = _tmpl$222(), _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$1.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild, _el$19 = _el$17.nextSibling, _el$22 = _el$19.nextSibling, _el$25 = _el$16.nextSibling, _el$26 = _el$25.firstChild, _el$27 = _el$26.nextSibling;
13309
- var _ref$4 = containerRef;
13310
- typeof _ref$4 === "function" ? use(_ref$4, _el$0) : containerRef = _el$0;
13354
+ var _ref$5 = containerRef;
13355
+ typeof _ref$5 === "function" ? use(_ref$5, _el$0) : containerRef = _el$0;
13311
13356
  _el$11.$$click = () => {
13312
13357
  if (!pip().pipWindow && !props.showPanelViewOnly) {
13313
13358
  props.setLocalStore("open", "false");
@@ -13326,6 +13371,7 @@ var init_Devtools = __esm({
13326
13371
  get value() {
13327
13372
  return selectedView();
13328
13373
  },
13374
+ "aria-label": "Toggle between queries and mutations view",
13329
13375
  onChange: (value) => {
13330
13376
  setSelectedView(value);
13331
13377
  setSelectedQueryHash(null);
@@ -13672,12 +13718,12 @@ var init_Devtools = __esm({
13672
13718
  get ["class"]() {
13673
13719
  return clsx(styles().settingsMenu, "tsqd-settings-submenu");
13674
13720
  },
13675
- "aria-label": "Hide disabled queries setting",
13676
13721
  get children() {
13677
13722
  return createComponent(dropdown_menu_exports.RadioGroup, {
13678
13723
  get value() {
13679
13724
  return props.localStore.hideDisabledQueries;
13680
13725
  },
13726
+ "aria-label": "Hide disabled queries setting",
13681
13727
  onChange: (value) => props.setLocalStore("hideDisabledQueries", value),
13682
13728
  get children() {
13683
13729
  return [createComponent(dropdown_menu_exports.RadioItem, {
@@ -13768,33 +13814,33 @@ var init_Devtools = __esm({
13768
13814
  }
13769
13815
  }), null);
13770
13816
  createRenderEffect((_p$) => {
13771
- var _v$6 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && css`
13817
+ var _v$9 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && css`
13772
13818
  height: 50%;
13773
13819
  max-height: 50%;
13774
13820
  `, panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && css`
13775
13821
  height: 100%;
13776
13822
  max-height: 100%;
13777
- `, "tsqd-queries-container"), _v$7 = clsx(styles().row, "tsqd-header"), _v$8 = styles().logoAndToggleContainer, _v$9 = clsx(styles().logo, "tsqd-text-logo-container"), _v$0 = clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack"), _v$1 = clsx(styles().queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$10 = clsx(styles().row, "tsqd-filters-actions-container"), _v$11 = clsx(styles().filtersContainer, "tsqd-filters-container"), _v$12 = clsx(styles().filterInput, "tsqd-query-filter-textfield-container"), _v$13 = clsx("tsqd-query-filter-textfield"), _v$14 = clsx(styles().filterSelect, "tsqd-query-filter-sort-container"), _v$15 = `Sort order ${(selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1 ? "descending" : "ascending"}`, _v$16 = (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1, _v$17 = clsx(styles().actionsContainer, "tsqd-actions-container"), _v$18 = clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$19 = `Clear ${selectedView()} cache`, _v$20 = clsx(styles().actionsBtn, offline() && styles().actionsBtnOffline, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$21 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$22 = offline(), _v$23 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`;
13778
- _v$6 !== _p$.e && className(_el$0, _p$.e = _v$6);
13779
- _v$7 !== _p$.t && className(_el$1, _p$.t = _v$7);
13780
- _v$8 !== _p$.a && className(_el$10, _p$.a = _v$8);
13781
- _v$9 !== _p$.o && className(_el$11, _p$.o = _v$9);
13782
- _v$0 !== _p$.i && className(_el$12, _p$.i = _v$0);
13783
- _v$1 !== _p$.n && className(_el$13, _p$.n = _v$1);
13784
- _v$10 !== _p$.s && className(_el$15, _p$.s = _v$10);
13785
- _v$11 !== _p$.h && className(_el$16, _p$.h = _v$11);
13786
- _v$12 !== _p$.r && className(_el$17, _p$.r = _v$12);
13787
- _v$13 !== _p$.d && className(_el$18, _p$.d = _v$13);
13788
- _v$14 !== _p$.l && className(_el$19, _p$.l = _v$14);
13789
- _v$15 !== _p$.u && setAttribute(_el$22, "aria-label", _p$.u = _v$15);
13790
- _v$16 !== _p$.c && setAttribute(_el$22, "aria-pressed", _p$.c = _v$16);
13791
- _v$17 !== _p$.w && className(_el$25, _p$.w = _v$17);
13792
- _v$18 !== _p$.m && className(_el$26, _p$.m = _v$18);
13793
- _v$19 !== _p$.f && setAttribute(_el$26, "title", _p$.f = _v$19);
13794
- _v$20 !== _p$.y && className(_el$27, _p$.y = _v$20);
13795
- _v$21 !== _p$.g && setAttribute(_el$27, "aria-label", _p$.g = _v$21);
13796
- _v$22 !== _p$.p && setAttribute(_el$27, "aria-pressed", _p$.p = _v$22);
13797
- _v$23 !== _p$.b && setAttribute(_el$27, "title", _p$.b = _v$23);
13823
+ `, "tsqd-queries-container"), _v$0 = clsx(styles().row, "tsqd-header"), _v$1 = styles().logoAndToggleContainer, _v$10 = clsx(styles().logo, "tsqd-text-logo-container"), _v$11 = clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack"), _v$12 = clsx(styles().queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$13 = clsx(styles().row, "tsqd-filters-actions-container"), _v$14 = clsx(styles().filtersContainer, "tsqd-filters-container"), _v$15 = clsx(styles().filterInput, "tsqd-query-filter-textfield-container"), _v$16 = clsx("tsqd-query-filter-textfield"), _v$17 = clsx(styles().filterSelect, "tsqd-query-filter-sort-container"), _v$18 = `Sort order ${(selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1 ? "descending" : "ascending"}`, _v$19 = (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1, _v$20 = clsx(styles().actionsContainer, "tsqd-actions-container"), _v$21 = clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$22 = `Clear ${selectedView()} cache`, _v$23 = clsx(styles().actionsBtn, offline() && styles().actionsBtnOffline, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$24 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$25 = offline(), _v$26 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`;
13824
+ _v$9 !== _p$.e && className(_el$0, _p$.e = _v$9);
13825
+ _v$0 !== _p$.t && className(_el$1, _p$.t = _v$0);
13826
+ _v$1 !== _p$.a && className(_el$10, _p$.a = _v$1);
13827
+ _v$10 !== _p$.o && className(_el$11, _p$.o = _v$10);
13828
+ _v$11 !== _p$.i && className(_el$12, _p$.i = _v$11);
13829
+ _v$12 !== _p$.n && className(_el$13, _p$.n = _v$12);
13830
+ _v$13 !== _p$.s && className(_el$15, _p$.s = _v$13);
13831
+ _v$14 !== _p$.h && className(_el$16, _p$.h = _v$14);
13832
+ _v$15 !== _p$.r && className(_el$17, _p$.r = _v$15);
13833
+ _v$16 !== _p$.d && className(_el$18, _p$.d = _v$16);
13834
+ _v$17 !== _p$.l && className(_el$19, _p$.l = _v$17);
13835
+ _v$18 !== _p$.u && setAttribute(_el$22, "aria-label", _p$.u = _v$18);
13836
+ _v$19 !== _p$.c && setAttribute(_el$22, "aria-pressed", _p$.c = _v$19);
13837
+ _v$20 !== _p$.w && className(_el$25, _p$.w = _v$20);
13838
+ _v$21 !== _p$.m && className(_el$26, _p$.m = _v$21);
13839
+ _v$22 !== _p$.f && setAttribute(_el$26, "title", _p$.f = _v$22);
13840
+ _v$23 !== _p$.y && className(_el$27, _p$.y = _v$23);
13841
+ _v$24 !== _p$.g && setAttribute(_el$27, "aria-label", _p$.g = _v$24);
13842
+ _v$25 !== _p$.p && setAttribute(_el$27, "aria-pressed", _p$.p = _v$25);
13843
+ _v$26 !== _p$.b && setAttribute(_el$27, "title", _p$.b = _v$26);
13798
13844
  return _p$;
13799
13845
  }, {
13800
13846
  e: void 0,
@@ -13907,10 +13953,10 @@ var init_Devtools = __esm({
13907
13953
  }
13908
13954
  }), null);
13909
13955
  createRenderEffect((_p$) => {
13910
- var _v$24 = clsx(styles().queryRow, selectedQueryHash() === props.query.queryHash && styles().selectedQueryRow, "tsqd-query-row"), _v$25 = `Query key ${props.query.queryHash}`, _v$26 = clsx(getObserverCountColorStyles(), "tsqd-query-observer-count");
13911
- _v$24 !== _p$.e && className(_el$50, _p$.e = _v$24);
13912
- _v$25 !== _p$.t && setAttribute(_el$50, "aria-label", _p$.t = _v$25);
13913
- _v$26 !== _p$.a && className(_el$51, _p$.a = _v$26);
13956
+ var _v$27 = clsx(styles().queryRow, selectedQueryHash() === props.query.queryHash && styles().selectedQueryRow, "tsqd-query-row"), _v$28 = `Query key ${props.query.queryHash}${isDisabled() ? ", disabled" : ""}${isStatic() ? ", static" : ""}`, _v$29 = clsx(getObserverCountColorStyles(), "tsqd-query-observer-count");
13957
+ _v$27 !== _p$.e && className(_el$50, _p$.e = _v$27);
13958
+ _v$28 !== _p$.t && setAttribute(_el$50, "aria-label", _p$.t = _v$28);
13959
+ _v$29 !== _p$.a && className(_el$51, _p$.a = _v$29);
13914
13960
  return _p$;
13915
13961
  }, {
13916
13962
  e: void 0,
@@ -14018,10 +14064,10 @@ var init_Devtools = __esm({
14018
14064
  }), null);
14019
14065
  insert(_el$57, () => new Date(props.mutation.state.submittedAt).toLocaleString(), null);
14020
14066
  createRenderEffect((_p$) => {
14021
- var _v$27 = clsx(styles().queryRow, selectedMutationId() === props.mutation.mutationId && styles().selectedQueryRow, "tsqd-query-row"), _v$28 = `Mutation submitted at ${new Date(props.mutation.state.submittedAt).toLocaleString()}`, _v$29 = clsx(getObserverCountColorStyles(), "tsqd-query-observer-count");
14022
- _v$27 !== _p$.e && className(_el$55, _p$.e = _v$27);
14023
- _v$28 !== _p$.t && setAttribute(_el$55, "aria-label", _p$.t = _v$28);
14024
- _v$29 !== _p$.a && className(_el$56, _p$.a = _v$29);
14067
+ var _v$30 = clsx(styles().queryRow, selectedMutationId() === props.mutation.mutationId && styles().selectedQueryRow, "tsqd-query-row"), _v$31 = `Mutation submitted at ${new Date(props.mutation.state.submittedAt).toLocaleString()}`, _v$32 = clsx(getObserverCountColorStyles(), "tsqd-query-observer-count");
14068
+ _v$30 !== _p$.e && className(_el$55, _p$.e = _v$30);
14069
+ _v$31 !== _p$.t && setAttribute(_el$55, "aria-label", _p$.t = _v$31);
14070
+ _v$32 !== _p$.a && className(_el$56, _p$.a = _v$32);
14025
14071
  return _p$;
14026
14072
  }, {
14027
14073
  e: void 0,
@@ -14173,8 +14219,8 @@ var init_Devtools = __esm({
14173
14219
  });
14174
14220
  return (() => {
14175
14221
  var _el$60 = _tmpl$29(), _el$62 = _el$60.firstChild, _el$64 = _el$62.nextSibling;
14176
- var _ref$5 = tagRef;
14177
- typeof _ref$5 === "function" ? use(_ref$5, _el$60) : tagRef = _el$60;
14222
+ var _ref$6 = tagRef;
14223
+ typeof _ref$6 === "function" ? use(_ref$6, _el$60) : tagRef = _el$60;
14178
14224
  _el$60.addEventListener("mouseleave", () => {
14179
14225
  setMouseOver(false);
14180
14226
  setFocused(false);
@@ -14186,6 +14232,9 @@ var init_Devtools = __esm({
14186
14232
  get disabled() {
14187
14233
  return showLabel();
14188
14234
  },
14235
+ get ["aria-label"]() {
14236
+ return `${props.label}: ${props.count}`;
14237
+ },
14189
14238
  get ["class"]() {
14190
14239
  return clsx(styles().queryStatusTag, !showLabel() && css`
14191
14240
  cursor: pointer;
@@ -14221,17 +14270,17 @@ var init_Devtools = __esm({
14221
14270
  }), _el$64);
14222
14271
  insert(_el$64, () => props.count);
14223
14272
  createRenderEffect((_p$) => {
14224
- var _v$30 = clsx(css`
14273
+ var _v$33 = clsx(css`
14225
14274
  width: ${tokens.size[1.5]};
14226
14275
  height: ${tokens.size[1.5]};
14227
14276
  border-radius: ${tokens.border.radius.full};
14228
14277
  background-color: ${tokens.colors[props.color][500]};
14229
- `, "tsqd-query-status-tag-dot"), _v$31 = clsx(styles().queryStatusCount, props.count > 0 && props.color !== "gray" && css`
14278
+ `, "tsqd-query-status-tag-dot"), _v$34 = clsx(styles().queryStatusCount, props.count > 0 && props.color !== "gray" && css`
14230
14279
  background-color: ${t2(colors[props.color][100], colors[props.color][900])};
14231
14280
  color: ${t2(colors[props.color][700], colors[props.color][300])};
14232
14281
  `, "tsqd-query-status-tag-count");
14233
- _v$30 !== _p$.e && className(_el$62, _p$.e = _v$30);
14234
- _v$31 !== _p$.t && className(_el$64, _p$.t = _v$31);
14282
+ _v$33 !== _p$.e && className(_el$62, _p$.e = _v$33);
14283
+ _v$34 !== _p$.t && className(_el$64, _p$.t = _v$34);
14235
14284
  return _p$;
14236
14285
  }, {
14237
14286
  e: void 0,
@@ -14432,14 +14481,14 @@ var init_Devtools = __esm({
14432
14481
  };
14433
14482
  insert(_el$91, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$93);
14434
14483
  createRenderEffect((_p$) => {
14435
- var _v$32 = clsx(css`
14484
+ var _v$35 = clsx(css`
14436
14485
  color: ${t2(colors.red[500], colors.red[400])};
14437
- `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$33 = queryStatus() === "pending", _v$34 = css`
14486
+ `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$36 = queryStatus() === "pending", _v$37 = css`
14438
14487
  background-color: ${t2(colors.red[500], colors.red[400])};
14439
14488
  `;
14440
- _v$32 !== _p$.e && className(_el$91, _p$.e = _v$32);
14441
- _v$33 !== _p$.t && (_el$91.disabled = _p$.t = _v$33);
14442
- _v$34 !== _p$.a && className(_el$92, _p$.a = _v$34);
14489
+ _v$35 !== _p$.e && className(_el$91, _p$.e = _v$35);
14490
+ _v$36 !== _p$.t && (_el$91.disabled = _p$.t = _v$36);
14491
+ _v$37 !== _p$.a && className(_el$92, _p$.a = _v$37);
14443
14492
  return _p$;
14444
14493
  }, {
14445
14494
  e: void 0,
@@ -14472,12 +14521,12 @@ var init_Devtools = __esm({
14472
14521
  }), null);
14473
14522
  insert(_el$94, createComponent(ChevronDown, {}), null);
14474
14523
  createRenderEffect((_p$) => {
14475
- var _v$35 = clsx(styles().actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$36 = css`
14524
+ var _v$38 = clsx(styles().actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$39 = css`
14476
14525
  background-color: ${tokens.colors.red[400]};
14477
- `, _v$37 = queryStatus() === "pending";
14478
- _v$35 !== _p$.e && className(_el$94, _p$.e = _v$35);
14479
- _v$36 !== _p$.t && className(_el$95, _p$.t = _v$36);
14480
- _v$37 !== _p$.a && (_el$97.disabled = _p$.a = _v$37);
14526
+ `, _v$40 = queryStatus() === "pending";
14527
+ _v$38 !== _p$.e && className(_el$94, _p$.e = _v$38);
14528
+ _v$39 !== _p$.t && className(_el$95, _p$.t = _v$39);
14529
+ _v$40 !== _p$.a && (_el$97.disabled = _p$.a = _v$40);
14481
14530
  return _p$;
14482
14531
  }, {
14483
14532
  e: void 0,
@@ -14535,19 +14584,19 @@ var init_Devtools = __esm({
14535
14584
  insert(_el$105, () => dataEditError() ? "Invalid Value" : "");
14536
14585
  _el$107.$$click = () => setDataMode("view");
14537
14586
  createRenderEffect((_p$) => {
14538
- var _v$38 = clsx(styles().devtoolsEditForm, "tsqd-query-details-data-editor"), _v$39 = styles().devtoolsEditTextarea, _v$40 = dataEditError(), _v$41 = styles().devtoolsEditFormActions, _v$42 = styles().devtoolsEditFormError, _v$43 = styles().devtoolsEditFormActionContainer, _v$44 = clsx(styles().devtoolsEditFormAction, css`
14587
+ var _v$41 = clsx(styles().devtoolsEditForm, "tsqd-query-details-data-editor"), _v$42 = styles().devtoolsEditTextarea, _v$43 = dataEditError(), _v$44 = styles().devtoolsEditFormActions, _v$45 = styles().devtoolsEditFormError, _v$46 = styles().devtoolsEditFormActionContainer, _v$47 = clsx(styles().devtoolsEditFormAction, css`
14539
14588
  color: ${t2(colors.gray[600], colors.gray[300])};
14540
- `), _v$45 = clsx(styles().devtoolsEditFormAction, css`
14589
+ `), _v$48 = clsx(styles().devtoolsEditFormAction, css`
14541
14590
  color: ${t2(colors.blue[600], colors.blue[400])};
14542
14591
  `);
14543
- _v$38 !== _p$.e && className(_el$102, _p$.e = _v$38);
14544
- _v$39 !== _p$.t && className(_el$103, _p$.t = _v$39);
14545
- _v$40 !== _p$.a && setAttribute(_el$103, "data-error", _p$.a = _v$40);
14546
- _v$41 !== _p$.o && className(_el$104, _p$.o = _v$41);
14547
- _v$42 !== _p$.i && className(_el$105, _p$.i = _v$42);
14548
- _v$43 !== _p$.n && className(_el$106, _p$.n = _v$43);
14549
- _v$44 !== _p$.s && className(_el$107, _p$.s = _v$44);
14550
- _v$45 !== _p$.h && className(_el$108, _p$.h = _v$45);
14592
+ _v$41 !== _p$.e && className(_el$102, _p$.e = _v$41);
14593
+ _v$42 !== _p$.t && className(_el$103, _p$.t = _v$42);
14594
+ _v$43 !== _p$.a && setAttribute(_el$103, "data-error", _p$.a = _v$43);
14595
+ _v$44 !== _p$.o && className(_el$104, _p$.o = _v$44);
14596
+ _v$45 !== _p$.i && className(_el$105, _p$.i = _v$45);
14597
+ _v$46 !== _p$.n && className(_el$106, _p$.n = _v$46);
14598
+ _v$47 !== _p$.s && className(_el$107, _p$.s = _v$47);
14599
+ _v$48 !== _p$.h && className(_el$108, _p$.h = _v$48);
14551
14600
  return _p$;
14552
14601
  }, {
14553
14602
  e: void 0,
@@ -14571,51 +14620,51 @@ var init_Devtools = __esm({
14571
14620
  }
14572
14621
  }));
14573
14622
  createRenderEffect((_p$) => {
14574
- var _v$46 = clsx(styles().detailsContainer, "tsqd-query-details-container"), _v$47 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$48 = clsx(styles().detailsBody, "tsqd-query-details-summary-container"), _v$49 = clsx(styles().queryDetailsStatus, getQueryStatusColors()), _v$50 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$51 = clsx(styles().actionsBody, "tsqd-query-details-actions-container"), _v$52 = clsx(css`
14623
+ var _v$49 = clsx(styles().detailsContainer, "tsqd-query-details-container"), _v$50 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$51 = clsx(styles().detailsBody, "tsqd-query-details-summary-container"), _v$52 = clsx(styles().queryDetailsStatus, getQueryStatusColors()), _v$53 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$54 = clsx(styles().actionsBody, "tsqd-query-details-actions-container"), _v$55 = clsx(css`
14575
14624
  color: ${t2(colors.blue[600], colors.blue[400])};
14576
- `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-refetch"), _v$53 = statusLabel() === "fetching", _v$54 = css`
14625
+ `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-refetch"), _v$56 = statusLabel() === "fetching", _v$57 = css`
14577
14626
  background-color: ${t2(colors.blue[600], colors.blue[400])};
14578
- `, _v$55 = clsx(css`
14627
+ `, _v$58 = clsx(css`
14579
14628
  color: ${t2(colors.yellow[600], colors.yellow[400])};
14580
- `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-invalidate"), _v$56 = queryStatus() === "pending", _v$57 = css`
14629
+ `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-invalidate"), _v$59 = queryStatus() === "pending", _v$60 = css`
14581
14630
  background-color: ${t2(colors.yellow[600], colors.yellow[400])};
14582
- `, _v$58 = clsx(css`
14631
+ `, _v$61 = clsx(css`
14583
14632
  color: ${t2(colors.gray[600], colors.gray[300])};
14584
- `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-reset"), _v$59 = queryStatus() === "pending", _v$60 = css`
14633
+ `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-reset"), _v$62 = queryStatus() === "pending", _v$63 = css`
14585
14634
  background-color: ${t2(colors.gray[600], colors.gray[400])};
14586
- `, _v$61 = clsx(css`
14635
+ `, _v$64 = clsx(css`
14587
14636
  color: ${t2(colors.pink[500], colors.pink[400])};
14588
- `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-remove"), _v$62 = statusLabel() === "fetching", _v$63 = css`
14637
+ `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-remove"), _v$65 = statusLabel() === "fetching", _v$66 = css`
14589
14638
  background-color: ${t2(colors.pink[500], colors.pink[400])};
14590
- `, _v$64 = clsx(css`
14639
+ `, _v$67 = clsx(css`
14591
14640
  color: ${t2(colors.cyan[500], colors.cyan[400])};
14592
- `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$65 = restoringLoading(), _v$66 = css`
14641
+ `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$68 = restoringLoading(), _v$69 = css`
14593
14642
  background-color: ${t2(colors.cyan[500], colors.cyan[400])};
14594
- `, _v$67 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$68 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$69 = tokens.size[2];
14595
- _v$46 !== _p$.e && className(_el$65, _p$.e = _v$46);
14596
- _v$47 !== _p$.t && className(_el$66, _p$.t = _v$47);
14597
- _v$48 !== _p$.a && className(_el$67, _p$.a = _v$48);
14598
- _v$49 !== _p$.o && className(_el$71, _p$.o = _v$49);
14599
- _v$50 !== _p$.i && className(_el$78, _p$.i = _v$50);
14600
- _v$51 !== _p$.n && className(_el$79, _p$.n = _v$51);
14601
- _v$52 !== _p$.s && className(_el$80, _p$.s = _v$52);
14602
- _v$53 !== _p$.h && (_el$80.disabled = _p$.h = _v$53);
14603
- _v$54 !== _p$.r && className(_el$81, _p$.r = _v$54);
14604
- _v$55 !== _p$.d && className(_el$82, _p$.d = _v$55);
14605
- _v$56 !== _p$.l && (_el$82.disabled = _p$.l = _v$56);
14606
- _v$57 !== _p$.u && className(_el$83, _p$.u = _v$57);
14607
- _v$58 !== _p$.c && className(_el$84, _p$.c = _v$58);
14608
- _v$59 !== _p$.w && (_el$84.disabled = _p$.w = _v$59);
14609
- _v$60 !== _p$.m && className(_el$85, _p$.m = _v$60);
14610
- _v$61 !== _p$.f && className(_el$86, _p$.f = _v$61);
14611
- _v$62 !== _p$.y && (_el$86.disabled = _p$.y = _v$62);
14612
- _v$63 !== _p$.g && className(_el$87, _p$.g = _v$63);
14613
- _v$64 !== _p$.p && className(_el$88, _p$.p = _v$64);
14614
- _v$65 !== _p$.b && (_el$88.disabled = _p$.b = _v$65);
14615
- _v$66 !== _p$.T && className(_el$89, _p$.T = _v$66);
14616
- _v$67 !== _p$.A && className(_el$99, _p$.A = _v$67);
14617
- _v$68 !== _p$.O && className(_el$109, _p$.O = _v$68);
14618
- _v$69 !== _p$.I && ((_p$.I = _v$69) != null ? _el$110.style.setProperty("padding", _v$69) : _el$110.style.removeProperty("padding"));
14643
+ `, _v$70 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$71 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$72 = tokens.size[2];
14644
+ _v$49 !== _p$.e && className(_el$65, _p$.e = _v$49);
14645
+ _v$50 !== _p$.t && className(_el$66, _p$.t = _v$50);
14646
+ _v$51 !== _p$.a && className(_el$67, _p$.a = _v$51);
14647
+ _v$52 !== _p$.o && className(_el$71, _p$.o = _v$52);
14648
+ _v$53 !== _p$.i && className(_el$78, _p$.i = _v$53);
14649
+ _v$54 !== _p$.n && className(_el$79, _p$.n = _v$54);
14650
+ _v$55 !== _p$.s && className(_el$80, _p$.s = _v$55);
14651
+ _v$56 !== _p$.h && (_el$80.disabled = _p$.h = _v$56);
14652
+ _v$57 !== _p$.r && className(_el$81, _p$.r = _v$57);
14653
+ _v$58 !== _p$.d && className(_el$82, _p$.d = _v$58);
14654
+ _v$59 !== _p$.l && (_el$82.disabled = _p$.l = _v$59);
14655
+ _v$60 !== _p$.u && className(_el$83, _p$.u = _v$60);
14656
+ _v$61 !== _p$.c && className(_el$84, _p$.c = _v$61);
14657
+ _v$62 !== _p$.w && (_el$84.disabled = _p$.w = _v$62);
14658
+ _v$63 !== _p$.m && className(_el$85, _p$.m = _v$63);
14659
+ _v$64 !== _p$.f && className(_el$86, _p$.f = _v$64);
14660
+ _v$65 !== _p$.y && (_el$86.disabled = _p$.y = _v$65);
14661
+ _v$66 !== _p$.g && className(_el$87, _p$.g = _v$66);
14662
+ _v$67 !== _p$.p && className(_el$88, _p$.p = _v$67);
14663
+ _v$68 !== _p$.b && (_el$88.disabled = _p$.b = _v$68);
14664
+ _v$69 !== _p$.T && className(_el$89, _p$.T = _v$69);
14665
+ _v$70 !== _p$.A && className(_el$99, _p$.A = _v$70);
14666
+ _v$71 !== _p$.O && className(_el$109, _p$.O = _v$71);
14667
+ _v$72 !== _p$.I && ((_p$.I = _v$72) != null ? _el$110.style.setProperty("padding", _v$72) : _el$110.style.removeProperty("padding"));
14619
14668
  return _p$;
14620
14669
  }, {
14621
14670
  e: void 0,
@@ -14749,19 +14798,19 @@ var init_Devtools = __esm({
14749
14798
  }
14750
14799
  }));
14751
14800
  createRenderEffect((_p$) => {
14752
- var _v$70 = clsx(styles().detailsContainer, "tsqd-query-details-container"), _v$71 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$72 = clsx(styles().detailsBody, "tsqd-query-details-summary-container"), _v$73 = clsx(styles().queryDetailsStatus, getQueryStatusColors()), _v$74 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$75 = tokens.size[2], _v$76 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$77 = tokens.size[2], _v$78 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$79 = tokens.size[2], _v$80 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$81 = tokens.size[2];
14753
- _v$70 !== _p$.e && className(_el$112, _p$.e = _v$70);
14754
- _v$71 !== _p$.t && className(_el$113, _p$.t = _v$71);
14755
- _v$72 !== _p$.a && className(_el$114, _p$.a = _v$72);
14756
- _v$73 !== _p$.o && className(_el$118, _p$.o = _v$73);
14757
- _v$74 !== _p$.i && className(_el$122, _p$.i = _v$74);
14758
- _v$75 !== _p$.n && ((_p$.n = _v$75) != null ? _el$123.style.setProperty("padding", _v$75) : _el$123.style.removeProperty("padding"));
14759
- _v$76 !== _p$.s && className(_el$124, _p$.s = _v$76);
14760
- _v$77 !== _p$.h && ((_p$.h = _v$77) != null ? _el$125.style.setProperty("padding", _v$77) : _el$125.style.removeProperty("padding"));
14761
- _v$78 !== _p$.r && className(_el$126, _p$.r = _v$78);
14762
- _v$79 !== _p$.d && ((_p$.d = _v$79) != null ? _el$127.style.setProperty("padding", _v$79) : _el$127.style.removeProperty("padding"));
14763
- _v$80 !== _p$.l && className(_el$128, _p$.l = _v$80);
14764
- _v$81 !== _p$.u && ((_p$.u = _v$81) != null ? _el$129.style.setProperty("padding", _v$81) : _el$129.style.removeProperty("padding"));
14801
+ var _v$73 = clsx(styles().detailsContainer, "tsqd-query-details-container"), _v$74 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$75 = clsx(styles().detailsBody, "tsqd-query-details-summary-container"), _v$76 = clsx(styles().queryDetailsStatus, getQueryStatusColors()), _v$77 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$78 = tokens.size[2], _v$79 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$80 = tokens.size[2], _v$81 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$82 = tokens.size[2], _v$83 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$84 = tokens.size[2];
14802
+ _v$73 !== _p$.e && className(_el$112, _p$.e = _v$73);
14803
+ _v$74 !== _p$.t && className(_el$113, _p$.t = _v$74);
14804
+ _v$75 !== _p$.a && className(_el$114, _p$.a = _v$75);
14805
+ _v$76 !== _p$.o && className(_el$118, _p$.o = _v$76);
14806
+ _v$77 !== _p$.i && className(_el$122, _p$.i = _v$77);
14807
+ _v$78 !== _p$.n && ((_p$.n = _v$78) != null ? _el$123.style.setProperty("padding", _v$78) : _el$123.style.removeProperty("padding"));
14808
+ _v$79 !== _p$.s && className(_el$124, _p$.s = _v$79);
14809
+ _v$80 !== _p$.h && ((_p$.h = _v$80) != null ? _el$125.style.setProperty("padding", _v$80) : _el$125.style.removeProperty("padding"));
14810
+ _v$81 !== _p$.r && className(_el$126, _p$.r = _v$81);
14811
+ _v$82 !== _p$.d && ((_p$.d = _v$82) != null ? _el$127.style.setProperty("padding", _v$82) : _el$127.style.removeProperty("padding"));
14812
+ _v$83 !== _p$.l && className(_el$128, _p$.l = _v$83);
14813
+ _v$84 !== _p$.u && ((_p$.u = _v$84) != null ? _el$129.style.setProperty("padding", _v$84) : _el$129.style.removeProperty("padding"));
14765
14814
  return _p$;
14766
14815
  }, {
14767
14816
  e: void 0,
@@ -15166,6 +15215,15 @@ var init_Devtools = __esm({
15166
15215
  &:hover {
15167
15216
  background-color: ${colors.purple[400]}${t2("", alpha[90])};
15168
15217
  }
15218
+ &:focus {
15219
+ outline: none;
15220
+ background-color: ${colors.purple[400]}${t2("", alpha[90])};
15221
+ }
15222
+ &:focus-visible {
15223
+ outline: 2px solid ${colors.blue[800]};
15224
+ outline-offset: -2px;
15225
+ background-color: ${colors.purple[400]}${t2("", alpha[90])};
15226
+ }
15169
15227
  z-index: 4;
15170
15228
  `,
15171
15229
  "dragHandle-position-top": css`
@@ -15918,7 +15976,7 @@ var init_Devtools = __esm({
15918
15976
  };
15919
15977
  lightStyles2 = (css) => stylesFactory2("light", css);
15920
15978
  darkStyles2 = (css) => stylesFactory2("dark", css);
15921
- delegateEvents(["click", "mousedown", "input"]);
15979
+ delegateEvents(["click", "mousedown", "keydown", "input"]);
15922
15980
  }
15923
15981
  });
15924
15982
 
package/build/index.js CHANGED
@@ -80,7 +80,7 @@ var TanstackQueryDevtools = class {
80
80
  if (this.#Component) {
81
81
  Devtools = this.#Component;
82
82
  } else {
83
- Devtools = lazy(() => import('./DevtoolsComponent/Q7LWSL4U.js'));
83
+ Devtools = lazy(() => import('./DevtoolsComponent/WDYDFRGG.js'));
84
84
  this.#Component = Devtools;
85
85
  }
86
86
  setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
@@ -220,7 +220,7 @@ var TanstackQueryDevtoolsPanel = class {
220
220
  if (this.#Component) {
221
221
  Devtools = this.#Component;
222
222
  } else {
223
- Devtools = lazy(() => import('./DevtoolsPanelComponent/VLTTJS3N.js'));
223
+ Devtools = lazy(() => import('./DevtoolsPanelComponent/2SSKDMRQ.js'));
224
224
  this.#Component = Devtools;
225
225
  }
226
226
  setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@tanstack/query-devtools",
3
- "version": "5.91.1",
3
+ "version": "5.92.0",
4
4
  "description": "Developer tools to interact with and visualize the TanStack Query cache",
5
5
  "author": "tannerlinsley",
6
6
  "license": "MIT",
7
7
  "repository": {
8
8
  "type": "git",
9
- "url": "https://github.com/TanStack/query.git",
9
+ "url": "git+https://github.com/TanStack/query.git",
10
10
  "directory": "packages/query-devtools"
11
11
  },
12
12
  "homepage": "https://tanstack.com/query",
@@ -57,7 +57,7 @@
57
57
  "superjson": "^2.2.2",
58
58
  "tsup-preset-solid": "^2.2.0",
59
59
  "vite-plugin-solid": "^2.11.6",
60
- "@tanstack/query-core": "5.90.10"
60
+ "@tanstack/query-core": "5.90.14"
61
61
  },
62
62
  "scripts": {
63
63
  "clean": "premove ./build ./coverage ./dist-ts",