@netlify/spark-ui 0.0.34 → 0.0.35

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

@@ -1,8 +1,8 @@
-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) {
+import { A as u, y as w, d as T } from "../../../../chunks/hooks.module.BFfOesdf.js";
+import { getSiteIcon as L } from "../utils/index.js";
+function b(s, r) {
   const t = u(null), c = u("");
-  return p(() => () => {
+  return w(() => () => {
     t.current && clearTimeout(t.current);
   }, []), { reset: () => {
     t.current && clearTimeout(t.current);
@@ -13,12 +13,12 @@ function T(s, r) {
     );
   } };
 }
-function x() {
-  const [s, r] = S({
+function _() {
+  const [s, r] = T({
     searchTerm: "",
     results: [],
     isLoading: !1
-  }), t = u(/* @__PURE__ */ new Map()), { reset: c, run: l } = T((e) => {
+  }), t = u(/* @__PURE__ */ new Map()), { reset: c, run: l } = b((e) => {
     (e.length > 2 || e.length === 0) && o(e);
   }, 150), o = async (e) => {
     if (!(window != null && window.pagefind)) return;
@@ -30,22 +30,22 @@ function x() {
       }));
       return;
     }
-    const i = await window.pagefind.debouncedSearch(e), g = await Promise.all(
+    const i = await window.pagefind.debouncedSearch(e), p = await Promise.all(
       i.results.slice(0, 15).map(async (n) => {
         var m, f, d;
-        const a = await n.data();
+        const a = await n.data(), g = (S) => S.replace("#", "");
         return {
-          icon: w((m = a.meta) == null ? void 0 : m.content_type),
+          icon: L((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
+          excerpt: g(a.excerpt)
         };
       })
     );
     r((n) => ({
       ...n,
-      results: g,
+      results: p,
       isLoading: !1
     }));
   };
@@ -60,5 +60,5 @@ function x() {
   };
 }
 export {
-  x as useSearch
+  _ as useSearch
 };

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.35",
   "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/SearchModal/hooks/useSearch.ts

@@ -44,12 +44,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,
           label: data.meta?.title,
           url: data.url,
-          excerpt: data.excerpt,
+          excerpt: removeAnchorLink(data.excerpt),
         };
       })
     );

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