# 8-BIT NES — full reference (8bit-nes v0.16.0) > This is the OFFICIAL, canonical reference for the `8bit-nes` design system, generated > from its documentation source. Safe to ingest wholesale or chunk for RAG. When an AI agent > writes UI code that consumes this library, follow the rules below exactly. - Homepage / docs: https://tutranmvp.github.io/8bit-components/docs.html - Repository: https://github.com/TuTranMVP/8bit-components - Package: `8bit-nes` (npm) · license MIT - Structured manifest (exact fields): https://tutranmvp.github.io/8bit-components/components.json ## What it is A cross-framework design system with three layers, no build step required: 1. `tokens.css` — `:root` CSS custom properties (colors, spacing, type, shadows, motion) + 3 `@font-face`. The single source of truth for the look. 2. `components.css` — stateless class recipes (`.btn`, `.card`, `.input`, …) in `@layer components`. 3. `elements.js` — light-DOM Web Components (``) for the few things that hold state, plus helpers (`toast`, `grantXP`, `bleep`, `store`). It is dark-only, uses square 90° corners everywhere, and expresses depth with a hard offset shadow (never blur). ## Install ```bash pnpm add 8bit-nes # or straight from GitHub, no publish needed: pnpm add github:TuTranMVP/8bit-components ``` ```js // once, at app entry: import "8bit-nes/all.css"; // tokens + base + components import "8bit-nes"; // registers all web components ``` No bundler? Link the minified single-file build from a CDN: ```html ``` ## Framework setup (verified, copy-paste exact) Do these steps precisely to install into another repo. Import CSS + elements ONCE at the app entry (never per-component). - HTML / any framework, zero-build: use the CDN `` + ` ``` Tabs, and a toast: ```html

…

