@synopackageland/ui 0.20.16 → 0.20.18

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 0.20.18 (2026-11-06)
+
+- `Callout` takes `dismissScope`. `persistent` (the default) keeps today's behaviour: a closed callout stays closed after a reload until what it says changes. `occurrence` is for a notice about a passing state (reconnecting, an error, a stalled capture) that the App shows with `v-if` while the state lasts: closing hides this appearance only, nothing is stored, and the dismissal is forgotten when the Callout unmounts, so the next time the state starts the notice shows again. `dismissalKey` and `forgetDismissal` are exported: `forgetDismissal(dismissalKey('reconnecting'))` shows the callout with that `dismissKey` again (docs/callout.md, "Closing")
+- `useToast({ optional: true })` returns a controller that shows nothing when there is no `ToastProvider` (in a unit test or a preview) instead of throwing; its calls return -1 and `update` returns false. `useToast()` without options still throws, and its message names the option. `toastControllerKey` is exported, so a test can provide its own controller (docs/callout.md)
+- On a touch screen, the remove button of a tag in `MultipleSelect` and `SuperboxSelect` gets the shared 44px tap box (`data-ui-hit`) instead of its 16px drawn size, and nothing scrolls sideways. So that no box covers another control, the tags in the field keep the tap gap (`--ui-tap-gap`, 8px) side by side and a box's height between wrapped rows, and the tags keep room at their end so the last box on a row never covers the clear and open buttons. The hidden read-only input after the tags takes no taps; a tap on the field opens it as before. Mouse layouts are unchanged
+- On a touch screen, a `SettingsPage` in a page with gutters keeps the whole 44px tap box of a control on its content's edge. Its body is a scroller of its own and began at the gutter, so a Switch under its label on a phone (a pushed settings section) kept only 32px of its width. On touch the body now reaches over the gutter, as its footer does, and keeps it as padding: the content stays where it was. `check:mobile` now passes in full
+- A test now covers a full-width dismissible Callout at the top of an `overflow-y: auto` column with no `PageContent` (an App's record page) at 390px: nothing scrolls sideways since 0.20.17, and the close button keeps its 44px tap box inside the callout
+
+## 0.20.17 (2026-11-06)
+
+- On a touch screen, a control at the end edge of its own component no longer makes an App's page scroll sideways. A dismissible `Callout` stretched to full width in an App's own vertical scroller (not inside a `PageContent`) had its close button's 44px tap box reach 2px past the scroller (12px for an inline Callout) at 390px, so the scroller was wider than its view and a sideways drag moved the page. The shared tap box (hit-area.css) now takes `--ui-hit-end-room`, the room between a control and its component's end edge: the box stops at that edge and grows towards the control's start side instead, still 44px, and nothing is drawn differently. The Callout close button, 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 Tag's remove button drops its own extra 32px tap box, which the shared 44px box already covered. `FileThumbs` and `RichTextEditor` image thumbnails stop the tap box of the last item and its remove button at the row's end edge (the last `FileThumbs` item's box is 34px wide instead of 42px, its remove badge's 30px), and removable `FileThumbs` keep 6px at the end so the remove badge no longer sticks out of the row; the `InputSteppers` presets button's tap box stops at the field's edge and keeps its 32px by reaching further towards the text. Dialog, Drawer (`Sheet`), Toast, RecordPanel and AsidePanel close buttons already fit inside their headers and are unchanged (docs/mobile-native.md, "Hit area")
+
 ## 0.20.16 (2026-11-06)
 
 - Dialog, Drawer (`Sheet`, left and right) and `BottomSheet` now really give focus back to their opener on close. Since 0.20.15 they called `focus()` while the closing panel still held the page behind it: inside an `AppRoot` the background stays `inert` until the leave animation ends, so in a browser a `BottomSheet`, and every Dialog on a phone, left focus on `<body>`. Focus now moves once the panel has left the page and the opener is no longer inert, checked frame by frame for up to 120 frames, and only lands if `document.activeElement` is the opener. Focus the user has moved elsewhere in the meantime stays there, reopening the overlay cancels it, and a `closeAutoFocus` listener that prevents the default still places focus itself

package/dist/components/composite/callout/Callout.vue.d.ts

@@ -1,3 +1,4 @@
+import { CalloutDismissScope } from './calloutDismissal';
 type __VLS_Props = {
     tone?: 'info' | 'success' | 'warning' | 'danger';
     /**
@@ -20,6 +21,15 @@ type __VLS_Props = {
      * its dismissal is stored. Without it the id is drawn from the page path, the tone and the text.
      */
     dismissKey?: string;
+    /**
+     * `persistent` (default): closing is remembered after a reload too.
+     * `occurrence`: for a notice about a passing state (reconnecting, an error,
+     * a stalled capture) that the App shows with `v-if` while the state lasts.
+     * Closing hides this appearance only: nothing is stored, and the
+     * dismissal is forgotten when the Callout unmounts, so the next time the
+     * state starts it shows again.
+     */
+    dismissScope?: CalloutDismissScope;
     closeLabel?: string;
     /** A machine code (e.g. `login_wait_timeout`), shown after the message in a quieter style. */
     code?: string;
@@ -61,6 +71,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     variant: "soft" | "inline" | "hint";
     tone: "info" | "success" | "warning" | "danger";
     dismissible: boolean;
+    dismissScope: CalloutDismissScope;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/composite/callout/calloutDismissal.d.ts

@@ -3,10 +3,25 @@ import { Component } from 'vue';
 export declare function hashText(text: string): string;
 /** The App a dismissal belongs to: the DSM package, else the page's host and directory. */
 export declare function appScope(): string;
-/** The storage key of a callout: the App's id for it, or one drawn from the page, the tone and the text. */
-export declare function dismissalKey(dismissKey: string | undefined, tone: string, text: string): string;
+/**
+ * How long a closed Callout stays closed. `persistent` (default): after a
+ * reload too, until what it says changes (a `danger` callout for this page
+ * load). `occurrence`: this appearance only. The dismissal is kept in memory
+ * and forgotten when the Callout unmounts, so when the App shows it again
+ * for the next occurrence of its condition (a `v-if` on "reconnecting"), it
+ * is open again.
+ */
+export type CalloutDismissScope = 'persistent' | 'occurrence';
+/**
+ * The key a callout's dismissal is stored under: the App's `dismissKey` for it,
+ * or one drawn from the page, the tone and the text. With a `dismissKey` the
+ * tone and the text are not needed: `forgetDismissal(dismissalKey('reconnecting'))`
+ * shows a closed callout again.
+ */
+export declare function dismissalKey(dismissKey: string | undefined, tone?: string, text?: string): string;
 export declare function isDismissed(key: string, signature: string): boolean;
 export declare function rememberDismissal(key: string, signature: string, persist: boolean): void;
+/** Forgets a callout's dismissal (a key from `dismissalKey`): it shows again, on this page and after a reload. */
 export declare function forgetDismissal(key: string): void;
 /** A closed callout that is still on the page, as the info button lists it. */
 export interface HiddenCallout {

package/dist/components/primitives/toast/toast.d.ts

@@ -42,4 +42,14 @@ export type ToastController = {
     pending: (title: string, description?: string) => number;
 };
 export declare const toastControllerKey: InjectionKey<ToastController>;
-export declare function useToast(): ToastController;
+export type UseToastOptions = {
+    /**
+     * Without a `<ToastProvider>` ancestor, return a controller that shows
+     * nothing instead of throwing: for a component that also mounts in unit
+     * tests and previews without the App shell. Its calls return -1 (`update`
+     * returns false).
+     */
+    optional?: boolean;
+};
+/** The App's toasts. Throws without a `<ToastProvider>` ancestor, unless `optional` is set. */
+export declare function useToast(options?: UseToastOptions): ToastController;

package/dist/index.d.ts

@@ -57,8 +57,8 @@ export { default as DatePicker } from './components/primitives/date-picker/DateP
 export type { DateFormat, DateTimeParts, TimeFormat } from './components/primitives/date-picker/dateTime';
 export { DATE_FORMATS, TIME_FORMATS, composeDateTime, formatDateText, formatTimeText, hourOptions, minuteOptions, parseDateText, parseDateTime, } from './components/primitives/date-picker/dateTime';
 export { default as ToastProvider } from './components/primitives/toast/ToastProvider.vue';
-export { useToast } from './components/primitives/toast/toast';
-export type { ToastController, ToastMessage, ToastOptions, ToastTone } from './components/primitives/toast/toast';
+export { toastControllerKey, useToast } from './components/primitives/toast/toast';
+export type { ToastController, ToastMessage, ToastOptions, ToastTone, UseToastOptions } from './components/primitives/toast/toast';
 export { default as StatusSlot } from './feedback/StatusSlot.vue';
 export { useShowAfter } from './feedback/showAfter';
 export type { ShowAfterOptions } from './feedback/showAfter';
@@ -129,6 +129,8 @@ export { default as SettingsSection } from './components/composite/settings-sect
 export { default as Footbar } from './components/composite/footbar/Footbar.vue';
 export type { FootbarButton, FootbarButtonRegion, FootbarButtonSize, FootbarButtonVariant, } from './components/composite/footbar/types';
 export { default as Callout } from './components/composite/callout/Callout.vue';
+export { dismissalKey, forgetDismissal } from './components/composite/callout/calloutDismissal';
+export type { CalloutDismissScope } from './components/composite/callout/calloutDismissal';
 export { default as StepList } from './components/composite/step-list/StepList.vue';
 export type { StepListItem, StepStatus } from './components/composite/step-list/types';
 export { default as ConnectionTopology } from './components/composite/connection-topology/ConnectionTopology.vue';