feat(slide_over): bottom-sheet drawer mode for origin="bottom"

[mplatts]

Closes #614

Summary

origin="bottom" already existed, but it slid a plain full-width panel up with the same chrome as a side sheet. This turns it into a proper mobile drawer.

• Rounded top corners on the large-panel radius rule (min(calc(var(--pc-radius) * 1.2), 20px)), top corners only since the bottom two are off-screen
• Grab-handle pill, aria-hidden because it is decorative
• env(safe-area-inset-bottom) padding on the body and footer
• max-height: 92dvh with the body scrolling inside it
• Drag-to-dismiss: distance threshold (25% of sheet height) or release velocity, with rubber-band resistance above the top snap
• Optional snap_points as viewport-height fractions, opening at initial_snap. A flick skips to the next point in its direction; only a downward release below the lowest point dismisses
• Opt-in scale_background for the vaul-style page shrink

Five new attrs, all on the existing slide_over/1: handle, drag_to_dismiss, snap_points, initial_snap, scale_background. handle defaults to nil, which resolves to on for bottom sheets and off elsewhere, so a bare <.slide_over origin="bottom"> gets the pill with no configuration.

Dismissal always routes through hide_slide_over/3 via a data-pc-drawer-hide attribute the hook execJS's, so the server sees one "close_slide_over" event with the same close_slide_over_target whether the user drags, taps away, presses escape or clicks the close button.

Accessibility is unchanged. The drag is a pointer-only enhancement layered over the existing dialog: role="dialog", aria-modal, focus_first on open, escape and click-away all behave exactly as before. No new keyboard bindings, no ARIA on the drag mechanics, snap changes not announced, prefers-reduced-motion settles instantly instead of springing.

Backward compatibility

No existing attr default changed and no existing test was modified. The diff on test/petal/slide_over_test.exs is additions only — git diff shows zero deleted lines in that file, which is the compatibility proof. All 913 pre-existing tests pass untouched.

Left, right and top sheets emit byte-identical markup: no handle, no hook, no data attributes, no new classes. A test asserts this explicitly for all three origins even when every drawer attr is passed. Verified visually too — the side sheet renders exactly as it did on main.

The only changed lines outside additions are three, all additive in effect:

• class={get_classes(...)} became class={[get_classes(...), @drawer? && "pc-slideover__box--drawer"]} — the modifier is false (dropped) for every non-bottom origin
• the playground page root gained data-pc-drawer-wrapper (for the scale_background demo)
• the playground's showcase list gained the three new example ids

assets/default.css is appended to in a fresh @layer components { } block; nothing existing was reflowed.

Did you ship a hook, and why

Yes — PetalDrawer. Pointer-driven drag physics is the one thing CSS and Phoenix.LiveView.JS genuinely cannot do: following a finger 1:1 and then deciding, from distance and release velocity, whether the sheet springs back or closes. The specific failure without it is that there is no way to express "translate follows pointerY, and on pointerup dismiss if travelled > 25% of height OR |velocity| > 0.5px/ms" declaratively.

Kept minimal:

• The physics is three exported pure functions — drawerResistance, drawerVelocity, drawerSettle — unit-tested with no DOM.
• The Elixir side renders configuration only, as data-* attributes.
• The hook attaches only when a bottom sheet is actually draggable, snapped or scaling its background. A plain drag_to_dismiss={false} bottom sheet stays CSS + LiveView.JS only, and side origins never get it. There is a test for each of those.
• No new dependencies, npm or hex. The hook is hand-rolled in assets/js/petal_components.js like every other one.

Deviations from the issue's sketch

1. Handle hit target. The issue asks for a min 44px tall touch area on the pill. A 44px block above the header pushed the title down noticeably, and faking it with a ::before overlay would have covered the close button. Instead the handle is ~28px visually and the hook captures pointerdown across the whole sheet head, not just the pill — so the real drag target is the full sheet width by everything above the scrolled content, far larger than 44px. Happy to change this if you'd rather have the literal 44px pill.

2. initial_snap validation. The issue says it "must be a member of snap_points". Rather than raise, a value outside the list falls back to the lowest point — an initial_snap you can never drag back to would be a worse failure mode than a silent correction. There is a test for it. Say the word if you'd prefer it to raise.

3. snap_points normalisation. They are sorted ascending on render regardless of the order passed, so [0.9, 0.4] and [0.4, 0.9] behave identically.

