@synopackageland/ui 0.21.1 → 0.22.0

package/docs/mobile-native.md

@@ -414,7 +414,7 @@ Where it is used:
 |---|---|---|
 | `ListDetail` | the list fills the room; the detail is pushed over it, with Back in place of Close | the split view, unchanged |
 | `SectionTabs`, five or more sections or `fill` (a settings page) | a grouped list (`group` on each item sets the blocks, 48px rows with a chevron) that pushes the tapped section; `v-model:pushed` | the strip |
-| `SectionTabs`, four or fewer sections | the scrolling underline strip on a touch phone (0.21.0); a full-width SegmentControl with equal segments in a narrow window used with a mouse, or with `phone="segment"` | the strip |
+| `SectionTabs`, four or fewer sections | the scrolling underline strip on a touch phone; a full-width SegmentControl with equal segments in a narrow window used with a mouse, or with `phone="segment"` | the strip |
 | `SectionTabs` with `phone="strip"` | the scrolling strip, for tabs inside a pushed page or a sheet | the strip |
 
 `phone` (`auto`, `list`, `segment`, `strip`) overrides the choice. A phone
@@ -503,7 +503,7 @@ 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.
 
-### Native phone shell (0.21.0)
+### Native phone shell
 
 A *touch phone* is an `AppLayout` 640px or narrower under a coarse pointer
 (the root carries `data-ui-phone`). A narrow DSM window driven by a mouse is
@@ -538,15 +538,22 @@ change: the same slot moves.
 - Rare or destructive items belong in `headerActions` ("…" in the bar), not
   in the page actions.
 - `phone-actions` on `AppLayout`, and on a `PageHeader`, `AppToolbar` or
-  `PushTransition` for one page: `fab` (default), `bar` (icons in the bar, as
-  in 0.20.20) or `inline` (the page's own header row).
+  `PushTransition` for one page: `fab` (default), `bar` (icons in the bar) or `inline` (the page's own header row).
 - `PageFab` picks the FAB explicitly: `<PageFab><Button variant="primary">…</Button></PageFab>`
   inside the page's actions. On a touch phone its content is the FAB and the
   page's other actions go to the bar; elsewhere it renders in place.
 - A page whose primary action is in a footer bar (a `SettingsPage` footer, a
   sticky `FormActions`) keeps its actions in the bar: the bottom already has a
   primary. Content gets `--ui-fab-room` (88px) of bottom padding so the last
-  row is never under the FAB.
+  row is never under the FAB; there is no room while no FAB is drawn.
+- A fill page (its content scrolls itself: `PageContent height="fill"`, or an
+  App shell that keeps the PageContent from scrolling; PageContent marks it
+  `data-ui-page-fills`) keeps that room only while the FAB is in view. While
+  the FAB is hidden on scroll or by the keyboard, the content's own scroller
+  takes the room down to the bars' edge, together with the room the hidden
+  bars give back, so no blank band is left under it. A page that scrolls as a
+  whole keeps the room at its end, so its length never changes under the
+  finger.
 - A toast sits 8px above the FAB while the FAB is shown, and back at its own
   place while the FAB is hidden on scroll or by the keyboard, and steps aside
   (fades out) while the speed dial is open; it moves with the bars (`--ui-motion-bars`, at once with reduced motion). A page without a FAB,
@@ -573,6 +580,43 @@ than the bars' room never hides them.
   footer stays at rest: it slides away only with the bars, so Reset / Apply
   never appear or vanish under the finger while the user edits.
 
+**Bottom accessory.** `AppLayout`'s `#accessory` slot is a bar across the
+bottom of the page for something the App is running (a recording bar, a mini
+player). Put the bar's content in it, with `v-if` while nothing runs (an
+empty slot draws nothing):
+
+```vue
+<AppLayout>
+  …
+  <template #accessory><RecordingBar v-if="recording" /></template>
+  <template #tabbar><AppTabBar v-model="tab" :items="tabs" /></template>
+</AppLayout>
+```
+
+- On a phone it docks right above the tab bar (the bottom-most bar without
+  one, over the home indicator's strip), with a 1px rule on top and the bar's
+  colour.
+- It stays while the bars hide on scroll: it slides down into the tab bar's
+  place, in `--ui-motion-bars`, and comes back up with it. It hides while the
+  keyboard is up on a touch phone, as the tab bar does.
+- The layout measures it (`--ui-bottom-accessory-height`, also on the App's
+  root) and lifts what must stay clear of it: the FAB sits 16px above it, a
+  toast above the FAB (or above the accessory without one), an AsidePanel's
+  phone button above it, and the page's end clears it. An App sets none of `--ui-tab-bar-height`, `--ui-fab-tab-bar` or
+  toast offsets for it.
+- Elsewhere (a DSM window, a desktop) it is the column's bottom row, sticking
+  to the bottom while the document scrolls.
+
+**Sticky rows in a padded page scroller.** An App shell that makes the
+PageContent its page's scroller and pads its top (a page without a header)
+would leave a stuck row (a group heading, a DataGrid's header row) that
+padding below the scroller's top, with the rows scrolling under it showing
+in the strip above. PageContent covers that strip
+(`[data-ui-page-scroll-cover]`, in the page header's colour; the padding is
+`--ui-page-scroll-pad`), so a stuck row reads as flush with the bar above it.
+The content starts where it did, and a `position: sticky; top: 0` row needs
+no offset of its own.
+
 **Footer hints.** In any footer bar (`data-ui-footer-bar`: SettingsPage,
 Dialog, Sheet, BottomSheet, Card, Panel, Wizard, AppActionBar) a hint or
 status beside the buttons ("Enter a Custom ASR API key") takes a full-width

package/package.json

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