@netlify/spark-ui 1.31.0-alpha.8 → 1.32.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "1.31.0-alpha.8",
+  "version": "1.32.0",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",
@@ -65,7 +65,6 @@
     "fake-indexeddb": "^6.2.5",
     "glob": "^11.0.1",
     "happy-dom": "^20.11.6",
-    "jsdom": "^30.0.0",
     "preact": "^10.26.4",
     "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1",

package/packages/styles/tokens.compat.css

@@ -159,6 +159,26 @@
   --neutral-700: var(--ntl-neutral-700);
   --neutral-800: var(--ntl-neutral-800);
   --neutral-900: var(--ntl-neutral-900);
+  --neutral-dark-000: var(--ntl-neutral-dark-000);
+  --neutral-dark-100: var(--ntl-neutral-dark-100);
+  --neutral-dark-200: var(--ntl-neutral-dark-200);
+  --neutral-dark-300: var(--ntl-neutral-dark-300);
+  --neutral-dark-400: var(--ntl-neutral-dark-400);
+  --neutral-dark-500: var(--ntl-neutral-dark-500);
+  --neutral-dark-600: var(--ntl-neutral-dark-600);
+  --neutral-dark-700: var(--ntl-neutral-dark-700);
+  --neutral-dark-800: var(--ntl-neutral-dark-800);
+  --neutral-dark-900: var(--ntl-neutral-dark-900);
+  --neutral-light-000: var(--ntl-neutral-light-000);
+  --neutral-light-100: var(--ntl-neutral-light-100);
+  --neutral-light-200: var(--ntl-neutral-light-200);
+  --neutral-light-300: var(--ntl-neutral-light-300);
+  --neutral-light-400: var(--ntl-neutral-light-400);
+  --neutral-light-500: var(--ntl-neutral-light-500);
+  --neutral-light-600: var(--ntl-neutral-light-600);
+  --neutral-light-700: var(--ntl-neutral-light-700);
+  --neutral-light-800: var(--ntl-neutral-light-800);
+  --neutral-light-900: var(--ntl-neutral-light-900);
   --page-content-max-width: var(--ntl-page-content-max-width);
   --page-gutter: var(--ntl-page-gutter);
   --pink-000: var(--ntl-pink-000);

package/packages/styles/tokens.css

@@ -142,16 +142,36 @@
   --ntl-motion-easing-in: ease-in;
   --ntl-motion-easing-out: ease-out;
   --ntl-motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-  --ntl-neutral-000: color(srgb 1 1 1);
