@synopackageland/ui 0.19.3 → 0.19.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/README.md +44 -5
- package/dist/components/composite/comment-item/PersonInitials.vue.d.ts +2 -0
- package/dist/components/primitives/avatar/AvatarStack.vue.d.ts +14 -0
- package/dist/components/primitives/avatar/types.d.ts +7 -0
- package/dist/components/primitives/dialog/Dialog.vue.d.ts +9 -3
- package/dist/components/primitives/motion/MotionSwap.vue.d.ts +21 -0
- package/dist/i18n/text.d.ts +1 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +9366 -9171
- package/dist/json-preview/preview.js +4922 -4887
- package/dist/lib/adaptiveLayout.d.ts +2 -0
- package/dist/lib/motion.d.ts +9 -0
- package/dist/reka-runtime.json +1 -1
- package/dist/theme.css +1 -1
- package/dist/themes/dsm7-embedded-theme.css +1 -1
- package/dist/themes/dsm7-embedded.css +1 -1
- package/dist/themes/dsm7.css +1 -1
- package/docs/app-local-modal.md +4 -0
- package/docs/theme-hooks.md +10 -4
- package/package.json +1 -1
package/docs/app-local-modal.md
CHANGED
|
@@ -50,6 +50,10 @@ Dialog and Sheet forward cancellable `escapeKeyDown`, `pointerDownOutside`,
|
|
|
50
50
|
<Dialog title="Settings" @escape-key-down="event => event.preventDefault()" />
|
|
51
51
|
```
|
|
52
52
|
|
|
53
|
+
Local Escape routing runs after the focused control's keydown handler. An inline
|
|
54
|
+
editor may call `preventDefault()` or `stopPropagation()` to cancel its edit first;
|
|
55
|
+
the next unconsumed Escape closes the top layer.
|
|
56
|
+
|
|
53
57
|
### A window-like dialog
|
|
54
58
|
|
|
55
59
|
DSM leaves the window behind a modal window readable: no dark mask, a soft
|
package/docs/theme-hooks.md
CHANGED
|
@@ -94,6 +94,10 @@ here stay implementation details and can change in any release.
|
|
|
94
94
|
| `data-ui-badge-dot` | `Badge`'s leading dot | present |
|
|
95
95
|
| `data-menu-description` | a `DropdownMenu` entry's second line | present |
|
|
96
96
|
| `data-ui-segment-count` | a `SegmentItem`'s count pill | present |
|
|
97
|
+
| `data-ui-segment-control` | `SegmentControl` | `segment`, `sheet` |
|
|
98
|
+
| `data-ui-segment-moving` | `SegmentControl` while its selection slides (`.ui-segment-thumb` is shown, the new item's own fill waits) | present |
|
|
99
|
+
| `data-ui-swap` | `MotionSwap` and `AppLayout`'s `main` | present |
|
|
100
|
+
| `data-ui-swapped` | the same, after the first change: plays the rise-in | present |
|
|
97
101
|
| `data-ui-list-item-title`, `-description`, `-meta`, `-actions`, `-leading` | `ListItem` parts | present |
|
|
98
102
|
| `data-ui-statistic-label`, `-value`, `-note` | `Statistic` parts | present |
|
|
99
103
|
| `data-ui-stat-tile` | `StatTile` (`data-tone`; a filter tile also `data-state` `on` / `off`) | present |
|
|
@@ -127,7 +131,7 @@ here stay implementation details and can change in any release.
|
|
|
127
131
|
| `data-ui-rich-paragraph`, `-heading`, `-list`, `-quote`, `-code-block`, `-code`, `-link` | `RichTextView` blocks and inline parts | present |
|
|
128
132
|
| `data-ui-rich-mention`, `data-ui-rich-image` | a mention (`data-inactive`) and an image (`data-state`) in a `RichTextView` | id |
|
|
129
133
|
| `data-ui-file-thumbs`, `data-ui-file-thumb`, `-thumb-remove`, `-thumbs-more` | `FileThumbs` parts | present |
|
|
130
|
-
| `data-ui-lightbox`, `-overlay`, `-name`, `-count`, `-download`, `-close`, `-stage`, `-image`, `-file`, `-processing`, `-previous`, `-next` | `ImageLightbox` parts | present |
|
|
134
|
+
| `data-ui-lightbox`, `-overlay`, `-name`, `-count`, `-download`, `-rotate`, `-close`, `-stage`, `-image`, `-file`, `-processing`, `-previous`, `-next` | `ImageLightbox` parts | present |
|
|
131
135
|
| `data-ui-upload-queue`, `-summary`, `-list`, `-task`, `-status`, `-retry`, `-cancel`, `-retry-all`, `-cancel-all`, `-fold`, `-close` | `UploadQueue` parts (a task has `data-status`) | present |
|
|
132
136
|
| `data-ui-rich-editor` | `RichTextEditor` (`data-variant` `compact` / `full`, `data-over` past `maxlength`) | present |
|
|
133
137
|
| `data-ui-rich-editor-content`, `data-ui-rich-toolbar`, `-more`, `-bubble`, `-format-row`, `-format-toggle`, `-link-row`, `-actions`, `-send`, `-count`, `-notes` | `RichTextEditor` parts | present |
|
|
@@ -174,15 +178,17 @@ settle from 97 %, menus, popovers and select lists drop 4px from their trigger,
|
|
|
174
178
|
a notification slides 8px in, expandable bodies (`Card`, `SettingsSection`,
|
|
175
179
|
`ExpandableItem`, `Callout` details, `TimelineRow`, `FacetPanel`, `Accordion`,
|
|
176
180
|
`Fieldset`) open their height, a row the user just added fades in, and a tab
|
|
177
|
-
panel switched to rises 4px.
|
|
181
|
+
panel switched to rises 4px. The tab notch and `SegmentControl`'s selected
|
|
182
|
+
fill slide to the new selection; content switched by a control (`MotionSwap`)
|
|
183
|
+
and `AppLayout`'s page after navigation rise 4px like a tab panel. Only opacity, transforms and height through grid
|
|
178
184
|
rows move. Exits are shorter than entrances and let clicks through at once.
|
|
179
185
|
Nothing animates on first render, and a list's first data, a refresh or paging
|
|
180
186
|
does not animate its rows.
|
|
181
187
|
|
|
182
188
|
| Token | Value | Use |
|
|
183
189
|
| --- | --- | --- |
|
|
184
|
-
| `--ui-motion-fast` | 120ms | colour and state changes, menus opening, anything closing |
|
|
185
|
-
| `--ui-motion-normal` | 180ms | dialogs opening, a new row, a tab panel, the loading mask |
|
|
190
|
+
| `--ui-motion-fast` | 120ms | colour and state changes, the tab notch and segment fill sliding, menus opening, anything closing |
|
|
191
|
+
| `--ui-motion-normal` | 180ms | dialogs opening, a new row, a tab panel, switched content and pages, the loading mask |
|
|
186
192
|
| `--ui-motion-slow` | 240ms | height, notifications and toasts arriving, a sheet sliding in |
|
|
187
193
|
| `--ui-motion-ease-out` | `cubic-bezier(0.22, 1, 0.36, 1)` | arriving |
|
|
188
194
|
| `--ui-motion-ease-in` | `cubic-bezier(0.4, 0, 1, 1)` | leaving |
|