@netlify/spark-ui 1.5.0-alpha.12 → 1.5.0-alpha.13

package/dist/assets/AskNetlify.css

@@ -1 +1 @@
-.chat-container{opacity:0;animation:appearContainer .12s ease-in-out forwards;animation-delay:.14s}@keyframes appearContainer{0%{opacity:0}to{opacity:1}}.conversation{height:calc(var(--n-search-container-height) + var(--n-search-footer-height));padding:var(--n-search-padding-inline);scroll-behavior:smooth;overflow-y:auto;display:grid;align-items:flex-end;gap:var(--space-s)}.question{border:none;color:var(--color-text-1);font-weight:var(--font-weight-regular);font-size:var(--step--1);border-radius:var(--radius-pill);transform:translate(-.75rem);text-wrap:pretty;text-align:left}.question-list li{opacity:0;transform:translateY(10px);animation:fadeInUp .5s forwards}.question-list li:nth-child(1){animation-delay:.5s}.question-list li:nth-child(2){animation-delay:.3s}.question-list li:nth-child(3){animation-delay:.1s}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.message{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-s);margin-block-start:var(--space-2xl)}.message-bubble{padding:var(--space-xs) var(--space-s);background:var(--search-answer-message-color);border-radius:var(--radius-l);width:fit-content;max-width:85%;font-size:var(--step-0)}.prose{font-size:var(--step--0)}.prose>*+*{margin-top:var(--flow-space, var(--space-s))}.prose :where(ol,ul,li)>*+*{margin-top:var(--flow-space, var(--space-3xs))}.prose h1,.prose h2,.prose h3{font-size:var(--step-1)}.prose h4,.prose h5,.prose h6{font-size:var(--step-0)}.prose pre{background:var(--neutral-light-700);border-radius:var(--radius-m);max-width:100%;box-sizing:border-box;padding:var(--space-s);color:var(--neutral-100);overflow-x:auto}.prose code{overflow-x:auto}.prose code[class*=language-],.prose pre[class*=language-]{display:block;font-size:var(--font-size-text-xs)}.user-message{margin-inline-start:auto;background:var(--search-user-message-color)}.form-wrapper{display:flex;align-items:center;position:relative;height:var(--n-search-input-height)}.form-wrapper:after{content:"";display:block;width:100%;height:1px;background:var(--color-bg-3);position:absolute;top:0;left:0}.form-input{border:none;outline:none;padding-inline:var(--n-search-padding-inline)}.form-submit{padding:.7rem;border-radius:var(--radius-pill);margin-inline-end:var(--space-2xs);border:none;background:var(--color-link-1);color:var(--neutral-000);transition:background-color .15s ease-out}.form-submit>svg{width:1rem;height:auto;aspect-ratio:1 / 1;border-radius:1.5px;transition:opacity .15s ease-out}.form-submit[disabled]{background:var(--neutral-500)}.form-submit[disabled]>*{opacity:.5}.button-back{width:fit-content;background:transparent;position:absolute;z-index:1;padding:.5rem 1rem;background:var(--search-back-btn-bg-color);margin:1rem;border:2px solid var(--color-bg-3);border-radius:var(--radius-pill);font-size:var(--step--1);border:1px solid;cursor:pointer;border-color:var(--color-bg-3);color:var(--color-text-1);border-width:.5px}.message-loader{width:43px;height:auto;display:block;color:var(--search-loading-color)}.message-loader :where(#ask-netlify-tick-1,#ask-netlify-tick-2,#ask-netlify-tick-3){opacity:0;animation:tickFlicker .8s ease-in-out infinite}#ask-netlify-tick-1{animation-delay:.1s}#ask-netlify-tick-2{animation-delay:.2s}#ask-netlify-tick-3{animation-delay:.3s}@keyframes tickFlicker{0%{opacity:0}to{opacity:1}}#ask-netlify-eyelid-left,#ask-netlify-eyelid-right{transform-origin:top center;animation:blink 4s infinite;animation-delay:1s;transform:scaleY(.8)}@keyframes blink{0%,5%{transform:scaleY(.8)}6%,10%{transform:scaleY(1)}11%,15%{transform:scaleY(.8)}16%,20%{transform:scaleY(1)}21%,to{transform:scaleY(.8)}}
+.chat-container{opacity:0;animation:appearContainer .12s ease-in-out forwards;animation-delay:.14s}.conversation{display:grid;align-items:flex-end;height:calc(var(--n-search-container-height) + var(--n-search-footer-height));padding:var(--n-search-padding-inline);overflow-y:auto;scroll-behavior:smooth;gap:var(--space-s)}.form-wrapper{display:flex;align-items:center;position:relative;height:var(--n-search-input-height)}.form-wrapper:after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:1px;background:var(--color-bg-3)}.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}.question-list li{opacity:0;transform:translateY(10px);animation:fadeInUp .5s forwards}.question-list li:nth-child(1){animation-delay:.5s}.question-list li:nth-child(2){animation-delay:.3s}.question-list li:nth-child(3){animation-delay:.1s}.message{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-s);margin-block-start:var(--space-2xl)}.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)}.user-message{margin-inline-start:auto;background:var(--search-user-message-color)}.form-input{border:none;outline:none;padding-inline:var(--n-search-padding-inline)}.form-submit{padding:.7rem;margin-inline-end:var(--space-2xs);border:none;border-radius:var(--radius-pill);background:var(--color-link-1);color:var(--neutral-000);transition:background-color .15s ease-out}.form-submit>svg{width:1rem;height:auto;aspect-ratio:1 / 1;border-radius:1.5px;transition:opacity .15s ease-out}.form-submit[disabled]{background:var(--neutral-500)}.form-submit[disabled]>*{opacity:.5}.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}.prose{font-size:var(--step--0)}.prose>*+*{margin-top:var(--flow-space, var(--space-s))}.prose :where(ol,ul,li)>*+*{margin-top:var(--flow-space, var(--space-3xs))}.prose h1,.prose h2,.prose h3{font-size:var(--step-1)}.prose h4,.prose h5,.prose h6{font-size:var(--step-0)}.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}.prose code{overflow-x:auto}.prose code[class*=language-],.prose pre[class*=language-]{display:block;font-size:var(--font-size-text-xs)}.message-loader{width:2.5rem;height:auto;display:block;color:var(--search-loading-color)}.message-loader :where(#ask-netlify-tick-1,#ask-netlify-tick-2,#ask-netlify-tick-3){opacity:0;animation:fadeIn .8s ease-in-out infinite}.message-loader #ask-netlify-tick-1{animation-delay:.1s}.message-loader #ask-netlify-tick-2{animation-delay:.2s}.message-loader #ask-netlify-tick-3{animation-delay:.3s}.message-loader :where(#ask-netlify-eyelid-left,#ask-netlify-eyelid-right){transform-origin:top center;transform:scaleY(1);animation:askEyeBlink 4s infinite;animation-delay:1s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}@keyframes askEyeBlink{0%,5%{transform:scaleY(1)}6%,10%{transform:scaleY(1.3)}11%,15%{transform:scaleY(1)}16%,20%{transform:scaleY(1.3)}21%,to{transform:scaleY(1)}}

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-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-text-secondary)}.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-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)}

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-weaker, #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-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-text-secondary)}.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-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-weaker, currentColor);--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: 400px}.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)}.n-search-modal-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)}.n-search-input{position:relative;display:inline-flex;box-sizing:border-box;background:var(--n-search-color-bg);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-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)}.n-search-label{display:flex;padding-inline-start:var(--n-search-padding-inline);align-items:center}.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-medium);font-size:1.1em}.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-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-weaker, #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-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-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-weakest, currentColor);--n-search-color-icon: var(--color-text-weakest);--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: 400px}.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)}.n-search-modal-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)}.n-search-input{position:relative;display:inline-flex;box-sizing:border-box;background:var(--n-search-color-bg);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-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)}.n-search-label{display:flex;padding-inline-start:var(--n-search-padding-inline);align-items:center}.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-medium);font-size:1.1em}.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-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/Icon/index.js

