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

package/README.md

@@ -27,6 +27,8 @@ When commmits are merged into `main`, a new release will be created via GitHub A
 
 Check out [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) for other commit message types.
 
+> ⚠️ **A commit message without one of these prefixes will not trigger a release — silently.** `semantic-release` looks at commit messages since the last release, decides nothing here counts as `fix`/`feat`/etc., and skips publishing with no error. The Action still runs and reports success either way. This is easy to miss with squash-merged PRs: **the squash commit uses the PR title**, so the PR title itself needs the `type: description` prefix, not just the individual commits inside it. If you expected a new version and don't see one in `CHANGELOG.md` or on npm, check whether the merged commit message actually followed this format.
+
 ### Troubleshooting
 
 Check that npm and GitHub tokens have not expired. Both are used in the [Release GitHub Action](https://github.com/netlify/netlify-spark-ui/blob/main/.github/workflows/release.yml#L34-L35) job.

package/dist/assets/SearchLink.css

@@ -1 +1 @@
-.n-search-link{--n-search-icon-size: 1.25em;box-sizing:border-box;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-s, 1rem);align-items:center;padding:var(--n-search-link-padding-block, 1em) var(--n-search-link-padding-inline, 1em);font-size:var(--font-size-text-sm);font-weight:var(--font-weight-regular);text-decoration:none;cursor:pointer;width:100%;border:none;text-align:left;outline:none;border-radius:var(--radius-l)}.n-search-link-body{flex:1;width:80%;color:var(--color-text-weak);text-wrap:pretty}.n-search-link:is(:hover,:focus-visible){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-visible) .n-search-link-icon [data-icon=caretRight]{opacity:1}.n-search-link:is(:hover,:focus-visible) .n-search-link-icon :where(#ask-netlify-eyelid-left,#ask-netlify-eyelid-right){--n-ask-netlify-eyelid-color: var(--n-search-color-bg-2);animation:askEyeBlink 4s infinite;animation-delay:.2s}.n-search-link-icon :where(#ask-netlify-eyelid-left,#ask-netlify-eyelid-right){--n-ask-netlify-eyelid-color: var(--search-bg-color)}.n-search-link-title{font-weight:var(--font-weight-medium);color:var(--color-text-1);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-weak);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-excerpt mark{color:var(--mark-color, currentColor);background-color:var(--mark-bg, var(--color-highlight))}.n-search-link-icon,.n-search-link-icon svg{display:flex;width:var(--n-search-icon-size);height:var(--n-search-icon-size);color:var(--n-search-color-icon)}.n-search-link-icon [data-icon=caretRight]{width:1em;opacity:0}.n-search-link-label{margin-inline-end:var(--space-3xs)}.n-search-link-badge{display:inline-block;width:max-content;font-size:.7em;padding:.1em .4em;position:relative;bottom:.3em;color:var(--n-search-link-badge-text-color, var(--color-disabled-text));background:var(--n-search-link-badge-color, var(--color-disabled-bg));border:1px solid var(--n-search-link-badge-border, var(--color-disabled-border));border-radius:3px}.n-search-link-badge[data-resource=blog]{--n-search-link-badge-color: var(--color-info-bg);--n-search-link-badge-text-color: var(--color-info-text);--n-search-link-badge-border: var(--color-info-border)}.n-search-link-badge[data-resource=changelog]{--n-search-link-badge-color: var(--color-warning-bg);--n-search-link-badge-text-color: var(--color-warning-text);--n-search-link-badge-border: var(--color-warning-border)}.n-search-link-badge[data-resource=guide]{--n-search-link-badge-color: var(--color-highlight-bg);--n-search-link-badge-text-color: var(--color-highlight-text);--n-search-link-badge-border: var(--color-highlight-border)}
+.n-search-link{--n-search-icon-size: 1.25em;box-sizing:border-box;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-s, 1rem);align-items:center;padding:var(--n-search-link-padding-block, 1em) var(--n-search-link-padding-inline, 1em);font-size:var(--font-size-text-sm);font-weight:var(--font-weight-regular);text-decoration:none;cursor:pointer;width:100%;border:none;text-align:left;outline:none;border-radius:var(--radius-l)}.n-search-link-body{flex:1;width:80%;color:var(--color-text-weak);text-wrap:pretty}.n-search-link:is(:hover,:focus-visible){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-visible) .n-search-link-icon [data-icon=caretRight]{opacity:1}.n-search-link:is(:hover,:focus-visible) .n-search-link-icon :where(#ask-netlify-eyelid-left,#ask-netlify-eyelid-right){--n-ask-netlify-eyelid-color: var(--n-search-color-bg-2);animation:askEyeBlink 4s infinite;animation-delay:.2s}.n-search-link-icon :where(#ask-netlify-eyelid-left,#ask-netlify-eyelid-right){--n-ask-netlify-eyelid-color: var(--search-bg-color)}.n-search-link-title{font-weight:var(--font-weight-medium);color:var(--color-text-1);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-weak);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-excerpt mark{color:var(--mark-color, currentColor);background-color:var(--mark-bg, var(--color-highlight))}.n-search-link-icon,.n-search-link-icon svg{display:flex;width:var(--n-search-icon-size);height:var(--n-search-icon-size);color:var(--n-search-color-icon)}.n-search-link-icon [data-icon=caretRight]{width:1em;opacity:0}.n-search-link-label{margin-inline-end:var(--space-3xs)}.n-search-link-badge{display:inline-block;width:max-content;font-size:.7em;padding:.1em .4em;position:relative;bottom:.3em;color:var(--n-search-link-badge-text-color, var(--color-disabled-text));background:var(--n-search-link-badge-color, var(--color-disabled-bg));border:1px solid var(--n-search-link-badge-border, var(--color-disabled-border));border-radius:3px}.n-search-link-badge[data-resource=blog]{--n-search-link-badge-color: var(--color-info-bg);--n-search-link-badge-text-color: var(--color-info-text);--n-search-link-badge-border: var(--color-info-border)}.n-search-link-badge[data-resource=changelog]{--n-search-link-badge-color: var(--color-warning-bg);--n-search-link-badge-text-color: var(--color-warning-text);--n-search-link-badge-border: var(--color-warning-border)}.n-search-link-badge[data-resource=guide]{--n-search-link-badge-color: var(--color-highlight-bg);--n-search-link-badge-text-color: var(--color-highlight-text);--n-search-link-badge-border: var(--color-highlight-border)}.n-search-link-badge[data-resource=knowledge-base]{--n-search-link-badge-color: var(--color-success-bg);--n-search-link-badge-text-color: var(--color-success-text);--n-search-link-badge-border: var(--color-success-border)}

package/dist/assets/SearchModal.css

@@ -1 +1 @@
-.n-keyboard-key{--n-key-text-size: .8em;--n-key-border-radius: 6px;--n-key-text-color: currentColor;--n-key-bg-color: transparent;display:flex;gap:calc(var(--space-3xs) * .5);font-size:var(--n-key-text-size);color:var(--n-key-text-color);background:var(--n-key-bg-color);border:1px solid currentColor;border-radius:var(--n-key-border-radius);padding:var(--n-key-padding-block, .05em) var(--n-key-padding-inline, .3em)}.n-search-heading{--n-search-heading-weight: var(--font-weight-semibold, 400);--n-search-heading-size: var(--font-size-text-xs, 13px);--n-search-heading-color: var(--color-text-weak, #757575);font-size:var(--n-search-heading-size);font-weight:var(--n-search-heading-weight);font-family:var(--font-family-mono);color:var(--n-search-heading-color);padding-inline:var(--space-xs);margin-block:var(--space-xs);letter-spacing:.2px}.n-search-link{--n-search-icon-size: 1.25em;box-sizing:border-box;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-s, 1rem);align-items:center;padding:var(--n-search-link-padding-block, 1em) var(--n-search-link-padding-inline, 1em);font-size:var(--font-size-text-sm);font-weight:var(--font-weight-regular);text-decoration:none;cursor:pointer;width:100%;border:none;text-align:left;outline:none;border-radius:var(--radius-l)}.n-search-link-body{flex:1;width:80%;color:var(--color-text-weak);text-wrap:pretty}.n-search-link:is(:hover,:focus-visible){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-visible) .n-search-link-icon [data-icon=caretRight]{opacity:1}.n-search-link:is(:hover,:focus-visible) .n-search-link-icon :where(#ask-netlify-eyelid-left,#ask-netlify-eyelid-right){--n-ask-netlify-eyelid-color: var(--n-search-color-bg-2);animation:askEyeBlink 4s infinite;animation-delay:.2s}.n-search-link-icon :where(#ask-netlify-eyelid-left,#ask-netlify-eyelid-right){--n-ask-netlify-eyelid-color: var(--search-bg-color)}.n-search-link-title{font-weight:var(--font-weight-medium);color:var(--color-text-1);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-weak);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-excerpt mark{color:var(--mark-color, currentColor);background-color:var(--mark-bg, var(--color-highlight))}.n-search-link-icon,.n-search-link-icon svg{display:flex;width:var(--n-search-icon-size);height:var(--n-search-icon-size);color:var(--n-search-color-icon)}.n-search-link-icon [data-icon=caretRight]{width:1em;opacity:0}.n-search-link-label{margin-inline-end:var(--space-3xs)}.n-search-link-badge{display:inline-block;width:max-content;font-size:.7em;padding:.1em .4em;position:relative;bottom:.3em;color:var(--n-search-link-badge-text-color, var(--color-disabled-text));background:var(--n-search-link-badge-color, var(--color-disabled-bg));border:1px solid var(--n-search-link-badge-border, var(--color-disabled-border));border-radius:3px}.n-search-link-badge[data-resource=blog]{--n-search-link-badge-color: var(--color-info-bg);--n-search-link-badge-text-color: var(--color-info-text);--n-search-link-badge-border: var(--color-info-border)}.n-search-link-badge[data-resource=changelog]{--n-search-link-badge-color: var(--color-warning-bg);--n-search-link-badge-text-color: var(--color-warning-text);--n-search-link-badge-border: var(--color-warning-border)}.n-search-link-badge[data-resource=guide]{--n-search-link-badge-color: var(--color-highlight-bg);--n-search-link-badge-text-color: var(--color-highlight-text);--n-search-link-badge-border: var(--color-highlight-border)}.n-loader-dots-spinner{width:var(--n-loader-dot-w, 50px);aspect-ratio:1;--_c: no-repeat radial-gradient(farthest-side, var(--n-loader-dot-color, var(--teal-600)) 92%, #0000);background:var(--_c) top,var(--_c) left,var(--_c) right,var(--_c) bottom;background-size:12px 12px;animation:l7 1s infinite}@keyframes l7{to{transform:rotate(.5turn)}}.n-search-modal{--n-search-padding-inline: var(--space-s);--n-search-color-text: var(--color-text-1, currentColor);--n-search-color-text-secondary: var(--color-text-weak, currentColor);--n-search-color-icon: var(--search-icon-color);--n-search-color-bg: var(--search-bg-color);--n-search-color-bg-2: var(--color-bg-3);--n-search-color-border: var(--color-bg-3);--n-search-border-radius: 1.3rem;--n-search-max-w: 600px;--n-search-text-highlight: var(--search-highlight-color);--n-search-input-height: 50px;--n-search-footer-height: 40px;--n-search-container-height: min(50dvh, 26.5rem)}.n-search-modal{padding:0;border:none;border-radius:var(--n-search-border-radius);width:min(var(--n-search-max-w),100%);margin:auto;background:var(--n-search-color-bg);transition-delay:.2s}.n-search-modal[data-state=ask]{--n-search-max-w: 800px}.n-search-container{--mark-bg: var(--n-search-text-highlight);display:grid;width:min(var(--n-search-max-w),100%);background-color:var(--n-search-color-bg);border-radius:var(--n-search-border-radius);overflow:hidden}.n-search-bar{display:flex;flex-wrap:wrap;align-items:center;overflow:hidden;background:var(--n-search-color-bg);border-bottom:1px solid var(--n-search-color-border)}.n-search-input-wrapper{position:relative;display:flex;width:100%;height:var(--n-search-input-height);align-items:center}.n-search-input{position:relative;display:inline-flex;box-sizing:border-box;background:transparent;inline-size:100%;padding-block:.75rem;padding-inline:var(--n-search-padding-inline);flex:1;border:none;outline:none;font-size:1rem;color:var(--color-text-1)}.n-search-input-clear{border:none;color:var(--n-search-color-text-secondary);font-size:var(--font-size-text-sm);margin-inline:var(--space-m);height:min-content;padding:0;outline-offset:.5rem;background:none;cursor:pointer}.n-search-input-wrapper:after,.n-search-footer:after{content:"";display:block;width:200%;height:1px;background:var(--n-search-color-border);position:absolute;bottom:0;left:0}.n-search-input::placeholder{color:var(--n-search-color-text-secondary)}.n-search-links{padding:var(--space-2xs);height:100%}.n-search-label{display:flex;padding-inline-start:var(--n-search-padding-inline);align-items:center}.n-results-list{padding-inline:0;padding-block-end:var(--space-2xs)}.n-results-info{font-family:var(--font-family-display);font-size:var(--step--1);padding-inline:var(--space-xs)}.n-search-label>*{display:inline-block;margin:0}.n-search-icon{display:flex;width:var(--n-search-icon-size, 1em);height:var(--n-search-icon-size, 1em);color:var(--n-search-color-text-secondary)}.n-search-term{font-weight:var(--font-bold);color:var(--n-search-color-text-secondary)}.n-search-window{height:var(--n-search-container-height);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:var(--space-s);margin-block:0;background:var(--n-search-color-bg)}.n-search-feedback{height:calc(100% - 70px);display:grid;place-content:center}.n-search-footer{position:relative;display:flex;gap:var(--space-m);padding:var(--space-2xs) var(--space-s);height:var(--n-search-footer-height)}.n-search-footer:after{top:0}.n-search-footer-tip{color:var(--n-search-color-text-secondary);display:flex;gap:var(--space-2xs);align-items:center;font-size:var(--font-size-text-sm)}.n-search-modal{transition:display .2s allow-discrete,overlay .2s allow-discrete,width .15s ease-in-out;animation:closeSearch .2s forwards}.n-search-modal[open]{animation:openSearch .2s forwards}.n-search-modal[data-state=search]>*{opacity:0;animation:appearContainer .12s ease-in-out forwards;animation-delay:.14s}@keyframes appearContainer{0%{opacity:0}to{opacity:1}}@keyframes openSearch{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes closeSearch{0%{opacity:1;transform:scale(1)}50%{opacity:.3}to{opacity:0;transform:scale(.9)}}.n-search-modal::backdrop{animation:closeSearchBackdrop .2s forwards}.n-search-modal[open]::backdrop{animation:openSearchBackdrop .2s forwards}@keyframes openSearchBackdrop{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}@keyframes closeSearchBackdrop{0%{opacity:1;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}50%{opacity:.3}to{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}
+.n-keyboard-key{--n-key-text-size: .8em;--n-key-border-radius: 6px;--n-key-text-color: currentColor;--n-key-bg-color: transparent;display:flex;gap:calc(var(--space-3xs) * .5);font-size:var(--n-key-text-size);color:var(--n-key-text-color);background:var(--n-key-bg-color);border:1px solid currentColor;border-radius:var(--n-key-border-radius);padding:var(--n-key-padding-block, .05em) var(--n-key-padding-inline, .3em)}.n-search-heading{--n-search-heading-weight: var(--font-weight-semibold, 400);--n-search-heading-size: var(--font-size-text-xs, 13px);--n-search-heading-color: var(--color-text-weak, #757575);font-size:var(--n-search-heading-size);font-weight:var(--n-search-heading-weight);font-family:var(--font-family-mono);color:var(--n-search-heading-color);padding-inline:var(--space-xs);margin-block:var(--space-xs);letter-spacing:.2px}.n-search-link{--n-search-icon-size: 1.25em;box-sizing:border-box;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-s, 1rem);align-items:center;padding:var(--n-search-link-padding-block, 1em) var(--n-search-link-padding-inline, 1em);font-size:var(--font-size-text-sm);font-weight:var(--font-weight-regular);text-decoration:none;cursor:pointer;width:100%;border:none;text-align:left;outline:none;border-radius:var(--radius-l)}.n-search-link-body{flex:1;width:80%;color:var(--color-text-weak);text-wrap:pretty}.n-search-link:is(:hover,:focus-visible){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-visible) .n-search-link-icon [data-icon=caretRight]{opacity:1}.n-search-link:is(:hover,:focus-visible) .n-search-link-icon :where(#ask-netlify-eyelid-left,#ask-netlify-eyelid-right){--n-ask-netlify-eyelid-color: var(--n-search-color-bg-2);animation:askEyeBlink 4s infinite;animation-delay:.2s}.n-search-link-icon :where(#ask-netlify-eyelid-left,#ask-netlify-eyelid-right){--n-ask-netlify-eyelid-color: var(--search-bg-color)}.n-search-link-title{font-weight:var(--font-weight-medium);color:var(--color-text-1);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-weak);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-excerpt mark{color:var(--mark-color, currentColor);background-color:var(--mark-bg, var(--color-highlight))}.n-search-link-icon,.n-search-link-icon svg{display:flex;width:var(--n-search-icon-size);height:var(--n-search-icon-size);color:var(--n-search-color-icon)}.n-search-link-icon [data-icon=caretRight]{width:1em;opacity:0}.n-search-link-label{margin-inline-end:var(--space-3xs)}.n-search-link-badge{display:inline-block;width:max-content;font-size:.7em;padding:.1em .4em;position:relative;bottom:.3em;color:var(--n-search-link-badge-text-color, var(--color-disabled-text));background:var(--n-search-link-badge-color, var(--color-disabled-bg));border:1px solid var(--n-search-link-badge-border, var(--color-disabled-border));border-radius:3px}.n-search-link-badge[data-resource=blog]{--n-search-link-badge-color: var(--color-info-bg);--n-search-link-badge-text-color: var(--color-info-text);--n-search-link-badge-border: var(--color-info-border)}.n-search-link-badge[data-resource=changelog]{--n-search-link-badge-color: var(--color-warning-bg);--n-search-link-badge-text-color: var(--color-warning-text);--n-search-link-badge-border: var(--color-warning-border)}.n-search-link-badge[data-resource=guide]{--n-search-link-badge-color: var(--color-highlight-bg);--n-search-link-badge-text-color: var(--color-highlight-text);--n-search-link-badge-border: var(--color-highlight-border)}.n-search-link-badge[data-resource=knowledge-base]{--n-search-link-badge-color: var(--color-success-bg);--n-search-link-badge-text-color: var(--color-success-text);--n-search-link-badge-border: var(--color-success-border)}.n-loader-dots-spinner{width:var(--n-loader-dot-w, 50px);aspect-ratio:1;--_c: no-repeat radial-gradient(farthest-side, var(--n-loader-dot-color, var(--teal-600)) 92%, #0000);background:var(--_c) top,var(--_c) left,var(--_c) right,var(--_c) bottom;background-size:12px 12px;animation:l7 1s infinite}@keyframes l7{to{transform:rotate(.5turn)}}.n-search-modal{--n-search-padding-inline: var(--space-s);--n-search-color-text: var(--color-text-1, currentColor);--n-search-color-text-secondary: var(--color-text-weak, currentColor);--n-search-color-icon: var(--search-icon-color);--n-search-color-bg: var(--search-bg-color);--n-search-color-bg-2: var(--color-bg-3);--n-search-color-border: var(--color-bg-3);--n-search-border-radius: 1.3rem;--n-search-max-w: 600px;--n-search-text-highlight: var(--search-highlight-color);--n-search-input-height: 50px;--n-search-footer-height: 40px;--n-search-container-height: min(50dvh, 26.5rem)}.n-search-modal{padding:0;border:none;border-radius:var(--n-search-border-radius);width:min(var(--n-search-max-w),100%);margin:auto;background:var(--n-search-color-bg);transition-delay:.2s}.n-search-modal[data-state=ask]{--n-search-max-w: 800px}.n-search-container{--mark-bg: var(--n-search-text-highlight);display:grid;width:min(var(--n-search-max-w),100%);background-color:var(--n-search-color-bg);border-radius:var(--n-search-border-radius);overflow:hidden}.n-search-bar{display:flex;flex-wrap:wrap;align-items:center;overflow:hidden;background:var(--n-search-color-bg);border-bottom:1px solid var(--n-search-color-border)}.n-search-input-wrapper{position:relative;display:flex;width:100%;height:var(--n-search-input-height);align-items:center}.n-search-input{position:relative;display:inline-flex;box-sizing:border-box;background:transparent;inline-size:100%;padding-block:.75rem;padding-inline:var(--n-search-padding-inline);flex:1;border:none;outline:none;font-size:1rem;color:var(--color-text-1)}.n-search-input-clear{border:none;color:var(--n-search-color-text-secondary);font-size:var(--font-size-text-sm);margin-inline:var(--space-m);height:min-content;padding:0;outline-offset:.5rem;background:none;cursor:pointer}.n-search-input-wrapper:after,.n-search-footer:after{content:"";display:block;width:200%;height:1px;background:var(--n-search-color-border);position:absolute;bottom:0;left:0}.n-search-input::placeholder{color:var(--n-search-color-text-secondary)}.n-search-links{padding:var(--space-2xs);height:100%}.n-search-label{display:flex;padding-inline-start:var(--n-search-padding-inline);align-items:center}.n-results-list{padding-inline:0;padding-block-end:var(--space-2xs)}.n-results-info{font-family:var(--font-family-display);font-size:var(--step--1);padding-inline:var(--space-xs)}.n-search-label>*{display:inline-block;margin:0}.n-search-icon{display:flex;width:var(--n-search-icon-size, 1em);height:var(--n-search-icon-size, 1em);color:var(--n-search-color-text-secondary)}.n-search-term{font-weight:var(--font-bold);color:var(--n-search-color-text-secondary)}.n-search-window{height:var(--n-search-container-height);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:var(--space-s);margin-block:0;background:var(--n-search-color-bg)}.n-search-feedback{height:calc(100% - 70px);display:grid;place-content:center}.n-search-footer{position:relative;display:flex;gap:var(--space-m);padding:var(--space-2xs) var(--space-s);height:var(--n-search-footer-height)}.n-search-footer:after{top:0}.n-search-footer-tip{color:var(--n-search-color-text-secondary);display:flex;gap:var(--space-2xs);align-items:center;font-size:var(--font-size-text-sm)}.n-search-modal{transition:display .2s allow-discrete,overlay .2s allow-discrete,width .15s ease-in-out;animation:closeSearch .2s forwards}.n-search-modal[open]{animation:openSearch .2s forwards}.n-search-modal[data-state=search]>*{opacity:0;animation:appearContainer .12s ease-in-out forwards;animation-delay:.14s}@keyframes appearContainer{0%{opacity:0}to{opacity:1}}@keyframes openSearch{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes closeSearch{0%{opacity:1;transform:scale(1)}50%{opacity:.3}to{opacity:0;transform:scale(.9)}}.n-search-modal::backdrop{animation:closeSearchBackdrop .2s forwards}.n-search-modal[open]::backdrop{animation:openSearchBackdrop .2s forwards}@keyframes openSearchBackdrop{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}@keyframes closeSearchBackdrop{0%{opacity:1;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}50%{opacity:.3}to{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}

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

@@ -2,13 +2,13 @@ import { u as a } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
 import "../../../../../chunks/hooks.module.DRcxknIz.js";
 import { useSearchAnalytics as k } from "../../hooks/useSearchAnalytics.js";
 import i from "../../../Icon/index.js";
-import '../../../../../assets/SearchLink.css';const u = ({
+import '../../../../../assets/SearchLink.css';const g = ({
   as: h = "a",
-  icon: e,
+  icon: n,
   label: s,
   url: m,
   excerpt: c,
-  resource: n,
+  resource: e,
   onClick: l,
   children: r
 }) => {
@@ -22,12 +22,12 @@ import '../../../../../assets/SearchLink.css';const u = ({
         l && l(), t(d);
       },
       children: [
-        e && /* @__PURE__ */ a("span", { className: "n-search-link-icon", children: /* @__PURE__ */ a(i, { name: e }) }),
+        n && /* @__PURE__ */ a("span", { className: "n-search-link-icon", children: /* @__PURE__ */ a(i, { name: n }) }),
         /* @__PURE__ */ a("div", { className: "n-search-link-body", children: [
           /* @__PURE__ */ a("p", { className: "n-search-link-title", children: [
             s && /* @__PURE__ */ a("span", { className: "n-search-link-label", children: s }),
             r && /* @__PURE__ */ a("span", { className: "n-search-link-label", children: r }),
-            n && /* @__PURE__ */ a("span", { className: "n-search-link-badge", "data-resource": n, children: n })
+            e && /* @__PURE__ */ a("span", { className: "n-search-link-badge", "data-resource": e, children: e.replace(/-/g, " ") })
           ] }),
           c && /* @__PURE__ */ a("p", { className: "n-search-link-excerpt", dangerouslySetInnerHTML: { __html: c } })
         ] }),
@@ -37,5 +37,5 @@ import '../../../../../assets/SearchLink.css';const u = ({
   );
 };
 export {
-  u as default
+  g as default
 };

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

@@ -4,7 +4,7 @@ export interface SearchLinkProps {
     as?: any;
     icon?: IconName;
     label?: string;
-    resource?: 'blog' | 'changelog' | 'docs' | 'guide';
+    resource?: 'blog' | 'changelog' | 'docs' | 'guide' | 'knowledge-base';
     url?: string;
     excerpt?: string;
     children?: ComponentChildren;
@@ -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.6",
   "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/SearchLink/SearchLink.css

@@ -109,3 +109,8 @@
   --n-search-link-badge-text-color: var(--color-highlight-text);
   --n-search-link-badge-border: var(--color-highlight-border);
 }
+.n-search-link-badge[data-resource='knowledge-base'] {
+  --n-search-link-badge-color: var(--color-success-bg);
+  --n-search-link-badge-text-color: var(--color-success-text);
+  --n-search-link-badge-border: var(--color-success-border);
+}

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

@@ -36,7 +36,7 @@ const SearchLink = ({
           {children && <span className="n-search-link-label">{children}</span>}
           {resource && (
             <span className="n-search-link-badge" data-resource={resource}>
-              {resource}
+              {resource.replace(/-/g, ' ')}
             </span>
           )}
         </p>

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

@@ -5,7 +5,7 @@ export interface SearchLinkProps {
   as?: any;
   icon?: IconName;
   label?: string;
-  resource?: 'blog' | 'changelog' | 'docs' | 'guide';
+  resource?: 'blog' | 'changelog' | 'docs' | 'guide' | 'knowledge-base';
   url?: string;
   excerpt?: string;
   children?: ComponentChildren;
@@ -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 {