@synopackageland/ui 0.25.3 → 0.25.4

package/dist/virtual/galleryColumns.d.ts

@@ -1,5 +1,8 @@
-/** Container width (px) at which the gallery gains its 2nd…6th column (layout-spec §2.6). */
-export declare const GALLERY_BREAKPOINTS: readonly [640, 768, 1024, 1280, 1536];
+/**
+ * Container width (px) at which the gallery gains its 2nd…6th column (layout-spec §2.6). A page beside a
+ * sidebar on a portrait tablet (about 470px) holds two cards of at least 212px; a phone keeps one.
+ */
+export declare const GALLERY_BREAKPOINTS: readonly [440, 720, 1024, 1280, 1536];
 /** Gallery columns for a container `width` px wide; 0 while the width is unknown. */
 export declare function galleryColumns(width: number): number;
 /**

package/docs/app-local-modal.md

@@ -23,9 +23,9 @@ errors; a rejected overlay must be closed/unmounted by the app's error handler.
 
 | Concern | Document mode (opt-in) | App mode (default) |
 | --- | --- | --- |
-| Pointer | Original Reka document stack and body lock. | Inert only this root's background and lower local modal layers; other roots/host remain interactive. |
+| Pointer | Original Reka document stack and body lock. | The mask over this root's background takes presses, wheel and touch; lower local modal layers are inert. Other roots/host remain interactive. |
 | Scroll | Shared body scroll lock and compensation policy. | Lock the background wrapper, preserve its scroll position, and contain backdrop wheel/touch gestures locally. Active panels and host/other-app scrolling remain native. |
-| Accessibility | Original Reka hideOthers semantics. | Local inert/aria-hidden ownership; keep the active dialog and registered popup branches accessible. Dialogs keep role, title and description references and omit aria-modal, since the rest of the page is available. |
+| Accessibility | Original Reka hideOthers semantics. | Local aria-hidden on the background and inert/aria-hidden on lower layers; keep the active dialog and registered popup branches accessible. Dialogs keep role, title and description references and omit aria-modal, since the rest of the page is available. |
 | Focus | Original document FocusScope coordination. | Loop Tab/Shift+Tab in the active local panel while focus belongs to it. Deliberate other-app/host transitions remain outside the local trap. |
 | Escape | Original document layer routing. | Route once to the focused root's top layer. IME composition is ignored and cancellation is preserved. Host/body events infer no local app. |
 | Cleanup | Shared Reka lock counts. | Restore locally owned inert/ARIA/style values only when still owned. Remove listeners/branches on unmount and never mutate body. |
@@ -38,6 +38,13 @@ Nested panels retain the parent background lock, temporarily hide/inert the
 parent panel, and restore its interaction on close. Presence/exit animations
 retain layer ownership until Reka actually removes the layer.
 
+The background is not `inert`: Chrome restyles every element under an element
+whose `inert` changes, so an inert background made opening a dialog restyle the
+whole app before its first frame. The mask, the focus loop and `focusin` (focus
+that reaches the background goes back to the panel) keep the background out of
+reach; focus left on the background when a dialog skips autofocus is released,
+as inert would.
+
 A host must provide an accessible window switch mechanism: a looping Tab
 sequence inside a local dialog does not itself reach another app. There is no
 claim of whole-document modality in app mode. VoiceOver/NVDA exposure and
@@ -127,7 +134,7 @@ DropdownMenu), ContextMenu (through Menu), and Tooltip use the same patched
 DismissableLayer/focus boundary. Portal branches are part of the local stack;
 closing a child does not also close the parent. Tooltip-open coordination is
 local to the root. Toast portals/live announcements remain in the sibling
-portal host, outside the inert background. Raw Reka primitives from a separate
+portal host, outside the hidden background. Raw Reka primitives from a separate
 consumer import are outside this contract. Each popper wrapper takes its
 z-index from the local layer stack, not from Reka's copy of the content's own
 z-index, so a modal backdrop never covers a popup opened inside the modal.
@@ -139,7 +146,7 @@ submenu-only step for DropdownMenu and OverflowToolbar in both document and
 app-local mode.
 
 The wrapper is the registered background scroll container in this version.
-Scroll containers within it are blocked by inert/background containment while
+Scroll containers within it are blocked by the mask and background containment while
 a local modal is present. Apps with their own external Teleports or desktop
 scrolling cannot claim independent containment. Keep custom portals inside the
 root and inside the active panel, or use the library's supported popup components.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.25.3",
+  "version": "0.25.4",
   "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,65 @@
       "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: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: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: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"
+  }
+}