@livx.cc/bare-v3 0.1.0-alpha.38 → 0.1.0-alpha.40

package/dist/elements/date-picker.js

@@ -36,9 +36,9 @@ function addMonths(iso, count) {
 var daysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
 var STYLE_ID = "b3-date-picker-style";
 var STYLE = `
-.b3-date-picker{display:block;position:relative;color:var(--b3-color-text,#202923);
+.b3-date-picker{container:b3-date-picker / inline-size;display:block;position:relative;color:var(--b3-color-text,#202923);
   background:var(--b3-color-surface,#fff);border:1px solid var(--b3-color-border,#d5dbd3);
-  border-radius:var(--b3-radius,.75rem);padding:var(--b3-space,1rem);
+  border-radius:var(--b3-radius,.75rem);padding:var(--b3-space,1rem) min(var(--b3-space,1rem),4%);
   -webkit-user-select:none;user-select:none;}
 .b3-date-picker > :not(.b3-date-picker-ui){display:none;}
 /* A required control that is not RENDERED cannot be focused, so Chrome refuses to submit the
@@ -49,8 +49,8 @@ var STYLE = `
   inset-block-start:var(--b3-space,1rem);inset-inline-start:var(--b3-space,1rem);
   width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;white-space:nowrap;}
 .b3-date-picker-bar{display:flex;align-items:center;gap:.5rem;margin-block-end:.5rem;}