-  --ntl-neutral-100: color(srgb 0.9647058823529412 0.9647058823529412 0.9686274509803922);
-  --ntl-neutral-200: color(srgb 0.9137254901960784 0.9215686274509803 0.9294117647058824);
-  --ntl-neutral-300: color(srgb 0.8196078431372549 0.8352941176470589 0.8549019607843137);
-  --ntl-neutral-400: color(srgb 0.615686274509804 0.6549019607843137 0.6980392156862745);
-  --ntl-neutral-500: color(srgb 0.4666666666666667 0.5019607843137255 0.5372549019607843);
-  --ntl-neutral-600: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451);
-  --ntl-neutral-700: color(srgb 0.20784313725490197 0.22745098039215686 0.24313725490196078);
-  --ntl-neutral-800: color(srgb 0.09411764705882353 0.10196078431372549 0.10980392156862745);
-  --ntl-neutral-900: color(srgb 0.023529411764705882 0.043137254901960784 0.06274509803921569);
+  --ntl-neutral-000: var(--ntl-neutral-light-000);
+  --ntl-neutral-100: var(--ntl-neutral-light-100);
+  --ntl-neutral-200: var(--ntl-neutral-light-200);
+  --ntl-neutral-300: var(--ntl-neutral-light-300);
+  --ntl-neutral-400: var(--ntl-neutral-light-400);
+  --ntl-neutral-500: var(--ntl-neutral-light-500);
+  --ntl-neutral-600: var(--ntl-neutral-light-600);
+  --ntl-neutral-700: var(--ntl-neutral-light-700);
+  --ntl-neutral-800: var(--ntl-neutral-light-800);
+  --ntl-neutral-900: var(--ntl-neutral-light-900);
+  --ntl-neutral-dark-000: color(srgb 1 1 1);
+  --ntl-neutral-dark-100: color(srgb 0.9019607843137255 0.9254901960784314 0.9490196078431372);
+  --ntl-neutral-dark-200: color(srgb 0.6705882352941176 0.7098039215686275 0.7490196078431373);
+  --ntl-neutral-dark-300: color(srgb 0.49411764705882355 0.5294117647058824 0.5725490196078431);
+  --ntl-neutral-dark-400: color(srgb 0.30196078431372547 0.33725490196078434 0.37254901960784315);
+  --ntl-neutral-dark-500: color(srgb 0.23137254901960785 0.2627450980392157 0.2980392156862745);
+  --ntl-neutral-dark-600: color(srgb 0.15294117647058825 0.1843137254901961 0.2196078431372549);
+  --ntl-neutral-dark-700: color(srgb 0.11764705882352941 0.1411764705882353 0.17254901960784313);
+  --ntl-neutral-dark-800: color(srgb 0.07058823529411765 0.09411764705882353 0.12156862745098039);
+  --ntl-neutral-dark-900: color(srgb 0.023529411764705882 0.043137254901960784 0.06274509803921569);
+  --ntl-neutral-light-000: color(srgb 1 1 1);
+  --ntl-neutral-light-100: color(srgb 0.9647058823529412 0.9647058823529412 0.9686274509803922);
+  --ntl-neutral-light-200: color(srgb 0.9137254901960784 0.9215686274509803 0.9294117647058824);
+  --ntl-neutral-light-300: color(srgb 0.8196078431372549 0.8352941176470589 0.8549019607843137);
+  --ntl-neutral-light-400: color(srgb 0.615686274509804 0.6549019607843137 0.6980392156862745);
+  --ntl-neutral-light-500: color(srgb 0.4666666666666667 0.5019607843137255 0.5372549019607843);
+  --ntl-neutral-light-600: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451);
+  --ntl-neutral-light-700: color(srgb 0.20784313725490197 0.22745098039215686 0.24313725490196078);
+  --ntl-neutral-light-800: color(srgb 0.09411764705882353 0.10196078431372549 0.10980392156862745);
+  --ntl-neutral-light-900: color(srgb 0.023529411764705882 0.043137254901960784 0.06274509803921569);
   --ntl-page-content-max-width: 80rem;
   --ntl-page-gutter: var(--ntl-space-l);
   --ntl-pink-000: color(srgb 0.9882352941176471 0.9411764705882353 0.984313725490196);
@@ -314,16 +334,16 @@
     --ntl-eyebrow-text-color: var(--ntl-teal-200);
     --ntl-filter-invert: invert(1);
     --ntl-heading-text-color: var(--ntl-neutral-100);
-    --ntl-neutral-000: color(srgb 1 1 1);
-    --ntl-neutral-100: color(srgb 0.9019607843137255 0.9254901960784314 0.9490196078431372);
-    --ntl-neutral-200: color(srgb 0.6705882352941176 0.7098039215686275 0.7490196078431373);
-    --ntl-neutral-300: color(srgb 0.49411764705882355 0.5294117647058824 0.5725490196078431);
-    --ntl-neutral-400: color(srgb 0.30196078431372547 0.33725490196078434 0.37254901960784315);
-    --ntl-neutral-500: color(srgb 0.23137254901960785 0.2627450980392157 0.2980392156862745);
-    --ntl-neutral-600: color(srgb 0.15294117647058825 0.1843137254901961 0.2196078431372549);
-    --ntl-neutral-700: color(srgb 0.11764705882352941 0.1411764705882353 0.17254901960784313);
-    --ntl-neutral-800: color(srgb 0.07058823529411765 0.09411764705882353 0.12156862745098039);
-    --ntl-neutral-900: color(srgb 0.023529411764705882 0.043137254901960784 0.06274509803921569);
+    --ntl-neutral-000: var(--ntl-neutral-dark-000);
+    --ntl-neutral-100: var(--ntl-neutral-dark-100);
+    --ntl-neutral-200: var(--ntl-neutral-dark-200);
+    --ntl-neutral-300: var(--ntl-neutral-dark-300);
+    --ntl-neutral-400: var(--ntl-neutral-dark-400);
+    --ntl-neutral-500: var(--ntl-neutral-dark-500);
+    --ntl-neutral-600: var(--ntl-neutral-dark-600);
+    --ntl-neutral-700: var(--ntl-neutral-dark-700);
+    --ntl-neutral-800: var(--ntl-neutral-dark-800);
+    --ntl-neutral-900: var(--ntl-neutral-dark-900);
     --ntl-search-answer-message-color: var(--ntl-neutral-600);
     --ntl-search-back-btn-bg-color: var(--ntl-neutral-500);
     --ntl-search-bg-color: var(--ntl-neutral-700);
