@vanelsas/baredom 1.3.0 → 2.0.0

package/CHANGELOG.md

@@ -1,6 +1,42 @@
 # Changelog
 
-All notable changes to BareDome will be documented in this file.
+All notable changes to BareDOM will be documented in this file.
+
+## [2.0.0] - 2026-04-10
+
+### Added
+
+- **x-theme** — Centralised theming component with 33 design tokens, 8 built-in presets (default, ocean, forest, sunset, neo-brutalist, aurora, mono-ai, warm-mineral), and `registerPreset()` JS API for custom themes with partial preset merging
+- Theme preset picker on all 79 demo pages (desktop buttons + mobile dropdown, persists via localStorage)
+- Theming section in README.md
+- Theming guidelines in CLAUDE.md
+
+### Changed
+
+- All 80 components now consume x-theme design tokens via `var(--x-token, fallback)` pattern — fully backwards compatible, components render identically without an `<x-theme>` wrapper
+- Overlay components (modal, drawer, menu, popover, dropdown, toast, command-palette, context-menu, cancel-dialogue) use opaque `--x-color-bg` for backgrounds
+- `demo-responsive.css` re-maps demo variables to theme tokens when inside `<x-theme>`
+- Demo pages use theme-aware CSS variables instead of hardcoded colours
+
+### Fixed
+
+- x-liquid-dock: `.color` property returns `null` when no `color` attribute is set, allowing the CSS theme token to take effect (visual default unchanged)
+
+## [1.4.0] - 2026-04-09
+
+### Added
+
+Six new components:
+
+- **Effects** — x-liquid-glass, x-soft-body, x-liquid-dock, x-liquid-fill
+- **Typography** — x-kinetic-font
+- **Layout** — x-morph-stack (with variant presets and multi-element goo merge demo)
+
+### Changed
+
+- Demo index: style family filtering
+- Demo index components sorted alphabetically
+- README updates
 
 ## [1.3.0] - 2026-04-07
 

package/README.md

