@synopackageland/ui 0.25.7 → 0.25.8

package/docs/layout-rules.md

@@ -126,7 +126,7 @@ Phone layout follows the app container (≤640px) and a coarse pointer, not the
 - Only the content scrolls. The navigation, the bar above the page, a page's tab strip and a settings footer stay in place, and no scrollbar runs past them. On a phone (640px and narrower) the page has one scrolling area, nothing scrolls sideways, and the footer stays in view.
 - Where a page draws `PageHeader`, it sticks to the top while the content scrolls.
 - A settings page with tabs is `SectionTabs fill` with one `SettingsPage` per panel, in a container with a height (a window, `AppLayout height="fill"` with `PageContent height="fill"`, or a page of the SDK `AppShell`, which fills by itself when it shows one): the tab strip stays at the top, the footer at the bottom edge, and only the sections scroll. A tab that is not a `SettingsPage` scrolls under the strip. The height passes through the App's own wrapper elements; do not add CSS to pass it on. A `SettingsPage` without tabs behaves the same, and its footer sits on the bottom edge with no space under it. Without a height, the page scrolls, the strip sticks to the top and the footer to the bottom, above the safe area. Under 520px of row width labels stack over their controls.
-- `DataGrid` and `DataTable` fill the height their flex-column container leaves by default (`fill`), as DSM's lists do: the header row stays, the rows scroll inside the table, and a DataGrid's footer ("3 items", the pager) sits at the container's bottom whatever the row count. A list page uses `AppLayout height="fill"` and `PageContent height="fill"` so the table, its last child, gets that height. Where the page itself scrolls (a phone), the footer sticks to the bottom of the viewport above the safe area. Give a short table inside a form, a settings section or a dialog `:fill="false"`: it is as tall as its rows. Do not let the whole page scroll past a 50-row page to reach the pager.
+- `DataGrid` and `DataTable` fill the height their flex-column container leaves by default (`fill`), as DSM's lists do: the header row stays, the rows scroll inside the table, and a DataGrid's footer ("3 items", the pager) sits at the container's bottom whatever the row count. A list page uses `AppLayout height="fill"` and `PageContent height="fill"` so the table, its last child, gets that height. On a phone (640px or narrower) the list takes its rows' height instead: the page scrolls as one, the list bar sticks under the bar, and the footer follows the last row. An App's `maxHeight` stays, but never below 60% of the screen. Give a short table inside a form, a settings section or a dialog `:fill="false"`: it is as tall as its rows. Do not let the whole page scroll past a 50-row page to reach the pager.
 - `PageHeader` keeps the title and its `meta` slot (an info button, a chip) on one line. Actions that would crowd the title move under it, at the right edge; a title longer than its line ends in "…" and shows in full on hover.
 - `EmptyState` fills the remaining height and centres its content. Do not add footnotes below it.
 

package/docs/list-detail.md

@@ -44,8 +44,11 @@ Packages page with the selected package's advice).
   it slides in from the right, the list moves 30% left and dims, and a 48px
   header shows Back and the title in place of Close. Back, the browser's Back
   and a swipe from the detail's left edge pop it, which emits `close`. The
-  separator is hidden. Give the ListDetail a height to fill so the list and
-  the detail each scroll on their own; without one the detail sets the height.
+  separator is hidden. In a page that scrolls as one the list and the pushed
+  detail take their content's height and the page scrolls; the detail opens
+  at its top, and Back returns to where the list was scrolled. Elsewhere,
+  give the ListDetail a height to fill so the list and the detail each scroll
+  on their own; without one the detail sets the height.
 - In the pane, give tables column widths that fit the default width and dates
   in a one-line short format; a table wider than the pane scrolls sideways.
 

package/docs/mobile-native.md

@@ -682,8 +682,25 @@ and every element between them (an App shell's fill wrappers too) takes its
 content's height. The bar stays, a sticky `PageHeader` and section strip
 stick under it, and Reset / Apply stick at the bottom (a short page keeps
 them at the bottom of the screen). The root carries
-`data-ui-layout-scroll="page"`. A DataGrid or another page that scrolls
-itself keeps its layout.
+`data-ui-layout-scroll="page"`.
+
+**Lists take their rows' height.** On a phone a `DataGrid`, a `DataTable`, a
+`SplitPane`, a `VirtualList`, a `VirtualCardGrid`, a `DataView` and a `Panel`
+in such a page mark themselves `data-ui-natural-height`: the content area
+becomes the page's one scroller, and every element between it and the list
+(an App's own `min-h-0 flex-1 overflow-hidden` wrappers, `h-full`) takes its
+content's height, so the list is never a short scroller under other content.
+`fill` does nothing there: the list bar sticks under the bar, the selection
+bar to the bottom above the phone bars, and the footer (count, pager) follows
+the last row. A long list keeps its pages; a virtual list renders a window of
+rows from the page's scroll position (`usePageWindow`). An App's `maxHeight`
+on a DataGrid stays, but never below 60% of the screen (`PHONE_MIN_CAP`). A
+`SplitPane` stacks start above end with no separator; a start pane with no
+height of its own (a chart) keeps `min(defaultSize, 45%)` of the screen, at
+least `minStart`. In a flush Dialog (a bottom sheet) such a list scrolls in
+the sheet's body. A page that scrolls in an App's own element (its own
+`overflow-y: auto`) keeps that scroller; the list in it still takes its rows'
+height. Apps need no change.
 
 ### Native phone shell
 

package/docs/size-and-split.md

@@ -44,6 +44,12 @@ reset.
 Choose the orientation from the measured content width, not a viewport media
 query: a DSM window can be narrower than the browser.
 
+On a phone (640px or narrower) either orientation stacks start above end,
+each pane as tall as its content, with no separator, and the page scrolls as
+one (`data-stacked`, `data-ui-natural-height`, docs/mobile-native.md). A
+start pane with no height of its own (a treemap that fills its pane) keeps
+`min(size, 45%)` of the screen's height, at least `minStart`.
+
 ## SizeBar
 
 A 4px bar for a table cell or list row: `value` against `max` (pass the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.25.7",
+  "version": "0.25.8",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",
@@ -96,6 +96,7 @@
     "check:short-viewport": "node scripts/check-short-viewport.mjs",
     "check:phone-layout": "node scripts/check-phone-layout.mjs",
     "check:phone-bars": "node scripts/check-phone-bars.mjs",
+    "check:phone-fill": "node scripts/check-phone-fill.mjs",
     "check:text-zoom": "node scripts/check-text-zoom.mjs",
     "check:focus-restore": "node scripts/check-focus-restore.mjs",
     "check:detail-surface": "node scripts/check-detail-surface.mjs",