@@ -413,16 +433,16 @@
   --ntl-eyebrow-text-color: var(--ntl-teal-200);
   --ntl-filter-invert: invert(1);
   --ntl-heading-text-color: var(--ntl-neutral-100);
-  --ntl-neutral-000: color(srgb 1 1 1);
-  --ntl-neutral-100: color(srgb 0.9019607843137255 0.9254901960784314 0.9490196078431372);
-  --ntl-neutral-200: color(srgb 0.6705882352941176 0.7098039215686275 0.7490196078431373);
-  --ntl-neutral-300: color(srgb 0.49411764705882355 0.5294117647058824 0.5725490196078431);
-  --ntl-neutral-400: color(srgb 0.30196078431372547 0.33725490196078434 0.37254901960784315);
-  --ntl-neutral-500: color(srgb 0.23137254901960785 0.2627450980392157 0.2980392156862745);
-  --ntl-neutral-600: color(srgb 0.15294117647058825 0.1843137254901961 0.2196078431372549);
-  --ntl-neutral-700: color(srgb 0.11764705882352941 0.1411764705882353 0.17254901960784313);
-  --ntl-neutral-800: color(srgb 0.07058823529411765 0.09411764705882353 0.12156862745098039);
-  --ntl-neutral-900: color(srgb 0.023529411764705882 0.043137254901960784 0.06274509803921569);
+  --ntl-neutral-000: var(--ntl-neutral-dark-000);
+  --ntl-neutral-100: var(--ntl-neutral-dark-100);
+  --ntl-neutral-200: var(--ntl-neutral-dark-200);
+  --ntl-neutral-300: var(--ntl-neutral-dark-300);
+  --ntl-neutral-400: var(--ntl-neutral-dark-400);
+  --ntl-neutral-500: var(--ntl-neutral-dark-500);
+  --ntl-neutral-600: var(--ntl-neutral-dark-600);
+  --ntl-neutral-700: var(--ntl-neutral-dark-700);
+  --ntl-neutral-800: var(--ntl-neutral-dark-800);
+  --ntl-neutral-900: var(--ntl-neutral-dark-900);
   --ntl-search-answer-message-color: var(--ntl-neutral-600);
   --ntl-search-back-btn-bg-color: var(--ntl-neutral-500);
   --ntl-search-bg-color: var(--ntl-neutral-700);
@@ -511,15 +531,15 @@
   --ntl-eyebrow-text-color: var(--ntl-blue-700);
   --ntl-filter-invert: none;
   --ntl-heading-text-color: var(--ntl-neutral-800);
-  --ntl-neutral-000: color(srgb 1 1 1);
-  --ntl-neutral-100: color(srgb 0.9647058823529412 0.9647058823529412 0.9686274509803922);
-  --ntl-neutral-200: color(srgb 0.9137254901960784 0.9215686274509803 0.9294117647058824);
-  --ntl-neutral-300: color(srgb 0.8196078431372549 0.8352941176470589 0.8549019607843137);
-  --ntl-neutral-400: color(srgb 0.615686274509804 0.6549019607843137 0.6980392156862745);
-  --ntl-neutral-500: color(srgb 0.4666666666666667 0.5019607843137255 0.5372549019607843);
-  --ntl-neutral-600: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451);
-  --ntl-neutral-700: color(srgb 0.20784313725490197 0.22745098039215686 0.24313725490196078);
-  --ntl-neutral-800: color(srgb 0.09411764705882353 0.10196078431372549 0.10980392156862745);
+  --ntl-neutral-000: var(--ntl-neutral-light-000);
+  --ntl-neutral-100: var(--ntl-neutral-light-100);
+  --ntl-neutral-200: var(--ntl-neutral-light-200);
+  --ntl-neutral-300: var(--ntl-neutral-light-300);
+  --ntl-neutral-400: var(--ntl-neutral-light-400);
+  --ntl-neutral-500: var(--ntl-neutral-light-500);
+  --ntl-neutral-600: var(--ntl-neutral-light-600);
+  --ntl-neutral-700: var(--ntl-neutral-light-700);
+  --ntl-neutral-800: var(--ntl-neutral-light-800);
   --ntl-search-answer-message-color: var(--ntl-neutral-200);
   --ntl-search-back-btn-bg-color: var(--ntl-neutral-100);
   --ntl-search-bg-color: var(--ntl-neutral-000);

