@synopackageland/ui 0.20.12 → 0.20.14

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,35 @@ 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`).
+
+At a page's end edge the box sticks out past the page: a 36px IconButton
+flush with the right of a header row reaches 4px further. On touch,
+AppLayout's column and page area and every `PageContent` clip their
+children sideways (`overflow-x: clip`), so a page scroller never counts that
+overhang as content and never scrolls sideways; the box keeps its full 44px
+wherever the page has room, vertical scrolling and sticky headers are
+unchanged, and a table or code block that scrolls sideways (a scroller of its
+own) keeps scrolling. An App that puts small controls flush with the edge of
+its own scroller, outside a `PageContent`, clips that content sideways the
+same way.
+
+`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.12",
+  "version": "0.20.14",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",
@@ -60,60 +60,6 @@
     "./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"
   },
@@ -133,44 +79,9 @@
     "@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",