-.b3-date-picker-title{flex:1;text-align:center;font-weight:600;}
-.b3-date-picker-nav{display:inline-flex;align-items:center;justify-content:center;
+.b3-date-picker-title{flex:1;min-inline-size:0;overflow-wrap:anywhere;text-align:center;font-weight:600;}
+.b3-date-picker-nav{flex:none;display:inline-flex;align-items:center;justify-content:center;
   min-width:var(--b3-touch,44px);min-height:var(--b3-touch,44px);font:inherit;line-height:1;
   border:1px solid var(--b3-color-border,#d5dbd3);border-radius:var(--b3-radius-small,.375rem);
   background:var(--b3-color-surface,#fff);color:inherit;cursor:pointer;}
@@ -59,7 +59,12 @@ var STYLE = `
 .b3-date-picker:dir(rtl) .b3-date-picker-nav::before{content:"\\203A";}
 .b3-date-picker:dir(rtl) .b3-date-picker-nav[data-b3-step="1"]::before{content:"\\2039";}
 .b3-date-picker-nav[disabled]{opacity:.4;cursor:default;}
-.b3-date-picker-grid{width:100%;border-collapse:collapse;table-layout:fixed;}
+@container b3-date-picker (max-width:18rem){
+  .b3-date-picker-bar{flex-wrap:wrap;justify-content:space-between;}
+  .b3-date-picker-title{order:-1;flex-basis:100%;}
+}
+.b3-date-picker-scroll{overflow:auto;overscroll-behavior-inline:contain;}
+.b3-date-picker-grid{min-inline-size:21ch;width:100%;border-collapse:collapse;table-layout:fixed;}
 .b3-date-picker-grid th{font-weight:500;font-size:.8125em;padding-block:.25rem;
   color:var(--b3-color-muted,#5d6b60);}
 .b3-date-picker-grid td{padding:1px;text-align:center;}
@@ -102,6 +107,7 @@ class B3DatePicker extends Base {
   #bar = null;
   #title = null;
   #ui = null;
+  #gridScroll = null;
   #observer = null;
   #titleId = `b3-date-picker-title-${Math.random().toString(36).slice(2, 8)}`;
   get value() {
@@ -349,10 +355,16 @@ class B3DatePicker extends Base {
       row.append(document.createElement("td"));
     body.append(row);
     table.append(body);
-    if (this.#grid?.parentNode === this.#ui)
+    if (!this.#gridScroll) {
+      this.#gridScroll = document.createElement("div");
+      this.#gridScroll.className = "b3-date-picker-scroll";
+    }
+    if (this.#gridScroll.parentNode !== this.#ui)
+      this.#ui.append(this.#gridScroll);
+    if (this.#grid?.parentNode === this.#gridScroll)
       this.#grid.replaceWith(table);
     else
-      this.#ui.append(table);
+      this.#gridScroll.append(table);
     this.#grid = table;
   }
   #ensureBar() {

package/dist/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.0-alpha.38",
+  "version": "0.1.0-alpha.40",
   "cssSha256": "d8da259da7aac4ff4c65150029fde71735d8628603359216cf86fb7047246a92",
   "classes": [
     "b3-accordion",
@@ -175,7 +175,7 @@
       "classes": [
         "b3-row"
       ],
-      "guidance": "Use li inside ul/ol. Direct b3-row children remove native list indentation; ordinary prose lists keep it. The row supplies spacing/dividers; app code owns state, ordering and persistence.\n\nComposition: for a short label plus actions, use b3-row b3-split. For supporting notes, use the stacked example below: b3-row b3-stack stretches children and honors --b3-space; a nested b3-split holds primary metadata/value/actions, and the note gets the full width below. Avoid squeezing long notes beside fixed controls. Inset content only when adding an enclosing border/surface. Keep secondary actions readable and visually subordinate.\n\nLists: show useful rows before large summaries, with a short count and truthful empty state. Never invent user history. If reviewing is primary, use one disclosed add flow (native details/summary with b3-accordion); read form-composition.md. Task queues should show compact rows and reveal editing fields only for the edited item. Use existing disclosure/dialog semantics, not new density utilities. Check populated phone/desktop layouts, long notes and internal overflow.\n\nEditing: keep focused controls and caret/selection stable. Save drafts synchronously before replacing rows. Keep an edited row present while focus remains inside it, even if it stops matching a filter; read editable-filtered-rows.md for Tab/blur and exit timing. Give controls immutable identity independent of changing labels/actions: Edit → Done → Edit must reopen correctly. Preserve checkbox focus on completion; after deletion focus a surviving action or add control. Verify activeElement and persisted values, not just page width. Playground #row resets local state on reload.",
+      "guidance": "Use li inside ul/ol. Direct b3-row children remove native list indentation; ordinary prose lists keep it. The row supplies spacing/dividers; app code owns state, ordering and persistence.\n\nComposition: for a short label plus actions, use b3-row b3-split. For supporting notes, use the stacked example below: b3-row b3-stack stretches children and honors --b3-space; a nested b3-split holds primary metadata/value/actions, and the note gets the full width below. Avoid squeezing long notes beside fixed controls. Inset content only when adding an enclosing border/surface. Keep secondary actions readable and visually subordinate.\n\nLists: show useful rows before large summaries, with a short count and truthful empty state. Never invent user history. If reviewing is primary, use one disclosed add flow (native details/summary with b3-accordion); read form-composition.md. Task queues should show compact rows and reveal editing fields only for the edited item. Use existing disclosure/dialog semantics, not new density utilities. Check populated phone/desktop layouts, long notes and internal overflow.\n\nEditing: keep focused controls and caret/selection stable. Save drafts synchronously before replacing rows. Keep an edited row present while focus remains inside it, even if it stops matching a filter; read editable-filtered-rows.md for Tab/blur and exit timing. Give controls immutable identity independent of changing labels/actions: Edit → Done → Edit must reopen correctly. Checkbox completion: update the existing input/row and counts in place; never rebuild the list on change. If filtering hides the focused row, focus the next visible checkbox or stable add/filter control. See the concrete checkbox pattern in editable-filtered-rows.md. After deletion focus a surviving action or add control. Verify activeElement and persisted values, not just page width. Playground #row resets local state on reload.",
       "example": "<ul>\n  <li class=\"b3-row b3-stack\" style=\"--b3-space:.5rem\">\n    <div class=\"b3-split\">\n      <strong>Groceries</strong>\n      <div class=\"b3-cluster\">\n        <strong>$12.50</strong>\n        <button class=\"b3-button\" data-b3-emphasis=\"quiet\" aria-label=\"Details for groceries\">Details</button>\n      </div>\n    </div>\n    <p class=\"b3-muted\">Weekly shop and supplies for the shared kitchen.</p>\n  </li>\n</ul>"
     },
     {

package/dist/references/date-picker.md

@@ -76,6 +76,10 @@ without a framework wrapper.
 
 The element never selects on its own and never closes anything: it reports, and the owner decides.
 
+### Narrow layouts and enlarged text
+
+The month heading stacks above navigation when its container is narrow. Day columns keep a readable minimum width; the calendar scrolls horizontally within the picker when enlarged text cannot fit seven columns. Keep that scroll region intact. Roving keyboard focus reveals the focused day; do not shrink the font to force the calendar into a phone width.
+
 ### Decorating days
 
 There is no shadow root and every day is `td[data-b3-date="YYYY-MM-DD"]`, so per-day marks — a

package/dist/references/editable-filtered-rows.md

@@ -29,6 +29,31 @@ list.addEventListener('focusout', event => {
 
 The timeout defers only filtering. Never defer validation, state updates or persistence to it. Preserve invalid or unfinished field text so users can correct it; do not normalize on every keystroke. In reactive UI, preserve stable row keys and the same focus policy.
 
+## Checkbox completion: update the existing row
+
+Do not rebuild the list with `innerHTML` or `replaceChildren` on checkbox change: that removes the focused input, so the next Space/Tab starts from the page instead of the task. Keep the same checkbox node (stable keys in a framework). Commit the checked state, update counts and row styling in place, then apply the filter. When completion hides the focused row, move focus to the next visible checkbox, then the previous one, then a stable add/filter control. Do not steal focus for background updates.
+
+Here `checkbox`, `row`, `list`, and `addControl` are existing DOM nodes. `commitChecked` and `updateCountsAndFilter` are app-owned functions; the latter updates text/hidden attributes without replacing rows. Commit before hiding; on failure roll back the checkbox and announce the error.
+
+```js
+checkbox.addEventListener('change', () => {
+  const ownedFocus = row.contains(document.activeElement);
+  const rows = [...list.children];
+  const index = rows.indexOf(row);
+  commitChecked(row.dataset.id, checkbox.checked);
+  row.toggleAttribute('data-complete', checkbox.checked);
+  updateCountsAndFilter();
+  if (!ownedFocus || !row.hidden) return;
+  const neighbors = [...rows.slice(index + 1), ...rows.slice(0, index).reverse()];
+  const next = neighbors.filter(el => !el.hidden)
+    .map(el => el.querySelector('input[type="checkbox"]'))
+    .find(el => el && !el.disabled);
+  (next || addControl).focus();
+});
+```
+
+Check with real keyboard input: in All, focus a checkbox and press Space twice; the same input remains focused and toggles both times. In To do, completion hides that row and focus reaches a surviving checkbox; completing the final row reaches the add/filter control. Also verify persistence after reload. The playground's Lists → “Before you head out” demonstrates stable rows and filter fallback (local example state only).
+
 ## Explicit Save, Cancel and Delete
 
 Replacing an editor also removes its focused Save/Cancel button. Complete persistence and rendering/filtering first, then choose a connected, visible destination. On Save/Cancel prefer that row's new Edit button; if the row is hidden or removed, use a surviving row action or the stable add/filter control. Never select the row being deleted as its own fallback. Move focus only when the changed row owned it.

package/dist/references/row.md

@@ -6,7 +6,7 @@ Composition: for a short label plus actions, use b3-row b3-split. For supporting
 
 Lists: show useful rows before large summaries, with a short count and truthful empty state. Never invent user history. If reviewing is primary, use one disclosed add flow (native details/summary with b3-accordion); read form-composition.md. Task queues should show compact rows and reveal editing fields only for the edited item. Use existing disclosure/dialog semantics, not new density utilities. Check populated phone/desktop layouts, long notes and internal overflow.
 
-Editing: keep focused controls and caret/selection stable. Save drafts synchronously before replacing rows. Keep an edited row present while focus remains inside it, even if it stops matching a filter; read editable-filtered-rows.md for Tab/blur and exit timing. Give controls immutable identity independent of changing labels/actions: Edit → Done → Edit must reopen correctly. Preserve checkbox focus on completion; after deletion focus a surviving action or add control. Verify activeElement and persisted values, not just page width. Playground #row resets local state on reload.
+Editing: keep focused controls and caret/selection stable. Save drafts synchronously before replacing rows. Keep an edited row present while focus remains inside it, even if it stops matching a filter; read editable-filtered-rows.md for Tab/blur and exit timing. Give controls immutable identity independent of changing labels/actions: Edit → Done → Edit must reopen correctly. Checkbox completion: update the existing input/row and counts in place; never rebuild the list on change. If filtering hides the focused row, focus the next visible checkbox or stable add/filter control. See the concrete checkbox pattern in editable-filtered-rows.md. After deletion focus a surviving action or add control. Verify activeElement and persisted values, not just page width. Playground #row resets local state on reload.
 
 Classes: b3-row
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livx.cc/bare-v3",
-  "version": "0.1.0-alpha.38",
+  "version": "0.1.0-alpha.40",
   "type": "module",
   "files": [
     "dist",