@netlify/spark-ui 1.17.5 → 1.18.0-alpha.0

package/dist/components/preact/Popover/Popover.js

@@ -1,23 +1,23 @@
 import { u as r } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { g as a } from "../../../chunks/hooks.module.DGkdD5n9.js";
+import { g as d } from "../../../chunks/hooks.module.DGkdD5n9.js";
 import '../../../assets/Popover.css';const v = ({
   id: e,
-  content: t,
-  position: p = "top",
+  content: p,
+  position: t = "top",
   class: n = "",
   children: s,
   ...i
 }) => {
-  const d = a(), o = e || d;
-  return /* @__PURE__ */ r("div", { id: o, class: `n-popover-container n-popover-${p} ${n}`, ...i, children: [
-    /* @__PURE__ */ r("button", { class: "n-popover-trigger", "aria-describedby": `${o}-popover`, type: "button", children: s }),
+  const a = d(), o = e || a;
+  return /* @__PURE__ */ r("div", { id: o, class: `n-popover-container n-popover-${t} ${n}`, ...i, children: [
+    /* @__PURE__ */ r("span", { class: "n-popover-trigger", "aria-describedby": `${o}-popover`, children: s }),
     /* @__PURE__ */ r(
       "div",
       {
         id: `${o}-popover`,
         class: "n-popover",
         role: "tooltip",
-        dangerouslySetInnerHTML: { __html: t }
+        dangerouslySetInnerHTML: { __html: p }
       }
     )
   ] });

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.C3J4605n.js";
+import { A as K, K as L } from "../../../../../chunks/AskNetlify.nCAFTKgo.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.C3J4605n.js";
+import { A as S } from "../../chunks/AskNetlify.nCAFTKgo.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.17.5",
+  "version": "1.18.0-alpha.0",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",

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

@@ -121,7 +121,7 @@
 }
 
 .n-ask-sources {
-  margin-block-start: var(--space-m);
+  margin-block-start: var(--space-xs);
 }
 
 .n-ask-sources-title {
@@ -168,6 +168,28 @@
   transform: rotate(270deg);
 }
 
+.n-ask-action-bar {
+  margin-block-start: var(--space-m);
+}
+
+.n-ask-action-bar button {
+  display: grid;
+  border: none;
+}
+
+.n-ask-action-bar button svg {
+  pointer-events: none;
+}
+
+.n-ask-action-bar .n-popover {
+  --n-popover-padding: var(--space-2xs) var(--space-xs);
+}
+
+.n-ask-action-bar [id*='icon-'] {
+  width: auto;
+  height: 14px;
+}
+
 /* ----------------------------- */
 /* Form UI                      */
 /* ----------------------------- */

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

@@ -23,8 +23,18 @@ export default function AskNetlify({ setModalState, searchQuery, urlParamQuery }
   const inputRef = useRef<HTMLInputElement>(null);
   const lastMessageRef = useRef<HTMLDivElement | null>(null);
 
-  const { conversation, submitQuery, isGeneratingAnswer, isPreparingAnswer, stopGeneration } =
-    useChat();
+  const {
+    conversation,
+    submitQuery,
+    isGeneratingAnswer,
+    isPreparingAnswer,
+    stopGeneration,
+    addFeedback,
+  } = useChat();
+
+  useEffect(() => {
+    console.log(conversation);
+  }, [conversation]);
 
   const handleSubmit = (e: Event | preact.JSX.TargetedMouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
@@ -73,13 +83,14 @@ export default function AskNetlify({ setModalState, searchQuery, urlParamQuery }
           <QuestionList onClick={handleSubmit} menuRef={menuRef} />
         )}
 
-        {conversation.length > 0 && (
+        {
           <ChatMessages
             isPreparingAnswer={isPreparingAnswer}
             conversation={conversation}
             lastMessageRef={lastMessageRef}
+            addFeedback={addFeedback}
           />
-        )}
+        }
       </div>
 
       <form onSubmit={handleSubmit} className="n-ask-form n-search-input-wrapper">

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

@@ -0,0 +1,109 @@
+import Icon from '@components/preact/Icon';
+import Popover from '@components/preact/Popover/Popover';
+
+interface ActionBarProps {
+  answer: string;
+  questionAnswerId: string;
+  addFeedback: (id: string, type: string, meta?: object) => void;
+}
+
+const toggleFeedbackButton = (e: MouseEvent): void => {
+  const btn = (e.target as HTMLElement).closest('button');
+  if (!btn) return;
+
+  const isHelpfulBtn = btn.classList.contains('btn-feedback-helpful');
+  const isIncorrectBtn = btn.classList.contains('btn-feedback-incorrect');
+
+  // Only proceed if it's one of the feedback buttons
+  if (!isHelpfulBtn && !isIncorrectBtn) return;
+
+  // Get both feedback buttons
+  const actionBar = btn.closest('.n-ask-action-bar');
+  const helpfulBtn = actionBar?.querySelector('.btn-feedback-helpful');
+  const incorrectBtn = actionBar?.querySelector('.btn-feedback-incorrect');
+
+  // Reset both buttons first (hide all solid icons, show all outline icons)
+  [helpfulBtn, incorrectBtn].forEach(button => {
+    if (!button) return;
+    const icons = button.querySelectorAll('[id*="icon"]');
+    icons.forEach((icon, index) => {
+      if (index === 0) {
+        icon.classList.remove('hidden'); // Show outline
+      } else {
+        icon.classList.add('hidden'); // Hide solid
+      }
+    });
+  });
+
+  // Toggle the clicked button
+  const clickedIcons = btn.querySelectorAll('[id*="icon"]');
+  clickedIcons.forEach(icon => {
+    icon.classList.toggle('hidden');
+  });
+};
+
+const copyToClipboard = async (text: string): Promise<void> => {
+  const copyPopover = document.getElementById('copy-popover');
+  try {
+    await navigator.clipboard.writeText(text);
+    if (copyPopover) {
+      copyPopover.textContent = 'Copied';
+      setTimeout(() => {
+        copyPopover.textContent = 'Copy';
+        copyPopover.blur();
+      }, 2000);
+    }
+  } catch (error) {
+    console.error('Failed to copy code: ', error);
+    if (copyPopover) {
+      copyPopover.textContent = 'Failed to copy';
+      setTimeout(() => {
+        copyPopover.textContent = 'Copy';
+        copyPopover.blur();
+      }, 2000);
+    }
+  }
+};
+
+export function ActionBar({ answer, questionAnswerId, addFeedback }: ActionBarProps) {
+  return (
+    <div className="n-ask-action-bar">
+      <Popover id="copy" content={`Copy`}>
+        <button onClick={() => copyToClipboard(answer)}>
+          <Icon name="copy" />
+        </button>
+      </Popover>
+
+      <Popover id="feedback-helpful" content={`Helpful`}>
+        <button
+          class="btn-feedback-helpful n-stack"
+          onClick={e => {
+            toggleFeedbackButton(e as unknown as MouseEvent);
+            addFeedback(questionAnswerId, 'upvote');
+          }}
+        >
+          <Icon name="thumbsUp" />
+          <Icon name="thumbsUpSolid" className="hidden" />
+        </button>
+      </Popover>
+
+      <Popover id="feedback-incorrect" content={`Not helpful`}>
+        <button
+          class="btn-feedback-incorrect n-stack"
+          onClick={e => {
+            toggleFeedbackButton(e as unknown as MouseEvent);
+            addFeedback(questionAnswerId, 'downvote', {
+              incorrect: true,
+              irrelevant: false,
+              unaddressed: false,
+              issue: "This information isn't accurate",
+            });
+          }}
+        >
+          <Icon name="thumbsDown" />
+          <Icon name="thumbsDownSolid" className="hidden" />
+        </button>
+      </Popover>
+    </div>
+  );
+}

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

@@ -2,15 +2,18 @@ import { marked } from 'marked';
 import Icon from '../../Icon';
 import { Ref } from 'preact';
 import { SourcesList } from './SourcesList';
+import { ActionBar } from './ActionBar';
 
 export function ChatMessages({
   conversation,
   lastMessageRef,
   isPreparingAnswer,
+  addFeedback,
 }: {
   conversation: any[];
   lastMessageRef: Ref<HTMLDivElement>;
   isPreparingAnswer: boolean;
+  addFeedback: any;
 }) {
   return (
     <>
@@ -29,11 +32,18 @@ export function ChatMessages({
 
             <div class="n-ask-message-left">
               {qa.answer && (
-                <div class="n-ask-message-bubble n-ask-bot-message">
+                <div class="n-ask-message-bubble n-ask-bot-message flow">
                   <div
                     class="n-ask-message-answer n-ask-prose prose flow"
                     dangerouslySetInnerHTML={{ __html: marked.parse(qa.answer) }}
                   />
+                  {qa.id && (
+                    <ActionBar
+                      answer={qa.answer}
+                      addFeedback={addFeedback}
+                      questionAnswerId={qa.id}
+                    />
+                  )}
                   {qa.id && <SourcesList sources={qa.sources} />}
                 </div>
               )}

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

@@ -2,6 +2,7 @@ import { type FunctionComponent } from 'preact';
 
 type Props = {
   name: IconName;
+  className?: string;
 };
 
 export default function Icon(props: Props) {
@@ -16,6 +17,7 @@ export default function Icon(props: Props) {
       viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      class={props.className}
       {...props}
     >
       <IconPath />;
@@ -117,6 +119,15 @@ const RSSIcon: FunctionComponent = () => {
   );
 };
 
+const CheckIcon: FunctionComponent = () => {
+  return (
+    <path
+      d="M15.5281 0.223937C16.0388 0.598824 16.1531 1.31976 15.7817 1.83523L6.63858 14.5237C6.44215 14.7977 6.13857 14.9671 5.80284 14.9959C5.46712 15.0248 5.14211 14.8986 4.90639 14.6607L0.334831 10.0467C-0.11161 9.59612 -0.11161 8.86437 0.334831 8.41378C0.781272 7.9632 1.50629 7.9632 1.95273 8.41378L5.57783 12.0725L13.9352 0.476265C14.3067 -0.0392051 15.021 -0.154555 15.5317 0.220332L15.5281 0.223937Z"
+      fill="currentColor"
+    />
+  );
+};
+
 const CommentIcon: FunctionComponent = () => {
   return (
     <path
@@ -126,6 +137,15 @@ const CommentIcon: FunctionComponent = () => {
   );
 };
 
+const CopyIcon: FunctionComponent = () => {
+  return (
+    <path
+      d="M12 10.5H6C5.725 10.5 5.5 10.275 5.5 10V2C5.5 1.725 5.725 1.5 6 1.5H10.1719C10.3031 1.5 10.4312 1.55312 10.525 1.64687L12.3531 3.475C12.4469 3.56875 12.5 3.69688 12.5 3.82812V10C12.5 10.275 12.275 10.5 12 10.5ZM6 12H12C13.1031 12 14 11.1031 14 10V3.82812C14 3.29688 13.7906 2.7875 13.4156 2.4125L11.5844 0.584375C11.2094 0.209375 10.7031 0 10.1719 0H6C4.89688 0 4 0.896875 4 2V10C4 11.1031 4.89688 12 6 12ZM2 4C0.896875 4 0 4.89688 0 6V14C0 15.1031 0.896875 16 2 16H8C9.10312 16 10 15.1031 10 14V13.5H8.5V14C8.5 14.275 8.275 14.5 8 14.5H2C1.725 14.5 1.5 14.275 1.5 14V6C1.5 5.725 1.725 5.5 2 5.5H2.5V4H2Z"
+      fill="currentColor"
+    />
+  );
+};
+
 const LightbulbIcon: FunctionComponent = () => {
   return (
     <>
@@ -179,6 +199,42 @@ const TerminalIcon: FunctionComponent = () => {
   );
 };
 
+const ThumbsDownIcon: FunctionComponent = () => {
+  return (
+    <path
+      d="M12.0008 0L12.2474 0.0133305C13.4139 0.133305 14.3303 1.08643 14.3937 2.26951C14.9869 2.66276 15.3968 3.31595 15.4601 4.06579L15.4668 4.26575C15.4668 4.45571 15.4434 4.639 15.4001 4.81563C15.7401 5.19888 15.96 5.69211 15.9933 6.23865L16 6.39862C16 6.83852 15.88 7.2451 15.6734 7.59836C15.8367 7.8783 15.9467 8.1949 15.9833 8.53149L15.9967 8.7981C15.9967 10.0412 15.0535 11.0609 13.8438 11.1843L13.5972 11.1976H9.94126L10.4112 12.1974L10.5145 12.4506C10.9311 13.6404 10.4545 14.9668 9.37471 15.6166L9.13476 15.7466C7.88502 16.3331 6.412 15.8666 5.71548 14.7068L5.69548 14.6768L5.6055 14.5102L5.5855 14.4702L4.58238 12.3373C4.26911 12.9305 3.64924 13.3338 2.93272 13.3338H1.86628C0.836492 13.3338 0 12.4973 0 11.4675L0.00333259 3.99914C0.00333259 2.96936 0.839825 2.13287 1.86961 2.13287H2.93606C3.3493 2.13287 3.73256 2.26951 4.04249 2.49946C4.4824 1.78628 5.10894 1.18641 5.87544 0.779832L6.28202 0.563212L6.30535 0.553214L6.52531 0.44657L6.54864 0.436572L6.78525 0.336594C7.3418 0.116641 7.93501 0.00666513 8.53822 0.00666513L12.0008 0ZM8.53156 1.59965C8.13164 1.59965 7.73506 1.67631 7.3618 1.81961L7.20517 1.88626L7.02854 1.97291L6.62195 2.18953C5.64882 2.70608 5.01229 3.68587 4.93231 4.77564L4.92564 5.04225V8.80477L4.92897 8.9414C4.94564 9.21468 5.01229 9.48129 5.12893 9.73123L7.02187 13.7604L7.09186 13.887C7.3718 14.3436 7.95834 14.5235 8.45157 14.2936L8.54822 14.2403C8.98146 13.9803 9.17142 13.4504 9.00479 12.9739L8.9648 12.8739L7.95834 10.7344C7.8417 10.4877 7.8617 10.1978 8.00833 9.96452C8.15497 9.73123 8.40825 9.5946 8.68152 9.5946H13.5972L13.6772 9.59126C14.0537 9.5546 14.3537 9.25467 14.3903 8.87808L14.3937 8.79477C14.3937 8.55815 14.2904 8.34487 14.1204 8.1949C13.9471 8.0416 13.8471 7.82498 13.8471 7.59503C13.8471 7.36508 13.9471 7.14846 14.1204 6.99516C14.267 6.86518 14.367 6.68522 14.387 6.48527L14.3937 6.39529C14.3937 6.11535 14.247 5.8654 14.0204 5.7221C13.6638 5.49215 13.5472 5.02558 13.7538 4.65566C13.8038 4.56901 13.8371 4.46904 13.8504 4.36906L13.8571 4.26241C13.8571 3.90916 13.6272 3.60922 13.3039 3.50258C12.914 3.37594 12.6807 2.97269 12.7707 2.56945C12.7773 2.53945 12.7807 2.50946 12.784 2.4828L12.7907 2.39615C12.7907 1.98291 12.4741 1.64298 12.0708 1.60299L12.0008 1.59965H8.53156ZM1.86961 3.73253C1.72297 3.73253 1.603 3.8525 1.603 3.99914V11.4642C1.603 11.6108 1.72297 11.7308 1.86961 11.7308H2.93606C3.08269 11.7308 3.20267 11.6108 3.20267 11.4642V3.99914C3.20267 3.8525 3.08269 3.73253 2.93606 3.73253H1.86961Z"
+      fill="currentColor"
+    />
+  );
+};
+
+const ThumbsDownSolidIcon: FunctionComponent = () => {
+  return (
+    <path
+      d="M12.3871 0C13.2419 0 13.9355 0.695193 13.9355 1.55206C13.9355 1.75577 13.8935 1.94654 13.8258 2.12438C14.4839 2.30222 14.9677 2.90364 14.9677 3.62147C14.9677 3.91571 14.8839 4.19056 14.7419 4.4266C15.4581 4.56241 16 5.19293 16 5.94956C16 6.58655 15.6161 7.133 15.0677 7.37228C15.6161 7.61155 16 8.15801 16 8.795C16 9.65186 15.3065 10.3471 14.4516 10.3471H9.29032L10.2 12.6234C10.2806 12.8271 10.3226 13.047 10.3226 13.2669V13.4027C10.3226 14.2854 9.60968 15 8.72903 15C8.12581 15 7.57419 14.6573 7.30323 14.1173L5.4871 10.4861C5.27097 10.056 5.16129 9.58073 5.16129 9.09894V3.06532C5.16129 2.43803 5.44839 1.84307 5.93548 1.44859L6.32903 1.13494C7.24516 0.400949 8.38065 0 9.55161 0H12.3871ZM2.58065 2.06941C3.15161 2.06941 3.6129 2.5318 3.6129 3.10412V11.3818C3.6129 11.9541 3.15161 12.4165 2.58065 12.4165H1.03226C0.46129 12.4165 0 11.9541 0 11.3818V3.10412C0 2.5318 0.46129 2.06941 1.03226 2.06941H2.58065Z"
+      fill="currentColor"
+    />
+  );
+};
+
+const ThumbsUpIcon: FunctionComponent = () => {
+  return (
+    <path
+      d="M5.72095 1.29317C6.41399 0.133424 7.88671 -0.333142 9.13619 0.253398L9.37609 0.380037C10.5356 1.07655 11.0021 2.54957 10.4157 3.7993L9.94586 4.79908H13.601L13.8476 4.81241C15.0571 4.93572 16 5.95883 16 7.19857C16 7.63847 15.8801 8.04505 15.6735 8.39831C15.8767 8.75157 15.9967 9.15814 16 9.59805C16 10.2079 15.7701 10.7578 15.4003 11.181C15.4436 11.3577 15.4669 11.541 15.4669 11.7309C15.4669 12.5674 15.0371 13.2973 14.394 13.7272C14.3307 14.9102 13.4144 15.8667 12.2482 15.9833L12.0017 15.9967H8.53311C7.93336 15.9967 7.33694 15.8834 6.78051 15.6667L6.54394 15.5668L6.52062 15.5568L6.30071 15.4501L6.27738 15.4401L5.87089 15.2235C5.46106 15.0069 5.09454 14.7336 4.77468 14.4203C4.63807 15.3168 3.86506 16 2.93211 16H1.86589C0.836318 16 0 15.1635 0 14.1337L0.00666392 6.66535C0.00666392 5.63557 0.842982 4.79908 1.87255 4.79908H2.93878C3.29863 4.79908 3.63515 4.9024 3.9217 5.08236L5.591 1.53312L5.611 1.49313L5.70096 1.3265L5.72095 1.29651V1.29317ZM1.87255 6.39874C1.72595 6.39874 1.606 6.51871 1.606 6.66535V14.1304C1.606 14.277 1.72595 14.397 1.87255 14.397H2.93878C3.08538 14.397 3.20533 14.277 3.20533 14.1304V6.66535C3.20533 6.51871 3.08538 6.39874 2.93878 6.39874H1.87255ZM8.45648 1.69975C7.96335 1.4698 7.38026 1.64643 7.10037 2.09967L7.02707 2.23297L5.13453 6.2621C5.01791 6.51205 4.95127 6.77866 4.93461 7.05193L4.93128 7.1919V10.9544L4.93794 11.2177C5.01791 12.3075 5.65098 13.2873 6.62724 13.8071L7.01041 14.0104L7.22032 14.1137C7.63349 14.3004 8.07997 14.397 8.53311 14.397H12.0017L12.0816 14.3937C12.4848 14.3537 12.8013 14.0104 12.8013 13.5972L12.7947 13.5105C12.7913 13.4805 12.788 13.4539 12.7813 13.4239C12.6914 13.0206 12.9246 12.6174 13.3145 12.4908C13.6377 12.3874 13.8676 12.0842 13.8676 11.7309C13.8676 11.5876 13.8309 11.4576 13.7643 11.3377C13.5544 10.9678 13.671 10.4979 14.0308 10.2712C14.2574 10.1279 14.404 9.87799 14.404 9.59805C14.404 9.36143 14.3007 9.14815 14.1308 8.99818C13.9575 8.84488 13.8576 8.62826 13.8576 8.39831C13.8576 8.16836 13.9575 7.95174 14.1308 7.79844C14.3007 7.64847 14.404 7.43518 14.404 7.19857L14.4007 7.11858C14.364 6.742 14.0641 6.44206 13.6876 6.40541L13.6077 6.40207H8.69305C8.41983 6.40207 8.1666 6.2621 8.01999 6.03215C7.87339 5.8022 7.85339 5.50893 7.97001 5.26232L8.9696 3.11945C9.20283 2.61955 9.01624 2.02968 8.5531 1.75307L8.45648 1.69975Z"
+      fill="currentColor"
+    />
+  );
+};
+
+const ThumbsUpSolidIcon: FunctionComponent = () => {
+  return (
+    <path
+      d="M2.58065 4.65517C3.15161 4.65517 3.6129 5.11746 3.6129 5.68965V13.9655C3.6129 14.5377 3.15161 15 2.58065 15H1.03226C0.46129 15 0 14.5377 0 13.9655V5.68965C0 5.11746 0.46129 4.65517 1.03226 4.65517H2.58065ZM8.72903 0C9.60968 0 10.3226 0.714439 10.3226 1.59698V1.73276C10.3226 1.95259 10.2806 2.17241 10.2 2.37608L9.29032 4.65517H14.4516C15.3065 4.65517 16 5.35022 16 6.2069C16 6.84375 15.6161 7.39009 15.0677 7.62931C15.6161 7.86853 16 8.41487 16 9.05172C16 9.80819 15.4581 10.4386 14.7419 10.5744C14.8839 10.8103 14.9677 11.0851 14.9677 11.3793C14.9677 12.097 14.4839 12.6983 13.8258 12.8761C13.8968 13.0539 13.9355 13.2478 13.9355 13.4483C13.9355 14.305 13.2419 15 12.3871 15H9.55161C8.38065 15 7.24194 14.5991 6.32903 13.8653L5.93548 13.5517C5.44516 13.1606 5.16129 12.5657 5.16129 11.9353V5.90302C5.16129 5.42134 5.27419 4.94612 5.4871 4.51616L7.3 0.882543C7.57097 0.342672 8.12258 0 8.72903 0Z"
+      fill="currentColor"
+    />
+  );
+};
+
 const QuestionIcon: FunctionComponent = () => {
   return (
     <path
@@ -230,8 +286,10 @@ export type IconName =
   | 'askNetlify'
   | 'book'
   | 'caretRight'
+  | 'check'
   | 'code'
   | 'comment'
+  | 'copy'
   | 'cube'
   | 'lightbulb'
   | 'link'
@@ -240,6 +298,10 @@ export type IconName =
   | 'rss'
   | 'search'
   | 'terminal'
+  | 'thumbsDown'
+  | 'thumbsDownSolid'
+  | 'thumbsUp'
+  | 'thumbsUpSolid'
   | 'question'
   | 'linkedin'
   | 'netlify'
@@ -251,14 +313,20 @@ const iconPathMap: Record<IconName, FunctionComponent> = {
   askNetlify: AskNetlify,
   book: BookIcon,
   caretRight: CaretRightIcon,
+  check: CheckIcon,
   code: CodeIcon,
   comment: CommentIcon,
+  copy: CopyIcon,
   link: LinkIcon,
   lightbulb: LightbulbIcon,
   pageWithLines: PageWithLinesIcon,
   rss: RSSIcon,
   search: SearchIcon,
   terminal: TerminalIcon,
+  thumbsDown: ThumbsDownIcon,
+  thumbsDownSolid: ThumbsDownSolidIcon,
+  thumbsUp: ThumbsUpIcon,
+  thumbsUpSolid: ThumbsUpSolidIcon,
   question: QuestionIcon,
   bluesky: BlueSkyIcon,
   linkedin: LinkedInIcon,

package/packages/components/preact/Popover/Popover.css

@@ -5,6 +5,7 @@
 }
 
 .n-popover-trigger {
+  display: block;
   background-color: transparent;
   border: none;
   padding: 0;
@@ -17,7 +18,7 @@
   position: absolute;
   background-color: var(--color-bg-2);
   color: var(--color-text);
-  padding: var(--space-xs) var(--space-s);
+  padding: var(--n-popover-padding, var(--space-xs) var(--space-s));
   border-radius: var(--radius-s);
   opacity: 0;
   pointer-events: none;
@@ -31,23 +32,17 @@
   border-style: solid;
 }
 
-.n-popover-container:focus-within .n-popover,
 .n-popover-container:hover .n-popover {
   opacity: 1;
   pointer-events: auto;
 }
 
-.n-popover-container:focus-within .n-popover-trigger,
-.n-popover-container:hover .n-popover-trigger {
-  box-shadow: 0px 1px 0px 0px var(--neutral-300);
-  border-radius: 0;
-}
-
 .n-popover-top .n-popover {
   bottom: 145%;
   left: 50%;
   transform: translateX(-50%);
-  width: 255px;
+  width: max-content;
+  max-width: var(--n-popover-width, 255px);
   box-shadow: var(--shadow-light);
 }
 

package/packages/components/preact/Popover/Popover.tsx

@@ -24,9 +24,9 @@ const Popover: FunctionComponent<Props> = ({
 
   return (
     <div id={tooltipId} class={`n-popover-container n-popover-${position} ${className}`} {...rest}>
-      <button class="n-popover-trigger" aria-describedby={`${tooltipId}-popover`} type="button">
+      <span class="n-popover-trigger" aria-describedby={`${tooltipId}-popover`}>
         {children}
-      </button>
+      </span>
       <div
         id={`${tooltipId}-popover`}
         class="n-popover"

package/packages/styles/tokens.css

@@ -19,7 +19,7 @@
   --blue-800: color(srgb 0.12549019607843137 0.21176470588235294 0.6313725490196078);
   --blue-900: color(srgb 0.10588235294117647 0.12549019607843137 0.3568627450980392);
   --button-outline-bg-color: color(srgb 0 0 0 / 0);
-  --button-outline-bg-color-hover: color(srgb 0.19607843137254902 0.9019607843137255 0.8862745098039215 / 0.2);
+  --button-outline-bg-color-hover: color(srgb 0.8392156862745098 0.9803921568627451 0.9764705882352941);
   --button-outline-stroke-color: var(--neutral-800);
   --button-outline-text-color: var(--neutral-800);
   --button-primary-bg-color: var(--teal-200);
@@ -211,7 +211,7 @@
     --badge-text-color: var(--neutral-100);
     --blockquote-accent-color: var(--teal-200);
     --button-outline-bg-color: color(srgb 0 0 0 / 0);
-    --button-outline-bg-color-hover: color(srgb 0.6509803921568628 1 0.9921568627450981 / 0.09803921568627451);
+    --button-outline-bg-color-hover: var(--neutral-500);
     --button-outline-stroke-color: var(--teal-200);
     --button-outline-text-color: var(--teal-200);
     --button-primary-bg-color: var(--teal-200);
@@ -296,7 +296,7 @@
   --badge-text-color: var(--neutral-100);
   --blockquote-accent-color: var(--teal-200);
   --button-outline-bg-color: color(srgb 0 0 0 / 0);
-  --button-outline-bg-color-hover: color(srgb 0.6509803921568628 1 0.9921568627450981 / 0.09803921568627451);
+  --button-outline-bg-color-hover: var(--neutral-500);
   --button-outline-stroke-color: var(--teal-200);
   --button-outline-text-color: var(--teal-200);
   --button-primary-bg-color: var(--teal-200);
@@ -380,7 +380,7 @@
   --badge-text-color: var(--neutral-500);
   --blockquote-accent-color: var(--blue-700);
   --button-outline-bg-color: color(srgb 0 0 0 / 0);
-  --button-outline-bg-color-hover: color(srgb 0.19607843137254902 0.9019607843137255 0.8862745098039215 / 0.2);
+  --button-outline-bg-color-hover: color(srgb 0.8392156862745098 0.9803921568627451 0.9764705882352941);
   --button-outline-stroke-color: var(--neutral-800);
   --button-outline-text-color: var(--neutral-800);
   --button-primary-bg-color: var(--teal-200);