@synopackageland/ui 0.20.4 → 0.20.6

package/docs/adaptive-layout.md

@@ -270,20 +270,22 @@ import {
   remove a child Card's frame or a PageHeader's own vertical padding. The JSON
   `Page` accepts the same value. SDK `AppShell` consumers need that package to
   expose/forward the option to its internal `PageContent`.
-- `DataTable` defaults to `mobile-view="auto"`, switching to accessible labeled
-  cards in the **App's mobile presentation**. A narrow table within an ordinary
+- `DataTable` defaults to `mobile-view="auto"`, switching to a list (a row per
+  item: title, subtitle, trailing column; see docs/mobile-native.md) in the
+  **App's mobile presentation**. A narrow table within an ordinary
   700px/800px DSM Window stays a table, even if its content area is below
   640px. When no AppRoot/AppLayout provides a presentation, DataTable falls
-  back to its own width (640px or less). It preserves *all* columns,
-  custom `cell-*` slots and actions. `mobile-view="table"` retains horizontal
-  scrolling for dense/interactive data; `cards` forces cards at every size.
+  back to its own width (640px or less). `mobile-view="table"` retains horizontal
+  scrolling for dense/interactive data; `cards` shows every column as fully
+  labeled cards at every size.
   Explicit column `width` values (CSS pixels or percentages) use fixed table
   tracks; columns without a width share the remaining space. Long text wraps
   inside those tracks. Tables without widths retain automatic sizing.
-- `DataGrid` retains its desktop semantics (sorting, editing, selection,
-  keyboard navigation, reorder) and horizontally scrolls at narrow widths.
-  Avoid silently removing columns or disabling actions. Use a mobile alternative
-  for very complex tables rather than degrading a grid's editing model.
+- `DataGrid` shows the same phone list in the App's mobile presentation
+  (`mobile-view="auto"`): long press selects, and sorting and columns move into
+  a sheet. `mobile-view="table"` keeps the table, which scrolls horizontally.
+  Use a mobile alternative for very complex tables rather than degrading a
+  grid's editing model.
 - `ResponsiveView` renders a `mobile`, `window`, or `web` slot when available.
   The `default` slot is the fallback for all unprovided modes, so features aren't
   accidentally hidden. Only the active variant is mounted.

package/docs/app-local-modal.md

@@ -146,7 +146,7 @@ root and inside the active panel, or use the library's supported popup component
 
 ## Delivery and patch maintenance
 
-Reka 2.10.5 is an exact development dependency, bundled into the UI library's
+Reka 2.11.0 is an exact development dependency, bundled into the UI library's
 ESM dist. It is no longer a consumer runtime dependency. Vue remains an external
 peer, and the bundled code uses that same Vue instance. Consumers receive the
 body-style fix by rebuilding, without a package-manager patch or app code change.

package/docs/layout-rules.md

@@ -72,6 +72,20 @@ The setting is a form value, saved with the page's Apply action. It does not nav
 - A settings page has one Apply. Put Reset then Apply in `SettingsPage`'s `#footer`, at the bottom-right, as Control Panel does. Keep the footer while the page has settings to apply, so nothing moves when a draft changes. Do not put a Save between the fields of a section.
 - A button that belongs to a field (Allowed websites, Trusted Proxies, Advanced Settings) is a grey `Button variant="secondary"` in the flow: in the `FormGroup` it depends on, after the field it acts on (`#after`), or under the section's description.
 
+## Choosing tabs on a phone
+
+Phone layout follows the app container (≤640px) and a coarse pointer, not the browser window alone. A 768px touch tablet keeps its wider layout and still gets 44px tap targets.
+
+| What changes | Use | Phone behaviour |
+|---|---|---|
+| 2–4 short views of the same content | `SegmentControl` | Full width, equal segments, 36px minimum visual height and 44px hit area; translated labels wrap and may grow the row |
+| Many local views or long navigation labels | `Tabs` | Horizontal strip with edge fades; selection scrolls into view without moving the page; labels stay on one line |
+| Up to 5 top-level app destinations | `AppTabBar` | Bottom navigation; additional destinations belong under More |
+| Settings sections or 5+ page sections | `SectionTabs` / `SettingsPage` | Grouped list and push navigation on phone; retain the section structure |
+| A saved form choice | `RadioGroup` | Labelled choices, not navigation tabs |
+
+`SegmentControl variant="sheet"` follows the same phone sizing. More than four existing segments remain horizontally scrollable with fades; use `Tabs` for new many-view navigation. `size="sm"` stays compact on desktop and follows phone sizing on a phone. Icon-only segments require `aria-label`; use visible text when a touch user needs the label to choose. Never place a second bottom tab bar inside a page.
+
 ## Tables
 
 - Use `CellText` for a cell with a main text and secondary information (size, time, path): `text`, `secondary`, optional `icon`, `layout="stacked"` (default) or `"inline"`. It truncates both and shows the full text in a tooltip only when cut. Do not join strings or add margins.

package/docs/list-detail.md

@@ -39,14 +39,20 @@ Packages page with the selected package's advice).
   DSM package (or the page's host and directory) as for
   [closed callouts](callout.md). Without `storage-key` the App's panes share
   one width. An unreadable or blocked storage falls back to the default.
-- Narrower than 640px of room the pane goes above the list, full width, and
-  the separator is hidden.
+- At 640px of room or less (a phone) the list fills the room and the detail
+  is a page pushed over it ([push navigation](mobile-native.md#push-navigation)):
+  it slides in from the right, the list moves 30% left and dims, and a 48px
+  header shows Back and the title in place of Close. Back, the browser's Back
+  and a swipe from the detail's left edge pop it, which emits `close`. The
+  separator is hidden. Give the ListDetail a height to fill so the list and
+  the detail each scroll on their own; without one the detail sets the height.
 - In the pane, give tables column widths that fit the default width and dates
   in a one-line short format; a table wider than the pane scrolls sideways.
 
 Hooks: `data-ui-list-detail` (with `data-open` and `data-dragging`),
 `data-ui-list-detail-list`, `data-ui-list-detail-separator`,
-`data-ui-list-detail-pane`, `data-ui-list-detail-close`; the pane's width is
+`data-ui-list-detail-pane`, `data-ui-list-detail-close`, `data-push` on the
+root while the detail is pushed; the pane's width is
 `--ui-list-detail-width`.
 
 | Default width (1320px window) | Dragged wider | Wide window (1860px) |

package/docs/mobile-native.md

@@ -2,6 +2,27 @@
 
 How the UI SDK behaves on a phone (390×844) and a touch tablet (768×1024).
 
+## Width containment and the release gate
+
+Typography tables scroll horizontally within their parent, including a flex
+or grid parent. Wizard footer groups wrap within the wizard; stage topology
+nodes shrink with the available width. Topology card tracks shrink rather
+than force their container wider. FormGroup uses a 12px indent level on a
+touch phone and 28px elsewhere; an explicit CSS length keeps its value.
+Settings switch rows retain a 44px touch target, and a Slider's value bubble
+stays inside its track at both ends. Heading permalinks use the shared touch
+hit area. Text fields inside a BottomSheet are at least 44px tall on touch
+tablets as well as phones. Long Select values ellipsize within the trigger.
+Numeric preset rows are at least 44px tall on touch. The rich text toolbar
+counts its 44px touch buttons when deciding which tools fit; the rest move
+into the existing More menu.
+
+`pnpm check:mobile` checks the gallery at both phone and tablet sizes. It is
+a blocking step of `gates:full`; the basic gate selection stays the same.
+Any remaining audit exceptions are bounded in
+`scripts/fixtures/mobile-overflow-allow.json`, with an audit reference and a
+reason. Normal checks never add exceptions.
+
 
 ## Signals
 
@@ -22,7 +43,7 @@ Every touch rule is keyed on `[data-ui-app]`, the root every app has (AppRoot).
 Before this change they were keyed on `[data-ui-theme='dsm7']`. Nothing sets
 that attribute (Studio sets its own theme name), so the rules never applied.
 
-## Tokens and base guards (M-1)
+## Tokens and base guards
 
 ### Type and size tokens
 
@@ -53,7 +74,7 @@ control and grid sizes; it does not change the 16px field rule.
 | `--ui-card-padding` | 20 (Card default) | 20 | **16** | card inset |
 | `--ui-chrome-height` | 44 (web 48, narrow layout 44) | – | **48** | the phone header |
 | `--ui-radius-sheet` (new) | 12 | 12 | 12 | top corners of a bottom sheet |
-| `--ui-safe-top/right/bottom/left` (new) | `env(safe-area-inset-*, 0px)` | same | same | notch and home indicator; non-zero only once the viewport meta has `viewport-fit=cover` (M-2) |
+| `--ui-safe-top/right/bottom/left` (new) | `env(safe-area-inset-*, 0px)` | same | same | notch and home indicator; non-zero only once the viewport meta has `viewport-fit=cover` |
 | `--ui-pressed` (new) | 8% of the text colour | same | same | the pressed tint |
 
 Density comes from spacing, not smaller text: phone rows are 44–48px, and
@@ -78,7 +99,7 @@ component rule overrides them.
 - No blanket `min-width: 0`. The spec asked for one, but the 1280 gallery
   diff showed it squeezing nowrap rows (Space "wrap off" went one letter per
   line) and a fixed-size brand icon on the desktop. A component whose flex
-  child must shrink sets `min-w-0` on it instead (M-13 handles the remaining
+  child must shrink sets `min-w-0` on it instead (a later change handles the remaining
   width offenders).
 - `overflow-wrap: break-word` on the app root. A word longer than its line
   breaks. We use `break-word`, not `anywhere`, because it only breaks text
@@ -87,7 +108,7 @@ component rule overrides them.
 - `img`, `video` and `iframe` get `max-width: 100%`, and `img` and `video` also
   get `height: auto`. `svg` is left alone so icons keep their size.
 - Don't write `100vw` in components. Use `100%` or the viewport variables from
-  M-2. The `check:mobile` script (M-12) enforces this.
+  the viewport layer. The `check:mobile` script enforces this.
 
 ### Tap feedback (`touch.css`)
 
@@ -135,16 +156,16 @@ tap box.
 - **Hardcoded font sizes:** components that write a literal size, such as
   `text-[13px]` in Checkbox, Switch, Radio, Input and the menu rows, don't
   pick up the 15px phone text until they read `--ui-font-size`. Their owners
-  (M-5, M-10, M-13) switch them over. Fields are already 16px on touch.
+  (later changes) switch them over. Fields are already 16px on touch.
 - **Canvas grid:** the grid draws text at fixed sizes from
   `src/grid-core/theme.ts`. Reading `--ui-grid-font-size` needs a change in
   the grid.
 - **Form gap:** `Form` writes its own `--ui-form-gap` inline, from
-  `--ui-field-gap`. The 16px phone form gap belongs to Form (M-10).
+  `--ui-field-gap`. The 16px phone form gap belongs to Form.
 - **Hover rules in `adaptive.css`:** the brand action, sidebar collapse and
   resize handles still use plain `:hover`. They belong to the shell tasks.
 
-## Floating layer (M-3a)
+## Floating layer
 
 Every anchored popup is placed by one preset, `src/components/primitives/popover/floating.ts`, on Reka's popper (floating-ui flip, shift, size and hide). A component binds it on its Reka `*Content` and never picks its own collision props.
 
@@ -171,7 +192,7 @@ const floating = useFloating(() => trigger.value?.$el, () => open.value)
 
 **Uses it today:** Popover, Tooltip, OverflowTooltip and all anchored popups listed below.
 
-## All anchored popups (M-3b)
+## All anchored popups
 
 Menus (including nested menus and Breadcrumb), Select and the shared ComboboxField,
 DatePicker, ColorPicker, InputSteppers presets, InfoTip, ValidationPopup,
@@ -181,9 +202,10 @@ Menu sublevels inherit the parent's live padding, so an open submenu follows
 safe-area and keyboard changes. Preferred and trigger widths are capped by
 `--reka-popper-available-width`; lists scroll within the available height.
 Opening a searchable Select, calendar or palette on touch does not autofocus
-an input or swatch. Phone bottom sheets and inline validation remain M-5 work.
+an input or swatch. On a phone, pickers and long menus open as bottom sheets instead
+(see Pickers and menus on a phone); inline validation comes later.
 
-## Toast, notification and hover-only controls (M-11)
+## Toast, notification and hover-only controls
 
 `usePhone()` (`src/composables/phone.ts`) is the phone signal in script: the
 enclosing AppRoot is narrow and the pointer is coarse, the same test as the
@@ -211,4 +233,270 @@ does the same.
 the card's context menu (`menuItems`) through Reka's long press
 (`ContextMenu` `pressOpenDelay`). The click that ends that press doesn't open
 the card. A card without entries opens no menu. The menu is the plain
-context menu for now; it becomes a phone sheet through M-5's rule.
+context menu for now; it becomes a phone sheet once pickers move to sheets.
+
+## Forms and inputs
+
+The keyboard depends on each field's type, so these are component defaults,
+not tokens.
+
+### Keyboard hints by type
+
+`Input` sets these from its `type`, and `SearchField` from `search`. An
+attribute of the same name on the component overrides each one.
+
+| `type` | Native type | `inputmode` | Other hints |
+|---|---|---|---|
+| `email` | email | email | `autocapitalize=off spellcheck=false` |
+| `tel` | tel | tel | – |
+| `url` | url | url | `autocapitalize=off` |
+| `integer` (new) | text | numeric | – |
+| `decimal` (new) | text | decimal | – |
+| `password` | password | – | `autocapitalize=off spellcheck=false` (still right once revealed) |
+| `search`, `SearchField` | search | – | `enterkeyhint=search` |
+| `text` and others | as given | – | – |
+
+Use `integer` or `decimal` for numbers typed on a phone. They open the number
+keyboard and skip the native number field's spinner and value parsing.
+`type="number"` stays the native field. `Input` and `SearchField` read
+`--ui-font-size` (15px on a phone), and every field is 16px on a coarse
+pointer (see Tokens and base guards). The clear button (`data-ui-hit`) and the password toggle get the
+44px tap box.
+
+### Next and Done
+
+Inside a `Form`, each `Input` that is the primary control of a `FormItem`
+joins the form's field order, which is document order, taken when the field
+mounts. Disabled and read-only fields are skipped. The last field gets
+`enterkeyhint=done` and the others get `next`. On a coarse pointer, Enter on a
+`next` field moves focus to the next field with `focusWithoutScroll`, so the
+page never jumps. It does not submit the form. With a mouse, Enter keeps the
+browser's behaviour. A caller's own `enterkeyhint` turns both off for that
+field. A `SearchField` keeps `search` and is not part of the order. Other
+controls (`InputSteppers`, `Textarea`) are not in the order yet.
+
+`useFormControl({ keyboard: { type, element, active } })` is how a text
+control opts in.
+
+### Phone form layout
+
+- `Form` with `spacing="auto"` puts 16px between items on a phone. Below
+  400px it already stacks labels over fields.
+- `FormActions` is sticky by default on a phone (narrow and coarse,
+  `usePhone()`, exported). Elsewhere it stays off unless you set `sticky`, and
+  `:sticky="false"` turns it off on a phone too. A sticky bar sits at
+  `bottom: var(--ui-kb-inset, 0px)`, so it rides above the iOS keyboard, and
+  it sets `--ui-scroll-footer` on its scroller so a revealed field clears it.
+  On a phone its bottom padding is `max(12px, safe-bottom)`, or 8px while the
+  keyboard is open.
+- On a phone, `FormActions` buttons share the row equally, and a single
+  button is full width. Put the primary button last so it sits on the right.
+
+## BottomSheet
+
+`BottomSheet` is the one bottom sheet, built on Reka's `Drawer` (reka-ui
+2.11.0). It has a 36×4 grabber in a 20px zone, a 48px header with the title
+and a 44px close button, a body that scrolls with `overscroll-behavior:
+contain`, a pinned footer and safe-area padding. The top corners use
+`--ui-radius-sheet`.
+
+- `height`: `auto` (content, up to 92%), `large` (92%; the strip of page left
+  above it closes the sheet when tapped), `full` (the whole screen, below the
+  top safe area), or a CSS height capped at 92%. `snap-points` passes through
+  to the Drawer.
+- A drag follows the finger. Letting go past 30% of the sheet or faster than
+  0.5 px/ms closes it; otherwise it springs back over
+  `--ui-motion-spring-back` (180ms). The two thresholds are hash-checked
+  patch hunks on Reka (`build/reka-patches.json`); Reka's own defaults are
+  40px and 0.3 px/ms. A drag that starts in the body moves the sheet only when
+  the body is scrolled to the top.
+- The Drawer's keyboard provider publishes `--drawer-keyboard-inset` on the
+  viewport. The viewport pads its bottom by it, so the sheet and its footer
+  sit above the keyboard and the heights shrink instead of the sheet moving
+  off the screen.
+- In 280ms on `--ui-motion-sheet-ease`, out 200ms, the scrim
+  (`--ui-drawer-backdrop`) fading with it. Reduced motion uses an 80ms fade.
+- `confirm-close` (set while a form is dirty) asks "Discard changes?" in a
+  nested sheet before a swipe, Back, Escape, an outside press or the close
+  button closes it. Nested sheets stack, and each closes only itself.
+- On a phone, Back closes the top sheet (`useBackDismiss`); `back-dismiss`
+  overrides that.
+
+`Dialog` on a phone (an app 640px or narrower) renders as a `BottomSheet`:
+`auto`, or `full` for `fullscreen` and for a form with more than 3 fields. The
+CSS-only dialog-as-sheet in `adaptive.css` is gone. `Sheet side="bottom"` is
+a `BottomSheet` everywhere; without `size` it fits its content. Left and right
+sheets are unchanged, and their footer keeps clear of the home indicator.
+an input or swatch. On a phone, pickers and long menus open as bottom sheets instead
+(see Pickers and menus on a phone); inline validation comes later.
+
+## Push navigation
+
+On a phone a detail is a page pushed over the page it came from, not a split
+view. `PushTransition` draws one pushed page:
+
+- It slides in from the right over `--ui-motion-push` (280ms) and pops back
+  over `--ui-motion-pop` (240ms), both on `--ui-motion-sheet-ease`. The page
+  under it (`under`) moves 30% left, dims 10% and is `inert` while covered.
+- Its 48px back header (with `title` or the `title` slot) has Back at the
+  start, the title in the middle and a `header-actions` slot at the end.
+- Back, the browser's Back (Android back, the iOS edge swipe, through
+  `useBackDismiss`) and a swipe that starts within 20px of the page's left
+  edge pop it (`pop`). A swipe let go past 35% of the width or faster than
+  0.5px/ms pops; a shorter one springs back over `--ui-motion-spring-back`.
+- Reduced motion or `data-ui-motion="off"`: no slide or parallax, a fade that
+  the zero durations make instant.
+- With `enabled` off (a split view, a desktop) it shows and hides at once and
+  leaves the page under it alone.
+- The covered page leaves the flow (absolute, clipped to the pushed page) and
+  the pushed page stays in flow, so a container with no height takes the
+  pushed page's height. The container is `position: relative` with
+  `overflow-x: clip`, so the page off to the right never widens the document.
+
+Where it is used:
+
+| Component | Phone (640px or less) | Wider |
+|---|---|---|
+| `ListDetail` | the list fills the room; the detail is pushed over it, with Back in place of Close | the split view, unchanged |
+| `SectionTabs`, five or more sections or `fill` (a settings page) | a grouped list (`group` on each item sets the blocks, 48px rows with a chevron) that pushes the tapped section; `v-model:pushed` | the strip |
+| `SectionTabs`, four or fewer sections | a full-width SegmentControl with equal segments | the strip |
+| `SectionTabs` with `phone="strip"` | the scrolling strip, for tabs inside a pushed page or a sheet | the strip |
+
+`phone` (`auto`, `list`, `segment`, `strip`) overrides the choice. A phone
+is the App's presentation (`mobile`), set by AppRoot or AppLayout. The
+`#actions` slot sits above the section list. A `SettingsPage` inside a pushed
+section keeps its sticky footer.
+
+## RecordPanel and AsidePanel on the BottomSheet
+
+Both panels use `BottomSheet` on a phone, so they share its grabber, drag,
+Back, keyboard inset, scrim and motion. Neither has swipe code of its own.
+
+- `RecordPanel` compact (a host 640px or narrower, or too narrow for a 320px
+  panel beside 240px of view) is a `large` sheet (92%). The record's title
+  names it, and the `header` slot sits next to the 44px close button.
+  `has-previous` and `has-next` add a footer with full-width Previous record
+  and Next record buttons (`@previous`, `@next`). The footer stays above the
+  keyboard and the home indicator. `secondary-open` pushes the comments over
+  the body with `PushTransition`, titled by `secondary-label`. Its Back (the
+  button, the edge swipe or the browser's) closes that page before the sheet
+  and emits `update:secondary-open`. Close reasons are `escape`,
+  `button`, `outside` and `swipe` (a drag or Back).
+- `AsidePanel` on a phone is a `large` sheet with `snap-points` `[0.5, 0.92]`.
+  `expanded` makes it `full`. Its expand button is 44px. The phone button
+  hides while it is open and while a record sheet is open.
+- Neither panel remounts the caller's content. The header, body, thread and
+  composer render once and move between the docked panel, the sheet and a
+  hidden holder. A switch between docked and sheet (a rotation or a resize)
+  keeps fields, focus and caret. A collapsed assistant keeps its draft and
+  thread scroll.
+
+
+## Phone shell
+
+On a phone (`AppLayout` 640px or narrower) the layout draws one bar above
+the page, `--ui-chrome-height` tall (48px on a phone, 44px in a narrow window
+driven by a mouse):
+
+- **Leading:** the menu button, or a Back button when `back` is set (it
+  emits `back`; the app pops its own route). While an `AppTabBar` More tab
+  opens the drawer, the menu button steps aside.
+- **Title:** the `title` prop, else the title of the page's `PageHeader`
+  (the last one mounted in the layout's content column), else the brand. 17px
+  semibold, one line, cut with an ellipsis; centred while nothing follows it,
+  start-aligned beside actions. A `PageHeader` whose title moves into the bar
+  keeps its heading for screen readers only, and takes no room when it has
+  nothing else to show (no description, meta or actions). There is no large
+  collapsing title.
+- **Actions:** `headerActions` (DropdownMenu entries). The first plain entry
+  is one 44px button, its icon (the label is its accessible name) or else its
+  label; the rest open from "…". A pick emits `headerAction` with the key.
+
+Every bar button is a 44px target.
+
+The navigation drawer is Reka's `Drawer` with `swipe-direction="left"`,
+portalled like `BottomSheet` (into the AppRoot in app scope). It is 85% of
+the screen, up to 320px, and mounted only while open. A drag left follows the
+finger and closes past 30% or above 0.5 px/ms, otherwise it springs back; it
+moves in 240ms and out 180ms (`--ui-motion-drawer-in/-out`) with the scrim
+fading, and reduced motion uses an 80ms fade. Escape, a press on the scrim, a
+link in it and Back (`useBackDismiss`) close it; focus goes to its close
+button and returns to what opened it. The page keeps its width.
+
+`AppTabBar` hides while the keyboard is open (`useSoftKeyboard`, confirmed by
+the visual viewport), pads by `--ui-safe-bottom`, and shows at most five
+slots: with more tabs, the fifth is More, which opens a menu of the rest (and
+the drawer, inside an AppLayout with a sidebar). More is marked current when
+the current tab is in it.
+
+## Pickers and menus on a phone
+
+In an app 640px wide or narrower (the same signal that turns a Dialog into a
+BottomSheet), a popup that holds a list, a search, a form, more than five
+actions or a submenu opens as a `BottomSheet` instead of a popover. A touch
+tablet and a desktop window keep popovers. One composable makes the choice
+for every picker: `usePhoneSurface(content)` returns `popover` or `sheet`,
+and `menuContent(items)` counts a menu's first-level actions (separators do
+not count) and finds submenus. Each component keeps one open state, and only
+one surface shows it.
+
+| Component | Phone sheet |
+|---|---|
+| Select, Combobox, MultipleSelect, SuperboxSelect | Titled with the field's label; 48px rows; a search pinned above the list (when the field searches or creates) that is not focused on open. From the first search until the sheet closes it keeps 60% of the screen, so the sheet does not jump as results shrink. The field itself is read-only, so a tap opens the sheet instead of the keyboard. A multiple select toggles rows and closes on Done; a free label is added from an `Add "…"` row or Enter |
+| DatePicker | The calendar with 44px days and 16px time selects, and Done in the footer. A date-only pick still closes it |
+| DropdownMenu, ContextMenu | More than five actions, or any submenu: an action sheet with 48px rows, danger rows in red and a Cancel row. A submenu pushes inside the sheet with a back row. Checkbox rows toggle in place; any other pick closes the sheet. Five actions or fewer stay a popover |
+| ColorPicker | The palette with 32px swatches and 44px Reset and Custom buttons |
+
+Escape, a swipe down and Back each close only the top sheet, and an Escape
+that ends an IME composition in the search closes nothing (the BottomSheet's
+guard). `AdaptivePanel` already follows this rule for its own content: a form
+panel, a sheet once its host is 640px or narrower.
+
+## Pagination and the older tables
+
+These key on the narrow signal (an app 640px or narrower, `usePhonePresentation`),
+because they change layout, not size. Sizes still come from the tokens, so a
+narrow window used with a mouse keeps desktop-sized controls.
+
+**Pagination.** The pager becomes `‹ Page 1 of N ›`: previous and next are
+`--ui-control-md` icon buttons (44px on a phone), the total text sits on the
+left, and there are no first, last or page-number buttons. Tapping the label
+opens a `BottomSheet` with a page field (`type="integer"`, `enterkeyhint=go`)
+and, when `items-per-page` is set, the page sizes as 48px rows. A single page
+without sizes shows the label as plain text. An endless pager shows
+`‹ Page 5 ›`, and its sheet only has the sizes. Above 640px the pager is
+unchanged.
+
+**DataGrid and DataTable.** `mobile-view="auto"` (the default) shows a list
+instead of the table. Each row is at least `--ui-list-row-height` (48px on a
+phone): the title column on the first line, up to two columns joined with `·`
+on the second, and trailing columns at the end. Columns place themselves with
+`list`:
+
+| `list` | Place |
+|---|---|
+| unset | the first column is the title, the next two the subtitle; an `actions` column trails |
+| `title` | the first line |
+| `subtitle` | the second line; marked columns replace the unmarked ones |
+| `trailing` | the end of the row, e.g. a status badge |
+| `none` | not in the list |
+
+The same `cell-*` slots render in the list. `mobile-view="table"` keeps the
+table; DataTable's `cards` keeps the fully labeled cards.
+
+DataGrid only:
+
+- **Select mode.** With `selectable`, a 500ms long press on a row selects it
+  (`onLongPress` from VueUse, cancelled by a 10px move or a scroll). Having a
+  selection is select mode: each row gets a checkbox with a 44px tap box, a tap
+  toggles the row, and a bottom bar replaces the footer with select all, the
+  count, the `selection-actions` slot (`keys`, `rows`, `clear`) and Cancel,
+  which clears the selection. Outside select mode a tap is `rowClick`.
+- **View options.** With a sortable column or `column-chooser`, a bar above the
+  list shows the sort and a button that opens a sheet: sort by (a tap on the
+  sorted column flips it, as the header does) and the columns to show, with
+  Reset columns.
+- **Footer.** The phone `Pagination` (one page per step) with the item count
+  and refresh.
+- Groups and expandable rows work in the list. Row drag reorder, column
+  resizing and column reorder are table-only.

package/docs/release-checks.md

@@ -21,3 +21,8 @@ Stage the package only after a successful build/basic check. Preserve version,
 ancestry, immutable-publication, metadata and credential boundaries. Registry
 availability checks needed to publish are distinct from optional consumer tests.
 No full-gate stamp is required for publication.
+
+The full plan includes `check:mobile` at 390×844 and 768×1024. A mobile
+failure returns a nonzero status and blocks that plan, like the other checks.
+The mobile allow-list records only bounded audit exceptions with reasons;
+normal runs never add exceptions.

package/docs/theme-hooks.md

@@ -54,9 +54,9 @@ here stay implementation details and can change in any release.
 | `data-ui-aside-resizing` | `AppLayout` root | `true` while the aside's handle is dragged |
 | `data-ui-side-moving` | `AppLayout` root | `true` while the sidebar or the aside changes width |
 | `data-ui-aside-panel-root` | `AsidePanel` root inside the aside region | `data-ui-aside-mode` is `docked`, `floating`, `sheet`; `data-ui-aside-floating` while the panel floats or slides away from floating |
-| `data-ui-aside-panel` | the panel (`complementary`, or `dialog` as a sheet) | `data-ui-aside-state` is `open`, `collapsed`, `expanded` |
+| `data-ui-aside-panel` | the panel (`complementary`; on a phone the `BottomSheet` dialog) | `data-ui-aside-state` is `open`, `collapsed`, `expanded` |
 | `data-ui-aside-rail` / `data-ui-aside-open` | the 48px rail and its button | present |
-| `data-ui-aside-fab` / `data-ui-aside-scrim` | the phone button and the sheet's scrim | present |
+| `data-ui-aside-fab` | the phone button | present |
 | `data-ui-aside-collapse` / `data-ui-aside-expand` / `data-ui-aside-restore` | header buttons | present |
 | `data-ui-aside-body` / `data-ui-aside-composer` | the thread scroller and the composer | present |
 | `data-ui-mobile-navigation` | the phone bar above the page | present |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.20.4",
+  "version": "0.20.6",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",
@@ -61,6 +61,59 @@
     "./themes/dsm7-embedded-reset.css": "./dist/themes/dsm7-embedded-reset.css",
     "./themes/dsm7-embedded-theme.css": "./dist/themes/dsm7-embedded-theme.css"
   },
+  "scripts": {
+    "check:docs": "node --test scripts/check-doc-versions.test.mjs && node scripts/check-doc-versions.mjs",
+    "dev": "vite build --watch",
+    "build": "vite build && vite build --mode json && vite build --mode rich-text && vite build --mode grid && vite build --mode cli && vite build --mode preview && vite build --mode embedded && node scripts/postbuild.mjs",
+    "lint": "eslint .",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:changed": "echo \"test:changed skips the tests the changes since ${SYNOPKGLAND_GATE_BASE:-origin/master} do not reach (vitest --changed); pnpm check runs them all\" && vitest run --changed ${SYNOPKGLAND_GATE_BASE:-origin/master}",
+    "story": "histoire dev",
+    "story:build": "histoire build",
+    "check:host": "node scripts/dsm-host-shots.mjs",
+    "check:switch": "node scripts/check-switch.mjs",
+    "check:tabs": "node scripts/check-tabs.mjs",
+    "check:mobile": "node scripts/check-mobile-overflow.mjs",
+    "check:ui-patch": "node scripts/check-ui-patch.mjs",
+    "check:narrow": "node scripts/check-narrow-controls.mjs",
+    "check:drawer-form": "node scripts/check-drawer-form.mjs",
+    "check:responsive": "node scripts/check-responsive.mjs",
+    "check:adaptive": "node scripts/check-adaptive.mjs",
+    "check:sidebar-focus": "node scripts/check-sidebar-focus.mjs",
+    "check:json-render": "node scripts/check-json-render.mjs",
+    "check:motion": "node scripts/check-motion.mjs",
+    "check:topology": "node scripts/check-topology.mjs",
+    "check:wizard": "node scripts/check-wizard.mjs",
+    "check:edges": "node scripts/check-edges.mjs",
+    "check:data-grid": "node scripts/check-data-grid.mjs",
+    "check:truncation": "node scripts/check-truncation.mjs",
+    "check:link": "node scripts/check-link.mjs",
+    "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: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",
+    "check:package": "node scripts/check-package-content.mjs",
+    "check:ux-foundation-consumer": "node scripts/check-ux-foundation-consumer.mjs",
+    "notices:update": "node scripts/third-party-notices.mjs --write",
+    "notices:check": "node scripts/third-party-notices.mjs --check",
+    "check": "bash scripts/docker-check.sh \"npm run gates\"",
+    "check:fast": "bash scripts/docker-check.sh \"npm run gates\"",
+    "check:local-browser": "node scripts/app-local-browser.mjs",
+    "check:infotip": "node scripts/check-infotip.mjs",
+    "release:stage": "node scripts/stage-release.mjs",
+    "check:polish": "bash scripts/docker-check.sh --build --out .polish-shots 'node scripts/check-polish.mjs'",
+    "check:acceptance": "node scripts/check-acceptance.mjs",
+    "check:palette": "node scripts/check-palette.mjs",
+    "gates": "node scripts/gates.mjs",
+    "gates:full": "node scripts/gates.mjs --full",
+    "check:layout": "node scripts/check-layout.mjs",
+    "release:smoke": "node scripts/release-smoke.mjs",
+    "check:browser-install": "playwright install chromium"
+  },
   "peerDependencies": {
     "vue": "^3.5.0"
   },
@@ -95,7 +148,7 @@
     "histoire": "1.0.0-beta.1",
     "jsdom": "30.1.1",
     "playwright": "1.58.2",
-    "reka-ui": "2.10.5",
+    "reka-ui": "2.11.0",
     "tailwindcss": "4.3.3",
     "typescript": "5.9.3",
     "typescript-eslint": "8.71.0",
@@ -111,64 +164,19 @@
   "engines": {
     "node": ">=20"
   },
+  "packageManager": "pnpm@10.33.2",
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild",
+      "vue-demi"
+    ]
+  },
   "config": {
     "bundledRuntime": {
       "@tanstack/vue-virtual": "3.13.39",
       "@vueuse/core": "14.4.0",
-      "reka-ui": "2.10.5"
+      "reka-ui": "2.11.0"
     }
   },
-  "homepage": "https://www.varvis.me/docs/",
-  "scripts": {
-    "check:docs": "node --test scripts/check-doc-versions.test.mjs && node scripts/check-doc-versions.mjs",
-    "dev": "vite build --watch",
-    "build": "vite build && vite build --mode json && vite build --mode rich-text && vite build --mode grid && vite build --mode cli && vite build --mode preview && vite build --mode embedded && node scripts/postbuild.mjs",
-    "lint": "eslint .",
-    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:changed": "echo \"test:changed skips the tests the changes since ${SYNOPKGLAND_GATE_BASE:-origin/master} do not reach (vitest --changed); pnpm check runs them all\" && vitest run --changed ${SYNOPKGLAND_GATE_BASE:-origin/master}",
-    "story": "histoire dev",
-    "story:build": "histoire build",
-    "check:host": "node scripts/dsm-host-shots.mjs",
-    "check:switch": "node scripts/check-switch.mjs",
-    "check:tabs": "node scripts/check-tabs.mjs",
-    "check:mobile": "node scripts/check-mobile-overflow.mjs",
-    "check:narrow": "node scripts/check-narrow-controls.mjs",
-    "check:drawer-form": "node scripts/check-drawer-form.mjs",
-    "check:responsive": "node scripts/check-responsive.mjs",
-    "check:adaptive": "node scripts/check-adaptive.mjs",
-    "check:sidebar-focus": "node scripts/check-sidebar-focus.mjs",
-    "check:json-render": "node scripts/check-json-render.mjs",
-    "check:motion": "node scripts/check-motion.mjs",
-    "check:topology": "node scripts/check-topology.mjs",
-    "check:wizard": "node scripts/check-wizard.mjs",
-    "check:edges": "node scripts/check-edges.mjs",
-    "check:data-grid": "node scripts/check-data-grid.mjs",
-    "check:truncation": "node scripts/check-truncation.mjs",
-    "check:link": "node scripts/check-link.mjs",
-    "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: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",
-    "check:package": "node scripts/check-package-content.mjs",
-    "check:ux-foundation-consumer": "node scripts/check-ux-foundation-consumer.mjs",
-    "notices:update": "node scripts/third-party-notices.mjs --write",
-    "notices:check": "node scripts/third-party-notices.mjs --check",
-    "check": "bash scripts/docker-check.sh \"npm run gates\"",
-    "check:fast": "bash scripts/docker-check.sh \"npm run gates\"",
-    "check:local-browser": "node scripts/app-local-browser.mjs",
-    "check:infotip": "node scripts/check-infotip.mjs",
-    "release:stage": "node scripts/stage-release.mjs",
-    "check:polish": "bash scripts/docker-check.sh --build --out .polish-shots 'node scripts/check-polish.mjs'",
-    "check:acceptance": "node scripts/check-acceptance.mjs",
-    "check:palette": "node scripts/check-palette.mjs",
-    "gates": "node scripts/gates.mjs",
-    "gates:full": "node scripts/gates.mjs --full",
-    "check:layout": "node scripts/check-layout.mjs",
-    "release:smoke": "node scripts/release-smoke.mjs",
-    "check:browser-install": "playwright install chromium"
-  }
-}
+  "homepage": "https://www.varvis.me/docs/"
+}