@netlify/spark-ui 1.26.0-alpha.4 → 1.26.0-alpha.5

package/dist/components/preact/SearchModal/components/SearchModal/SearchModal.d.ts

@@ -6,6 +6,8 @@ interface Props {
     debug?: boolean;
     kapaIntegrationId?: string;
     filters?: PagefindFilters;
+    scopedSearch?: boolean;
+    searchToggleTarget?: string;
 }
 declare function SearchModal(props?: Props): import("preact").JSX.Element;
 export default SearchModal;

package/dist/components/preact/SearchModal/components/SearchModal/SearchModal.js

@@ -1,96 +1,99 @@
 import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { A as g, y as f, d } from "../../../../../chunks/hooks.module.DRcxknIz.js";
-import { A as L, K as P } from "../../../../../chunks/AskNetlify.bx0blyGV.js";
-import M from "../../../Modal/Modal.js";
-import h from "../../../KeyboardKey/KeyboardKey.js";
-import O from "../SearchWindow.js";
-import Q from "../SearchInput.js";
-import C from "../AskNetlifyLink.js";
-import { useSearch as E } from "../../hooks/useSearch.js";
-import { useSearchAnalytics as R } from "../../hooks/useSearchAnalytics.js";
-import { useKeyboardNav as q } from "../../hooks/useKeyboardNav.js";
-import { useSearchHotkeys as x } from "../../hooks/useSearchHotkeys.js";
-import { useSearchParams as D } from "../../hooks/useSearchParams.js";
-import { useSearchToggles as F } from "../../hooks/useSearchToggles.js";
-import { useAskAnalytics as G } from "../../../AskNetlify/hooks/useAskAnalytics.js";
-import { Fragment as N } from "preact";
-import '../../../../../assets/SearchModal.css';function H(a) {
-  const s = g(null);
-  return f(() => {
-    function n(m) {
+import { A as N, y as p, d as h } from "../../../../../chunks/hooks.module.DRcxknIz.js";
+import { A as M, K as O } from "../../../../../chunks/AskNetlify.bx0blyGV.js";
+import Q from "../../../Modal/Modal.js";
+import f from "../../../KeyboardKey/KeyboardKey.js";
+import C from "../SearchWindow.js";
+import E from "../SearchInput.js";
+import R from "../AskNetlifyLink.js";
+import { useSearch as q } from "../../hooks/useSearch.js";
+import { useSearchAnalytics as x } from "../../hooks/useSearchAnalytics.js";
+import { useKeyboardNav as D } from "../../hooks/useKeyboardNav.js";
+import { useSearchHotkeys as F } from "../../hooks/useSearchHotkeys.js";
+import { useSearchParams as G } from "../../hooks/useSearchParams.js";
+import { useSearchToggles as H } from "../../hooks/useSearchToggles.js";
+import { useAskAnalytics as U } from "../../../AskNetlify/hooks/useAskAnalytics.js";
+import { Fragment as k } from "preact";
+import '../../../../../assets/SearchModal.css';function V(a) {
+  const s = N(null);
+  return p(() => {
+    function o(m) {
       s.current && !s.current.contains(m.target) && a();
     }
-    return document.addEventListener("mousedown", n), () => {
-      document.removeEventListener("mousedown", n);
+    return document.addEventListener("mousedown", o), () => {
+      document.removeEventListener("mousedown", o);
     };
   }, [a]), s;
 }
-function se(a = {
+function ne(a = {
   className: "",
   children: void 0,
   debug: !1,
   kapaIntegrationId: void 0,
-  filters: void 0
+  filters: void 0,
+  scopedSearch: !1,
+  searchToggleTarget: void 0
 }) {
-  const { children: s, className: n, debug: m, filters: T, ...v } = a, [c, o] = d({ current: "search" }), [i, p] = d(!1), [A, I] = d(""), l = () => p(!0), u = () => p(!1), t = g(null), w = H(u), { state: r, actions: S } = E(T);
-  F(l, o), D(l, S.setSearchTerm, I, o), x(i, l, u), q(t, i, u), R(r, m);
-  const { handleNewQuery: b, handleAnswer: K } = G();
-  return f(() => {
+  const { children: s, className: o, debug: m, filters: v, scopedSearch: A, searchToggleTarget: l, ...I } = a, [c, n] = h({ current: "search" }), [i, S] = h(!1), [w, b] = h(""), d = () => S(!0), u = () => S(!1), t = N(null), K = V(u), { state: r, actions: g } = q(v);
+  H(d, n, l), G(d, g.setSearchTerm, b, n, !l), F(i, d, u, !l), D(t, i, u), x(r, m);
+  const { handleNewQuery: L, handleAnswer: P } = U();
+  return p(() => {
     t.current && (i ? t.current.showModal() : t.current.close());
-  }, [i]), f(() => {
-    var k;
-    const y = (k = t.current) == null ? void 0 : k.querySelector("input");
+  }, [i]), p(() => {
+    var T;
+    const y = (T = t.current) == null ? void 0 : T.querySelector("input");
     y && y.focus();
   }, [c.current]), /* @__PURE__ */ e(
-    P,
+    O,
     {
       integrationId: a.kapaIntegrationId || "",
       callbacks: {
         askAI: {
-          onQuerySubmit: b,
-          onAnswerGenerationCompleted: K
+          onQuerySubmit: L,
+          onAnswerGenerationCompleted: P
         }
       },
       children: /* @__PURE__ */ e(
-        M,
+        Q,
         {
           ref: t,
-          className: `n-search-modal ${n || ""}`,
+          className: `n-search-modal ${o || ""}`,
           "data-state": c.current,
-          ...v,
-          children: /* @__PURE__ */ e("div", { ref: w, className: "n-search-container", children: [
+          ...I,
+          children: /* @__PURE__ */ e("div", { ref: K, className: "n-search-container", children: [
             c.current === "ask" && /* @__PURE__ */ e(
-              L,
+              M,
               {
-                setModalState: o,
+                setModalState: n,
                 searchQuery: r.searchTerm,
-                urlParamQuery: A
+                urlParamQuery: w
               }
             ),
-            c.current === "search" && /* @__PURE__ */ e(N, { children: [
-              /* @__PURE__ */ e(Q, { setSearchTerm: S.setSearchTerm, initialValue: r.searchTerm }),
+            c.current === "search" && /* @__PURE__ */ e(k, { children: [
+              /* @__PURE__ */ e(E, { setSearchTerm: g.setSearchTerm, initialValue: r.searchTerm }),
               /* @__PURE__ */ e(
-                O,
+                C,
                 {
-                  setModalState: o,
+                  setModalState: n,
                   searchLoading: r.isLoading,
                   searchTerm: r.searchTerm,
                   results: r.results,
-                  children: /* @__PURE__ */ e(N, { children: [
-                    a.kapaIntegrationId && /* @__PURE__ */ e(C, { searchTerm: r.searchTerm, setModalState: o }),
+                  scopedSearch: A,
+                  children: /* @__PURE__ */ e(k, { children: [
+                    a.kapaIntegrationId && /* @__PURE__ */ e(R, { searchTerm: r.searchTerm, setModalState: n }),
                     s
                   ] })
                 }
               ),
               /* @__PURE__ */ e("div", { className: "n-search-footer", children: [
                 /* @__PURE__ */ e("p", { className: "n-search-footer-tip", children: [
-                  /* @__PURE__ */ e(h, { keyNames: ["Esc"] }),
+                  /* @__PURE__ */ e(f, { keyNames: ["Esc"] }),
                   "to close"
                 ] }),
                 /* @__PURE__ */ e("p", { className: "n-search-footer-tip", children: [
-                  /* @__PURE__ */ e(h, { keyNames: ["Tab"] }),
+                  /* @__PURE__ */ e(f, { keyNames: ["Tab"] }),
                   /* @__PURE__ */ e("span", { children: "or" }),
-                  /* @__PURE__ */ e(h, { keyNames: ["↑", "↓"] }),
+                  /* @__PURE__ */ e(f, { keyNames: ["↑", "↓"] }),
                   "to navigate"
                 ] })
               ] })
@@ -102,5 +105,5 @@ function se(a = {
   );
 }
 export {
-  se as default
+  ne as default
 };

package/dist/components/preact/SearchModal/components/SearchWindow.d.ts

@@ -1,2 +1,2 @@
 import { SearchWindowProps } from '../types/search.types';
-export default function SearchWindow({ setModalState, searchLoading, searchTerm, results, children: DefaultWindow, }: SearchWindowProps): import("preact").JSX.Element;
+export default function SearchWindow({ setModalState, searchLoading, searchTerm, results, children: DefaultWindow, scopedSearch, }: SearchWindowProps): import("preact").JSX.Element;

package/dist/components/preact/SearchModal/components/SearchWindow.js

@@ -1,49 +1,54 @@
 import { u as n } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import t from "./SearchHeading/SearchHeading.js";
+import m from "./SearchHeading/SearchHeading.js";
 import h from "./SearchLink/SearchLink.js";
-import m from "./SearchLinkThemeToggle.js";
-import o from "./AskNetlifyLink.js";
-import { Fragment as a } from "preact";
-const f = ({ searchTerm: l }) => /* @__PURE__ */ n("div", { className: "n-search-feedback", children: /* @__PURE__ */ n("p", { className: "n-results-info", children: [
+import f from "./SearchLinkThemeToggle.js";
+import t from "./AskNetlifyLink.js";
+import { Fragment as s } from "preact";
+const N = ({ searchTerm: e }) => /* @__PURE__ */ n("div", { className: "n-search-feedback", children: /* @__PURE__ */ n("p", { className: "n-results-info", children: [
   "0 results for ",
-  /* @__PURE__ */ n("span", { className: "n-search-term", children: l })
+  /* @__PURE__ */ n("span", { className: "n-search-term", children: e })
 ] }) }), p = ({
-  setModalState: l,
-  searchLoading: c,
+  setModalState: e,
+  searchLoading: r,
   searchTerm: i,
-  results: e
+  results: l,
+  scopedSearch: a
 }) => {
-  const s = !c && (!e || e.length === 0);
-  return /* @__PURE__ */ n(a, { children: [
-    /* @__PURE__ */ n(o, { searchTerm: i, setModalState: l }),
-    s ? /* @__PURE__ */ n(f, { searchTerm: i }) : /* @__PURE__ */ n("ul", { className: "n-results-list", role: "list", children: e == null ? void 0 : e.map((r, d) => /* @__PURE__ */ n("li", { className: "n-results-list-item", children: /* @__PURE__ */ n(h, { ...r }) }, d)) })
+  const c = !r && (!l || l.length === 0);
+  return /* @__PURE__ */ n(s, { children: [
+    !a && /* @__PURE__ */ n(t, { searchTerm: i, setModalState: e }),
+    c ? /* @__PURE__ */ n(N, { searchTerm: i }) : /* @__PURE__ */ n("ul", { className: "n-results-list", role: "list", children: l == null ? void 0 : l.map((o, d) => /* @__PURE__ */ n("li", { className: "n-results-list-item", children: /* @__PURE__ */ n(h, { ...o }) }, d)) })
   ] });
 };
-function w({
-  setModalState: l,
-  searchLoading: c,
+function b({
+  setModalState: e,
+  searchLoading: r,
   searchTerm: i,
-  results: e,
-  children: s
+  results: l,
+  children: a,
+  scopedSearch: c
 }) {
-  const r = (i == null ? void 0 : i.length) > 1;
-  return /* @__PURE__ */ n("div", { className: "n-search-window", children: /* @__PURE__ */ n("div", { className: "n-search-links", children: r ? c ? /* @__PURE__ */ n(a, { children: [
-    /* @__PURE__ */ n(o, { searchTerm: i, setModalState: l }),
+  const o = (i == null ? void 0 : i.length) > 1;
+  return /* @__PURE__ */ n("div", { className: "n-search-window", children: /* @__PURE__ */ n("div", { className: "n-search-links", children: o ? r ? /* @__PURE__ */ n(s, { children: [
+    !c && /* @__PURE__ */ n(t, { searchTerm: i, setModalState: e }),
     /* @__PURE__ */ n("div", { className: "n-search-feedback", children: /* @__PURE__ */ n("div", { className: "n-loader-dots-spinner" }) })
   ] }) : /* @__PURE__ */ n(
     p,
     {
-      setModalState: l,
-      searchLoading: c,
+      setModalState: e,
+      searchLoading: r,
       searchTerm: i,
-      results: e
+      results: l,
+      scopedSearch: c
     }
-  ) : /* @__PURE__ */ n(a, { children: [
-    s,
-    /* @__PURE__ */ n(t, { children: "Actions" }),
-    /* @__PURE__ */ n(m, {})
+  ) : /* @__PURE__ */ n(s, { children: [
+    a,
+    !c && /* @__PURE__ */ n(s, { children: [
+      /* @__PURE__ */ n(m, { children: "Actions" }),
+      /* @__PURE__ */ n(f, {})
+    ] })
   ] }) }) });
 }
 export {
-  w as default
+  b as default
 };

package/dist/components/preact/SearchModal/hooks/useSearchHotkeys.d.ts

@@ -10,4 +10,4 @@
  * @param onOpen - Callback to open the search interface.
  * @param onClose - Callback to close the search interface.
  */
-export declare function useSearchHotkeys(isOpen: boolean, onOpen: () => void, onClose: () => void): void;
+export declare function useSearchHotkeys(isOpen: boolean, onOpen: () => void, onClose: () => void, enabled?: boolean): void;

package/dist/components/preact/SearchModal/hooks/useSearchHotkeys.js

@@ -1,12 +1,13 @@
-import { y as d } from "../../../../chunks/hooks.module.DRcxknIz.js";
-function m(t, n, o) {
-  d(() => {
-    const r = (e) => {
-      e.metaKey && e.key === "k" && (e.preventDefault(), e.stopImmediatePropagation(), t ? o() : n());
+import { y as m } from "../../../../chunks/hooks.module.DRcxknIz.js";
+function a(t, r, n, o = !0) {
+  m(() => {
+    if (!o) return;
+    const d = (e) => {
+      e.metaKey && e.key === "k" && (e.preventDefault(), e.stopImmediatePropagation(), t ? n() : r());
     };
-    return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
-  }, [t, n, o]);
+    return document.addEventListener("keydown", d), () => document.removeEventListener("keydown", d);
+  }, [t, r, n, o]);
 }
 export {
-  m as useSearchHotkeys
+  a as useSearchHotkeys
 };

package/dist/components/preact/SearchModal/hooks/useSearchParams.d.ts

@@ -17,4 +17,4 @@
  */
 export declare function useSearchParams(onOpen: () => void, setSearchTerm: (term: string) => void, setUrlParamTerm: (term: string) => void, setModalState?: (e: {
     current: string;
-}) => void): void;
+}) => void, enabled?: boolean): void;

package/dist/components/preact/SearchModal/hooks/useSearchParams.js

@@ -1,24 +1,24 @@
-import { d as u, y as g } from "../../../../chunks/hooks.module.DRcxknIz.js";
-function m(a, c, i, r) {
-  const [o, h] = u(!1);
-  g(() => {
+import { d as m, y as h } from "../../../../chunks/hooks.module.DRcxknIz.js";
+function w(a, c, i, r, o = !0) {
+  const [t, u] = m(!1);
+  h(() => {
     let e;
     const s = () => {
-      window.pagefind && (h(!0), e && clearInterval(e));
+      window.pagefind && (u(!0), e && clearInterval(e));
     };
     return s(), e = setInterval(s, 100), () => clearInterval(e);
-  }, []), g(() => {
-    if (typeof location > "u" || o) return;
-    const e = new URLSearchParams(location.search), s = e.has("ask"), n = e.get("msg") || e.get("message"), f = e.get("search"), t = new URL(location.href);
+  }, []), h(() => {
+    if (!o || typeof location > "u" || t) return;
+    const e = new URLSearchParams(location.search), s = e.has("ask"), n = e.get("msg") || e.get("message"), f = e.get("search"), g = new URL(location.href);
     if (["ask", "msg", "message", "search"].forEach((d) => {
-      t.searchParams.delete(d);
-    }), window.history.replaceState({}, "", t), s || n) {
+      g.searchParams.delete(d);
+    }), window.history.replaceState({}, "", g), s || n) {
       n && i(n), r == null || r({ current: "ask" }), a();
       return;
     }
     f && (c(f), a());
-  }, [o, a, r, c, i]);
+  }, [t, a, r, c, i, o]);
 }
 export {
-  m as useSearchParams
+  w as useSearchParams
 };

package/dist/components/preact/SearchModal/hooks/useSearchToggles.d.ts

@@ -11,4 +11,4 @@
  */
 export declare function useSearchToggles(onOpen: () => void, setState: (state: {
     current: string;
-}) => void): void;
+}) => void, scopeId?: string): void;

package/dist/components/preact/SearchModal/hooks/useSearchToggles.js

@@ -1,18 +1,20 @@
-import { y as l } from "../../../../chunks/hooks.module.DRcxknIz.js";
-function n(t, c) {
-  l(() => {
-    const r = document.querySelectorAll("[data-ntl-search-toggle]");
-    if (r.length)
-      return r.forEach((e) => {
-        const a = e.dataset.ntlSearchToggle ? e.dataset.ntlSearchToggle : "search";
+import { y as n } from "../../../../chunks/hooks.module.DRcxknIz.js";
+function g(t, l, r) {
+  n(() => {
+    const a = Array.from(document.querySelectorAll("[data-ntl-search-toggle]")).filter(
+      (e) => r ? e.dataset.ntlSearchTarget === r : !e.dataset.ntlSearchTarget
+    );
+    if (a.length)
+      return a.forEach((e) => {
+        const c = e.dataset.ntlSearchToggle ? e.dataset.ntlSearchToggle : "search";
         e.removeAttribute("disabled"), e.addEventListener("click", () => {
-          t(), c({ current: a });
+          t(), l({ current: c });
         });
       }), () => {
-        r.forEach((e) => e.removeEventListener("click", t));
+        a.forEach((e) => e.removeEventListener("click", t));
       };
-  }, [t]);
+  }, [t, r]);
 }
 export {
-  n as useSearchToggles
+  g as useSearchToggles
 };

package/dist/components/preact/SearchModal/types/search.types.d.ts

@@ -18,6 +18,7 @@ export interface SearchWindowProps {
     searchTerm: string;
     results?: SearchLinkProps[];
     children: ComponentChildren;
+    scopedSearch?: boolean;
 }
 export interface SearchResultsProps {
     setModalState: (e: {
@@ -26,6 +27,7 @@ export interface SearchResultsProps {
     searchLoading: boolean;
     searchTerm: string;
     results?: SearchLinkProps[];
+    scopedSearch?: boolean;
 }
 export interface SearchState {
     searchTerm: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "1.26.0-alpha.4",
+  "version": "1.26.0-alpha.5",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",

package/packages/components/ActionArrow.astro

@@ -3,7 +3,7 @@ const { class: className, ...rest } = Astro.props;
 ---
 
 <div class:list={['n-action-arrow', className]} {...rest}>
-  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14" role="presentation">
     <g stroke="currentColor" stroke-linecap="square" stroke-width="1.564">
       <path stroke-linejoin="round" d="M3.417 10.556 9.4 4.572"></path>
       <path d="M9.88 9.381V4.093H4.59"></path>

package/packages/components/Card.astro

@@ -6,8 +6,11 @@ import Eyebrow from './Eyebrow.astro';
 interface Props {
   as?: HTMLElement;
   eyebrow?: string;
+  eyebrowTransitionName?: string;
   paragraph?: string | HTMLElement;
+  paragraphTransitionName?: string;
   headline?: string | HTMLElement;
+  headlineTransitionName?: string;
   link?: {
     id?: string;
     href: string;
@@ -19,8 +22,11 @@ interface Props {
 const {
   as: Element = 'div',
   eyebrow,
+  eyebrowTransitionName,
   paragraph,
+  paragraphTransitionName,
   headline,
+  headlineTransitionName,
   link,
   isCardClickable,
   class: className,
@@ -55,17 +61,32 @@ const isExternal =
       </div>
     )
   }
-  {eyebrow && <Eyebrow class="n-card-eyebrow">{eyebrow}</Eyebrow>}
+  {
+    eyebrow && (
+      <Eyebrow class="n-card-eyebrow" transition:name={eyebrowTransitionName}>
+        {eyebrow}
+      </Eyebrow>
+    )
+  }
   {
     isAnchorHeadline ? (
       <a class="n-card-link n-card-link-headline" href={link?.href} id={link.id}>
-        <div class="n-card-headline" set:html={headline} />
+        <div class="n-card-headline" set:html={headline} transition:name={headlineTransitionName} />
       </a>
     ) : (
-      <div class="n-card-headline" set:html={headline} />
+      <div class="n-card-headline" set:html={headline} transition:name={headlineTransitionName} />
+    )
+  }
+  {
+    Astro.slots.has('meta') && (
+      <div class="n-card-meta">
+        <slot name="meta" />
+      </div>
     )
   }
-  {paragraph && <div class="n-card-paragraph" set:html={paragraph} />}
+  {paragraph && (
+    <div class="n-card-paragraph" set:html={paragraph} transition:name={paragraphTransitionName} />
+  )}
   <slot />
   {
     link && link.text && (
@@ -95,10 +116,24 @@ const isExternal =
     --ntl-flow-space: var(--ntl-space-l);
   }
 
-  .n-card-eyebrow + .n-card-headline {
+  .n-card-eyebrow + .n-card-headline,
+  .n-card-eyebrow + .n-card-link-headline {
     --ntl-flow-space: var(--ntl-space-s);
   }
 
+  .n-card-headline + .n-card-meta,
+  .n-card-link-headline + .n-card-meta {
+    --ntl-flow-space: var(--ntl-space-2xs);
+  }
+
+  .n-card-meta {
+    color: var(--ntl-color-text-weak);
+  }
+
+  .n-card-meta + .n-card-paragraph {
+    --ntl-flow-space: var(--ntl-space-xs);
+  }
+
   .n-card-link:has(> .n-card-headline) {
     text-decoration: none;
   }
@@ -171,6 +206,7 @@ const isExternal =
   .n-card-clickable .n-action-arrow {
     margin-block-start: auto;
     margin-inline-start: auto;
+    padding-block-start: var(--ntl-space-s);
   }
 
   /* Focus for Anchor Headline */

package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.tsx

@@ -30,6 +30,8 @@ interface Props {
   debug?: boolean;
   kapaIntegrationId?: string;
   filters?: PagefindFilters;
+  scopedSearch?: boolean;
+  searchToggleTarget?: string;
 }
 
 function SearchModal(
@@ -39,9 +41,11 @@ function SearchModal(
     debug: false,
     kapaIntegrationId: undefined,
     filters: undefined,
+    scopedSearch: false,
+    searchToggleTarget: undefined,
   }
 ) {
-  const { children, className, debug, filters, ...rest } = props;
+  const { children, className, debug, filters, scopedSearch, searchToggleTarget, ...rest } = props;
 
   const [modalState, setModalState] = useState({ current: 'search' });
   const [searchOpen, setSearchOpen] = useState(false);
@@ -53,9 +57,9 @@ function SearchModal(
   const containerRef = useClickOutside<HTMLDivElement>(closeSearch);
 
   const { state, actions } = useSearch(filters);
-  useSearchToggles(openSearch, setModalState);
-  useSearchParams(openSearch, actions.setSearchTerm, setUrlParamTerm, setModalState);
-  useSearchHotkeys(searchOpen, openSearch, closeSearch);
+  useSearchToggles(openSearch, setModalState, searchToggleTarget);
+  useSearchParams(openSearch, actions.setSearchTerm, setUrlParamTerm, setModalState, !searchToggleTarget);
+  useSearchHotkeys(searchOpen, openSearch, closeSearch, !searchToggleTarget);
   useKeyboardNav(modalRef, searchOpen, closeSearch);
   useSearchAnalytics(state, debug);
   const { handleNewQuery, handleAnswer } = useAskAnalytics();
@@ -103,6 +107,7 @@ function SearchModal(
                 searchLoading={state.isLoading}
                 searchTerm={state.searchTerm}
                 results={state.results}
+                scopedSearch={scopedSearch}
               >
                 <>
                   {props.kapaIntegrationId && (

package/packages/components/preact/SearchModal/components/SearchWindow.tsx

@@ -18,12 +18,13 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({
   searchLoading,
   searchTerm,
   results,
+  scopedSearch,
 }) => {
   const noResults = !searchLoading && (!results || results.length === 0);
 
   return (
     <>
-      <AskNetlifyLink searchTerm={searchTerm} setModalState={setModalState} />
+      {!scopedSearch && <AskNetlifyLink searchTerm={searchTerm} setModalState={setModalState} />}
       {noResults ? (
         <NoResults searchTerm={searchTerm} />
       ) : (
@@ -45,6 +46,7 @@ export default function SearchWindow({
   searchTerm,
   results,
   children: DefaultWindow,
+  scopedSearch,
 }: SearchWindowProps) {
   const hasQuery = searchTerm?.length > 1;
 
@@ -54,7 +56,9 @@ export default function SearchWindow({
         {hasQuery ? (
           searchLoading ? (
             <>
-              <AskNetlifyLink searchTerm={searchTerm} setModalState={setModalState} />
+              {!scopedSearch && (
+                <AskNetlifyLink searchTerm={searchTerm} setModalState={setModalState} />
+              )}
               <div className="n-search-feedback">
                 <div className="n-loader-dots-spinner" />
               </div>
@@ -65,13 +69,18 @@ export default function SearchWindow({
               searchLoading={searchLoading}
               searchTerm={searchTerm}
               results={results}
+              scopedSearch={scopedSearch}
             />
           )
         ) : (
           <>
             {DefaultWindow}
-            <SearchHeading>Actions</SearchHeading>
-            <SearchLinkThemeToggle />
+            {!scopedSearch && (
+              <>
+                <SearchHeading>Actions</SearchHeading>
+                <SearchLinkThemeToggle />
+              </>
+            )}
           </>
         )}
       </div>

package/packages/components/preact/SearchModal/hooks/useSearchHotkeys.ts

@@ -13,8 +13,15 @@ import { useEffect } from 'preact/hooks';
  * @param onClose - Callback to close the search interface.
  */
 
-export function useSearchHotkeys(isOpen: boolean, onOpen: () => void, onClose: () => void) {
+export function useSearchHotkeys(
+  isOpen: boolean,
+  onOpen: () => void,
+  onClose: () => void,
+  enabled: boolean = true
+) {
   useEffect(() => {
+    if (!enabled) return;
+
     const handleKeydown = (e: KeyboardEvent) => {
       if (e.metaKey && e.key === 'k') {
         e.preventDefault();
@@ -25,5 +32,5 @@ export function useSearchHotkeys(isOpen: boolean, onOpen: () => void, onClose: (
 
     document.addEventListener('keydown', handleKeydown);
     return () => document.removeEventListener('keydown', handleKeydown);
-  }, [isOpen, onOpen, onClose]);
+  }, [isOpen, onOpen, onClose, enabled]);
 }

package/packages/components/preact/SearchModal/hooks/useSearchParams.ts

@@ -22,7 +22,8 @@ export function useSearchParams(
   onOpen: () => void,
   setSearchTerm: (term: string) => void,
   setUrlParamTerm: (term: string) => void,
-  setModalState?: (e: { current: string }) => void
+  setModalState?: (e: { current: string }) => void,
+  enabled: boolean = true
 ) {
   const [isPagefindLoaded, setIsPagefindLoaded] = useState(false);
 
@@ -46,7 +47,7 @@ export function useSearchParams(
   }, []);
 
   useEffect(() => {
-    if (typeof location === 'undefined' || isPagefindLoaded) return;
+    if (!enabled || typeof location === 'undefined' || isPagefindLoaded) return;
 
     const params = new URLSearchParams(location.search);
 
@@ -72,5 +73,5 @@ export function useSearchParams(
       setSearchTerm(search);
       onOpen();
     }
-  }, [isPagefindLoaded, onOpen, setModalState, setSearchTerm, setUrlParamTerm]);
+  }, [isPagefindLoaded, onOpen, setModalState, setSearchTerm, setUrlParamTerm, enabled]);
 }

package/packages/components/preact/SearchModal/hooks/useSearchToggles.ts

@@ -14,10 +14,13 @@ import { useEffect } from 'preact/hooks';
 
 export function useSearchToggles(
   onOpen: () => void,
-  setState: (state: { current: string }) => void
+  setState: (state: { current: string }) => void,
+  scopeId?: string
 ) {
   useEffect(() => {
-    const toggles = document.querySelectorAll('[data-ntl-search-toggle]');
+    const toggles = Array.from(document.querySelectorAll<HTMLElement>('[data-ntl-search-toggle]')).filter(
+      t => (scopeId ? t.dataset.ntlSearchTarget === scopeId : !t.dataset.ntlSearchTarget)
+    );
 
     if (!toggles.length) return;
 
@@ -33,5 +36,5 @@ export function useSearchToggles(
     return () => {
       toggles.forEach(t => t.removeEventListener('click', onOpen));
     };
-  }, [onOpen]);
+  }, [onOpen, scopeId]);
 }

package/packages/components/preact/SearchModal/types/search.types.tsx

@@ -18,6 +18,7 @@ export interface SearchWindowProps {
   searchTerm: string;
   results?: SearchLinkProps[];
   children: ComponentChildren;
+  scopedSearch?: boolean;
 }
 
 export interface SearchResultsProps {
@@ -25,6 +26,7 @@ export interface SearchResultsProps {
   searchLoading: boolean;
   searchTerm: string;
   results?: SearchLinkProps[];
+  scopedSearch?: boolean;
 }
 
 export interface SearchState {