Add generic Clickable and ClickableContainer components

So individual components stay simple, and interactivity is concentrated in `Clickable` / `ClickableContainer`.

## Prior art

A widely-used interactive primitive in an earlier internal design system was built exactly this way and validates the approach. Behaviors to carry forward:

## Proposed API

Follow existing sibling conventions (`ClickableCard`, `Button`, `Token`): `label` required, `isDisabled` (not `disabled`), `href`/`onClick`/`target`, `xstyle`, StyleX-only, `useLinkComponent()` for navigation.

### `Clickable`

```tsx
interface ClickableProps extends BaseProps {
/** Accessible name (required). Not visually rendered. */
label: string;
/** Content that becomes the interactive target. */
children: ReactNode;
/** Navigation URL → renders as a link. */
href?: string;
/** Link target (with href). @default '_self' */
target?: string;
/** Action handler → renders as a button. */
onClick?: (event: MouseEvent) => void;
/** @default false — remains focusable with aria-disabled. */
isDisabled?: boolean;
/** Optional reason surfaced when disabled (tooltip + assistive tech). */
disabledReason?: string;
/** Keep appearance but remove interaction (no disabled styling). @default false */
isReadOnly?: boolean;
ref?: Ref;
}
```

```tsx

setCount(c => c + 1)}>

```

- Priority: `href` → link, else `onClick` → button (mirrors `useInteractiveRole`).
- Adds hover overlay + pressed + focus ring. No padding of its own.

### `ClickableContainer`

```tsx
interface ClickableContainerProps extends BaseProps {
/** Accessible name (required). */
label: string;
/** Surface content; may contain nested buttons/links that work independently. */
children: ReactNode;
href?: string;
target?: string;
onClick?: (event: MouseEvent) => void;
/** @default false — focusable with aria-disabled. */
isDisabled?: boolean;
/** Optional reason surfaced when disabled (tooltip + assistive tech). */
disabledReason?: string;
/** Keep appearance but remove interaction. @default false */
isReadOnly?: boolean;
ref?: Ref;
}
```

```tsx

```

Built on `useClickableContainer`. `ClickableCard` / `SelectableCard` can be refactored to thin visual wrappers over it, and `Token` / `Item` / `Thumbnail` can drop their bespoke invisible-button implementations.

## Accessibility guarantees (how ClickableContainer works)

This is the delicate part, so the contract is explicit. The pattern: **a visually-hidden but focusable real interactive element rendered as a *sibling* of inert visible content.**

```

`Clickable` uses the same hidden-real-element approach without the nested-interactive click-routing, since its content isn't meant to contain independent interactive children.

## Acceptance criteria

- [ ] `Clickable` and `ClickableContainer` implemented in `packages/core/src`, StyleX-only, using `useClickableContainer` / `useInteractiveRole` / `useLinkComponent`.
- [ ] Renders as `` for `onClick` and link (`useLinkComponent`) for `href`; disabled links fall back to button.
- [ ] Full a11y contract above, verified by tests: no role/tabIndex on the container; hidden focusable real element; keyboard Enter/Space; `:has(:focus-visible)` ring; nested-interactive click isolation.
- [ ] Overlay `border-radius` inherits from the child by default; explicit styling (`xstyle` / direct radius) overrides.
- [ ] `isDisabled` uses `aria-disabled` (stays focusable/announced) with an optional `disabledReason` surfaced via tooltip + assistive tech; `isReadOnly` removes interaction while preserving appearance.
- [ ] Full component surface per repo conventions: `.tsx`, colocated `.test.tsx`, `{Name}.doc.mjs`, `index.ts` export, Storybook story, showcase block, `displayName`, synced exports.
- [ ] Changeset (consumer-visible, patch pre-1.0).
- [ ] No refactor of existing components in this issue (see resolved decisions).

## Resolved decisions

- **Border radius — auto-inherit, consumer can override.** The hover/press/selection overlay uses `borderRadius: inherit` so it matches the child's radius by default. Explicit styling always wins: `xstyle` (and any direct radius override) takes precedence.
- **Disabled contract — `aria-disabled` everywhere.** Both components keep the element focusable and discoverable via `aria-disabled` (never native `` / removal from tab order). Same contract across the whole system. Add a `disabledReason` so the *why* is surfaced (tooltip + assistive tech) rather than a silently-dead control.
- **`isReadOnly` — adopt.** Preserves appearance but removes interaction (distinct from `isDisabled`, which shows a disabled state).
- **`isSelected` — deferred.** Selection semantics (toggle vs. visually-selected button/link, and the right ARIA) need their own design; out of scope here. Use `SelectableCard` for toggle selection.
- **Density — deferred.** Not in the initial API; revisit only with a demonstrated need.
- **Migration — none up front.** Do **not** refactor `ClickableCard` / `SelectableCard` / `Token` / `Item` / `Thumbnail`. Direct hook usage (`useClickableContainer` / `useInteractiveRole`) is preferable there — it produces less DOM than wrapping in a component. Worth a follow-up *review* to see whether any of them would genuinely reduce code drift by adopting a component, but that's not a goal of this issue.

## Non-goals

- Not making all components polymorphic — interactivity is concentrated in these two components instead.
- Not removing `useClickableContainer` / `useInteractiveRole` — the components build on them.
- Not a visual redesign of hover/focus states — reuse existing overlay/focus token conventions.