@classic-homes/theme-svelte 1.22.0 → 1.22.2

package/dist/lib/utils/date.js

@@ -104,6 +104,37 @@ export function isSameDay(date1, date2) {
         date1.getMonth() === date2.getMonth() &&
         date1.getDate() === date2.getDate());
 }
+/**
+ * Build a local Date, or null when a part is out of range. `new Date()` rolls
+ * overflow into the next unit (Feb 30 -> Mar 1, 25:00 -> next day), so the
+ * date parts must round-trip and the time parts must be in range.
+ */
+function buildDate(year, monthIndex, day, hour, minute) {
+    if (hour > 23 || minute > 59)
+        return null;
+    const date = new Date(year, monthIndex, day, hour, minute);
+    if (date.getFullYear() !== year || date.getMonth() !== monthIndex || date.getDate() !== day) {
+        return null;
+    }
+    return date;
+}
+/**
+ * Convert a typed hour (with optional AM/PM) to 0-23, or null when out of
+ * range for its clock (e.g. `13 PM`, `0 AM`).
+ */
+function toHour24(hour, meridiem) {
+    if (!hour)
+        return 0;
+    const parsed = parseInt(hour);
+    if (!meridiem)
+        return parsed;
+    if (parsed < 1 || parsed > 12)
+        return null;
+    const isPm = meridiem.toUpperCase() === 'PM';
+    if (parsed === 12)
+        return isPm ? 12 : 0;
+    return isPm ? parsed + 12 : parsed;
+}
 /**
  * Parse a user-typed date input string into a Date object.
  *
@@ -111,7 +142,9 @@ export function isSameDay(date1, date2) {
  * - ISO: `2024-03-15`, `2024-03-15T14:30`
  * - US: `03/15/2024`, `3/15/24`, `03-15-2024`
  * - Natural: `Mar 15, 2024`, `March 15 2024`
- * - With time: `03/15/2024 2:30 PM`, `03/15/2024 14:30`
+ * - With time: `03/15/2024 2:30 PM`, `03/15/2024 14:30`, `Mar 15, 2024 at 2:30 PM`
+ *
+ * Out-of-range parts (`02/30/2024`, `25:99`) are rejected, not rolled over.
  *
  * @param input - The user-typed date string
  * @param options - Parsing options
@@ -128,17 +161,17 @@ export function parseDateInput(input, options) {
     }
     // Try parsing with various patterns
     let date = null;
-    let hasTime = false;
+    let matched = false;
     // Pattern 1: ISO format (2024-03-15 or 2024-03-15T14:30)
     const isoMatch = trimmed.match(/^(\d{4})-(\d{1,2})-(\d{1,2})(?:[T ](\d{1,2}):(\d{2})(?::(\d{2}))?)?$/);
     if (isoMatch) {
         const [, year, month, day, hour, minute] = isoMatch;
-        date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day), hour ? parseInt(hour) : 0, minute ? parseInt(minute) : 0);
-        hasTime = !!hour;
+        matched = true;
+        date = buildDate(parseInt(year), parseInt(month) - 1, parseInt(day), hour ? parseInt(hour) : 0, minute ? parseInt(minute) : 0);
     }
     // Pattern 2: US format with slashes or dashes (03/15/2024, 3/15/24, 03-15-2024)
-    if (!date) {
-        const usMatch = trimmed.match(/^(\d{1,2})[/-](\d{1,2})[/-](\d{2,4})(?:\s+(\d{1,2}):(\d{2})(?:\s*(AM|PM))?)?$/i);
+    if (!matched) {
+        const usMatch = trimmed.match(/^(\d{1,2})[/-](\d{1,2})[/-](\d{2,4})(?:\s+(?:at\s+)?(\d{1,2}):(\d{2})(?:\s*(AM|PM))?)?$/i);
         if (usMatch) {
             const [, month, day, yearStr, hour, minute, meridiem] = usMatch;
             let year = parseInt(yearStr);
@@ -146,22 +179,16 @@ export function parseDateInput(input, options) {
             if (year < 100) {
                 year += year < 50 ? 2000 : 1900;
             }
-            let parsedHour = hour ? parseInt(hour) : 0;
-            if (meridiem) {
-                const upper = meridiem.toUpperCase();
-                if (upper === 'PM' && parsedHour !== 12) {
-                    parsedHour += 12;
-                }
-                else if (upper === 'AM' && parsedHour === 12) {
-                    parsedHour = 0;
-                }
-            }
-            date = new Date(year, parseInt(month) - 1, parseInt(day), parsedHour, minute ? parseInt(minute) : 0);
-            hasTime = !!hour;
+            matched = true;
+            const parsedHour = toHour24(hour, meridiem);
+            date =
+                parsedHour === null
+                    ? null
+                    : buildDate(year, parseInt(month) - 1, parseInt(day), parsedHour, minute ? parseInt(minute) : 0);
         }
     }
     // Pattern 3: Natural format (Mar 15, 2024 or March 15 2024)
-    if (!date) {
+    if (!matched) {
         const monthNames = {
             jan: 0,
             january: 0,
@@ -188,23 +215,16 @@ export function parseDateInput(input, options) {
             dec: 11,
             december: 11,
         };
-        const naturalMatch = trimmed.match(/^([a-zA-Z]+)\s+(\d{1,2}),?\s+(\d{4})(?:\s+(\d{1,2}):(\d{2})(?:\s*(AM|PM))?)?$/i);
+        const naturalMatch = trimmed.match(/^([a-zA-Z]+)\s+(\d{1,2}),?\s+(\d{4})(?:\s+(?:at\s+)?(\d{1,2}):(\d{2})(?:\s*(AM|PM))?)?$/i);
         if (naturalMatch) {
             const [, monthStr, day, year, hour, minute, meridiem] = naturalMatch;
             const monthNum = monthNames[monthStr.toLowerCase()];
             if (monthNum !== undefined) {
-                let parsedHour = hour ? parseInt(hour) : 0;
-                if (meridiem) {
-                    const upper = meridiem.toUpperCase();
-                    if (upper === 'PM' && parsedHour !== 12) {
-                        parsedHour += 12;
-                    }
-                    else if (upper === 'AM' && parsedHour === 12) {
-                        parsedHour = 0;
-                    }
-                }
-                date = new Date(parseInt(year), monthNum, parseInt(day), parsedHour, minute ? parseInt(minute) : 0);
-                hasTime = !!hour;
+                const parsedHour = toHour24(hour, meridiem);
+                date =
+                    parsedHour === null
+                        ? null
+                        : buildDate(parseInt(year), monthNum, parseInt(day), parsedHour, minute ? parseInt(minute) : 0);
             }
         }
     }
@@ -216,8 +236,8 @@ export function parseDateInput(input, options) {
             error: 'Invalid date format. Try MM/DD/YYYY or YYYY-MM-DD',
         };
     }
-    // If dateOnly mode and time was provided, still accept it but set time to midnight
-    if (options?.dateOnly && !hasTime) {
+    // In dateOnly mode a typed time is accepted but reset to midnight
+    if (options?.dateOnly) {
         date.setHours(0, 0, 0, 0);
     }
     return { date, isValid: true };

package/dist/lib/utils/form.d.ts

@@ -11,7 +11,8 @@
 export declare function generateId(prefix?: string): string;
 /**
  * Computes the aria-describedby attribute value based on hint and error states.
- * Returns undefined if neither hint nor error is present.
+ * Returns undefined if neither hint nor error is present. The hint is left out
+ * while an error shows, since form fields render the error in its place.
  *
  * @param hintId - The ID of the hint element
  * @param errorId - The ID of the error element

package/dist/lib/utils/form.js

@@ -13,7 +13,8 @@ export function generateId(prefix = 'field') {
 }
 /**
  * Computes the aria-describedby attribute value based on hint and error states.
- * Returns undefined if neither hint nor error is present.
+ * Returns undefined if neither hint nor error is present. The hint is left out
+ * while an error shows, since form fields render the error in its place.
  *
  * @param hintId - The ID of the hint element
  * @param errorId - The ID of the error element
@@ -23,7 +24,7 @@ export function generateId(prefix = 'field') {
  */
 export function computeDescribedBy(hintId, errorId, hasHint, hasError) {
     const ids = [];
-    if (hasHint && hintId)
+    if (hasHint && !hasError && hintId)
         ids.push(hintId);
     if (hasError && errorId)
         ids.push(errorId);

package/dist/lib/utils/media.js

@@ -614,10 +614,11 @@ export function buildEmbedSrc(provider, videoId, options = {}) {
         params.set('autoplay', '1');
     if (privacy)
         params.set('dnt', '1');
-    if (start !== undefined)
-        params.set('#t', `${Math.floor(start)}s`);
     const query = params.toString();
-    return `https://player.vimeo.com/video/${videoId}${query ? `?${query}` : ''}`;
+    // Vimeo reads the start time from the fragment (#t=30s), not the query;
+    // URLSearchParams would encode it as `%23t`, which Vimeo ignores.
+    const fragment = start !== undefined ? `#t=${Math.floor(start)}s` : '';
+    return `https://player.vimeo.com/video/${videoId}${query ? `?${query}` : ''}${fragment}`;
 }
 /**
  * Poster image URL for an embedded video, when one can be derived without a

package/dist/lib/utils/url.d.ts

@@ -0,0 +1,10 @@
+/**
+ * URL safety helpers for hrefs that come from config or API data.
+ */
+/**
+ * Return `url` when it is relative or uses a safe scheme (http, https, mailto,
+ * tel), otherwise `null`. Rejects `javascript:`, `data:`, `vbscript:` and the
+ * like, including obfuscated forms (leading whitespace, mixed case, embedded
+ * tabs/newlines), because the URL parser normalises those before the check.
+ */
+export declare function safeHref(url: string | null | undefined): string | null;

package/dist/lib/utils/url.js

@@ -0,0 +1,21 @@
+/**
+ * URL safety helpers for hrefs that come from config or API data.
+ */
+const SAFE_PROTOCOLS = new Set(['http:', 'https:', 'mailto:', 'tel:']);
+/**
+ * Return `url` when it is relative or uses a safe scheme (http, https, mailto,
+ * tel), otherwise `null`. Rejects `javascript:`, `data:`, `vbscript:` and the
+ * like, including obfuscated forms (leading whitespace, mixed case, embedded
+ * tabs/newlines), because the URL parser normalises those before the check.
+ */
+export function safeHref(url) {
+    if (typeof url !== 'string' || url.trim() === '')
+        return null;
+    try {
+        const parsed = new URL(url, 'https://relative.invalid');
+        return SAFE_PROTOCOLS.has(parsed.protocol) ? url : null;
+    }
+    catch {
+        return null;
+    }
+}

package/dist/lib/utils.js

@@ -1,5 +1,18 @@
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { extendTailwindMerge } from 'tailwind-merge';
+/**
+ * tailwind-merge only knows Tailwind's default theme, so it reads the preset's
+ * custom font sizes (`text-h1`..`text-h6`, from `fontSize` in
+ * @classic-homes/theme-tailwind-preset) as text colours and drops a real colour
+ * such as `text-foreground` beside them. Register them as font sizes.
+ */
+const twMerge = extendTailwindMerge({
+    extend: {
+        classGroups: {
+            'font-size': [{ text: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],
+        },
+    },
+});
 /**
  * Utility function to merge Tailwind CSS classes
  * Uses clsx for conditional classes and tailwind-merge to handle conflicts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.22.0",
+  "version": "1.22.2",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",
@@ -15,14 +15,15 @@
       "types": "./dist/lib/components/notifications/index.d.ts",
       "svelte": "./dist/lib/components/notifications/index.js",
       "default": "./dist/lib/components/notifications/index.js"
-    },
-    "./styles.css": "./dist/styles.css"
+    }
   },
   "sideEffects": [
     "*.css"
   ],
   "files": [
-    "dist"
+    "dist",
+    "!dist/__tests__",
+    "!dist/**/*.test.*"
   ],
   "scripts": {
     "build": "svelte-package -i src",

package/dist/__tests__/FileUpload.test.js

@@ -1,45 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import FileUpload from '../lib/components/FileUpload.svelte';
-describe('FileUpload accepted-types label', () => {
-    it('derives a friendly label from MIME types instead of showing raw values', () => {
-        render(FileUpload, {
-            props: {
-                label: 'Upload files',
-                acceptedTypes: [
-                    'image/jpeg',
-                    'image/png',
-                    'application/pdf',
-                    'video/mp4',
-                    'video/quicktime',
-                ],
-            },
-        });
-        expect(screen.getByText(/Images, PDF, Videos \(max/)).toBeInTheDocument();
-        // Raw MIME types should not be shown
-        expect(screen.queryByText(/image\/jpeg/)).not.toBeInTheDocument();
-    });
-    it('uses the default accepted types (Images, PDF) when none are provided', () => {
-        render(FileUpload, { props: { label: 'Upload files' } });
-        expect(screen.getByText(/^Images, PDF \(max/)).toBeInTheDocument();
-    });
-    it('respects an explicit typesLabel override', () => {
-        render(FileUpload, {
-            props: {
-                label: 'Upload files',
-                acceptedTypes: ['image/png', 'video/mp4'],
-                typesLabel: 'Photos and clips',
-            },
-        });
-        expect(screen.getByText(/^Photos and clips \(max/)).toBeInTheDocument();
-    });
-    it('falls back to the uppercased subtype for unmapped types', () => {
-        render(FileUpload, {
-            props: {
-                label: 'Upload files',
-                acceptedTypes: ['application/zip'],
-            },
-        });
-        expect(screen.getByText(/^ZIP \(max/)).toBeInTheDocument();
-    });
-});

package/dist/__tests__/a11y/Alert.a11y.test.js

@@ -1,84 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { screen } from '@testing-library/svelte';
-import { axe } from 'vitest-axe';
-describe('Alert accessibility', () => {
-    it('should have no axe violations', async () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="alert" aria-live="polite" aria-atomic="true" class="relative w-full rounded-lg border p-4">
-        <h5 class="mb-1 font-medium leading-none tracking-tight">Alert Title</h5>
-        <p class="text-sm">Alert description text</p>
-      </div>
-    `;
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-        document.body.removeChild(container);
-    });
-    it('should have no axe violations with different variants', async () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        // Test default variant
-        container.innerHTML = `
-      <div role="alert" aria-live="polite" aria-atomic="true" class="relative w-full rounded-lg border p-4 bg-gray-50">
-        <h5 class="mb-1 font-medium leading-none tracking-tight">Default Alert</h5>
-      </div>
-    `;
-        expect(await axe(container)).toHaveNoViolations();
-        // Test destructive variant
-        container.innerHTML = `
-      <div role="alert" aria-live="assertive" aria-atomic="true" class="relative w-full rounded-lg border p-4 bg-red-50">
-        <h5 class="mb-1 font-medium leading-none tracking-tight">Destructive Alert</h5>
-      </div>
-    `;
-        expect(await axe(container)).toHaveNoViolations();
-        document.body.removeChild(container);
-    });
-    it('should have role="alert"', () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="alert" aria-live="polite" aria-atomic="true" class="relative w-full rounded-lg border p-4">
-        <h5 class="mb-1 font-medium leading-none tracking-tight">Alert Title</h5>
-      </div>
-    `;
-        const alert = screen.getByRole('alert');
-        expect(alert).toBeInTheDocument();
-        document.body.removeChild(container);
-    });
-    it('should have aria-atomic="true"', () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="alert" aria-live="polite" aria-atomic="true" class="relative w-full rounded-lg border p-4">
-        <h5 class="mb-1 font-medium leading-none tracking-tight">Alert Title</h5>
-      </div>
-    `;
-        const alert = screen.getByRole('alert');
-        expect(alert).toHaveAttribute('aria-atomic', 'true');
-        document.body.removeChild(container);
-    });
-    it('should display title text', () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="alert" aria-live="polite" aria-atomic="true" class="relative w-full rounded-lg border p-4">
-        <h5 class="mb-1 font-medium leading-none tracking-tight">Important Alert</h5>
-      </div>
-    `;
-        expect(screen.getByText('Important Alert')).toBeInTheDocument();
-        document.body.removeChild(container);
-    });
-    it('should display description text', () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="alert" aria-live="polite" aria-atomic="true" class="relative w-full rounded-lg border p-4">
-        <h5 class="mb-1 font-medium leading-none tracking-tight">Alert</h5>
-        <p class="text-sm">This is the description</p>
-      </div>
-    `;
-        expect(screen.getByText('This is the description')).toBeInTheDocument();
-        document.body.removeChild(container);
-    });
-});

package/dist/__tests__/a11y/AlertDialog.a11y.test.js

@@ -1,126 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { axe } from 'vitest-axe';
-describe('AlertDialog accessibility', () => {
-    it('should have no axe violations when open', async () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="alertdialog" aria-modal="true" aria-labelledby="alertdialog-title" aria-describedby="alertdialog-desc" class="fixed z-50 bg-background p-6 shadow-lg">
-        <h2 id="alertdialog-title" class="text-lg font-semibold">Confirm Action</h2>
-        <p id="alertdialog-desc" class="text-sm text-muted-foreground">Are you sure you want to proceed?</p>
-        <div>
-          <button type="button">Cancel</button>
-          <button type="button">Continue</button>
-        </div>
-      </div>
-    `;
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-        document.body.removeChild(container);
-    });
-    it('should have role="alertdialog"', () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="alertdialog" aria-modal="true" aria-labelledby="alertdialog-title">
-        <h2 id="alertdialog-title">Confirm Action</h2>
-        <button type="button">Cancel</button>
-        <button type="button">Continue</button>
-      </div>
-    `;
-        const dialog = screen.getByRole('alertdialog');
-        expect(dialog).toBeInTheDocument();
-        document.body.removeChild(container);
-    });
-    it('should have aria-modal="true"', () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="alertdialog" aria-modal="true" aria-labelledby="alertdialog-title">
-        <h2 id="alertdialog-title">Confirm Action</h2>
-        <button type="button">Cancel</button>
-        <button type="button">Continue</button>
-      </div>
-    `;
-        const dialog = screen.getByRole('alertdialog');
-        expect(dialog).toHaveAttribute('aria-modal', 'true');
-        document.body.removeChild(container);
-    });
-    it('should have accessible title', () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="alertdialog" aria-modal="true" aria-labelledby="alertdialog-title">
-        <h2 id="alertdialog-title">Delete Item</h2>
-        <button type="button">Cancel</button>
-        <button type="button">Delete</button>
-      </div>
-    `;
-        expect(screen.getByText('Delete Item')).toBeInTheDocument();
-        document.body.removeChild(container);
-    });
-    it('should have accessible description', () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="alertdialog" aria-modal="true" aria-labelledby="alertdialog-title" aria-describedby="alertdialog-desc">
-        <h2 id="alertdialog-title">Delete Item</h2>
-        <p id="alertdialog-desc">This action cannot be undone.</p>
-        <button type="button">Cancel</button>
-        <button type="button">Delete</button>
-      </div>
-    `;
-        expect(screen.getByText('This action cannot be undone.')).toBeInTheDocument();
-        document.body.removeChild(container);
-    });
-    it('should have cancel and confirm buttons', () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="alertdialog" aria-modal="true" aria-labelledby="alertdialog-title">
-        <h2 id="alertdialog-title">Confirm Action</h2>
-        <button type="button">Cancel</button>
-        <button type="button">Confirm</button>
-      </div>
-    `;
-        expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Confirm' })).toBeInTheDocument();
-        document.body.removeChild(container);
-    });
-    it('should be keyboard accessible', async () => {
-        const user = userEvent.setup();
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="alertdialog" aria-modal="true" aria-labelledby="alertdialog-title">
-        <h2 id="alertdialog-title">Confirm Action</h2>
-        <button type="button" id="cancel-btn">Cancel</button>
-        <button type="button" id="confirm-btn">Confirm</button>
-      </div>
-    `;
-        const cancelBtn = container.querySelector('#cancel-btn');
-        const confirmBtn = container.querySelector('#confirm-btn');
-        cancelBtn.focus();
-        expect(cancelBtn).toHaveFocus();
-        await user.tab();
-        expect(confirmBtn).toHaveFocus();
-        document.body.removeChild(container);
-    });
-    it('should have labeled buttons that describe the action', () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="alertdialog" aria-modal="true" aria-labelledby="alertdialog-title" aria-describedby="alertdialog-desc">
-        <h2 id="alertdialog-title">Delete Account</h2>
-        <p id="alertdialog-desc">This will permanently delete your account and all associated data.</p>
-        <button type="button">Cancel</button>
-        <button type="button">Delete Account</button>
-      </div>
-    `;
-        const deleteBtn = screen.getByRole('button', { name: 'Delete Account' });
-        expect(deleteBtn).toBeInTheDocument();
-        document.body.removeChild(container);
-    });
-});

package/dist/__tests__/a11y/Button.a11y.test.js

@@ -1,66 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { axe } from 'vitest-axe';
-import { createRawSnippet } from 'svelte';
-import Button from '../../lib/components/Button.svelte';
-function textSnippet(text) {
-    return createRawSnippet(() => ({
-        render: () => `<span>${text}</span>`,
-    }));
-}
-describe('Button accessibility', () => {
-    it('should have no axe violations', async () => {
-        const { container } = render(Button, {
-            props: { children: textSnippet('Click me') },
-        });
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-    it('should have no axe violations with different variants', async () => {
-        const { container } = render(Button, {
-            props: { variant: 'default', children: textSnippet('Default') },
-        });
-        expect(await axe(container)).toHaveNoViolations();
-        const { container: container2 } = render(Button, {
-            props: { variant: 'secondary', children: textSnippet('Secondary') },
-        });
-        expect(await axe(container2)).toHaveNoViolations();
-        const { container: container3 } = render(Button, {
-            props: { variant: 'destructive', children: textSnippet('Destructive') },
-        });
-        expect(await axe(container3)).toHaveNoViolations();
-    });
-    it('should be focusable', async () => {
-        render(Button, {
-            props: { children: textSnippet('Click me') },
-        });
-        const button = screen.getByRole('button');
-        await userEvent.tab();
-        expect(button).toHaveFocus();
-    });
-    it('should be activatable with keyboard', async () => {
-        let clicked = false;
-        render(Button, {
-            props: {
-                children: textSnippet('Click me'),
-                onclick: () => {
-                    clicked = true;
-                },
-            },
-        });
-        await userEvent.tab();
-        await userEvent.keyboard('{Enter}');
-        expect(clicked).toBe(true);
-    });
-    it('should not be focusable when disabled', async () => {
-        render(Button, {
-            props: {
-                disabled: true,
-                children: textSnippet('Disabled'),
-            },
-        });
-        const button = screen.getByRole('button');
-        expect(button).toBeDisabled();
-    });
-});