@synopackageland/ui 0.23.2 → 0.23.4

package/docs/mobile-native.md

@@ -499,6 +499,10 @@ the page, `--ui-chrome-height` tall (44px, plus a 1px rule):
 - **The drawer's head:** the App's icon and name, then the close button. The
   name takes the row up to the close button and is cut with "…" only when it
   is longer than that.
+- **The drawer's focus:** opened with Enter or Space, focus lands on the
+  close button with its ring; opened by a tap or click, on the drawer panel,
+  which draws no ring. Tab still moves through the drawer only, and closing it
+  gives focus back to what opened it.
 - **Actions:** first the page's own actions, then `headerActions`
   (DropdownMenu entries). A pick emits `headerAction` with the key.
 - **One "…".** The bar never shows two overflow buttons. While the page's own
@@ -608,12 +612,16 @@ change: the same slot moves.
   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.
+  `data-ui-page-fills`) puts that room at the end of its own scroller instead.
+  PageContent marks the vertical scroller in its body that reaches its bottom
+  `data-ui-page-scroller` (its own bottom padding is kept in
+  `--ui-page-scroller-pad`) and the page `data-ui-page-scroller-room`; the
+  scroller then runs down to the tab bar or the bottom accessory, its rows
+  pass under the FAB, which covers only its own circle, and the last row can
+  be scrolled above it. No blank band is left under the list, with the FAB
+  in view or hidden. A fill page whose scroller is not found keeps the room
+  under its content. 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,
@@ -682,8 +690,39 @@ no offset of its own.
 of its scroller (the covered padding, a sticky `PageHeader` that keeps a row
 of its own, and the phone's tabs strip). Every element in the page body gets
 it as `scroll-margin-top`, so `scrollIntoView`, a `#hash` link and focus
-land below the stuck rows. A row an App makes sticky under them uses
-`top: var(--ui-sticky-top-offset)` instead of a hardcoded 44 or 96px.
+land below the stuck rows.
+
+**An App's own sticky row: `data-ui-sticky`.** A row the App keeps at the
+top of its page (a sticky audio player on a detail page, a filter row) is
+marked `data-ui-sticky`, anywhere in the PageContent's body. PageContent
+measures it (ResizeObserver, again when rows mount, unmount or change size)
+and, while it sticks, adds its height to `--ui-sticky-top-offset`, so
+`scrollToStart`, `scrollIntoViewWithinScroller`, a `#hash` link and focus
+land below it too. The UI also sticks it: `position: sticky`, `top` right
+under what sticks above it (`--ui-sticky-row-top`: the covered padding, a
+sticky `PageHeader`, the phone's tabs strip and earlier rows; several rows
+stack in document order), `z-index: 2` and the page header's background.
+An App sets no `top` of its own and measures nothing.
+
+```vue
+<PageContent>
+  <PageHeader :title="meeting.title" back @back="goBack" />
+  <div class="player" data-ui-sticky><AudioPlayer :src="meeting.audio" /></div>
+  <p v-for="line in transcript" :id="line.id" :key="line.id">{{ line.text }}</p>
+</PageContent>
+<!-- scrollToStart(document.getElementById(line.id)) lands the line under the player -->
+```
+
+- A row is counted while its computed `position` is `sticky`: an App that
+  lets it scroll at some widths (`position: static` in a media query) drops
+  it from the offset there. A row in a nested PageContent counts for that
+  page only.
+- The offset is the page's, not per element: content above a sticky row in
+  the middle of a page also stops that much lower (never under it).
+- The rule has one attribute's specificity, so an App's own class wins for
+  `position`, `background` or `z-index`.
+- Before 0.23.4 an App measured its row and added it to the token by hand;
+  remove that code when it marks the row instead.
 
 **The end of a page: `--ui-page-end-space`.** The room after a page's last
 row, 24px. While the bars are hidden on a fill page (`data-ui-page-fills`)
@@ -700,6 +739,20 @@ the default, or `start`), honours `scroll-margin-top` / `-bottom` (so the
 sticky offset above applies) and moves at once under reduced motion.
 `scrollToStart(el)` is the `block: 'start'` case.
 
+`nearestScroller` skips an element whose content is not taller than it
+(`scrollHeight > clientHeight`), as it has nothing to scroll. jsdom lays
+nothing out (both are 0), so a unit test of code that calls these helpers
+gives its scroller geometry, or the helpers fall back to the document:
+
+```ts
+const list = document.createElement('div')
+list.style.overflowY = 'auto'
+Object.defineProperty(list, 'clientHeight', { value: 400 })
+Object.defineProperty(list, 'scrollHeight', { value: 1200 })
+list.scrollBy = vi.fn()
+vi.spyOn(list, 'getBoundingClientRect').mockReturnValue(new DOMRect(0, 0, 390, 400))
+```
+
 ```ts
 import { scrollToStart, scrollIntoViewWithinScroller } from '@synopackageland/ui'
 scrollToStart(sectionHeading)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.23.2",
+  "version": "0.23.4",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",
@@ -60,6 +60,63 @@
     "./themes/dsm7-embedded-reset.css": "./dist/themes/dsm7-embedded-reset.css",
     "./themes/dsm7-embedded-theme.css": "./dist/themes/dsm7-embedded-theme.css"
   },
+  "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"
+  },
   "peerDependencies": {
     "vue": "^3.5.0"
   },
@@ -110,6 +167,13 @@
   "engines": {
     "node": ">=20"
   },
+  "packageManager": "pnpm@10.33.2",
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild",
+      "vue-demi"
+    ]
+  },
   "config": {
     "bundledRuntime": {
       "@tanstack/vue-virtual": "3.13.39",
@@ -117,62 +181,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/"
+}