@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/dev.cjs CHANGED
@@ -11950,7 +11950,7 @@ var init_QueryDevtoolsContext = __esm({
11950
11950
  });
11951
11951
 
11952
11952
  // src/contexts/PiPContext.tsx
11953
- var PiPContext, PiPProvider, usePiPWindow;
11953
+ var PipOpenError, PiPContext, PiPProvider, usePiPWindow;
11954
11954
  var init_PiPContext = __esm({
11955
11955
  "src/contexts/PiPContext.tsx"() {
11956
11956
  init_web();
@@ -11958,6 +11958,8 @@ var init_PiPContext = __esm({
11958
11958
  init_web();
11959
11959
  init_constants();
11960
11960
  init_QueryDevtoolsContext();
11961
+ PipOpenError = class extends Error {
11962
+ };
11961
11963
  PiPContext = createContext(void 0);
11962
11964
  PiPProvider = (props) => {
11963
11965
  const [pipWindow, setPipWindow] = createSignal(null);
@@ -11974,7 +11976,7 @@ var init_PiPContext = __esm({
11974
11976
  }
11975
11977
  const pip = window.open("", "TSQD-Devtools-Panel", `width=${width},height=${height},popup`);
11976
11978
  if (!pip) {
11977
- throw new Error("Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode.");
11979
+ throw new PipOpenError("Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode.");
11978
11980
  }
11979
11981
  pip.document.head.innerHTML = "";
11980
11982
  pip.document.body.innerHTML = "";
@@ -12018,7 +12020,17 @@ var init_PiPContext = __esm({
12018
12020
  createEffect(() => {
12019
12021
  const pip_open = props.localStore.pip_open ?? "false";
12020
12022
  if (pip_open === "true" && !props.disabled) {
12021
- requestPipWindow(Number(window.innerWidth), Number(props.localStore.height || PIP_DEFAULT_HEIGHT));
12023
+ try {
12024
+ requestPipWindow(Number(window.innerWidth), Number(props.localStore.height || PIP_DEFAULT_HEIGHT));
12025
+ } catch (error) {
12026
+ if (error instanceof PipOpenError) {
12027
+ console.error(error.message);
12028
+ props.setLocalStore("pip_open", "false");
12029
+ props.setLocalStore("open", "false");
12030
+ return;
12031
+ }
12032
+ throw error;
12033
+ }
12022
12034
  }
12023
12035
  });
12024
12036
  createEffect(() => {
@@ -12827,9 +12839,9 @@ var init_Devtools = __esm({
12827
12839
  init_constants();
12828
12840
  _tmpl$25 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button type=button aria-label="Open Tanstack query devtools"class=tsqd-open-btn>`);
12829
12841
  _tmpl$26 = /* @__PURE__ */ template(`<div>`);
12830
- _tmpl$33 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div></div><button aria-label="Close tanstack query devtools">`);
12831
- _tmpl$43 = /* @__PURE__ */ template(`<select name=tsqd-queries-filter-sort>`);
12832
- _tmpl$53 = /* @__PURE__ */ template(`<select name=tsqd-mutations-filter-sort>`);
12842
+ _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">`);
12843
+ _tmpl$43 = /* @__PURE__ */ template(`<select name=tsqd-queries-filter-sort aria-label="Sort queries by">`);
12844
+ _tmpl$53 = /* @__PURE__ */ template(`<select name=tsqd-mutations-filter-sort aria-label="Sort mutations by">`);
12833
12845
  _tmpl$63 = /* @__PURE__ */ template(`<span>Asc`);
12834
12846
  _tmpl$73 = /* @__PURE__ */ template(`<span>Desc`);
12835
12847
  _tmpl$83 = /* @__PURE__ */ template(`<button aria-label="Open in picture-in-picture mode"title="Open in picture-in-picture mode">`);
@@ -12850,19 +12862,19 @@ var init_Devtools = __esm({
12850
12862
  _tmpl$212 = /* @__PURE__ */ template(`<div><div class=tsqd-mutations-container>`);
12851
12863
  _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>`);
12852
12864
  _tmpl$232 = /* @__PURE__ */ template(`<option>Sort by `);
12853
- _tmpl$242 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator>disabled`);
12854
- _tmpl$252 = /* @__PURE__ */ template(`<div class=tsqd-query-static-indicator>static`);
12865
+ _tmpl$242 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator aria-hidden=true>disabled`);
12866
+ _tmpl$252 = /* @__PURE__ */ template(`<div class=tsqd-query-static-indicator aria-hidden=true>static`);
12855
12867
  _tmpl$262 = /* @__PURE__ */ template(`<button><div></div><code class=tsqd-query-hash>`);
12856
12868
  _tmpl$27 = /* @__PURE__ */ template(`<div role=tooltip id=tsqd-status-tooltip>`);
12857
12869
  _tmpl$28 = /* @__PURE__ */ template(`<span>`);
12858
- _tmpl$29 = /* @__PURE__ */ template(`<button><span></span><span>`);
12859
- _tmpl$30 = /* @__PURE__ */ template(`<button><span></span> Error`);
12860
- _tmpl$31 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value=""disabled selected>`);
12870
+ _tmpl$29 = /* @__PURE__ */ template(`<button><span aria-hidden=true></span><span>`);
12871
+ _tmpl$30 = /* @__PURE__ */ template(`<button><span aria-hidden=true></span> Error`);
12872
+ _tmpl$31 = /* @__PURE__ */ template(`<div><span aria-hidden=true></span>Trigger Error<select aria-label="Select error type to trigger"><option value=""disabled selected>`);
12861
12873
  _tmpl$322 = /* @__PURE__ */ template(`<div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer">`);
12862
- _tmpl$332 = /* @__PURE__ */ template(`<form><textarea name=data></textarea><div><span></span><div><button type=button>Cancel</button><button>Save`);
12863
- _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">`);
12874
+ _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`);
12875
+ _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">`);
12864
12876
  _tmpl$35 = /* @__PURE__ */ template(`<option>`);
12865
- _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">`);
12877
+ _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">`);
12866
12878
  [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
12867
12879
  [selectedMutationId, setSelectedMutationId] = createSignal(null);
12868
12880
  [panelWidth, setPanelWidth] = createSignal(0);
@@ -13118,6 +13130,10 @@ var init_Devtools = __esm({
13118
13130
  const styles = createMemo(() => {
13119
13131
  return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
13120
13132
  });
13133
+ let closeBtnRef;
13134
+ onMount(() => {
13135
+ closeBtnRef.focus();
13136
+ });
13121
13137
  const [isResizing, setIsResizing] = createSignal(false);
13122
13138
  const position = createMemo(() => props.localStore.position || useQueryDevtoolsContext().position || POSITION);
13123
13139
  const handleDragStart = (event) => {
@@ -13161,7 +13177,7 @@ var init_Devtools = __esm({
13161
13177
  setIsResizing(false);
13162
13178
  }
13163
13179
  document.removeEventListener("mousemove", runDrag, false);
13164
- document.removeEventListener("mouseUp", unsubscribe, false);
13180
+ document.removeEventListener("mouseup", unsubscribe, false);
13165
13181
  };
13166
13182
  document.addEventListener("mousemove", runDrag, false);
13167
13183
  document.addEventListener("mouseup", unsubscribe, false);
@@ -13222,8 +13238,32 @@ var init_Devtools = __esm({
13222
13238
  var _el$7 = _tmpl$33(), _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
13223
13239
  var _ref$3 = panelRef;
13224
13240
  typeof _ref$3 === "function" ? use(_ref$3, _el$7) : panelRef = _el$7;
13241
+ _el$8.$$keydown = (e2) => {
13242
+ const step = 10;
13243
+ const minHeight = convertRemToPixels(3.5);
13244
+ const minWidth = convertRemToPixels(12);
13245
+ if (position() === "top" || position() === "bottom") {
13246
+ if (e2.key === "ArrowUp" || e2.key === "ArrowDown") {
13247
+ e2.preventDefault();
13248
+ const currentHeight = Number(props.localStore.height || DEFAULT_HEIGHT);
13249
+ const delta = position() === "bottom" ? e2.key === "ArrowUp" ? step : -10 : e2.key === "ArrowDown" ? step : -10;
13250
+ const newHeight = Math.max(minHeight, currentHeight + delta);
13251
+ props.setLocalStore("height", String(newHeight));
13252
+ }
13253
+ } else {
13254
+ if (e2.key === "ArrowLeft" || e2.key === "ArrowRight") {
13255
+ e2.preventDefault();
13256
+ const currentWidth = Number(props.localStore.width || DEFAULT_WIDTH);
13257
+ const delta = position() === "right" ? e2.key === "ArrowLeft" ? step : -10 : e2.key === "ArrowRight" ? step : -10;
13258
+ const newWidth = Math.max(minWidth, currentWidth + delta);
13259
+ props.setLocalStore("width", String(newWidth));
13260
+ }
13261
+ }
13262
+ };
13225
13263
  _el$8.$$mousedown = handleDragStart;
13226
13264
  _el$9.$$click = () => props.setLocalStore("open", "false");
13265
+ var _ref$4 = closeBtnRef;
13266
+ typeof _ref$4 === "function" ? use(_ref$4, _el$9) : closeBtnRef = _el$9;
13227
13267
  insert(_el$9, createComponent(ChevronDown, {}));
13228
13268
  insert(_el$7, createComponent(ContentView, props), null);
13229
13269
  createRenderEffect((_p$) => {
@@ -13231,19 +13271,25 @@ var init_Devtools = __esm({
13231
13271
  [css`
13232
13272
  min-width: min-content;
13233
13273
  `]: panelWidth() < thirdBreakpoint && (position() === "right" || position() === "left")
13234
- }, "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");
13274
+ }, "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");
13235
13275
  _v$ !== _p$.e && className(_el$7, _p$.e = _v$);
13236
13276
  _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$7.style.setProperty("height", _v$2) : _el$7.style.removeProperty("height"));
13237
13277
  _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$7.style.setProperty("width", _v$3) : _el$7.style.removeProperty("width"));
13238
- _v$4 !== _p$.o && className(_el$8, _p$.o = _v$4);
13239
- _v$5 !== _p$.i && className(_el$9, _p$.i = _v$5);
13278
+ _v$4 !== _p$.o && setAttribute(_el$8, "aria-orientation", _p$.o = _v$4);
13279
+ _v$5 !== _p$.i && setAttribute(_el$8, "aria-valuemin", _p$.i = _v$5);
13280
+ _v$6 !== _p$.n && setAttribute(_el$8, "aria-valuenow", _p$.n = _v$6);
13281
+ _v$7 !== _p$.s && className(_el$8, _p$.s = _v$7);
13282
+ _v$8 !== _p$.h && className(_el$9, _p$.h = _v$8);
13240
13283
  return _p$;
13241
13284
  }, {
13242
13285
  e: void 0,
13243
13286
  t: void 0,
13244
13287
  a: void 0,
13245
13288
  o: void 0,
13246
- i: void 0
13289
+ i: void 0,
13290
+ n: void 0,
13291
+ s: void 0,
13292
+ h: void 0
13247
13293
  });
13248
13294
  return _el$7;
13249
13295
  })();
@@ -13308,8 +13354,8 @@ var init_Devtools = __esm({
13308
13354
  };
13309
13355
  return [(() => {
13310
13356
  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;
13311
- var _ref$4 = containerRef;
13312
- typeof _ref$4 === "function" ? use(_ref$4, _el$0) : containerRef = _el$0;
13357
+ var _ref$5 = containerRef;
13358
+ typeof _ref$5 === "function" ? use(_ref$5, _el$0) : containerRef = _el$0;
13313
13359
  _el$11.$$click = () => {
13314
13360
  if (!pip().pipWindow && !props.showPanelViewOnly) {
13315
13361
  props.setLocalStore("open", "false");
@@ -13328,6 +13374,7 @@ var init_Devtools = __esm({
13328
13374
  get value() {
13329
13375
  return selectedView();
13330
13376
  },
13377
+ "aria-label": "Toggle between queries and mutations view",
13331
13378
  onChange: (value) => {
13332
13379
  setSelectedView(value);
13333
13380
  setSelectedQueryHash(null);
@@ -13674,12 +13721,12 @@ var init_Devtools = __esm({
13674
13721
  get ["class"]() {
13675
13722
  return clsx(styles().settingsMenu, "tsqd-settings-submenu");
13676
13723
  },
13677
- "aria-label": "Hide disabled queries setting",
13678
13724
  get children() {
13679
13725
  return createComponent(dropdown_menu_exports.RadioGroup, {
13680
13726
  get value() {
13681
13727
  return props.localStore.hideDisabledQueries;
13682
13728
  },
13729
+ "aria-label": "Hide disabled queries setting",
13683
13730
  onChange: (value) => props.setLocalStore("hideDisabledQueries", value),
13684
13731
  get children() {
13685
13732
  return [createComponent(dropdown_menu_exports.RadioItem, {
@@ -13770,33 +13817,33 @@ var init_Devtools = __esm({
13770
13817
  }
13771
13818
  }), null);
13772
13819
  createRenderEffect((_p$) => {
13773
- var _v$6 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && css`
13820
+ var _v$9 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && css`
13774
13821
  height: 50%;
13775
13822
  max-height: 50%;
13776
13823
  `, panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && css`
13777
13824
  height: 100%;
13778
13825
  max-height: 100%;
13779
- `, "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"}`;
13780
- _v$6 !== _p$.e && className(_el$0, _p$.e = _v$6);
13781
- _v$7 !== _p$.t && className(_el$1, _p$.t = _v$7);
13782
- _v$8 !== _p$.a && className(_el$10, _p$.a = _v$8);
13783
- _v$9 !== _p$.o && className(_el$11, _p$.o = _v$9);
13784
- _v$0 !== _p$.i && className(_el$12, _p$.i = _v$0);
13785
- _v$1 !== _p$.n && className(_el$13, _p$.n = _v$1);
13786
- _v$10 !== _p$.s && className(_el$15, _p$.s = _v$10);
13787
- _v$11 !== _p$.h && className(_el$16, _p$.h = _v$11);
13788
- _v$12 !== _p$.r && className(_el$17, _p$.r = _v$12);
13789
- _v$13 !== _p$.d && className(_el$18, _p$.d = _v$13);
13790
- _v$14 !== _p$.l && className(_el$19, _p$.l = _v$14);
13791
- _v$15 !== _p$.u && setAttribute(_el$22, "aria-label", _p$.u = _v$15);
13792
- _v$16 !== _p$.c && setAttribute(_el$22, "aria-pressed", _p$.c = _v$16);
13793
- _v$17 !== _p$.w && className(_el$25, _p$.w = _v$17);
13794
- _v$18 !== _p$.m && className(_el$26, _p$.m = _v$18);
13795
- _v$19 !== _p$.f && setAttribute(_el$26, "title", _p$.f = _v$19);
13796
- _v$20 !== _p$.y && className(_el$27, _p$.y = _v$20);
13797
- _v$21 !== _p$.g && setAttribute(_el$27, "aria-label", _p$.g = _v$21);
13798
- _v$22 !== _p$.p && setAttribute(_el$27, "aria-pressed", _p$.p = _v$22);
13799
- _v$23 !== _p$.b && setAttribute(_el$27, "title", _p$.b = _v$23);
13826
+ `, "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"}`;
13827
+ _v$9 !== _p$.e && className(_el$0, _p$.e = _v$9);
13828
+ _v$0 !== _p$.t && className(_el$1, _p$.t = _v$0);
13829
+ _v$1 !== _p$.a && className(_el$10, _p$.a = _v$1);
13830
+ _v$10 !== _p$.o && className(_el$11, _p$.o = _v$10);
13831
+ _v$11 !== _p$.i && className(_el$12, _p$.i = _v$11);
13832
+ _v$12 !== _p$.n && className(_el$13, _p$.n = _v$12);
13833
+ _v$13 !== _p$.s && className(_el$15, _p$.s = _v$13);
13834
+ _v$14 !== _p$.h && className(_el$16, _p$.h = _v$14);
13835
+ _v$15 !== _p$.r && className(_el$17, _p$.r = _v$15);
13836
+ _v$16 !== _p$.d && className(_el$18, _p$.d = _v$16);
13837
+ _v$17 !== _p$.l && className(_el$19, _p$.l = _v$17);
13838
+ _v$18 !== _p$.u && setAttribute(_el$22, "aria-label", _p$.u = _v$18);
13839
+ _v$19 !== _p$.c && setAttribute(_el$22, "aria-pressed", _p$.c = _v$19);
13840
+ _v$20 !== _p$.w && className(_el$25, _p$.w = _v$20);
13841
+ _v$21 !== _p$.m && className(_el$26, _p$.m = _v$21);
13842
+ _v$22 !== _p$.f && setAttribute(_el$26, "title", _p$.f = _v$22);
13843
+ _v$23 !== _p$.y && className(_el$27, _p$.y = _v$23);
13844
+ _v$24 !== _p$.g && setAttribute(_el$27, "aria-label", _p$.g = _v$24);
13845
+ _v$25 !== _p$.p && setAttribute(_el$27, "aria-pressed", _p$.p = _v$25);
13846
+ _v$26 !== _p$.b && setAttribute(_el$27, "title", _p$.b = _v$26);
13800
13847
  return _p$;
13801
13848
  }, {
13802
13849
  e: void 0,
@@ -13909,10 +13956,10 @@ var init_Devtools = __esm({
13909
13956
  }
13910
13957
  }), null);
13911
13958
  createRenderEffect((_p$) => {
13912
- 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");
13913
- _v$24 !== _p$.e && className(_el$50, _p$.e = _v$24);
13914
- _v$25 !== _p$.t && setAttribute(_el$50, "aria-label", _p$.t = _v$25);
13915
- _v$26 !== _p$.a && className(_el$51, _p$.a = _v$26);
13959
+ 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");
13960
+ _v$27 !== _p$.e && className(_el$50, _p$.e = _v$27);
13961
+ _v$28 !== _p$.t && setAttribute(_el$50, "aria-label", _p$.t = _v$28);
13962
+ _v$29 !== _p$.a && className(_el$51, _p$.a = _v$29);
13916
13963
  return _p$;
13917
13964
  }, {
13918
13965
  e: void 0,
@@ -14020,10 +14067,10 @@ var init_Devtools = __esm({
14020
14067
  }), null);
14021
14068
  insert(_el$57, () => new Date(props.mutation.state.submittedAt).toLocaleString(), null);
14022
14069
  createRenderEffect((_p$) => {
14023
- 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");
14024
- _v$27 !== _p$.e && className(_el$55, _p$.e = _v$27);
14025
- _v$28 !== _p$.t && setAttribute(_el$55, "aria-label", _p$.t = _v$28);
14026
- _v$29 !== _p$.a && className(_el$56, _p$.a = _v$29);
14070
+ 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");
14071
+ _v$30 !== _p$.e && className(_el$55, _p$.e = _v$30);
14072
+ _v$31 !== _p$.t && setAttribute(_el$55, "aria-label", _p$.t = _v$31);
14073
+ _v$32 !== _p$.a && className(_el$56, _p$.a = _v$32);
14027
14074
  return _p$;
14028
14075
  }, {
14029
14076
  e: void 0,
@@ -14175,8 +14222,8 @@ var init_Devtools = __esm({
14175
14222
  });
14176
14223
  return (() => {
14177
14224
  var _el$60 = _tmpl$29(), _el$62 = _el$60.firstChild, _el$64 = _el$62.nextSibling;
14178
- var _ref$5 = tagRef;
14179
- typeof _ref$5 === "function" ? use(_ref$5, _el$60) : tagRef = _el$60;
14225
+ var _ref$6 = tagRef;
14226
+ typeof _ref$6 === "function" ? use(_ref$6, _el$60) : tagRef = _el$60;
14180
14227
  _el$60.addEventListener("mouseleave", () => {
14181
14228
  setMouseOver(false);
14182
14229
  setFocused(false);
@@ -14188,6 +14235,9 @@ var init_Devtools = __esm({
14188
14235
  get disabled() {
14189
14236
  return showLabel();
14190
14237
  },
14238
+ get ["aria-label"]() {
14239
+ return `${props.label}: ${props.count}`;
14240
+ },
14191
14241
  get ["class"]() {
14192
14242
  return clsx(styles().queryStatusTag, !showLabel() && css`
14193
14243
  cursor: pointer;
@@ -14223,17 +14273,17 @@ var init_Devtools = __esm({
14223
14273
  }), _el$64);
14224
14274
  insert(_el$64, () => props.count);
14225
14275
  createRenderEffect((_p$) => {
14226
- var _v$30 = clsx(css`
14276
+ var _v$33 = clsx(css`
14227
14277
  width: ${tokens.size[1.5]};
14228
14278
  height: ${tokens.size[1.5]};
14229
14279
  border-radius: ${tokens.border.radius.full};
14230
14280
  background-color: ${tokens.colors[props.color][500]};
14231
- `, "tsqd-query-status-tag-dot"), _v$31 = clsx(styles().queryStatusCount, props.count > 0 && props.color !== "gray" && css`
14281
+ `, "tsqd-query-status-tag-dot"), _v$34 = clsx(styles().queryStatusCount, props.count > 0 && props.color !== "gray" && css`
14232
14282
  background-color: ${t2(colors[props.color][100], colors[props.color][900])};
14233
14283
  color: ${t2(colors[props.color][700], colors[props.color][300])};
14234
14284
  `, "tsqd-query-status-tag-count");
14235
- _v$30 !== _p$.e && className(_el$62, _p$.e = _v$30);
14236
- _v$31 !== _p$.t && className(_el$64, _p$.t = _v$31);
14285
+ _v$33 !== _p$.e && className(_el$62, _p$.e = _v$33);
14286
+ _v$34 !== _p$.t && className(_el$64, _p$.t = _v$34);
14237
14287
  return _p$;
14238
14288
  }, {
14239
14289
  e: void 0,
@@ -14434,14 +14484,14 @@ var init_Devtools = __esm({
14434
14484
  };
14435
14485
  insert(_el$91, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$93);
14436
14486
  createRenderEffect((_p$) => {
14437
- var _v$32 = clsx(css`
14487
+ var _v$35 = clsx(css`
14438
14488
  color: ${t2(colors.red[500], colors.red[400])};
14439
- `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$33 = queryStatus() === "pending", _v$34 = css`
14489
+ `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$36 = queryStatus() === "pending", _v$37 = css`
14440
14490
  background-color: ${t2(colors.red[500], colors.red[400])};
14441
14491
  `;
14442
- _v$32 !== _p$.e && className(_el$91, _p$.e = _v$32);
14443
- _v$33 !== _p$.t && (_el$91.disabled = _p$.t = _v$33);
14444
- _v$34 !== _p$.a && className(_el$92, _p$.a = _v$34);
14492
+ _v$35 !== _p$.e && className(_el$91, _p$.e = _v$35);
14493
+ _v$36 !== _p$.t && (_el$91.disabled = _p$.t = _v$36);
14494
+ _v$37 !== _p$.a && className(_el$92, _p$.a = _v$37);
14445
14495
  return _p$;
14446
14496
  }, {
14447
14497
  e: void 0,
@@ -14474,12 +14524,12 @@ var init_Devtools = __esm({
14474
14524
  }), null);
14475
14525
  insert(_el$94, createComponent(ChevronDown, {}), null);
14476
14526
  createRenderEffect((_p$) => {
14477
- var _v$35 = clsx(styles().actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$36 = css`
14527
+ var _v$38 = clsx(styles().actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$39 = css`
14478
14528
  background-color: ${tokens.colors.red[400]};
14479
- `, _v$37 = queryStatus() === "pending";
14480
- _v$35 !== _p$.e && className(_el$94, _p$.e = _v$35);
14481
- _v$36 !== _p$.t && className(_el$95, _p$.t = _v$36);
14482
- _v$37 !== _p$.a && (_el$97.disabled = _p$.a = _v$37);
14529
+ `, _v$40 = queryStatus() === "pending";
14530
+ _v$38 !== _p$.e && className(_el$94, _p$.e = _v$38);
14531
+ _v$39 !== _p$.t && className(_el$95, _p$.t = _v$39);
14532
+ _v$40 !== _p$.a && (_el$97.disabled = _p$.a = _v$40);
14483
14533
  return _p$;
14484
14534
  }, {
14485
14535
  e: void 0,
@@ -14537,19 +14587,19 @@ var init_Devtools = __esm({
14537
14587
  insert(_el$105, () => dataEditError() ? "Invalid Value" : "");
14538
14588
  _el$107.$$click = () => setDataMode("view");
14539
14589
  createRenderEffect((_p$) => {
14540
- 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`
14590
+ 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`
14541
14591
  color: ${t2(colors.gray[600], colors.gray[300])};
14542
- `), _v$45 = clsx(styles().devtoolsEditFormAction, css`
14592
+ `), _v$48 = clsx(styles().devtoolsEditFormAction, css`
14543
14593
  color: ${t2(colors.blue[600], colors.blue[400])};
14544
14594
  `);
14545
- _v$38 !== _p$.e && className(_el$102, _p$.e = _v$38);
14546
- _v$39 !== _p$.t && className(_el$103, _p$.t = _v$39);
14547
- _v$40 !== _p$.a && setAttribute(_el$103, "data-error", _p$.a = _v$40);
14548
- _v$41 !== _p$.o && className(_el$104, _p$.o = _v$41);
14549
- _v$42 !== _p$.i && className(_el$105, _p$.i = _v$42);
14550
- _v$43 !== _p$.n && className(_el$106, _p$.n = _v$43);
14551
- _v$44 !== _p$.s && className(_el$107, _p$.s = _v$44);
14552
- _v$45 !== _p$.h && className(_el$108, _p$.h = _v$45);
14595
+ _v$41 !== _p$.e && className(_el$102, _p$.e = _v$41);
14596
+ _v$42 !== _p$.t && className(_el$103, _p$.t = _v$42);
14597
+ _v$43 !== _p$.a && setAttribute(_el$103, "data-error", _p$.a = _v$43);
14598
+ _v$44 !== _p$.o && className(_el$104, _p$.o = _v$44);
14599
+ _v$45 !== _p$.i && className(_el$105, _p$.i = _v$45);
14600
+ _v$46 !== _p$.n && className(_el$106, _p$.n = _v$46);
14601
+ _v$47 !== _p$.s && className(_el$107, _p$.s = _v$47);
14602
+ _v$48 !== _p$.h && className(_el$108, _p$.h = _v$48);
14553
14603
  return _p$;
14554
14604
  }, {
14555
14605
  e: void 0,
@@ -14573,51 +14623,51 @@ var init_Devtools = __esm({
14573
14623
  }
14574
14624
  }));
14575
14625
  createRenderEffect((_p$) => {
14576
- 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`
14626
+ 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`
14577
14627
  color: ${t2(colors.blue[600], colors.blue[400])};
14578
- `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-refetch"), _v$53 = statusLabel() === "fetching", _v$54 = css`
14628
+ `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-refetch"), _v$56 = statusLabel() === "fetching", _v$57 = css`
14579
14629
  background-color: ${t2(colors.blue[600], colors.blue[400])};
14580
- `, _v$55 = clsx(css`
14630
+ `, _v$58 = clsx(css`
14581
14631
  color: ${t2(colors.yellow[600], colors.yellow[400])};
14582
- `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-invalidate"), _v$56 = queryStatus() === "pending", _v$57 = css`
14632
+ `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-invalidate"), _v$59 = queryStatus() === "pending", _v$60 = css`
14583
14633
  background-color: ${t2(colors.yellow[600], colors.yellow[400])};
14584
- `, _v$58 = clsx(css`
14634
+ `, _v$61 = clsx(css`
14585
14635
  color: ${t2(colors.gray[600], colors.gray[300])};
14586
- `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-reset"), _v$59 = queryStatus() === "pending", _v$60 = css`
14636
+ `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-reset"), _v$62 = queryStatus() === "pending", _v$63 = css`
14587
14637
  background-color: ${t2(colors.gray[600], colors.gray[400])};
14588
- `, _v$61 = clsx(css`
14638
+ `, _v$64 = clsx(css`
14589
14639
  color: ${t2(colors.pink[500], colors.pink[400])};
14590
- `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-remove"), _v$62 = statusLabel() === "fetching", _v$63 = css`
14640
+ `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-remove"), _v$65 = statusLabel() === "fetching", _v$66 = css`
14591
14641
  background-color: ${t2(colors.pink[500], colors.pink[400])};
14592
- `, _v$64 = clsx(css`
14642
+ `, _v$67 = clsx(css`
14593
14643
  color: ${t2(colors.cyan[500], colors.cyan[400])};
14594
- `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$65 = restoringLoading(), _v$66 = css`
14644
+ `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$68 = restoringLoading(), _v$69 = css`
14595
14645
  background-color: ${t2(colors.cyan[500], colors.cyan[400])};
14596
- `, _v$67 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$68 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$69 = tokens.size[2];
14597
- _v$46 !== _p$.e && className(_el$65, _p$.e = _v$46);
14598
- _v$47 !== _p$.t && className(_el$66, _p$.t = _v$47);
14599
- _v$48 !== _p$.a && className(_el$67, _p$.a = _v$48);
14600
- _v$49 !== _p$.o && className(_el$71, _p$.o = _v$49);
14601
- _v$50 !== _p$.i && className(_el$78, _p$.i = _v$50);
14602
- _v$51 !== _p$.n && className(_el$79, _p$.n = _v$51);
14603
- _v$52 !== _p$.s && className(_el$80, _p$.s = _v$52);
14604
- _v$53 !== _p$.h && (_el$80.disabled = _p$.h = _v$53);
14605
- _v$54 !== _p$.r && className(_el$81, _p$.r = _v$54);
14606
- _v$55 !== _p$.d && className(_el$82, _p$.d = _v$55);
14607
- _v$56 !== _p$.l && (_el$82.disabled = _p$.l = _v$56);
14608
- _v$57 !== _p$.u && className(_el$83, _p$.u = _v$57);
14609
- _v$58 !== _p$.c && className(_el$84, _p$.c = _v$58);
14610
- _v$59 !== _p$.w && (_el$84.disabled = _p$.w = _v$59);
14611
- _v$60 !== _p$.m && className(_el$85, _p$.m = _v$60);
14612
- _v$61 !== _p$.f && className(_el$86, _p$.f = _v$61);
14613
- _v$62 !== _p$.y && (_el$86.disabled = _p$.y = _v$62);
14614
- _v$63 !== _p$.g && className(_el$87, _p$.g = _v$63);
14615
- _v$64 !== _p$.p && className(_el$88, _p$.p = _v$64);
14616
- _v$65 !== _p$.b && (_el$88.disabled = _p$.b = _v$65);
14617
- _v$66 !== _p$.T && className(_el$89, _p$.T = _v$66);
14618
- _v$67 !== _p$.A && className(_el$99, _p$.A = _v$67);
14619
- _v$68 !== _p$.O && className(_el$109, _p$.O = _v$68);
14620
- _v$69 !== _p$.I && ((_p$.I = _v$69) != null ? _el$110.style.setProperty("padding", _v$69) : _el$110.style.removeProperty("padding"));
14646
+ `, _v$70 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$71 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$72 = tokens.size[2];
14647
+ _v$49 !== _p$.e && className(_el$65, _p$.e = _v$49);
14648
+ _v$50 !== _p$.t && className(_el$66, _p$.t = _v$50);
14649
+ _v$51 !== _p$.a && className(_el$67, _p$.a = _v$51);
14650
+ _v$52 !== _p$.o && className(_el$71, _p$.o = _v$52);
14651
+ _v$53 !== _p$.i && className(_el$78, _p$.i = _v$53);
14652
+ _v$54 !== _p$.n && className(_el$79, _p$.n = _v$54);
14653
+ _v$55 !== _p$.s && className(_el$80, _p$.s = _v$55);
14654
+ _v$56 !== _p$.h && (_el$80.disabled = _p$.h = _v$56);
14655
+ _v$57 !== _p$.r && className(_el$81, _p$.r = _v$57);
14656
+ _v$58 !== _p$.d && className(_el$82, _p$.d = _v$58);
14657
+ _v$59 !== _p$.l && (_el$82.disabled = _p$.l = _v$59);
14658
+ _v$60 !== _p$.u && className(_el$83, _p$.u = _v$60);
14659
+ _v$61 !== _p$.c && className(_el$84, _p$.c = _v$61);
14660
+ _v$62 !== _p$.w && (_el$84.disabled = _p$.w = _v$62);
14661
+ _v$63 !== _p$.m && className(_el$85, _p$.m = _v$63);
14662
+ _v$64 !== _p$.f && className(_el$86, _p$.f = _v$64);
14663
+ _v$65 !== _p$.y && (_el$86.disabled = _p$.y = _v$65);
14664
+ _v$66 !== _p$.g && className(_el$87, _p$.g = _v$66);
14665
+ _v$67 !== _p$.p && className(_el$88, _p$.p = _v$67);
14666
+ _v$68 !== _p$.b && (_el$88.disabled = _p$.b = _v$68);
14667
+ _v$69 !== _p$.T && className(_el$89, _p$.T = _v$69);
14668
+ _v$70 !== _p$.A && className(_el$99, _p$.A = _v$70);
14669
+ _v$71 !== _p$.O && className(_el$109, _p$.O = _v$71);
14670
+ _v$72 !== _p$.I && ((_p$.I = _v$72) != null ? _el$110.style.setProperty("padding", _v$72) : _el$110.style.removeProperty("padding"));
14621
14671
  return _p$;
14622
14672
  }, {
14623
14673
  e: void 0,
@@ -14751,19 +14801,19 @@ var init_Devtools = __esm({
14751
14801
  }
14752
14802
  }));
14753
14803
  createRenderEffect((_p$) => {
14754
- 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];
14755
- _v$70 !== _p$.e && className(_el$112, _p$.e = _v$70);
14756
- _v$71 !== _p$.t && className(_el$113, _p$.t = _v$71);
14757
- _v$72 !== _p$.a && className(_el$114, _p$.a = _v$72);
14758
- _v$73 !== _p$.o && className(_el$118, _p$.o = _v$73);
14759
- _v$74 !== _p$.i && className(_el$122, _p$.i = _v$74);
14760
- _v$75 !== _p$.n && ((_p$.n = _v$75) != null ? _el$123.style.setProperty("padding", _v$75) : _el$123.style.removeProperty("padding"));
14761
- _v$76 !== _p$.s && className(_el$124, _p$.s = _v$76);
14762
- _v$77 !== _p$.h && ((_p$.h = _v$77) != null ? _el$125.style.setProperty("padding", _v$77) : _el$125.style.removeProperty("padding"));
14763
- _v$78 !== _p$.r && className(_el$126, _p$.r = _v$78);
14764
- _v$79 !== _p$.d && ((_p$.d = _v$79) != null ? _el$127.style.setProperty("padding", _v$79) : _el$127.style.removeProperty("padding"));
14765
- _v$80 !== _p$.l && className(_el$128, _p$.l = _v$80);
14766
- _v$81 !== _p$.u && ((_p$.u = _v$81) != null ? _el$129.style.setProperty("padding", _v$81) : _el$129.style.removeProperty("padding"));
14804
+ 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];
14805
+ _v$73 !== _p$.e && className(_el$112, _p$.e = _v$73);
14806
+ _v$74 !== _p$.t && className(_el$113, _p$.t = _v$74);
14807
+ _v$75 !== _p$.a && className(_el$114, _p$.a = _v$75);
14808
+ _v$76 !== _p$.o && className(_el$118, _p$.o = _v$76);
14809
+ _v$77 !== _p$.i && className(_el$122, _p$.i = _v$77);
14810
+ _v$78 !== _p$.n && ((_p$.n = _v$78) != null ? _el$123.style.setProperty("padding", _v$78) : _el$123.style.removeProperty("padding"));
14811
+ _v$79 !== _p$.s && className(_el$124, _p$.s = _v$79);
14812
+ _v$80 !== _p$.h && ((_p$.h = _v$80) != null ? _el$125.style.setProperty("padding", _v$80) : _el$125.style.removeProperty("padding"));
14813
+ _v$81 !== _p$.r && className(_el$126, _p$.r = _v$81);
14814
+ _v$82 !== _p$.d && ((_p$.d = _v$82) != null ? _el$127.style.setProperty("padding", _v$82) : _el$127.style.removeProperty("padding"));
14815
+ _v$83 !== _p$.l && className(_el$128, _p$.l = _v$83);
14816
+ _v$84 !== _p$.u && ((_p$.u = _v$84) != null ? _el$129.style.setProperty("padding", _v$84) : _el$129.style.removeProperty("padding"));
14767
14817
  return _p$;
14768
14818
  }, {
14769
14819
  e: void 0,
@@ -15168,6 +15218,15 @@ var init_Devtools = __esm({
15168
15218
  &:hover {
15169
15219
  background-color: ${colors.purple[400]}${t2("", alpha[90])};
15170
15220
  }
15221
+ &:focus {
15222
+ outline: none;
15223
+ background-color: ${colors.purple[400]}${t2("", alpha[90])};
15224
+ }
15225
+ &:focus-visible {
15226
+ outline: 2px solid ${colors.blue[800]};
15227
+ outline-offset: -2px;
15228
+ background-color: ${colors.purple[400]}${t2("", alpha[90])};
15229
+ }
15171
15230
  z-index: 4;
15172
15231
  `,
15173
15232
  "dragHandle-position-top": css`
@@ -15920,7 +15979,7 @@ var init_Devtools = __esm({
15920
15979
  };
15921
15980
  lightStyles2 = (css) => stylesFactory2("light", css);
15922
15981
  darkStyles2 = (css) => stylesFactory2("dark", css);
15923
- delegateEvents(["click", "mousedown", "input"]);
15982
+ delegateEvents(["click", "mousedown", "keydown", "input"]);
15924
15983
  }
15925
15984
  });
15926
15985
 
package/build/dev.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/7HGFFDPC.js'));
83
+ Devtools = lazy(() => import('./DevtoolsComponent/CDWEKZTF.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/ONXD5SSW.js'));
223
+ Devtools = lazy(() => import('./DevtoolsPanelComponent/5A54IY5X.js'));
224
224
  this.#Component = Devtools;
225
225
  }
226
226
  setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);