@livx.cc/bare-v3 0.1.0-alpha.138 → 0.1.0-alpha.139

package/dist/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.0-alpha.138",
+  "version": "0.1.0-alpha.139",
   "cssSha256": "80a54a0eb91c56ac62ea7964a9df7632f96eacd39ff1eb605cd453e38ee2c561",
   "classes": [
     "b3-accordion",
@@ -134,7 +134,7 @@
         "b3-scroll",
         "b3-inline"
       ],
-      "guidance": "Shell bounds the page. Stack is vertical, cluster wraps horizontal peers, grid fits columns, split separates two groups. Override --b3-space locally. Preserve meaningful DOM order. Default to phone and desktop support. Use intrinsic peer columns and wrapping before media queries; bound reading/forms separately from the page. Set --b3-content for shell width. Read cross-screen.md for composition choices and targeted verification. In a bounded b3-stack, b3-scroll makes one body independently scrollable while sibling heading/actions stay in flow. Supply a meaningful height or max-height; scrolling cannot occur without a bound. Name a keyboard-focusable scroll region with tabindex=0 and aria-labelledby. Reuse the same atom in panels, dialogs and sheets. A direct scroll body in dialog.b3-stack retains a minimum reading area; on short screens with enlarged text, the outer dialog scrolls as needed to reach its actions instead of collapsing the body. Inline keeps a small icon/text or label/badge group together, vertically centers peers and lets the text itself wrap. A badge retains its compact width rather than being squeezed into broken letters; when a badge and its description cannot fit, the description flows below it. Use cluster for independently wrapping peers; use inline when wrapping the icon away from its label would break the meaning. Set --b3-grid-min to the minimum useful peer width (e.g. 8rem for concise metrics); the same grid then fits columns without per-screen column counts. Cluster and split children can shrink below intrinsic width, so a label wrapping a full-width select does not force the page wider.",
+      "guidance": "Shell bounds the page. Stack is vertical, cluster wraps horizontal peers, grid fits columns, split separates two groups. Override --b3-space locally. Preserve meaningful DOM order. Default to phone and desktop support. Use intrinsic peer columns and wrapping before media queries; bound reading/forms separately from the page. Set --b3-content for shell width. Read cross-screen.md for composition choices and targeted verification. In a bounded b3-stack, b3-scroll makes one body independently scrollable while sibling heading/actions stay in flow. Supply a meaningful height or max-height; scrolling cannot occur without a bound. Name a keyboard-focusable scroll region with tabindex=0 and aria-labelledby. Reuse the same atom in panels, dialogs and sheets. A direct scroll body in dialog.b3-stack retains a minimum reading area; on short screens with enlarged text, the outer dialog scrolls as needed to reach its actions instead of collapsing the body. Inline keeps a small icon/text or label/badge group together, vertically centers peers and lets the text itself wrap. A badge retains its compact width rather than being squeezed into broken letters; when a badge and its description cannot fit, the description flows below it. Use cluster for independently wrapping peers; use inline when wrapping the icon away from its label would break the meaning. Set --b3-grid-min to the minimum readable content width (e.g. 8rem for concise metrics); keep the 17rem default for text-rich cards unless real copy reads well narrower. Do not force two phone columns by squeezing descriptions into 10–12rem cards. The same grid then fits columns without per-screen column counts. Cluster and split children can shrink below intrinsic width, so a label wrapping a full-width select does not force the page wider.",
       "example": "<main class=\"b3-shell b3-stack\"><header class=\"b3-split\">…</header></main>"
     },
     {

package/dist/references/cross-screen.md

@@ -4,7 +4,7 @@ Default to a useful layout on both screens. Phone-first or desktop-first is a de
 
 Choose a semantic composition:
 
-- Peers such as cards, metrics or routine groups: `b3-grid` fits as many readable columns as the container allows. Set `--b3-grid-min` to a useful minimum (8rem for concise metrics; the default is 17rem).
+- Peers such as cards, metrics or routine groups: `b3-grid` fits as many readable columns as the container allows. Set `--b3-grid-min` to the minimum *readable content width* (8rem for concise metrics; the default is 17rem). Keep the default for text-rich cards unless their actual copy stays readable at a smaller width. Do not force two phone columns by squeezing descriptions into 10–12rem cards.
 - Actions or filters: `b3-cluster` wraps independent peers. `b3-inline` keeps an icon and label together while the label text wraps. Badge/description groups preserve the compact badge; the description can move below when space is insufficient.
 - Title and actions: `b3-split` separates groups and wraps when necessary.
 - Product copy beside a supporting visual: `b3-feature` stacks copy first on phones. `data-b3-reverse="true"` swaps desktop visual placement only; use it with a noninteractive supporting visual and keep controls together in the copy. For interactive content in both columns or sequential steps, omit reversal: CSS ordering does not reorder keyboard or screen-reader navigation. Never repair this with positive `tabindex`.

package/dist/references/layout.md

@@ -1,6 +1,6 @@
 # Composition
 
-Shell bounds the page. Stack is vertical, cluster wraps horizontal peers, grid fits columns, split separates two groups. Override --b3-space locally. Preserve meaningful DOM order. Default to phone and desktop support. Use intrinsic peer columns and wrapping before media queries; bound reading/forms separately from the page. Set --b3-content for shell width. Read cross-screen.md for composition choices and targeted verification. In a bounded b3-stack, b3-scroll makes one body independently scrollable while sibling heading/actions stay in flow. Supply a meaningful height or max-height; scrolling cannot occur without a bound. Name a keyboard-focusable scroll region with tabindex=0 and aria-labelledby. Reuse the same atom in panels, dialogs and sheets. A direct scroll body in dialog.b3-stack retains a minimum reading area; on short screens with enlarged text, the outer dialog scrolls as needed to reach its actions instead of collapsing the body. Inline keeps a small icon/text or label/badge group together, vertically centers peers and lets the text itself wrap. A badge retains its compact width rather than being squeezed into broken letters; when a badge and its description cannot fit, the description flows below it. Use cluster for independently wrapping peers; use inline when wrapping the icon away from its label would break the meaning. Set --b3-grid-min to the minimum useful peer width (e.g. 8rem for concise metrics); the same grid then fits columns without per-screen column counts. Cluster and split children can shrink below intrinsic width, so a label wrapping a full-width select does not force the page wider.
+Shell bounds the page. Stack is vertical, cluster wraps horizontal peers, grid fits columns, split separates two groups. Override --b3-space locally. Preserve meaningful DOM order. Default to phone and desktop support. Use intrinsic peer columns and wrapping before media queries; bound reading/forms separately from the page. Set --b3-content for shell width. Read cross-screen.md for composition choices and targeted verification. In a bounded b3-stack, b3-scroll makes one body independently scrollable while sibling heading/actions stay in flow. Supply a meaningful height or max-height; scrolling cannot occur without a bound. Name a keyboard-focusable scroll region with tabindex=0 and aria-labelledby. Reuse the same atom in panels, dialogs and sheets. A direct scroll body in dialog.b3-stack retains a minimum reading area; on short screens with enlarged text, the outer dialog scrolls as needed to reach its actions instead of collapsing the body. Inline keeps a small icon/text or label/badge group together, vertically centers peers and lets the text itself wrap. A badge retains its compact width rather than being squeezed into broken letters; when a badge and its description cannot fit, the description flows below it. Use cluster for independently wrapping peers; use inline when wrapping the icon away from its label would break the meaning. Set --b3-grid-min to the minimum readable content width (e.g. 8rem for concise metrics); keep the 17rem default for text-rich cards unless real copy reads well narrower. Do not force two phone columns by squeezing descriptions into 10–12rem cards. The same grid then fits columns without per-screen column counts. Cluster and split children can shrink below intrinsic width, so a label wrapping a full-width select does not force the page wider.
 
 Classes: b3-shell, b3-stack, b3-cluster, b3-grid, b3-split, b3-scroll, b3-inline
 

package/package.json

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