@synopackageland/ui 0.19.3 → 0.19.4

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # 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.

package/README.md

@@ -521,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:
 
@@ -583,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
 
@@ -684,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/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/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/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";

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';