{"_id":"8-bit-vibez","_rev":"2-de76fd8eaa78ffe8798780b7e57768ff","name":"8-bit-vibez","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"8-bit-vibez","version":"0.1.0","keywords":["web-components","lit","custom-elements","8-bit","pixel","retro","pico-8"],"author":{"name":"josegabrielcruz"},"license":"MIT","_id":"8-bit-vibez@0.1.0","maintainers":[{"name":"josecruz","email":"jcruz99@gmail.com"}],"homepage":"https://josegabrielcruz.github.io/8-bit-vibez","bugs":{"url":"https://github.com/josegabrielcruz/8-bit-vibez/issues"},"dist":{"shasum":"0396b9ace863a5cb2dfac1d939a14f6079829eb4","tarball":"https://registry.npmjs.org/8-bit-vibez/-/8-bit-vibez-0.1.0.tgz","fileCount":94,"integrity":"sha512-FUgPkKbVn8UkawrfVkDk0pmHjdHoMA/cxu8akUMyfzNaTh5YciVKwnTjoEOOO6Qm+3qG0fl7F+D2iMOsD5sy7w==","signatures":[{"sig":"MEUCIDGMqtEM5GqWnzK25b2vHi8yzK/RSZNSd3NqZJnjVGwFAiEAiew9DSmF7eMOgQDMsJ+qyWVQvMPCX+UGF3pSaN5Rrls=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6488791},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles":"./src/styles/tokens.css"},"gitHead":"d43ad6be0e68bc289fca5c36b5855efef03bb5e3","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build:lib":"vite build --mode lib","storybook":"storybook dev -p 6007","typecheck":"tsc --noEmit","build-storybook":"storybook build"},"_npmUser":{"name":"josecruz","email":"jcruz99@gmail.com"},"repository":{"url":"git+https://github.com/josegabrielcruz/8-bit-vibez.git","type":"git"},"_npmVersion":"11.6.2","description":"8-bit pixel aesthetic Lit web component library","directories":{},"_nodeVersion":"25.2.1","_hasShrinkwrap":false,"devDependencies":{"lit":"^3.3.3","vite":"^8.2.2","storybook":"^8.5.0","typescript":"~6.0.2","vite-plugin-dts":"^4.5.4","@storybook/blocks":"^8.5.0","@storybook/theming":"^8.5.0","@storybook/addon-a11y":"^8.5.0","@storybook/web-components":"^8.5.0","@storybook/addon-essentials":"^8.5.0","@storybook/web-components-vite":"^8.5.0"},"peerDependencies":{"lit":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/8-bit-vibez_0.1.0_1788991391390_0.6379736646045502","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"_id":"8-bit-vibez@0.1.1","bugs":{"url":"https://github.com/josegabrielcruz/8-bit-vibez/issues"},"dist":{"shasum":"2606155f160f0c9cdbdd19d2dee82ad5f4aefadc","tarball":"https://registry.npmjs.org/8-bit-vibez/-/8-bit-vibez-0.1.1.tgz","fileCount":37,"integrity":"sha512-ie6L5UZpKvkzMmPnq0d5zO7KyUFy/9xJiwNItDvACXrMDaec1R7/sbZus/H/bLX7Oh8f4ER2BzX6N1jjaeEmZA==","signatures":[{"sig":"MEUCIQCCjZ6O8TCAEs9u4Zpit8GEGUdrjuvY25c6/7pCl/MXkAIgeO9pzo5rBOD5zZIxSjgVgFV8oKvgk76BPpPAuRkDlZY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCoX6G/oso+JwJgZp6pjxV60pwf1VCg05yjAx5ee3ZgvAIgKQUXp5U1nvtJtbsC0laapdRybk3AHdHwswWe4fYrLko="}],"unpackedSize":269458},"main":"./dist/index.js","name":"8-bit-vibez","type":"module","types":"./dist/index.d.ts","author":{"name":"josegabrielcruz"},"module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles":"./src/styles/tokens.css"},"gitHead":"9f0ffaee402542b1b711409422400897fd02033c","license":"MIT","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build:lib":"vite build --mode lib","storybook":"storybook dev -p 6007","typecheck":"tsc --noEmit","build-storybook":"storybook build"},"version":"0.1.1","_npmUser":{"name":"josecruz","email":"jcruz99@gmail.com"},"homepage":"https://josegabrielcruz.github.io/8-bit-vibez","keywords":["web-components","lit","custom-elements","8-bit","pixel","retro","pico-8"],"repository":{"url":"git+https://github.com/josegabrielcruz/8-bit-vibez.git","type":"git"},"_npmVersion":"11.6.2","description":"8-bit pixel aesthetic Lit web component library","directories":{},"maintainers":[{"name":"josecruz","email":"jcruz99@gmail.com"}],"_nodeVersion":"25.2.1","_hasShrinkwrap":false,"devDependencies":{"lit":"^3.3.3","vite":"^8.2.2","storybook":"^8.5.0","typescript":"~6.0.2","vite-plugin-dts":"^4.5.4","@storybook/blocks":"^8.5.0","@storybook/theming":"^8.5.0","@storybook/addon-a11y":"^8.5.0","@storybook/web-components":"^8.5.0","@storybook/addon-essentials":"^8.5.0","@storybook/web-components-vite":"^8.5.0"},"peerDependencies":{"lit":"^3.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/8-bit-vibez_0.1.1_1788997057832_0.08929104225400497"}}},"time":{"created":"2026-09-09T22:03:11.309Z","modified":"2026-09-09T23:37:38.069Z","0.1.0":"2026-09-09T22:03:11.555Z","0.1.1":"2026-09-09T23:37:37.927Z"},"bugs":{"url":"https://github.com/josegabrielcruz/8-bit-vibez/issues"},"author":{"name":"josegabrielcruz"},"license":"MIT","homepage":"https://josegabrielcruz.github.io/8-bit-vibez","keywords":["web-components","lit","custom-elements","8-bit","pixel","retro","pico-8"],"repository":{"url":"git+https://github.com/josegabrielcruz/8-bit-vibez.git","type":"git"},"description":"8-bit pixel aesthetic Lit web component library","maintainers":[{"name":"josecruz","email":"jcruz99@gmail.com"}],"readme":"# 8-bit-vibez\n\n[![npm version](https://img.shields.io/npm/v/8-bit-vibez)](https://www.npmjs.com/package/8-bit-vibez)\n[![npm downloads](https://img.shields.io/npm/dm/8-bit-vibez)](https://www.npmjs.com/package/8-bit-vibez)\n[![license](https://img.shields.io/npm/l/8-bit-vibez)](./LICENSE)\n\nA PICO-8 inspired Lit web component library with a **subtle 8-bit aesthetic** — hard corners, pixel-art shadows, stepped animations, and arcade UI primitives. Framework-agnostic custom elements that work in React, Vue, plain HTML, or any other stack.\n\n**[Live Showcase](https://josegabrielcruz.github.io/8-bit-vibez)** · **[Storybook](https://josegabrielcruz.github.io/8-bit-vibez/storybook)**\n\n---\n\n## Design Philosophy\n\nThe 8-bit character comes from **geometry and motion**, not from maxing out the decorative font everywhere:\n\n- `border-radius: 0` — hard corners only\n- `2px 2px 0 color` hard shadows — depth cue, not cartoon weight\n- `steps(N)` CSS transitions — frame-based state changes, not smooth eases\n- Pixel font (`--font-pixel`) reserved for short labels, scores, and headings — ≥16px\n- Body copy and interactive controls use JetBrains Mono (`--font-body`)\n- PICO-8 color palette, tuned to pass WCAG 2.1 AA contrast requirements\n\n---\n\n## Components\n\n### Sprint 1 — Form Controls\n\n| Element | Description |\n|---|---|\n| `<pixel-button>` | primary / secondary / danger variants, sm/md/lg, loading, disabled |\n| `<pixel-input>` | Text input with scan-snap focus border, error message, label |\n| `<pixel-textarea>` | Multiline input with optional character counter |\n| `<pixel-checkbox>` | X-mark check, indeterminate support |\n| `<pixel-radio>` | Square-fill pixel radio button |\n| `<pixel-toggle>` | ON/OFF sliding block switch |\n| `<pixel-range>` | HP-bar style track — fill shifts green → yellow → red |\n| `<pixel-select>` | Custom listbox with keyboard navigation |\n| `<pixel-number>` | `[<]` / `[>]` step buttons around a numeric input |\n\n### Sprint 2 — Feedback & Status\n\n| Element | Description |\n|---|---|\n| `<pixel-progress>` | Segmented HP bar, determinate + indeterminate scan animation |\n| `<pixel-life>` | ♥ hearts or block segments, `role=\"meter\"` |\n| `<pixel-score>` | Arcade digit counter with leading zeros, `aria-live` |\n| `<pixel-badge>` | Rarity tag — common / uncommon / rare / epic / legendary |\n| `<pixel-status>` | Blinking ● dot — online / idle / error / offline |\n| `<pixel-toast>` | Slide-in notification, auto-dismiss, 4 severity variants |\n| `<pixel-tooltip>` | Speech-bubble box with pixel arrow tail |\n\n### Sprint 3 — Layout Primitives\n\n| Element | Description |\n|---|---|\n| `<pixel-card>` | Bordered container, optional title bar, accent color variants |\n| `<pixel-panel>` | Collapsible panel with ▶/▼ pixel-font indicator |\n| `<pixel-dialog>` | Modal with `[X]` close, `role=\"dialog\"`, focus trap, Escape key |\n| `<pixel-divider>` | Solid or dashed rule with optional centered label |\n| `<pixel-tabs>` | Full `role=\"tablist\"` ARIA pattern, arrow key navigation |\n\n### Sprint 4 — Arcade & RPG Specials\n\n| Element | Description |\n|---|---|\n| `<pixel-typewriter>` | Character-by-character text reveal with blinking block cursor |\n| `<pixel-dialog-box>` | RPG speech panel — speaker name, ▼ next indicator, multi-page messages |\n| `<pixel-sprite>` | CSS sprite sheet animation via `steps()` — bring your own PNG |\n| `<pixel-map>` | Canvas 2D tilemap renderer |\n| `<pixel-cursor>` | Blinking ▶ selection cursor for menus |\n| `<pixel-scanline>` | CSS-only CRT scanline + vignette overlay — opt-in, `position: fixed` |\n\nAll form components are [form-associated custom elements](https://web.dev/articles/more-capable-form-controls) — they participate in native `<form>` submit and `FormData` without any wrapper.\n\n---\n\n## Install\n\n```bash\nnpm install 8-bit-vibez lit\n```\n\n```html\n<!-- Plain HTML / vanilla JS -->\n<script type=\"module\">\n  import '8-bit-vibez'\n</script>\n<link rel=\"stylesheet\" href=\"node_modules/8-bit-vibez/src/styles/tokens.css\">\n<pixel-button>PRESS START</pixel-button>\n```\n\n```ts\n// Bundler (Vite, webpack, etc.)\nimport '8-bit-vibez'           // registers all 25 elements\nimport '8-bit-vibez/styles'   // CSS design tokens\n\n// Named imports for tree-shaking\nimport { PixelButton, PixelDialogBox } from '8-bit-vibez'\n```\n\n```tsx\n// React 19 — custom elements work in JSX natively\nimport '8-bit-vibez'\nimport '8-bit-vibez/styles'\n\n<pixel-button variant=\"primary\">START GAME</pixel-button>\n```\n\n---\n\n## Running Locally\n\n```bash\nnpm install\nnpm run dev         # showcase on localhost:5173\nnpm run storybook   # component docs on localhost:6007\n```\n\nRequires Node 18+.\n\n---\n\n## Design Tokens\n\nAll visual properties are driven by CSS custom properties in `src/styles/tokens.css`. These pierce Shadow DOM natively — override them at `:root` to theme all components at once:\n\n```css\n:root {\n  /* Colors — PICO-8 palette */\n  --bg:      #0d0d1a;\n  --bg-2:    #1d2b53;\n  --green:   #00e436;\n  --blue:    #29adff;\n  --yellow:  #ffec27;\n  --red:     #ff004d;\n\n  /* Typography */\n  --font-pixel: 'Dogica', 'Press Start 2P', monospace;  /* decorative */\n  --font-body:  'JetBrains Mono', 'Courier New', monospace;\n\n  /* Shape — no border-radius in 8-bit art */\n  --radius: 0px;\n\n  /* Motion — stepped feel */\n  --ease-step: steps(4);\n}\n```\n\n---\n\n## Accessibility\n\n- WCAG 2.1 AA color contrast throughout (PICO-8 colors tuned for dark backgrounds)\n- `prefers-reduced-motion`: all CSS animations disabled; `pixel-typewriter` reveals full text instantly; `pixel-sprite` freezes on frame 0; `pixel-scanline` hides entirely\n- Full keyboard navigation on all interactive components\n- `role=\"meter\"` on `pixel-life`, `role=\"progressbar\"` on `pixel-progress`, `role=\"tablist\"` on `pixel-tabs`, `role=\"dialog\"` on `pixel-dialog`\n- `aria-live=\"polite\"` on `pixel-score` and `pixel-status`\n- Disabled state uses `filter: opacity(0.4)` instead of `opacity` so WCAG 1.4.3 inactive-UI exemption is correctly recognized by accessibility tools\n\n### Known Gaps\n\n- `pixel-typewriter` `prefers-reduced-motion` fallback shows full text immediately ✓ but the `aria-live` region on inline usage may be verbose — wrap in a semantically appropriate container\n- `pixel-map` canvas content has `role=\"img\"` with a label, but tile-level detail is not exposed to AT (by design — visual decoration)\n- `pixel-scanline` is purely decorative and `aria-hidden` — no AT impact\n\n---\n\n## Roadmap\n\n- [ ] `pixel-dialog` — full `inert` attribute propagation to sibling elements\n- [ ] `pixel-life` / `pixel-score` — aria-live polite announcements on value change\n- [ ] Unit tests (`@web/test-runner` + `@open-wc/testing`)\n- [ ] Changelog (`changeset`)\n- [ ] `pixel-audio` — pixel-style audio player with frequency visualizer\n- [ ] `pixel-inventory` — grid-based item slot system\n- [ ] `pixel-minimap` — live canvas minimap\n\n---\n\n## License\n\nMIT\n","readmeFilename":"README.md"}