@synopackageland/ui 0.21.0 → 0.22.0

package/docs/mobile-native.md

@@ -267,7 +267,7 @@ are in `src/feedback/feedback.css`.
 
 | | Desktop, tablet, narrow window with a mouse | Phone |
 |---|---|---|
-| Toast | bottom right, 360px, swipe right, a stack | bottom, 8px from each side, above the visible tab bar or the keyboard (`--ui-kb-inset`), whichever is higher, plus `--ui-safe-bottom` and 8px; swipe down; only the newest shows, with a `+N` count of the others still open |
+| Toast | bottom right, 360px, swipe right, a stack | bottom, 8px from each side, above the visible tab bar or the keyboard (`--ui-kb-inset`), whichever is higher, plus `--ui-safe-bottom` and 8px, and 8px above a shown FAB; swipe down; only the newest shows, with a `+N` count of the others still open |
 | Notification | the chosen corner, 360px | top, 8px from each side, below `--ui-safe-top` plus 8px; `alignment` is ignored |
 
 - Toasts behind the front one keep their own timers, so a short one can
@@ -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
@@ -531,18 +531,33 @@ change: the same slot moves.
   it and focus returns to the FAB. A pick runs the action and closes the dial;
   an action that opens a menu closes it once the menu closes. The page behind
   is inert while it is open. Reduced motion shows and hides it at once.
+- Every pill is its icon and its text. An action with no text of its own (an
+  `IconButton` such as "More actions", an icon-only Button) shows its
+  accessible name, from `aria-label` or `title`; the pill sizes to it and a
+  name too long for the screen ends in an ellipsis inside the pill.
 - 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. Toasts are not moved above 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,
+  a DSM window and a desktop place toasts as before.
 
 **Hide on scroll.** On by default (`AppLayout` `hide-on-scroll`). Scrolling
 the page down 16px or more slides the bar, the tab bar, the FAB and a clean
@@ -565,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.0",
+  "version": "0.22.0",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",
@@ -60,62 +60,6 @@
     "./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: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"
   },
@@ -166,13 +110,6 @@
   "engines": {
     "node": ">=20"
   },
-  "packageManager": "pnpm@10.33.2",
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "esbuild",
-      "vue-demi"
-    ]
-  },
   "config": {
     "bundledRuntime": {
       "@tanstack/vue-virtual": "3.13.39",
@@ -180,5 +117,61 @@
       "reka-ui": "2.11.0"
     }
   },
-  "homepage": "https://www.varvis.me/docs/"
-}
+  "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: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"
+  }
+}