All notable changes to BareDOM will be documented in this file.
Three new framework adapters ship alongside the existing React and Angular adapters: Vue 3, Svelte 5, and SolidJS are now officially supported. BareDOM users of every major JS framework can now install a typed wrapper package that adds framework-idiomatic props, events, and ref handling on top of the same underlying web components.
The core library itself is functionally unchanged from 3.2.0 — dist/ is byte-identical. This release ships an updated README.md (and an additional CHANGELOG.md entry) so the npm-registry view reflects the now-complete five-adapter ecosystem.
@vanelsas/baredom-vue — Vue 3.4+ wrapper components. v-model bridging via the shared form-control-metadata single-source-of-truth, typed events, ref forwarding through expose(). Install: npm install @vanelsas/baredom-vue.@vanelsas/baredom-svelte — Svelte 5+ wrapper components. $bindable() for form controls, $effect() for event binding, per-component .svelte + .ts shim files for named exports. Install: npm install @vanelsas/baredom-svelte.@vanelsas/baredom-solid — Solid 1.9+ wrapper components. Function components with splitProps, onMount, onCleanup, createEffect. JSX is preserved for the consumer's Solid bundler. Install: npm install @vanelsas/baredom-solid.All three adapters auto-generate one typed component per BareDOM custom element (103 components total). Per-component bundles, controlled-input support via Vue v-model / Svelte $bindable() / Solid signals, typed CustomEvent payloads — all driven by the same Custom Elements Manifest that already powered the React and Angular adapters.
README.md — Restructured for the five-adapter era. New "Framework adapters" comparison table. "Why web components?" and "Design Principles" sections merged into a single "Why BareDOM?". Theming section trimmed (full guide lives in docs/x-theme.md). Quick-start replaced with a working HTML example. New top-level "Time-Travel Debugger" section surfacing x-trace-history — previously buried inside a value-prop bullet.docs/components.md — Full per-component catalogue (103 components across 11 categories) split out from the README. The previous README listed only 58 of the 103 components; the kinetics, organic, effects, and scroll clusters are now properly catalogued.scripts/codegen_shared.bb (new) — Shared codegen module housing resolve-event-name, prop-type->ts, and event-detail->ts, previously copy-pasted across all four adapter generators (~270 lines of duplication eliminated). React's controlled-components map now derives from scripts/form-control-metadata.bb, closing a silent drift trap for new form controls.CLAUDE.md — Registration checklist for new components now requires updating both docs/components.md and the README.md Components overview..github/workflows/release-solid.yml matching the per-adapter release pattern. docs/RELEASING.md extended to cover the per-adapter release process and first-publish NPM_TOKEN permission considerations.@vanelsas/baredom-angular — x-select CVA used the wrong change-event name. Shipped via PR #242.@vanelsas/baredom-vue — Vue-reserved prop names (key, ref, is) were silently dropped by Vue. Reserved props are now renamed in the generated wrapper (e.g. keyAttr) and the underlying attribute is written imperatively. Shipped via PR #243.@vanelsas/baredom-{react,angular,vue,svelte,solid}. See docs/RELEASING.md for the per-adapter release process.react@2.1.0, angular@2.7.0, vue@0.1.0, svelte@0.1.0, solid@0.1.0.Five new components, an element-highlight feature for the x-trace-history dev tool, two notable bug fixes, and an internal naming-consistency cleanup.
start and an end panel along a horizontal or vertical axis. The divider position is a percentage held in the position attribute — the single source of truth — so layouts are fully serialisable and the component stays stateless. Nest panes for three or more panels.x-date-picker. Supports single-date and date-range selection, localized weekday/month names, configurable first-day-of-week, a month/year quick-jump header, and an optional ISO week-number column. Dates are ISO 8601 strings.[start, end] sub-range within [min, max].readonly mode displays an average rating such as 3.5.x-trace-history element highlight — Selecting a record in the dock now outlines the live web component that emitted it with a magenta accent overlay. The outline tracks the target through scroll/resize, smoothly scrolls offscreen targets into view (respecting prefers-reduced-motion), and clears when selection clears, when the dock unmounts, or when the originating element has been disconnected since the record was emitted. document-tag records produce no outline. The highlight machinery emits zero trace records, and the dock remains opt-in via ?baredom-trace-history — never shipped in production.<x-card interactive> never responded to clicks. connected!'s install guard conflated refs-init with listener-install; the install epoch now lives on its own k-installed field, gated independently of refs init.x-modal-toggle was dispatched on every connect because the open-transition epoch started at nil and always differed from the initial open state. The toggle decision is now folded into the main render-pipeline epoch and gated on (some? old-m).baredom.utils.dates namespace, consumed by x-calendar and x-date-picker.derive-state to normalize across 23 component model layers and their tests, so every component uses the same name. No behaviour change.x-trace-history highlight refactor — apply-highlight! decomposed into a phase-list dispatcher per the render-orchestrator pattern; reposition! now clears the stale cached component id when the target has been disconnected; the reduced-motion probe caches the live MediaQueryList instead of re-invoking matchMedia on every show.@vanelsas/baredom-angular dev dependencies bumped from Angular 17 to 21; custom-elements.json refreshed.check_method_api.bb taught about the define-method! helper introduced by the x-modal refactor, so wrapped method installations are no longer flagged as "declared but not installed".A full-library audit cycle against the x-icon golden sample (PRs #222–#231). All 99 components now conform to the Hickey-level architecture standard documented in CLAUDE.md. No public API or behavioural changes.
x-trace-history recorder noise reduction — rAF hot paths in x-kinetic-canvas, x-ripple-effect, x-scroll-parallax, x-scroll-stack, and x-particle-button now consistently route per-frame writes (k-raf, k-last-frame, k-time animation bookkeeping; per-frame attribute updates inside animate! loops) through du/setv-untraced! / du/set-attr-untraced!. The recorder no longer drowns in 60×/sec writes that carry no diagnostic value.property-api metadata consistency — :reflects-attribute entries added across x-progress-circle, x-stepper, x-splash, x-table-cell, x-table-row, x-theme, x-timeline, x-timeline-item, and x-toaster. The React and Angular code generators (generate_react.bb / generate_angular.bb) and metadata.bb now see a complete property-to-attribute contract for every component.apply-model! / init-dom! / make-shadow! / create-shadow! / start-transition! / build-refs! functions split into named phase helpers across 10 components (x-button, x-dropdown, x-navbar, x-toast, x-select, x-kinetic-font, x-kinetic-typography, x-morph-stack, x-avatar-group, x-combobox).du-discipline sweep — cleared 41 gobj/get|set calls on host elements in x-sidebar plus stray hits in x-radio. Broadened scripts/check_du_discipline.bb twice (to catch the instance host-variable name and the multi-line (defn- make-el [tag] …) shim) so the patterns can't regress in CI.update-from-attrs! and adopted the canonical [el m] apply-model! signature. x-card's event-schema switched to the canonical {event-symbol {:detail {…}}} shape. x-radio decomposed try-select! into named phase helpers.variant, size, and label are now exposed as JS properties. They were observed attributes without corresponding property installations, so el.variant = "primary" was a silent no-op.read-model now routes through model/normalize. It was reconstructing the view-model inline and duplicating the duration-ms parsing/clamping logic the model layer already provides.(defn- make-el [tag] …) shim that the CI regex was missing; 13 call sites inlined to .createElement js/document directly.@vanelsas/baredom/x-trace-history) activated by ?baredom-trace-history URL param or window.BAREDOM_TRACE_HISTORY = true — zero overhead when off. TypeScript declarations (TraceRecord discriminated union + window.BareDOM.traceHistory console API) included. See docs/x-trace-history.md and docs/x-trace-history-schema.md.public/viewer.html deployed alongside the demo site for sharing recorded traces. Drag-drop a .trace.json file or pass ?trace=<base64> to load a trace into the dock.adapters/react/test-app/) and Angular (adapters/angular/test-app/) test-apps now exercise the trace-history dock end-to-end, with dev-tool guidance added to each adapter's README and main doc.baredom.utils.dom and baredom.utils.component expose *trace-hook* / *lifecycle-hook* extension atoms gating instrumentation of every CustomEvent dispatch, attribute mutation, instance-field write, and lifecycle callback. One nil-check cost when no recorder is installed.<option selected> default no longer gets stomped on render when the host has no value attribute. An explicit value attribute still overrides the slotted default.bare-demo/public/js/, bare-html/js/, etc.), the Angular CLI cache, and the clj-kondo cache are now correctly gitignored. Adapter test-app package-lock.json files are tracked for reproducible smoke-test installs.baredom.registry is now the single source of truth for the full component set; baredom.core/start! and baredom.exports.all/init both consume the same vector.baredom.utils.overlay/attach-listener!, eliminating drift between add/remove sites.x-color-picker into the model layer; coordinate math moved out of x-chart into the model layer; series-point computation in x-chart is now pure.render! (and adjacent monolithic functions) decomposed into named phase helpers in: x-chart, x-button, x-combobox, x-color-picker, x-scroll-timeline, x-particle-button. Each render! now reads as a phase list (render-orchestrator pattern); long shadow builders split per the shadow-builders pattern; x-color-picker listener wiring moved to a single listener-spec table.x-proximity-list settling loop — Replaced the JS-object settling flag with a loop/recur driver, removing mutable instance state.x-date-picker — Force-close moved out of render! (audit Phase 5).du/* wrappers across the remaining call sites (audit Wave 4c).baredom.utils.* contracts; normalize-prop-val extracted as a reusable helper.variant change; the cached palette is invalidated when variant attributes flip.x-i18n-provider holds the dictionary and active locale; x-i18n renders a translated string for a given key with parameter interpolation.change-request event.event-schema defs added to every model, lifecycle callbacks normalized to !-suffix defn- form, ^js hints filled in for Closure Advanced safety, event dispatch routed through du/dispatch! / du/dispatch-cancelable!, and property accessors migrated to du/define-*-prop! helpers. 36 components now register properties via the one-line data-driven du/install-properties! (Tier 0). Net several thousand lines removed. No public API changes.CLAUDE.md and docs/REGISTRATION.md so contributors pick the simplest registration tier per component.src/ changes.attributeChangedCallback recursion.d attribute is now sanitized via mu/sanitize-svg-path-d.:default in install-properties! for string props.component/register!, eliminating manual element-class boilerplate. Shared utility modules (baredom.utils.dom, baredom.utils.model, baredom.utils.component) drive lifecycle wiring, property accessors, event dispatch, and attribute helpers. Net reduction of ~2 285 lines.classList TypeError caused by dom_test cleanup removing the cljs-test-display root element. Suppressed x-image missing-alt warnings in test fixtures.change-request event before applying user-initiated value changes. Call preventDefault() to block the update (enables controlled component patterns in framework adapters). Components: x-slider, x-text-area, x-select, x-combobox, x-currency-field, x-tabs, x-pagination.pointer-events: none) to document-level listeners.touch-action: manipulation and -webkit-tap-highlight-color: transparent to the internal button element (reset by all: unset).x-switch-change, x-form-field-input, select-change, press) instead of native DOM events.^js type hint to fix Closure Advanced compilation warning."input" to "form")..d.ts type declarations auto-generated from component model metadata. Per-component interfaces with typed properties, methods, and addEventListener overloads. Custom Elements Manifest (custom-elements.json) for IDE support.?baredom-debug URL param or window.BAREDOM_DEBUG = true. Shows dashed outlines, tag labels on hover, and a floating inspection panel with live attribute/property editing and structured console logging. Excluded from the production :lib build..d.ts files. Property names like max-items and event detail keys like press-x are now correctly output as camelCase (maxItems, pressX). Affected components: x-breadcrumbs, x-context-menu, x-pagination, x-particle-button.feGaussianBlur stdDeviation attribute receiving a CSS var() value instead of a number. SVG filter attributes don't support CSS custom properties.arrow, line, curve, none). Compound pattern with x-welcome-tour-step child elements for declarative step definitions. 8-placement positioning with automatic flip, smooth step transitions, focus trap, keyboard navigation, and full x-theme integration.accept attribute, size limits, and multi-file support.dist/integrity.json containing Subresource Integrity hashes for all ESM output files.matches-accept? now returns a boolean instead of nil for non-matching types.height:100% + overflow:hidden on body) with natural document scrolling using min-height:100dvh.portal boolean attribute that renders the panel in a document-level overlay layer, escaping CSS stacking contexts (sticky navbars with backdrop-filter, modals, etc.). Content nodes are moved (not cloned) to preserve event listeners and returned to the host on close.ensure-overlay-root!, make-layer!, remove-layer!).baredom.utils.overlay module (no behavior change).<option> children. Case-insensitive substring matching with highlighted results, keyboard navigation (Arrow Up/Down, Enter, Escape, Home, End), clear button, WAI-ARIA combobox pattern (role=combobox, aria-activedescendant, role=listbox/option).x-skeleton children to synchronize animation timing and generate common skeleton layouts from a preset attribute (card, list-item, paragraph, table-row, profile). Uses inherited --x-skeleton-delay CSS custom property for phase alignment.animation-delay: var(--x-skeleton-delay, 0s) to pulse and wave CSS rules (non-breaking; enables synchronization when used inside x-skeleton-group).<img> in shadow DOM with a skeleton shimmer placeholder, fade-in on load, optional ratio attribute to reserve space and prevent layout shift, a default or slotted error fallback, and enforced alt hygiene (decorative mode available). Attributes: src, alt, decorative, ratio, fit, position, loading. Events: x-image-load, x-image-error. Read-only properties: naturalWidth, naturalHeight, state.sm/md/lg/xl tokens or a numeric pixel value), theme-aware colour via currentColor inheritance or the color attribute (inherit/primary/secondary/tertiary/success/warning/danger/muted), and accessibility (decorative by default; label attribute flips on role="img" + aria-label). Consumers provide the <svg> in the default slot using fill="currentColor" / stroke="currentColor" for colour propagation.--x-navbar-radius defaults to 0 (was 1rem) and the full four-sided border has been replaced with a single 1px bottom separator. Variant overrides (subtle, inverted, transparent) updated to target border-bottom-color accordingly. The rounded card look remains reachable via style="--x-navbar-radius: 1rem" — no public API changes. Visual regression for consumers who relied on the previous default; the escape hatch is one line.border-bottom lines now connect cleanly across columns with uneven intrinsic content heights (e.g. a header cell with a sort button next to a plain label cell). Inner [part=cell] wrapper now fills the host's row-stretched height so the border sits at the row's bottom edge.<button>, <select>, <input type="text|number|...">, <input type="checkbox">, status pill, tag chip, and <hr> in the ~80 demo pages has been swapped to the matching library component (<x-button>, <x-select>, <x-form-field>, <x-switch> / <x-checkbox>, <x-badge>, <x-chip>, <x-divider>).<h2> and page title <h1> headings swapped to <x-typography variant="overline"|"h1">.demo/demo-theme.js re-dispatch select-change / x-switch-change / x-checkbox-change / x-form-field-input / x-form-field-change as native change / input events so existing demo handlers keep working.demo/demo-responsive.css carries shared sizing/layout overrides for the dogfooded controls so they match each demo's local visual rhythm.button[data-stack] selector silently skipping x-button, x-progress-circle slider max not syncing with the max field, theme-picker bar z-index covering overlay components, and a handful of demos with leftover style="" / class="" from their native-element days.baredom.utils.dom, baredom.utils.model) so components no longer reimplement attribute parsing, instance-field access, and security sanitiserspublic/index.html component gallery now consumes x-theme design tokensdisabled attribute now correctly suspends animation and interaction100dvh / 100%) applied where 100vh / 100vw were causing overflowregisterPreset() JS API for custom themes with partial preset mergingvar(--x-token, fallback) pattern — fully backwards compatible, components render identically without an <x-theme> wrapper--x-color-bg for backgroundsdemo-responsive.css re-maps demo variables to theme tokens when inside <x-theme>.color property returns null when no color attribute is set, allowing the CSS theme token to take effect (visual default unchanged)Six new components:
Six new components:
docs/javascript-guide.md) for npm/ESM setup, event handling, theming, and framework integrationNine new components:
Stable release — promoted from 1.0.0-rc.4 with no code changes.
Release candidate — all components audited and stable.
app to baredom to match published package nameInitial alpha release of BareDome — 54 native Web Components built with ClojureScript and compiled to zero-dependency ESM modules.
DOM = f(attributes, properties)@media (prefers-color-scheme: dark)@media (prefers-reduced-motion: reduce)Can you improve this documentation?Edit on GitHub
cljdoc builds & hosts documentation for Clojure/Script libraries
| Ctrl+k | Jump to recent docs |
| ← | Move to previous article |
| → | Move to next article |
| Ctrl+/ | Jump to the search field |