@netlify/spark-ui 1.26.0-alpha.6 → 1.26.0-alpha.8

package/packages/components/FilterableGrid/FilterableGrid.astro

@@ -0,0 +1,403 @@
+---
+import type { FilterableGridProps } from './filter-types';
+import Button from '../Button.astro';
+
+const { filters, results, totalCount, matchMode, id } = Astro.props as FilterableGridProps;
+
+const filterModeAttrs = Object.fromEntries(
+  filters
+    .filter(category => category.matchMode)
+    .map(category => [`filter-mode-${category.key}`, category.matchMode])
+);
+
+const initialResultsLabel = `${totalCount} ${totalCount === 1 ? results.singular : results.plural}`;
+---
+
+<div id={id} data-filter-root>
+  {
+    filters.length > 0 && (
+      <filter-container oninit filter-mode={matchMode} {...filterModeAttrs}>
+        <form class="n-filter-form" data-filter-form>
+          <details-utils
+            class="n-filter-dropdowns"
+            force-close="(min-width: 37.5em)"
+            force-restore
+            close-click-outside="(min-width: 37.5em)"
+            animate
+          >
+            {filters.map(category => (
+              <details class="n-filter-facet">
+                <summary>
+                  <span class="n-filter-label">
+                    {category.label}
+                    <span class="n-filter-count" data-filter-count-badge data-filter-category={category.key}>
+                      0
+                    </span>
+                  </span>
+                  <svg
+                    class="n-filter-chevron-icon"
+                    viewBox="0 0 512 512"
+                    fill="none"
+                    role="presentation"
+                  >
+                    <path
+                      d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"
+                      fill="currentcolor"
+                    />
+                  </svg>
+                </summary>
+                <fieldset class="n-filter-menu">
+                  <legend class="n-filter-legend">{category.legend ?? `${category.label}:`}</legend>
+                  {category.control === 'radio' && category.anyOption && (
+                    <label>
+                      <input
+                        type="radio"
+                        name={category.key}
+                        value=""
+                        data-filter-key={category.key}
+                        checked
+                      />
+                      {category.anyOption.label}
+                    </label>
+                  )}
+                  {category.options.map(option => (
+                    <label>
+                      <input
+                        type={category.control === 'radio' ? 'radio' : 'checkbox'}
+                        name={category.key}
+                        value={option.value}
+                        data-filter-key={category.key}
+                      />
+                      {option.label}
+                    </label>
+                  ))}
+                </fieldset>
+              </details>
+            ))}
+          </details-utils>
+        </form>
+
+        <div class="n-filter-meta">
+          <p
+            class="n-filter-results"
+            data-filter-results={`${results.singular}/${results.plural}`}
+            aria-live="polite"
+          >
+            {initialResultsLabel}
+          </p>
+          <ul class="n-filter-tags" role="list" data-filter-tags>
+            {filters.flatMap(category =>
+              category.options.map(option => (
+                <li
+                  class="n-filter-tag"
+                  data-tag-key={category.key}
+                  data-tag-value={option.value}
+                  hidden
+                >
+                  <Button
+                    type="button"
+                    variant="outline"
+                    data-tag-key={category.key}
+                    data-tag-value={option.value}
+                  >
+                    {option.label}
+                    <svg class="n-close-icon" viewBox="0 0 512 512" fill="none" role="presentation">
+                      <path
+                        d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256z"
+                        fill="currentcolor"
+                      />
+                    </svg>
+                  </Button>
+                </li>
+              ))
+            )}
+          </ul>
+        </div>
+
+        <slot />
+      </filter-container>
+    )
+  }
+  {filters.length === 0 && <slot />}
+</div>
+
+<script src="@zachleat/filter-container/filter-container.js"></script>
+<script src="@zachleat/details-utils/details-utils.js"></script>
+<script>
+  function initFilterableGrid(root: HTMLElement): void {
+    const form = root.querySelector<HTMLFormElement>('[data-filter-form]');
+    if (!form) return;
+
+    const tagsList = root.querySelector<HTMLUListElement>('[data-filter-tags]');
+
+    const updateCount = (key: string) => {
+      const count = Array.from(
+        form.querySelectorAll<HTMLInputElement>(`[data-filter-key="${CSS.escape(key)}"]:checked`)
+      ).filter(entry => !!entry.value).length;
+      const counter = root.querySelector<HTMLElement>(
+        `[data-filter-count-badge][data-filter-category="${CSS.escape(key)}"]`
+      );
+      if (counter) {
+        counter.textContent = String(count);
+        counter.classList.toggle('is-visible', count > 0);
+      }
+    };
+
+    const showChip = (chipLi: HTMLLIElement) => {
+      if (!tagsList) return;
+      chipLi.hidden = false;
+      tagsList.appendChild(chipLi);
+    };
+
+    const hideChip = (chipLi: HTMLLIElement) => {
+      chipLi.hidden = true;
+    };
+
+    const findChip = (key: string, value: string): HTMLLIElement | null =>
+      tagsList?.querySelector<HTMLLIElement>(
+        `li[data-tag-key="${CSS.escape(key)}"][data-tag-value="${CSS.escape(value)}"]`
+      ) ?? null;
+
+    const onCheckboxInput = (key: string, value: string, checked: boolean) => {
+      const chip = findChip(key, value);
+      if (!chip) return;
+      if (checked) showChip(chip);
+      else hideChip(chip);
+    };
+
+    const onRadioInput = (key: string, value: string) => {
+      if (!tagsList) return;
+      tagsList
+        .querySelectorAll<HTMLLIElement>(`li[data-tag-key="${CSS.escape(key)}"]`)
+        .forEach(chip => {
+          if (value && chip.dataset.tagValue === value) showChip(chip);
+          else hideChip(chip);
+        });
+    };
+
+    const onTagInput = (input: HTMLInputElement) => {
+      if (!tagsList) return;
+      const key = input.dataset.filterKey;
+      if (!key) return;
+      if (input.type === 'radio') onRadioInput(key, input.value);
+      else onCheckboxInput(key, input.value, input.checked);
+    };
+
+    form.addEventListener('input', event => {
+      if (!(event.target instanceof HTMLInputElement)) return;
+      const key = event.target.dataset.filterKey;
+      if (key) updateCount(key);
+      if (tagsList) onTagInput(event.target);
+    });
+
+    tagsList?.addEventListener('click', event => {
+      const button = (event.target as HTMLElement).closest('button');
+      if (!button || !tagsList.contains(button)) return;
+      const key = button.dataset.tagKey;
+      const value = button.dataset.tagValue;
+      if (!key || value === undefined) return;
+      const input = form.querySelector<HTMLInputElement>(
+        `input[name="${CSS.escape(key)}"][value="${CSS.escape(value)}"]`
+      );
+      if (!input) return;
+      if (input.type === 'radio') {
+        const resetRadio = form.querySelector<HTMLInputElement>(
+          `input[type="radio"][name="${CSS.escape(key)}"][value=""]`
+        );
+        resetRadio?.dispatchEvent(
+          new MouseEvent('click', { view: window, bubbles: true, cancelable: true })
+        );
+      } else {
+        input.dispatchEvent(
+          new MouseEvent('click', { view: window, bubbles: true, cancelable: true })
+        );
+      }
+    });
+
+    // Seed counts/chips from state restored by filter-container's `oninit` (e.g. from URL params).
+    window.addEventListener('load', () => {
+      const checked = form.querySelectorAll<HTMLInputElement>('[data-filter-key]:checked');
+      checked.forEach(input => {
+        const key = input.dataset.filterKey;
+        if (key) updateCount(key);
+        if (tagsList) onTagInput(input);
+      });
+    });
+  }
+
+  const filterRoot = document.querySelector<HTMLElement>('[data-filter-root]');
+  if (filterRoot) initFilterableGrid(filterRoot);
+</script>
+
+<style>
+  .n-filter-form {
+    display: flex;
+    justify-content: center;
+    margin-block-end: var(--ntl-space-s);
+  }
+
+  .n-filter-dropdowns {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 100%;
+    border-radius: var(--ntl-radius-m);
+  }
+
+  @media (min-width: 37.5em) {
+    .n-filter-dropdowns {
+      display: inline-flex;
+      width: auto;
+      gap: var(--ntl-space-s);
+      padding: var(--ntl-space-s);
+      background-color: var(--ntl-color-bg-2);
+    }
+  }
+
+  .n-filter-facet {
+    width: 100%;
+    border-top: 1px solid var(--ntl-color-border-strong);
+  }
+
+  .n-filter-facet:last-child {
+    border-bottom: 1px solid var(--ntl-color-border-strong);
+  }
+
+  @media (min-width: 37.5em) {
+    .n-filter-facet,
+    .n-filter-facet:last-child {
+      width: auto;
+      border: none;
+    }
+  }
+
+  .n-filter-facet > summary {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ntl-space-2xs);
+    padding-block: var(--ntl-space-2xs);
+    color: var(--ntl-heading-text-color);
+    cursor: pointer;
+    list-style: none;
+  }
+
+  .n-filter-facet > summary::-webkit-details-marker {
+    display: none;
+  }
+
+  @media (min-width: 37.5em) {
+    .n-filter-facet > summary {
+      padding: var(--ntl-space-2xs) var(--ntl-space-s);
+      border: 1px solid var(--ntl-color-border-strong);
+      border-radius: var(--ntl-radius-m);
+      background-color: var(--ntl-color-bg);
+    }
+
+    .n-filter-facet[open] > summary {
+      border-color: var(--ntl-blue-700);
+    }
+  }
+
+  .n-filter-label {
+    display: flex;
+    align-items: center;
+    gap: var(--ntl-space-3xs);
+  }
+
+  .n-filter-chevron-icon {
+    width: 0.7em;
+  }
+
+  .n-filter-count {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 1.5em;
+    height: 1.5em;
+    border-radius: 50%;
+    background: var(--ntl-blue-700);
+    color: var(--ntl-neutral-000);
+    font-size: 0.75em;
+  }
+
+  .n-filter-facet[open] .n-filter-count,
+  .n-filter-facet:not([open]) .n-filter-count.is-visible {
+    display: inline-flex;
+  }
+
+  @media (min-width: 37.5em) {
+    .n-filter-count {
+      position: absolute;
+      top: -0.5em;
+      right: -0.75em;
+    }
+  }
+
+  .n-filter-menu {
+    display: flex;
+    flex-direction: column;
+    padding-block: var(--ntl-space-2xs) var(--ntl-space-s);
+    border: none;
+  }
+
+  .n-filter-menu label {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+
+  .n-filter-menu label:not(:last-child) {
+    margin-block-end: var(--ntl-space-2xs);
+  }
+
+  .n-filter-menu input[type='checkbox'],
+  .n-filter-menu input[type='radio'] {
+    margin-inline-end: var(--ntl-space-2xs);
+    accent-color: var(--ntl-blue-700);
+  }
+
+  .n-filter-legend {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @media (min-width: 37.5em) {
+    .n-filter-menu {
+      position: absolute;
+      z-index: 1;
+      padding: var(--ntl-space-s);
+      border-radius: var(--ntl-radius-m);
+      background-color: var(--ntl-color-bg);
+      box-shadow: var(--ntl-shadow-deep, 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2));
+    }
+  }
+
+  .n-filter-meta {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--ntl-space-s);
+    margin-block-end: var(--ntl-space-l);
+  }
+
+  .n-filter-results {
+    color: var(--ntl-color-text-weak);
+  }
+
+  .n-filter-tags {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--ntl-space-s);
+    list-style: none;
+  }
+</style>

