@netlify/spark-ui 1.12.0-alpha.2 → 1.12.0

package/dist/assets/AskNetlify.css

@@ -1 +1 @@
-.n-fadeIn{opacity:0;animation:fadeIn var(--animation-duration, .3s) ease-out forwards}.n-fadeInUp{opacity:0;transform:translateY(var(--animation-transformY, 5px));animation:fadeInUp var(--animation-duration, .3s) ease-out forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.n-ask-chat-container{opacity:0;animation:appearContainer .12s ease-in-out forwards;animation-delay:.14s}.n-ask-conversation{display:grid;align-items:flex-end;gap:var(--space-s);height:calc(var(--n-search-container-height) + var(--n-search-footer-height));padding:var(--n-search-padding-inline);overflow-y:auto;scroll-behavior:smooth;grid-template-rows:1fr}.n-ask-form{display:flex;align-items:center;position:relative;height:var(--n-search-input-height);background-color:var(--search-input-bg-color)}.n-ask-form:after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:1px;background:var(--color-bg-3)}.n-ask-question{border:none;border-radius:var(--radius-pill);transform:translate(-.75rem);color:var(--color-text-1);font-size:var(--step--1);font-weight:var(--font-weight-regular);text-align:left;text-wrap:pretty;display:flex;align-items:center;gap:var(--space-2xs);transition:background-color .2s ease-out}.n-ask-question [data-icon=caretRight]{opacity:0;color:var(--color-text-weaker);transform:translate(-3px);transition:transform .2s ease-out}.n-ask-question:hover{background-color:var(--n-search-color-bg-2)}.n-ask-question:hover [data-icon=caretRight]{opacity:1;transform:translate(0)}.n-ask-question-list .n-ask-question-list-item{position:relative;width:fit-content;opacity:0;transform:translateY(10px);animation:fadeInUp .5s forwards}.n-ask-message{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-s)}.n-ask-message:first-of-type{margin-block-start:var(--space-2xl)}.n-ask-message-bubble{width:fit-content;max-width:85%;padding:var(--space-xs) var(--space-s);background:var(--search-answer-message-color);border-radius:var(--radius-l);font-size:var(--step-0)}.n-ask-user-message{margin-inline-start:auto;background:var(--search-user-message-color)}.n-ask-sources{margin-block-start:var(--space-m)}.n-ask-sources-title{font-size:var(--step-0);font-weight:var(--font-weight-bold)}.n-ask-sources a{font-size:var(--step--1)}.n-ask-sources details summary::marker{display:none;content:none}.n-ask-sources details{background:var(--search-source-list-color);padding:var(--space-xs) var(--space-xs);border-radius:var(--radius-l)}.n-ask-sources details summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs);cursor:pointer}.n-ask-sources details ul{margin-block-start:var(--space-3xs)}.n-ask-sources [data-icon=caretRight]{width:.8em;display:inline-block;transform:rotate(90deg);height:auto;color:var(--color-text-weaker)}.n-ask-sources details[open] [data-icon=caretRight]{transform:rotate(270deg)}.n-ask-input{border:none;outline:none;padding-inline:var(--n-search-padding-inline)}.n-ask-form-submit{padding:.7rem;margin-inline-end:var(--space-2xs);border:none;border-radius:var(--radius-pill);background:var(--search-submit-btn-bg-color);color:var(--neutral-000);transition:background-color .15s ease-out}.n-ask-form-submit>svg{width:1rem;height:auto;aspect-ratio:1 / 1;border-radius:1.5px;transition:opacity .15s ease-out}.n-ask-form-submit[disabled]{background:var(--neutral-500)}.n-ask-form-submit[disabled]>*{opacity:.5}.n-ask-button-back{position:absolute;z-index:1;width:fit-content;margin:1rem;padding:.5rem 1rem;background:var(--search-back-btn-bg-color);border:.5px solid var(--color-bg-3);border-radius:var(--radius-pill);font-size:var(--step--1);color:var(--color-text-1);cursor:pointer}.n-ask-button-back [data-icon=caretRight]{color:var(--color-text-weaker);transform:rotate(180deg)}.n-ask-prose{font-size:var(--step--0)}.n-ask-prose>*+*{margin-top:var(--flow-space, var(--space-s))}.n-ask-prose :where(ol,ul,li)>*+*{margin-top:var(--flow-space, var(--space-3xs))}.n-ask-prose h1,.n-ask-prose h2,.n-ask-prose h3{font-size:var(--step-1);font-weight:var(--font-weight-bold)}.n-ask-prose h4,.n-ask-prose h5,.n-ask-prose h6{font-size:var(--step-0);font-weight:var(--font-weight-bold)}.n-ask-prose pre{max-width:100%;padding:var(--space-s);background:var(--neutral-light-700);border-radius:var(--radius-m);box-sizing:border-box;color:var(--neutral-100);overflow-x:auto}.n-ask-prose code{overflow-x:auto}.n-ask-prose code[class*=language-],.n-ask-prose pre[class*=language-]{display:block;font-size:var(--font-size-text-xs)}.n-ask-message-loader{width:2.5rem;height:auto;display:block;color:var(--search-loading-color)}.n-ask-message-loader :where(#ask-netlify-tick-1,#ask-netlify-tick-2,#ask-netlify-tick-3){opacity:0;animation:fadeIn .8s ease-in-out infinite}.n-ask-message-loader #ask-netlify-tick-1{animation-delay:.1s}.n-ask-message-loader #ask-netlify-tick-2{animation-delay:.2s}.n-ask-message-loader #ask-netlify-tick-3{animation-delay:.3s}.n-ask-message-loader :where(#ask-netlify-eyelid-left,#ask-netlify-eyelid-right){--n-ask-netlify-eyelid-color: var(--search-bg-color);transform-origin:top center;transform:scaleY(1.035);animation:askEyeBlink 4s infinite;animation-delay:1s}@keyframes askEyeBlink{0%,5%{transform:scaleY(1.035)}6%,10%{transform:scaleY(1.3)}11%,15%{transform:scaleY(1.035)}16%,20%{transform:scaleY(1.3)}21%,to{transform:scaleY(1.035)}}
+.n-fadeIn{opacity:0;animation:fadeIn var(--animation-duration, .3s) ease-out forwards}.n-fadeInUp{opacity:0;transform:translateY(var(--animation-transformY, 5px));animation:fadeInUp var(--animation-duration, .3s) ease-out forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.n-ask-chat-container{opacity:0;animation:appearContainer .12s ease-in-out forwards;animation-delay:.14s}.n-ask-conversation{display:grid;align-items:flex-end;gap:var(--space-s);height:calc(var(--n-search-container-height) + var(--n-search-footer-height));padding:var(--n-search-padding-inline);overflow-y:auto;scroll-behavior:smooth;grid-auto-rows:1fr}.n-ask-form{display:flex;align-items:center;position:relative;height:var(--n-search-input-height);background-color:var(--search-input-bg-color)}.n-ask-form:after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:1px;background:var(--color-bg-3)}.n-ask-question{border:none;border-radius:var(--radius-pill);transform:translate(-.75rem);color:var(--color-text-1);background:none;padding:var(--space-2xs, .5rem);font-size:var(--step--1, .9rem);font-weight:var(--font-weight-regular);text-align:left;text-wrap:pretty;cursor:pointer;display:flex;align-items:center;gap:var(--space-2xs);transition:background-color .2s ease-out}.n-ask-question [data-icon=caretRight]{opacity:0;height:.8em;color:var(--color-text-weaker);transform:translate(-3px);transition:transform .2s ease-out}.n-ask-question:hover{background-color:var(--n-search-color-bg-2)}.n-ask-question:hover [data-icon=caretRight]{opacity:1;transform:translate(0)}.n-ask-question-list{padding:0}.n-ask-question-list .n-ask-question-list-item{position:relative;width:fit-content;opacity:0;transform:translateY(10px);animation:fadeInUp .5s forwards}.n-ask-message{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-s);font-size:var(--font-size-text-md, 1rem)}.n-ask-message:first-of-type{margin-block-start:var(--space-2xl)}.n-ask-message-bubble{width:fit-content;max-width:85%;padding:var(--space-xs) var(--space-s);background:var(--search-answer-message-color);border-radius:var(--radius-l);font-size:var(--step-0)}.n-ask-user-message{margin-inline-start:auto;background:var(--search-user-message-color)}.n-ask-sources{margin-block-start:var(--space-m)}.n-ask-sources-title{font-size:var(--step-0);font-weight:var(--font-weight-bold)}.n-ask-sources a{font-size:var(--step--1)}.n-ask-sources details summary::marker{display:none;content:none}.n-ask-sources details{background:var(--search-source-list-color);padding:var(--space-xs) var(--space-xs);border-radius:var(--radius-l)}.n-ask-sources details summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs);cursor:pointer}.n-ask-sources details ul{margin-block-start:var(--space-3xs)}.n-ask-sources [data-icon=caretRight]{width:.8em;display:inline-block;transform:rotate(90deg);height:auto;color:var(--color-text-weaker)}.n-ask-sources details[open] [data-icon=caretRight]{transform:rotate(270deg)}.n-ask-input{border:none;outline:none;padding-inline:var(--n-search-padding-inline)}.n-ask-form-submit{display:flex;padding:.7rem;margin-inline-end:var(--space-2xs);border:none;border-radius:var(--radius-pill);background:var(--search-submit-btn-bg-color);color:var(--neutral-000);transition:background-color .15s ease-out}.n-ask-form-submit>svg{width:1rem;height:auto;aspect-ratio:1 / 1;border-radius:1.5px;transition:opacity .15s ease-out}.n-ask-form-submit[disabled]{background:var(--neutral-500)}.n-ask-form-submit[disabled]>*{opacity:.5}.n-ask-button-back{position:absolute;z-index:1;width:fit-content;margin:1rem;padding:.5rem 1rem;background:var(--search-back-btn-bg-color);border:.5px solid var(--color-bg-3);border-radius:var(--radius-pill);font-size:var(--font-size-text-md, 1rem);font-weight:var(--font-weight-semibold, 500);color:var(--color-text-1);cursor:pointer}.n-ask-button-back [data-icon=caretRight]{color:var(--color-text-weak);transform:rotate(180deg)}.n-ask-prose{font-size:var(--step--0)}.n-ask-prose>*+*{margin-top:var(--flow-space, var(--space-s))}.n-ask-prose :where(ol,ul,li)>*+*{margin-top:var(--flow-space, var(--space-3xs))}.n-ask-prose h1,.n-ask-prose h2,.n-ask-prose h3{font-size:var(--step-1);font-weight:var(--font-weight-bold)}.n-ask-prose h4,.n-ask-prose h5,.n-ask-prose h6{font-size:var(--step-0);font-weight:var(--font-weight-bold)}.n-ask-prose pre{max-width:100%;padding:var(--space-s);background:var(--neutral-light-700);border-radius:var(--radius-m);box-sizing:border-box;color:var(--neutral-100);overflow-x:auto}.n-ask-prose code{overflow-x:auto}.n-ask-prose code[class*=language-],.n-ask-prose pre[class*=language-]{display:block;font-size:var(--font-size-text-xs)}.n-ask-message-loader{width:2.5rem;height:auto;display:block;color:var(--search-loading-color)}.n-ask-message-loader :where(#ask-netlify-tick-1,#ask-netlify-tick-2,#ask-netlify-tick-3){opacity:0;animation:fadeIn .8s ease-in-out infinite}.n-ask-message-loader #ask-netlify-tick-1{animation-delay:.1s}.n-ask-message-loader #ask-netlify-tick-2{animation-delay:.2s}.n-ask-message-loader #ask-netlify-tick-3{animation-delay:.3s}.n-ask-message-loader :where(#ask-netlify-eyelid-left,#ask-netlify-eyelid-right){--n-ask-netlify-eyelid-color: var(--search-bg-color);transform-origin:top center;transform:scaleY(1.035);animation:askEyeBlink 4s infinite;animation-delay:1s}@keyframes askEyeBlink{0%,5%{transform:scaleY(1.035)}6%,10%{transform:scaleY(1.3)}11%,15%{transform:scaleY(1.035)}16%,20%{transform:scaleY(1.3)}21%,to{transform:scaleY(1.035)}}

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}.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-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-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/SearchInput.js

