@synopackageland/ui 0.20.16 → 0.20.18

package/docs/callout.md

@@ -51,6 +51,33 @@ otherwise the first toolbar (`AppToolbar`) or page header (`PageHeader`)
 shows one while a callout is closed, and none when nothing is. There is
 never a second icon, wherever the App puts the callout.
 
+**A notice about a passing state closes for that appearance only.** For a
+state that comes and goes (reconnecting, an error, a stalled capture), show
+the Callout with `v-if` while the state lasts and set
+`dismiss-scope="occurrence"`. Closing hides this appearance: nothing is
+stored, and the dismissal is forgotten when the Callout unmounts, so the next
+time the state starts the notice shows again. `persistent` (the default) is
+the behaviour above.
+
+```vue
+<Callout v-if="reconnecting" tone="warning" dismiss-key="reconnecting" dismiss-scope="occurrence">
+  Reconnecting… Notes are saved on this device until the connection is back.
+</Callout>
+```
+
+To show a closed callout again from code (its condition ended while it stays
+mounted, or a setting was reset), forget its dismissal by its `dismissKey`:
+
+```ts
+import { dismissalKey, forgetDismissal } from '@synopackageland/ui'
+
+forgetDismissal(dismissalKey('reconnecting'))
+```
+
+`dismissalKey(dismissKey)` is the storage key of the callout with that
+`dismissKey`; `forgetDismissal(key)` removes it from this page load and from
+`localStorage`, and a mounted callout under that key shows again.
+
 Storage is read and written inside `try`/`catch`: without it (a private
 window, blocked site data) a callout shows as usual, and closing it lasts for
 the page load.
@@ -160,6 +187,18 @@ and without an action, light and dark, and on a settings page:
   toast.success('Settings applied', 'Added port 6690')
   ```
 
+  `useToast()` needs a `<ToastProvider>` ancestor (the App puts one around
+  its shell) and
+  throws without it. A component that also mounts without the App shell (in
+  a unit test or a preview) asks for `useToast({ optional: true })`: without a
+  provider it gets a controller that shows nothing (its calls return -1,
+  `update` returns false). A test that wants to see the toasts provides its
+  own controller under the exported `toastControllerKey`:
+
+  ```ts
+  mount(Component, { global: { provide: { [toastControllerKey]: fakeToast } } })
+  ```
+
 - Work in progress keeps one toast id from start to result. A pending toast
   shows only if the work takes longer than 300 ms, has no timer, and turns
   into its result in place; an error's Retry can turn it back into pending:
@@ -197,6 +236,7 @@ and without an action, light and dark, and on a settings page:
 | `#details` + `v-model:expanded` | Longer text behind a "Learn more" toggle (`moreLabel`, `lessLabel`); in a hint, the tooltip of the whole line (`moreLabel` is not used) |
 | `code` | A machine error code, shown quieter after the message |
 | `dismissible` (default `true`), `dismissKey`, `closeLabel`, `@close` | The close button. Closing is remembered (a `danger` callout for this page load only) until the text changes; `dismissKey` is the callout's stable id within the App. `false` only for a state that must stay in view |
+| `dismissScope` | `persistent` (default): closing is remembered as above. `occurrence`: this appearance only, forgotten when the Callout unmounts |
 | `fill` | Deprecated: a Callout spans its container by default |
 
 Theme hooks (`data-tone`, `data-variant`, `data-fill`, `data-dismissible`, the `data-ui-callout-*`

package/docs/mobile-native.md

@@ -171,6 +171,34 @@ own) keeps scrolling. An App that puts small controls flush with the edge of
 its own scroller, outside a `PageContent`, clips that content sideways the
 same way.
 
+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
+`--ui-hit-end-room` on itself to the room between it and the component's
+end edge, and its box stops there and grows towards its start side instead,
+still the full minimum:
+
+```css
+inset-inline-end: max(min(0px, calc((100% - var(--ui-hit-min)) / 2)), calc(-1 * var(--ui-hit-end-room, var(--ui-hit-min))));
+inset-inline-start: calc(min(0px, 100% - var(--ui-hit-min)) - <inset-inline-end>);
+```
+
+The Callout close button (6px; 0 for an inline Callout), a Tag's remove
+button, the SearchField clear button, the password reveal button, the
+PathDisplay copy button and the Notification close button set it. A
+component's own smaller slop stops at its end edge too: on the last
+FileThumbs and RichTextEditor thumbnail and remove badge (the last box is
+narrower; a row's last item has no neighbour to share room with), and on the
+InputSteppers presets button (shifted towards the text, same size). Unset,
+the box grows evenly as above.
+
+A scroller cuts off the part of a box outside it on every side. A control on
+a scroller's start edge loses that part too, so a scroller that holds page
+content keeps the page gutter as its own padding: on touch a `SettingsPage`
+body reaches over the gutter and pads its content by it. Tags in a select
+field keep `--ui-tap-gap` between them on touch, so a tag's remove button
+(44px box) never reaches the next tag.
+
 `check:mobile` exempts a link set in a sentence (inline, with text beside it
 in the same parent): WCAG 2.5.8 lets the line of text decide its size. A link
 alone on its line still needs 44px.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.20.16",
+  "version": "0.20.18",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",
@@ -60,61 +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: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"
   },
@@ -165,13 +110,6 @@
   "engines": {
     "node": ">=20"
   },
-  "packageManager": "pnpm@10.33.2",
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "esbuild",
-      "vue-demi"
-    ]
-  },
   "config": {
     "bundledRuntime": {
       "@tanstack/vue-virtual": "3.13.39",
@@ -179,5 +117,60 @@
       "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: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"
+  }
+}