@synopackageland/ui 0.23.6 → 0.23.8

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 ## Unreleased
 
+## 0.23.8 (2026-11-08)
+
+- Document that DSM windows leave AppRoot's `color-scheme` and `data-ui-color-scheme` unset so the app stays light with its DSM window, even under an operating system's dark preference. Only an app's own full page (a portal or its own browser tab) may follow `prefers-color-scheme`. README, the colour system, theme hooks and AppRoot's prop documentation state the rule
+
+## 0.23.7 (2026-11-08)
+
+Phone fixes: the bars stay shown while the page is near its top, so the room above the content is never given up before content lies under it, and a settings commit footer stays put while the page scrolls and is smaller. No App change is required; a DSM window and desktop are unchanged.
+
+- **The bars no longer hide while the page is within the room above its content.** Hide on scroll could hide the bars after a flick or a 48px scroll that ended inside the top zone (scrollTop 10, 44 or 84 at 390x844 under a DSM portal header): the bar's row and a host header's room were given up while no content lay under them yet. (The empty band seen under a DSM portal header at the top of an SDK AppShell page is a different issue, the header's stacking in the SDK's portal chrome, and is fixed in the SDK.) The decision now reads the room above the content area (`main`'s top in the layout's column: the bar's row, a toolbar row, a portal header's room) and keeps the bars shown while `scrollTop` is less than it, whatever the direction or speed, a bounce past the top included; a scroll back into the zone shows them before the room can show empty. Past the room, the 0.23.5 rules are unchanged: transform only, the same velocity thresholds and distances, reduced motion at once
+- **A settings commit footer never hides on scroll.** On a phone a `SettingsPage` footer is out of sight while the form is clean, slides in when it is dirty, invalid or saving, and stays in one place through every scroll and fling (it moved with the bars before: 77 positions over a scroll in an App); Apply, Reset or the form becoming clean slides it out. While it shows, the tab bar stays directly under it (one bottom edge), and the page's end space includes it, so the last field scrolls fully above it. It moves by `transform` only; the scroller is never resized
+- **A compact commit footer on a phone.** 8px above and below 32px buttons with 14px text and 12px side padding, plus only the real safe-area inset: 48px and its 1px divider at 390x844 (was 56px: 36px buttons, 9px/10px padding, 13px side padding). Each button keeps a 44px hit area inside the footer, 6px over the button's top and bottom. A DSM window and desktop keep their footer
+- docs/mobile-native.md: the phone behaviour contract adds the top-zone rule to "Hide on scroll" and a "Commit footers never hide on scroll" row; the Hide on scroll and Settings footer sections describe both
+- New `check:phone-bars` (in the full gate): Playwright Chromium and WebKit, `isMobile` + `hasTouch`, at 320x568, 390x844 and 430x932, on a short page, a Home-like page (cards, a FAB, the tab bar), a long list and a fill page whose scroller is the App's own element, each also under an emulated DSM portal header; it samples every animation frame of flicks that end at 0, 10 and room - 1, a bounce past the top, slow and flung scrolls back up and a jump to the start, and asserts the first content stays within 1px of the visible bar's bottom, the bars show while `scrollTop` is less than the room, and the scroller's `clientHeight` never changes. A settings scene checks the commit footer: out of sight while clean, on screen in one place in every frame of slow scrolls and flings both ways while dirty, the last field above it, gone after Apply. `check:browser-install` installs WebKit too. `check:phone-layout`'s footer scenes follow the new footer rules
+
 ## 0.23.6 (2026-11-07)
 
 Phone fixes for a fill page whose scroller is an App's own element: it is no longer cut off above the tab bar in portrait (a 0.23.5 regression), its header's "…" no longer pans it sideways in landscape, and a sticky row in it sticks below its PageHeader. No App change is required; a DSM window and desktop are unchanged.

package/README.md

