tempestweb 0.5.2__tar.gz → 0.5.3__tar.gz

{tempestweb-0.5.2 → tempestweb-0.5.3}/CHANGELOG.md

@@ -4,6 +4,28 @@ All notable changes to **tempestweb** are documented here. Format follows
 [Keep a Changelog](https://keepachangelog.com/); this project adheres to semantic
 versioning.
 
+## [0.5.3] — 2026-06-13
+
+### Fixed
+
+- **`Checkbox` now renders its label as visible text on the web.** The DOM
+  renderer mapped `Checkbox` to a bare `<input type=checkbox>` and put its
+  `label` on `aria-label` only, so labelled checkboxes (todo items, settings
+  toggles) showed as empty boxes. A `Checkbox` now renders as a `<label>`
+  wrapping the real `<input>` plus a caption text node: the box and its caption
+  lay out as one tidy row (the wrapper also gives the input its accessible name
+  natively). The `<label>` is the keyed, path-addressed element; the nested
+  input carries `checked` and fires `change`, which bubbles to the label for
+  event delegation. An explicit widget `Style` still wins.
+
+### Examples
+
+- **Fixed three examples that passed `children=` to `Container`.** `Container`
+  holds a single `child`, not a `children` list (that is `Column`/`Row`/`Stack`).
+  Pydantic silently dropped the unknown kwarg, so the container rendered empty:
+  `list_demo` lost its row text (1000-item list showed blank rows), `gesture_demo`
+  lost its "swipe or tap me" hint, and `anim_demo` carried a no-op `children=[]`.
+
 ## [0.5.2] — 2026-06-13
 
 ### Changed

{tempestweb-0.5.2 → tempestweb-0.5.3}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: tempestweb
-Version: 0.5.2
+Version: 0.5.3
 Summary: Build web apps in typed Python — one tree, a DOM renderer, two execution modes (WASM + server).
 Author-email: Mauricio Benjamin <mauricio.benjamin@reloverelations.com>
 License: MIT
@@ -60,6 +60,12 @@ demos (stopwatch, forms, data table, kanban, chat, theming, i18n, canvas, native
 capabilities, observability, PWA/WebPush, and a server-mode walkthrough), each
 running unchanged in both modes.
 
+Building something real? Read the **[App architecture & best practices](https://mauriciobenjamin700.github.io/tempestweb/best-practices/)**
+guide ([EN](https://mauriciobenjamin700.github.io/tempestweb/en/best-practices/)) —
+the ideal layered structure (routes · pages · components · styles · controllers ·
+services · storages · schemas · utils · core), mirroring `tempest-fastapi-sdk`, so
+your app doesn't rot into garbage code.
+
 ## How it works
 
 ```text

{tempestweb-0.5.2 → tempestweb-0.5.3}/README.md

@@ -32,6 +32,12 @@ demos (stopwatch, forms, data table, kanban, chat, theming, i18n, canvas, native
 capabilities, observability, PWA/WebPush, and a server-mode walkthrough), each
 running unchanged in both modes.
 
+Building something real? Read the **[App architecture & best practices](https://mauriciobenjamin700.github.io/tempestweb/best-practices/)**
+guide ([EN](https://mauriciobenjamin700.github.io/tempestweb/en/best-practices/)) —
+the ideal layered structure (routes · pages · components · styles · controllers ·
+services · storages · schemas · utils · core), mirroring `tempest-fastapi-sdk`, so
+your app doesn't rot into garbage code.
+
 ## How it works
 
 ```text

{tempestweb-0.5.2 → tempestweb-0.5.3}/client/dom.js

@@ -32,7 +32,12 @@ const TAG_BY_TYPE = Object.freeze({
   Text: "span",
   Button: "button",
   Input: "input",
-  Checkbox: "input",
+  // A Checkbox renders as a <label> wrapping a real <input type=checkbox> plus
+  // its caption text, so the box and its label show side by side and the input
+  // gets its accessible name natively. The <label> is the keyed, path-addressed
+  // element; the input it wraps is renderer-internal (Checkbox is an IR leaf, so
+  // no patch path ever descends into it).
+  Checkbox: "label",
   Image: "img",
 });
 
@@ -89,14 +94,15 @@ function applyProps(el, props) {
       el.removeAttribute("style");
     }
   }
-  // Text-bearing props. A Checkbox is an <input> and cannot hold text, so its
-  // label rides as an accessible name instead of textContent.
+  // Text-bearing props. A Checkbox is a <label> wrapping an <input>, so its
+  // caption is set as a trailing text node (see setCheckboxLabel) rather than
+  // overwriting textContent, which would drop the nested input.
   if ("content" in props) {
     el.textContent = props.content == null ? "" : String(props.content);
   }
   if ("label" in props) {
     if (type === "Checkbox") {
-      el.setAttribute("aria-label", props.label == null ? "" : String(props.label));
+      setCheckboxLabel(el, props.label == null ? "" : String(props.label));
     } else {
       el.textContent = props.label == null ? "" : String(props.label);
     }
@@ -188,6 +194,46 @@ function applyLazyProps(el, type, props) {
   el.setAttribute("data-tw-window-start", String(start ?? 0));
 }
 
+/**
+ * Get (or lazily create) the real ``<input type=checkbox>`` nested inside a
+ * Checkbox's ``<label>`` wrapper. The label is the keyed, path-addressed
+ * element; this nested input carries the actual ``checked`` state and fires the
+ * native ``change`` event (which bubbles up to the keyed label for delegation).
+ *
+ * @param {HTMLElement} el  The Checkbox ``<label>`` element.
+ * @returns {HTMLInputElement}  The nested checkbox input.
+ */
+function ensureCheckboxInput(el) {
+  let input = /** @type {HTMLInputElement|null} */ (el.querySelector("input"));
+  if (input == null) {
+    input = /** @type {HTMLInputElement} */ (document.createElement("input"));
+    input.setAttribute("type", "checkbox");
+    el.insertBefore(input, el.firstChild);
+  }
+  return input;
+}
+
+/**
+ * Set a Checkbox's visible caption, kept as a single text node after the nested
+ * input so the box and its label render side by side. Wrapping the input in the
+ * ``<label>`` also gives it its accessible name natively (no ``aria-label``).
+ *
+ * @param {HTMLElement} el    The Checkbox ``<label>`` element.
+ * @param {string} text       The caption text (``""`` clears it).
+ * @returns {void}
+ */
+function setCheckboxLabel(el, text) {
+  const input = ensureCheckboxInput(el);
+  for (const node of Array.from(el.childNodes)) {
+    if (node !== input) {
+      el.removeChild(node);
+    }
+  }
+  if (text) {
+    el.appendChild(document.createTextNode(text));
+  }
+}
+
 function applyControlProps(el, type, props) {
   if (type === "Input") {
     el.setAttribute("type", props.secure ? "password" : "text");
@@ -201,9 +247,29 @@ function applyControlProps(el, type, props) {
       el.setAttribute("maxlength", String(props.max_length));
     }
   } else if (type === "Checkbox") {
-    el.setAttribute("type", "checkbox");
+    const input = ensureCheckboxInput(el);
     if ("checked" in props) {
-      el.checked = Boolean(props.checked);
+      input.checked = Boolean(props.checked);
+    }
+    // Lay the box and caption out on one line, as a block-level row so stacked
+    // checkboxes each get their own line (an inline default would let adjacent
+    // labels flow together in a non-flex parent). Defaults only — an explicit
+    // Style on the widget (applied just before this) wins. Re-applied here on
+    // every update because a `style` patch resets the element's inline cssText.
+    if (!el.style.display) {
+      el.style.display = "flex";
+    }
+    if (!el.style.alignItems) {
+      el.style.alignItems = "center";
+    }
+    if (!el.style.gap) {
+      el.style.gap = "0.4em";
+    }
+    // Size to the box + caption. Without this the <label>, as a flex item of a
+    // column, collapses to the input's width and the caption overflows onto the
+    // next row; fit-content keeps it a tidy one-line row instead of stretching.
+    if (!el.style.width) {
+      el.style.width = "fit-content";
     }
   } else if (type === "Image") {
     if ("src" in props && props.src != null) {
@@ -263,6 +329,8 @@ function applyUpdate(root, patch) {
   for (const key of patch.unset_props ?? []) {
     if (key === "style") {
       el.removeAttribute("style");
+    } else if (key === "label" && el.getAttribute(TYPE_ATTR) === "Checkbox") {
+      setCheckboxLabel(el, "");
     } else if (key === "content" || key === "label") {
       el.textContent = "";
     }

{tempestweb-0.5.2 → tempestweb-0.5.3}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "tempestweb"
-version = "0.5.2"
+version = "0.5.3"
 description = "Build web apps in typed Python — one tree, a DOM renderer, two execution modes (WASM + server)."
 readme = "README.md"
 requires-python = ">=3.11"

{tempestweb-0.5.2 → tempestweb-0.5.3}/tests/client/dom.test.js

@@ -2,7 +2,7 @@
 import { test } from "node:test";
 import assert from "node:assert/strict";
 import { fixture, freshDom } from "./setup.js";
-import { applyPatches, buildElement, KEY_ATTR } from "../../client/dom.js";
+import { applyPatches, buildElement, KEY_ATTR, TYPE_ATTR } from "../../client/dom.js";
 
 /** Install jsdom's `document` globally so dom.js's `document.createElement` works. */
 function withDocument() {
@@ -160,7 +160,7 @@ test("a secure Input renders type=password", () => {
   assert.equal(el.getAttribute("type"), "password");
 });
 
-test("Checkbox builds an <input type=checkbox> reflecting checked", () => {
+test("Checkbox builds a <label> wrapping a checkbox input plus visible caption", () => {
   withDocument();
   const el = buildElement({
     type: "Checkbox",
@@ -168,10 +168,29 @@ test("Checkbox builds an <input type=checkbox> reflecting checked", () => {
     props: { checked: true, label: "Agree" },
     children: [],
   });
-  assert.equal(el.tagName, "INPUT");
-  assert.equal(el.getAttribute("type"), "checkbox");
-  assert.equal(el.checked, true);
-  assert.equal(el.getAttribute("aria-label"), "Agree");
+  // The keyed, path-addressed element is the <label>; the real input is nested.
+  assert.equal(el.tagName, "LABEL");
+  assert.equal(el.getAttribute(TYPE_ATTR), "Checkbox");
+  const input = el.querySelector("input");
+  assert.equal(input.getAttribute("type"), "checkbox");
+  assert.equal(input.checked, true);
+  // The caption is visible text (the <label> gives the input its name natively).
+  assert.equal(el.textContent.trim(), "Agree");
+});
+
+test("Checkbox Update toggles checked and relabels without dropping the input", () => {
+  withDocument();
+  const el = buildElement({
+    type: "Checkbox",
+    key: "c",
+    props: { checked: false, label: "Old" },
+    children: [],
+  });
+  applyPatches(el, [{ path: [], set_props: { checked: true, label: "New" } }]);
+  const input = el.querySelector("input");
+  assert.equal(el.querySelectorAll("input").length, 1, "exactly one nested input");
+  assert.equal(input.checked, true);
+  assert.equal(el.textContent.trim(), "New");
 });
 
 test("Image builds an <img> with src/alt", () => {