# NoJS Elements -- Technical Specification > **Version:** 1.0.0 | **Date:** 2026-04-02 | **Status:** Approved > **Package:** `@erickxavier/nojs-elements` (currently v1.11.0) > **Scope:** 10 new UI element modules added to the existing plugin --- ## Table of Contents 1. [Executive Summary](#1-executive-summary) 2. [Architecture Overview](#2-architecture-overview) 3. [Shared Infrastructure](#3-shared-infrastructure) 4. [Implementation Phases](#4-implementation-phases) 5. [Phase 1 -- Foundation (Popover-based)](#5-phase-1----foundation-popover-based) 6. [Phase 2 -- Layout Components](#6-phase-2----layout-components) 7. [Phase 3 -- Data & Navigation](#7-phase-3----data--navigation) 8. [Phase 4 -- Advanced Composition](#8-phase-4----advanced-composition) 9. [Plugin Entry Point Changes](#9-plugin-entry-point-changes) 10. [Test Strategy](#10-test-strategy) 11. [Bundle Size Impact](#11-bundle-size-impact) 12. [Risks & Mitigations](#12-risks--mitigations) --- ## 1. Executive Summary This spec defines the implementation plan for 10 UI element modules in the `nojs-elements` plugin. Each module follows the established DnD pattern: self-contained directory with barrel export, shared state, injected styles, and one or more NoJS directive registrations. All modules are zero-dependency, rely on native browser APIs (Popover API, CSS Sticky, Flexbox), and provide full ARIA accessibility with keyboard navigation. --- ## 2. Architecture Overview ### 2.1 Module Structure (Canonical) Every element module follows the DnD reference architecture: ``` src// index.js # barrel: register(NoJS, options?) + cleanup() state.js # module-scoped shared state (plain objects, Maps, Sets) styles.js # _injectStyles() -- once-only CSS injection .js # register(NoJS) -- one file per directive helpers.js # (optional) shared pure functions ``` ### 2.2 NoJS Plugin API Surface All modules use only these documented APIs: | API | Purpose | |-----|---------| | `NoJS.directive(name, { priority, init(el, name, expr) })` | Register a custom attribute directive | | `NoJS.findContext(el)` | Walk DOM upward to find nearest reactive context | | `NoJS.evaluate(expr, ctx)` | Evaluate an expression string against a context | | `NoJS._execStatement(expr, ctx, vars)` | Execute a statement expression with injected local variables | | `NoJS._onDispose(fn)` | Register a cleanup callback for the current directive lifecycle | | `NoJS._warn(msg)` | Log a warning to the console with NoJS prefix | | `NoJS.global(name, value)` | Register a global function/value accessible from any expression | ### 2.3 CSS Conventions - **Class prefix:** `.nojs-*` (e.g., `.nojs-tooltip`, `.nojs-modal-backdrop`) - **Style tag:** `