@livx.cc/bare-v3 0.1.0-alpha.130 → 0.1.0-alpha.131

package/dist/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.0-alpha.130",
+  "version": "0.1.0-alpha.131",
   "cssSha256": "e2b93c77818e20aaa2d051b5110f9975103b652a654cf8fb8447fcfb895fd79d",
   "classes": [
     "b3-accordion",
@@ -119,8 +119,8 @@
       "classes": [
         "b3-root"
       ],
-      "guidance": "Place b3-root on html to synchronize the document canvas and native controls. Set data-b3-theme=\"dark\" explicitly for dark mode. A nested root inherits its parent theme and tokens; set data-b3-theme on it only to force a different theme. Override complete CSS values in --b3-* properties. Consumer CSS is unlayered and wins over library defaults. Scope custom palette overrides to each theme: unlayered :root token overrides beat layered library dark defaults. Use .b3-root:not([data-b3-theme=\"dark\"]) for light-only colors and .b3-root[data-b3-theme=\"dark\"] for dark overrides. Set foreground/background pairs together. Keep theme-invariant font, radius and spacing overrides outside light/dark selectors so switching theme preserves the app identity. Custom surfaces should use semantic color tokens, not a fixed light translucent fill behind theme-dependent text. Borders: --b3-color-border is the soft edge for cards, dividers, rows and bubbles; --b3-color-border-strong is the text-input edge (b3-input, textarea, select, b3-input-group, the composer field), kept at least 3:1 against both surface and canvas. Override both per theme; focus and error states keep their own colors. Check ordinary text at least 4.5:1 against its actual backing in every theme/state, including muted badges and selected filters. For translucent fills, composite over the real surface; a passing accent-on-white pair does not qualify an accent-tinted badge. Leave margin above the threshold. Density: data-b3-density=\"compact\" on the root tightens controls, nav, headings, avatars and messages for pointer-first apps; \"auto\" applies it only under a fine pointer on a wide viewport and keeps touch sizing on phones. For nested rounded surfaces with an even inset, derive the inner radius from the outer radius minus padding and border, clamped at zero. File-selector buttons and command-palette items follow this relationship. Match focus indicators to the element shape; keep surface colors theme-aware. Enabled native buttons inherit surrounding text color by default, including custom card actions; explicit component/app colors still win. Disabled native controls retain browser disabled styling. Theme verification: explicitly set data-b3-theme to light and dark and inspect actual canvas/text colors, not only color-scheme. System preference alone does not set this attribute; the host or app chooses it. Test custom palettes in both states. A dark native control on a fixed light canvas is not a completed dark theme.",
-      "example": "<html class=\"b3-root\" data-b3-theme=\"dark\">\n<style>\n/* Identity applies in both themes; scope custom palette values separately. */\n.b3-root {\n  --b3-font-body: system-ui, sans-serif;\n  --b3-font-display: Georgia, serif;\n  --b3-radius: 0.5rem;\n}\n.app-panel {\n  color: var(--b3-color-text);\n  background: var(--b3-color-surface);\n}\n</style>"
+      "guidance": "Place b3-root on html to synchronize the document canvas and native controls. Set data-b3-theme=\"dark\" explicitly for dark mode. A nested root inherits its parent theme and tokens; set data-b3-theme on it only to force a different theme. Override complete CSS values in --b3-* properties. Consumer CSS is unlayered and wins over library defaults. Scope custom palette overrides to each theme: unlayered :root token overrides beat layered library dark defaults. Use .b3-root:not([data-b3-theme=\"dark\"]) for light-only colors and .b3-root[data-b3-theme=\"dark\"] for dark overrides. Set --b3-color-accent and --b3-color-on-accent together in each theme; changing only accent can leave dark text on a dark button. Set other foreground/background pairs together. Keep theme-invariant font, radius and spacing overrides outside light/dark selectors so switching theme preserves the app identity. Custom surfaces should use semantic color tokens, not a fixed light translucent fill behind theme-dependent text. Borders: --b3-color-border is the soft edge for cards, dividers, rows and bubbles; --b3-color-border-strong is the text-input edge (b3-input, textarea, select, b3-input-group, the composer field), kept at least 3:1 against both surface and canvas. Override both per theme; focus and error states keep their own colors. Check ordinary text at least 4.5:1 against its actual backing in every theme/state, including muted badges and selected filters. For translucent fills, composite over the real surface; a passing accent-on-white pair does not qualify an accent-tinted badge. Leave margin above the threshold. Density: data-b3-density=\"compact\" on the root tightens controls, nav, headings, avatars and messages for pointer-first apps; \"auto\" applies it only under a fine pointer on a wide viewport and keeps touch sizing on phones. For nested rounded surfaces with an even inset, derive the inner radius from the outer radius minus padding and border, clamped at zero. File-selector buttons and command-palette items follow this relationship. Match focus indicators to the element shape; keep surface colors theme-aware. Enabled native buttons inherit surrounding text color by default, including custom card actions; explicit component/app colors still win. Disabled native controls retain browser disabled styling. Theme verification: explicitly set data-b3-theme to light and dark and inspect actual canvas/text colors, not only color-scheme. System preference alone does not set this attribute; the host or app chooses it. Test custom palettes in both states. A dark native control on a fixed light canvas is not a completed dark theme.",
+      "example": "<html class=\"b3-root\" data-b3-theme=\"dark\">\n<style>\n/* Identity applies in both themes; scope custom palette values separately. */\n.b3-root {\n  --b3-font-body: system-ui, sans-serif;\n  --b3-font-display: Georgia, serif;\n  --b3-radius: 0.5rem;\n}\n.b3-root:not([data-b3-theme=\"dark\"]) {\n  --b3-color-accent: #2f4f3a;\n  --b3-color-on-accent: #ffffff;\n}\n.b3-root[data-b3-theme=\"dark\"] {\n  --b3-color-accent: #aadbb8;\n  --b3-color-on-accent: #132b1b;\n}\n.app-panel {\n  color: var(--b3-color-text);\n  background: var(--b3-color-surface);\n}\n</style>"
     },
     {
       "id": "layout",

package/dist/references/cross-screen.md

@@ -29,7 +29,7 @@ Choose a semantic composition:
 
 Use named CSS for app-specific composition, not a second utility vocabulary. Start with intrinsic wrapping and content bounds. Preserve the atoms’ shrink behavior: do not add an unconditional rem-based min-width to a field or peer. Use a flexible basis for preferred width; if a minimum is necessary, cap it to the available inline size. Check narrow layouts with enlarged text, where rem-based minimums grow but the viewport does not. Add a breakpoint only when the interaction or information hierarchy needs a real mode change. Do not shrink text, remove labels, duplicate a whole screen or create a phone frame to make a desktop layout fit.
 
-For rows with long user text and several controls, keep the main text together and let secondary actions wrap as a group (`b3-split` with a `b3-cluster` for actions), or use `b3-row b3-stack` when the content needs a vertical row. A compact `b3-row` does not wrap by itself. Do not force checkbox, label, quantity and removal into a shrinking single line: a page can fit while its label becomes a one-letter column. Inspect readable line length and row height at enlarged text, not just overflow. The playground Data section’s “Long names need room” shows the stacked composition with independently wrapping controls.
+For rows with long user text and several controls, keep the main text together and let secondary actions wrap as a group (`b3-split` with a `b3-cluster` for actions), or use `b3-row b3-stack` when the content needs a vertical row. A compact `b3-row` does not wrap by itself. Several independent buttons belong in `b3-cluster`, not `b3-inline`; do not add `flex-shrink: 0` to the entire action group. Do not force checkbox, label, quantity and removal into a shrinking single line: a page can fit while its label becomes a one-letter column. Inspect readable line length and row height at enlarged text, not just overflow. The playground Data section’s “Long names need room” shows the stacked composition with independently wrapping controls.
 
 Task-first density matters as much as fitting the width. A dashboard should reveal useful data early; a marketing hero should not be reused as its header. When a sidebar becomes mobile navigation, remove duplicated context and relocate secondary links. Preserve primary destinations, readable text and touch targets. Verify the first meaningful content is actually visible at the target phone height, not just free of horizontal overflow.
 

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

@@ -28,7 +28,7 @@ form.reset(); // Never clear a draft on failure.
 
 For updates build `entries.map(x => x.id === id ? { ...x, status: nextStatus } : x)`; for deletion use `entries.filter(x => x.id !== id)`. A failed write must leave memory, rendered rows, totals and storage at the same prior state. On retry, one draft adds exactly one record. For asynchronous stores, await success before publishing and guard concurrent submissions; this synchronous example is not a network transaction helper.
 
-The Lists → “Save once, keep your place” specimen has a one-shot failure switch, retained draft, actual isolated browser storage, and a stable review action. Starting with two examples, fail an add then retry: three records, not four, including after reload. Do the same with Review: failure keeps the old status; success keeps focus on the same button. Reset affects only this specimen's storage key.
+The Lists → “Save once, keep your place” specimen has a one-shot failure switch, retained draft, actual isolated browser storage, and a stable review action. Starting with two examples, fail an add then retry: three records, not four, including after reload. Do the same with Review: failure keeps the old status; success keeps focus on the same button. Remove demonstrates the same save boundary and resolves the next live action after rendering; removing the final row focuses Add. Reset affects only this specimen's storage key.
 
 Native change/blur can report activeElement as BODY before the next field receives focus. Capture row ownership on focusin, then reapply filtering only after native focus navigation has settled. Here `list` is the owning ul/ol/tbody, and `matchesFilter(row)` is your app's predicate. Bind before user interaction. These are app functions, not a Bare runtime API.
 
@@ -69,7 +69,7 @@ Check with real keyboard input: in All, focus a checkbox and press Space twice;
 
 ## One post-update focus policy for every row action
 
-Replacing an editor removes its focused Save/Cancel button. A status action can also hide or disable itself while keeping the same node. Complete persistence and rendering/filtering first, then check that focus is still usable; node identity and activeElement alone are insufficient. A visible row is not proof that its focused control survived. On Save/Cancel prefer that row's new Edit button; for a status change prefer its next enabled action. If the row disappears, use a surviving row action or the stable add/filter control. Move focus only when the changed row owned it and its focused control is no longer usable.
+Replacing an editor removes its focused Save/Cancel button. A status action can also hide or disable itself while keeping the same node. Complete persistence and rendering/filtering first, then check that focus is still usable; node identity and activeElement alone are insufficient. A visible row is not proof that its focused control survived. On Save/Cancel prefer that row's new Edit button; for a status change prefer its next enabled action. If the row disappears, use a surviving row action or the stable add/filter control. Capture the next/previous row ID before deletion, then query its live control AFTER rendering; retaining a button reference before rebuilding the list can leave you focusing a detached node. Move focus only when the changed row owned it and its focused control is no longer usable.
 
 Here `data-row-edit` marks each compact row's Edit button, and `addControl` is a stable, visible button/input outside the list. App render/state functions below are placeholders for your existing implementation; this is not a Bare runtime API.
 

package/dist/references/foundation.md

@@ -1,6 +1,6 @@
 # Root and theme
 
-Place b3-root on html to synchronize the document canvas and native controls. Set data-b3-theme="dark" explicitly for dark mode. A nested root inherits its parent theme and tokens; set data-b3-theme on it only to force a different theme. Override complete CSS values in --b3-* properties. Consumer CSS is unlayered and wins over library defaults. Scope custom palette overrides to each theme: unlayered :root token overrides beat layered library dark defaults. Use .b3-root:not([data-b3-theme="dark"]) for light-only colors and .b3-root[data-b3-theme="dark"] for dark overrides. Set foreground/background pairs together. Keep theme-invariant font, radius and spacing overrides outside light/dark selectors so switching theme preserves the app identity. Custom surfaces should use semantic color tokens, not a fixed light translucent fill behind theme-dependent text. Borders: --b3-color-border is the soft edge for cards, dividers, rows and bubbles; --b3-color-border-strong is the text-input edge (b3-input, textarea, select, b3-input-group, the composer field), kept at least 3:1 against both surface and canvas. Override both per theme; focus and error states keep their own colors. Check ordinary text at least 4.5:1 against its actual backing in every theme/state, including muted badges and selected filters. For translucent fills, composite over the real surface; a passing accent-on-white pair does not qualify an accent-tinted badge. Leave margin above the threshold. Density: data-b3-density="compact" on the root tightens controls, nav, headings, avatars and messages for pointer-first apps; "auto" applies it only under a fine pointer on a wide viewport and keeps touch sizing on phones. For nested rounded surfaces with an even inset, derive the inner radius from the outer radius minus padding and border, clamped at zero. File-selector buttons and command-palette items follow this relationship. Match focus indicators to the element shape; keep surface colors theme-aware. Enabled native buttons inherit surrounding text color by default, including custom card actions; explicit component/app colors still win. Disabled native controls retain browser disabled styling. Theme verification: explicitly set data-b3-theme to light and dark and inspect actual canvas/text colors, not only color-scheme. System preference alone does not set this attribute; the host or app chooses it. Test custom palettes in both states. A dark native control on a fixed light canvas is not a completed dark theme.
+Place b3-root on html to synchronize the document canvas and native controls. Set data-b3-theme="dark" explicitly for dark mode. A nested root inherits its parent theme and tokens; set data-b3-theme on it only to force a different theme. Override complete CSS values in --b3-* properties. Consumer CSS is unlayered and wins over library defaults. Scope custom palette overrides to each theme: unlayered :root token overrides beat layered library dark defaults. Use .b3-root:not([data-b3-theme="dark"]) for light-only colors and .b3-root[data-b3-theme="dark"] for dark overrides. Set --b3-color-accent and --b3-color-on-accent together in each theme; changing only accent can leave dark text on a dark button. Set other foreground/background pairs together. Keep theme-invariant font, radius and spacing overrides outside light/dark selectors so switching theme preserves the app identity. Custom surfaces should use semantic color tokens, not a fixed light translucent fill behind theme-dependent text. Borders: --b3-color-border is the soft edge for cards, dividers, rows and bubbles; --b3-color-border-strong is the text-input edge (b3-input, textarea, select, b3-input-group, the composer field), kept at least 3:1 against both surface and canvas. Override both per theme; focus and error states keep their own colors. Check ordinary text at least 4.5:1 against its actual backing in every theme/state, including muted badges and selected filters. For translucent fills, composite over the real surface; a passing accent-on-white pair does not qualify an accent-tinted badge. Leave margin above the threshold. Density: data-b3-density="compact" on the root tightens controls, nav, headings, avatars and messages for pointer-first apps; "auto" applies it only under a fine pointer on a wide viewport and keeps touch sizing on phones. For nested rounded surfaces with an even inset, derive the inner radius from the outer radius minus padding and border, clamped at zero. File-selector buttons and command-palette items follow this relationship. Match focus indicators to the element shape; keep surface colors theme-aware. Enabled native buttons inherit surrounding text color by default, including custom card actions; explicit component/app colors still win. Disabled native controls retain browser disabled styling. Theme verification: explicitly set data-b3-theme to light and dark and inspect actual canvas/text colors, not only color-scheme. System preference alone does not set this attribute; the host or app chooses it. Test custom palettes in both states. A dark native control on a fixed light canvas is not a completed dark theme.
 
 Classes: b3-root
 
@@ -13,6 +13,14 @@ Classes: b3-root
   --b3-font-display: Georgia, serif;
   --b3-radius: 0.5rem;
 }
+.b3-root:not([data-b3-theme="dark"]) {
+  --b3-color-accent: #2f4f3a;
+  --b3-color-on-accent: #ffffff;
+}
+.b3-root[data-b3-theme="dark"] {
+  --b3-color-accent: #aadbb8;
+  --b3-color-on-accent: #132b1b;
+}
 .app-panel {
   color: var(--b3-color-text);
   background: var(--b3-color-surface);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livx.cc/bare-v3",
-  "version": "0.1.0-alpha.130",
+  "version": "0.1.0-alpha.131",
   "type": "module",
   "thirdPartyNotices": "./dist/third-party.json",
   "files": [