4. scale_background needs the hook. It is not pointer-driven, but it has to follow the panel opening and closing, and the open/close is driven by JS commands that write inline display on the content element. The hook watches that with a MutationObserver and toggles .pc-drawer-scaled on [data-pc-drawer-wrapper]. I could not find a CSS-only way to reach a sibling page wrapper from the sheet's open state; if there's a house pattern for this I've missed, I'll switch to it.

5. Overlay does not fade with drag position — matching the issue's "keep it simple" instruction.

Tests

Suite	Before	After
mix test	913, 0 failures, 1 skipped	930, 0 failures, 1 skipped
npm test	157	191

• 17 new ExUnit tests covering handle resolution per origin, the aria-hidden handle, drawer-only box classes, hook attachment and non-attachment, the emitted data-* config, snap sorting and initial_snap fallback, close_slide_over_target in the drag command, and that dialog semantics are untouched in drawer mode.
• 34 new vitest specs in test/js/drawer.test.js: the threshold and velocity maths, nearest-snap resolution with and without velocity bias, rubber-band resistance, plus hook-level specs for initial snap offset, spring-back, dismiss routing through the shared hide command, ignoring taps on controls, the scroll-top capture rule, scale_background toggling, and reduced-motion settling.

mix format --check-formatted, mix compile --force --warnings-as-errors clean. Credo: one entry fewer than main, zero new — SlideOver picked up a moduledoc, which closed the existing Modules should have a @moduledoc tag finding.

Verified by hand in the playground

• Escape closes the drawer.
• Focus management: pressing Enter immediately after opening activates the close button, i.e. focus_first still lands inside the panel and the handle does not steal focus.
• The hook runs: the snapped queue drawer opens at translate3d(0px, 422px, 0px) on a 90dvh sheet in an 844px viewport, which is exactly the initial_snap={0.4} peek.
• Side sheets visibly unchanged.

What I could not verify: an end-to-end pointer drag in the browser. The automation tool's coordinate resolution mishandles position: fixed elements and its eval was unavailable, so every scripted drag landed on the page header instead of the sheet. The drag path is covered at the unit level (including dismiss routing through data-pc-drawer-hide with a stubbed liveSocket), but it has not been exercised on a real touch device or with real pointer events — worth a manual pass on a phone before merge.

Screenshots

Light and dark playground pages, the drawer open at desktop and phone width, and the snapped queue drawer peeking at 0.4 — attached separately.

[codecov]

Codecov Report

❌ Patch coverage is 98.41270% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 92.49%. Comparing base (871b2cf) to head (115f781).
⚠️ Report is 6 commits behind head on main.

Files with missing lines	Patch %	Lines
lib/petal_components/slide_over.ex	96.77%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #637      +/-   ##
==========================================
+ Coverage   92.40%   92.49%   +0.09%     
==========================================
  Files         119      119              
  Lines        5066     5128      +62     
==========================================
+ Hits         4681     4743      +62     
  Misses        385      385              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[mplatts]

Screenshots

Bottom sheet open — desktop and mobile (390×844)

Side sheet unchanged — the backward-compatibility proof

Page

Verified independently

Check	Result
mix test	930 tests, 0 failures, 1 skipped (+17)
npm test	191 passing (+34)
mix format / compile -Werror	clean
mix credo	one entry fewer, zero new (SlideOver gained a moduledoc)
new dependencies	none
new nav slug	none — correct, this extends the existing slide-over page

Backward compatibility — checked directly

git diff on test/petal/slide_over_test.exs shows zero deletions. Every pre-existing test passes unmodified, which is the proof that matters for a component already in real apps. No existing attr default changed, and the drawer class modifier evaluates to false and drops out entirely for left/right/top origins.

Note the new attrs use attr(...) with parens, against the house bare style — that's deliberate and right here: slide_over.ex already had 10 parenthesised attrs, so matching the file beats matching the global convention and leaving one module internally split.

The gap worth knowing before merge: an end-to-end pointer drag was never exercised. agent-browser's coordinate resolution mishandles position: fixed elements and eval is blocked in this sandbox, so every scripted drag landed on the page header instead. The physics is unit-tested as three pure exported functions (34 specs, including dismiss routing with a stubbed liveSocket), and the hook demonstrably runs — the snapped drawer opens at exactly translate3d(0px, 422px, 0px) on a 90dvh sheet in an 844px viewport, which is the initial_snap={0.4} peek. But drag-to-dismiss deserves a real phone pass before this leaves draft.

