@netlify/spark-ui 0.0.34 → 0.0.36

package/dist/assets/SearchHeading.css

@@ -1 +1 @@
-.n-search-heading{padding-inline:1rem;margin-block:var(--space-xs);font-size:var(--step--2);font-weight:var(--font-regular);color:var(--color-text-3)}
+.n-search-heading{padding-inline:1rem;margin-block:var(--space-xs);font-size:var(--step--2);font-weight:var(--font-semibold, 500);letter-spacing:.1px;color:var(--color-text-3)}

package/dist/assets/SearchLink.css

@@ -1 +1 @@
-.n-search-link{--n-search-icon-size: 1em;all:unset;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, 0px);font-size:var(--step--1);font-weight:var(--font-regular);text-decoration:none;cursor:pointer}.n-search-link-body{flex:1;width:80%;color:var(--color-text-2)}.n-search-link:is(:hover,:focus-within){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-within) .n-search-link-icon [data-icon=caretRight]{display:block}.n-search-link-label{font-weight:var(--font-semibold, 680);color:var(--color-text-2);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-3);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-icon{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:first-of-type{margin-inline-start:var(--space-s, 1rem)}.n-search-link-icon [data-icon=caretRight]{display:none;width:.8em;opacity:.3}
+.n-search-link{--n-search-icon-size: 1em;all:unset;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, 0px);font-size:var(--step--1);font-weight:var(--font-regular);text-decoration:none;cursor:pointer}.n-search-link-body{flex:1;width:80%;color:var(--color-text-2)}.n-search-link:is(:hover,:focus-within){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-within) .n-search-link-icon [data-icon=caretRight]{display:block}.n-search-link-title{font-weight:var(--font-semibold, 680);color:var(--color-text-2);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-3);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-icon{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:first-of-type{margin-inline-start:var(--space-s, 1rem)}.n-search-link-icon [data-icon=caretRight]{display:none;width:.8em;opacity:.3}.n-search-link-label{margin-inline-end:var(--space-2xs)}.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(--neutral-500));background:var(--n-search-link-badge-color, var(--neutral-100));border:1px solid var(--n-search-link-badge-border, var(--neutral-300));border-radius:3px}.n-search-link-badge[data-resource=blog]{--n-search-link-badge-color: var(--blue-000);--n-search-link-badge-text-color: var(--blue-500);--n-search-link-badge-border: var(--blue-100)}.n-search-link-badge[data-resource=changelog]{--n-search-link-badge-color: var(--gold-000);--n-search-link-badge-text-color: var(--gold-500);--n-search-link-badge-border: var(--gold-100)}.n-search-link-badge[data-resource=guide]{--n-search-link-badge-color: var(--teal-000);--n-search-link-badge-text-color: var(--teal-500);--n-search-link-badge-border: var(--teal-100)}

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{padding-inline:1rem;margin-block:var(--space-xs);font-size:var(--step--2);font-weight:var(--font-regular);color:var(--color-text-3)}.n-search-link{--n-search-icon-size: 1em;all:unset;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, 0px);font-size:var(--step--1);font-weight:var(--font-regular);text-decoration:none;cursor:pointer}.n-search-link-body{flex:1;width:80%;color:var(--color-text-2)}.n-search-link:is(:hover,:focus-within){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-within) .n-search-link-icon [data-icon=caretRight]{display:block}.n-search-link-label{font-weight:var(--font-semibold, 680);color:var(--color-text-2);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-3);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-icon{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:first-of-type{margin-inline-start:var(--space-s, 1rem)}.n-search-link-icon [data-icon=caretRight]{display:none;width:.8em;opacity:.3}.n-search-modal{--n-search-padding-inline: .5em;--n-search-color-text: var(--color-text-1, currentColor);--n-search-color-text-secondary: var(--color-text-2, currentColor);--n-search-color-bg: var(--color-bg-1);--n-search-color-bg-2: var(--color-bg-2);--n-search-color-border: var(--color-bg-3);--n-search-border-radius: 8px;--n-search-max-w: 600px;--n-search-text-highlight: var(--color-text-accent)}.n-search-modal{padding:0;border:none;border-radius:var(--n-search-border-radius);width:min(var(--n-search-max-w),100%);margin-inline:auto}.n-search-container{--mark-bg: var(--n-search-text-highlight);display:grid;width:min(var(--n-search-max-w),100%);min-height:470px;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{all:unset;display:flex;width:100%;border-bottom:1px solid var(--n-search-color-border)}.n-search-input{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::placeholder{color:var(--n-search-color-text)}.n-search-label{display:flex;padding-inline:var(--n-search-padding-inline);align-items:center}.n-search-label>*{display:inline-block;margin:0}.n-search-icon{display:flex;width:var(--icon-size, 1em);height:var(--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:400px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;margin-block:0;background:var(--n-search-color-bg)}.n-results-list,ul[role=list]{list-style:none;padding:0}.n-results-list-item{border-bottom:1px solid var(--color-bg-3)}.n-results-list-item:first-of-type{border-top:1px solid var(--color-bg-3)}.n-search-footer{border-top:1px solid var(--n-search-color-border);padding:var(--space-2xs) var(--space-s);background:var(--color-bg-2);display:flex;gap:var(--space-m)}.n-search-footer-tip{--n-key-text-color: var(--n-search-color-text-secondary);color:var(--n-search-color-text-secondary);display:flex;gap:var(--space-2xs);align-items:center;font-size:var(--step--1)}.n-search-modal{transition:display .2s allow-discrete,overlay .2s allow-discrete;animation:closeSearch .2s forwards}.n-search-modal[open]{animation:openSearch .2s forwards}@keyframes openSearch{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes closeSearch{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:.3}to{opacity:0;transform:translateY(20px) 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{padding-inline:1rem;margin-block:var(--space-xs);font-size:var(--step--2);font-weight:var(--font-semibold, 500);letter-spacing:.1px;color:var(--color-text-3)}.n-search-link{--n-search-icon-size: 1em;all:unset;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, 0px);font-size:var(--step--1);font-weight:var(--font-regular);text-decoration:none;cursor:pointer}.n-search-link-body{flex:1;width:80%;color:var(--color-text-2)}.n-search-link:is(:hover,:focus-within){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-within) .n-search-link-icon [data-icon=caretRight]{display:block}.n-search-link-title{font-weight:var(--font-semibold, 680);color:var(--color-text-2);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-3);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-icon{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:first-of-type{margin-inline-start:var(--space-s, 1rem)}.n-search-link-icon [data-icon=caretRight]{display:none;width:.8em;opacity:.3}.n-search-link-label{margin-inline-end:var(--space-2xs)}.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(--neutral-500));background:var(--n-search-link-badge-color, var(--neutral-100));border:1px solid var(--n-search-link-badge-border, var(--neutral-300));border-radius:3px}.n-search-link-badge[data-resource=blog]{--n-search-link-badge-color: var(--blue-000);--n-search-link-badge-text-color: var(--blue-500);--n-search-link-badge-border: var(--blue-100)}.n-search-link-badge[data-resource=changelog]{--n-search-link-badge-color: var(--gold-000);--n-search-link-badge-text-color: var(--gold-500);--n-search-link-badge-border: var(--gold-100)}.n-search-link-badge[data-resource=guide]{--n-search-link-badge-color: var(--teal-000);--n-search-link-badge-text-color: var(--teal-500);--n-search-link-badge-border: var(--teal-100)}.n-search-modal{--n-search-padding-inline: .5em;--n-search-color-text: var(--color-text-1, currentColor);--n-search-color-text-secondary: var(--color-text-2, currentColor);--n-search-color-bg: var(--color-bg-1);--n-search-color-bg-2: var(--color-bg-2);--n-search-color-border: var(--color-bg-3);--n-search-border-radius: 8px;--n-search-max-w: 600px;--n-search-text-highlight: var(--color-text-accent)}.n-search-modal{padding:0;border:none;border-radius:var(--n-search-border-radius);width:min(var(--n-search-max-w),100%);margin-inline:auto}.n-search-container{--mark-bg: var(--n-search-text-highlight);display:grid;width:min(var(--n-search-max-w),100%);min-height:470px;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{all:unset;display:flex;width:100%;border-bottom:1px solid var(--n-search-color-border)}.n-search-input{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::placeholder{color:var(--n-search-color-text)}.n-search-label{display:flex;padding-inline:var(--n-search-padding-inline);align-items:center}.n-search-label>*{display:inline-block;margin:0}.n-search-icon{display:flex;width:var(--icon-size, 1em);height:var(--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:400px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;margin-block:0;background:var(--n-search-color-bg)}.n-results-list,ul[role=list]{list-style:none;padding:0}.n-results-list-item{border-bottom:1px solid var(--color-bg-3)}.n-results-list-item:first-of-type{border-top:1px solid var(--color-bg-3)}.n-search-footer{border-top:1px solid var(--n-search-color-border);padding:var(--space-2xs) var(--space-s);background:var(--color-bg-2);display:flex;gap:var(--space-m)}.n-search-footer-tip{--n-key-text-color: var(--n-search-color-text-secondary);color:var(--n-search-color-text-secondary);display:flex;gap:var(--space-2xs);align-items:center;font-size:var(--step--1)}.n-search-modal{transition:display .2s allow-discrete,overlay .2s allow-discrete;animation:closeSearch .2s forwards}.n-search-modal[open]{animation:openSearch .2s forwards}@keyframes openSearch{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes closeSearch{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:.3}to{opacity:0;transform:translateY(20px) 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

@@ -103,10 +103,16 @@ const n = () => /* @__PURE__ */ C(
     d: "M0 4.57143C0 2.04286 2.04286 0 4.57143 0C37.4 0 64 26.6 64 59.4286C64 61.9571 61.9571 64 59.4286 64C56.9 64 54.8571 61.9571 54.8571 59.4286C54.8571 31.6571 32.3429 9.14286 4.57143 9.14286C2.04286 9.14286 0 7.1 0 4.57143ZM0 54.8571C0 52.4323 0.963263 50.1068 2.67788 48.3922C4.3925 46.6776 6.71802 45.7143 9.14286 45.7143C11.5677 45.7143 13.8932 46.6776 15.6078 48.3922C17.3225 50.1068 18.2857 52.4323 18.2857 54.8571C18.2857 57.282 17.3225 59.6075 15.6078 61.3221C13.8932 63.0367 11.5677 64 9.14286 64C6.71802 64 4.3925 63.0367 2.67788 61.3221C0.963263 59.6075 0 57.282 0 54.8571ZM4.57143 18.2857C27.3 18.2857 45.7143 36.7 45.7143 59.4286C45.7143 61.9571 43.6714 64 41.1429 64C38.6143 64 36.5714 61.9571 36.5714 59.4286C36.5714 41.7571 22.2429 27.4286 4.57143 27.4286C2.04286 27.4286 0 25.3857 0 22.8571C0 20.3286 2.04286 18.2857 4.57143 18.2857Z",
     fill: "currentColor"
   }
-), Z = () => /* @__PURE__ */ C("path", { d: "M15.4623 44.9025C17.0744 43.7277 19.1614 43.4278 21.0359 44.1027C24.3475 45.3024 28.0591 45.9897 32.0081 45.9897C47.5917 45.9897 58.0015 35.9295 58.0015 25.9942C58.0015 16.0589 47.5917 5.99866 32.0081 5.99866C16.4246 5.99866 6.01468 16.0589 6.01468 25.9942C6.01468 29.9933 7.56429 33.8424 10.4761 37.1417C11.5508 38.3539 12.0756 39.9536 11.9507 41.5782C11.7757 43.8402 11.2384 45.9148 10.5385 47.7518C12.663 46.7646 14.4251 45.6648 15.4623 44.915V44.9025ZM2.66553 49.9763C2.89048 49.6389 3.10292 49.3015 3.30287 48.9641C4.55255 46.8895 5.73975 44.1651 5.97719 41.1033C2.22814 36.8418 0.0162028 31.6304 0.0162028 25.9942C0.0162028 11.6349 14.3376 0 32.0081 0C49.6786 0 64 11.6349 64 25.9942C64 40.3535 49.6786 51.9884 32.0081 51.9884C27.3718 51.9884 22.9729 51.1886 18.9989 49.7514C17.5118 50.8387 15.0874 52.3258 12.2131 53.5755C10.3261 54.4004 8.17664 55.1502 5.9522 55.5876C5.85222 55.6126 5.75225 55.6251 5.65228 55.6501C5.10241 55.7501 4.56505 55.8375 4.00269 55.8875C3.9777 55.8875 3.94021 55.9 3.91522 55.9C3.27788 55.9625 2.64054 56 2.0032 56C1.19091 56 0.466089 55.5126 0.153668 54.7628C-0.158753 54.0129 0.0162028 53.1631 0.57856 52.5883C1.09093 52.0634 1.55331 51.501 1.9907 50.9011C2.20315 50.6137 2.4031 50.3263 2.59055 50.0388L2.62804 49.9763H2.66553Z", fill: "currentColor" }), u = () => /* @__PURE__ */ C(
+), Z = () => /* @__PURE__ */ C(
   "path",
   {
-    d: "M72.5371 33.3999C79.5621 26.3749 79.5621 14.9874 72.5371 7.96235C65.8496 1.27485 55.1121 0.912354 47.9871 7.14985L47.2246 7.82485C45.9746 8.91235 45.8496 10.8124 46.9371 12.0624C48.0246 13.3124 49.9246 13.4374 51.1746 12.3499L51.9371 11.6749C56.6871 7.52486 63.8371 7.76236 68.2996 12.2249C72.9746 16.8999 72.9746 24.4874 68.2996 29.1749L54.1371 43.3249C49.4621 47.9999 41.8621 47.9999 37.1871 43.3249C32.7246 38.8624 32.4871 31.7124 36.6371 26.9624L37.2246 26.2874C38.3121 25.0374 38.1871 23.1499 36.9371 22.0499C35.6871 20.9499 33.7996 21.0874 32.6996 22.3374L32.1121 23.0124C25.8871 30.1374 26.2496 40.8749 32.9371 47.5624C39.9621 54.5874 51.3496 54.5874 58.3746 47.5624L72.5371 33.3999ZM7.46211 30.5999C0.437109 37.6249 0.437109 49.0124 7.46211 56.0249C14.1621 62.7249 24.8996 63.0749 32.0246 56.8374L32.7871 56.1624C34.0371 55.0749 34.1621 53.1749 33.0746 51.9249C31.9871 50.6749 30.0871 50.5499 28.8371 51.6374L28.0746 52.3124C23.3246 56.4624 16.1746 56.2249 11.7121 51.7624C7.03711 47.0874 7.03711 39.4999 11.7121 34.8124L25.8746 20.6749C30.5496 15.9999 38.1371 15.9999 42.8246 20.6749C47.2871 25.1374 47.5246 32.2874 43.3746 37.0374L42.6996 37.7999C41.6121 39.0499 41.7371 40.9374 42.9871 42.0374C44.2371 43.1374 46.1246 42.9999 47.2246 41.7499L47.8996 40.9874C54.1371 33.8624 53.7746 23.1249 47.0871 16.4249C40.0621 9.39985 28.6746 9.39985 21.6496 16.4249L7.46211 30.5999Z",
+    d: "M15.4623 44.9025C17.0744 43.7277 19.1614 43.4278 21.0359 44.1027C24.3475 45.3024 28.0591 45.9897 32.0081 45.9897C47.5917 45.9897 58.0015 35.9295 58.0015 25.9942C58.0015 16.0589 47.5917 5.99866 32.0081 5.99866C16.4246 5.99866 6.01468 16.0589 6.01468 25.9942C6.01468 29.9933 7.56429 33.8424 10.4761 37.1417C11.5508 38.3539 12.0756 39.9536 11.9507 41.5782C11.7757 43.8402 11.2384 45.9148 10.5385 47.7518C12.663 46.7646 14.4251 45.6648 15.4623 44.915V44.9025ZM2.66553 49.9763C2.89048 49.6389 3.10292 49.3015 3.30287 48.9641C4.55255 46.8895 5.73975 44.1651 5.97719 41.1033C2.22814 36.8418 0.0162028 31.6304 0.0162028 25.9942C0.0162028 11.6349 14.3376 0 32.0081 0C49.6786 0 64 11.6349 64 25.9942C64 40.3535 49.6786 51.9884 32.0081 51.9884C27.3718 51.9884 22.9729 51.1886 18.9989 49.7514C17.5118 50.8387 15.0874 52.3258 12.2131 53.5755C10.3261 54.4004 8.17664 55.1502 5.9522 55.5876C5.85222 55.6126 5.75225 55.6251 5.65228 55.6501C5.10241 55.7501 4.56505 55.8375 4.00269 55.8875C3.9777 55.8875 3.94021 55.9 3.91522 55.9C3.27788 55.9625 2.64054 56 2.0032 56C1.19091 56 0.466089 55.5126 0.153668 54.7628C-0.158753 54.0129 0.0162028 53.1631 0.57856 52.5883C1.09093 52.0634 1.55331 51.501 1.9907 50.9011C2.20315 50.6137 2.4031 50.3263 2.59055 50.0388L2.62804 49.9763H2.66553Z",
+    fill: "currentColor"
+  }
+), u = () => /* @__PURE__ */ C(
+  "path",
+  {
+    d: "M58.0309 26.6159C63.6509 21.0179 63.6509 11.9435 58.0309 6.34543C52.6809 1.01633 44.0909 0.72746 38.3909 5.69797L37.7809 6.23586C36.7809 7.10246 36.6809 8.61652 37.5509 9.61262C38.4209 10.6087 39.9409 10.7083 40.9409 9.84172L41.5509 9.30383C45.3509 5.9968 51.0709 6.18605 54.6409 9.74211C58.3809 13.4675 58.3809 19.5138 54.6409 23.2491L43.3109 34.5249C39.5709 38.2503 33.4909 38.2503 29.7509 34.5249C26.1809 30.9689 25.9909 25.2712 29.3109 21.4861L29.7809 20.9482C30.6509 19.9521 30.5509 18.448 29.5509 17.5714C28.5509 16.6948 27.0409 16.8044 26.1609 17.8005L25.6909 18.3384C20.7109 24.0161 21.0009 32.5726 26.3509 37.9017C31.9709 43.4997 41.0809 43.4997 46.7009 37.9017L58.0309 26.6159ZM5.97086 24.3847C0.350859 29.9827 0.350859 39.0571 5.97086 44.6452C11.3309 49.9843 19.9209 50.2632 25.6209 45.2927L26.2309 44.7548C27.2309 43.8882 27.3309 42.3741 26.4609 41.378C25.5909 40.382 24.0709 40.2823 23.0709 41.1489L22.4609 41.6868C18.6609 44.9939 12.9409 44.8046 9.37086 41.2486C5.63086 37.5232 5.63086 31.4769 9.37086 27.7415L20.7009 16.4757C24.4409 12.7503 30.5109 12.7503 34.2609 16.4757C37.8309 20.0318 38.0209 25.7294 34.7009 29.5146L34.1609 30.1222C33.2909 31.1183 33.3909 32.6224 34.3909 33.4989C35.3909 34.3755 36.9009 34.2659 37.7809 33.2698L38.3209 32.6622C43.3109 26.9845 43.0209 18.428 37.6709 13.089C32.0509 7.49094 22.9409 7.49094 17.3209 13.089L5.97086 24.3847Z",
     fill: "currentColor"
   }
 ), i = () => /* @__PURE__ */ C(
@@ -133,7 +139,13 @@ const n = () => /* @__PURE__ */ C(
     d: "M8 20.0002C8 14.4752 12.475 10.0002 18 10.0002H22C27.525 10.0002 32 14.4752 32 20.0002V20.5752C32 23.5877 30.5 26.4002 27.9875 28.0627L21.45 32.4252C18.675 34.2752 17 37.4002 17 40.7502V41.0002C17 42.6627 18.3375 44.0002 20 44.0002C21.6625 44.0002 23 42.6627 23 41.0002V40.7502C23 39.4127 23.6625 38.1627 24.775 37.4252L31.3125 33.0627C35.4875 30.2752 37.9875 25.6002 37.9875 20.5877V20.0127C37.9875 11.1752 30.825 4.01271 21.9875 4.01271H17.9875C9.1625 4.00021 2 11.1627 2 20.0002C2 21.6627 3.3375 23.0002 5 23.0002C6.6625 23.0002 8 21.6627 8 20.0002ZM20 60.0002C21.0609 60.0002 22.0783 59.5788 22.8284 58.8286C23.5786 58.0785 24 57.0611 24 56.0002C24 54.9393 23.5786 53.9219 22.8284 53.1718C22.0783 52.4216 21.0609 52.0002 20 52.0002C18.9391 52.0002 17.9217 52.4216 17.1716 53.1718C16.4214 53.9219 16 54.9393 16 56.0002C16 57.0611 16.4214 58.0785 17.1716 58.8286C17.9217 59.5788 18.9391 60.0002 20 60.0002Z",
     fill: "currentColor"
   }
-), d = () => /* @__PURE__ */ C("path", { d: "M59.4286 0H4.55714C2.04286 0 0 2.07143 0 4.61429V59.3857C0 61.9286 2.04286 64 4.55714 64H59.4286C61.9429 64 64 61.9286 64 59.3857V4.61429C64 2.07143 61.9429 0 59.4286 0ZM19.3429 54.8571H9.85714V24.3143H19.3571V54.8571H19.3429ZM14.6 20.1429C11.5571 20.1429 9.1 17.6714 9.1 14.6429C9.1 11.6143 11.5571 9.14286 14.6 9.14286C17.6286 9.14286 20.1 11.6143 20.1 14.6429C20.1 17.6857 17.6429 20.1429 14.6 20.1429ZM54.9 54.8571H45.4143V40C45.4143 36.4571 45.3429 31.9 40.4857 31.9C35.5429 31.9 34.7857 35.7571 34.7857 39.7429V54.8571H25.3V24.3143H34.4V28.4857H34.5286C35.8 26.0857 38.9 23.5571 43.5143 23.5571C53.1143 23.5571 54.9 29.8857 54.9 38.1143V54.8571Z", fill: "currentColor" }), f = () => /* @__PURE__ */ C(
+), d = () => /* @__PURE__ */ C(
+  "path",
+  {
+    d: "M59.4286 0H4.55714C2.04286 0 0 2.07143 0 4.61429V59.3857C0 61.9286 2.04286 64 4.55714 64H59.4286C61.9429 64 64 61.9286 64 59.3857V4.61429C64 2.07143 61.9429 0 59.4286 0ZM19.3429 54.8571H9.85714V24.3143H19.3571V54.8571H19.3429ZM14.6 20.1429C11.5571 20.1429 9.1 17.6714 9.1 14.6429C9.1 11.6143 11.5571 9.14286 14.6 9.14286C17.6286 9.14286 20.1 11.6143 20.1 14.6429C20.1 17.6857 17.6429 20.1429 14.6 20.1429ZM54.9 54.8571H45.4143V40C45.4143 36.4571 45.3429 31.9 40.4857 31.9C35.5429 31.9 34.7857 35.7571 34.7857 39.7429V54.8571H25.3V24.3143H34.4V28.4857H34.5286C35.8 26.0857 38.9 23.5571 43.5143 23.5571C53.1143 23.5571 54.9 29.8857 54.9 38.1143V54.8571Z",
+    fill: "currentColor"
+  }
+), f = () => /* @__PURE__ */ C(
   "path",
   {
     d: "M48.6496 6H57.4746L38.1996 28.025L60.8746 58H43.1246L29.2121 39.825L13.3121 58H4.47461L25.0871 34.4375L3.34961 6H21.5496L34.1121 22.6125L48.6496 6ZM45.5496 52.725H50.4371L18.8871 11H13.6371L45.5496 52.725Z",

package/dist/components/preact/SearchModal/components/SearchLink/SearchLink.d.ts

@@ -1,3 +1,3 @@
 import { SearchLinkProps } from '../../types/search.types';
-declare const SearchLink: ({ icon, label, url, excerpt }: SearchLinkProps) => import("preact").JSX.Element;
+declare const SearchLink: ({ icon, label, url, excerpt, resource }: SearchLinkProps) => import("preact").JSX.Element;
 export default SearchLink;

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

@@ -1,13 +1,17 @@
-import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import r from "../../../Icon/index.js";
-import '../../../../../assets/SearchLink.css';const h = ({ icon: a, label: c, url: l, excerpt: n }) => /* @__PURE__ */ e("a", { className: "n-search-link", href: l, children: [
-  a && /* @__PURE__ */ e("span", { className: "n-search-link-icon", children: /* @__PURE__ */ e(r, { name: a }) }),
-  /* @__PURE__ */ e("div", { className: "n-search-link-body", children: [
-    /* @__PURE__ */ e("p", { className: "n-search-link-label", children: c }),
-    n && /* @__PURE__ */ e("p", { className: "n-search-link-excerpt", dangerouslySetInnerHTML: { __html: n } })
+import { u as a } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
+import s from "../../../Icon/index.js";
+import '../../../../../assets/SearchLink.css';const m = ({ icon: e, label: c, url: r, excerpt: l, resource: n }) => /* @__PURE__ */ a("a", { className: "n-search-link", href: r, children: [
+  e && /* @__PURE__ */ a("span", { className: "n-search-link-icon", children: /* @__PURE__ */ a(s, { name: e }) }),
+  /* @__PURE__ */ a("div", { className: "n-search-link-body", children: [
+    /* @__PURE__ */ a("p", { className: "n-search-link-title", children: [
+      /* @__PURE__ */ a("span", { className: "n-search-link-label", children: c }),
+      " ",
+      n && /* @__PURE__ */ a("span", { className: "n-search-link-badge", "data-resource": n, children: n })
+    ] }),
+    l && /* @__PURE__ */ a("p", { className: "n-search-link-excerpt", dangerouslySetInnerHTML: { __html: l } })
   ] }),
-  /* @__PURE__ */ e("div", { className: "n-search-link-icon", children: /* @__PURE__ */ e(r, { name: "caretRight" }) })
+  /* @__PURE__ */ a("div", { className: "n-search-link-icon", children: /* @__PURE__ */ a(s, { name: "caretRight" }) })
 ] });
 export {
-  h as default
+  m as default
 };

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

@@ -1,64 +1,63 @@
-import { A as u, y as p, d as S } from "../../../../chunks/hooks.module.BFfOesdf.js";
-import { getSiteIcon as w } from "../utils/index.js";
-function T(s, r) {
-  const t = u(null), c = u("");
-  return p(() => () => {
+import { A as u, y as w, d as S } from "../../../../chunks/hooks.module.BFfOesdf.js";
+function T(c, n) {
+  const t = u(null), a = u("");
+  return w(() => () => {
     t.current && clearTimeout(t.current);
   }, []), { reset: () => {
     t.current && clearTimeout(t.current);
   }, run: (h) => {
-    c.current = h, t.current = setTimeout(
-      () => s(c.current),
-      r
+    a.current = h, t.current = setTimeout(
+      () => c(a.current),
+      n
     );
   } };
 }
-function x() {
-  const [s, r] = S({
+function b() {
+  const [c, n] = S({
     searchTerm: "",
     results: [],
     isLoading: !1
-  }), t = u(/* @__PURE__ */ new Map()), { reset: c, run: l } = T((e) => {
-    (e.length > 2 || e.length === 0) && o(e);
-  }, 150), o = async (e) => {
+  }), t = u(/* @__PURE__ */ new Map()), { reset: a, run: l } = T((e) => {
+    (e.length > 2 || e.length === 0) && i(e);
+  }, 150), i = async (e) => {
     if (!(window != null && window.pagefind)) return;
-    if (r((n) => ({ ...n, isLoading: !0 })), t.current.has(e)) {
-      r((n) => ({
-        ...n,
+    if (n((r) => ({ ...r, isLoading: !0 })), t.current.has(e)) {
+      n((r) => ({
+        ...r,
         results: t.current.get(e),
         isLoading: !1
       }));
       return;
     }
-    const i = await window.pagefind.debouncedSearch(e), g = await Promise.all(
-      i.results.slice(0, 15).map(async (n) => {
-        var m, f, d;
-        const a = await n.data();
+    const o = await window.pagefind.debouncedSearch(e), d = await Promise.all(
+      o.results.slice(0, 15).map(async (r) => {
+        var f, m;
+        const s = await r.data(), g = (p) => p.replace("#", "");
         return {
-          icon: w((m = a.meta) == null ? void 0 : m.content_type),
-          content_type: (f = a.meta) == null ? void 0 : f.content_type,
-          label: (d = a.meta) == null ? void 0 : d.title,
-          url: a.url,
-          excerpt: a.excerpt
+          icon: "pageWithLines",
+          resource: (f = s.meta) == null ? void 0 : f.resource,
+          label: (m = s.meta) == null ? void 0 : m.title,
+          url: s.url,
+          excerpt: g(s.excerpt)
         };
       })
     );
-    r((n) => ({
-      ...n,
-      results: g,
+    n((r) => ({
+      ...r,
+      results: d,
       isLoading: !1
     }));
   };
   return {
-    state: s,
+    state: c,
     actions: {
       setSearchTerm: (e) => {
-        r((i) => ({ ...i, searchTerm: e })), c(), l(e);
+        n((o) => ({ ...o, searchTerm: e })), a(), l(e);
       },
-      submitSearch: o
+      submitSearch: i
     }
   };
 }
 export {
-  x as useSearch
+  b as useSearch
 };

package/dist/components/preact/SearchModal/types/search.types.d.ts

@@ -3,7 +3,7 @@ import { IconName } from '../../Icon';
 export interface SearchLinkProps {
     icon: IconName;
     label: string;
-    content_type?: string;
+    resource?: 'blog' | 'changelog' | 'docs' | 'guide';
     url: string;
     excerpt?: string;
 }

package/package.json

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

package/packages/components/Tabs.astro

@@ -7,14 +7,14 @@ interface Props {
 const { id, class: className, ...rest } = Astro.props;
 ---
 
-<x-tabs id={id} class={className} {...rest}>
+<n-tabs id={id} class={className} {...rest}>
   <slot />
-</x-tabs>
+</n-tabs>
 
 <script>
   /**
    * Slightly altered version of another tabs component
-   * Adds "tabs-change" event that includes selected tab info
+   * Adds "tabs-change" event that returns selected tab info
    * {@link https://www.mayank.co/blog/tabs}
    */
   class Tabs extends HTMLElement {
@@ -102,5 +102,5 @@ const { id, class: className, ...rest } = Astro.props;
     }
   }
 
-  customElements.define('x-tabs', Tabs);
+  customElements.define('n-tabs', Tabs);
 </script>

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

@@ -118,14 +118,17 @@ const RSSIcon: FunctionComponent = () => {
 
 const CommentIcon: FunctionComponent = () => {
   return (
-<path d="M15.4623 44.9025C17.0744 43.7277 19.1614 43.4278 21.0359 44.1027C24.3475 45.3024 28.0591 45.9897 32.0081 45.9897C47.5917 45.9897 58.0015 35.9295 58.0015 25.9942C58.0015 16.0589 47.5917 5.99866 32.0081 5.99866C16.4246 5.99866 6.01468 16.0589 6.01468 25.9942C6.01468 29.9933 7.56429 33.8424 10.4761 37.1417C11.5508 38.3539 12.0756 39.9536 11.9507 41.5782C11.7757 43.8402 11.2384 45.9148 10.5385 47.7518C12.663 46.7646 14.4251 45.6648 15.4623 44.915V44.9025ZM2.66553 49.9763C2.89048 49.6389 3.10292 49.3015 3.30287 48.9641C4.55255 46.8895 5.73975 44.1651 5.97719 41.1033C2.22814 36.8418 0.0162028 31.6304 0.0162028 25.9942C0.0162028 11.6349 14.3376 0 32.0081 0C49.6786 0 64 11.6349 64 25.9942C64 40.3535 49.6786 51.9884 32.0081 51.9884C27.3718 51.9884 22.9729 51.1886 18.9989 49.7514C17.5118 50.8387 15.0874 52.3258 12.2131 53.5755C10.3261 54.4004 8.17664 55.1502 5.9522 55.5876C5.85222 55.6126 5.75225 55.6251 5.65228 55.6501C5.10241 55.7501 4.56505 55.8375 4.00269 55.8875C3.9777 55.8875 3.94021 55.9 3.91522 55.9C3.27788 55.9625 2.64054 56 2.0032 56C1.19091 56 0.466089 55.5126 0.153668 54.7628C-0.158753 54.0129 0.0162028 53.1631 0.57856 52.5883C1.09093 52.0634 1.55331 51.501 1.9907 50.9011C2.20315 50.6137 2.4031 50.3263 2.59055 50.0388L2.62804 49.9763H2.66553Z" fill="currentColor" />
+    <path
+      d="M15.4623 44.9025C17.0744 43.7277 19.1614 43.4278 21.0359 44.1027C24.3475 45.3024 28.0591 45.9897 32.0081 45.9897C47.5917 45.9897 58.0015 35.9295 58.0015 25.9942C58.0015 16.0589 47.5917 5.99866 32.0081 5.99866C16.4246 5.99866 6.01468 16.0589 6.01468 25.9942C6.01468 29.9933 7.56429 33.8424 10.4761 37.1417C11.5508 38.3539 12.0756 39.9536 11.9507 41.5782C11.7757 43.8402 11.2384 45.9148 10.5385 47.7518C12.663 46.7646 14.4251 45.6648 15.4623 44.915V44.9025ZM2.66553 49.9763C2.89048 49.6389 3.10292 49.3015 3.30287 48.9641C4.55255 46.8895 5.73975 44.1651 5.97719 41.1033C2.22814 36.8418 0.0162028 31.6304 0.0162028 25.9942C0.0162028 11.6349 14.3376 0 32.0081 0C49.6786 0 64 11.6349 64 25.9942C64 40.3535 49.6786 51.9884 32.0081 51.9884C27.3718 51.9884 22.9729 51.1886 18.9989 49.7514C17.5118 50.8387 15.0874 52.3258 12.2131 53.5755C10.3261 54.4004 8.17664 55.1502 5.9522 55.5876C5.85222 55.6126 5.75225 55.6251 5.65228 55.6501C5.10241 55.7501 4.56505 55.8375 4.00269 55.8875C3.9777 55.8875 3.94021 55.9 3.91522 55.9C3.27788 55.9625 2.64054 56 2.0032 56C1.19091 56 0.466089 55.5126 0.153668 54.7628C-0.158753 54.0129 0.0162028 53.1631 0.57856 52.5883C1.09093 52.0634 1.55331 51.501 1.9907 50.9011C2.20315 50.6137 2.4031 50.3263 2.59055 50.0388L2.62804 49.9763H2.66553Z"
+      fill="currentColor"
+    />
   );
 };
 
 const LinkIcon: FunctionComponent = () => {
   return (
     <path
-      d="M72.5371 33.3999C79.5621 26.3749 79.5621 14.9874 72.5371 7.96235C65.8496 1.27485 55.1121 0.912354 47.9871 7.14985L47.2246 7.82485C45.9746 8.91235 45.8496 10.8124 46.9371 12.0624C48.0246 13.3124 49.9246 13.4374 51.1746 12.3499L51.9371 11.6749C56.6871 7.52486 63.8371 7.76236 68.2996 12.2249C72.9746 16.8999 72.9746 24.4874 68.2996 29.1749L54.1371 43.3249C49.4621 47.9999 41.8621 47.9999 37.1871 43.3249C32.7246 38.8624 32.4871 31.7124 36.6371 26.9624L37.2246 26.2874C38.3121 25.0374 38.1871 23.1499 36.9371 22.0499C35.6871 20.9499 33.7996 21.0874 32.6996 22.3374L32.1121 23.0124C25.8871 30.1374 26.2496 40.8749 32.9371 47.5624C39.9621 54.5874 51.3496 54.5874 58.3746 47.5624L72.5371 33.3999ZM7.46211 30.5999C0.437109 37.6249 0.437109 49.0124 7.46211 56.0249C14.1621 62.7249 24.8996 63.0749 32.0246 56.8374L32.7871 56.1624C34.0371 55.0749 34.1621 53.1749 33.0746 51.9249C31.9871 50.6749 30.0871 50.5499 28.8371 51.6374L28.0746 52.3124C23.3246 56.4624 16.1746 56.2249 11.7121 51.7624C7.03711 47.0874 7.03711 39.4999 11.7121 34.8124L25.8746 20.6749C30.5496 15.9999 38.1371 15.9999 42.8246 20.6749C47.2871 25.1374 47.5246 32.2874 43.3746 37.0374L42.6996 37.7999C41.6121 39.0499 41.7371 40.9374 42.9871 42.0374C44.2371 43.1374 46.1246 42.9999 47.2246 41.7499L47.8996 40.9874C54.1371 33.8624 53.7746 23.1249 47.0871 16.4249C40.0621 9.39985 28.6746 9.39985 21.6496 16.4249L7.46211 30.5999Z"
+      d="M58.0309 26.6159C63.6509 21.0179 63.6509 11.9435 58.0309 6.34543C52.6809 1.01633 44.0909 0.72746 38.3909 5.69797L37.7809 6.23586C36.7809 7.10246 36.6809 8.61652 37.5509 9.61262C38.4209 10.6087 39.9409 10.7083 40.9409 9.84172L41.5509 9.30383C45.3509 5.9968 51.0709 6.18605 54.6409 9.74211C58.3809 13.4675 58.3809 19.5138 54.6409 23.2491L43.3109 34.5249C39.5709 38.2503 33.4909 38.2503 29.7509 34.5249C26.1809 30.9689 25.9909 25.2712 29.3109 21.4861L29.7809 20.9482C30.6509 19.9521 30.5509 18.448 29.5509 17.5714C28.5509 16.6948 27.0409 16.8044 26.1609 17.8005L25.6909 18.3384C20.7109 24.0161 21.0009 32.5726 26.3509 37.9017C31.9709 43.4997 41.0809 43.4997 46.7009 37.9017L58.0309 26.6159ZM5.97086 24.3847C0.350859 29.9827 0.350859 39.0571 5.97086 44.6452C11.3309 49.9843 19.9209 50.2632 25.6209 45.2927L26.2309 44.7548C27.2309 43.8882 27.3309 42.3741 26.4609 41.378C25.5909 40.382 24.0709 40.2823 23.0709 41.1489L22.4609 41.6868C18.6609 44.9939 12.9409 44.8046 9.37086 41.2486C5.63086 37.5232 5.63086 31.4769 9.37086 27.7415L20.7009 16.4757C24.4409 12.7503 30.5109 12.7503 34.2609 16.4757C37.8309 20.0318 38.0209 25.7294 34.7009 29.5146L34.1609 30.1222C33.2909 31.1183 33.3909 32.6224 34.3909 33.4989C35.3909 34.3755 36.9009 34.2659 37.7809 33.2698L38.3209 32.6622C43.3109 26.9845 43.0209 18.428 37.6709 13.089C32.0509 7.49094 22.9409 7.49094 17.3209 13.089L5.97086 24.3847Z"
       fill="currentColor"
     />
   );
@@ -169,7 +172,10 @@ const QuestionIcon: FunctionComponent = () => {
 
 const LinkedInIcon: FunctionComponent = () => {
   return (
-<path d="M59.4286 0H4.55714C2.04286 0 0 2.07143 0 4.61429V59.3857C0 61.9286 2.04286 64 4.55714 64H59.4286C61.9429 64 64 61.9286 64 59.3857V4.61429C64 2.07143 61.9429 0 59.4286 0ZM19.3429 54.8571H9.85714V24.3143H19.3571V54.8571H19.3429ZM14.6 20.1429C11.5571 20.1429 9.1 17.6714 9.1 14.6429C9.1 11.6143 11.5571 9.14286 14.6 9.14286C17.6286 9.14286 20.1 11.6143 20.1 14.6429C20.1 17.6857 17.6429 20.1429 14.6 20.1429ZM54.9 54.8571H45.4143V40C45.4143 36.4571 45.3429 31.9 40.4857 31.9C35.5429 31.9 34.7857 35.7571 34.7857 39.7429V54.8571H25.3V24.3143H34.4V28.4857H34.5286C35.8 26.0857 38.9 23.5571 43.5143 23.5571C53.1143 23.5571 54.9 29.8857 54.9 38.1143V54.8571Z" fill="currentColor"/>
+    <path
+      d="M59.4286 0H4.55714C2.04286 0 0 2.07143 0 4.61429V59.3857C0 61.9286 2.04286 64 4.55714 64H59.4286C61.9429 64 64 61.9286 64 59.3857V4.61429C64 2.07143 61.9429 0 59.4286 0ZM19.3429 54.8571H9.85714V24.3143H19.3571V54.8571H19.3429ZM14.6 20.1429C11.5571 20.1429 9.1 17.6714 9.1 14.6429C9.1 11.6143 11.5571 9.14286 14.6 9.14286C17.6286 9.14286 20.1 11.6143 20.1 14.6429C20.1 17.6857 17.6429 20.1429 14.6 20.1429ZM54.9 54.8571H45.4143V40C45.4143 36.4571 45.3429 31.9 40.4857 31.9C35.5429 31.9 34.7857 35.7571 34.7857 39.7429V54.8571H25.3V24.3143H34.4V28.4857H34.5286C35.8 26.0857 38.9 23.5571 43.5143 23.5571C53.1143 23.5571 54.9 29.8857 54.9 38.1143V54.8571Z"
+      fill="currentColor"
+    />
   );
 };
 

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

@@ -2,6 +2,7 @@
   padding-inline: 1rem;
   margin-block: var(--space-xs);
   font-size: var(--step--2);
-  font-weight: var(--font-regular);
+  font-weight: var(--font-semibold, 500);
+  letter-spacing: .1px;
   color: var(--color-text-3);
 }

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

@@ -27,7 +27,7 @@
   }
 }
 
-.n-search-link-label {
+.n-search-link-title {
   font-weight: var(--font-semibold, 680);
   color: var(--color-text-2);
   line-height: 1.5;
@@ -59,3 +59,36 @@
   width: .8em;
   opacity: .3;
 }
+
+.n-search-link-label {
+  margin-inline-end: var(--space-2xs);
+}
+
+.n-search-link-badge {
+  display: inline-block;
+  width: max-content;
+  font-size: .7em;
+  padding: .1em .4em;
+  position: relative;
+  bottom: 0.3em;
+  color: var(--n-search-link-badge-text-color, var(--neutral-500));
+  background: var(--n-search-link-badge-color, var(--neutral-100));
+  border: 1px solid var(--n-search-link-badge-border, var(--neutral-300));
+  border-radius: 3px;
+}
+
+.n-search-link-badge[data-resource="blog"] {
+  --n-search-link-badge-color: var(--blue-000);
+  --n-search-link-badge-text-color: var(--blue-500);
+  --n-search-link-badge-border: var(--blue-100);
+}
+.n-search-link-badge[data-resource="changelog"] {
+  --n-search-link-badge-color: var(--gold-000);
+  --n-search-link-badge-text-color: var(--gold-500);
+  --n-search-link-badge-border: var(--gold-100);
+}
+.n-search-link-badge[data-resource="guide"] {
+  --n-search-link-badge-color: var(--teal-000);
+  --n-search-link-badge-text-color: var(--teal-500);
+  --n-search-link-badge-border: var(--teal-100);
+}

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

@@ -3,7 +3,7 @@ import './SearchLink.css';
 
 import Icon from '../../../Icon';
 
-const SearchLink = ({ icon, label, url, excerpt }: SearchLinkProps) => {
+const SearchLink = ({ icon, label, url, excerpt, resource }: SearchLinkProps) => {
   return (
     <a className="n-search-link" href={url}>
       {icon && (
@@ -12,7 +12,9 @@ const SearchLink = ({ icon, label, url, excerpt }: SearchLinkProps) => {
         </span>
       )}
       <div className="n-search-link-body">
-        <p className="n-search-link-label">{label}</p>
+        
+        <p className="n-search-link-title">
+        <span className="n-search-link-label">{label}</span> {resource && <span className="n-search-link-badge" data-resource={resource}>{resource}</span>}</p>
         {excerpt && (
           <p className="n-search-link-excerpt" dangerouslySetInnerHTML={{ __html: excerpt }} />
         )}

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

@@ -1,7 +1,6 @@
 import { useState, useRef } from 'preact/hooks';
 import type { SearchState } from '../types/search.types';
 import { useTimeout } from '../../../../utils/useTimeout';
-import { getSiteIcon } from '../utils';
 
 /**
  * Hook that encapsulates client-side search logic:
@@ -44,12 +43,14 @@ export function useSearch() {
     const results = await Promise.all(
       search.results.slice(0, 15).map(async (result: any) => {
         const data = await result.data();
+        const removeAnchorLink = (text: string) => text.replace("#", '')
+
         return {
-          icon: getSiteIcon(data.meta?.content_type),
-          content_type: data.meta?.content_type,
+          icon: 'pageWithLines',
+          resource: data.meta?.resource,
           label: data.meta?.title,
           url: data.url,
-          excerpt: data.excerpt,
+          excerpt: removeAnchorLink(data.excerpt),
         };
       })
     );

package/packages/components/preact/SearchModal/types/search.types.tsx

@@ -4,7 +4,7 @@ import type { IconName } from '../../Icon';
 export interface SearchLinkProps {
   icon: IconName;
   label: string;
-  content_type?: string;
+  resource?: 'blog' | 'changelog' | 'docs' | 'guide';
   url: string;
   excerpt?: string;
 }

package/packages/styles/buttons.css

@@ -16,20 +16,25 @@ button,
   border: 1px solid var(--color-border);
   border-radius: var(--radius-m);
 
-  /* Button press */
-  &:active:not(:disabled) {
-    top: 1px;
-  }
-
   /* Button icons */
   svg {
     flex: none;
     height: var(--button-icon-size, 1.2cap);
     width: auto;
   }
-}
 
-:where(button, .button) {
+  /* Button states */
+  &:active:not(:disabled) {
+    top: 1px;
+  }
+
+  &:disabled {
+    color: var(--color-disabled-bg);
+    background-color: var(--color-disabled-bg);
+    border-color: var(--color-disabled-bg);
+  }
+
+  /* Button variants */
   &[data-button-variant='primary'] {
     color: var(--color-text-inverse);
     background-color: var(--color-brand);
@@ -40,4 +45,16 @@ button,
     background-color: var(--color-brand-alt);
     border-color: var(--color-brand-alt);
   }
+
+  &[data-button-variant='text'] {
+    color: currentColor;
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  &[data-button-variant='ghost'] {
+    color: currentColor;
+    background-color: transparent;
+    border-color: currentColor;
+  }
 }

package/packages/styles/tabs.css

@@ -1,16 +1,26 @@
-[role='tablist'] {
+.tabs [role='tablist'] {
   display: flex;
-  gap: 2rem;
+  isolation: isolate;
+  border: var(--_border);
 }
 
-[role='tab'] {
-  border-bottom: 2px solid transparent;
+.tabs [role='tab'] {
+  position: relative;
+  border-color: transparent;
 
-  &[aria-selected='true'] {
-    border-color: var(--color-border);
+  /* Remove button push/click style */
+  &:active:not(:disabled) {
+    top: unset;
   }
 }
 
-[role='tabpanel'] {
-  margin-block-start: 1rem;
+.tabs [role='tab'][aria-selected='true'] {
+  /* Bring selected tab to layer above others to avoid clipping outline styles */
+  z-index: 1;
+}
+
+.tabs [role='tabpanel'] {
+  border: var(--_border);
+  border-block-start: unset;
+  padding: var(--_padding);
 }

package/packages/styles/tokens.css

@@ -16,6 +16,7 @@
   --color-bg-1: var(--neutral-000);
   --color-bg-2: var(--neutral-100);
   --color-bg-3: var(--neutral-200);
+  --color-border: var(--neutral-200);
   --color-brand: var(--blue-700);
   --color-disabled-bg: var(--neutral-200);
   --color-disabled-border: var(--neutral-400);
@@ -146,6 +147,7 @@
     --color-bg-1: var(--neutral-000);
     --color-bg-2: var(--neutral-100);
     --color-bg-3: var(--neutral-200);
+    --color-border: var(--neutral-200);
     --color-brand: var(--blue-700);
     --color-disabled-bg: var(--neutral-200);
     --color-disabled-border: var(--neutral-400);
@@ -180,6 +182,7 @@
   --color-bg-1: var(--neutral-000);
   --color-bg-2: var(--neutral-100);
   --color-bg-3: var(--neutral-200);
+  --color-border: var(--neutral-200);
   --color-brand: var(--blue-700);
   --color-disabled-bg: var(--neutral-200);
   --color-disabled-border: var(--neutral-400);
@@ -214,6 +217,7 @@
     --color-bg-1: var(--neutral-800);
     --color-bg-2: var(--neutral-700);
     --color-bg-3: var(--neutral-600);
+    --color-border: var(--neutral-200);
     --color-brand: var(--teal-200);
     --color-disabled-bg: var(--neutral-600);
     --color-disabled-border: var(--neutral-400);
@@ -248,6 +252,7 @@
   --color-bg-1: var(--neutral-800);
   --color-bg-2: var(--neutral-700);
   --color-bg-3: var(--neutral-600);
+  --color-border: var(--neutral-200);
   --color-brand: var(--teal-200);
   --color-disabled-bg: var(--neutral-600);
   --color-disabled-border: var(--neutral-400);

package/dist/components/preact/SearchModal/utils/index.d.ts

@@ -1,2 +0,0 @@
-import { IconName } from '../../Icon';
-export declare function getSiteIcon(contentType?: string): IconName;

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

@@ -1,11 +0,0 @@
-const i = {
-  blog: "book",
-  changelog: "rss",
-  doc: "pageWithLines"
-};
-function o(e) {
-  return e && i[e] || "pageWithLines";
-}
-export {
-  o as getSiteIcon
-};

package/packages/components/preact/SearchModal/utils/index.ts

@@ -1,11 +0,0 @@
-import { IconName } from '../../Icon';
-
-const SITE_ICONS: Record<string, IconName> = {
-  blog: 'book',
-  changelog: 'rss',
-  doc: 'pageWithLines',
-};
-
-export function getSiteIcon(contentType?: string): IconName {
-  return contentType ? SITE_ICONS[contentType] || 'pageWithLines' : 'pageWithLines';
-}