@synopackageland/ui 0.20.10 → 0.20.12

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/button-policy.md

@@ -52,6 +52,11 @@ are in [dsm-native-metrics.md](dsm-native-metrics.md).
 8. An icon-only action is an `IconButton` with a `label`; it shows as its
    tooltip and names the button for screen readers.
 9. Labels are verbs, without a closing period: Apply, Disable this connection.
+10. A label is plain text, with at most an icon before or after it:
+    `<Button><Mic :size="16" />Record</Button>`. The Button counts only an `svg`
+    or an element marked `data-icon` (`Icon` and `StatusDot` are) as the icon:
+    it gets the 8px gap and sits on the label's centre line. Do not wrap the
+    text in a `<span>`; a span is read as text, so it gets no gap of its own.
 
 ## What the components do
 

package/docs/color-system.md

@@ -111,10 +111,12 @@ step 3, so links and selected labels stay readable on a dark page.
 ## Dark theme
 
 The dark theme (`src/theme/dark.css`) ships inside `theme.css` and the embedded stylesheets. It applies wherever
-`data-ui-color-scheme="dark"` is set: on the app root through
-`<AppRoot color-scheme="dark">`, or on `<html>` for a full page (an app with
-an accent still passes `color-scheme="dark"` to AppRoot, which derives the
-accent for it). The library does not follow `prefers-color-scheme` by itself;
+`data-ui-color-scheme="dark"` is set: on the app root (`[data-ui-app]`)
+through `<AppRoot color-scheme="dark">`. With `theme.css` on a page of your own,
+`<html data-ui-color-scheme="dark">` works too; the embedded stylesheets (a DSM
+window) are scoped to the app root and read the attribute only there, never on
+the host's `<html>` (an app with an accent passes `color-scheme="dark"` to
+AppRoot in any case, which derives the accent for it). The library does not follow `prefers-color-scheme` by itself;
 the host decides and sets the attribute.
 
 The same roles, with the light page's sage carried into the greys:

package/docs/theme-hooks.md

@@ -31,7 +31,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-color-scheme` | the app root (AppRoot `color-scheme`, mirrored on floating hosts); `<html>` only with `theme.css`, not the embedded stylesheets | `dark` |
 | `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` |

package/docs/wizard.md

@@ -53,6 +53,10 @@ const open = ref(false)
 - **Text.** `description` is one short line at the top of the step, under the
   hero, without a closing period. Keep the content to the controls the step
   needs; it may be wide (a row of cards) or a form.
+- **Layout.** The step lays its content out as written, in block flow: it
+  does not stack its children with a gap. Several blocks go in one `Form`
+  (fields one field gap apart) or a `<Space direction="column">`; a lone
+  Callout, paragraph or card grid needs no wrapper.
 - **Choices.** A step's 2–4 options are choice cards:
   `<RadioGroup variant="card" orientation="horizontal" :options>`. Each card
   shows the option's `icon` in a tile, its label and one line, and keeps the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.20.10",
+  "version": "0.20.12",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",
@@ -60,6 +60,60 @@
     "./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: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",
+    "check:package": "node scripts/check-package-content.mjs",
+    "check:public-api-consumer": "node scripts/check-public-api-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"
   },
@@ -79,9 +133,44 @@
     "@tiptap/vue-3": "3.32.1",
     "zod": "^4.6.5"
   },
+  "devDependencies": {
+    "@eslint/js": "10.0.1",
+    "@histoire/plugin-vue": "1.0.0-beta.1",
+    "@tailwindcss/vite": "4.3.3",
+    "@tanstack/vue-virtual": "3.13.39",
+    "@vitejs/plugin-vue": "6.0.9",
+    "@vue/test-utils": "2.5.1",
+    "@vueuse/core": "14.4.0",
+    "eslint": "10.11.0",
+    "eslint-plugin-vue": "10.11.1",
+    "flexsearch": "0.8.212",
+    "globals": "17.12.0",
+    "histoire": "1.0.0-beta.1",
+    "jsdom": "30.1.1",
+    "playwright": "1.58.2",
+    "reka-ui": "2.11.0",
+    "tailwindcss": "4.3.3",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.71.0",
+    "vite": "7.3.6",
+    "vite-plugin-dts": "5.1.1",
+    "vitest": "5.0.2",
+    "vscode-oniguruma": "2.0.1",
+    "vscode-textmate": "9.3.2",
+    "vue": "3.5.43",
+    "vue-eslint-parser": "10.4.1",
+    "vue-tsc": "3.3.11"
+  },
   "engines": {
     "node": ">=20"
   },
+  "packageManager": "pnpm@10.33.2",
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild",
+      "vue-demi"
+    ]
+  },
   "config": {
     "bundledRuntime": {
       "@tanstack/vue-virtual": "3.13.39",