@synopackageland/ui 0.23.5 → 0.23.6

package/docs/mobile-native.md

@@ -15,10 +15,10 @@ App. Each line links to its details below.
 | No tab heading on tab pages | A page of the tab bar draws no title, icon or brand in the bar (`phone-bar-title="none"`) and no heading of its own: the tab bar says where the user is. A sub-page keeps Back and its title. |
 | Title on a tab page is opt-in | Showing a title on a tab page is the App's explicit choice: `phone-bar-title="auto"` on `AppLayout`, and the SDK AppShell's own opt-in (`phoneTitle`). |
 | Hide on scroll | By `transform` only; the scroller keeps its size, position and padding and nothing writes `scrollTop`, so a momentum fling keeps going. Slow scrolls use distance hysteresis, flicks decide at once. See [Hide on scroll](#native-phone-shell) and [Gesture velocity](#gesture-velocity). |
-| No horizontal pan | The page never pans sideways: the phone layout's content area and page scroller clip `overflow-x`, and `check:phone-layout` asserts `scrollWidth == clientWidth` for the document and the page's scrollers at 320, 360, 390 and 430px. An inner horizontal scroller (a table, a tab strip) still scrolls. |
+| No horizontal pan | The page never pans sideways: the phone layout's content area and page scroller clip `overflow-x`, a `PageHeader`'s last action keeps its tap box inside the header, and `check:phone-layout` asserts `scrollWidth == clientWidth` for the document and the page's scrollers at 320, 360, 390 and 430px and in landscape (825x360, 753x279), also when the scroller is an App's own element in a fill page. An inner horizontal scroller (a table, a tab strip) still scrolls. |
 | Bottom accessory | `#accessory` docks above the tab bar, lifts the FAB and toasts, and slides into the tab bar's place with the bars. |
-| Sticky offsets | `--ui-sticky-top-offset` counts the covered padding, a sticky `PageHeader`, the tabs strip and every `data-ui-sticky` row, so scrolling to an element lands below them. A row in an App's own nested scroller (a side pane) sticks at that scroller's top and counts only there. |
-| No end space under docked bars | The room under the last row is constant (`--ui-page-end-space`, plus `--ui-bars-room` under docked bars); a fill page's list runs under the FAB and bars to the screen's bottom with no blank band. |
+| Sticky offsets | `--ui-sticky-top-offset` counts the covered padding, a sticky `PageHeader`, the tabs strip and every `data-ui-sticky` row, so scrolling to an element lands below them. A row in an App's own nested scroller (a side pane, a record pane) sticks below the sticky `PageHeader` and tabs strip in that scroller and counts only there. |
+| No end space under docked bars | The room under the last row is constant (`--ui-page-end-space`, plus `--ui-bars-room` under docked bars); a fill page's list runs under the FAB and bars to the screen's bottom with no blank band, also when that list is an App's own element nested in the page. |
 | Gesture velocity | One estimator and one set of thresholds for every gesture decision the UI makes. See [Gesture velocity](#gesture-velocity). |
 
 ## Width containment and the release gate
@@ -219,6 +219,19 @@ its 44px over the gutter and loses only what would lie outside the page. The
 body's width and `max-width` allow for the bleed; an App that sizes the body
 itself (`width: 100%`) is overridden by the body's inline width.
 
+A fill page's scroller can be an element of the App's own, with the
+`PageHeader` inside it (a record pane). No PageContent clip sits between the
+header and that scroller's edge, so a "…" IconButton at the end of the
+header reached 13px past it in a landscape phone window. A `PageHeader`'s
+last action therefore sets `--ui-hit-end-room` to the header's own end
+padding (`--ui-page-padding-x`, 0 inside a PageContent): its tap box stops
+at the header's edge and grows towards its start side, still the full 44px,
+wherever the header is. The scroller itself is not clipped: an App's
+scroller that also scrolls a wide table sideways keeps doing so. For the
+same reason no UI component's box reaches past its own edges: an
+Accordion's pressed wash reaches 4px past each side by `box-shadow` (ink,
+never scrollable overflow), not by a wider trigger.
+
 A control at the end edge of its own component is the component's job, not
 the page's: a dismissible Callout is often full width in an App's own
 scroller with no `PageContent` around it. Such a control sets
@@ -820,8 +833,15 @@ An App sets no `top` of its own and measures nothing.
   rows (`top` 0 for the first), never counts in the page's offset, and the
   container gets its own `--ui-sticky-top-offset` (its top padding plus its
   rows), so what scrolls in the pane stops below the pane's rows and not
-  below the page's header. Before 0.23.5 such a row was stuck the page's
-  header height down inside its pane.
+  below the page's header.
+- A sticky `PageHeader` (and a sticky tabs strip) inside such a container
+  covers that container's top, not the page's: the container's rows stick
+  below it (`--ui-sticky-row-top` starts at the header's height), the
+  container's `--ui-sticky-top-offset` is its top padding plus the header,
+  the strip and its rows, and the container gets its own
+  `--ui-page-sticky-top` (its header's height) for a strip in it. Such a
+  header is left out of the page's `--ui-page-sticky-top` and offset. A
+  container with a sticky header and no rows gets the header as its offset.
 - A nested scroller without rows still inherits the page's offset as its
   content's scroll margin. Mark it `data-ui-sticky-scope` and what scrolls in
   it takes no page offset. A fill page's own list scroller
@@ -839,7 +859,14 @@ the room for the bars is the separate `--ui-bars-room` spacer, and a fill
 page whose own scroller has the FAB's room gets no end space below that
 scroller, so no blank band sits under a list. An App shell that pads its
 page end reads it:
-`padding-bottom: var(--ui-page-end-space, var(--ui-space-6, 24px))`.
+`padding-bottom: var(--ui-page-end-space, var(--ui-space-6, 24px))`. Under
+docked bars its value is a `calc()` expression, not a plain length: code
+that needs it in pixels reads a resolved length (PageContent reads the
+computed margin of a hidden probe whose `margin-top` is the variable), never
+`parseFloat` of the property's text. PageContent subtracts it when it looks
+for a fill page's scroller, so an App that puts the end space on a wrapper
+around its own scroller (rather than on the scroller) still has that
+scroller found.
 
 **Scroll helpers.** A phone page scrolls in a different element than a
 desktop or DSM window. `nearestScroller(el)` returns the element that

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.23.5",
+  "version": "0.23.6",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",