@synopackageland/ui 0.23.1 → 0.23.3

package/docs/mobile-native.md

@@ -483,12 +483,26 @@ the page, `--ui-chrome-height` tall (44px, plus a 1px rule):
   tab bar already names the page. The bar keeps its height, its menu or
   actions and its "…", and still hides on scroll. The `title` prop stays in
   the bar for screen readers only, and a `PageHeader` title still moves out of
-  the page. The drawer (from the menu button or the tab bar's More) is still
-  headed by `brand-name` and `brand-icon`, and the document title is
-  untouched. A sub-page (Back) shows its title as usual. Only the phone layout
-  changes; a DSM window and a desktop draw no phone bar. Set it per page:
-  `:phone-bar-title="onTabPage ? 'none' : 'auto'"`. Do not pass an empty
+  the page. When the bar then holds nothing (no menu button, Back, action,
+  account entry, "…" or page action) it is not drawn at all: the page starts
+  at the top, with no empty strip, and in the DSM portal no empty bar takes
+  the place of DSM's banner (the `title` it kept for screen readers goes
+  with it; the tab bar's selected tab still names the page). It is drawn
+  again as soon as it holds something. The drawer
+  (from the menu button or the tab bar's More) is still headed by
+  `brand-name` and `brand-icon`, and the document title is untouched. A
+  sub-page (Back) shows its title as usual. Only the phone layout changes; a
+  DSM window and a desktop draw no phone bar. Set it per page:
+  `:phone-bar-title="onTabPage ? 'none' : 'auto'"`, and always pass the
+  App's real `title`, `brand-name` and `brand-icon`. Do not pass an empty
   `title` or brand to hide them: the drawer would lose the App's name.
+- **The drawer's head:** the App's icon and name, then the close button. The
+  name takes the row up to the close button and is cut with "…" only when it
+  is longer than that.
+- **The drawer's focus:** opened with Enter or Space, focus lands on the
+  close button with its ring; opened by a tap or click, on the drawer panel,
+  which draws no ring. Tab still moves through the drawer only, and closing it
+  gives focus back to what opened it.
 - **Actions:** first the page's own actions, then `headerActions`
   (DropdownMenu entries). A pick emits `headerAction` with the key.
 - **One "…".** The bar never shows two overflow buttons. While the page's own
@@ -598,12 +612,16 @@ change: the same slot moves.
   row is never under the FAB; there is no room while no FAB is drawn.
 - A fill page (its content scrolls itself: `PageContent height="fill"`, or an
   App shell that keeps the PageContent from scrolling; PageContent marks it
-  `data-ui-page-fills`) keeps that room only while the FAB is in view. While
-  the FAB is hidden on scroll or by the keyboard, the content's own scroller
-  takes the room down to the bars' edge, together with the room the hidden
-  bars give back, so no blank band is left under it. A page that scrolls as a
-  whole keeps the room at its end, so its length never changes under the
-  finger.
+  `data-ui-page-fills`) puts that room at the end of its own scroller instead.
+  PageContent marks the vertical scroller in its body that reaches its bottom
+  `data-ui-page-scroller` (its own bottom padding is kept in
+  `--ui-page-scroller-pad`) and the page `data-ui-page-scroller-room`; the
+  scroller then runs down to the tab bar or the bottom accessory, its rows
+  pass under the FAB, which covers only its own circle, and the last row can
+  be scrolled above it. No blank band is left under the list, with the FAB
+  in view or hidden. A fill page whose scroller is not found keeps the room
+  under its content. A page that scrolls as a whole keeps the room at its
+  end, so its length never changes under the finger.
 - A toast sits 8px above the FAB while the FAB is shown, and back at its own
   place while the FAB is hidden on scroll or by the keyboard, and steps aside
   (fades out) while the speed dial is open; it moves with the bars (`--ui-motion-bars`, at once with reduced motion). A page without a FAB,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.23.1",
+  "version": "0.23.3",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",
@@ -79,6 +79,34 @@
     "@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"
   },
@@ -89,5 +117,62 @@
       "reka-ui": "2.11.0"
     }
   },
-  "homepage": "https://www.varvis.me/docs/"
-}
+  "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: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:phone-layout": "node scripts/check-phone-layout.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",
+    "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"
+  }
+}