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

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;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}@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)}}

package/dist/components/preact/AskNetlify/AskNetlify.js

@@ -5733,7 +5733,7 @@ function fl({ setModalState: e }) {
               __html: P.parse(h.answer)
             }
           }
-        ) }) : /* @__PURE__ */ E("span", { class: "message-loader", children: /* @__PURE__ */ E(Vi, { name: "askNetlify" }) }) })
+        ) }) : /* @__PURE__ */ E("div", { class: "message-loader", children: /* @__PURE__ */ E(Vi, { name: "askNetlify" }) }) })
       ] }, h.id || `qa-${d}`))
     ] }),
     /* @__PURE__ */ E("form", { onSubmit: c, className: "form-wrapper n-search-input-wrapper", children: [

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

@@ -1,42 +1,43 @@
 import { u as e } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { T as o } from "../../../../chunks/hooks.module.DGkdD5n9.js";
-import a from "./SearchHeading/SearchHeading.js";
-import s from "./SearchLink/SearchLink.js";
-import { Fragment as m } from "preact";
-const h = {
+import { T as h } from "../../../../chunks/hooks.module.DGkdD5n9.js";
+import s from "./SearchHeading/SearchHeading.js";
+import a from "./SearchLink/SearchLink.js";
+import { Fragment as d } from "preact";
+const u = {
   light: "dark",
   dark: "light"
-}, d = (n) => {
-  document.documentElement.setAttribute("data-theme", n), localStorage.setItem("theme", n);
-}, u = ({
+}, g = (n) => {
+  const r = document.getElementById("site-theme-select");
+  r && (r.value = n), document.documentElement.setAttribute("data-theme", n), localStorage.setItem("theme", n);
+}, f = ({
   searchLoading: n,
   searchTerm: r,
   results: t
 }) => {
   if (n)
-    return /* @__PURE__ */ e(a, { children: [
+    return /* @__PURE__ */ e(s, { children: [
       "Searching for ",
       /* @__PURE__ */ e("span", { className: "n-search-term", children: r }),
       " ..."
     ] });
   if (!t || t.length === 0)
-    return /* @__PURE__ */ e(a, { children: [
+    return /* @__PURE__ */ e(s, { children: [
       "0 results for ",
       /* @__PURE__ */ e("span", { className: "n-search-term", children: r })
     ] });
-  const c = o(() => t.map((l, i) => /* @__PURE__ */ e("li", { className: "n-results-list-item", children: /* @__PURE__ */ e(s, { ...l }) }, i)), [t]);
+  const c = h(() => t.map((l, i) => /* @__PURE__ */ e("li", { className: "n-results-list-item", children: /* @__PURE__ */ e(a, { ...l }) }, i)), [t]);
   return /* @__PURE__ */ e("ul", { className: "n-results-list", role: "list", children: c });
 };
-function N({
+function A({
   setModalState: n,
   searchLoading: r,
   searchTerm: t,
   results: c,
   children: l
 }) {
-  return /* @__PURE__ */ e("div", { className: "n-search-window", children: /* @__PURE__ */ e("div", { className: "n-search-links", children: t && t.length > 1 ? /* @__PURE__ */ e(u, { searchLoading: r, searchTerm: t, results: c }) : l ? /* @__PURE__ */ e(m, { children: [
+  return /* @__PURE__ */ e("div", { className: "n-search-window", children: /* @__PURE__ */ e("div", { className: "n-search-links", children: t && t.length > 1 ? /* @__PURE__ */ e(f, { searchLoading: r, searchTerm: t, results: c }) : l ? /* @__PURE__ */ e(d, { children: [
     /* @__PURE__ */ e(
-      s,
+      a,
       {
         as: "button",
         icon: "askNetlify",
@@ -47,21 +48,21 @@ function N({
       }
     ),
     l,
-    /* @__PURE__ */ e(a, { children: "Actions" }),
+    /* @__PURE__ */ e(s, { children: "Actions" }),
     /* @__PURE__ */ e(
-      s,
+      a,
       {
         as: "button",
         icon: "lightbulb",
         label: "Toggle theme",
         onClick: () => {
-          const i = document.documentElement.getAttribute("data-theme");
-          i && d(h[i]);
+          const i = window.matchMedia("(prefers-color-scheme: dark)").matches, m = document.documentElement.getAttribute("data-theme"), o = i ? "dark" : m || "light";
+          o && g(u[o]);
         }
       }
     )
   ] }) : null }) });
 }
 export {
-  N as default
+  A as default
 };

package/package.json

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

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

@@ -61,6 +61,7 @@
 
 .message {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: var(--space-s);
   margin-block-start: var(--space-2xl);
 }

package/packages/components/preact/AskNetlify/AskNetlify.tsx

@@ -111,9 +111,9 @@ function ChatInterface({ setModalState }: AskNetlifyProps) {
                   />
                 </div>
               ) : (
-                <span class="message-loader">
+                <div class="message-loader">
                   <Icon name="askNetlify" />
-                </span>
+                </div>
               )}
             </div>
           </div>

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

@@ -75,8 +75,10 @@ export default function SearchWindow({
               icon="lightbulb"
               label="Toggle theme"
               onClick={() => {
-                const theme = document.documentElement.getAttribute('data-theme') as Theme;
-                theme && handleThemeChange(ThemeMap[theme]);
+                const isDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                const currentTheme = document.documentElement.getAttribute('data-theme');
+                const theme = isDarkTheme ? 'dark' : currentTheme ? currentTheme : 'light';
+                theme && handleThemeChange(ThemeMap[theme as Theme]);
               }}
             />
           </>

package/packages/utils/theme.ts

@@ -6,6 +6,10 @@ export const ThemeMap: Record<Theme, Theme> = {
 };
 
 export const handleThemeChange = (value: Theme) => {
+  const themeSelect = document.getElementById('site-theme-select') as HTMLSelectElement;
+  if (themeSelect) {
+    themeSelect.value = value;
+  }
   const element = document.documentElement;
   element.setAttribute('data-theme', value);
   localStorage.setItem('theme', value);