_{Images live on the pr-assets branch, which exists only to host PR screenshots - it never merges to main and ships in no Hex release.}

[nhobes]

Eye-test bug, root-caused and fixed in the new commit — maintainer repro: handle off → open → handle on → drag handle → drawer snaps down.

Root cause is a LiveView mechanic, not drawer logic: the drag offset lives in the sheet's inline transform, but the sheet also renders a server-side style="height: Ndvh". Every patch syncs the style attribute back to the server's version, and the only inline style LiveView carries across is its own sticky display — not transform. So ANY re-render of an open drawer silently dropped the offset from the DOM: the sheet painted at 0 while the hook still believed offset=450, and the first pointermove re-applied 450px in one frame. updated() only re-seated when the snap config changed, and a handle toggle doesn't change it. (Same mechanism made a dial flip while closed open the drawer at full height instead of its initial snap.)

Fix, hook-only: updated() now restores the offset (re-asserting transition: none mid-drag) on any patch it doesn't re-seat on; onPointerDown baselines the drag on the offset the sheet is rendered at (parsed from the inline transform) rather than what the hook last wrote — when the two disagree, the DOM is the truth. Any consumer re-render mid-open is now safe; no Elixir/CSS changes.

CDP-verified (420×900): the exact repro tracks 1:1 with the finger from the correct position; both snaps up/down, drag-to-dismiss, a patch landing mid-gesture, unsnapped mode, and scale_background all still behave.

Gates: mix test 931/0, vitest 208 (4 new specs, all 4 fail with the hook change stashed), format clean.

[greptile-apps]

Greptile Summary

The PR turns bottom-origin slide-overs into draggable mobile drawers with snap points, safe-area styling, and optional background scaling.

• Adds the PetalDrawer LiveView hook and drawer physics.
• Extends slide_over/1 with handle, dismissal, snap-point, initial-snap, and background-scaling options.
• Adds drawer-specific CSS, showcase examples, documentation, and unit/component coverage.

Confidence Score: 3/5

The PR should not merge until snap-point inputs are constrained and upward content scrolling no longer moves the drawer concurrently.

Invalid public snap configurations can generate unusable drawer geometry, and the touch gesture handlers currently apply sheet transforms during native upward content scrolling.

Files Needing Attention: lib/petal_components/slide_over.ex, assets/js/petal_components.js

Important Files Changed

Filename	Overview
lib/petal_components/slide_over.ex	Adds the drawer API and emitted hook configuration, but snap-point normalization does not enforce the numeric domain required by the browser calculations.
assets/js/petal_components.js	Implements drag, snap, dismissal, lifecycle restoration, and background scaling; upward content scrolling can concurrently transform the sheet.
assets/default.css	Adds bottom-drawer geometry, scrolling, safe-area, handle, and background-scale styles aligned with the new markup.
test/js/drawer.test.js	Provides broad unit coverage of physics and hook behavior but does not combine real touch scrolling with pointer-driven transforms.
test/petal/slide_over_test.exs	Covers drawer-only markup, configuration, hook attachment, ordering, and existing overlay semantics, but omits invalid snap-point domains.

Sequence Diagram

sequenceDiagram
  participant User
  participant Drawer as PetalDrawer hook
  participant DOM as Slide-over DOM
  participant LV as LiveView
  User->>Drawer: pointerdown / pointermove
  Drawer->>DOM: apply drag transform
  alt release settles
    Drawer->>DOM: animate to snap point
  else release dismisses
    Drawer->>LV: execJS(data-pc-drawer-hide)
    LV->>DOM: run shared hide_slide_over path
  end

Loading

_{Reviews (1): Last reviewed commit: "Merge remote-tracking branch 'origin/mai..." | Re-trigger Greptile}

[greptile-apps]

Invalid snap-point geometry

When snap_points contains zero, a negative number, or a value greater than one, normalization accepts it and the hook uses the maximum as both the CSS height and an offset divisor, causing zero-height, inverted, oversized, or invalid drawer geometry.

Knowledge Base Used:

• Transient overlays
• Browser hooks

[greptile-apps]

Content scroll also moves drawer

When a user swipes upward from the content scroller at scrollTop === 0, onPointerMove applies a negative drawer transform while onTouchMove allows native scrolling, causing the sheet and its contents to move concurrently before the sheet springs back on pointer cancellation.

Knowledge Base Used:

• Transient overlays
• Browser hooks