bitwrench 2.0.31 → 2.1.0

package/docs/taco-format.md

@@ -49,7 +49,7 @@ An object of HTML attributes. All standard attributes work, including event hand
 {
   t: 'button',
   a: {
-    class: 'bw-btn bw-btn-primary',
+    class: 'bw_bccl_btn bw_primary',
     id: 'save-btn',
     disabled: true,
     onclick: function() { console.log('clicked'); },
@@ -135,9 +135,9 @@ The options key carries state, lifecycle hooks, and component behavior. This is
     // Component state
     state: { count: 0, items: [] },
 
-    // Render function (called by bw.update)
-    render: function(el) {
-      bw.DOM(el, { t: 'span', c: 'Count: ' + el._bw_state.count });
+    // Render function (called by bw.refresh)
+    render: function(el, state) {
+      bw.DOM(el, { t: 'span', c: 'Count: ' + state.count });
     },
 
     // Lifecycle hooks
@@ -149,7 +149,7 @@ The options key carries state, lifecycle hooks, and component behavior. This is
 
     // Component handle -- methods exposed on el.bw (v2.0.19+)
     handle: {
-      increment: function(el) { el._bw_state.count++; bw.update(el); }
+      increment: function(el) { el._bw_state.count++; bw.refresh(el); }
     },
 
     // Content slots -- auto-generates el.bw.setX()/getX() (v2.0.19+)
@@ -173,7 +173,7 @@ const html = bw.html({ t: 'div', c: 'Hello' });
 // '<div>Hello</div>'
 
 // Create a live DOM element (browser only)
-const el = bw.createDOM({ t: 'div', c: 'Hello' });
+const el = bw.create({ t: 'div', c: 'Hello' });
 // HTMLDivElement
 
 // Mount into an existing DOM element (browser only)
@@ -208,7 +208,7 @@ var footer = h('footer', { class: 'bw_bg_dark bw_text_light bw_py_4' }, [
 ]);
 ```
 
-The output is serializable (assuming no function values), works with `bw.html()`, `bw.DOM()`, `bw.createDOM()`, bwserve, and everywhere else TACO is accepted. Mix `bw.h()` calls freely with `make*()` returns and hand-written TACO — they all produce the same thing.
+The output is serializable (assuming no function values), works with `bw.html()`, `bw.DOM()`, `bw.create()`, bwserve, and everywhere else TACO is accepted. Mix `bw.h()` calls freely with `make*()` returns and hand-written TACO — they all produce the same thing.
 
 > **When to use `bw.h()` vs. hand-written TACO**: Use `bw.h()` for structural glue — wrapper divs, footers, headings — where the `{t:, a:, c:}` key syntax feels heavy. For complex nodes with `o:` (state, lifecycle), write full TACO — the named keys are clearer.
 
@@ -328,22 +328,21 @@ You can also wrap existing CSS frameworks (Bootstrap, Tailwind, etc.) in TACO ob
 }
 ```
 
-Bitwrench doesn't care where your CSS classes come from — it just renders the TACO to HTML/DOM. The `make*()` functions use bitwrench's built-in CSS classes (`bw_card`, `bw_btn`, etc.), but that's a choice, not a constraint.
+Bitwrench doesn't care where your CSS classes come from — it just renders the TACO to HTML/DOM. The `make*()` functions use bitwrench's built-in CSS classes (`bw_bccl_card`, `bw_bccl_btn`, etc.), but that's a choice, not a constraint.
 
-To make a custom component reactive, add `o.state` and `o.render`:
+To make a custom component stateful, add `o.state` and `o.render`:
 
 ```javascript
 bw.DOM('#app', {
   t: 'span',
   o: {
     state: { label: 'OK', color: '#4caf50' },
-    render: function(el) {
-      var s = el._bw_state;
+    render: function(el, state) {
       bw.DOM(el, {
         t: 'span',
         a: { class: 'status-badge',
-             style: 'background:' + s.color + '; color:#fff; padding:0.25rem 0.75rem; border-radius:999px;' },
-        c: s.label
+             style: 'background:' + state.color + '; color:#fff; padding:0.25rem 0.75rem; border-radius:999px;' },
+        c: state.label
       });
     }
   }
@@ -353,7 +352,7 @@ bw.DOM('#app', {
 var el = bw.$('.status-badge')[0].parentElement;
 el._bw_state.label = 'ERROR';
 el._bw_state.color = '#f44336';
-bw.update(el);
+bw.refresh(el);
 ```
 
 ## TACO beyond the browser

package/docs/theming.md

@@ -224,12 +224,22 @@ theme.alternate.palette;     // light-inverted version of ocean
 
 ### Switching between palettes
 
+Both palettes are injected together — the alternate is scoped under the `bw_theme_alt` class. Switching is a one-class toggle, no restyling needed:
+
+```javascript
+bw.toggleThemeMode();              // flip primary <-> alternate (whole page)
+bw.setThemeMode('alternate');      // set explicitly
+bw.toggleThemeMode('#dashboard');  // toggle just one subtree
+```
+
+To swap in a different palette entirely, re-apply:
+
 ```javascript
-// Toggle between primary and alternate palettes
-bw.toggleStyles();
+bw.applyStyles(theme.alternate);   // make the alternate palette primary
+bw.applyStyles(theme);             // switch back
 ```
 
-The toggle works by adding or removing the CSS class `.bw_theme_alt` on the `<html>` element. Both primary and alternate stylesheets are injected at theme generation time, so switching is instant -- no re-generation needed.
+> **Note:** `bw.toggleStyles()` was removed in v2.1. Its replacement is `bw.toggleThemeMode()`, which toggles the `bw_theme_alt` class instead of re-injecting styles. See [`bw.toggleThemeMode()`](bitwrench_api.md#bwtogglethememodescope) and [`bw.setThemeMode()`](bitwrench_api.md#bwsetthememodemode-scope).
 
 ### Clearing a theme