@@ -81,7 +81,7 @@ const l = () => /* @__PURE__ */ C(e, { children: [
     {
       id: "ask-netlify-eyelid-left",
       x: "3",
-      y: "9.5",
+      y: "7.3",
       width: "3",
       height: "2.5",
       fill: "var(--search-bg-color, currentColor)"
@@ -92,7 +92,7 @@ const l = () => /* @__PURE__ */ C(e, { children: [
     {
       id: "ask-netlify-eyelid-right",
       x: "9.7",
-      y: "9.5",
+      y: "7.3",
       width: "3",
       height: "2.5",
       fill: "var(--search-bg-color, currentColor)"

package/package.json

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

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

@@ -1,37 +1,52 @@
+/* ----------------------------- */
+/* Layout Containers             */
+/* ----------------------------- */
 .chat-container {
   opacity: 0;
   animation: appearContainer 120ms ease-in-out forwards;
   animation-delay: 140ms;
 }
 
-@keyframes appearContainer {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
 .conversation {
+  display: grid;
+  align-items: flex-end;
   height: calc(var(--n-search-container-height) + var(--n-search-footer-height));
   padding: var(--n-search-padding-inline);
-  scroll-behavior: smooth;
   overflow-y: auto;
-  display: grid;
-  align-items: flex-end;
+  scroll-behavior: smooth;
   gap: var(--space-s);
 }
 
+.form-wrapper {
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: var(--n-search-input-height);
+}
+
+.form-wrapper::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: var(--color-bg-3);
+}
+
+/* ----------------------------- */
+/* Conversation and Message UI  */
+/* ----------------------------- */
 .question {
   border: none;
-  color: var(--color-text-1);
-  font-weight: var(--font-weight-regular);
-  font-size: var(--step--1);
   border-radius: var(--radius-pill);
   transform: translateX(-0.75rem);
-  text-wrap: pretty;
+  color: var(--color-text-1);
+  font-size: var(--step--1);
+  font-weight: var(--font-weight-regular);
   text-align: left;
+  text-wrap: pretty;
 }
 
 .question-list li {
@@ -43,22 +58,13 @@
 .question-list li:nth-child(1) {
   animation-delay: 0.5s;
 }
-
 .question-list li:nth-child(2) {
   animation-delay: 0.3s;
 }
-
 .question-list li:nth-child(3) {
   animation-delay: 0.1s;
 }
 
-@keyframes fadeInUp {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 .message {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
@@ -67,81 +73,22 @@
 }
 
 .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);
-  width: fit-content;
-  max-width: 85%;
   font-size: var(--step-0);
 }
 
-.prose {
-  font-size: var(--step--0);
-
-  > * + * {
-    margin-top: var(--flow-space, var(--space-s));
-  }
-
-  :where(ol, ul, li) > * + * {
-    margin-top: var(--flow-space, var(--space-3xs));
-  }
-
-  h1,
-  h2,
-  h3 {
-    font-size: var(--step-1);
-  }
-
-  h4,
-  h5,
-  h6 {
-    font-size: var(--step-0);
-  }
-
-  pre {
-    background: var(--neutral-light-700);
-    border-radius: var(--radius-m);
-    max-width: 100%;
-    box-sizing: border-box;
-    padding: var(--space-s);
-    color: var(--neutral-100);
-    overflow-x: auto;
-  }
-
-  code {
-    overflow-x: auto;
-  }
-
-  code[class*='language-'],
-  pre[class*='language-'] {
-    display: block;
-    font-size: var(--font-size-text-xs);
-  }
-}
-
 .user-message {
   margin-inline-start: auto;
   background: var(--search-user-message-color);
 }
 
-.form-wrapper {
-  display: flex;
-  align-items: center;
-  position: relative;
-  height: var(--n-search-input-height);
-}
-
-.form-wrapper::after {
-  content: '';
-  display: block;
-  width: 100%;
-  height: 1px;
-  background: var(--color-bg-3);
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
+/* ----------------------------- */
+/* Form UI                      */
+/* ----------------------------- */
 .form-input {
   border: none;
   outline: none;
@@ -149,11 +96,10 @@
 }
 
 .form-submit {
-  border: none;
   padding: 0.7rem;
-  border-radius: var(--radius-pill);
   margin-inline-end: var(--space-2xs);
   border: none;
+  border-radius: var(--radius-pill);
   background: var(--color-link-1);
   color: var(--neutral-000);
   transition: background-color 150ms ease-out;
@@ -169,53 +115,114 @@
 
 .form-submit[disabled] {
   background: var(--neutral-500);
+}
 
-  & > * {
-    opacity: 0.5;
-  }
+.form-submit[disabled] > * {
+  opacity: 0.5;
 }
 
+/* ----------------------------- */
+/* Buttons                      */
+/* ----------------------------- */
 .button-back {
-  width: fit-content;
-  background: transparent;
   position: absolute;
   z-index: 1;
+  width: fit-content;
+  margin: 1rem;
   padding: 0.5rem 1rem;
   background: var(--search-back-btn-bg-color);
-  margin: 1rem;
-  border: 2px solid var(--color-bg-3);
+  border: 0.5px solid var(--color-bg-3);
   border-radius: var(--radius-pill);
   font-size: var(--step--1);
-  border: 1px solid;
-  cursor: pointer;
-  border-color: var(--color-bg-3);
   color: var(--color-text-1);
-  border-width: 0.5px;
+  cursor: pointer;
 }
 
+/* ----------------------------- */
+/* Typography & Prose           */
+/* ----------------------------- */
+.prose {
+  font-size: var(--step--0);
+}
+
+.prose > * + * {
+  margin-top: var(--flow-space, var(--space-s));
+}
+
+.prose :where(ol, ul, li) > * + * {
+  margin-top: var(--flow-space, var(--space-3xs));
+}
+
+.prose h1,
+.prose h2,
+.prose h3 {
+  font-size: var(--step-1);
+}
+
+.prose h4,
+.prose h5,
+.prose h6 {
+  font-size: var(--step-0);
+}
+
+.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;
+}
+
+.prose code {
+  overflow-x: auto;
+}
+
+.prose code[class*='language-'],
+.prose pre[class*='language-'] {
+  display: block;
+  font-size: var(--font-size-text-xs);
+}
+
+/* ----------------------------- */
+/* Loaders and SVG Effects      */
+/* ----------------------------- */
 .message-loader {
-  width: 43px;
+  width: 2.5rem;
   height: auto;
   display: block;
   color: var(--search-loading-color);
+}
 
-  & :where(#ask-netlify-tick-1, #ask-netlify-tick-2, #ask-netlify-tick-3) {
-    opacity: 0;
-    animation: tickFlicker 800ms ease-in-out infinite;
-  }
+.message-loader :where(#ask-netlify-tick-1, #ask-netlify-tick-2, #ask-netlify-tick-3) {
+  opacity: 0;
+  animation: fadeIn 800ms ease-in-out infinite;
 }
 
-#ask-netlify-tick-1 {
+.message-loader #ask-netlify-tick-1 {
   animation-delay: 100ms;
 }
-#ask-netlify-tick-2 {
+
+.message-loader #ask-netlify-tick-2 {
   animation-delay: 200ms;
 }
-#ask-netlify-tick-3 {
+
+.message-loader #ask-netlify-tick-3 {
   animation-delay: 300ms;
 }
 
-@keyframes tickFlicker {
+.message-loader :where(#ask-netlify-eyelid-left, #ask-netlify-eyelid-right) {
+  transform-origin: top center;
+  transform: scaleY(1);
+  animation: askEyeBlink 4s infinite;
+  animation-delay: 1s;
+}
+
+/* ----------------------------- */
+/* Animations and Keyframes     */
+/* ----------------------------- */
+@keyframes fadeIn {
   0% {
     opacity: 0;
   }
@@ -224,33 +231,32 @@
   }
 }
 
-#ask-netlify-eyelid-left,
-#ask-netlify-eyelid-right {
-  transform-origin: top center;
-  animation: blink 4s infinite;
-  animation-delay: 1s;
-  transform: scaleY(0.8);
+@keyframes fadeInUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-@keyframes blink {
+@keyframes askEyeBlink {
   0%,
   5% {
-    transform: scaleY(0.8);
+    transform: scaleY(1);
   }
   6%,
   10% {
-    transform: scaleY(1);
+    transform: scaleY(1.3);
   }
   11%,
   15% {
-    transform: scaleY(0.8);
+    transform: scaleY(1);
   }
   16%,
   20% {
-    transform: scaleY(1);
+    transform: scaleY(1.3);
   }
   21%,
   100% {
-    transform: scaleY(0.8);
+    transform: scaleY(1);
   }
 }

package/packages/components/preact/Icon/index.tsx

@@ -64,7 +64,7 @@ const AskNetlify: FunctionComponent = () => {
       <rect
         id="ask-netlify-eyelid-left"
         x="3"
-        y="9.5"
+        y="7.3"
         width="3"
         height="2.5"
         fill="var(--search-bg-color, currentColor)"
@@ -72,7 +72,7 @@ const AskNetlify: FunctionComponent = () => {
       <rect
         id="ask-netlify-eyelid-right"
         x="9.7"
-        y="9.5"
+        y="7.3"
         width="3"
         height="2.5"
         fill="var(--search-bg-color, currentColor)"

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

@@ -59,7 +59,7 @@
   display: flex;
   width: var(--n-search-icon-size);
   height: var(--n-search-icon-size);
-  color: var(--n-search-color-text-secondary);
+  color: var(--n-search-color-icon);
 }
 
 .n-search-link-icon [data-icon='caretRight'] {

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

@@ -6,7 +6,8 @@
 .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-weaker, currentColor);
+  --n-search-color-text-secondary: var(--color-text-weakest, currentColor);
+  --n-search-color-icon: var(--color-text-weakest);
   --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);

package/packages/styles/tokens.css

@@ -59,6 +59,7 @@
   --color-text-accent: var(--teal-000);
   --color-text-weak: var(--neutral-500);
   --color-text-weaker: var(--neutral-400);
+  --color-text-weakest: var(--neutral-300);
   --color-warning-bg: var(--gold-100);
   --color-warning-border: var(--gold-300);
   --color-warning-text: var(--gold-800);
@@ -238,6 +239,7 @@
     --color-text-accent: var(--teal-600);
     --color-text-weak: var(--neutral-300);
     --color-text-weaker: var(--neutral-400);
+    --color-text-weakest: var(--neutral-300);
     --color-warning-bg: var(--gold-200);
     --color-warning-border: var(--gold-400);
     --color-warning-text: var(--gold-900);
@@ -310,6 +312,7 @@
   --color-text-accent: var(--teal-600);
   --color-text-weak: var(--neutral-300);
   --color-text-weaker: var(--neutral-400);
+  --color-text-weakest: var(--neutral-300);
   --color-warning-bg: var(--gold-200);
   --color-warning-border: var(--gold-400);
   --color-warning-text: var(--gold-900);
@@ -381,6 +384,7 @@
   --color-text-accent: var(--teal-000);
   --color-text-weak: var(--neutral-500);
   --color-text-weaker: var(--neutral-400);
+  --color-text-weakest: var(--neutral-300);
   --color-warning-bg: var(--gold-100);
   --color-warning-border: var(--gold-300);
   --color-warning-text: var(--gold-800);