@netlify/spark-ui 1.14.3 → 1.14.5

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

@@ -1,6 +1,6 @@
 import "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
 import "../../../chunks/hooks.module.DGkdD5n9.js";
-import { A as d } from "../../../chunks/AskNetlify.34ZT77N0.js";
+import { A as d } from "../../../chunks/AskNetlify.5UxkBfoE.js";
 import "./components/QuestionList/questions.js";
 import "./components/QuestionList/QuestionList.js";
 import "./components/BackButton.js";

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

@@ -1,6 +1,6 @@
 import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
 import { A as g, y as f, d } from "../../../../../chunks/hooks.module.DGkdD5n9.js";
-import { A as K, K as L } from "../../../../../chunks/AskNetlify.34ZT77N0.js";
+import { A as K, K as L } from "../../../../../chunks/AskNetlify.5UxkBfoE.js";
 import P from "../../../Modal/Modal.js";
 import h from "../../../KeyboardKey/KeyboardKey.js";
 import M from "../SearchWindow.js";

package/dist/components/preact/index.js

@@ -4,7 +4,7 @@ import { default as m } from "./Icon/index.js";
 import { default as s } from "./SearchModal/components/SearchLink/SearchLink.js";
 import { default as u } from "./SearchModal/components/SearchHeading/SearchHeading.js";
 import { default as i } from "./SearchModal/components/SearchToggle/SearchToggle.js";
-import { A as S } from "../../chunks/AskNetlify.34ZT77N0.js";
+import { A as S } from "../../chunks/AskNetlify.5UxkBfoE.js";
 import "preact";
 import "../../chunks/hooks.module.DGkdD5n9.js";
 import { default as n } from "./SearchModal/components/SearchModal/SearchModal.js";

package/package.json

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

package/packages/components/ActionArrow.astro

@@ -1,6 +1,10 @@
-<div class="n-action-arrow">
+---
+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">
-    <g stroke="currentColor" stroke-linecap="square" stroke-width="1.564" clip-path="url(#a)">
+    <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>
     </g>

package/packages/components/ActionLink.astro

@@ -17,7 +17,7 @@ const { id, href, text, class: className, ...rest } = Astro.props;
 
 <style>
   .n-action-link {
-    display: inline-flex;
+    display: inline-block;
     gap: var(--space-3xs);
     align-items: center;
     font-weight: var(--font-weight-medium);
@@ -31,5 +31,9 @@ const { id, href, text, class: className, ...rest } = Astro.props;
       text-decoration-color: var(--color-link);
       text-underline-offset: 0.1em;
     }
+
+    :is(span + .n-action-arrow) {
+      margin-inline-start: 0.1em;
+    }
   }
 </style>

package/packages/components/Card.astro

@@ -121,12 +121,6 @@ const isAnchorHeadline = isCardClickable && headline && !link?.text && link?.hre
     min-width: 0;
   }
 
-  .n-card :global(.n-action-arrow) {
-    flex: 0 0 auto;
-    align-self: center;
-    margin-inline-start: auto;
-  }
-
   .n-card-paragraph {
     line-height: var(--line-height-text);
   }
@@ -167,6 +161,10 @@ const isAnchorHeadline = isCardClickable && headline && !link?.text && link?.hre
     }
   }
 
+  .n-card-clickable .n-action-arrow {
+    margin-inline-start: auto;
+  }
+
   /* Focus for Anchor Headline */
   .n-card-anchor-heaadline:focus-within {
     box-shadow: 0 0 0 3px var(--color-focus-ring, Highlight);

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

@@ -51,35 +51,19 @@ export default function AskNetlify({ setModalState, searchQuery, urlParamQuery }
     }
   }, [newMessageReady]);
 
-  const [urlParamHandled, setUrlParamHandled] = useState(false);
-
   useEffect(() => {
-    if (urlParamQuery && !urlParamHandled) {
-      const trimmedQuery = urlParamQuery.trim();
-      setMessage(trimmedQuery);
-      setUrlParamHandled(true); // prevent refilling after submission
+    if (searchQuery) {
+      message && setMessage('');
+      submitQuery(searchQuery.trim());
+      setNewMessageReady(true);
     }
-  }, [urlParamQuery, urlParamHandled]);
+  }, [searchQuery, setMessage, setNewMessageReady]);
 
-  /**
-   * Populates and handles the input when a query is present.
-   *
-   * - If `urlParamQuery` exists, pre-fills the input and waits for user action.
-   * - If `searchQuery` exists, auto-submits the query.
-   *
-   * Focuses the input and marks the message as ready in both cases.
-   */
   useEffect(() => {
-    if (!searchQuery) return;
-
-    const trimmedQuery = searchQuery.trim();
-
-    if (searchQuery) {
-      submitQuery(trimmedQuery);
-      inputRef?.current?.focus();
-      setNewMessageReady(true);
+    if (!searchQuery && urlParamQuery) {
+      setMessage(urlParamQuery);
     }
-  }, [setMessage, setNewMessageReady, submitQuery, searchQuery]);
+  }, [urlParamQuery, searchQuery, setMessage]);
 
   return (
     <div className="n-ask-chat-container">

package/packages/styles/layout.css

@@ -29,6 +29,16 @@
   grid-auto-rows: var(--n-grid-auto-rows, auto);
 }
 
+.n-flex-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--n-grid-gap, var(--space-m));
+
+  > * {
+    flex: 1 1 var(--n-grid-column-min-size);
+  }
+}
+
 .n-stack {
   display: grid;
   grid-template-areas: 'stack';