@synopackageland/ui 0.20.11 → 0.20.13

package/docs/adaptive-layout.md

@@ -146,6 +146,40 @@ this in Chromium at 390 and 768 with touch, with Android emulated by a
 viewport resize and iOS by a stand-in visual viewport. A real-device pass on
 iOS Safari and Android Chrome is still needed (spec D6).
 
+## Short screens
+
+A screen at most 480px tall (a phone in landscape: 753×279, 667×375,
+844×390) is too short for a page header, a section strip, the settings rows and
+an Apply footer stacked over each other. Outside the phone presentation,
+`AppLayout` then switches to its short mode (`SHORT_VIEWPORT_QUERY`,
+`(max-height: 480px)` of the viewport, so a DSM window on a desktop never gets
+it). The root carries `data-ui-layout-short`, and `APP_SHORT_KEY` tells
+components below it. Every App gets it; there is nothing to set.
+
+- **The title is in the bar.** The page's title (AppLayout's `title`, else
+  its `PageHeader`'s) leads the bar above the page (`data-ui-layout-bar`),
+  in the row of the `toolbar` slot. A `PageHeader` with the same title keeps
+  its heading for screen readers only, and takes no room when it has nothing
+  else to show.
+- **The page scrolls as one.** A page holding a `SettingsPage` or a
+  `SectionTabs fill` no longer squeezes the settings body between the bar,
+  the strip and the footer: in a layout with a height of its own (`height="fill"`,
+  or a content area the App clips or scrolls) the whole column scrolls, the
+  bar and the header scroll away, the section strip sticks at the top and
+  Reset / Apply at the bottom.
+  Other pages, such as a DataGrid that scrolls itself, keep their layout.
+- **The header does not stick.** A `PageHeader` scrolls with the page, in a
+  tight row (8px above and below).
+
+At any height, a `SectionTabs fill` strip (and a pushed section's Back header on a phone) sticks below a sticky `PageHeader`
+in the same `PageContent` (`--ui-page-sticky-top`, the header's height)
+instead of sliding under it.
+
+A phone in portrait keeps the phone presentation unchanged. `node
+scripts/check-short-viewport.mjs [out-dir]` (after `pnpm build`) checks the
+three landscape sizes, 360×697 and 1280×800 for a shell that hides its title,
+one that shows a `PageHeader` (filled or not) and a filled AppLayout.
+
 ## Web presentation sidebar
 
 In `web`, the sidebar's 48px head row ends with a collapse button, and a

package/docs/mobile-native.md

@@ -62,13 +62,13 @@ control and grid sizes; it does not change the 16px field rule.
 | `--ui-font-size-title` | 16 | 16 | **17** | header and dialog titles |
 | `--ui-grid-font-size` (new) | 13 | 13 | **14** | grid cell text (not yet read by the canvas grid; see below) |
 | `--ui-font-size-field` (new) | 16 | 16 | 16 | every field on a coarse pointer, to stop iOS focus zoom |
-| `--ui-control-md` | 28 | **36** | **44** | fields, selects, form and sheet buttons |
+| `--ui-control-md` | 28 | **44** | **44** | fields, selects, form and sheet buttons |
 | `--ui-control-sm` | 24 | **32** | **36** | inline and toolbar buttons (the tap box comes from `--ui-hit-min`) |
 | `--ui-hit-min` (new) | 0 | **44** | **44** | smallest tap box |
 | `--ui-tap-gap` (new) | 0 | **8** | **8** | room between tap targets; `--ui-icon-button-gap` reads it on touch |
 | `--ui-grid-row-height` / `-header-height` | 28 | **36** | **32** | canvas grid rows (docs/ux-grid.md) |
 | `--ui-list-row-height` (new) | 32 | **44** | **48** | list rows |
-| `--ui-menu-row-height` | 32 | **40** | **48** | menu, select and sheet list rows |
+| `--ui-menu-row-height` | 32 | **44** | **48** | menu, select and sheet list rows |
 | `--ui-page-padding-x` / `-y` | 16 (narrow layout 12) | 16 | **16** | page gutter |
 | `--ui-section-gap` | 12 | 12 | **20** | space between sections |
 | `--ui-card-padding` | 20 (Card default) | 20 | **16** | card inset |
@@ -145,11 +145,24 @@ These controls get the hit area:
   `[data-tag][role=button]` (a tappable Tag), `[data-tag-remove]`,
   `[data-ui-password-toggle]`
 
-A new tappable control can opt in by adding `data-ui-hit`. When two tap boxes
-overlap, the later control wins the overlap. Clusters keep `--ui-tap-gap`
-between controls. The rule sits in the base layer, so a component that sets
-its own `position` or draws its own `::before` keeps it, and loses the larger
-tap box.
+A new tappable control can opt in by adding `data-ui-hit`. Small standalone
+controls already do: Link, close buttons (Dialog, Sheet, Toast, Notification,
+Callout, RecordPanel, AsidePanel), PathDisplay copy, InfoTip, the Card and
+ExpandableItem toggles, Pagination page numbers and the TreeView toggle (when
+the tree has no checkboxes). When two tap boxes overlap, the later control
+wins the overlap, so a cluster spaces its controls a box apart on touch
+(`gap-[max(4px,calc(var(--ui-hit-min,0px)-<control size>))]`, as in Pagination
+and the AsidePanel header). The rule sits in the base layer, so a component
+that sets its own `position` or draws its own `::before` keeps it, and loses
+the larger tap box; a component that keeps a desktop slop writes it under
+`[@media(pointer:fine)]`. The box is a child of the control: `overflow:
+hidden` (or `truncate`) on the control or a scroller around it cuts the box
+off, so truncate the label inside instead and clip a row sideways only
+(`overflow-x-clip`).
+
+`check:mobile` exempts a link set in a sentence (inline, with text beside it
+in the same parent): WCAG 2.5.8 lets the line of text decide its size. A link
+alone on its line still needs 44px.
 
 ### Not done in this layer
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.20.11",
+  "version": "0.20.13",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",
@@ -92,6 +92,7 @@
     "check:text-select": "node scripts/check-text-select.mjs",
     "check:date-picker": "node scripts/check-date-picker.mjs",
     "check:full-page": "node scripts/check-full-page.mjs",
+    "check:short-viewport": "node scripts/check-short-viewport.mjs",
     "check:detail-surface": "node scripts/check-detail-surface.mjs",
     "check:internal": "node --test scripts/check-internal-content.test.mjs scripts/check-npm-metadata.test.mjs && node scripts/check-internal-content.mjs --repo .",
     "check:npm-metadata": "node scripts/check-npm-metadata.mjs",