@synopackageland/ui 0.25.3 → 0.25.5

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/adaptive-layout.md

@@ -299,9 +299,9 @@ const { state, width } = useAsidePreference('studio.aside', 'editor', { state: '
 | --- | --- | --- |
 | docked | `web`, the page keeps 480px | keeps `--ui-aside-open-width` and slides by `translate` while the region's width moves (`--ui-motion-panel`, ease-in-out both ways); the rail button fades in 150ms into a collapse |
 | floating | an open panel the page has no room for, or a 641–959 container | slides over the page from the rail (in `panel` ease-out, out `normal` ease-in); the region keeps its 48px |
-| sheet | a phone (≤640) | a 48px button at the end corner (above the tab bar and the safe area) opens a 90% bottom sheet; `expanded` is full screen; the scrim, Escape and a downward swipe on the header close it; the page is inert |
+| sheet | a phone (≤640) | a 48px button at the end corner (above the tab bar and the safe area) opens a 90% bottom sheet; `expanded` is full screen; the scrim, Escape and a downward swipe on the header close it; the page is `aria-hidden` and out of reach |
 
-- The panel is never unmounted: collapsed, it is `inert` and `aria-hidden`, and the thread's scroll and the composer's draft stay. The page is `inert` while the panel is expanded or a sheet is up.
+- The panel is never unmounted: collapsed, it is `inert` and `aria-hidden`, and the thread's scroll and the composer's draft stay. The page is `inert` and `aria-hidden` while the panel is expanded (it has no width then). While a sheet is up the page is `aria-hidden` but not `inert`: the sheet keeps it out of reach as an app-local dialog does (docs/app-local-modal.md).
 - Focus moves to the composer's first field on open (not on touch, `initial-focus` changes it) and back to the rail button or the phone button on collapse.
 - Escape: docked and expanded leave it to the content (stop a reply). A floating panel with focus inside, or a sheet, collapses on Escape after any layer opened above it (a menu, a popover) has closed.
 - No transition runs before the first paint has settled. The state needs no `transitionend`: only a floating panel's exit waits for one, with the `normal` token as its deadline, and a new state change or reduced motion ends it at once.

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,21 @@ 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.
+
+AppLayout's phone overlays work the same way. The navigation drawer and the
+aside's bottom sheet are local modal layers. The FAB speed dial is a trapped
+focus scope over its own scrim: Tab loops in the dial and focus that reaches
+the page comes back, although the dial is not a layer. While any of them is
+open the page column (`[data-ui-layout-main]`) is `aria-hidden`, never
+`inert`. Only an expanded aside, which leaves the page no width, makes the page
+`inert`.
+
 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 +142,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 +154,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.
@@ -156,7 +171,11 @@ Independent modality is the default.
 module plus exact before/after hunks. `build/rekaPatch.ts` verifies the installed
 version and all input hashes before the build; each hunk must match exactly
 once. The Vite plugin loads patched modules in memory, never edits node_modules,
-and is also used by Vitest. Any source/hash/hunk mismatch fails the build.
+and is also used by Vitest and every dev server (Histoire, the gallery,
+`tests/dsm-host`). The dependency optimizer would pre-bundle reka-ui without the
+patch, so the plugin keeps reka-ui out of `optimizeDeps` in any config it is
+in; `tests/dev-server-reka.test.ts` fails if a dev config or a script's dev
+server goes without it. Any source/hash/hunk mismatch fails the build.
 
 The body-scroll patch follows the U3 shared-lock candidate: save owned body
 padding-right, margin-right, overflow, pointer-events and root scrollbar-width

package/docs/mobile-native.md

@@ -724,8 +724,11 @@ change: the same slot moves.
   as labelled 48px pills over a scrim, staggered in. Focus moves to the first
   and stays in the dial; Escape, Back, a press on the scrim or the FAB close
   it and focus returns to the FAB. A pick runs the action and closes the dial;
-  an action that opens a menu closes it once the menu closes. The page behind
-  is inert while it is open. Reduced motion shows and hides it at once.
+  an action that opens a menu closes it once the menu closes. While it is
+  open the page behind is out of reach: the scrim takes presses, Tab loops in
+  the dial, focus that reaches the page comes back, and the page is
+  `aria-hidden` (not `inert`, which would restyle the whole page). Reduced
+  motion shows and hides it at once.
 - Every pill is its icon and its text. An action with no text of its own (an
   `IconButton` such as "More actions", an icon-only Button) shows its
   accessible name, from `aria-label` or `title`; the pill sizes to it and a

package/package.json

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