package/dist/components/articleCopyActions.d.ts

@@ -1,9 +0,0 @@
-/**
- * Wire up the "Copy URL" / "Copy page" buttons rendered by ArticleCopyActions.astro.
- *
- * This runs on every `astro:page-load` (initial load *and* every client-side
- * navigation via `<ClientRouter />`), so the buttons keep working after routing
- * to another article/post. Each wrapper is guarded so re-initialising the same
- * DOM node never attaches duplicate listeners.
- */
-export declare function initArticleCopyActions(root?: ParentNode): void;

package/dist/components/articleCopyActions.test.d.ts

@@ -1 +0,0 @@
-export {};

package/packages/components/ArticleCopyActions.astro

@@ -1,122 +0,0 @@
----
-interface Props {
-  url: string;
-  content: string;
-  title?: string;
-  class?: string;
-  copyUrlLabel?: string;
-  copyContentLabel?: string;
-  copiedLabel?: string;
-  trackingProps?: Record<string, string>;
-  trackingSelectorClass?: string;
-}
-
-const {
-  url,
-  content,
-  title,
-  class: className,
-  copyUrlLabel = 'Copy URL',
-  copyContentLabel = 'Copy page',
-  copiedLabel = 'Copied!',
-  trackingProps = {},
-  trackingSelectorClass,
-} = Astro.props;
-
-const copyContent = title ? `# ${title}\n\n${content}` : content;
----
-
-<div class:list={['copy-actions', className]} data-copied-label={copiedLabel}>
-  <button
-    type="button"
-    class:list={['copy-actions-action', 'copy-actions-copy-url', trackingSelectorClass]}
-    data-copy="url"
-    data-value={url}
-    data-track-action="copy_url"
-    {...trackingProps}
-  >
-    <svg
-      class="copy-actions-icon"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="1.3"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      aria-hidden="true"
-      role="presentation"
-    >
-      <path d="M6.5 9.5a2.5 2.5 0 0 0 3.6.1l2-2a2.5 2.5 0 0 0-3.6-3.6l-1.1 1.1"></path>
-      <path d="M9.5 6.5a2.5 2.5 0 0 0-3.6-.1l-2 2a2.5 2.5 0 0 0 3.6 3.6l1.1-1.1"></path>
-    </svg>
-    <span class="copy-actions-label">{copyUrlLabel}</span>
-  </button>
-  <button
-    type="button"
-    class:list={['copy-actions-action', 'copy-actions-copy-content', trackingSelectorClass]}
-    data-copy="page"
-    data-track-action="copy_page"
-    {...trackingProps}
-  >
-    <svg
-      class="copy-actions-icon"
-      viewBox="0 0 16 16"
-      fill="currentColor"
-      aria-hidden="true"
-      role="presentation"
-    >
-      <path
-        d="M4.83333 1C3.82214 1 3 1.78477 3 2.75V13.25C3 14.2152 3.82214 15 4.83333 15H12.1667C13.1779 15 14 14.2152 14 13.25V5.375H10.3333C9.8263 5.375 9.41667 4.98398 9.41667 4.5V1H4.83333ZM10.3333 1V4.5H14L10.3333 1ZM6.20833 8H10.7917C11.0438 8 11.25 8.19687 11.25 8.4375C11.25 8.67813 11.0438 8.875 10.7917 8.875H6.20833C5.95625 8.875 5.75 8.67813 5.75 8.4375C5.75 8.19687 5.95625 8 6.20833 8ZM6.20833 9.75H10.7917C11.0438 9.75 11.25 9.94687 11.25 10.1875C11.25 10.4281 11.0438 10.625 10.7917 10.625H6.20833C5.95625 10.625 5.75 10.4281 5.75 10.1875C5.75 9.94687 5.95625 9.75 6.20833 9.75ZM6.20833 11.5H10.7917C11.0438 11.5 11.25 11.6969 11.25 11.9375C11.25 12.1781 11.0438 12.375 10.7917 12.375H6.20833C5.95625 12.375 5.75 12.1781 5.75 11.9375C5.75 11.6969 5.95625 11.5 6.20833 11.5Z"
-      ></path>
-    </svg>
-    <span class="copy-actions-label">{copyContentLabel}</span>
-  </button>
-</div>
-
-<script is:inline type="text/plain" data-copy-actions-source set:text={copyContent} />
-
-<style>
-  .copy-actions {
-    display: flex;
-    align-items: center;
-    gap: var(--ntl-space-2xs);
-  }
-
-  .copy-actions-action {
-    display: flex;
-    align-items: center;
-    gap: var(--ntl-space-3xs);
-    background: none;
-    border: none;
-    padding: 0;
-    font: inherit;
-    color: var(--ntl-color-text-weak);
-    cursor: pointer;
-  }
-
-  .copy-actions-label {
-    font-size: var(--ntl-font-size-text-sm);
-  }
-
-  .copy-actions-icon {
-    width: var(--ntl-space-s);
-    height: var(--ntl-space-s);
-  }
-
-  .copy-actions-copy-url::after {
-    content: '•';
-    margin-inline-start: var(--ntl-space-2xs);
-  }
-
-  .copy-actions-action:hover {
-    color: var(--ntl-color-text);
-  }
-</style>
-
-<script>
-  import { initArticleCopyActions } from './articleCopyActions';
-
-  // `astro:page-load` fires on the initial load *and* after every client-side
-  // navigation (`<ClientRouter />`).
-  document.addEventListener('astro:page-load', () => initArticleCopyActions());
-</script>

