@synopackageland/ui 0.25.18 → 0.25.20

package/docs/button-policy.md

@@ -76,6 +76,13 @@ are in [dsm-native-metrics.md](dsm-native-metrics.md).
     least 44px high on a phone, with hover, pressed and focus states, and
     Enter or Space opens it. Use a text button when only a word in a line acts;
     use a DisclosureRow when the row is the action.
+13. A label is never cut to "…", in any language at any width. When space is
+    short the text beside the button gives way, or the label wraps onto a
+    second line; a button never shows part of its label. Do not add
+    `truncate`, `text-overflow: ellipsis` or a fixed `height` to a button or
+    its label, and give the neighbouring text `min-width: 0` so it is the one
+    that shrinks. Prefer a shorter label, or a layout that moves the button
+    under the text on a narrow screen, to a button that wraps.
 
 ## What the components do
 
@@ -86,6 +93,16 @@ are in [dsm-native-metrics.md](dsm-native-metrics.md).
 - A Button in a `Callout`'s `#actions` and a toast's action are drawn as
   capsules by the Callout and the Toast themselves ([callout](callout.md)).
   They stay `kind="tool"` buttons, so they do not count as a footer's action.
+- A Button, a SplitButton and a NewItemsPill keep their label whole. The
+  button does not shrink below its label's width in a flex row (`shrink-0`),
+  so a long text beside a small button wraps instead of the button ("從清單移除"
+  stays whole, never "從清..."). It is never wider than its container
+  (`max-w-full`): a label wider than the whole container wraps onto more
+  lines, centred, between words (CJK between characters), and breaks inside
+  a word only when the word alone is wider than the line. The size is a
+  minimum height with block padding, so a two-line button keeps even space
+  above and below its text. The phone bar's text action and the phone FAB's
+  pills wrap the same way. `pnpm check:button-wrap` checks this in a browser.
 - In development, a Button warns in the console when `kind="action"` is set
   outside a footer, when a footer has two main actions, or when the main action
   is not last. Production builds do not check.

package/docs/mobile-native.md

@@ -472,7 +472,9 @@ control opts in.
 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`.
+`--ui-radius-sheet`, and it casts the bar's short upward shadow
+(`--ui-shadow-bar`), not the dialog's: the scrim already sets it apart, and
+the wide blur slowed its raster.
 
 - `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
@@ -488,8 +490,17 @@ contain`, a pinned footer and safe-area padding. The top corners use
   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
+- In 250ms on `--ui-motion-sheet-ease`, out 150ms, the scrim
   (`--ui-drawer-backdrop`) fading with it. Reduced motion uses an 80ms fade.
+  The scrim starts fading in on the first frame. Before the slide, the sheet
+  draws in place at 1% opacity so the GPU rasters it first; the slide starts
+  once two frames in a row come within 40ms of each other, or after 150ms. A
+  fast device waits about two frames; a slow one waits for most of its raster
+  instead of stalling in the middle of the slide.
+- Focus: with a mouse the first field takes it at once; on touch the panel
+  takes it when the slide ends (not the first field, which would raise the
+  keyboard), unless the user has focused something in it by then. After a
+  key press the panel takes it at once.
 - `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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.25.18",
+  "version": "0.25.20",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",
@@ -60,6 +60,69 @@
     "./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",
+    "check:tokens": "node scripts/check-tokens.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:press": "node scripts/check-press.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:button-wrap": "node scripts/check-button-wrap.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:phone-layout": "node scripts/check-phone-layout.mjs",
+    "check:phone-bars": "node scripts/check-phone-bars.mjs",
+    "check:phone-fill": "node scripts/check-phone-fill.mjs",
+    "check:text-zoom": "node scripts/check-text-zoom.mjs",
+    "check:focus-restore": "node scripts/check-focus-restore.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",
+    "trace:restyle": "node scripts/trace-restyle.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 webkit"
+  },
   "peerDependencies": {
     "vue": "^3.5.0"
   },
@@ -79,9 +142,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",