@@ -3,11 +3,11 @@ import { d as u, y as h } from "../../../../chunks/hooks.module.DGkdD5n9.js";
 import { u as o } from "../../../../chunks/useTimeout.Cq4aqnDe.js";
 import d from "../../Icon/index.js";
 const I = (a) => {
-  const [i, l] = u(""), { reset: t, run: r } = o((n) => {
+  const [i, l] = u(""), { reset: r, run: t } = o((n) => {
     a.setSearchTerm(n);
   }, 300), s = (n) => {
     const c = n.target;
-    l(c.value), t(), r(c.value);
+    l(c.value), r(), t(c.value);
   };
   return h(() => {
     a.initialValue && l(a.initialValue);
@@ -21,6 +21,7 @@ const I = (a) => {
       {
         class: "n-search-input",
         type: "text",
+        name: "search",
         value: i,
         placeholder: a.placeholder || "Search...",
         onInput: s
@@ -31,7 +32,7 @@ const I = (a) => {
       {
         class: "n-search-input-clear",
         onClick: () => {
-          l(""), t(), r("");
+          l(""), r(), t("");
         },
         children: "Clear"
       }

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

@@ -4,60 +4,60 @@ import t from "./SearchLink/SearchLink.js";
 import m from "./SearchLinkThemeToggle.js";
 import { Fragment as r } from "preact";
 const o = ({
-  searchTerm: i,
-  setModalState: l
+  searchTerm: e,
+  setModalState: c
 }) => /* @__PURE__ */ n(
   t,
   {
     as: "button",
     icon: "askNetlify",
     excerpt: "Get an instant AI-generated answer",
-    onClick: () => l({ current: "ask" }),
+    onClick: () => c({ current: "ask" }),
     children: [
-      "Ask Netlify: ",
-      /* @__PURE__ */ n("span", { className: "n-search-term", children: i })
+      "Ask Netlify AI: ",
+      /* @__PURE__ */ n("span", { className: "n-search-term", children: e })
     ]
   }
-), f = ({ searchTerm: i }) => /* @__PURE__ */ n("div", { className: "n-search-feedback", children: /* @__PURE__ */ n("p", { className: "n-results-info", children: [
+), f = ({ 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: i })
+  /* @__PURE__ */ n("span", { className: "n-search-term", children: e })
 ] }) }), N = ({
-  setModalState: i,
-  searchLoading: l,
-  searchTerm: e,
+  setModalState: e,
+  searchLoading: c,
+  searchTerm: i,
   results: s
 }) => {
-  const c = e === "no results" || !l && (!s || s.length === 0);
+  const l = !c && (!s || s.length === 0);
   return /* @__PURE__ */ n(r, { children: [
-    /* @__PURE__ */ n(o, { searchTerm: e, setModalState: i }),
-    c ? /* @__PURE__ */ n(f, { searchTerm: e }) : /* @__PURE__ */ n("ul", { className: "n-results-list", role: "list", children: s == null ? void 0 : s.map((a, d) => /* @__PURE__ */ n("li", { className: "n-results-list-item", children: /* @__PURE__ */ n(t, { ...a }) }, d)) })
+    /* @__PURE__ */ n(o, { searchTerm: i, setModalState: e }),
+    l ? /* @__PURE__ */ n(f, { searchTerm: i }) : /* @__PURE__ */ n("ul", { className: "n-results-list", role: "list", children: s == null ? void 0 : s.map((a, d) => /* @__PURE__ */ n("li", { className: "n-results-list-item", children: /* @__PURE__ */ n(t, { ...a }) }, d)) })
   ] });
 };
-function w({
-  setModalState: i,
-  searchLoading: l,
-  searchTerm: e,
+function A({
+  setModalState: e,
+  searchLoading: c,
+  searchTerm: i,
   results: s,
-  children: c
+  children: l
 }) {
-  const a = (e == null ? void 0 : e.length) > 1;
-  return /* @__PURE__ */ n("div", { className: "n-search-window", children: /* @__PURE__ */ n("div", { className: "n-search-links", children: a ? l ? /* @__PURE__ */ n(r, { children: [
-    /* @__PURE__ */ n(o, { searchTerm: e, setModalState: i }),
+  const a = (i == null ? void 0 : i.length) > 1;
+  return /* @__PURE__ */ n("div", { className: "n-search-window", children: /* @__PURE__ */ n("div", { className: "n-search-links", children: a ? c ? /* @__PURE__ */ n(r, { children: [
+    /* @__PURE__ */ n(o, { searchTerm: i, setModalState: e }),
     /* @__PURE__ */ n("div", { className: "n-search-feedback", children: /* @__PURE__ */ n("div", { className: "n-loader-dots-spinner" }) })
   ] }) : /* @__PURE__ */ n(
     N,
     {
-      setModalState: i,
-      searchLoading: l,
-      searchTerm: e,
+      setModalState: e,
+      searchLoading: c,
+      searchTerm: i,
       results: s
     }
   ) : /* @__PURE__ */ n(r, { children: [
-    c,
+    l,
     /* @__PURE__ */ n(h, { children: "Actions" }),
     /* @__PURE__ */ n(m, {})
   ] }) }) });
 }
 export {
-  w as default
+  A as default
 };

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

@@ -41,7 +41,7 @@ function x() {
     state: d,
     actions: {
       setSearchTerm: (e) => {
-        s((t) => ({ ...t, results: [], searchTerm: e })), h(), m(e);
+        s((t) => ({ ...t, searchTerm: e })), h(), m(e);
       },
       submitSearch: c
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "1.12.0-alpha.2",
+  "version": "1.12.0",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",
@@ -68,4 +68,4 @@
     "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1"
   }
-}
+}

package/packages/components/preact/AskNetlify/AskNetlify.css

@@ -17,7 +17,7 @@
   padding: var(--n-search-padding-inline);
   overflow-y: auto;
   scroll-behavior: smooth;
-  grid-template-rows: 1fr;
+  grid-auto-rows: 1fr;
 }
 
 .n-ask-form {
@@ -47,10 +47,13 @@
   border-radius: var(--radius-pill);
   transform: translateX(-0.75rem);
   color: var(--color-text-1);
-  font-size: var(--step--1);
+  background: none;
+  padding: var(--space-2xs, 0.5rem);
+  font-size: var(--step--1, 0.9rem);
   font-weight: var(--font-weight-regular);
   text-align: left;
   text-wrap: pretty;
+  cursor: pointer;
   display: flex;
   align-items: center;
   gap: var(--space-2xs);
@@ -59,6 +62,7 @@
 
 .n-ask-question [data-icon='caretRight'] {
   opacity: 0;
+  height: 0.8em;
   color: var(--color-text-weaker);
   transform: translateX(-3px);
   transition: transform 200ms ease-out;
@@ -73,6 +77,10 @@
   }
 }
 
+.n-ask-question-list {
+  padding: 0;
+}
+
 .n-ask-question-list .n-ask-question-list-item {
   position: relative;
   width: fit-content;
@@ -85,6 +93,7 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: var(--space-s);
+  font-size: var(--font-size-text-md, 1rem);
 }
 
 .n-ask-message:first-of-type {
@@ -163,6 +172,7 @@
 }
 
 .n-ask-form-submit {
+  display: flex;
   padding: 0.7rem;
   margin-inline-end: var(--space-2xs);
   border: none;
@@ -200,13 +210,14 @@
   background: var(--search-back-btn-bg-color);
   border: 0.5px solid var(--color-bg-3);
   border-radius: var(--radius-pill);
-  font-size: var(--step--1);
+  font-size: var(--font-size-text-md, 1rem);
+  font-weight: var(--font-weight-semibold, 500);
   color: var(--color-text-1);
   cursor: pointer;
 }
 
 .n-ask-button-back [data-icon='caretRight'] {
-  color: var(--color-text-weaker);
+  color: var(--color-text-weak);
   transform: rotate(180deg);
 }
 

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

@@ -41,6 +41,7 @@ const SearchInput = (props: Props) => {
       <input
         class="n-search-input"
         type="text"
+        name="search"
         value={value}
         placeholder={props.placeholder || 'Search...'}
         onInput={handleInput}

package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.css

@@ -83,6 +83,8 @@
   height: min-content;
   padding: 0;
   outline-offset: 0.5rem;
+  background: none;
+  cursor: pointer;
 }
 
 .n-search-input-wrapper::after,
@@ -113,6 +115,7 @@
 }
 
 .n-results-list {
+  padding-inline: 0;
   padding-block-end: var(--space-2xs);
 }
 

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

@@ -17,7 +17,7 @@ const AskNetlifyLink = ({
     excerpt="Get an instant AI-generated answer"
     onClick={() => setModalState({ current: 'ask' })}
   >
-    Ask Netlify: <span className="n-search-term">{searchTerm}</span>
+    Ask Netlify AI: <span className="n-search-term">{searchTerm}</span>
   </SearchLink>
 );
 
@@ -35,8 +35,7 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({
   searchTerm,
   results,
 }) => {
-  const noResults =
-    searchTerm === 'no results' || (!searchLoading && (!results || results.length === 0));
+  const noResults = !searchLoading && (!results || results.length === 0);
 
   return (
     <>

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

@@ -65,7 +65,7 @@ export function useSearch() {
   };
 
   const handleSearchChange = (query: string) => {
-    setSearchState(prev => ({ ...prev, results: [], searchTerm: query }));
+    setSearchState(prev => ({ ...prev, searchTerm: query }));
     reset();
     run(query);
   };