@synopackageland/ui 0.19.2 → 0.19.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.19.4 (2026-11-02)
+
+- `SegmentControl`'s selected fill slides from the old item to the new one in 120ms, like the tab notch; a `variant="sheet"` tab's accent line slides the same way. Only transform and width move, through a `.ui-segment-thumb` shown while it slides (`data-ui-segment-moving`). The first render, a resize and a relabel do not move it, and reduced motion or `data-ui-motion="off"` switches at once.
+- New `MotionSwap` for content switched by a control or a route: `<MotionSwap :value="view">` rises what it holds 4px and fades it in over 180ms each time `value` changes, like a switched tab panel. Not on first render, the old content goes at once, the slot is not remounted, and reduced motion turns it off. Pair it with `SegmentControl`, or wrap an App shell's router view ([README](README.md#segmentcontrol-and-the-views-it-switches)).
+- `AppLayout`'s page content rises in the same way after navigating with its `AppSidebar` (side or top) or `AppTabBar`; the first load does not. Only opacity and a translate move, so the page height and scroll stay put.
+- Fix a `DatePicker` field being about 8px taller than a text input beside it: its inline root sat on the text baseline and left a descender gap below, so in a row of fields its label and box sat higher than its neighbours'. The root now aligns to the top of its line.
+- New `AvatarStack`: people as overlapping round avatars (a board card's assignees) with each name in a tooltip, the group named for screen readers, and a "+n" circle past `max` (default 3). The comment avatar is exported as `Avatar`, and both take `initials` (one or two letters) instead of the name's first character.
+- `Dialog` takes a `header` slot: what it holds (a breadcrumb, a menu) fills the header strip beside the close button, and the `title` stays as the dialog's accessible name only. New `maxHeight` caps the panel (default 85vh), and `fullscreen` fills the viewport: `true` always, `'mobile'` at 640px and narrower, with `data-ui-dialog-fullscreen` set.
+- `ImageLightbox` has a Rotate button on pictures: each press turns the picture a quarter turn clockwise for viewing, such as a receipt photographed sideways. The file is unchanged and the next file opens upright; `data-ui-lightbox-rotate` carries `data-turns` while turned.
+
+## 0.19.3 (2026-11-02)
+
+- Fix the library's own text (a `SettingsPage` footer's Reset and Apply, Close, pagination, validation) showing English in an App that names its language only on `AppRoot`'s `lang` or not at all. `AppRoot` takes a `locale` prop and otherwise reads its `lang` attribute; with neither, and no `ConfigProvider locale` above, the text follows DSM's language in a DSM window, then the browser's, then English. `toUiLocale()` and `detectUiLocale()` map DSM codes (`cht`, `jpn`, …) and BCP-47 tags.
+- Fix a `SettingsPage` footer in a page with gutters (`PageContent`, an App shell) drawn as a box inset by the gutter: it now reaches both edges of the content area as DSM's footer does, its buttons on the content's right edge. `PageContent` sets `--ui-page-gutter-x` for this.
+- Library text in every language ends without a closing period (Version 2.0.0 is available, Could not check for updates, FilePicker's rejections); periods between sentences stay.
+
 ## 0.19.2 (2026-11-01)
 
 - Fix `FacetPanel` values showing no box until picked: a filter list read as blank space beside its labels. Every value now shows the Checkbox's box, empty until picked and ticked once picked, in the panel and in the phone sheet.

package/README.md

@@ -188,6 +188,11 @@ Inside `AppRoot`, a nested `ConfigProvider` (for `dir` or `locale`) must pass
 the same `teleport-to`, and your own `<Teleport>`s must target an element inside
 the root.
 
+The library's own text (Reset, Apply, Close, …) follows `AppRoot`'s `locale`
+prop, else its `lang` attribute (`<AppRoot :lang="locale">`), else a
+`ConfigProvider locale` above it, else DSM's language in a DSM window, then the
+browser's. Pass the language your App shows so both read alike.
+
 Theme overrides go on your own app root, after the library stylesheet. Use a
 package-specific selector, so an override does not also match other apps:
 
@@ -516,7 +521,7 @@ Primitives:
 - Sheet / Drawer — `:modal="false"` overlays the page without blocking it
 - DatePicker
 - ToastProvider + `useToast()`
-- Tabs / Accordion
+- Tabs / Accordion / MotionSwap (content switched by a control or a route rises in, as a switched tab panel does)
 
 DSM-style application building blocks:
 
@@ -578,9 +583,48 @@ on the strip (`nav`).
 ```
 
 Navigation-only `SectionTabs` usage still works. For content managed separately
-by the caller, add `class="ui-tab-panel"` to a panel keyed by the selected value
-to use the same short fade. These effects and the loading ring respect the
-system's reduced-motion preference.
+by the caller, wrap it in `MotionSwap` (below) for the same short rise. These
+effects and the loading ring respect the system's reduced-motion preference.
+
+### SegmentControl and the views it switches
+
+When the selection changes, `SegmentControl`'s selected fill (the accent line
+of a `variant="sheet"` tab) slides from the old item to the new one in 120ms,
+like the tab notch. The first render, a resize and a relabel do not move it;
+under reduced motion or `data-ui-motion="off"` it switches at once.
+
+Pair the control with its views through `MotionSwap`, keyed by the same value.
+A view switched to rises 4px and fades in over 180ms, like a switched tab
+panel; the view shown first does not animate, the old view goes at once, and
+the slot is not remounted by `MotionSwap` itself:
+
+```vue
+<SegmentControl v-model="view" aria-label="Health views">
+  <SegmentItem value="security">Security</SegmentItem>
+  <SegmentItem value="storage">Storage</SegmentItem>
+</SegmentControl>
+<MotionSwap :value="view">
+  <SecurityView v-if="view === 'security'" />
+  <StorageView v-else />
+</MotionSwap>
+```
+
+`AppLayout` does the same for its page: navigating with its `AppSidebar` (side
+or top) or `AppTabBar` rises the page content in; the first load does not. An
+App with its own shell wraps its router view instead (mount the App after
+`router.isReady()`, so the first route is not a change):
+
+```vue
+<RouterView v-slot="{ Component, route }">
+  <MotionSwap :value="route.path" class="min-h-0 flex-1">
+    <component :is="Component" />
+  </MotionSwap>
+</RouterView>
+```
+
+Only opacity and a translate move, so the page height and scroll position stay
+put. While it rises (180ms) the content is a containing block for
+`position: fixed` descendants.
 
 ### StatTile: counts that filter
 
@@ -679,7 +723,7 @@ already matched them. With `maxlength` the box counts characters near and over
 the limit and never cuts text.
 
 `FileThumbs` shows a few thumbnails and "+N", `ImageLightbox` shows files full
-size (arrow keys and swipes), and `UploadQueue` lists uploads with progress,
+size (arrow keys and swipes; Rotate turns a picture for viewing), and `UploadQueue` lists uploads with progress,
 retry and cancel. `useUploadQueue(upload, { concurrency, retries })` runs the
 uploads it shows. `FilePicker` takes pasted files with `paste`.
 

package/dist/components/app/app-root/AppRoot.vue.d.ts

@@ -1,3 +1,4 @@
+import { UiLocale } from '../../../i18n/locale';
 type __VLS_Props = {
     modalScope?: 'document' | 'app';
     /**
@@ -18,6 +19,12 @@ type __VLS_Props = {
      * `<html>` instead, but then passes `dark` here too when it sets an accent.
      */
     colorScheme?: 'light' | 'dark';
+    /**
+     * The language of the library's own text (Reset, Apply, Close, ...). Without
+     * it the root's `lang` attribute names it, then an enclosing ConfigProvider,
+     * then DSM's language in a DSM window, then the browser's.
+     */
+    locale?: UiLocale;
 };
 declare var __VLS_7: {}, __VLS_9: {};
 type __VLS_Slots = {} & {

package/dist/components/composite/comment-item/PersonInitials.vue.d.ts

@@ -2,12 +2,14 @@ type __VLS_Props = {
     name: string;
     id?: string;
     src?: string;
+    initials?: string;
     size?: 'sm' | 'md';
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     size: "sm" | "md";
     id: string;
     src: string;
+    initials: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/composite/data-grid/DataGrid.vue.d.ts

@@ -297,10 +297,10 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     }) => any) | undefined;
     onCellUpdate?: ((value: DataGridCellUpdate) => any) | undefined;
 }>, {
-    footer: boolean;
-    filter: string;
     sort: DataGridSort | null;
+    filter: string;
     fill: boolean;
+    footer: boolean;
     loading: boolean;
     group: DataGridGroup | null;
     loadingText: string;

package/dist/components/primitives/avatar/AvatarStack.vue.d.ts

@@ -0,0 +1,14 @@
+import { AvatarPerson } from './types';
+type __VLS_Props = {
+    people: AvatarPerson[];
+    max?: number;
+    label?: string;
+    size?: 'sm' | 'md';
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+    size: "sm" | "md";
+    max: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/primitives/avatar/types.d.ts

@@ -0,0 +1,7 @@
+/** One person in an AvatarStack: the name shows in the tooltip; `id` keeps the colour, `src` is a picture. */
+export type AvatarPerson = {
+    name: string;
+    id?: string;
+    src?: string;
+    initials?: string;
+};

package/dist/components/primitives/dialog/Dialog.vue.d.ts

@@ -14,6 +14,10 @@ type __VLS_Props = {
     height?: string;
     /** Keeps the panel from shrinking with short content, capped to the available height. */
     minHeight?: string;
+    /** The tallest the panel grows before its body scrolls (default 85vh), capped to the available height. */
+    maxHeight?: string;
+    /** Fills the viewport: `true` always, `'mobile'` only on a phone-width screen (640px and narrower), for a dialog that is a page there. */
+    fullscreen?: boolean | 'mobile';
     closeLabel?: string;
     /** Hides the header close affordance for fixed-flow dialogs that own their dismiss path. */
     showClose?: boolean;
@@ -26,13 +30,15 @@ type __VLS_Props = {
     /** The mask over the app behind: `dim` (default), `light` (a faint tint, as DSM leaves the window behind a wizard) or `none`. It blocks presses in each case. */
     scrim?: 'dim' | 'light' | 'none';
 };
-declare var __VLS_14: {}, __VLS_73: {}, __VLS_81: {};
+declare var __VLS_14: {}, __VLS_62: {}, __VLS_75: {}, __VLS_83: {};
 type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_14) => any;
 } & {
-    default?: (props: typeof __VLS_73) => any;
+    header?: (props: typeof __VLS_62) => any;
 } & {
-    footer?: (props: typeof __VLS_81) => any;
+    default?: (props: typeof __VLS_75) => any;
+} & {
+    footer?: (props: typeof __VLS_83) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     escapeKeyDown: (event: KeyboardEvent) => any;

package/dist/components/primitives/motion/MotionSwap.vue.d.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    /** What is shown; each change plays the rise-in. Usually the control's `v-model` or the route path. */
+    value: unknown;
+    /** Wrapper element. */
+    as?: string;
+};
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/i18n/locale.d.ts

@@ -1,6 +1,15 @@
 import { ComputedRef, InjectionKey } from 'vue';
 export type UiLocale = 'en' | 'zh-TW' | 'zh-CN' | 'ja' | 'ko' | 'de' | 'fr' | 'es' | 'it';
+export declare const UI_LOCALES: readonly UiLocale[];
 export declare const UI_LOCALE_KEY: InjectionKey<ComputedRef<UiLocale>>;
+/** The built-in locale for a DSM language code or a BCP-47 tag, or undefined
+ * when the library has no text for it. Chinese without a region reads as
+ * Traditional only for Taiwan, Hong Kong and Macau scripts and regions. */
+export declare function toUiLocale(tag: string | null | undefined): UiLocale | undefined;
+/** The language the page runs in when no AppRoot or ConfigProvider names one:
+ * DSM's language in a DSM window (DSM reloads the window when it changes),
+ * else the browser's, else English. */
+export declare function detectUiLocale(): UiLocale;
 export declare function useUiLocale(own: () => UiLocale | undefined): ComputedRef<UiLocale>;
 /** Named placeholders let applications translate messages without concatenating English. */
 export declare function formatUiText(template: string, values: Record<string, string | number>): string;

package/dist/i18n/text.d.ts

@@ -25,6 +25,7 @@ export declare const englishUiText: {
     readonly "Links start with http://, https:// or mailto:": "Links start with http://, https:// or mailto:";
     readonly "Mention someone": "Mention someone";
     readonly "Next file": "Next file";
+    readonly Rotate: "Rotate";
     readonly "Numbered list": "Numbered list";
     readonly "Open {name}": "Open {name}";
     readonly "Previous file": "Previous file";
@@ -156,15 +157,15 @@ export declare const englishUiText: {
     readonly "Enter password": "Enter password";
     readonly "Unsaved changes": "Unsaved changes";
     readonly "Save your changes before closing?": "Save your changes before closing?";
-    readonly "The value is not valid.": "The value is not valid.";
+    readonly "The value is not valid.": "The value is not valid";
     readonly "About this application": "About this application";
     readonly BETA: "BETA";
     readonly "Version {version}": "Version {version}";
     readonly "Checking for updates\u2026": "Checking for updates…";
-    readonly "Version {version} is available.": "Version {version} is available.";
-    readonly "Beta version {version} is available.": "Beta version {version} is available.";
-    readonly "Could not check for updates.": "Could not check for updates.";
-    readonly "You have the latest version.": "You have the latest version.";
+    readonly "Version {version} is available.": "Version {version} is available";
+    readonly "Beta version {version} is available.": "Beta version {version} is available";
+    readonly "Could not check for updates.": "Could not check for updates";
+    readonly "You have the latest version.": "You have the latest version";
     readonly "Could not refresh. Showing previous data": "Could not refresh. Showing previous data";
     readonly Retry: "Retry";
     readonly "Release notes": "Release notes";
@@ -225,7 +226,7 @@ export declare const englishUiText: {
     readonly "Copy path": "Copy path";
     readonly "Path: {path}": "Path: {path}";
     readonly Copied: "Copied";
-    readonly "Couldn't copy. Select the text and copy it manually.": "Couldn't copy. Select the text and copy it manually.";
+    readonly "Couldn't copy. Select the text and copy it manually.": "Couldn't copy. Select the text and copy it manually";
     readonly "Couldn't copy": "Couldn't copy";
     readonly "Clear filters": "Clear filters";
     readonly Filters: "Filters";

package/dist/index.d.ts

@@ -100,6 +100,7 @@ export { default as Pagination } from './components/primitives/pagination/Pagina
 export type { PaginationBeforeSwitchPage, PaginationLabels, PaginationPageSizeOption, PaginationSwitch, PaginationTotalTextMode, } from './components/primitives/pagination/Pagination.vue';
 export { default as SegmentControl } from './components/primitives/segment-control/SegmentControl.vue';
 export { default as SegmentItem } from './components/primitives/segment-control/SegmentItem.vue';
+export { default as MotionSwap } from './components/primitives/motion/MotionSwap.vue';
 export { default as SearchField } from './components/composite/search-field/SearchField.vue';
 export { default as SettingsRow } from './components/composite/settings-row/SettingsRow.vue';
 export { default as FormActions } from './components/composite/form-actions/FormActions.vue';
@@ -140,6 +141,9 @@ export type { FacetGroup, FacetSelection, FacetValue } from './components/compos
 export { default as TagEditor } from './components/composite/tag-editor/TagEditor.vue';
 export { default as CompletionToggle } from './components/composite/completion-toggle/CompletionToggle.vue';
 export { default as CommentItem } from './components/composite/comment-item/CommentItem.vue';
+export { default as Avatar } from './components/composite/comment-item/PersonInitials.vue';
+export { default as AvatarStack } from './components/primitives/avatar/AvatarStack.vue';
+export type { AvatarPerson } from './components/primitives/avatar/types';
 export { mentionParts } from './lib/mentions';
 export { default as MentionList } from './components/composite/mention-list/MentionList.vue';
 export type { MentionCandidate, MentionPart } from './lib/mentions';
@@ -265,6 +269,7 @@ export { default as OverflowToolbar } from './components/composite/overflow-tool
 export { computeOverflowFit, ITEM_GAP } from './components/composite/overflow-toolbar/overflow';
 export type { OverflowToolbarItem, OverflowToolbarMenuEntry, OverflowToolbarMoreMenu, OverflowToolbarMoreState, OverflowToolbarMoreText, } from './components/composite/overflow-toolbar/types';
 export type { UiLocale } from './i18n/locale';
+export { detectUiLocale, toUiLocale, UI_LOCALES } from './i18n/locale';
 export { useUiText } from './i18n/text';
 export type { UiTextKey } from './i18n/text';
 export { filePickerText } from './i18n/filePicker';