@zerotal/flow 1.7.4 → 1.7.5

package/CHANGELOG.md

@@ -13,6 +13,18 @@ change.
 
 ## [1.7.3] — 2026-08-20
 
+### Changed
+
+- **BREAKING — `this.title(…)` is removed.** Declare `static title` instead — a string, or a
+  function of the component: `static title = (c: SearchPage) => \`Search: ${c.query}\``. It is
+resolved on the server for every render and every patch, so a title that depends on state
+follows it without an action remembering to update it. `_titleValue` and the per-frame reset
+  go with it.
+
+  A call to `this.title(…)` on a component that declares its own `title` field now sets that
+  field rather than the document title, which is silent — search for `this.title(` before
+  upgrading.
+
 ### Fixed
 
 - **A bound password field silently discarded every keystroke.** The client-writable set was

package/api-surface.md

@@ -281,8 +281,6 @@ function registerComponent = (PageClass: typeof Component, path?: string) => voi
 
 function registerFlowEvent = <K extends EventName>(name: K, guard: (payload: unknown) => payload is FlowEvents[K]) => void
 
-function registerFlowModel = (name: string, ModelClass: typeof BaseModel) => void
-
 function registerForm = (FormClass: new () => Form) => void
 
 function registerSynth = (synth: Synth) => void
@@ -1089,12 +1087,8 @@ function __escAttr = (v: unknown) => string
 
 ## ./store  `(./src/store.ts)`
 
-function clientStore = () => Record<string, unknown>
-
 function defineStore = (initial: Record<string, unknown>) => void
 
-function initClientStore = (alpine: AlpineStores) => Record<string, unknown>
-
 interface FlowStore = {}
 
 ## ./testing  `(./src/testing.ts)`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerotal/flow",
-  "version": "1.7.4",
+  "version": "1.7.5",
   "license": "MIT",
   "maturity": "stable",
   "private": false,
@@ -47,15 +47,15 @@
     "@alpinejs/morph": "^3.14.9",
     "@alpinejs/persist": "^3.14.9",
     "@alpinejs/resize": "^3.14.9",
-    "@zerotal/client": "1.7.4",
-    "@zerotal/core": "1.7.4",
-    "@zerotal/orm": "1.7.4",
-    "@zerotal/validator": "1.7.4",
+    "@zerotal/client": "1.7.5",
+    "@zerotal/core": "1.7.5",
+    "@zerotal/orm": "1.7.5",
+    "@zerotal/validator": "1.7.5",
     "alpinejs": "^3.14.9",
     "typescript": "^5.8.0"
   },
   "devDependencies": {
-    "@zerotal/broadcasting": "1.7.4",
+    "@zerotal/broadcasting": "1.7.5",
     "@types/alpinejs": "^3.13.10",
     "@types/alpinejs__anchor": "^3.13.1",
     "@types/alpinejs__collapse": "^3.13.4",

package/src/client/bridge.ts

@@ -2612,6 +2612,23 @@ function _linkActive(href: string, path: string, exact = false): boolean {
   return h === path || (h.length > 1 && path.startsWith(h + "/"));
 }
 
+/**
+ * Mark a navigate link as the current page, for both kinds of reader.
+ *
+ * `data-current` styles it; `aria-current` is the only way anyone using a screen
+ * reader learns which of thirty nav items is the page they are on. Setting one
+ * without the other marks the link only for people who can see it.
+ */
+function _mark(el: Element, active: boolean): void {
+  if (active) {
+    el.setAttribute("data-current", "");
+    el.setAttribute("aria-current", "page");
+  } else {
+    el.removeAttribute("data-current");
+    el.removeAttribute("aria-current");
+  }
+}
+
 function _updateCurrentLinks(): void {
   const path = window.location.pathname;
 
@@ -2623,13 +2640,11 @@ function _updateCurrentLinks(): void {
   document.querySelectorAll("a[flow\\:navigate]").forEach((el) => {
     if (el.hasAttribute("flow:current.ignore")) return;
     if (el.hasAttribute("flow:current.force")) {
-      el.setAttribute("data-current", "");
+      _mark(el, true);
       return;
     }
     const exact = el.hasAttribute("flow:current.exact");
-    if (_linkActive(el.getAttribute("href") ?? "", path, exact))
-      el.setAttribute("data-current", "");
-    else el.removeAttribute("data-current");
+    _mark(el, _linkActive(el.getAttribute("href") ?? "", path, exact));
   });
 
   document.querySelectorAll("a[flow\\:navigate][flow\\:current]").forEach((el) => {

package/src/components.ts

@@ -250,7 +250,10 @@ export function Modal(props: ModalProps): HtmlNode {
   if (name) {
     overlay["flow:show"] = name;
     overlay["data-flow-modal"] = name;
-    overlay["x-trap"] = `$flow.${name}`; // trap focus while open (@alpinejs/focus)
+    // `.noscroll` locks the body while the dialog is open. Without it focus is
+    // trapped correctly and the page behind still scrolls under a finger or a
+    // wheel, which on a phone reads as the dialog having broken the page.
+    overlay["x-trap.noscroll"] = `$flow.${name}`; // focus trap + scroll lock (@alpinejs/focus)
     if (title) overlay["aria-labelledby"] = titleId;
   }
   if (!open) overlay["style"] = { display: "none" };
@@ -1482,7 +1485,7 @@ export function Drawer(props: DrawerProps): HtmlNode {
   };
   if (name) {
     panelOut["data-flow-modal"] = name; // Escape-to-close (shared bridge handler)
-    panelOut["x-trap"] = shownExpr; // trap focus while open
+    panelOut["x-trap.noscroll"] = shownExpr; // focus trap + scroll lock, as Modal
     if (title) panelOut["aria-labelledby"] = titleId;
   }