Skip to content
7 Seventh UI VanillaJS Runtime playground

Legacy browser setup

Install With A Script Tag

Use the browser bundle when a legacy page cannot import ESM modules or run a modern bundler. The bundle exposes one global API: window.SeventhUI.

Installation Order

Load the CSS package first, render normal Seventh UI markup, then load and initialize the VanillaJS bundle near the end of the page.

<link rel="stylesheet" href="/vendor/@seventh-ui/css/seventh-ui.css">

<button class="sui-btn sui-btn--primary" data-sui-trigger="dialog" data-sui-target="account-dialog">
  Open account
</button>

<section class="sui-dialog" id="account-dialog" data-sui-dialog hidden>
  <button type="button" data-sui-dialog-close>Close</button>
</section>

<script src="/vendor/@seventh-ui/vanillajs/dist/seventh-ui.js"></script>
<script>
  var seventhUiApp = window.SeventhUI.init(document);
</script>

Artifact Paths

Copy the distributed files into the legacy application's vendor/static directory during its existing build or deploy process.

Artifact Use Typical legacy path
@seventh-ui/css Visual classes, tokens, icons, and assets. /vendor/@seventh-ui/css/seventh-ui.css
@seventh-ui/vanillajs/dist/seventh-ui.js Browser runtime bundle with window.SeventhUI. /vendor/@seventh-ui/vanillajs/dist/seventh-ui.js

Initialization Scope

Prefer the smallest stable container instead of always initializing the whole document. This limits listeners and avoids touching unrelated legacy markup.

<main id="account-settings">
  <!-- Seventh UI markup inside this area -->
</main>

<script>
  var root = document.getElementById("account-settings");
  var app = window.SeventhUI.init(root);

  // Call when the legacy page replaces this DOM subtree.
  // app.destroy();
</script>

Integration Contract

The bundle is designed for progressive enhancement. Pages remain normal HTML and CSS before JavaScript initializes.

Global

window.SeventhUI

The browser bundle publishes one global object. It does not expose internal helpers as separate globals.

DOM hooks

data-sui-*

Only documented hooks are initialized. Existing classes and semantic markup stay owned by the page and CSS package.

Events

sui:*

Runtime lifecycle events use the sui: prefix and bubble from the enhanced component root.

State

hidden / aria-*

Controllers synchronize accessibility and state attributes without requiring a framework runtime.

Published CSS Contract

Seventh UI VanillaJS consumes the npm package contract exported by @seventh-ui/css/contracts/runtime-integration.json. The installed file lives under node_modules/@seventh-ui/css/dist/contracts/runtime-integration.json.

Contract area Owner VanillaJS responsibility
Load order @seventh-ui/css + application Initialize only after CSS and markup are present: CSS, markup, runtime.
CSS artifacts @seventh-ui/css Do not embed CSS by default. Applications choose seventh-ui.css, component CSS, icons, and manifests.
.sui-* classes @seventh-ui/css Preserve public classes and never rename them as part of behavior.
data-sui-* hooks Runtime packages Use hooks only for discovery/options/behavior, not as the primary visual styling contract.
Shared state CSS + runtime packages Synchronize hidden, native state, aria-*, and data-sui-state.
Behavior requirements Runtime packages Provide cleanup, accessible keyboard/focus/ARIA behavior, and enhancement of existing markup.

Component Behavior Matrix

The CSS contract intentionally stays framework-agnostic. Component-level behavior is defined by this runtime's specs and can be reused by future @seventh-ui/reactjs, @seventh-ui/vuejs, @seventh-ui/angularjs, and other bundles.

Group Components Runtime expectation
CSS-first / native Button, Input, Checkbox, Radio, Switch, Divider, Tag, Breadcrumb, Header, Grid, Icons, Illustrations. No controller unless explicit data-sui-* hooks are added for progressive enhancement.
Required runtime Dialog, Tabs, Menu, Tooltip, Toast, Navigation drawer/mobile behavior, Data Table. Implemented in this package with events, cleanup, keyboard/focus behavior, ARIA, data modeling, and shared state synchronization.
Optional enhancement Segmented Button, Notification dismissal, Slider helpers, Stepper helpers, People Picker/Multi Select helpers. May be added later as progressive helpers without redefining the CSS visual contract.

Selectors, State, And Events

The npm CSS contract defines selector and state boundaries. Component events are defined by this VanillaJS runtime and documented on each component page.

Surface Expected contract Examples in this bundle
Visual selectors .sui-* classes are public CSS-owned selectors. .sui-dialog, .sui-tabs, .sui-menu, .sui-toast, .sui-navigation.
Runtime selectors data-sui-* hooks are reserved for runtime discovery and behavior. data-sui-dialog, data-sui-tab, data-sui-menu, data-sui-tooltip, data-sui-toast, data-sui-navigation.
Shared state hidden, native state, aria-*, and data-sui-state. Open/closed/selected state, trigger expansion, panel visibility, focus restoration, and live-region behavior.
Runtime events Defined by this package as bubbling sui:* DOM events. sui:dialog:open, sui:tabs:change, sui:menu:select, sui:tooltip:show, sui:toast:dismiss, sui:navigation:close.

Legacy Safety Rules

Follow these rules when adding the bundle to pages that already have other scripts or UI behavior.

Rule Reason
Load one copy of seventh-ui.js. Multiple copies do not share initialization state and can duplicate listeners on the same DOM.
Check for an existing window.SeventhUI global before adoption. The current bundle owns that global name and does not provide noConflict() yet.
Use scoped roots for partial pages, tabs, modals, or server-rendered fragments. Scoped initialization lowers the chance of touching unrelated legacy UI.
Call app.destroy() before replacing initialized DOM. Cleanup removes listeners, focus traps, outside-pointer handlers, timers, and observers owned by that app handle.
Do not bind separate legacy behavior to the same data-sui-* hooks. Those hooks are the runtime contract for Seventh UI VanillaJS controllers.

Browser Compatibility

The browser bundle is an IIFE script, but it is not transpiled to ES5. Compatibility is based on the syntax and DOM APIs preserved in dist/seventh-ui.js.

Browser Minimum baseline Status Notes
Chrome 80+ Supported Supports the modern syntax used by the bundle, including optional chaining and nullish coalescing.
Microsoft Edge 80+ Supported Chromium-based Edge baseline. Legacy EdgeHTML is not a target for this bundle.
Firefox 78+ Supported Use the current ESR or newer for enterprise-managed environments.
Safari 13.1+ Supported Older Safari versions cannot parse every syntax feature preserved in the bundle.
iOS Safari 13.4+ Supported Use the matching iOS Safari baseline for mobile browser QA.
Android Chrome / WebView 80+ Supported Validate embedded WebView versions separately when the host app controls the WebView runtime.
Internet Explorer 11 Not supported IE cannot parse the modern JavaScript syntax in the distributed browser bundle.

Required Platform Features

If a consumer needs older browsers than the table above, they need a separately transpiled legacy build and polyfill policy.

let / const Arrow functions Template literals Optional chaining Nullish coalescing Map, Set, WeakMap CustomEvent PointerEvent MutationObserver matchMedia querySelectorAll Element.matches