@vanelsas/baredom 0.2.6-alpha → 1.0.0-rc.2

package/CHANGELOG.md

@@ -2,113 +2,28 @@
 
 All notable changes to BareDome will be documented in this file.
 
-## [0.2.4-alpha] - 2026-03-30
+## [1.0.0-rc.2] - 2026-03-31
 
-### Fixed
-
-- Multiple small changes to components code and docs so that they can be shipped
-- x-alert, x-avatar-group, x-avatar, x-badge, x-breadcrumbs, x-button, x-cancel-dialogue, x-card, x-chart, x-checkbox, x-chip, x-collapse, x-command-palette, x-container, x-context-menu, x-copy, x-currency-field, x-date-picker, x-divider, x-drawer, x-dropdown, x-fieldset, x-file-download, x-form-field, x-form, x-grid, x-menu-item, x-menu, x-modal are all stable now
-
-## [0.2.3-alpha] - 2026-03-29
-
-### Fixed
-
-- Code updates to x-alert, x-avatar-group, x-avatar, x-badge, x-breadcrumbs, x-cancel-dialogue, x-card, x-chart, x-checkbox, x-chip to improve quality
-- Accompanying docs updated where needed
-
-## [0.2.2-alpha] - 2026-03-27
-
-### Fixed
-
-- Code updates to x-button, x-alert, x-drawer, x-form, x-form-field to improve quality
-- Accompanying docs updated if needed
-
-## [0.2.1-alpha] - 2026-03-27
-
-### Fixed
-
-- Fixes tests for x-file-download
-
-## [0.2.0-alpha] - 2026-03-27
-
-### Fixed
-
-- Fixes design issues x-context-menu and x-modal
-- Fixes small bugs in x-file-download, x-fieldset, x-date-picker, x-button
-
-## [0.1.11-alpha] - 2026-03-27
+Release candidate — all components audited and stable.
 
 ### Changed
 
-- Renamed internal ClojureScript namespace root from `app` to `baredom` to match the published npm package name `@vanelsas/baredom`. No public API
-changes.
-
-## [0.1.10-alpha] - 2026-03-27
-
-## Fixed
-
-- Updates package.json to ensure the latest alpha version is also the latest version on NPM
-- Add report.html to .gitignore
-
-## [0.1.9-alpha] - 2026-03-27
-
-## Fixed
-
-- Updates build.clj and README.md
-
-## [0.1.8-alpha] - 2026-03-27
-
-## Fixed
-
-- Updates release.yml
-
-## [0.1.7-alpha] - 2026-03-27
-
-## Fixed
-
-- Updates package.json
-- Updates release.yml
-
-## [0.1.6-alpha] - 2026-03-27
+- All 54 components reviewed and updated for API consistency, accessibility, theming, Closure Advanced compilation safety, and test coverage
+- Accompanying documentation and demo files updated for all components
+- Namespace renamed from `app` to `baredom` to match published package name
 
-## Fixed
-
-- Updates package.json
-
-## [0.1.5-alpha] - 2026-03-27
-
-## Fixed
-
-- Updates package.json
-
-## [0.1.4-alpha] - 2026-03-27
-
-## Fixed
-
-- renames Release in yml to release
-
-## [0.1.3-alpha] - 2026-03-27
-
-## Fixed
-
-- Fixes Release with OIDC
-
-## [0.1.2-alpha] - 2026-03-27
-
-## Fixed
-
-- Release with OIDC
-
-## [0.1.1-alpha] - 2026-03-27
-
-## Fixed
-
-- Fixes x-date-picker disabled
-- Fixes loading of logo in darkmode/lightmode in main demo
-
-## Adds
+### Components
 
-- Pure HTML/JS demo + README.md
+- **Layout** — x-container, x-grid, x-spacer, x-divider, x-sidebar, x-navbar
+- **Typography & Display** — x-badge, x-chip, x-stat, x-avatar, x-avatar-group, x-skeleton
+- **Feedback** — x-alert, x-spinner, x-progress, x-progress-circle, x-toast, x-toaster
+- **Overlays** — x-modal, x-drawer, x-popover, x-context-menu, x-command-palette, x-cancel-dialogue
+- **Navigation** — x-breadcrumbs, x-pagination, x-tab, x-tabs, x-menu, x-menu-item, x-stepper
+- **Forms** — x-button, x-checkbox, x-radio, x-switch, x-select, x-slider, x-text-area, x-form, x-form-field, x-fieldset, x-search-field, x-currency-field, x-date-picker
+- **Content** — x-card, x-collapse, x-chart, x-copy, x-file-download, x-dropdown
+- **Data** — x-table, x-table-row, x-table-cell
+- **Timeline** — x-timeline, x-timeline-item
+- **Notifications** — x-notification-center
 
 ## [0.1.0-alpha] - 2026-03-25
 

package/README.md

@@ -1,13 +1,5 @@
 # BareDOM
 
-<p align="left">
-  <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="Baredom Logo" src="public/assets/baredom_lightmode.svg" width="120">
-  </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)
@@ -37,14 +29,6 @@ BareDOM has been created using Claude Code. The CLAUDE.md file is added to the r
 
 ## Why BareDOM?
 
-I started working on BareDOM after going though all the motions that Clojure developers often go through when deciding to build a UI. I worked with Reagent and Re-frame and in general the experience was pretty good. At some point I was building larger UI's with reusable components that were pretty basic (e.g. inputs, buttons etc). For complex UI's the bundle size became larger and larger.
-
-I wondered if there would be a better way to do this, and I ended up reading about web components. It seemed like a good idea to try that. For me it as a learning exercise, trying to understand how it all works. I tried to build a few, and had to learn how to do that in Clojurescript. Building a larger set of web components is quite a bit of work.
-
-When Claude Code appeared, I was thinking about a project to try it out with, and web components seemed like a good fit.  I picked up the project again and started to build Clojurescript based web components assisted by Claude. A good experiment to work with AI tooling and build something I find interesting myself.
-
-The project is still in an alpha state. The components and demo's work, but there are bound to be some things not working properly yet. Feel free to give it a spin.
-
 **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.
 
 **No framework lock-in.** Your components are not tied to the framework you are building with today. Migrate your app, keep your components.
@@ -63,188 +47,44 @@ The project is still in an alpha state. The components and demo's work, but ther
 
 ## Installation
 
-BareDOM can be consumed in three ways. Pick the one that matches your stack.
-
----
-
-### Option 1 — ClojureScript via Clojars
-
-This is the primary distribution for ClojureScript projects. Add the dependency to your `deps.edn`:
-
-```clojure
-{:deps {com.github.avanelsas/baredom {:mvn/version "0.1.10-alpha"}}}
-```
-
-Or, if you use Leiningen, add to `:dependencies` in `project.clj`:
-
-```clojure
-[com.github.avanelsas/baredom "0.1.10-alpha"]
-```
-
-Components live under the `app.exports` namespace. Require only what you use — unused namespaces are eliminated by the Closure compiler:
-
-```clojure
-(ns my-app.core
-  (:require [app.exports.x-button  :as x-button]
-            [app.exports.x-alert   :as x-alert]
-            [app.exports.x-toaster :as x-toaster]
-            [app.exports.x-toast   :as x-toast]))
-
-(defn- register-components! []
-  (x-button/register!)
-  (x-alert/register!)
-  (x-toaster/register!)
-  (x-toast/register!))
-```
-
-Call `register-components!` once in your `init!` entry point. Registration is idempotent — calling `register!` on an already-registered element is a no-op.
-
----
-
-### Option 2 — npm (JavaScript / TypeScript projects)
-
-If your project uses npm, install the package:
-
-```bash
-npm install @vanelsas/baredom
-```
-
-Or add it manually to `package.json`:
+**Step 1 — Add the npm dependency to your `package.json`:**
 
 ```json
 {
   "dependencies": {
-    "@vanelsas/baredom": "^0.1.0-alpha"
+    "@vanelsas/baredom": "^1.0.0-rc.2"
   }
 }
 ```
 
-Each component is a separate ES module — import only what you need:
-
-```js
-import { init as initButton } from "@vanelsas/baredom/x-button";
-import { init as initAlert }  from "@vanelsas/baredom/x-alert";
+Then run `npm install`.
 
-initButton();
-initAlert();
-```
-
-> **shadow-cljs users using npm:** no extra configuration needed. shadow-cljs resolves npm packages from `node_modules` automatically. You can use `["@vanelsas/baredom/x-button" :as x-button]` in `:require` and call `(.init x-button)`.
+**Step 2 — shadow-cljs:** no extra configuration needed. shadow-cljs resolves npm packages automatically via the `:npm-deps` or `node_modules` integration built into every shadow-cljs project.
 
 ---
 
-### Option 3 — CDN (no build step)
-
-BareDOM components are standard ES modules. Load them directly in any HTML page using a CDN — no npm, no bundler, no framework required.
-
-#### Import and initialise
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>My App</title>
-</head>
-<body>
-
-  <x-button variant="primary">Hello</x-button>
-  <x-alert type="success" text="It works!"></x-alert>
-
-  <script type="module">
-    import { init as initButton } from "https://esm.sh/@vanelsas/baredom/x-button";
-    import { init as initAlert }  from "https://esm.sh/@vanelsas/baredom/x-alert";
-
-    initButton();
-    initAlert();
-  </script>
-
-</body>
-</html>
-```
-
-`<script type="module">` is required because BareDOM components are ES modules. Each `init()` call registers the custom element with the browser. Only the components you import are loaded — unused components cost nothing.
-
-#### Set attributes in HTML
-
-Every attribute can be set directly in markup:
-
-```html
-<x-button variant="secondary" size="sm" disabled>Cancel</x-button>
-<x-checkbox checked></x-checkbox>
-<x-alert type="warning" text="Check your input." dismissible></x-alert>
-<x-progress value="65" max="100"></x-progress>
-```
-
-Boolean attributes follow the HTML convention: presence means `true`, absence means `false`.
-
-#### Handle events
-
-```html
-<x-button id="btn" variant="primary">Click me</x-button>
-<x-tabs id="tabs" value="home">
-  <x-tab value="home">Home</x-tab>
-  <x-tab value="settings">Settings</x-tab>
-</x-tabs>
-
-<script type="module">
-  import { init as initButton } from "https://esm.sh/@vanelsas/baredom/x-button";
-  import { init as initTabs }   from "https://esm.sh/@vanelsas/baredom/x-tabs";
-  import { init as initTab }    from "https://esm.sh/@vanelsas/baredom/x-tab";
-
-  initButton(); initTabs(); initTab();
-
-  document.getElementById("btn").addEventListener("click", () => {
-    console.log("button clicked");
-  });
-
-  document.getElementById("tabs").addEventListener("value-change", e => {
-    console.log("active tab:", e.detail.value);
-  });
-</script>
-```
-
-Custom events carry a `detail` payload — check the individual component docs for the event name and `detail` shape.
-
-#### Theme with CSS custom properties
-
-```html
-<style>
-  :root {
-    --x-button-radius: 4px;
-    --x-button-bg-primary: #0a5c99;
-  }
-</style>
-```
-
-CSS custom properties cascade normally into the open Shadow DOM. No JavaScript required for theming.
-
----
-
-## Usage (ClojureScript)
-
-The examples below use the Clojars distribution. If you installed via npm, replace the `app.exports.*` requires with `["@vanelsas/baredom/x-button" :as x-button]` etc., and call `(.init x-button)` instead of `(x-button/register!)`.
+## Usage
 
 ### 1. Register components
 
-Require each component namespace you need and call `register!` on it once, before any rendering. Only the components you require are included in your build.
+Require each component module you need and call `.init` on it once, before any rendering. Only the components you require are included in your bundle.
 
 ```clojure
 (ns my-app.core
   (:require
-   [app.exports.x-button  :as x-button]
-   [app.exports.x-alert   :as x-alert]
-   [app.exports.x-toaster :as x-toaster]
-   [app.exports.x-toast   :as x-toast]))
+   ["@vanelsas/baredom/x-button"  :as x-button]
+   ["@vanelsas/baredom/x-alert"   :as x-alert]
+   ["@vanelsas/baredom/x-toaster" :as x-toaster]
+   ["@vanelsas/baredom/x-toast"   :as x-toast]))
 
 (defn- register-components! []
-  (x-button/register!)
-  (x-alert/register!)
-  (x-toaster/register!)
-  (x-toast/register!))
+  (.init x-button)
+  (.init x-alert)
+  (.init x-toaster)
+  (.init x-toast))
 ```
 
-Call `register-components!` once in your `init!` entry point. Registration is idempotent — calling `register!` on an already-registered element is a no-op.
+Call `register-components!` once in your `init!` entry point. Registration is idempotent — calling `.init` on an already-registered element is a no-op.
 
 ### 2. Add a renderer
 
@@ -579,53 +419,6 @@ See [`bare-demo/README.md`](./bare-demo/README.md) for a full walkthrough of the
 
 ---
 
-## bare-reagent-demo — Reagent usage example
-
-The `bare-reagent-demo/` folder is visually identical to `bare-demo` but replaces the custom hiccup renderer with [Reagent](https://reagent-project.github.io/) — a minimalist ClojureScript wrapper around React. It demonstrates the integration patterns and trade-offs that arise when pairing a virtual-DOM framework with native Custom Elements.
-
-The key differences from `bare-demo`:
-
-- **`reagent.core/atom`** drives reactivity. Any component that dereferences a ratom with `@` re-renders automatically — no `add-watch` or manual render trigger required.
-- **Standard events** (`:on-click`) work transparently through React's synthetic event system.
-- **Custom events** (`x-modal-dismiss`, `toggle`) are not handled by React and must be wired imperatively. The demo uses `reagent/create-class` lifecycle hooks (`component-did-mount` / `component-will-unmount`) and `rdom/dom-node` to attach and clean up native event listeners on the real DOM element.
-
-**Run it:**
-
-```bash
-cd bare-reagent-demo
-npm install
-npm start
-```
-
-Then open `http://localhost:8002`.
-
-See [`bare-reagent-demo/README.md`](./bare-reagent-demo/README.md) for a full code walkthrough, the custom-event workaround, and a side-by-side comparison with `bare-demo`.
-
----
-
-## bare-html — HTML/JS only demo
-
-The `bare-html/` folder contains the same demo — navbar, sidebar, modal, and event log — written entirely in plain HTML and JavaScript. There is no ClojureScript, no build step, and no bundler. Components are loaded by importing their pre-built ES modules directly from the `dist/` folder using a `<script type="module">` tag.
-
-The implementation uses three ideas:
-
-- **Declarative HTML markup.** All components are written as custom element tags in the HTML source. Attributes are set directly in markup or via `setAttribute` / `removeAttribute` from JavaScript.
-- **A plain state object and a `render()` function.** A simple JS object holds `sidebarOpen`, `modalOpen`, and `activeNav`. The `render()` function reads this object and reconciles attributes — open/close state is a single `setAttribute` or `removeAttribute` call.
-- **Native event listeners.** `x-button` fires a `press` event; `x-sidebar` fires `toggle` with `detail.open`; `x-modal` fires `x-modal-dismiss` on Escape or backdrop click. All are wired with standard `addEventListener`.
-
-**Run it:**
-
-```bash
-# From the project root
-python3 -m http.server 8000
-```
-
-Then open `http://localhost:8000/bare-html/demo.html`. The demo must be served over HTTP — ES module imports are blocked by browsers on `file://` URLs.
-
-See [`bare-html/README.md`](./bare-html/README.md) for a full walkthrough and a comparison with `bare-demo`.
-
----
-
 ## Building from Source
 
 BareDOM is authored in ClojureScript and compiled with [shadow-cljs](https://shadow-cljs.github.io/docs/UsersGuide.html).