@byteion/js

Behavior-only runtime for Byteion's interactive components. Plain vanilla JavaScript — no React, no Vue, no framework. Wires up modals, dropdowns, popovers, tabs, accordions, tooltips, drawers, and toasts in any HTML page that uses Byteion markup.

If you use @byteion/react or @byteion/vue, you do not need this package — those wrappers re-implement the behaviors as hooks / composables. Install this when you're driving the design system from server-rendered HTML (Laravel, Rails, Django, plain HTML, etc.).

Install

npm install @byteion/js @byteion/core

How it works

1. You write markup with data-bi-* attributes (see @byteion/core/src/components/<name>/index.html for canonical examples).
2. Import this package once.
3. On DOMContentLoaded, every interactive widget is auto-initialized.
4. A MutationObserver watches the DOM and re-initializes anything inserted later (HTMX, Turbo, Alpine, jQuery — all welcome).

<!-- in your HTML -->
<button data-bi-modal-toggle="#my-modal">Open</button>
<div id="my-modal" data-bi-modal>
  <div data-bi-modal-content>
    <h2>Hello</h2>
    <button data-bi-modal-hide>Close</button>
  </div>
</div>

<script type="module">
  import '@byteion/js';
  // That's it. Byteion auto-initializes on load.
</script>

Usage

Auto-init (default)

import '@byteion/js';

Side effect: registers window.ByteionCore and runs init(document) once the DOM is ready. The mutation observer keeps watching document.body for dynamically inserted widgets.

Explicit control

import ByteionCore from '@byteion/js';

ByteionCore.init();                 // re-scan the whole document
ByteionCore.init(myContainer);      // scan a subtree only
ByteionCore.destroy();              // tear everything down
ByteionCore.observerEnabled = false; // stop watching for new nodes

Per-module imports (smaller bundles)

import Modal    from '@byteion/js/modal';
import Dropdown from '@byteion/js/dropdown';
import Popover  from '@byteion/js/popover';
import Tabs     from '@byteion/js/tabs';
import Accordion from '@byteion/js/accordion';
import Tooltip  from '@byteion/js/tooltip';
import Drawer   from '@byteion/js/drawer';
import Toast    from '@byteion/js/toast';

Modal.init(document);
Modal.show('#my-modal');
Modal.hide('#my-modal');

Low-level utilities

import { trapFocus }          from '@byteion/js/focus-trap';
import { onClickOutside }     from '@byteion/js/click-outside';
import { handleArrowKeys }    from '@byteion/js/keyboard-navigation';
import { setAttributes }      from '@byteion/js/aria-helpers';
import { findFocusableInside } from '@byteion/js/dom-helpers';

Universal dismiss contract

Any element with data-bi-dismiss="<css-selector>" removes the closest matching ancestor on click. Used to wire up "close" buttons in alerts and toasts without inline onclick handlers:

<div class="alert">
  Heads up!
  <button data-bi-dismiss=".alert" aria-label="Dismiss">×</button>
</div>

SSR safety

Every module is safe to import in a Node / SSR environment. Each init() is gated by a typeof document === 'undefined' check and no-ops outside the browser. You can import this package in Next.js, Remix, Nuxt, SvelteKit, etc., without window is not defined errors.

Peer dependency

This package expects markup that matches @byteion/core's reference HTML. Versions are kept in lockstep — install matching majors:

{
  "peerDependencies": {
    "@byteion/core": "^0.1.0"
  }
}

License

MIT © Byteion