bitwrench 2.0.24 → 2.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (82) hide show
  1. package/README.md +8 -6
  2. package/dist/bitwrench-bccl.cjs.js +1 -1
  3. package/dist/bitwrench-bccl.cjs.min.js +1 -1
  4. package/dist/bitwrench-bccl.cjs.min.js.gz +0 -0
  5. package/dist/bitwrench-bccl.esm.js +1 -1
  6. package/dist/bitwrench-bccl.esm.min.js +1 -1
  7. package/dist/bitwrench-bccl.esm.min.js.gz +0 -0
  8. package/dist/bitwrench-bccl.umd.js +1 -1
  9. package/dist/bitwrench-bccl.umd.min.js +1 -1
  10. package/dist/bitwrench-bccl.umd.min.js.gz +0 -0
  11. package/dist/bitwrench-code-edit.cjs.js +1 -1
  12. package/dist/bitwrench-code-edit.cjs.min.js +1 -1
  13. package/dist/bitwrench-code-edit.es5.js +1 -1
  14. package/dist/bitwrench-code-edit.es5.min.js +1 -1
  15. package/dist/bitwrench-code-edit.esm.js +1 -1
  16. package/dist/bitwrench-code-edit.esm.min.js +1 -1
  17. package/dist/bitwrench-code-edit.umd.js +1 -1
  18. package/dist/bitwrench-code-edit.umd.min.js +1 -1
  19. package/dist/bitwrench-code-edit.umd.min.js.gz +0 -0
  20. package/dist/bitwrench-debug.js +1 -1
  21. package/dist/bitwrench-debug.min.js +1 -1
  22. package/dist/bitwrench-lean.cjs.js +41 -22
  23. package/dist/bitwrench-lean.cjs.min.js +4 -4
  24. package/dist/bitwrench-lean.cjs.min.js.gz +0 -0
  25. package/dist/bitwrench-lean.es5.js +43 -24
  26. package/dist/bitwrench-lean.es5.min.js +4 -4
  27. package/dist/bitwrench-lean.es5.min.js.gz +0 -0
  28. package/dist/bitwrench-lean.esm.js +41 -22
  29. package/dist/bitwrench-lean.esm.min.js +4 -4
  30. package/dist/bitwrench-lean.esm.min.js.gz +0 -0
  31. package/dist/bitwrench-lean.umd.js +41 -22
  32. package/dist/bitwrench-lean.umd.min.js +4 -4
  33. package/dist/bitwrench-lean.umd.min.js.gz +0 -0
  34. package/dist/bitwrench-util-css.cjs.js +1 -1
  35. package/dist/bitwrench-util-css.cjs.min.js +1 -1
  36. package/dist/bitwrench-util-css.es5.js +1 -1
  37. package/dist/bitwrench-util-css.es5.min.js +1 -1
  38. package/dist/bitwrench-util-css.esm.js +1 -1
  39. package/dist/bitwrench-util-css.esm.min.js +1 -1
  40. package/dist/bitwrench-util-css.umd.js +1 -1
  41. package/dist/bitwrench-util-css.umd.min.js +1 -1
  42. package/dist/bitwrench-util-css.umd.min.js.gz +0 -0
  43. package/dist/bitwrench.cjs.js +41 -22
  44. package/dist/bitwrench.cjs.min.js +6 -6
  45. package/dist/bitwrench.cjs.min.js.gz +0 -0
  46. package/dist/bitwrench.css +6 -6
  47. package/dist/bitwrench.d.ts +659 -0
  48. package/dist/bitwrench.es5.js +43 -24
  49. package/dist/bitwrench.es5.min.js +4 -4
  50. package/dist/bitwrench.es5.min.js.gz +0 -0
  51. package/dist/bitwrench.esm.js +41 -22
  52. package/dist/bitwrench.esm.min.js +4 -4
  53. package/dist/bitwrench.esm.min.js.gz +0 -0
  54. package/dist/bitwrench.min.css +1 -1
  55. package/dist/bitwrench.umd.js +41 -22
  56. package/dist/bitwrench.umd.min.js +6 -6
  57. package/dist/bitwrench.umd.min.js.gz +0 -0
  58. package/dist/builds.json +87 -87
  59. package/dist/bwserve.cjs.js +2 -2
  60. package/dist/bwserve.esm.js +2 -2
  61. package/dist/sri.json +46 -46
  62. package/docs/README.md +5 -3
  63. package/docs/bitwrench-mcp.md +1 -1
  64. package/docs/bitwrench-taco-schema-discussion.md +694 -0
  65. package/docs/bitwrench_api.md +4 -4
  66. package/docs/bitwrench_typescript_usage.md +441 -0
  67. package/docs/component-cheatsheet.md +1 -1
  68. package/docs/framework-translation-table.md +1 -1
  69. package/docs/llm-bitwrench-guide.md +28 -1
  70. package/docs/routing.md +1 -1
  71. package/docs/thinking-in-bitwrench.md +3 -3
  72. package/docs/tutorial-bwserve.md +1 -1
  73. package/docs/tutorial-website.md +1 -1
  74. package/package.json +7 -3
  75. package/readme.html +14 -8
  76. package/src/bitwrench-styles.js +17 -17
  77. package/src/bitwrench.d.ts +659 -0
  78. package/src/bitwrench.js +21 -2
  79. package/src/cli/serve.js +1 -0
  80. package/src/mcp/live.js +3 -1
  81. package/src/mcp/server.js +7 -7
  82. package/src/version.js +3 -3