package/packages/components/FilterableGrid/filter-types.ts

@@ -0,0 +1,48 @@
+export interface FilterOption {
+  value: string;
+  label: string;
+}
+
+export interface FilterCategory {
+  key: string;
+  label: string;
+  legend?: string;
+  control?: 'checkbox' | 'radio';
+  /** Radio-only: prepend a checked `value=""` reset row. */
+  anyOption?: { label: string };
+  matchMode?: 'any' | 'all';
+  options: FilterOption[];
+}
+
+export interface FilterableGridProps {
+  filters: FilterCategory[];
+  results: { singular: string; plural: string };
+  /** Server-rendered initial count, shown before any client JS runs. */
+  totalCount: number;
+  /** Global match mode; per-category `matchMode` overrides it for that category. */
+  matchMode: 'any' | 'all';
+  id?: string;
+}
+
+/**
+ * Builds the `data-filter-{key}` attributes a slotted grid item needs so
+ * `<filter-container>` can match it against the active facets. Spread the
+ * result onto whatever bespoke element you render inside <FilterableGrid>.
+ *
+ * @example
+ * <article {...getFilterAttrs({ topic: ['react', 'astro'], level: 'beginner' })}>
+ *   ...
+ * </article>
+ * // -> data-filter-topic="react,astro" data-filter-level="beginner"
+ */
+export function getFilterAttrs(
+  values: Record<string, string | string[]>,
+  delimiter = ','
+): Record<`data-filter-${string}`, string> {
+  return Object.fromEntries(
+    Object.entries(values).map(([key, value]) => [
+      `data-filter-${key}`,
+      Array.isArray(value) ? value.join(delimiter) : value,
+    ])
+  ) as Record<`data-filter-${string}`, string>;
+}