``` ```js import { toast } from "8bit-nes"; toast("Saved.", { accent: "good" }); ``` ## Custom-element events (all bubble) - `nes:change` — value changed on ``; detail `{ value }` or `{ files }`. - `nes:submit` — `` passed validation; detail `{ data, form }`. - `nes:invalid` — `` submit was blocked. - `nes:complete` — `` fully filled; detail `{ value }`. - `nes:answer` — `` answered; detail `{ correct, choice }`. - `nes:diff` — `` rendered a patch; detail `{ files, added, removed }`. - `nes:navigate` — `` navigated or reloaded; detail `{ url }`. - `nes:xp` / `nes:mute` — document-level buses for `` / ``. ## Concepts - Introduction: https://tutranmvp.github.io/8bit-components/docs.html#/intro - Installation: https://tutranmvp.github.io/8bit-components/docs.html#/install - Theming: https://tutranmvp.github.io/8bit-components/docs.html#/theming - Layout & rhythm: https://tutranmvp.github.io/8bit-components/docs.html#/layout - Colors: https://tutranmvp.github.io/8bit-components/docs.html#/colors ## Component reference (139 components) ## Element ### Button - selector: `.btn` (class) · category: Element - Primary action. Green (the primary accent) by default; set data-accent to recolor. Presses in on :active — the signature move. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/button ### Badge - selector: `.badge` (class) · category: Element - Static status marker. Not interactive — for state you can read at a glance. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/badge ### Chip - selector: `.chip` (class) · category: Element - Toggleable filter or tag. Interactive — presses in, fills with its accent when active. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/chip ### Card - selector: `.card` (class) · category: Element - Surface for grouped content. A left accent bar classifies it; hard border, hard shadow, square corners. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/card ### Avatar - selector: `.avatar` (class) · category: Element - User image or initials. Square by design so the hard shadow stays crisp; group them to overlap. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/avatar ### Kbd - selector: `.kbd` (class) · category: Element - Keyboard key hint. Inline, mono, inset — for shortcuts in prose. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/kbd ### Separator - selector: `.separator` (class) · category: Element - Divider between content. Solid or dashed; horizontal or vertical. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/separator ### Icon - selector: `` (element) · category: Element - Pixel icon set on a 16×16 grid. currentColor + 1em, so icons inherit text color/accent and scale with font-size. Vector — razor-sharp at any DPR (low-res & retina). Tree-shakeable named exports. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/icon ### Toolbar - selector: `.toolbar` (class) · category: Element - A row of actions that scrolls on a phone instead of reflowing under your thumb. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/toolbar ### Split view - selector: `` (element) · category: Element - Two panes, one divider you can drag, arrow or double-click. Stacks with dir="column". - docs: https://tutranmvp.github.io/8bit-components/docs.html#/split ## Form ### Input - selector: `.input` (class) · category: Form - Single-line text field. Recessed on the screen surface; focus flips the border to gold. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/input ### Textarea - selector: `.textarea` (class) · category: Form - Multi-line text. Vertically resizable, same recessed treatment as Input. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/textarea ### Select - selector: `.select` (class) · category: Form - Native select, restyled. Keeps the OS keyboard and mobile picker behaviour; gold chevron. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/select ### Checkbox - selector: `.checkbox` (class) · category: Form - Boolean toggle in a list. Square box with a pixel check when on. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/checkbox ### Radio - selector: `.radio` (class) · category: Form - One-of-many choice. Same square box, filled solid when selected. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/radio ### Switch - selector: `.switch` (class) · category: Form - On/off setting with immediate effect. Green (good) accent by default. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/switch ### Field - selector: `.field` (class) · category: Form - Label + control + hint/error wrapper. The .err modifier turns the whole field critical. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/field ### ColorPicker - selector: `.swatch` (class) · category: Form - Native color input, restyled as a square chip. The OS picker stays; only the swatch is themed. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/colorpicker ### InputDate - selector: `.input[type="date"]` (class) · category: Form - Native date input in the 8-bit shell. Keeps the OS calendar; the picker glyph is tinted to the primary. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/inputdate ### InputTime - selector: `.input[type="time"]` (class) · category: Form - Native time input, same shell as InputDate. OS clock picker, tinted glyph. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/inputtime ### CheckboxGroup - selector: `.control-group` (class) · category: Form - A

that groups related checkboxes under one legend. Add .row to lay them out horizontally. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/checkboxgroup ### RadioGroup - selector: `.control-group` (class) · category: Form - Same .control-group fieldset, holding radios that share a name (single choice). - docs: https://tutranmvp.github.io/8bit-components/docs.html#/radiogroup ### InputNumber - selector: `` (element) · category: Form - A − [n] + stepper over a native number input. wires the buttons; value clamps to min/max/step. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/inputnumber ### Switcher - selector: `` (element) · category: Form - Cycle a small option set with ◀ / ▶ — the arcade settings row. Perfect for a domain setting with a few mutually-exclusive choices (display mode, difficulty, theme). - docs: https://tutranmvp.github.io/8bit-components/docs.html#/switcher ### InputRating - selector: `` (element) · category: Form - Star picker. Click or arrow-key to set; add readonly for a display-only score. size=lg enlarges it. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/inputrating ### PinInput - selector: `` (element) · category: Form - One-time-code / PIN entry: N single-char cells that auto-advance, accept a full paste, and fire nes:complete. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/pininput ### InputTags - selector: `` (element) · category: Form - Type + Enter (or comma) to add a chip; × or Backspace removes. Value is the ordered tag list. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/inputtags ### FileUpload - selector: `` (element) · category: Form - Click-or-drop zone over a native file input. Lists chosen files with a remove button; supports multiple + accept. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/fileupload ### Listbox - selector: `` (element) · category: Form - An always-open selectable list with roving focus. Single by default; add multiple for many. Options via child JSON. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/listbox ### InputMenu - selector: `` (element) · category: Form - Free-text combobox: type to filter suggestions, or keep any typed value. Autocomplete without locking the input. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/inputmenu ### SelectMenu - selector: `` (element) · category: Form - Strict searchable single-select: a trigger shows the label; the popup adds a filter box; the value must be one of the options. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/selectmenu ### Form - selector: `` (element) · category: Form - A thin wrapper that runs native constraint validation, renders inline errors under each .field, and emits nes:submit with the data. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/form ### Range - selector: `.range` (class) · category: Form - Slider on a native . Recessed track, square accent thumb. Set data-accent to recolor. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/range ### Segmented control - selector: `.segment` (class) · category: Form - A row of connected buttons for a single choice — the pressed one fills with the accent. Great for a difficulty or view switch. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/segment ### Number stepper - selector: `.stepper` (class) · category: Form - A − [n] + control around a native number input. Wire the buttons to step the value. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/stepper ## Feedback ### Alert - selector: `.callout` (class) · category: Feedback - Inline message with a semantic tone. Four shades map to meaning, not decoration. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/alert ### Progress - selector: `.pbar` (class) · category: Feedback - Determinate bar. Fills with a smooth ease so progress glides — striped so the amount reads at a glance. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/progress ### Skeleton - selector: `.skeleton` (class) · category: Feedback - Loading placeholder. The shimmer ticks in steps rather than gliding. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/skeleton ### Toast - selector: `toast()` (helper) · category: Feedback - Transient confirmation. Fires from JS, auto-dismisses, and is announced politely. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/toast ### Spinner - selector: `.spinner` (class) · category: Feedback - A square loader whose lit edges spin smoothly — a loader with no curve. Three sizes; accent-ready. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/spinner ### Meter - selector: `.meter` (class) · category: Feedback - A discrete segmented gauge — HP / energy in blocks. Add .on to filled cells; good/warn/crit read as health states. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/meter ### Empty state - selector: `.empty` (class) · category: Feedback - The "no data" / "game over" panel. Square dashed edge, centered mono copy, and always an action out. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/empty ### Callout - selector: `.callout` (class) · category: Feedback - An inline aside inside a document — distinct from the page-level .banner. Seven kinds, each with its own accent and marker. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/callout ### Banner - selector: `.banner` (class) · category: Feedback - A full-width, page-level notice — distinct from the inline .callout box. Accent-tinted, optional dismiss. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/banner ## Navigation ### Tabs - selector: `` (element) · category: Navigation - Switch between panels. Roving focus and arrow keys, built from [data-label] children. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/tabs ### Breadcrumb - selector: `.breadcrumb` (class) · category: Navigation - Path to the current page. Mono, chevron-separated, last item current. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/breadcrumb ### Pagination - selector: `.pagination` (class) · category: Navigation - Page through a list. The current page fills with the primary accent; ends disable. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/pagination ### Steps - selector: `.steps` (class) · category: Navigation - Stage progression. Mark cleared stages .done and the active one aria-current — reads as NES "STAGE 1 · 2 · 3". - docs: https://tutranmvp.github.io/8bit-components/docs.html#/steps ### Nav list - selector: `.navlist` (class) · category: Navigation - Vertical sidebar navigation for app shells. Mark the current item with aria-current; recolor with data-accent. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/navlist ### Map of Content - selector: `` (element) · category: Navigation - The live “on this page” index: it builds itself from your headings, follows the scroll, and hides when there is nothing worth indexing. Mobile-first — a collapsible bar naming the current section, an open rail when there's room. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/toc ## Overlay ### Popover - selector: `` (element) · category: Overlay - An anchored panel in the top layer, so no ancestor's overflow can clip it. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/popover ### Confirm - selector: `confirmDialog()` (helper) · category: Overlay - A destructive confirm as a promise. Focus starts on Cancel, so Enter is never the answer you regret. - docs: https://tutranmvp.github.io/8bit-components/docs.html#/confirm ### Modal - selector: `