@synopackageland/ui 0.20.8 → 0.20.9

package/docs/adaptive-layout.md

@@ -65,6 +65,41 @@ for a viewport change. `ensureDeviceViewport()` therefore fires one `resize`
 on the next frame after it changes the viewport (and after it restores it), so
 the window narrows to the phone's width.
 
+### Full-page type scale
+
+A full page reads at a web console's sizes, one step above a DSM window. The
+tokens are set on the web layout (`data-ui-layout-mode="web"`) and on an app
+root that holds one or is a `full-page` root, so dialogs teleported into the
+root follow. A DSM window keeps DSM's sizes and a phone its own scale
+([mobile-native.md](mobile-native.md)).
+
+| Token | DSM window | Full page |
+|---|---|---|
+| `--ui-font-size` (body, navigation, buttons, fields) | 13px | 14px |
+| `--ui-font-size-control` (checkbox, select, form and settings labels) | 13px | 14px |
+| `--ui-font-size-sm` (secondary text, group labels) | 12px | 13px |
+| `--ui-font-size-lg` (a main label) | 14px | 15px |
+| `--ui-font-size-tab` / `--ui-font-size-section` | 12px / 15px | 13px / 16px |
+| `--ui-font-size-h1` / `-h2` / `-h3` | 20 / 16 / 14px | 22 / 18 / 16px |
+| `--ui-grid-font-size` | 13px | 14px |
+| `--ui-control-sm` / `-md` / `-lg` | 24 / 28 / 34px | 28 / 32 / 36px |
+| `--ui-grid-row-height` / `--ui-grid-header-height` | 28px | 32px |
+| `--ui-list-row-height` | 32px | 36px |
+| `--ui-nav-row-height-default` | 42px | 36px |
+| `--ui-label-offset` (a label beside a field) | 4px | 6px |
+
+The web page header's title is `--ui-font-size-title` (16px) over a
+`--ui-font-size-sm` description. The smallest text (`--ui-font-size-xs`) stays
+12px and a dialog's title 16px. Control and grid sizes apply under a mouse
+only: a touch tablet keeps its touch sizes, and an explicit `data-ui-density`
+keeps what the app chose.
+
+A page without a `PageHeader` that starts with a `PageToolbar` starts on the
+page padding: its toolbar is a control-height row, not a 48px chrome row, so
+there is no empty band over it. Under a header, and inside a card or pane, a
+toolbar stays one chrome row. An App that adds its own top padding to an
+untitled page doubles the page padding the shell already gives it.
+
 ## Viewport, keyboard and Back on a phone
 
 A full-page `AppRoot` is the page: it is `100dvh` tall, `html` and `body`

package/docs/theme-hooks.md

@@ -32,7 +32,7 @@ here stay implementation details and can change in any release.
 | `data-ui-app` | `AppRoot`'s root and its floating hosts (portals) | present |
 | `data-ui-theme`, `data-ui-density`, `data-ui-accent` | the app root (mirrored on floating hosts) | theme name, `compact`/`comfortable`, present |
 | `data-ui-color-scheme` | the app root (AppRoot `color-scheme`, mirrored on floating hosts) or `<html>` | `dark` |
-| `data-ui-presentation` | `AppRoot` root | `mobile`, `window`, `web` |
+| `data-ui-presentation` | `AppRoot` root | `mobile` (640px or narrower), else `web` for a `full-page` root or one holding an `AppLayout` with `wide-layout="web"` from 960px, else `window` (a DSM window at any width) |
 | `data-ui-floating` | a floating host (dialog, menu, popover) | present |
 | `data-ui-layout-mode` | `AppLayout` root | `mobile`, `window`, `web` |
 | `data-ui-navigation` | `AppLayout` root, and `AppSidebar`'s `<nav>`, while the navigation is a top bar | `top` (absent for the sidebar and on a phone) |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.20.8",
+  "version": "0.20.9",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",