package/packages/components/articleCopyActions.test.ts

@@ -1,143 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { initArticleCopyActions } from './articleCopyActions';
-
-const ARTICLE_URL = 'https://www.netlify.com/blog/some-post/';
-const MARKDOWN = '# Some post\n\nBody content.';
-
-function renderCopyActions({ url = ARTICLE_URL, markdown = MARKDOWN, copiedLabel = 'Copied!' } = {}) {
-  document.body.innerHTML = `
-    <div class="copy-actions" data-copied-label="${copiedLabel}">
-      <button
-        type="button"
-        class="copy-actions-action copy-actions-copy-url"
-        data-copy="url"
-        data-value="${url}"
-      >
-        <span>Copy URL</span>
-      </button>
-      <button
-        type="button"
-        class="copy-actions-action copy-actions-copy-content"
-        data-copy="page"
-      >
-        <span>Copy page</span>
-      </button>
-    </div>
-    <script type="text/plain" data-copy-actions-source>${markdown}</script>
-  `;
-
-  return {
-    wrapper: document.querySelector<HTMLElement>('.copy-actions')!,
-    copyUrlBtn: document.querySelector<HTMLButtonElement>('.copy-actions-copy-url')!,
-    copyPageBtn: document.querySelector<HTMLButtonElement>('.copy-actions-copy-content')!,
-    urlLabel: document.querySelector<HTMLElement>('.copy-actions-copy-url span')!,
-    pageLabel: document.querySelector<HTMLElement>('.copy-actions-copy-content span')!,
-  };
-}
-
-describe('initArticleCopyActions', () => {
-  let writeText: ReturnType<typeof vi.fn>;
-
-  beforeEach(() => {
-    vi.useFakeTimers();
-    writeText = vi.fn().mockResolvedValue(undefined);
-    Object.defineProperty(navigator, 'clipboard', {
-      value: { writeText },
-      configurable: true,
-    });
-  });
-
-  afterEach(() => {
-    vi.runOnlyPendingTimers();
-    vi.useRealTimers();
-    document.body.innerHTML = '';
-  });
-
-  it('copies the article URL and shows a temporary confirmation', async () => {
-    const { copyUrlBtn, urlLabel } = renderCopyActions();
-    initArticleCopyActions();
-
-    copyUrlBtn.click();
-    await vi.waitFor(() => expect(writeText).toHaveBeenCalledWith(ARTICLE_URL));
-    expect(urlLabel.textContent).toBe('Copied!');
-  });
-
-  it('copies the markdown source for the "Copy page" button', async () => {
-    const { copyPageBtn, pageLabel } = renderCopyActions();
-    initArticleCopyActions();
-
-    copyPageBtn.click();
-    await vi.waitFor(() => expect(writeText).toHaveBeenCalledWith(MARKDOWN));
-    expect(pageLabel.textContent).toBe('Copied!');
-  });
-
-  it('resets the label back to its original text after the delay', async () => {
-    const { copyUrlBtn, urlLabel } = renderCopyActions();
-    initArticleCopyActions();
-
-    copyUrlBtn.click();
-    await vi.waitFor(() => expect(urlLabel.textContent).toBe('Copied!'));
-
-    vi.advanceTimersByTime(1500);
-    expect(urlLabel.textContent).toBe('Copy URL');
-  });
-
-  it('uses a custom copied label when data-copied-label is set', async () => {
-    const { copyUrlBtn, urlLabel } = renderCopyActions({ copiedLabel: 'Done!' });
-    initArticleCopyActions();
-
-    copyUrlBtn.click();
-    await vi.waitFor(() => expect(urlLabel.textContent).toBe('Done!'));
-  });
-
-  it('does not attach duplicate listeners when initialised twice on the same DOM', async () => {
-    const { copyUrlBtn } = renderCopyActions();
-    initArticleCopyActions();
-    initArticleCopyActions(); // e.g. a spurious re-fire
-
-    copyUrlBtn.click();
-    await vi.waitFor(() => expect(writeText).toHaveBeenCalledTimes(1));
-  });
-
-  it('re-binds after a client-side navigation swaps in fresh buttons', async () => {
-    // Simulate the ClientRouter bug: first page loads and works...
-    const first = renderCopyActions({ url: 'https://example.com/first/' });
-    initArticleCopyActions();
-    first.copyUrlBtn.click();
-    await vi.waitFor(() => expect(writeText).toHaveBeenCalledWith('https://example.com/first/'));
-
-    // ...then a navigation replaces the DOM with a new post's buttons.
-    const second = renderCopyActions({ url: 'https://example.com/second/' });
-    // Re-running on `astro:page-load` is what makes the new buttons work.
-    initArticleCopyActions();
-
-    second.copyUrlBtn.click();
-    await vi.waitFor(() => expect(writeText).toHaveBeenCalledWith('https://example.com/second/'));
-  });
-
-  it('scopes the markdown source lookup to each wrapper, not a global selector', async () => {
-    document.body.innerHTML = `
-      <div class="copy-actions" data-copied-label="Copied!">
-        <button type="button" class="copy-actions-action copy-actions-copy-content" data-copy="page">
-          <span>Copy page</span>
-        </button>
-      </div>
-      <script type="text/plain" data-copy-actions-source>First post markdown</script>
-      <div class="copy-actions" data-copied-label="Copied!">
-        <button type="button" class="copy-actions-action copy-actions-copy-content" data-copy="page">
-          <span>Copy page</span>
-        </button>
-      </div>
-      <script type="text/plain" data-copy-actions-source>Second post markdown</script>
-    `;
-    initArticleCopyActions();
-
-    const buttons = document.querySelectorAll<HTMLButtonElement>('.copy-actions-copy-content');
-    buttons[1].click();
-    await vi.waitFor(() => expect(writeText).toHaveBeenCalledWith('Second post markdown'));
-
-    buttons[0].click();
-    await vi.waitFor(() => expect(writeText).toHaveBeenCalledWith('First post markdown'));
-  });
-});

