Troubleshooting

Styles or behavior missing

1. Check the network panel: CSS and JavaScript should return successful responses.
2. Use CSS and JavaScript from the same pinned release. The repository does not publish an npm package.
3. Check that classes start with focus-. Load application overrides after the library.
4. Interactive controls need JavaScript; styling alone does not initialize them.

Dynamically inserted content

Call FocusUI.init() after inserting declarative controls. Searchbar, Tables and TOC require explicit initialization. Keep the returned initialization API and call destroy before removing mounted components. Check console warnings for missing selectors.

const table = FocusUI.Tables.init('#projects')
// Before removing the table:
table?.destroy()

Dialogs and tabs

A dialog uses .focus-modal-overlay around .focus-modal, with body/footer sections inside. Open the modal element, not an invented focus-modal-content wrapper. Tab buttons and panels match through data-tab; the value is not necessarily an HTML ID.

Copy button fails

Clipboard access depends on browser permissions and a secure context. Try localhost or HTTPS and inspect permission errors. A copy failure should not prevent reading or manually selecting the code.

Old files after an update

Inspect the versioned URL and response cache headers. Use immutable version paths for production. Replace downloaded assets together and change their versioned path; avoid year-long immutable caching for files you overwrite in place.