@stacksjs/defaults 0.75.105 → 0.75.106

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.75.105",
+  "version": "0.75.106",
   "description": "Stacks, built into VS Code: stx templates, pickier linting and formatting, encrypted env files, the dev server preview and every buddy command. No other extensions required.",
   "license": "MIT",
   "funding": "https://github.com/sponsors/chrisbbreuer",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.75.105",
+  "version": "0.75.106",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stacksjs/stacks.git",
@@ -55,7 +55,7 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@iconify-json/hugeicons": "^1.2.35",
-    "@stacksjs/mobile": "^0.75.105",
+    "@stacksjs/mobile": "^0.75.106",
     "@stacksjs/sanitizer": "^0.2.419",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",

package/resources/components/NativeComponents.test.ts

@@ -258,6 +258,15 @@ describe('Native components feel native', () => {
     expect(sheet).toContain('putBack ??= liftToBody(element)')
   })
 
+  it('slides a sheet up from where it was lifted to, rather than appearing up', () => {
+    const sheet = read('NativeSheet')
+    // is-open follows `shown`, which present() sets only after the lifted
+    // sheet's closed style is worked out in the body.
+    expect(sheet).toContain("const sheetClass = derived(() => `${shown() ? 'is-open' : ''}")
+    expect(sheet).toContain('getComputedStyle(sheetPanel).transform')
+    expect(sheet.indexOf('putBack ??= liftToBody(element)')).toBeLessThan(sheet.indexOf('shown.set(true)'))
+  })
+
   it('presses the page back into a card behind a large sheet, unless motion is reduced', () => {
     const sheet = read('NativeSheet')
     expect(sheet).toContain('presentPageAsCard(element.ownerDocument, want)')

package/resources/components/NativeSheet.stx

@@ -34,6 +34,10 @@ const detents = derived<SheetDetent[]>(() => {
 })
 const hasDetents = derived(() => Boolean(detentsProp()) && detentsProp().length > 0)
 const detent = state<SheetDetent>('large')
+// Whether the sheet is drawn up. It follows `open`, but only once the sheet
+// sits in the body with its closed position worked out there (present()), so
+// it has somewhere to slide up from.
+const shown = state(false)
 
 const sheetRoot = useRef('nativeSheet')
 const panel = useRef('nativeSheetPanel')
@@ -69,10 +73,18 @@ function present(): void {
   releaseBackground = lockBackground(element)
   openedOn = currentPath()
   coverTabBar(element, true)
+  // A node moved in the document starts over with no style to transition
+  // from, so a sheet lifted and marked open in one go appears already up.
+  // Work its closed style out where it now is, then open it: the panel
+  // slides from there.
+  const sheetPanel = panel.current as HTMLElement | null
+  if (sheetPanel) void element.ownerDocument.defaultView?.getComputedStyle(sheetPanel).transform
+  shown.set(true)
   void nextTick(() => (panel.current as HTMLElement | null)?.focus())
 }
 
 function dismissed(): void {
+  shown.set(false)
   const element = root()
   if (element) coverTabBar(element, false)
   releaseBackground?.()
@@ -153,7 +165,7 @@ useEventListener('keydown', (event: KeyboardEvent) => {
   else if (panel.current) trapFocus(panel.current as HTMLElement, event)
 })
 
-const sheetClass = derived(() => `${open() ? 'is-open' : ''}${hasDetents() ? ' has-detents' : ''}${detent() === 'medium' ? ' is-medium' : ''}`.trim())
+const sheetClass = derived(() => `${shown() ? 'is-open' : ''}${hasDetents() ? ' has-detents' : ''}${detent() === 'medium' ? ' is-medium' : ''}`.trim())
 </script>
 
 <div ref="nativeSheet" class="native-sheet" :class="sheetClass()" :aria-hidden="open() ? 'false' : 'true'" data-native-sheet>