@synopackageland/ui 0.21.0 → 0.22.0

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 ## Unreleased
 
+## 0.22.0 (2026-11-07)
+
+Native phone shell follow-ups. No App change is required; a DSM window and desktop are unchanged apart from the new slot.
+
+- **Fill pages give the freed room to their list.** On a fill page (its content scrolls itself), the FAB's 88px room stayed under the content's scroller while the FAB was hidden on scroll, leaving a blank band at the bottom when the bars slid away. PageContent now marks a page whose outer element does not scroll (`height="fill"`, or an App shell that fills it) with `data-ui-page-fills`; there the room goes while the FAB is hidden on scroll or by the keyboard, so the scroller reaches the bars' edge, and comes back with the FAB. A page that scrolls as a whole keeps the room at its end, so its length never changes under the finger. No room is kept while no FAB is drawn
+- **New `#accessory` slot on `AppLayout`.** A bar across the bottom for something the App is running (a recording bar, a mini player). On a phone it docks right above the tab bar, stays while the bars hide on scroll (sliding into the tab bar's place, in `--ui-motion-bars`) and hides while the keyboard is up. The layout measures it (`--ui-bottom-accessory-height`) and lifts the FAB, toasts, an AsidePanel's phone button and the page's end above it; an App overrides no tab-bar or FAB token. Elsewhere it is the column's bottom row. An empty slot draws nothing
+- **Sticky rows in a padded page scroller.** When an App shell makes the PageContent its page's scroller and pads its top, a stuck row (a group heading, a grid header) stopped that padding below the top and the rows scrolling under it showed in the strip above. PageContent now covers that strip in the page header's colour (`[data-ui-page-scroll-cover]`, `--ui-page-scroll-pad`); the content starts where it did and a `top: 0` sticky row needs no offset
+- `check:phone-layout` adds a feed page with sticky group headings, as a page that scrolls and as a fill page, with and without a bottom accessory and with a toast, at 390x844, 360x800 and 390x664 with touch, in a DSM window and on desktop, in English and Traditional Chinese: the covered strip above a stuck heading, the fill page's list reaching the bottom with the bars hidden, the accessory docked above the tab bar and sliding into its place, and the FAB and toast above it. New story "App / Phone shell accessory"
+
+## 0.21.1 (2026-11-07)
+
+Native phone shell fixes. No App change is required; pages without a FAB, a DSM window and desktop are unchanged.
+
+- **Toasts clear the FAB.** On a touch phone a toast sat over the FAB (at 390x844, the toast at y 730–780 and the FAB at 715–771). While a page shows a FAB (page actions or a `PageFab`), the toast now sits 8px above it; while the FAB is hidden on scroll or by the keyboard, the toast goes back to its own place. While the speed dial is open the toast fades out, so it never covers a pill, and it comes back when the dial closes. It moves with the bars in `--ui-motion-bars`, at once with reduced motion
+- **IconButtons in the speed dial are labelled pills.** An `IconButton` among the page actions (such as "More actions", which opens a menu) became a 48px circle in the dial with its name spilling out of it. Every dial pill is now its icon and its text: an action with no text of its own shows its `aria-label`, or else its `title` (copied to `data-ui-fab-label`), and the pill sizes to it, a name too long for the screen ending in an ellipsis. A menu trigger stays in the dial and keeps it open until its menu closes
+- `check:phone-layout` adds a list page with a More actions menu in the dial and a toast with one FAB and with the dial, at 390x844, 360x800 and 390x664 with touch, in a DSM window and on desktop, in English and Traditional Chinese: each pill holds its whole label, the toast sits above a shown FAB, steps aside while the dial is open and is back down while the FAB is hidden, keeps the bottom right off a phone, and moves at once with reduced motion
+
 ## 0.21.0 (2026-11-07)
 
 Native phone shell. A *touch phone* is an `AppLayout` 640px or narrower under a coarse pointer (`data-ui-phone`). A narrow DSM window driven by a mouse, tablets and desktop are unchanged. No App change is required; every new behaviour has an opt-out (docs/mobile-native.md, "Native phone shell").

package/dist/components/app/app-layout/AppLayout.vue.d.ts

@@ -65,6 +65,14 @@ type __VLS_Slots = {
     footer?: () => unknown;
     /** A phone's bottom tab bar (AppTabBar), shown only in the mobile presentation. */
     tabbar?: () => unknown;
+    /**
+     * A bar across the bottom of the page that stays while the App runs
+     * something (a recording bar, a mini player). On a phone it docks right
+     * above the tab bar, stays while the bars hide on scroll (sliding into the
+     * tab bar's place) and hides while the keyboard is up; the FAB, toasts and
+     * the page's end move above it. Elsewhere it is the column's bottom row.
+     */
+    accessory?: () => unknown;
     /**
      * The right side region. `overlay` is true when the open aside floats over
      * the page (the page would be narrower than 480px, or the layout is not