@vanelsas/baredom 2.0.1 → 2.1.0

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 All notable changes to BareDOM will be documented in this file.
 
+## [2.1.0] - 2026-04-13
+
+### Added
+
+- **x-carousel** — Themeable, accessible carousel with swipe/drag navigation, arrow buttons, dot indicators, autoplay, keyboard interaction, slide/fade transitions, and horizontal/vertical orientation
+- **x-color-picker** — Color picker with 2D saturation/brightness area, hue strip, optional alpha channel, preset swatches, eyedropper support, and clipboard copy; supports inline and popover display modes
+- **x-particle-button** — Button that emits and reabsorbs visual fragments on interaction, combining a premium base, pointer-tracked specular highlight, and a canvas particle system (modes: subtle, spark, ember, disperse)
+- x-theme: design tokens expanded from 33 to 50 (adds z-index, opacity, and additional colour/spacing/shape tokens for overlay stacking and disabled states)
+- Shared DOM and model utilities (`baredom.utils.dom`, `baredom.utils.model`) so components no longer reimplement attribute parsing, instance-field access, and security sanitisers
+- CI quality checks and bundle-size documentation
+
+### Changed
+
+- `public/index.html` component gallery now consumes x-theme design tokens
+
+### Fixed
+
+- CSS injection and XSS vulnerabilities in input sanitization
+- x-liquid-fill: `disabled` attribute now correctly suspends animation and interaction
+- x-divider: pattern rendering regression
+- Mobile viewport units (`100dvh` / `100%`) applied where `100vh` / `100vw` were causing overflow
+- Missing demo page for audit-flagged component
+- Flaky async test timeouts
+- Closure Advanced Compilation safety regression (bab76f9)
+
 ## [2.0.1] - 2026-04-10
 
 ### Fixed

package/README.md

@@ -19,7 +19,7 @@
 
 ## What is BareDOM?
 
-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.
+BareDOM is a library of 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:
 
@@ -33,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-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/)
+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, x-organic-progress, and x-particle-button, can be seen [here](https://avanelsas.github.io/baredom/)
 
 ---
 
@@ -116,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 "2.0.1"}}}
+{:deps {com.github.avanelsas/baredom {:mvn/version "2.1.0"}}}
 ```
 
 Or in your `shadow-cljs.edn` dependencies:
 
 ```clojure
-:dependencies [[com.github.avanelsas/baredom "2.0.1"]]
+:dependencies [[com.github.avanelsas/baredom "2.1.0"]]
 ```
 
 Then require component namespaces directly and call their `init!` function once at startup:
@@ -179,7 +179,7 @@ Add the npm package to your `package.json`:
 ```json
 {
   "dependencies": {
-    "@vanelsas/baredom": "^2.0.1"
+    "@vanelsas/baredom": "^2.1.0"
   }
 }
 ```
@@ -334,12 +334,13 @@ Override CSS custom properties at any scope:
 
 ## Components
 
-### Form (16)
+### Form (17)
 
 | Tag | Description |
 |-----|-------------|
 | [`<x-button>`](./docs/x-button.md) | Action control. Variants: `primary`, `secondary`, `tertiary`, `ghost`, `danger`. Sizes: `sm`, `md`, `lg`. States: `disabled`, `loading`, `pressed`. Icon slots. |
 | [`<x-checkbox>`](./docs/x-checkbox.md) | Boolean input. Reflects `checked` and `indeterminate` states to attributes. |
+| [`<x-color-picker>`](./docs/x-color-picker.md) | Colour picker with 2D saturation/brightness area, hue strip, optional alpha, preset swatches, eyedropper, and clipboard copy. Inline or popover mode. |
 | [`<x-copy>`](./docs/x-copy.md) | Copy-to-clipboard utility button with success feedback. |
 | [`<x-currency-field>`](./docs/x-currency-field.md) | Formatted currency input with locale-aware masking. |
 | [`<x-date-picker>`](./docs/x-date-picker.md) | Calendar-based date selection with keyboard navigation. |
@@ -394,12 +395,13 @@ Override CSS custom properties at any scope:
 | [`<x-grid>`](./docs/x-grid.md) | CSS Grid layout component with responsive column configuration. |
 | [`<x-spacer>`](./docs/x-spacer.md) | Flexible spacing element for flexbox and grid layouts. |
 
-### Data (9)
+### Data (10)
 
 | Tag | Description |
 |-----|-------------|
 | [`<x-avatar>`](./docs/x-avatar.md) | User photo or initials display. Shape, size, and status dot variants. |
 | [`<x-avatar-group>`](./docs/x-avatar-group.md) | Overlapping avatar stack for representing multiple users. |
+| [`<x-carousel>`](./docs/x-carousel.md) | Accessible carousel with swipe/drag, arrows, dot indicators, autoplay, slide/fade transitions, and horizontal/vertical orientation. |
 | [`<x-chart>`](./docs/x-chart.md) | Data visualisation component for common chart types. |
 | [`<x-stat>`](./docs/x-stat.md) | KPI / metric card with value, label, trend, and icon slots. |
 | [`<x-table>`](./docs/x-table.md) | Data grid using CSS subgrid. Supports sorting, single/multi-select, striping, and accessible captions. |
@@ -438,6 +440,23 @@ Override CSS custom properties at any scope:
 
 ---
 
+## Bundle Size
+
+BareDOM compiles to lightweight ES modules. Sizes below are gzipped:
+
+| Module | Gzipped |
+|--------|---------|
+| `base.js` (shared runtime) | ~35 KB |
+| Median component | ~3 KB |
+| Smallest (`x-spacer`) | ~1 KB |
+| Largest (`x-chart`) | ~9 KB |
+
+Each component loads `base.js` once plus its own module. A typical page using 5-10 components weighs **40-65 KB** gzipped total.
+
+> **ESM only.** BareDOM ships ES modules exclusively — there is no CommonJS or UMD build. This works natively in all modern browsers and with any bundler that supports ESM (webpack 5+, Vite, esbuild, Rollup, Parcel). If you need server-side rendering, pre-render the HTML and hydrate with component registration on the client.
+
+---
+
 ## Browser Support
 
 BareDOM targets browsers that support Custom Elements v1 and Shadow DOM v1 natively: