@vanelsas/baredom 2.6.0 → 2.8.0

package/CHANGELOG.md

@@ -2,6 +2,40 @@
 
 All notable changes to BareDOM will be documented in this file.
 
+## [2.8.0] - 2026-05-06
+
+### Added
+
+- **x-i18n / x-i18n-provider** — Translation components. `x-i18n-provider` holds the dictionary and active locale; `x-i18n` renders a translated string for a given key with parameter interpolation.
+- **x-kinetic-canvas** — Animated background component (canvas-based, motion-respecting).
+- **x-multi-combobox** — Combobox variant with multi-select chips, keyboard navigation, and a cancelable `change-request` event.
+
+### Changed
+
+- **Internal architecture audit** — 18 PRs across the component library: `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.**
+- **Tier 0/1/2 property-accessor taxonomy** — Documented in `CLAUDE.md` and `docs/REGISTRATION.md` so contributors pick the simplest registration tier per component.
+- **Pre-commit hook** — Now auto-regenerates the Angular adapter when `src/` changes.
+
+### Fixed
+
+- **x-combobox / x-multi-combobox** — Render pipeline now applies the model-change guard, preventing infinite `attributeChangedCallback` recursion.
+- **x-kinetic-typography** — SVG path `d` attribute is now sanitized via `mu/sanitize-svg-path-d`.
+- **x-i18n-provider** — Internal state encapsulated behind the public API.
+- **x-kinetic-canvas docs** — CSS custom property defaults synced with implementation.
+- **x-icon** — Property test now forwards `:default` in `install-properties!` for string props.
+
+## [2.7.0] - 2026-05-02
+
+### Changed
+
+- **Component factory** — All 91 components now register via `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.
+
+### Fixed
+
+- **x-command-palette** — Search field now correctly receives focus when the palette opens.
+- **x-package.json** — Fixed export ordering and regenerated type declarations.
+- **Test runner** — Fixed `classList` TypeError caused by `dom_test` cleanup removing the `cljs-test-display` root element. Suppressed x-image missing-alt warnings in test fixtures.
+
 ## [2.6.0] - 2026-04-30
 
 ### Added

package/README.md

@@ -34,7 +34,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, x-organic-progress, and x-particle-button, can be seen [here](https://avanelsas.github.io/baredom/)
+All components can be explored in the [live demo](https://avanelsas.github.io/baredom/).
 
 ---
 
@@ -68,50 +68,18 @@ I first built the usual suspects for web components, a basis to create a UI. I t
 
 ---
 
-## TypeScript
+## BareForge — Visual Page Builder
 
-BareDOM includes TypeScript declarations for every component. Types are auto-generated from component metadata and ship alongside the ESM files — no additional setup required.
+[![GitHub](https://img.shields.io/github/stars/avanelsas/bareforge?style=social)](https://github.com/avanelsas/bareforge)
 
-### What you get
+[BareForge](https://github.com/avanelsas/bareforge) is a companion visual landing-page builder for BareDOM. Drag-and-drop BareDOM components onto a canvas, configure them in the inspector, and export a complete project.
 
-- **Typed element interfaces** extending `HTMLElement` with all properties and methods
-- **Typed custom events** with full `detail` payload types
-- **`HTMLElementTagNameMap` augmentation** so `document.querySelector('x-button')` returns `XButton`
-- **[Custom Elements Manifest](https://github.com/webcomponents/custom-elements-manifest)** (`custom-elements.json`) for IDE tooling and HTML intellisense
+- **Drag-and-drop canvas** with snap-aware placement
+- **Inspector** with type-aware editors for every BareDOM component
+- **Theme editor** with all 8 BareDOM presets and per-token overrides
+- **Four export modes** — CDN, bundle, ClojureScript, and JavaScript
 
-### Usage
-
-```typescript
-import '@vanelsas/baredom/x-button';
-import '@vanelsas/baredom/x-alert';
-
-// querySelector returns typed XButton
-const btn = document.querySelector('x-button')!;
-btn.disabled = true;    // type-checked
-btn.loading = true;     // autocomplete works
-
-// Event listeners have typed detail payloads
-btn.addEventListener('press', (e) => {
-  console.log(e.detail.source);  // string — fully typed
-});
-
-// Custom events on other components
-const alert = document.querySelector('x-alert')!;
-alert.addEventListener('x-alert-dismiss', (e) => {
-  console.log(e.detail.reason);  // string
-  console.log(e.detail.type);    // string
-});
-
-// Components with methods
-import '@vanelsas/baredom/x-modal';
-const modal = document.querySelector('x-modal')!;
-modal.show();   // typed method
-modal.hide();   // typed method
-```
-
-### IDE support
-
-The `custom-elements.json` manifest enables HTML intellisense in editors that support it. For VS Code, install the [Lit Plugin](https://marketplace.visualstudio.com/items?itemName=nicktomlin.vscode-lit-html) or the [Custom Elements Language Server](https://marketplace.visualstudio.com/items?itemName=nicktomlin.vscode-lit-html) to get attribute autocomplete and validation in HTML templates.
+Try the [live editor](https://avanelsas.github.io/bareforge/) or see the [repository](https://github.com/avanelsas/bareforge) for details.
 
 ---
 
@@ -175,7 +143,10 @@ Also available via [Clojars](./docs/installation.md#clojurescript-via-clojars) a
 BareDOM components are native HTML elements. Import, register, and use them in any framework or vanilla HTML.
 
 - **JavaScript / TypeScript** — see the [JavaScript Developer Guide](./docs/javascript-guide.md)
+- **TypeScript types** — see the [TypeScript Guide](./docs/typescript.md)
 - **ClojureScript** — see the [ClojureScript Guide](./docs/clojurescript-guide.md)
+- **React** — see [`@vanelsas/baredom-react`](https://www.npmjs.com/package/@vanelsas/baredom-react)
+- **Angular** — see [`@vanelsas/baredom-angular`](https://www.npmjs.com/package/@vanelsas/baredom-angular)
 
 ---
 

package/custom-elements.json

@@ -572,6 +572,119 @@
         "name" : "XDrawer"
       }
     } ]
+  }, {
+    "kind" : "javascript-module",
+    "path" : "dist/x-multi-combobox.js",
+    "declarations" : [ {
+      "kind" : "class",
+      "name" : "XMultiCombobox",
+      "tagName" : "x-multi-combobox",
+      "superclass" : {
+        "name" : "HTMLElement"
+      },
+      "members" : [ {
+        "kind" : "field",
+        "name" : "value",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "placeholder",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "name",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "disabled",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "required",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "open",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "placement",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "max",
+        "type" : {
+          "text" : "number"
+        }
+      }, {
+        "kind" : "method",
+        "name" : "show",
+        "return" : {
+          "type" : {
+            "text" : "void"
+          }
+        }
+      }, {
+        "kind" : "method",
+        "name" : "hide",
+        "return" : {
+          "type" : {
+            "text" : "void"
+          }
+        }
+      } ],
+      "events" : [ {
+        "name" : "x-multi-combobox-change-request",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      }, {
+        "name" : "x-multi-combobox-change",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      }, {
+        "name" : "x-multi-combobox-input",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      }, {
+        "name" : "x-multi-combobox-toggle",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      } ],
+      "slots" : [ {
+        "name" : ""
+      } ]
+    } ],
+    "exports" : [ {
+      "kind" : "js",
+      "name" : "init",
+      "declaration" : {
+        "name" : "init"
+      }
+    }, {
+      "kind" : "custom-element-definition",
+      "name" : "x-multi-combobox",
+      "declaration" : {
+        "name" : "XMultiCombobox"
+      }
+    } ]
   }, {
     "kind" : "javascript-module",
     "path" : "dist/x-skeleton-group.js",
@@ -1202,7 +1315,17 @@
           "text" : "any"
         }
       } ],
-      "events" : [ ],
+      "events" : [ {
+        "name" : "x-chart-select",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      }, {
+        "name" : "x-chart-hover",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      } ],
       "slots" : [ {
         "name" : ""
       } ]
@@ -2549,16 +2672,41 @@
         "kind" : "field",
         "name" : "offset",
         "type" : {
-          "text" : "number"
+          "text" : "string"
         }
       }, {
         "kind" : "field",
         "name" : "zIndex",
         "type" : {
-          "text" : "number"
+          "text" : "string"
+        }
+      } ],
+      "events" : [ {
+        "name" : "x-context-menu-open-request",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      }, {
+        "name" : "x-context-menu-open",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      }, {
+        "name" : "x-context-menu-close-request",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      }, {
+        "name" : "x-context-menu-close",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      }, {
+        "name" : "x-context-menu-select",
+        "type" : {
+          "text" : "CustomEvent"
         }
       } ],
-      "events" : [ ],
       "slots" : [ {
         "name" : ""
       } ]
@@ -3748,7 +3896,22 @@
           "text" : "boolean"
         }
       } ],
-      "events" : [ ],
+      "events" : [ {
+        "name" : "x-date-picker-input",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      }, {
+        "name" : "x-date-picker-change-request",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      }, {
+        "name" : "x-date-picker-change",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      } ],
       "slots" : [ {
         "name" : ""
       } ]
@@ -3952,6 +4115,76 @@
         "name" : "XGrid"
       }
     } ]
+  }, {
+    "kind" : "javascript-module",
+    "path" : "dist/x-i18n-provider.js",
+    "declarations" : [ {
+      "kind" : "class",
+      "name" : "XI18nProvider",
+      "tagName" : "x-i18n-provider",
+      "superclass" : {
+        "name" : "HTMLElement"
+      },
+      "members" : [ {
+        "kind" : "field",
+        "name" : "src",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "locale",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "fallbackLocale",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "method",
+        "name" : "translateSubtree",
+        "return" : {
+          "type" : {
+            "text" : "void"
+          }
+        }
+      } ],
+      "events" : [ {
+        "name" : "x-i18n-loading",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      }, {
+        "name" : "x-i18n-change",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      }, {
+        "name" : "x-i18n-error",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      } ],
+      "slots" : [ {
+        "name" : ""
+      } ]
+    } ],
+    "exports" : [ {
+      "kind" : "js",
+      "name" : "init",
+      "declaration" : {
+        "name" : "init"
+      }
+    }, {
+      "kind" : "custom-element-definition",
+      "name" : "x-i18n-provider",
+      "declaration" : {
+        "name" : "XI18nProvider"
+      }
+    } ]
   }, {
     "kind" : "javascript-module",
     "path" : "dist/x-modal.js",
@@ -4682,6 +4915,71 @@
         "name" : "XCombobox"
       }
     } ]
+  }, {
+    "kind" : "javascript-module",
+    "path" : "dist/x-kinetic-canvas.js",
+    "declarations" : [ {
+      "kind" : "class",
+      "name" : "XKineticCanvas",
+      "tagName" : "x-kinetic-canvas",
+      "superclass" : {
+        "name" : "HTMLElement"
+      },
+      "members" : [ {
+        "kind" : "field",
+        "name" : "type",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "variant",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "speed",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "density",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "fullscreen",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "paused",
+        "type" : {
+          "text" : "boolean"
+        }
+      } ],
+      "events" : [ ],
+      "slots" : [ {
+        "name" : ""
+      } ]
+    } ],
+    "exports" : [ {
+      "kind" : "js",
+      "name" : "init",
+      "declaration" : {
+        "name" : "init"
+      }
+    }, {
+      "kind" : "custom-element-definition",
+      "name" : "x-kinetic-canvas",
+      "declaration" : {
+        "name" : "XKineticCanvas"
+      }
+    } ]
   }, {
     "kind" : "javascript-module",
     "path" : "dist/x-text-area.js",
@@ -4833,6 +5131,47 @@
         "name" : "XTypography"
       }
     } ]
+  }, {
+    "kind" : "javascript-module",
+    "path" : "dist/x-i18n.js",
+    "declarations" : [ {
+      "kind" : "class",
+      "name" : "XI18n",
+      "tagName" : "x-i18n",
+      "superclass" : {
+        "name" : "HTMLElement"
+      },
+      "members" : [ {
+        "kind" : "field",
+        "name" : "key",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "params",
+        "type" : {
+          "text" : "string"
+        }
+      } ],
+      "events" : [ ],
+      "slots" : [ {
+        "name" : ""
+      } ]
+    } ],
+    "exports" : [ {
+      "kind" : "js",
+      "name" : "init",
+      "declaration" : {
+        "name" : "init"
+      }
+    }, {
+      "kind" : "custom-element-definition",
+      "name" : "x-i18n",
+      "declaration" : {
+        "name" : "XI18n"
+      }
+    } ]
   }, {
     "kind" : "javascript-module",
     "path" : "dist/x-metaball-cursor.js",

package/dist/baredom.d.ts

@@ -7,6 +7,7 @@ export { XStepper } from "./x-stepper";
 export { XSpinner } from "./x-spinner";
 export { XScrollTimeline } from "./x-scroll-timeline";
 export { XDrawer } from "./x-drawer";
+export { XMultiCombobox } from "./x-multi-combobox";
 export { XSkeletonGroup } from "./x-skeleton-group";
 export { XRippleEffect } from "./x-ripple-effect";
 export { XPopover } from "./x-popover";
@@ -55,6 +56,7 @@ export { XDatePicker } from "./x-date-picker";
 export { XTimelineItem } from "./x-timeline-item";
 export { XOrganicDivider } from "./x-organic-divider";
 export { XGrid } from "./x-grid";
+export { XI18nProvider } from "./x-i18n-provider";
 export { XModal } from "./x-modal";
 export { XFileDownload } from "./x-file-download";
 export { XWelcomeTour } from "./x-welcome-tour";
@@ -63,8 +65,10 @@ export { XMorphStack } from "./x-morph-stack";
 export { XScrollParallax } from "./x-scroll-parallax";
 export { XParticleButton } from "./x-particle-button";
 export { XCombobox } from "./x-combobox";
+export { XKineticCanvas } from "./x-kinetic-canvas";
 export { XTextArea } from "./x-text-area";
 export { XTypography } from "./x-typography";
+export { XI18n } from "./x-i18n";
 export { XMetaballCursor } from "./x-metaball-cursor";
 export { XMenu } from "./x-menu";
 export { XLiquidGlass } from "./x-liquid-glass";