package/packages/components/articleCopyActions.ts

@@ -1,41 +0,0 @@
-const COPIED_LABEL_FALLBACK = 'Copied!';
-const RESET_DELAY_MS = 1500;
-
-/**
- * Wire up the "Copy URL" / "Copy page" buttons rendered by ArticleCopyActions.astro.
- *
- * This runs on every `astro:page-load` (initial load *and* every client-side
- * navigation via `<ClientRouter />`), so the buttons keep working after routing
- * to another article/post. Each wrapper is guarded so re-initialising the same
- * DOM node never attaches duplicate listeners.
- */
-export function initArticleCopyActions(root: ParentNode = document): void {
-  root.querySelectorAll<HTMLElement>('.copy-actions').forEach(wrapper => {
-    if (wrapper.dataset.copyBound === 'true') return;
-    wrapper.dataset.copyBound = 'true';
-
-    const source = wrapper.nextElementSibling as HTMLElement | null;
-    const copiedLabel = wrapper.dataset.copiedLabel ?? COPIED_LABEL_FALLBACK;
-
-    wrapper.querySelectorAll<HTMLButtonElement>('.copy-actions-action').forEach(btn => {
-      const label = btn.querySelector<HTMLElement>('span');
-      const originalText = label?.textContent;
-
-      btn.addEventListener('click', async () => {
-        const value =
-          btn.getAttribute('data-copy') === 'url'
-            ? btn.getAttribute('data-value')
-            : source?.textContent;
-
-        if (!value || !label) return;
-
-        await navigator.clipboard.writeText(value);
-
-        label.textContent = copiedLabel;
-        setTimeout(() => {
-          label.textContent = originalText ?? '';
-        }, RESET_DELAY_MS);
-      });
-    });
-  });
-}