@synopackageland/ui 0.20.12 → 0.20.13
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 +5 -1
- package/dist/index.js +2374 -2349
- package/dist/json-preview/preview.js +3386 -3380
- 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/mobile-native.md +20 -7
- package/package.json +1 -1
package/docs/mobile-native.md
CHANGED
|
@@ -62,13 +62,13 @@ control and grid sizes; it does not change the 16px field rule.
|
|
|
62
62
|
| `--ui-font-size-title` | 16 | 16 | **17** | header and dialog titles |
|
|
63
63
|
| `--ui-grid-font-size` (new) | 13 | 13 | **14** | grid cell text (not yet read by the canvas grid; see below) |
|
|
64
64
|
| `--ui-font-size-field` (new) | 16 | 16 | 16 | every field on a coarse pointer, to stop iOS focus zoom |
|
|
65
|
-
| `--ui-control-md` | 28 | **
|
|
65
|
+
| `--ui-control-md` | 28 | **44** | **44** | fields, selects, form and sheet buttons |
|
|
66
66
|
| `--ui-control-sm` | 24 | **32** | **36** | inline and toolbar buttons (the tap box comes from `--ui-hit-min`) |
|
|
67
67
|
| `--ui-hit-min` (new) | 0 | **44** | **44** | smallest tap box |
|
|
68
68
|
| `--ui-tap-gap` (new) | 0 | **8** | **8** | room between tap targets; `--ui-icon-button-gap` reads it on touch |
|
|
69
69
|
| `--ui-grid-row-height` / `-header-height` | 28 | **36** | **32** | canvas grid rows (docs/ux-grid.md) |
|
|
70
70
|
| `--ui-list-row-height` (new) | 32 | **44** | **48** | list rows |
|
|
71
|
-
| `--ui-menu-row-height` | 32 | **
|
|
71
|
+
| `--ui-menu-row-height` | 32 | **44** | **48** | menu, select and sheet list rows |
|
|
72
72
|
| `--ui-page-padding-x` / `-y` | 16 (narrow layout 12) | 16 | **16** | page gutter |
|
|
73
73
|
| `--ui-section-gap` | 12 | 12 | **20** | space between sections |
|
|
74
74
|
| `--ui-card-padding` | 20 (Card default) | 20 | **16** | card inset |
|
|
@@ -145,11 +145,24 @@ These controls get the hit area:
|
|
|
145
145
|
`[data-tag][role=button]` (a tappable Tag), `[data-tag-remove]`,
|
|
146
146
|
`[data-ui-password-toggle]`
|
|
147
147
|
|
|
148
|
-
A new tappable control can opt in by adding `data-ui-hit`.
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
tap
|
|
148
|
+
A new tappable control can opt in by adding `data-ui-hit`. Small standalone
|
|
149
|
+
controls already do: Link, close buttons (Dialog, Sheet, Toast, Notification,
|
|
150
|
+
Callout, RecordPanel, AsidePanel), PathDisplay copy, InfoTip, the Card and
|
|
151
|
+
ExpandableItem toggles, Pagination page numbers and the TreeView toggle (when
|
|
152
|
+
the tree has no checkboxes). When two tap boxes overlap, the later control
|
|
153
|
+
wins the overlap, so a cluster spaces its controls a box apart on touch
|
|
154
|
+
(`gap-[max(4px,calc(var(--ui-hit-min,0px)-<control size>))]`, as in Pagination
|
|
155
|
+
and the AsidePanel header). The rule sits in the base layer, so a component
|
|
156
|
+
that sets its own `position` or draws its own `::before` keeps it, and loses
|
|
157
|
+
the larger tap box; a component that keeps a desktop slop writes it under
|
|
158
|
+
`[@media(pointer:fine)]`. The box is a child of the control: `overflow:
|
|
159
|
+
hidden` (or `truncate`) on the control or a scroller around it cuts the box
|
|
160
|
+
off, so truncate the label inside instead and clip a row sideways only
|
|
161
|
+
(`overflow-x-clip`).
|
|
162
|
+
|
|
163
|
+
`check:mobile` exempts a link set in a sentence (inline, with text beside it
|
|
164
|
+
in the same parent): WCAG 2.5.8 lets the line of text decide its size. A link
|
|
165
|
+
alone on its line still needs 44px.
|
|
153
166
|
|
|
154
167
|
### Not done in this layer
|
|
155
168
|
|