@@ -1,5 +1,13 @@
 # BareDOM
 
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="public/assets/baredom_darkmode.svg">
+    <source media="(prefers-color-scheme: light)" srcset="public/assets/baredom_lightmode.svg">
+    <img alt="Project Logo" src="public/assets/baredom_lightmode.svg" width="200">
+  </picture>
+</p>
+
 **Native web components. Zero runtime. No framework required.**
 
 [![npm version](https://img.shields.io/npm/v/%40vanelsas%2Fbaredom.svg)](https://www.npmjs.com/package/@vanelsas/baredom)
@@ -11,7 +19,7 @@
 
 ## What is BareDOM?
 
-BareDOM is a library of more than 70 UI components built entirely on web standards — Custom Elements v1, Shadow DOM, and ES modules. There is no framework runtime, no virtual DOM, and no JavaScript framework peer dependency. Every component is a native HTML element that you register once and use anywhere.
+BareDOM is a library of 80 UI components built entirely on web standards — Custom Elements v1, Shadow DOM, and ES modules. There is no framework runtime, no virtual DOM, and no JavaScript framework peer dependency. Every component is a native HTML element that you register once and use anywhere.
 
 The core rendering model is deliberately simple:
 
@@ -25,7 +33,7 @@ BareDOM is authored in ClojureScript and compiled to optimised, minified ES modu
 
 BareDOM has been created using Claude Code. The CLAUDE.md file is added to the repository for your convenience.
 
-All web components—including new, modern, and exciting ones such as x-ripple-effect, x-scroll-parallax, x-scroll-story, x-scroll-timeline, x-kinetic-typography, x-organic-shape, x-gaussian-blur, x-neural-glow, x-metaball-cursor, and x-organic-progress—can be seen [here](https://avanelsas.github.io/baredom/)
+All web components, including new, modern, and exciting ones such as x-morph-stack, x-liquid-fill, x-liquid-glass, x=soft-body, x-ripple-effect, x-scroll-parallax, x-scroll-story, x-scroll-timeline, x-kinetic-font, x-kinetic-typography, x-organic-shape, x-gaussian-blur, x-neural-glow, x-metaball-cursor, and x-organic-progress, can be seen [here](https://avanelsas.github.io/baredom/)
 
 ---
 
@@ -35,6 +43,8 @@ Like most Clojure/ClojureScript developers starting out with UIs, I went through
 
 I started looking for a different approach and discovered Web Components. I built a few, but didn't have the spare time to develop a comprehensive set that could be used in any project. Then AI arrived. While experimenting with Claude Code, I realised that 1 + 1 could be 3. That is how BareDOM, my first open-source project, was born.
 
+I first built the usual suspects for web components, a basis to create a UI. I then thought about trying something more exciting, with animations, shapes, colours, and a whole range of web components that deal with morphing, kinetics and organic styles were born. I hope it brings you joy when using them in your web application!
+
 # Why web components?
 
 **Works in any stack.** Because components are native HTML elements, they work wherever HTML works — vanilla JavaScript, React, Vue, Svelte, Angular, server-rendered HTML, or a static page. No adapter layer, no wrapper library.
@@ -43,16 +53,58 @@ I started looking for a different approach and discovered Web Components. I buil
 
 **Tree-shakeable by design.** Each component is a separate ES module. Import only what you use; bundle tools eliminate the rest automatically.
 
-**Full theming with CSS custom properties.** Every visual detail — colours, spacing, radius, shadows, typography — is exposed as a `--x-<component>-<property>` CSS custom property. Override at any scope: globally, per-page, per-instance.
+**Full theming with CSS custom properties.** Every visual detail — colours, spacing, radius, shadows, typography — is exposed as a `--x-<component>-<property>` CSS custom property. Override at any scope: globally, per-page, per-instance. Use [`<x-theme>`](./docs/x-theme.md) for centralised theming with built-in presets.
 
 **Light and dark mode included.** All components adapt automatically to `prefers-color-scheme`. No JavaScript required, no class toggling.
 
 **Accessibility built in.** ARIA roles, live regions, keyboard navigation, focus management, and `prefers-reduced-motion` support are part of the component, not an afterthought. You do not need to layer accessibility on top.
 
+**Mobile-ready.** All components are tested on viewports from 320px up. Overlay panels cap their width to avoid overflow. Touch targets meet the 44px minimum on coarse-pointer devices. Pointer events are used throughout for unified mouse and touch input.
+
 **Open Shadow DOM.** Shadow roots are `mode: "open"` — inspectable in DevTools, styleable via `::part()`, and testable with standard DOM APIs.
 
 ---
 
+## Theming
+
+Wrap any subtree in `<x-theme>` to apply a consistent palette across all components:
+
+```html
+<x-theme preset="ocean">
+  <x-button>Themed button</x-button>
+  <x-alert type="info" text="Themed alert"></x-alert>
+</x-theme>
+```
+
+Ships with **8 built-in presets**: `default`, `ocean`, `forest`, `sunset`, `neo-brutalist`, `aurora`, `mono-ai`, `warm-mineral`. All presets include both light and dark mode values that work with `prefers-color-scheme`.
+
+For custom themes, register your own preset via JavaScript:
+
+```js
+import { registerPreset } from '@vanelsas/baredom/x-theme';
+
+registerPreset('acme', {
+  light: { '--x-color-primary': '#e11d48', '--x-color-surface': '#fff' },
+  dark:  { '--x-color-primary': '#fb7185', '--x-color-surface': '#1a1a2e' }
+});
+```
+
+```html
+<x-theme preset="acme">...</x-theme>
+```
+
+Or override individual tokens via CSS:
+
+```html
+<x-theme preset="default" style="--x-color-primary: #e11d48;">
+  ...
+</x-theme>
+```
+
+See [docs/x-theme.md](./docs/x-theme.md) for the full token list, preset details, and API reference.
+
+---
+
 ## Installation
 
 > **Using JavaScript?** See the [JavaScript Developer Guide](./docs/javascript-guide.md) for npm/ESM setup, event handling, theming, and framework integration examples (React, Vue, Svelte).
@@ -64,13 +116,13 @@ BareDOM can be consumed three ways: as a **ClojureScript source dependency** (Cl
 Add BareDOM to your `deps.edn`:
 
 ```clojure
-{:deps {com.github.avanelsas/baredom {:mvn/version "1.2.0"}}}
+{:deps {com.github.avanelsas/baredom {:mvn/version "2.0.0"}}}
 ```
 
 Or in your `shadow-cljs.edn` dependencies:
 
 ```clojure
-:dependencies [[com.github.avanelsas/baredom "1.2.0"]]
+:dependencies [[com.github.avanelsas/baredom "2.0.0"]]
 ```
 
 Then require component namespaces directly and call their `init!` function once at startup:
@@ -127,7 +179,7 @@ Add the npm package to your `package.json`:
 ```json
 {
   "dependencies": {
-    "@vanelsas/baredom": "^1.2.0"
+    "@vanelsas/baredom": "^2.0.0"
   }
 }
 ```
@@ -382,6 +434,8 @@ Override CSS custom properties at any scope:
 
 **Predictable theming.** CSS custom properties follow a single naming convention: `--x-<component>-<property>`. Tokens are set on `:host` and cascade normally. You override them the same way you override any CSS property.
 
+**Mobile-first.** Components use `dvh` viewport units, `calc(100vw - ...)` width caps, and `@media (pointer:coarse)` rules for touch-friendly sizing. No component overflows on a 320px screen.
+
 ---
 
 ## Browser Support