package/readme.html CHANGED
@@ -3,12 +3,12 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <meta name="generator" content="bitwrench v2.0.24">
6
+ <meta name="generator" content="bitwrench v2.0.25">
7
7
  <title>bitwrench.js - README</title>
8
8
  <link rel="icon" type="image/x-icon" href="images/favicon.ico">
9
9
  <script src="dist/bitwrench.umd.min.js"></script>
10
- <script src="pages/shared-theme.js"></script>
11
10
  <script src="pages/shared-nav.js"></script>
11
+ <script src="pages/site.js"></script>
12
12
  <style>
13
13
  .quikdown-h1 { font-size:2em;font-weight:600;margin:.67em 0;text-align:left;color:#333 }
14
14
  .quikdown-h2 { font-size:1.5em;font-weight:600;margin:.83em 0;color:#333 }
@@ -72,7 +72,7 @@
72
72
  <a class="quikdown-a" href="https://opensource.org/licenses/BSD-2-Clause" rel="noopener noreferrer"><img class="quikdown-img" src="https://img.shields.io/badge/License-BSD%202--Clause-blue.svg" alt="License"></a>
73
73
  <a class="quikdown-a" href="https://www.npmjs.com/package/bitwrench" rel="noopener noreferrer"><img class="quikdown-img" src="https://img.shields.io/npm/v/bitwrench.svg?style=flat-square" alt="NPM version"></a>
74
74
  <a class="quikdown-a" href="https://github.com/deftio/bitwrench/actions/workflows/ci.yml" rel="noopener noreferrer"><img class="quikdown-img" src="https://github.com/deftio/bitwrench/actions/workflows/ci.yml/badge.svg" alt="CI"></a>
75
- <a class="quikdown-a" href="https://github.com/deftio/bitwrench" rel="noopener noreferrer"><img class="quikdown-img" src="https://img.shields.io/badge/coverage-96.3%25-brightgreen.svg" alt="Coverage"></a></p><p><a class="quikdown-a" href="https://deftio.github.io/bitwrench/pages/" rel="noopener noreferrer"><img class="quikdown-img" src="./images/bitwrench-logo-med.png" alt="bitwrench"></a></p><p>Bitwrench builds UI from plain JavaScript objects -- one format for components, styling, state, and server rendering, with no build step and zero dependencies.</p><pre class="quikdown-pre"><code class="language-javascript">// Describe UI as a JavaScript object (a &quot;TACO&quot;)
75
+ <a class="quikdown-a" href="https://github.com/deftio/bitwrench" rel="noopener noreferrer"><img class="quikdown-img" src="https://img.shields.io/badge/coverage-97.3%25-brightgreen.svg" alt="Coverage"></a></p><p><a class="quikdown-a" href="https://deftio.github.io/bitwrench/pages/" rel="noopener noreferrer"><img class="quikdown-img" src="./images/bitwrench-logo-med.png" alt="bitwrench"></a></p><p>Bitwrench builds UI from plain JavaScript objects -- one format for components, styling, state, and server rendering, with no build step and zero dependencies.</p><pre class="quikdown-pre"><code class="language-javascript">// Describe UI as a JavaScript object (a &quot;TACO&quot;)
76
76
  var page = {
77
77
  t: &#39;div&#39;, a: { class: &#39;card&#39; },
78
78
  c: [
@@ -86,13 +86,14 @@ bw.DOM(&#39;#app&#39;, page); // -&gt; live DOM
86
86
  bw.html(page); // -&gt; HTML string (Node.js, emails, SSR)</code></pre><p>Each object has four keys: <strong class="quikdown-strong">t</strong> (tag), <strong class="quikdown-strong">a</strong> (attributes), <strong class="quikdown-strong">c</strong> (content), <strong class="quikdown-strong">o</strong> (options for state/lifecycle). Nest them, loop them, compose them -- it&#39;s just JavaScript.</p><h3 class="quikdown-h3">Why bitwrench?</h3>
87
87
  <strong class="quikdown-strong">One file, everywhere.</strong> At ~40KB gzipped with zero dependencies, bitwrench runs on anything with a browser -- phones, tablets, Raspberry Pi, even ESP32 microcontrollers. The device serves a single HTML page and pushes data as JSON; bitwrench handles all rendering, styling, and state on the client. No Node.js, no build step, no internet connection required.</p><p>Structure, styling, state, and server rendering are all handled as JavaScript objects:</p><ul class="quikdown-ul">
88
88
  <li class="quikdown-li"><strong class="quikdown-strong">No build toolchain</strong> -- works with a <code class="quikdown-code">&lt;script&gt;</code> tag</li>
89
- <li class="quikdown-li"><strong class="quikdown-strong">50+ ready-made components</strong> -- buttons, tables, modals, forms, charts, toasts -- one <code class="quikdown-code">make*()</code> call each, returns a composable TACO</li>
89
+ <li class="quikdown-li"><strong class="quikdown-strong">Ready-made components</strong> -- buttons, tables, modals, forms, charts, toasts -- one <code class="quikdown-code">make*()</code> call each, returns a composable TACO</li>
90
90
  <li class="quikdown-li"><strong class="quikdown-strong">CSS from JavaScript</strong> -- <code class="quikdown-code">bw.css()</code> generates stylesheets, <code class="quikdown-code">bw.s()</code> composes inline styles, <code class="quikdown-code">bw.loadStyles()</code> derives a complete design system from 2 seed colors</li>
91
91
  <li class="quikdown-li"><strong class="quikdown-strong">Reactive state</strong> -- <code class="quikdown-code">o.state</code> + <code class="quikdown-code">o.render</code> + <code class="quikdown-code">bw.update()</code> for stateful components; <code class="quikdown-code">bw.pub()</code>/<code class="quikdown-code">bw.sub()</code> for cross-component messaging</li>
92
92
  <li class="quikdown-li"><strong class="quikdown-strong">Dual rendering</strong> -- same object renders to live DOM (<code class="quikdown-code">bw.DOM()</code>) or HTML string (<code class="quikdown-code">bw.html()</code>) for SSR, emails, or static sites</li>
93
93
  <li class="quikdown-li"><strong class="quikdown-strong">Server-driven UI</strong> -- push UI updates from any backend (Python, C, Rust, Go) over SSE via the biwrench bwserve protocol; <code class="quikdown-code">client.screenshot()</code> captures the page back as PNG/JPEG</li>
94
94
  <li class="quikdown-li"><strong class="quikdown-strong">CLI</strong> -- <code class="quikdown-code">bwcli</code> converts Markdown, HTML, and JSON to styled standalone pages</li>
95
95
  <li class="quikdown-li"><strong class="quikdown-strong">Debug tools</strong> -- live client and server debugging with remote incremental inspect, screenshots, and state updates</li>
96
+ <li class="quikdown-li"><strong class="quikdown-strong">TypeScript</strong> -- full type declarations ship with the package (<code class="quikdown-code">dist/bitwrench.d.ts</code>); see the <a class="quikdown-a" href="docs/bitwrench<em class="quikdown-em">typescript</em>usage.md">TypeScript Usage Guide</a></li>
96
97
  <li class="quikdown-li"><strong class="quikdown-strong">Utilities</strong> -- color interpolation, random data, lorem ipsum, cookies, URL params, file I/O</li>
97
98
  </ul><h3 class="quikdown-h3">Coming from other Frameworks</h3>
98
99
  <p>Bitwrench uses JavaScript equivalents for most forms of front-end development. Here is a quick mapping (see the <a class="quikdown-a" href="docs/README.md">docs</a> and <a class="quikdown-a" href="docs/thinking-in-bitwrench.md">Thinking in Bitwrench</a> for more details).</p><table class="quikdown-table">
@@ -144,6 +145,11 @@ bw.html(page); // -&gt; HTML string (Node.js, emails, SSR)</code
144
145
  <td class="quikdown-td">Build tooling</td>
145
146
  <td class="quikdown-td">Not needed -- open the HTML file</td>
146
147
  </tr>
148
+ <tr class="quikdown-tr">
149
+ <td class="quikdown-td">DefinitelyTyped / @types</td>
150
+ <td class="quikdown-td">Type declarations</td>
151
+ <td class="quikdown-td">Ships <code class="quikdown-code">dist/bitwrench.d.ts</code> -- nothing extra to install</td>
152
+ </tr>
147
153
  </tbody>
148
154
  </table><p>See the <a class="quikdown-a" href="docs/framework-translation-table.md">Framework Translation Table</a> for side-by-side code comparisons across 22 operations.</p><h2 class="quikdown-h2">Installation</h2>
149
155
  <p><pre class="quikdown-pre"><code class="language-bash">npm install bitwrench</code></pre></p><pre class="quikdown-pre"><code class="language-javascript">// ES module
@@ -355,7 +361,7 @@ curl -X POST http://localhost:9000 -d &#39;{&quot;type&quot;:&quot;patch&quot;,&
355
361
  </ul><p><strong class="quikdown-strong">Reference guides</strong> (in <code class="quikdown-code">docs/</code>):</p><ul class="quikdown-ul">
356
362
  <li class="quikdown-li"><a class="quikdown-a" href="docs/taco-format.md">TACO Format</a> -- the <code class="quikdown-code">{t, a, c, o}</code> object format</li>
357
363
  <li class="quikdown-li"><a class="quikdown-a" href="docs/state-management.md">State Management</a> -- three-level component model, stateful TACO, reactive state</li>
358
- <li class="quikdown-li"><a class="quikdown-a" href="docs/component-library.md">Component Library</a> -- all 50+ <code class="quikdown-code">make*()</code> functions with signatures and examples</li>
364
+ <li class="quikdown-li"><a class="quikdown-a" href="docs/component-library.md">Component Library</a> -- all <code class="quikdown-code">make*()</code> functions with signatures and examples</li>
359
365
  <li class="quikdown-li"><a class="quikdown-a" href="docs/theming.md">Theming</a> -- palette-driven theme generation, presets, design tokens</li>
360
366
  <li class="quikdown-li"><a class="quikdown-a" href="docs/cli.md">CLI</a> -- the <code class="quikdown-code">bwcli</code> command for file conversion and pipe server</li>
361
367
  <li class="quikdown-li"><a class="quikdown-a" href="docs/bwserve.md">bwserve</a> -- server-driven UI protocol (SSE, actions, embedded devices)</li>
@@ -365,7 +371,7 @@ curl -X POST http://localhost:9000 -d &#39;{&quot;type&quot;:&quot;patch&quot;,&
365
371
  <li class="quikdown-li"><a class="quikdown-a" href="docs/tutorial-embedded.md">ESP32 IoT Dashboard</a> -- embedded sensor dashboard with C macros</li>
366
372
  </ul><p><strong class="quikdown-strong">Interactive demos</strong> (live site):</p><ul class="quikdown-ul">
367
373
  <li class="quikdown-li"><a class="quikdown-a" href="https://deftio.github.io/bitwrench/pages/00-quick-start.html" rel="noopener noreferrer">Quick Start</a> -- first steps with <code class="quikdown-code">bw.DOM()</code></li>
368
- <li class="quikdown-li"><a class="quikdown-a" href="https://deftio.github.io/bitwrench/pages/01-components.html" rel="noopener noreferrer">Components</a> -- all 50+ UI components with live demos</li>
374
+ <li class="quikdown-li"><a class="quikdown-a" href="https://deftio.github.io/bitwrench/pages/01-components.html" rel="noopener noreferrer">Components</a> -- all UI components with live demos</li>
369
375
  <li class="quikdown-li"><a class="quikdown-a" href="https://deftio.github.io/bitwrench/pages/03-styling.html" rel="noopener noreferrer">Styling &amp; Theming</a> -- CSS generation, <code class="quikdown-code">bw.s()</code>, and theming strategies</li>
370
376
  <li class="quikdown-li"><a class="quikdown-a" href="https://deftio.github.io/bitwrench/pages/05-state.html" rel="noopener noreferrer">State &amp; Interactivity</a> -- state patterns and stateful TACO</li>
371
377
  <li class="quikdown-li"><a class="quikdown-a" href="https://deftio.github.io/bitwrench/pages/06-tic-tac-toe-tutorial.html" rel="noopener noreferrer">Tic Tac Toe Tutorial</a> -- step-by-step game with state management</li>
@@ -382,10 +388,10 @@ curl -X POST http://localhost:9000 -d &#39;{&quot;type&quot;:&quot;patch&quot;,&
382
388
  <li class="quikdown-li"><a class="quikdown-a" href="examples/client-server/">bwserve Counter</a> -- server-driven UI demo</li>
383
389
  <li class="quikdown-li"><a class="quikdown-a" href="examples/llm-chat/">LLM Chat</a> -- streaming chat via bwserve + Ollama/OpenAI</li>
384
390
  </ul><h2 class="quikdown-h2">FAQ</h2>
385
- <strong class="quikdown-strong">Is this a framework?</strong> -- No. Bitwrench is a library (~40KB gzipped). No lifecycle to learn, no project structure to follow. Import it, call functions, done.</p><p><strong class="quikdown-strong">How does bitwrench compare to React/Vue?</strong> -- They solve different problems at different scales. React and Vue provide a component model, virtual DOM, and ecosystem for large team-built SPAs. Bitwrench provides rendering and state primitives in a single file with no build step, aimed at single-page tools, dashboards, embedded devices, and server-driven UIs. They coexist fine -- use whichever fits the job.</p><p><strong class="quikdown-strong">How does CSS work?</strong> -- Bitwrench doesn&#39;t own your CSS. Use any external stylesheet, Tailwind, or CSS file you want -- bitwrench doesn&#39;t interfere. On top of that, <code class="quikdown-code">bw.css()</code> generates CSS from JS objects (with <code class="quikdown-code">@media</code>, <code class="quikdown-code">@keyframes</code>, pseudo-classes), <code class="quikdown-code">bw.s()</code> composes inline style objects, and <code class="quikdown-code">bw.loadStyles()</code> derives a complete design system from 2 seed colors. You can use all three together or none at all.</p><p><strong class="quikdown-strong">What&#39;s the difference between <code class="quikdown-code">bw.DOM()</code> and <code class="quikdown-code">bw.html()</code>?</strong> -- Same TACO input, two outputs. <code class="quikdown-code">bw.DOM(&#39;#app&#39;, taco)</code> mounts live DOM elements in a browser. <code class="quikdown-code">bw.html(taco)</code> returns an HTML string -- use it in Node.js scripts, email generators, static site builds, or anywhere you need markup without a browser. One object format, two rendering modes.</p><p><strong class="quikdown-strong">What is bwserve?</strong> -- bwserve lets any server push UI updates to a browser over SSE. The server sends TACO objects as JSON; the browser renders them. It&#39;s language-agnostic -- the server can be Python, Go, Rust, C, or a shell script. Anything that can write JSON to an HTTP response can drive a bitwrench UI. See the <a class="quikdown-a" href="docs/bwserve.md">bwserve docs</a>.</p><p><strong class="quikdown-strong">Can I use bitwrench on embedded devices?</strong> -- Yes -- this is a primary use case. An ESP32 or Raspberry Pi serves one HTML page with bitwrench loaded, then pushes sensor data as JSON patches over SSE. The device never generates HTML. See the <a class="quikdown-a" href="docs/tutorial-embedded.md">ESP32 tutorial</a>.</p><p><strong class="quikdown-strong">Can I use it with TypeScript?</strong> -- Yes. Type declarations are included. TACO objects are plain JSON-compatible objects that TypeScript infers naturally.</p><p><strong class="quikdown-strong">What about accessibility?</strong> -- BCCL components emit semantic HTML with ARIA attributes where applicable. You can add any <code class="quikdown-code">aria-*</code> attribute via <code class="quikdown-code">a: { &#39;aria-label&#39;: &#39;...&#39; }</code>.</p><h2 class="quikdown-h2">Development</h2>
391
+ <strong class="quikdown-strong">Is this a framework?</strong> -- No. Bitwrench is a library (~40KB gzipped). No lifecycle to learn, no project structure to follow. Import it, call functions, done.</p><p><strong class="quikdown-strong">How does bitwrench compare to React/Vue?</strong> -- They solve different problems at different scales. React and Vue provide a component model, virtual DOM, and ecosystem for large team-built SPAs. Bitwrench provides rendering and state primitives in a single file with no build step, aimed at single-page tools, dashboards, embedded devices, and server-driven UIs. They coexist fine -- use whichever fits the job.</p><p><strong class="quikdown-strong">How does CSS work?</strong> -- Bitwrench doesn&#39;t own your CSS. Use any external stylesheet, Tailwind, or CSS file you want -- bitwrench doesn&#39;t interfere. On top of that, <code class="quikdown-code">bw.css()</code> generates CSS from JS objects (with <code class="quikdown-code">@media</code>, <code class="quikdown-code">@keyframes</code>, pseudo-classes), <code class="quikdown-code">bw.s()</code> composes inline style objects, and <code class="quikdown-code">bw.loadStyles()</code> derives a complete design system from 2 seed colors. You can use all three together or none at all.</p><p><strong class="quikdown-strong">What&#39;s the difference between <code class="quikdown-code">bw.DOM()</code> and <code class="quikdown-code">bw.html()</code>?</strong> -- Same TACO input, two outputs. <code class="quikdown-code">bw.DOM(&#39;#app&#39;, taco)</code> mounts live DOM elements in a browser. <code class="quikdown-code">bw.html(taco)</code> returns an HTML string -- use it in Node.js scripts, email generators, static site builds, or anywhere you need markup without a browser. One object format, two rendering modes.</p><p><strong class="quikdown-strong">What is bwserve?</strong> -- bwserve lets any server push UI updates to a browser over SSE. The server sends TACO objects as JSON; the browser renders them. It&#39;s language-agnostic -- the server can be Python, Go, Rust, C, or a shell script. Anything that can write JSON to an HTTP response can drive a bitwrench UI. See the <a class="quikdown-a" href="docs/bwserve.md">bwserve docs</a>.</p><p><strong class="quikdown-strong">Can I use bitwrench on embedded devices?</strong> -- Yes -- this is a primary use case. An ESP32 or Raspberry Pi serves one HTML page with bitwrench loaded, then pushes sensor data as JSON patches over SSE. The device never generates HTML. See the <a class="quikdown-a" href="docs/tutorial-embedded.md">ESP32 tutorial</a>.</p><p><strong class="quikdown-strong">Can I use it with TypeScript?</strong> -- Yes. Type declarations ship with the package (<code class="quikdown-code">dist/bitwrench.d.ts</code>). TACO objects are plain JSON-compatible objects that TypeScript infers naturally. See the <a class="quikdown-a" href="docs/bitwrench<em class="quikdown-em">typescript</em>usage.md">TypeScript Usage Guide</a> for import patterns, typed configs, and examples.</p><p><strong class="quikdown-strong">What about accessibility?</strong> -- BCCL components emit semantic HTML with ARIA attributes where applicable. You can add any <code class="quikdown-code">aria-*</code> attribute via <code class="quikdown-code">a: { &#39;aria-label&#39;: &#39;...&#39; }</code>.</p><h2 class="quikdown-h2">Development</h2>
386
392
  <p><pre class="quikdown-pre"><code class="language-bash">npm install # install dev dependencies
387
393
  npm run build # build all dist formats (UMD, ESM, CJS, ES5)
388
- npm test # run unit tests (1400+ tests, 96% coverage)
394
+ npm test # run unit tests
389
395
  npm run test:cli # run CLI tests
390
396
  npm run test:e2e # run Playwright browser tests
391
397
  npm run lint # run ESLint
package/src/bitwrench-styles.js CHANGED
@@ -232,7 +232,7 @@ function generateTypographyThemed(scope, palette, layout) {
232
232
  'transition': 'color ' + mot.fast + ' ' + mot.easing
233
233
  };
234
234
  rules[_sx(scope, 'a:hover')] = {
235
- 'color': palette.primary.hover,
235
+ 'color': palette.tertiary.hover,
236
236
  'text-decoration': 'underline'
237
237
  };
238
238
  return rules;
@@ -412,7 +412,7 @@ function generateNavigation(scope, palette, layout) {
412
412
  'transition': 'color ' + layout.motion.fast + ' ' + layout.motion.easing + ', background-color ' + layout.motion.fast + ' ' + layout.motion.easing
413
413
  };
414
414
  rules[_sx(scope, '.bw_navbar_nav .bw_nav_link:hover')] = {
415
- 'color': palette.dark.base,
415
+ 'color': palette.tertiary.base,
416
416
  'background-color': palette.surfaceAlt
417
417
  };
418
418
  rules[_sx(scope, '.bw_navbar_nav .bw_nav_link.active')] = {
@@ -493,7 +493,7 @@ function generateTabs(scope, palette, layout) {
493
493
  'transition': 'color ' + mo.fast + ' ' + mo.easing + ', border-color ' + mo.fast + ' ' + mo.easing + ', background-color ' + mo.fast + ' ' + mo.easing
494
494
  };
495
495
  rules[_sx(scope, '.bw_nav_tabs .bw_nav_link:hover')] = {
496
- 'color': palette.dark.base,
496
+ 'color': palette.tertiary.base,
497
497
  'background-color': palette.surfaceAlt,
498
498
  'border-bottom-color': palette.light.border
499
499
  };
@@ -519,7 +519,7 @@ function generateListGroups(scope, palette, layout) {
519
519
  };
520
520
  rules[_sx(scope, 'a.bw_list_group_item:hover')] = {
521
521
  'background-color': palette.surfaceAlt,
522
- 'color': palette.dark.hover
522
+ 'color': palette.tertiary.base
523
523
  };
524
524
  rules[_sx(scope, '.bw_list_group_item.active')] = {
525
525
  'color': palette.primary.textOn,
@@ -620,11 +620,11 @@ function generateBreadcrumbThemed(scope, palette, layout) {
620
620
  'color': palette.secondary.base
621
621
  };
622
622
  rules[_sx(scope, '.bw_breadcrumb_item a')] = {
623
- 'color': palette.primary.base,
623
+ 'color': palette.tertiary.base,
624
624
  'transition': 'color ' + mo.fast + ' ' + mo.easing
625
625
  };
626
626
  rules[_sx(scope, '.bw_breadcrumb_item a:hover')] = {
627
- 'color': palette.primary.hover,
627
+ 'color': palette.tertiary.hover,
628
628
  'text-decoration': 'underline'
629
629
  };
630
630
  rules[_sx(scope, '.bw_breadcrumb_item.active')] = {
@@ -859,11 +859,11 @@ function generateStepperThemed(scope, palette) {
859
859
  'font-weight': '600'
860
860
  };
861
861
  rules[_sx(scope, '.bw_step_completed .bw_step_indicator')] = {
862
- 'background-color': palette.primary.base,
863
- 'color': palette.primary.textOn
862
+ 'background-color': palette.tertiary.base,
863
+ 'color': palette.tertiary.textOn
864
864
  };
865
- rules[_sx(scope, '.bw_step_completed .bw_step_label')] = { 'color': palette.primary.base };
866
- rules[_sx(scope, '.bw_step_completed + .bw_step::before')] = { 'background-color': palette.primary.base };
865
+ rules[_sx(scope, '.bw_step_completed .bw_step_label')] = { 'color': palette.tertiary.base };
866
+ rules[_sx(scope, '.bw_step_completed + .bw_step::before')] = { 'background-color': palette.tertiary.base };
867
867
  return rules;
868
868
  }
869
869
 
@@ -1125,14 +1125,14 @@ function generatePaletteClasses(scope, palette) {
1125
1125
  };
1126
1126
  });
1127
1127
 
1128
- // Text muted — always a neutral gray, never a brand color
1129
- rules[_sx(scope, '.bw_text_muted')] = { 'color': '#6c757d' };
1128
+ // Text muted — uses palette secondary for theme-aware muted text
1129
+ rules[_sx(scope, '.bw_text_muted')] = { 'color': palette.secondary.base };
1130
1130
 
1131
- // Common bg/text utilities that aren't per-variant
1132
- rules[_sx(scope, '.bw_bg_dark')] = { 'background-color': '#212529', 'color': '#f8f9fa' };
1133
- rules[_sx(scope, '.bw_bg_light')] = { 'background-color': '#f8f9fa', 'color': '#212529' };
1134
- rules[_sx(scope, '.bw_text_light')] = { 'color': '#f8f9fa' };
1135
- rules[_sx(scope, '.bw_text_dark')] = { 'color': '#212529' };
1131
+ // Common bg/text utilities — derive from palette for theme awareness
1132
+ rules[_sx(scope, '.bw_bg_dark')] = { 'background-color': palette.dark.base, 'color': palette.dark.textOn };
1133
+ rules[_sx(scope, '.bw_bg_light')] = { 'background-color': palette.light.base, 'color': palette.light.textOn };
1134
+ rules[_sx(scope, '.bw_text_light')] = { 'color': palette.light.base };
1135
+ rules[_sx(scope, '.bw_text_dark')] = { 'color': palette.dark.base };
1136
1136
 
1137
1137
  return rules;
1138
1138
  }