@synopackageland/ui 0.18.3 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.19.0 (2026-11-01)
+
+Components move a little by default, so an App gets it by upgrading. Only opacity, transforms and height through grid rows move; nothing bounces or loops. Exits are shorter than entrances and let clicks through at once, nothing animates on first render, and `prefers-reduced-motion: reduce` makes all of it instant.
+
+- Motion tokens: `--ui-motion-fast` 120ms, `--ui-motion-normal` 180ms (was 160ms), and new `--ui-motion-slow` 240ms, `--ui-motion-ease-out`, `--ui-motion-ease-in` and `--ui-motion-ease-in-out` ([theme hooks](docs/theme-hooks.md#motion)).
+- `Dialog`, `MessageBox`, `WizardDialog`, `AboutDialog` and `ImageLightbox`: the mask fades in; the panel fades in and settles from 97 %, and fades out on close.
+- `DropdownMenu`, `ContextMenu`, `Popover`, `Select`, `Combobox`, `MultipleSelect`, `SuperboxSelect` and `DatePicker`: the list fades in and drops 4px from its trigger's side; it fades out in 100ms.
+- `Notification` slides 8px in from its edge. `Toast` and `Sheet` keep their slides, now on the tokens; `Sheet` also slides from the top and bottom.
+- `Card` (expandable), `SettingsSection`, `ExpandableItem`, `Callout` details, `TimelineRow` detail, `FacetPanel` groups, `Accordion` and `Fieldset` open and close their height, and what follows moves with it. A collapsed body is `inert`.
+- `DataGrid`, `DataTable` and `DataView`: a row the user just added (one to three new keys, every old row still there) fades in from a light selected tint. The first data, a refresh, paging and removals do not animate.
+- `LoadingMask` fades in and out. A `Tabs` or `SectionTabs` panel switched to fades in with a 4px rise; the first panel does not animate.
+- `Button`, `IconButton` and `SplitButton` show the press at once; the release eases.
+- `data-ui-motion="off"` on any ancestor (an `AppRoot`, `<html>`) turns this motion off inside it, as reduced motion does. `AppRoot` passes it to dialogs that float outside its window.
+
 ## 0.18.3 (2026-11-01)
 
 - Fix `WizardStep type="done"` losing its success mark and confetti when the step has a `#hero` illustration. The mark now shows above the stage; a done step without a hero is unchanged.

package/README.md

@@ -538,7 +538,8 @@ DSM-style application building blocks:
 
 `Tabs` and `SectionTabs` move a raised selection notch in 120ms. Selected labels
 are blue; main labels are bold 14px and section labels bold 13px. `Tabs` fades its
-new panel in over 160ms, with immediate selection and keyboard response.
+new panel in with a 4px rise over 180ms, with immediate selection and keyboard
+response; the panel shown first does not animate.
 A strip narrower than its tabs keeps one row and scrolls sideways (mouse
 wheel, trackpad, touch or keyboard) with no visible scrollbar; it never
 scrolls vertically. A side that hides tabs fades out (`data-overflow-start`,

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

@@ -29,7 +29,7 @@ type __VLS_ModelProps = {
     'expanded'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_6: {}, __VLS_14: {}, __VLS_21: {}, __VLS_28: {}, __VLS_30: {};
+declare var __VLS_6: {}, __VLS_14: {}, __VLS_21: {}, __VLS_34: {}, __VLS_36: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 } & {
@@ -37,9 +37,9 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_21) => any;
 } & {
-    details?: (props: typeof __VLS_28) => any;
+    details?: (props: typeof __VLS_34) => any;
 } & {
-    actions?: (props: typeof __VLS_30) => any;
+    actions?: (props: typeof __VLS_36) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     close: () => any;

package/dist/components/composite/settings-section/SettingsSection.vue.d.ts

@@ -10,7 +10,7 @@ type __VLS_Props = {
     /** Bound with `v-model:open` for controlled collapse. */
     open?: boolean;
 };
-declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_21: {}, __VLS_23: {};
+declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_20: {}, __VLS_27: {}, __VLS_29: {};
 type __VLS_Slots = {} & {
     title?: (props: typeof __VLS_6) => any;
 } & {
@@ -20,11 +20,11 @@ type __VLS_Slots = {} & {
 } & {
     actions?: (props: typeof __VLS_12) => any;
 } & {
-    description?: (props: typeof __VLS_14) => any;
+    description?: (props: typeof __VLS_20) => any;
 } & {
-    default?: (props: typeof __VLS_21) => any;
+    default?: (props: typeof __VLS_27) => any;
 } & {
-    footer?: (props: typeof __VLS_23) => any;
+    footer?: (props: typeof __VLS_29) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;

package/dist/components/composite/timeline-row/TimelineRow.vue.d.ts

@@ -20,7 +20,7 @@ type __VLS_ModelProps = {
     'expanded'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_10: {}, __VLS_12: {}, __VLS_20: {}, __VLS_35: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_10: {}, __VLS_12: {}, __VLS_20: {}, __VLS_41: {};
 type __VLS_Slots = {} & {
     leading?: (props: typeof __VLS_1) => any;
 } & {
@@ -32,7 +32,7 @@ type __VLS_Slots = {} & {
 } & {
     actions?: (props: typeof __VLS_20) => any;
 } & {
-    expand?: (props: typeof __VLS_35) => any;
+    expand?: (props: typeof __VLS_41) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:expanded": (value: boolean) => any;

package/dist/components/containers/card/Card.vue.d.ts

@@ -14,17 +14,17 @@ type __VLS_Props = {
     /** Shows a skeleton in place of the body and footer while they load. */
     loading?: boolean;
 };
-declare var __VLS_8: {}, __VLS_10: {}, __VLS_22: {}, __VLS_24: {}, __VLS_26: {};
+declare var __VLS_8: {}, __VLS_10: {}, __VLS_28: {}, __VLS_30: {}, __VLS_32: {};
 type __VLS_Slots = {} & {
     title?: (props: typeof __VLS_8) => any;
 } & {
     'header-actions'?: (props: typeof __VLS_10) => any;
 } & {
-    body?: (props: typeof __VLS_22) => any;
+    body?: (props: typeof __VLS_28) => any;
 } & {
-    default?: (props: typeof __VLS_24) => any;
+    default?: (props: typeof __VLS_30) => any;
 } & {
-    footer?: (props: typeof __VLS_26) => any;
+    footer?: (props: typeof __VLS_32) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:expanded": (value: boolean) => any;

package/dist/components/containers/expandable-item/ExpandableItem.vue.d.ts

@@ -31,7 +31,7 @@ type __VLS_Props = {
     /** Emits `select` when the summary row is clicked; the row then expands on a double click instead. */
     selectable?: boolean;
 };
-declare var __VLS_1: {}, __VLS_8: {}, __VLS_20: {}, __VLS_22: {}, __VLS_24: {}, __VLS_26: {}, __VLS_28: {}, __VLS_30: {};
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_20: {}, __VLS_22: {}, __VLS_24: {}, __VLS_26: {}, __VLS_34: {}, __VLS_36: {};
 type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_1) => any;
 } & {
@@ -45,9 +45,9 @@ type __VLS_Slots = {} & {
 } & {
     block?: (props: typeof __VLS_26) => any;
 } & {
-    detail?: (props: typeof __VLS_28) => any;
+    detail?: (props: typeof __VLS_34) => any;
 } & {
-    'toggle-icon'?: (props: typeof __VLS_30) => any;
+    'toggle-icon'?: (props: typeof __VLS_36) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: (event: MouseEvent) => any;

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    open: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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;
+    };
+};