@@ -476,14 +476,18 @@ readable on it, and leaves the status tones DSM's:
 </AppRoot>
 ```
 
-The theme has a dark scheme too: `<AppRoot color-scheme="dark">` switches
+In a DSM window, leave AppRoot's `color-scheme` unset and do not set
+`data-ui-color-scheme`. DSM draws the window light, even when the operating
+system prefers dark mode. Do not follow `prefers-color-scheme` in a DSM window.
+
+Only a full page of the app's own (a portal or its own browser tab) may follow
+`prefers-color-scheme`. There, `<AppRoot color-scheme="dark">` switches
 every token, and derives the accent for a dark page. AppRoot puts
 `data-ui-color-scheme="dark"` on its root (`[data-ui-app]`); set the attribute
 there yourself only without AppRoot. The embedded stylesheets
 (`themes/dsm7-embedded*.css`, a DSM window) read it only on `[data-ui-app]`, never on
 the host's `<html>`; `<html data-ui-color-scheme="dark">` works only with
-`theme.css`, on a page of your own. The host decides when, for
-example from `prefers-color-scheme` ([colour system](docs/color-system.md#dark-theme)).
+`theme.css`, on a page of your own ([colour system](docs/color-system.md#dark-theme)).
 
 Other tokens are overridden in a stylesheet imported after the library's:
 

package/dist/components/app/app-layout/hideOnScroll.d.ts

@@ -20,6 +20,12 @@ export interface HideOnScrollOptions {
     blocked: () => boolean;
     /** The room the bars take: a page that scrolls less than this keeps them, or hiding them would end its scroll. */
     room: () => number;
+    /**
+     * The room above the page's content that hiding gives up (the phone bar's
+     * row, a toolbar row, a host header's room): while the page has scrolled
+     * less than this, the bars show, so the space they leave is never empty.
+     */
+    topRoom?: () => number;
     /** Each change shows the bars again (a new page). */
     reset: WatchSource[];
 }
@@ -38,7 +44,12 @@ export interface HideOnScrollState {
  *   once, a flick up that fast shows them at once;
  * - a slower scroll hides them after `hideDistance` down and shows them after
  *   `showDistance` up, so a slow or wobbly drag does not flicker them;
- * - the top of the page and a scroll that ends at its bottom show them.
+ * - while the page has scrolled less than the room above its content
+ *   (`topRoom`: the bars' own rows and a host header's room), the bars show,
+ *   whatever the direction or speed (a bounce past the top included); they
+ *   hide only once content has scrolled under them, and a scroll back into
+ *   that zone shows them before the room above the content can show empty;
+ * - a scroll that ends at the page's bottom shows them.
  * The bars move by transform only (adaptive.css), so a decision never
  * changes the scroller's size or position and the scroll keeps its momentum.
  * It never hides while a sheet, dialog, the speed dial or the drawer is

package/dist/components/app/app-root/AppRoot.vue.d.ts

@@ -14,6 +14,8 @@ type __VLS_Props = {
      */
     accent?: string;
     /**
+     * Leave unset in a DSM window; DSM draws it light.
+     * Only a full page of the app's own may follow `prefers-color-scheme`.
      * `dark` draws the app in the dark theme (src/theme/dark.css), and derives the
      * accent for it. A full page can set `data-ui-color-scheme="dark"` on
      * `<html>` instead, but then passes `dark` here too when it sets an accent.

package/dist/components/app/settings-page/SettingsPage.vue.d.ts

@@ -1,7 +1,7 @@
 type __VLS_Props = {
     /**
-     * The form has changes not yet applied. With `false` the footer may slide
-     * away with the phone's bars on a scroll down; with `true` it stays. Left
+     * The form has changes not yet applied. On a phone, with `false` the footer
+     * is out of sight below the screen; with `true` it slides in and stays. Left
      * out, the footer reads it: the form is clean while the footer's primary
      * button (every button, when none is primary) is disabled.
      */