package/packages/components/FilterableGrid/index.ts

@@ -0,0 +1,2 @@
+export { default as FilterableGrid } from './FilterableGrid.astro';
+export * from './filter-types';

package/packages/components/preact/DropZone/DropZone.css

@@ -1,87 +1,95 @@
 @import url('../../../styles/animations.css');
 
 /* ----------------------------- */
-/* Container                     */
+/* Container (invisible layer)   */
 /* ----------------------------- */
+/* The zone wraps arbitrary content and stays out of the way until a drag
+   enters it. Only a subtle dashed border hints that it's a drop target. */
 .n-dropzone {
   --n-dropzone-accent: var(--color-brand-primary, #0e7fe1);
   --n-dropzone-radius: var(--radius-2xl, 1rem);
 
   box-sizing: border-box;
   position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-s);
-  width: 100%;
-  height: 100%;
-  min-height: 18rem;
-  padding: var(--space-2xl, 2.5rem) var(--space-l, 1.5rem);
-  text-align: center;
+  min-height: 4rem;
   color: var(--color-text-default, #14161a);
-  background: var(--color-bg, #fff);
   border: 2px dashed var(--color-border-default, rgba(0, 0, 0, 0.15));
   border-radius: var(--n-dropzone-radius);
+  outline: none;
   transition:
     border-color 200ms ease-out,
     background-color 200ms ease-out,
     box-shadow 200ms ease-out;
 }
 
+.n-dropzone:focus-visible {
+  border-color: var(--n-dropzone-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--n-dropzone-accent) 40%, transparent);
+}
+
 /* Drag-over: the target glows without resizing. */
 .n-dropzone.is-active {
   border-color: var(--n-dropzone-accent);
-  background: var(--color-bg-2, #f6f8fa);
   box-shadow: 0 0 0 4px color-mix(in srgb, var(--n-dropzone-accent) 18%, transparent);
 }
 
+/* While deploying, the dashes settle into a solid, quieter frame. */
 .n-dropzone.is-busy {
   border-style: solid;
   border-color: var(--color-border-subtle, rgba(0, 0, 0, 0.08));
 }
 
-/* A soft accent wash that fades in while dragging. */
-.n-dropzone::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background: radial-gradient(
-    120% 120% at 50% 0%,
-    color-mix(in srgb, var(--n-dropzone-accent) 8%, transparent),
-    transparent 60%
-  );
-  opacity: 0;
-  transition: opacity 200ms ease-out;
-  pointer-events: none;
+/* ----------------------------- */
+/* Wrapped content               */
+/* ----------------------------- */
+/* Kept in flow (so the zone doesn't collapse) but faded out of the way once a
+   drag enters or a deploy starts, letting the overlay take over. */
+.n-dropzone-content {
+  transition: opacity 150ms ease-out;
 }
 
-.n-dropzone.is-active::before {
-  opacity: 1;
+/* `.is-bare` (showStatus={false}) keeps content visible so a custom animation
+   can play in place of the built-in overlay. */
+.n-dropzone.is-active:not(.is-bare) .n-dropzone-content,
+.n-dropzone.is-busy:not(.is-bare) .n-dropzone-content {
+  opacity: 0;
+  pointer-events: none;
 }
 
 /* ----------------------------- */
-/* State panel (keyed → replays) */
+/* Overlay (drag tint / status)  */
 /* ----------------------------- */
-.n-dropzone-panel {
+.n-dropzone-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--space-xs, 0.75rem);
-  width: 100%;
-  animation: dropPanelIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  justify-content: center;
+  gap: var(--space-s, 1rem);
+  padding: var(--space-l, 1.5rem);
+  text-align: center;
+  border-radius: inherit;
+  /* During a hover-only drag the overlay is a translucent wash and lets the
+     drop event fall through to the container beneath it. */
+  pointer-events: none;
+  background: color-mix(in srgb, var(--n-dropzone-accent) 10%, transparent);
 }
 
-@keyframes dropPanelIn {
-  from {
-    opacity: 0;
-    transform: translateY(8px) scale(0.98);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
+/* Deploying / error: opaque scrim that captures interaction. */
+.n-dropzone.is-busy .n-dropzone-overlay,
+.n-dropzone[data-state='error'] .n-dropzone-overlay {
+  pointer-events: auto;
+  background: color-mix(in srgb, var(--color-bg, #fff) 88%, transparent);
+  backdrop-filter: blur(2px);
+}
+
+.n-dropzone-hint {
+  margin: 0;
+  font-size: 1.0625rem;
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--n-dropzone-accent);
 }
 
 .n-dropzone-title {
@@ -103,41 +111,6 @@
   line-height: var(--line-height-text, 1.5);
 }
 
-/* ----------------------------- */
-/* Idle upload glyph             */
-/* ----------------------------- */
-.n-dropzone-glyph {
-  display: grid;
-  place-items: center;
-  width: 3.5rem;
-  height: 3.5rem;
-  color: var(--n-dropzone-accent);
-}
-
-.n-dropzone-glyph svg {
-  width: 100%;
-  height: 100%;
-}
-
-/* The arrow gently bobs to invite a drop; the tray stays put. */
-.n-dropzone-glyph-arrow {
-  animation: dropArrowBob 2.4s ease-in-out infinite;
-}
-
-.n-dropzone.is-active .n-dropzone-glyph-arrow {
-  animation-duration: 0.9s;
-}
-
-@keyframes dropArrowBob {
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-3px);
-  }
-}
-
 /* ----------------------------- */
 /* Loading / spinner             */
 /* ----------------------------- */
@@ -222,24 +195,13 @@
 /* Warning banner                */
 /* ----------------------------- */
 .n-dropzone-warning {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2xs, 0.5rem);
   margin: 0;
-  margin-block-start: var(--space-xs, 0.75rem);
   padding: var(--space-2xs, 0.5rem) var(--space-s, 1rem);
   max-width: 32rem;
   border-radius: var(--radius-m, 0.5rem);
   background: var(--color-warning-bg, #fdf3d7);
   color: var(--color-warning-text, #7a5b00);
   font-size: 0.8125rem;
-  text-align: left;
-}
-
-.n-dropzone-warning-icon {
-  flex: none;
-  width: 1rem;
-  height: 1rem;
 }
 
 /* ----------------------------- */
@@ -247,8 +209,7 @@
 /* ----------------------------- */
 @media (prefers-reduced-motion: reduce) {
   .n-dropzone,
-  .n-dropzone-panel,
-  .n-dropzone-glyph-arrow,
+  .n-dropzone-overlay,
   .n-dropzone-spinner,
   .n-dropzone-progress-bar {
     animation: none !important;