You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- Add an upfront browser-only / SSR-safe note.
- Soften the keyboard-accessibility claim and note a11y is built to
spec, not screen-reader-audited.
- Reflect cross-browser + mobile test coverage (Chromium/Firefox/WebKit
plus Pixel 7 and iPhone 14 in CI); add test:e2e to the dev commands.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Copy file name to clipboardExpand all lines: README.md
+7-2Lines changed: 7 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,10 +8,12 @@ Android-style app bubbles for the web. Floating, draggable bubbles that snap to
8
8
9
9
-**Zero dependencies, framework-agnostic** — plain TypeScript over the DOM; works with anything, ships nothing else
10
10
-**Real physics** — spring glides, momentum flings, chained trail drags, a magnetic dismiss target
11
-
-**Fully keyboard accessible** — single tab stop, arrow-key navigation, ARIA semantics throughout
11
+
-**Keyboard accessible** — single tab stop, arrow-key navigation, ARIA semantics throughout
12
12
-**Respects `prefers-reduced-motion`** — every animation has a calm equivalent
13
13
-**Customizable** — follows the system color scheme by default, with dark/light presets, per-token color overrides, dock position, panel sizing
14
14
15
+
> **Browser-only DOM library.** Importing is SSR-safe — nothing renders until you mount — but it runs only in the browser; call `createBubbles()` / `add()` client-side.
16
+
15
17
## Install
16
18
17
19
```sh
@@ -244,10 +246,12 @@ The whole group is a single tab stop. The docked stack announces as one button;
244
246
245
247
Panels are non-modal dialogs (`role="dialog"`, labelled by the bubble's `label`, wired via `aria-controls`/`aria-expanded`); the host page stays reachable behind them. The dismiss target is pointer-only decoration and hidden from assistive tech — keyboard dismissal has its own path. All motion honors `prefers-reduced-motion` with fades in place of flights.
246
248
249
+
Accessibility here is built to spec — the ARIA roles, single tab stop, and keyboard model above — rather than audited with real screen readers. Feedback from assistive-tech users is very welcome.
250
+
247
251
## Notes
248
252
249
253
- Bubbles render at the top of the stacking order (`z-index` near max). If your page also uses extreme z-indexes, bubbles paint above panels by design — a dragged bubble slides over its fading panel, never behind it.
250
-
- Pointer Events and the Web Animations API are required — i.e., all evergreen browsers.
254
+
- Pointer Events and the Web Animations API are required — i.e., all evergreen browsers. The interaction suite runs in CI against Chromium, Firefox, and WebKit, plus touch on Pixel 7 and iPhone 14.
251
255
- The package ships ESM with type declarations; `sideEffects: false` keeps it tree-shakeable.
252
256
253
257
## Development
@@ -257,6 +261,7 @@ bun install
257
261
bun run dev # playground at the Vite dev URL
258
262
bun run check # svelte-check over the whole repo
259
263
bun run test# vitest unit tests
264
+
bun run test:e2e # Playwright browser tests (Chromium/Firefox/WebKit + mobile)
260
265
bun run build # library build to dist/
261
266
bun run build:site # playground build to dist-site/
0 commit comments