@synopackageland/ui 0.23.5 → 0.23.7

package/docs/mobile-native.md

@@ -14,11 +14,12 @@ App. Each line links to its details below.
 | One compact top bar | One 44px row: Back, the menu button or the App icon, the title, at most two icons and one "…". No brand row, no second header row. |
 | 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. |
+| 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. While the page has scrolled less than the room above its content (the bar's row, a toolbar row, a host header's room), the bars show, a bounce past the top included; a scroll back into that zone shows them before the room shows empty, so the first content never sits below an empty band. See [Hide on scroll](#native-phone-shell) and [Gesture velocity](#gesture-velocity). |
+| Commit footers never hide on scroll | A `SettingsPage` commit footer (Reset / Apply) is out of sight while the form is clean, slides in when it becomes dirty, invalid or saving, and stays in one place through every scroll and fling; Apply, Reset or the form becoming clean slides it out. On a phone it is a compact bar (8px padding, 32px buttons with 14px text and a 44px hit area: 48px plus its divider and the real safe-area inset), the tab bar stays directly under it, and the page's end space includes it so the last field scrolls fully above it. See [Settings footer](#native-phone-shell). |
+| 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 +220,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
@@ -703,14 +717,20 @@ scrolls natively; the decision reads the shared velocity estimator (see
 [Gesture velocity](#gesture-velocity)) and the distance travelled one way:
 
 - a slow scroll down of `hideDistance` (48px) slides the bar, the tab bar,
-  the FAB and a clean settings footer out (`data-ui-bars-hidden`); a slow
+  and the FAB out (`data-ui-bars-hidden`); a slow
   scroll up of `showDistance` (24px) brings them back, so a slow or wobbly
   drag never flickers them;
 - a flick at `flick` (1000 px/s) or faster hides them, or shows them, at
   once, and they move in 60% of `--ui-motion-bars` (never under 120ms;
   `--ui-bars-motion` on the layout), else in `--ui-motion-bars` (200ms; at
   once with reduced motion);
-- the top of the page and a scroll that stops at its end bring them back.
+- while the page has scrolled less than the room above its content (the
+  top of the content area measured from the layout's column: the bar's row,
+  a toolbar row, a DSM portal header's room), they show whatever the
+  direction or speed, a bounce past the top included; they hide only once
+  content lies under them, and a scroll back into that zone shows them
+  before the room above the content can show empty;
+- a scroll that stops at the page's end brings them back.
 
 The bars move by `transform` only. When the page scrolls in an area under
 the bar (a fill layout, or an App shell whose `main` does not let the
@@ -733,14 +753,20 @@ page that scrolls less than the bars' room never hides them.
 
 - Opt out for the App: `<AppLayout :hide-on-scroll="false">`; for one page:
   `<PageContent :hide-on-scroll="false">`. Both keep the settings footer too.
-- **Settings footer.** A `SettingsPage` footer hides with the bars only while
-  the form is clean: never while it is dirty, invalid or saving, so Apply is
-  in reach after every edit. Set `dirty`, `invalid` and `saving` on the
+- **Settings footer.** On a phone a `SettingsPage` footer is a commit bar
+  and never takes part in hide on scroll. It is out of sight while the form
+  is clean and slides in when the form is dirty, invalid or saving; it then
+  stays in one place through every scroll and fling, and slides out after
+  Apply, Reset or the form becoming clean. 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. Set `dirty`, `invalid` and `saving` on the
   SettingsPage, or let it read them: clean while the footer's primary button
   (every button, without a primary) is disabled, invalid while a field has
-  `aria-invalid="true"`, saving while a footer button is loading. A clean
-  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.
+  `aria-invalid="true"`, saving while a footer button is loading. The phone
+  footer is compact: 8px above and below 32px buttons (14px text, 12px side
+  padding), 48px plus its divider and only the real safe-area inset; each button keeps a 44px
+  hit area inside the footer. A DSM window and a desktop are unchanged.
 
 **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
@@ -820,8 +846,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 +872,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/docs/release-checks.md

@@ -8,7 +8,7 @@ checks through the optional build-isolation wrapper.
 
 | Entry point | Default | Explicit full |
 | --- | --- | --- |
-| `npm run gates`, `scripts/gates.mjs` | Internal-content checks, build, lint, typecheck, unit tests, notices, isolated pack and tarball content audit | Adds Chromium installation, responsive/adaptive/date-picker/JSON/host/switch/layout/InfoTip/motion/short-viewport/phone-layout/focus-restore browser checks, Histoire build, exact-tarball registry consumer smoke |
+| `npm run gates`, `scripts/gates.mjs` | Internal-content checks, build, lint, typecheck, unit tests, notices, isolated pack and tarball content audit | Adds Chromium and WebKit installation, responsive/adaptive/date-picker/JSON/host/switch/layout/InfoTip/motion/short-viewport/phone-layout/phone-bars (Chromium and WebKit)/focus-restore browser checks, Histoire build, exact-tarball registry consumer smoke |
 | `pnpm check`, `check:fast` | Basic, with optional Docker host build isolation | `SPL_FULL_GATE=1` selects the same full plan |
 | `fast-ci.yml`, composite verify action | Basic | No automatic extended checks |
 | Disabled CI/release workflow templates | Basic, version/tag/ancestry checks, stage, pack and actual archive audit | No implicit browser or registry consumer smoke |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.23.5",
+  "version": "0.23.7",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",
@@ -79,34 +79,6 @@
     "@tiptap/vue-3": "3.32.1",
     "zod": "^4.6.5"
   },
-  "devDependencies": {
-    "@eslint/js": "10.0.1",
-    "@histoire/plugin-vue": "1.0.0-beta.1",
-    "@tailwindcss/vite": "4.3.3",
-    "@tanstack/vue-virtual": "3.13.39",
-    "@vitejs/plugin-vue": "6.0.9",
-    "@vue/test-utils": "2.5.1",
-    "@vueuse/core": "14.4.0",
-    "eslint": "10.11.0",
-    "eslint-plugin-vue": "10.11.1",
-    "flexsearch": "0.8.212",
-    "globals": "17.12.0",
-    "histoire": "1.0.0-beta.1",
-    "jsdom": "30.1.1",
-    "playwright": "1.58.2",
-    "reka-ui": "2.11.0",
-    "tailwindcss": "4.3.3",
-    "typescript": "5.9.3",
-    "typescript-eslint": "8.71.0",
-    "vite": "7.3.6",
-    "vite-plugin-dts": "5.1.1",
-    "vitest": "5.0.2",
-    "vscode-oniguruma": "2.0.1",
-    "vscode-textmate": "9.3.2",
-    "vue": "3.5.43",
-    "vue-eslint-parser": "10.4.1",
-    "vue-tsc": "3.3.11"
-  },
   "engines": {
     "node": ">=20"
   },
@@ -117,62 +89,5 @@
       "reka-ui": "2.11.0"
     }
   },
-  "homepage": "https://www.varvis.me/docs/",
-  "scripts": {
-    "check:docs": "node --test scripts/check-doc-versions.test.mjs && node scripts/check-doc-versions.mjs",
-    "dev": "vite build --watch",
-    "build": "vite build && vite build --mode json && vite build --mode rich-text && vite build --mode grid && vite build --mode cli && vite build --mode preview && vite build --mode embedded && node scripts/postbuild.mjs",
-    "lint": "eslint .",
-    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:changed": "echo \"test:changed skips the tests the changes since ${SYNOPKGLAND_GATE_BASE:-origin/master} do not reach (vitest --changed); pnpm check runs them all\" && vitest run --changed ${SYNOPKGLAND_GATE_BASE:-origin/master}",
-    "story": "histoire dev",
-    "story:build": "histoire build",
-    "check:host": "node scripts/dsm-host-shots.mjs",
-    "check:switch": "node scripts/check-switch.mjs",
-    "check:tabs": "node scripts/check-tabs.mjs",
-    "check:mobile": "node scripts/check-mobile-overflow.mjs",
-    "check:ui-patch": "node scripts/check-ui-patch.mjs",
-    "check:narrow": "node scripts/check-narrow-controls.mjs",
-    "check:drawer-form": "node scripts/check-drawer-form.mjs",
-    "check:responsive": "node scripts/check-responsive.mjs",
-    "check:adaptive": "node scripts/check-adaptive.mjs",
-    "check:sidebar-focus": "node scripts/check-sidebar-focus.mjs",
-    "check:json-render": "node scripts/check-json-render.mjs",
-    "check:motion": "node scripts/check-motion.mjs",
-    "check:topology": "node scripts/check-topology.mjs",
-    "check:wizard": "node scripts/check-wizard.mjs",
-    "check:edges": "node scripts/check-edges.mjs",
-    "check:data-grid": "node scripts/check-data-grid.mjs",
-    "check:truncation": "node scripts/check-truncation.mjs",
-    "check:link": "node scripts/check-link.mjs",
-    "check:text-select": "node scripts/check-text-select.mjs",
-    "check:date-picker": "node scripts/check-date-picker.mjs",
-    "check:full-page": "node scripts/check-full-page.mjs",
-    "check:short-viewport": "node scripts/check-short-viewport.mjs",
-    "check:phone-layout": "node scripts/check-phone-layout.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",
-    "check:internal": "node --test scripts/check-internal-content.test.mjs scripts/check-npm-metadata.test.mjs && node scripts/check-internal-content.mjs --repo .",
-    "check:npm-metadata": "node scripts/check-npm-metadata.mjs",
-    "check:package": "node scripts/check-package-content.mjs",
-    "check:public-api-consumer": "node scripts/check-public-api-consumer.mjs",
-    "notices:update": "node scripts/third-party-notices.mjs --write",
-    "notices:check": "node scripts/third-party-notices.mjs --check",
-    "check": "bash scripts/docker-check.sh \"npm run gates\"",
-    "check:fast": "bash scripts/docker-check.sh \"npm run gates\"",
-    "check:local-browser": "node scripts/app-local-browser.mjs",
-    "check:infotip": "node scripts/check-infotip.mjs",
-    "release:stage": "node scripts/stage-release.mjs",
-    "check:polish": "bash scripts/docker-check.sh --build --out .polish-shots 'node scripts/check-polish.mjs'",
-    "check:acceptance": "node scripts/check-acceptance.mjs",
-    "check:palette": "node scripts/check-palette.mjs",
-    "gates": "node scripts/gates.mjs",
-    "gates:full": "node scripts/gates.mjs --full",
-    "check:layout": "node scripts/check-layout.mjs",
-    "release:smoke": "node scripts/release-smoke.mjs",
-    "check:browser-install": "playwright install chromium"
-  }
-}
+  "homepage": "https://www.varvis.me/docs/"
+}