@happyvertical/smrt-ui 0.30.0

package/dist/components/ui/Skeleton.svelte.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Skeleton — shape-matching loading placeholder.
+ *
+ * Variants: `text` (one or more lines), `circle`, `rect`. The wrapper is a
+ * polite `role="status"` region with an sr-only label so assistive tech
+ * announces that content is loading; the shimmer honors `prefers-reduced-motion`.
+ */
+export type SkeletonVariant = 'text' | 'circle' | 'rect';
+export interface Props {
+    /** Placeholder shape. */
+    variant?: SkeletonVariant;
+    /** CSS width (e.g. '100%', '8rem'). */
+    width?: string;
+    /** CSS height (e.g. '1rem', '48px'). */
+    height?: string;
+    /** Number of lines for the `text` variant. */
+    lines?: number;
+    /** Accessible loading label. */
+    label?: string;
+}
+declare const Skeleton: import("svelte").Component<Props, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;
+//# sourceMappingURL=Skeleton.svelte.d.ts.map

package/dist/components/ui/Skeleton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Skeleton.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEzD,MAAM,WAAW,KAAK;IACpB,yBAAyB;IACzB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkCD,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/ui/Tooltip.svelte

@@ -0,0 +1,120 @@
+<script module lang="ts">
+let tooltipIdCounter = 0;
+</script>
+
+<script lang="ts">
+/**
+ * Tooltip — anchored, delayed text bubble for a trigger.
+ *
+ * Shows on hover and keyboard focus, hides on leave / blur / Escape. The trigger
+ * is wired to the bubble via `aria-describedby` (always set; the bubble is in the
+ * DOM and revealed on open), and the bubble carries `role="tooltip"`. CSS-anchored
+ * via a `placement` prop — no JS positioning dependency.
+ */
+import type { Snippet } from 'svelte';
+import type { TooltipPlacement } from '../../types-generic';
+
+export interface Props {
+  /** Tooltip text. */
+  text: string;
+  /** Placement relative to the trigger. */
+  placement?: TooltipPlacement;
+  /** Show delay in ms. */
+  delay?: number;
+  /** The trigger content. */
+  children: Snippet;
+}
+
+const { text, placement = 'top', delay = 400, children }: Props = $props();
+
+const tipId = `smrt-tooltip-${(tooltipIdCounter += 1)}`;
+let open = $state(false);
+let timer: ReturnType<typeof setTimeout> | null = null;
+
+function show() {
+  if (timer) clearTimeout(timer);
+  timer = setTimeout(() => {
+    open = true;
+  }, delay);
+}
+
+function hide() {
+  if (timer) clearTimeout(timer);
+  timer = null;
+  open = false;
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') hide();
+}
+</script>
+
+<!-- Presentational wrapper: it only listens for hover/focus/Escape to toggle the
+     bubble; the real interactive element is the consumer's trigger child. -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+  class="tooltip-wrap"
+  onmouseenter={show}
+  onmouseleave={hide}
+  onfocusin={show}
+  onfocusout={hide}
+  onkeydown={onKeydown}
+>
+  <span class="tooltip-trigger" aria-describedby={tipId}>
+    {@render children()}
+  </span>
+  <span id={tipId} role="tooltip" class="tooltip tooltip--{placement}" class:open>
+    {text}
+  </span>
+</span>
+
+<style>
+  .tooltip-wrap {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .tooltip {
+    position: absolute;
+    z-index: var(--smrt-z-index-tooltip, 1080);
+    display: none;
+    width: max-content;
+    max-width: 16rem;
+    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
+    border-radius: var(--smrt-radius-small, 4px);
+    background: var(--smrt-color-inverse-surface, #313033);
+    color: var(--smrt-color-inverse-on-surface, #f4eff4);
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    line-height: var(--smrt-typography-body-small-line-height, 1.4);
+    pointer-events: none;
+  }
+
+  .tooltip.open {
+    display: block;
+  }
+
+  .tooltip--top {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-bottom: var(--smrt-spacing-1, 4px);
+  }
+  .tooltip--bottom {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: var(--smrt-spacing-1, 4px);
+  }
+  .tooltip--left {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-right: var(--smrt-spacing-1, 4px);
+  }
+  .tooltip--right {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: var(--smrt-spacing-1, 4px);
+  }
+</style>

package/dist/components/ui/Tooltip.svelte.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Tooltip — anchored, delayed text bubble for a trigger.
+ *
+ * Shows on hover and keyboard focus, hides on leave / blur / Escape. The trigger
+ * is wired to the bubble via `aria-describedby` (always set; the bubble is in the
+ * DOM and revealed on open), and the bubble carries `role="tooltip"`. CSS-anchored
+ * via a `placement` prop — no JS positioning dependency.
+ */
+import type { Snippet } from 'svelte';
+import type { TooltipPlacement } from '../../types-generic';
+export interface Props {
+    /** Tooltip text. */
+    text: string;
+    /** Placement relative to the trigger. */
+    placement?: TooltipPlacement;
+    /** Show delay in ms. */
+    delay?: number;
+    /** The trigger content. */
+    children: Snippet;
+}
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;
+//# sourceMappingURL=Tooltip.svelte.d.ts.map

package/dist/components/ui/Tooltip.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Tooltip.svelte.ts"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG5D,MAAM,WAAW,KAAK;IACpB,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAgDD,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/ui/Tree.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">
+/**
+ * Tree — recursive, selectable tree view (generalizes the workspace NavTree).
+ *
+ * Renders a flat-DOM WAI-ARIA tree (`role="tree"` → `role="treeitem"` with
+ * `aria-level`), which keeps full keyboard support simple: roving tabindex, Arrow
+ * Up/Down to move between visible items, Right to expand / descend, Left to
+ * collapse / ascend, Home/End, and Enter/Space to select.
+ */
+import { tick, untrack } from 'svelte';
+import type { TreeNode } from '../../types-generic';
+
+export interface Props {
+  /** Root nodes. */
+  nodes: TreeNode[];
+  /** Selected node id. */
+  selectedId?: string;
+  /** Initially expanded node ids. */
+  expanded?: string[];
+  /** Fired with the selected node id. */
+  onselect?: (id: string) => void;
+  /** Accessible label for the tree. */
+  'aria-label'?: string;
+}
+
+const {
+  nodes,
+  selectedId,
+  expanded: initialExpanded = [],
+  onselect,
+  'aria-label': ariaLabel = 'Tree',
+}: Props = $props();
+
+// Uncontrolled: seed once from the initial prop value.
+let expandedSet = $state(new Set(untrack(() => initialExpanded)));
+let activeId = $state<string | null>(null);
+let itemEls = $state<Array<HTMLDivElement | null>>([]);
+
+interface FlatNode {
+  node: TreeNode;
+  depth: number;
+  hasChildren: boolean;
+  isExpanded: boolean;
+}
+
+const flat = $derived.by(() => {
+  const out: FlatNode[] = [];
+  const walk = (list: TreeNode[], depth: number) => {
+    for (const node of list) {
+      const hasChildren = !!node.children?.length;
+      const isExpanded = expandedSet.has(node.id);
+      out.push({ node, depth, hasChildren, isExpanded });
+      if (hasChildren && isExpanded) walk(node.children ?? [], depth + 1);
+    }
+  };
+  walk(nodes, 0);
+  return out;
+});
+
+// The treeitem that owns tabindex=0 — active, else selected, else first.
+const tabbableId = $derived(activeId ?? selectedId ?? flat[0]?.node.id ?? null);
+
+function setExpanded(id: string, value: boolean) {
+  const next = new Set(expandedSet);
+  if (value) next.add(id);
+  else next.delete(id);
+  expandedSet = next;
+}
+
+async function focusIndex(index: number) {
+  const target = flat[index];
+  if (!target) return;
+  activeId = target.node.id;
+  await tick();
+  itemEls[index]?.focus();
+}
+
+function select(node: TreeNode) {
+  activeId = node.id;
+  onselect?.(node.id);
+}
+
+function onItemKeydown(event: KeyboardEvent, index: number, item: FlatNode) {
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault();
+      focusIndex(Math.min(index + 1, flat.length - 1));
+      break;
+    case 'ArrowUp':
+      event.preventDefault();
+      focusIndex(Math.max(index - 1, 0));
+      break;
+    case 'ArrowRight':
+      event.preventDefault();
+      if (item.hasChildren && !item.isExpanded) setExpanded(item.node.id, true);
+      else if (item.hasChildren) focusIndex(index + 1);
+      break;
+    case 'ArrowLeft':
+      event.preventDefault();
+      if (item.hasChildren && item.isExpanded) {
+        setExpanded(item.node.id, false);
+      } else {
+        // Move to parent: nearest preceding item at a shallower depth.
+        for (let i = index - 1; i >= 0; i--) {
+          if (flat[i].depth < item.depth) {
+            focusIndex(i);
+            break;
+          }
+        }
+      }
+      break;
+    case 'Home':
+      event.preventDefault();
+      focusIndex(0);
+      break;
+    case 'End':
+      event.preventDefault();
+      focusIndex(flat.length - 1);
+      break;
+    case 'Enter':
+    case ' ':
+      event.preventDefault();
+      if (item.hasChildren) setExpanded(item.node.id, !item.isExpanded);
+      select(item.node);
+      break;
+  }
+}
+</script>
+
+<div role="tree" aria-label={ariaLabel} class="tree">
+  {#each flat as item, i (item.node.id)}
+    <div
+      bind:this={itemEls[i]}
+      role="treeitem"
+      class="tree__item"
+      class:selected={selectedId === item.node.id}
+      style:padding-left="calc({item.depth} * var(--smrt-spacing-4, 16px) + var(--smrt-spacing-2, 8px))"
+      aria-level={item.depth + 1}
+      aria-selected={selectedId === item.node.id}
+      aria-expanded={item.hasChildren ? item.isExpanded : undefined}
+      tabindex={tabbableId === item.node.id ? 0 : -1}
+      onclick={() => {
+        if (item.hasChildren) setExpanded(item.node.id, !item.isExpanded);
+        select(item.node);
+      }}
+      onkeydown={(e) => onItemKeydown(e, i, item)}
+    >
+      {#if item.hasChildren}
+        <span class="tree__twisty" class:open={item.isExpanded} aria-hidden="true"
+          >▸</span
+        >
+      {:else}
+        <span class="tree__twisty tree__twisty--leaf" aria-hidden="true"></span>
+      {/if}
+      <span class="tree__label">{item.node.label}</span>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .tree {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .tree__item {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-1, 4px);
+    padding-top: var(--smrt-spacing-1, 4px);
+    padding-bottom: var(--smrt-spacing-1, 4px);
+    padding-right: var(--smrt-spacing-2, 8px);
+    border-radius: var(--smrt-radius-small, 4px);
+    cursor: pointer;
+    color: var(--smrt-color-on-surface);
+    user-select: none;
+  }
+  .tree__item:hover {
+    background: var(--smrt-color-surface-container-high);
+  }
+  .tree__item:focus-visible {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: -2px;
+  }
+  .tree__item.selected {
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
+  }
+
+  .tree__twisty {
+    display: inline-flex;
+    width: 1em;
+    justify-content: center;
+    transition: transform 0.15s ease;
+    font-size: 0.75em;
+  }
+  .tree__twisty.open {
+    transform: rotate(90deg);
+  }
+  .tree__twisty--leaf {
+    visibility: hidden;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .tree__twisty {
+      transition: none;
+    }
+  }
+</style>

package/dist/components/ui/Tree.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { TreeNode } from '../../types-generic';
+export interface Props {
+    /** Root nodes. */
+    nodes: TreeNode[];
+    /** Selected node id. */
+    selectedId?: string;
+    /** Initially expanded node ids. */
+    expanded?: string[];
+    /** Fired with the selected node id. */
+    onselect?: (id: string) => void;
+    /** Accessible label for the tree. */
+    'aria-label'?: string;
+}
+declare const Tree: import("svelte").Component<Props, {}, "">;
+type Tree = ReturnType<typeof Tree>;
+export default Tree;
+//# sourceMappingURL=Tree.svelte.d.ts.map

package/dist/components/ui/Tree.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Tree.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAGpD,MAAM,WAAW,KAAK;IACpB,kBAAkB;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,qCAAqC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAoID,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/ui/__tests__/Badge.test.js

@@ -0,0 +1,76 @@
+/**
+ * Component test for Badge (Sweep S11, #1416).
+ *
+ * Badge is a presentational `<span>` — it renders children plus variant/size
+ * classes and forwards rest attributes. This suite asserts that real API
+ * (props from Badge.svelte) and proves the output is axe-clean.
+ */
+import { render, screen } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import { describe, expect, it } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import Badge from '../Badge.svelte';
+/** Build a text Snippet for the Badge's `children` prop. */
+function textSnippet(text) {
+    return createRawSnippet(() => ({ render: () => `<span>${text}</span>` }));
+}
+describe('Badge', () => {
+    it('renders its children content', () => {
+        render(Badge, { props: { children: textSnippet('New') } });
+        expect(screen.getByText('New')).toBeInTheDocument();
+    });
+    it('applies the default variant and md size classes', () => {
+        const { container } = render(Badge, {
+            props: { children: textSnippet('Default') },
+        });
+        const badge = container.querySelector('.badge');
+        expect(badge).toHaveClass('default');
+        expect(badge).toHaveClass('md');
+    });
+    it.each([
+        'primary',
+        'success',
+        'warning',
+        'error',
+        'info',
+    ])('reflects the %s variant as a class', (variant) => {
+        const { container } = render(Badge, {
+            props: { variant, children: textSnippet('Status') },
+        });
+        expect(container.querySelector('.badge')).toHaveClass(variant);
+    });
+    it('reflects the sm size as a class', () => {
+        const { container } = render(Badge, {
+            props: { size: 'sm', children: textSnippet('Small') },
+        });
+        expect(container.querySelector('.badge')).toHaveClass('sm');
+    });
+    it('forwards rest attributes (e.g. aria-label, data-testid) to the span', () => {
+        const { container } = render(Badge, {
+            props: {
+                'aria-label': 'Unread count: 3',
+                'data-testid': 'unread-badge',
+                children: textSnippet('3'),
+            },
+        });
+        const badge = container.querySelector('.badge');
+        expect(badge).toHaveAttribute('aria-label', 'Unread count: 3');
+        expect(badge).toHaveAttribute('data-testid', 'unread-badge');
+    });
+    it('is axe-clean for a default badge', async () => {
+        const { container } = render(Badge, {
+            props: { children: textSnippet('Accessible') },
+        });
+        await expectNoA11yViolations(container);
+    });
+    it('is axe-clean for a variant badge with an accessible label', async () => {
+        const { container } = render(Badge, {
+            props: {
+                variant: 'error',
+                'aria-label': '5 errors',
+                children: textSnippet('5'),
+            },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/ui/__tests__/Button.test.js

@@ -0,0 +1,69 @@
+/**
+ * Golden test for Button (Sweep L4, #1423).
+ *
+ * The reference pattern for component tests in this package: render via Testing
+ * Library, assert role/name/state, drive interaction with user-event, and prove
+ * the rendered output is axe-clean. New primitive tests should mirror this shape.
+ */
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { createRawSnippet } from 'svelte';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import Button from '../Button.svelte';
+/** Build a text Snippet for the Button's `children` prop. */
+function textSnippet(text) {
+    return createRawSnippet(() => ({ render: () => `<span>${text}</span>` }));
+}
+describe('Button', () => {
+    it('renders children as a <button> with type=button by default', () => {
+        render(Button, { props: { children: textSnippet('Save') } });
+        const button = screen.getByRole('button', { name: 'Save' });
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveAttribute('type', 'button');
+    });
+    it('fires onclick when clicked', async () => {
+        const onclick = vi.fn();
+        render(Button, { props: { children: textSnippet('Go'), onclick } });
+        await userEvent.click(screen.getByRole('button', { name: 'Go' }));
+        expect(onclick).toHaveBeenCalledTimes(1);
+    });
+    it('is keyboard-activatable when focused', async () => {
+        const onclick = vi.fn();
+        render(Button, { props: { children: textSnippet('Go'), onclick } });
+        const button = screen.getByRole('button', { name: 'Go' });
+        button.focus();
+        expect(button).toHaveFocus();
+        await userEvent.keyboard('{Enter}');
+        expect(onclick).toHaveBeenCalled();
+    });
+    it('does not fire onclick when disabled', async () => {
+        const onclick = vi.fn();
+        render(Button, {
+            props: { children: textSnippet('Go'), disabled: true, onclick },
+        });
+        const button = screen.getByRole('button', { name: 'Go' });
+        expect(button).toBeDisabled();
+        await userEvent.click(button);
+        expect(onclick).not.toHaveBeenCalled();
+    });
+    it('reflects loading as aria-busy and disables interaction', () => {
+        render(Button, { props: { children: textSnippet('Go'), loading: true } });
+        const button = screen.getByRole('button', { name: 'Go' });
+        expect(button).toHaveAttribute('aria-busy', 'true');
+        expect(button).toBeDisabled();
+    });
+    it('renders as a link (role=link) when href is provided', () => {
+        render(Button, {
+            props: { children: textSnippet('Home'), href: '/home' },
+        });
+        const link = screen.getByRole('link', { name: 'Home' });
+        expect(link).toHaveAttribute('href', '/home');
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(Button, {
+            props: { children: textSnippet('Accessible') },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/ui/__tests__/Card.test.js

@@ -0,0 +1,103 @@
+/**
+ * Component test for Card (Sweep S11, #1416).
+ *
+ * Mirrors the Button golden pattern: render → assert structure/variant → axe.
+ * Card is a presentational surface — it has no interactive behavior of its own
+ * (no clickable/keyboard handler in the source), so this suite covers rendering
+ * of content/header/footer snippets, variant + padding classes, the hoverable
+ * flag, attribute pass-through (`...rest`), and a11y.
+ */
+import { render, screen } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import { describe, expect, it } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import Card from '../Card.svelte';
+/** Build a text Snippet for a Card slot. */
+function textSnippet(text) {
+    return createRawSnippet(() => ({ render: () => `<span>${text}</span>` }));
+}
+describe('Card', () => {
+    it('renders children inside the card content region', () => {
+        render(Card, { props: { children: textSnippet('Body text') } });
+        expect(screen.getByText('Body text')).toBeInTheDocument();
+    });
+    it('applies the default variant and md padding classes', () => {
+        const { container } = render(Card, {
+            props: { children: textSnippet('Body') },
+        });
+        const card = container.querySelector('.card');
+        expect(card).toHaveClass('default');
+        expect(card).toHaveClass('padding-md');
+    });
+    it('reflects an explicit variant and padding', () => {
+        const { container } = render(Card, {
+            props: {
+                variant: 'elevated',
+                padding: 'lg',
+                children: textSnippet('Body'),
+            },
+        });
+        const card = container.querySelector('.card');
+        expect(card).toHaveClass('elevated');
+        expect(card).toHaveClass('padding-lg');
+    });
+    it('adds the hoverable class only when hoverable is true', () => {
+        const { container: plain } = render(Card, {
+            props: { children: textSnippet('Body') },
+        });
+        expect(plain.querySelector('.card')).not.toHaveClass('hoverable');
+        const { container: hover } = render(Card, {
+            props: { hoverable: true, children: textSnippet('Body') },
+        });
+        expect(hover.querySelector('.card')).toHaveClass('hoverable');
+    });
+    it('renders header and footer slots when provided', () => {
+        const { container } = render(Card, {
+            props: {
+                header: textSnippet('Header'),
+                footer: textSnippet('Footer'),
+                children: textSnippet('Body'),
+            },
+        });
+        expect(container.querySelector('.card-header')).toBeInTheDocument();
+        expect(container.querySelector('.card-footer')).toBeInTheDocument();
+        expect(screen.getByText('Header')).toBeInTheDocument();
+        expect(screen.getByText('Footer')).toBeInTheDocument();
+    });
+    it('omits header and footer regions when those slots are absent', () => {
+        const { container } = render(Card, {
+            props: { children: textSnippet('Body') },
+        });
+        expect(container.querySelector('.card-header')).toBeNull();
+        expect(container.querySelector('.card-footer')).toBeNull();
+    });
+    it('forwards rest attributes (e.g. data-testid, aria-label) to the root', () => {
+        const { container } = render(Card, {
+            props: {
+                'data-testid': 'profile-card',
+                'aria-label': 'Profile',
+                children: textSnippet('Body'),
+            },
+        });
+        const card = container.querySelector('.card');
+        expect(card).toHaveAttribute('data-testid', 'profile-card');
+        expect(card).toHaveAttribute('aria-label', 'Profile');
+    });
+    it('is axe-clean for a content-only card', async () => {
+        const { container } = render(Card, {
+            props: { children: textSnippet('Accessible body') },
+        });
+        await expectNoA11yViolations(container);
+    });
+    it('is axe-clean with header and footer regions', async () => {
+        const { container } = render(Card, {
+            props: {
+                variant: 'outlined',
+                header: textSnippet('Heading'),
+                footer: textSnippet('Actions'),
+                children: textSnippet('Accessible body'),
+            },
+        });
+        await expectNoA11yViolations(container);
+    });
+});