@rcarls/rc-bottom-sheet 0.0.0-next-20260921045401

package/CHANGELOG.md

@@ -0,0 +1,130 @@
+# @rcarls/rc-bottom-sheet
+
+## 0.0.0-next-20260921045401
+
+### Minor Changes
+
+- 57338f5: `rc-dialog`, `rc-bottom-sheet`, and `rc-snackbar` now fade in and out through
+  CSS alone, using `@starting-style` and a discrete `display`/`overlay`
+  transition, driven by the shared `--rc-motion-effects-*` tokens (and
+  `--rc-motion-spatial-*` for `rc-snackbar`'s slide). `showModal()`/`show()`/
+  `close()` all stay synchronous, and nothing in any of the three components
+  waits on the transition finishing, so a zero-duration theme or a browser
+  without support for the CSS involved both degrade to an instant, fully
+  correct open and close.
+
+  `rc-dialog` and `rc-bottom-sheet` animate opacity only, not a scale or slide
+  transform: both support pointer resize and read `getBoundingClientRect()` to
+  compute drag deltas, and a transform is a visual effect that
+  `getBoundingClientRect()` reports for as long as it's still animating,
+  corrupting that measurement if a resize or drag starts during the entrance.
+  `rc-snackbar` has no such feature, so it fades and slides up from the
+  block-end edge it's anchored to.
+
+### Patch Changes
+
+- Updated dependencies [50d5610]
+- Updated dependencies [4341311]
+- Updated dependencies [2c7c80a]
+- Updated dependencies [57338f5]
+  - @rcarls/rc-common@0.0.0-next-20260921045401
+  - @rcarls/rc-dialog@0.0.0-next-20260921045401
+
+## 0.6.0
+
+### Patch Changes
+
+- ee7ba6c: Keep resize pinning, drag origins, and snapped bottom sheets correctly
+  positioned when a layout-containing ancestor establishes a non-viewport
+  containing block. Report animated snap changes only after the sheet settles so
+  consumers can defer discrete content and accessibility state changes until the
+  surface motion completes. Expose resize-start timing so content can be prepared
+  before an interactive expansion reveals it.
+- Updated dependencies [6683eb9]
+- Updated dependencies [ee7ba6c]
+- Updated dependencies [30eb232]
+- Updated dependencies [57370e4]
+  - @rcarls/rc-common@0.6.0
+  - @rcarls/rc-dialog@0.6.0
+
+## 0.5.0
+
+### Patch Changes
+
+- ba65db7: Fix an edge case left in the 0.4.2 resize-repin fix: the window-resize re-pin re-measured
+  via `getBoundingClientRect()` on the box that was still carrying its _previous_ inline pin,
+  so a fixed (non-`dvh`) snap point (for example a `132px` peek height, common for a
+  persistent summary sheet) computed the exact same, now-stale target, since neither the
+  requested height nor the stale box's edges had changed. Only `dvh`-based snap points were
+  actually re-deriving correctly. Now clears the previous `top`/`height` pin before
+  re-measuring on resize, so the dialog reverts to its CSS-driven (`inset-block-end`-anchored)
+  position first, the same as a sheet that has never been pinned. Added a regression test
+  covering this specific case (confirmed it fails without the fix).
+- Updated dependencies [4ae2ef0]
+- Updated dependencies [689340c]
+  - @rcarls/rc-common@0.5.0
+  - @rcarls/rc-dialog@0.5.0
+
+## 0.4.2
+
+### Patch Changes
+
+- 5178dcc: Fix `rc-bottom-sheet` snapping to stale geometry after a viewport resize (for example a
+  browser window maximize/restore) while open. Snap-point heights are resolved against the
+  current viewport at the moment a snap is applied, then frozen as inline `top`/`height`
+  styles; nothing re-derived them after that, so a resize with no drag or `snapTo()` call
+  in between left the sheet pinned to pre-resize pixel geometry. Now listens for `resize`
+  while open and re-applies the last-snapped index against fresh geometry.
+
+  Also stops pinning the inline axis (`left`/`width`) at all: only `top`/`height` are ever
+  read again after the initial pin, and freezing the inline axis as an inline style
+  permanently overrides any external stylesheet's `inset-inline`/`inline-size` confinement
+  (for example a host page confining a sheet to a layout pane narrower than the viewport)
+  regardless of specificity, since inline styles always win that cascade. `rc-bottom-sheet`'s
+  own `LIGHT_DOM_CSS` already deliberately leaves the inline axis CSS-owned; the pin just
+  wasn't honoring that.
+  - @rcarls/rc-common@0.4.2
+  - @rcarls/rc-dialog@0.4.2
+
+## 0.4.1
+
+### Patch Changes
+
+- @rcarls/rc-common@0.4.1
+- @rcarls/rc-dialog@0.4.1
+
+## 0.4.0
+
+### Minor Changes
+
+- 48cf73f: Add the rc-bottom-sheet package as a dialog-backed modal bottom-sheet surface.
+- 037b1b3: Add shared drag gesture measurement and numeric snap helpers, migrate bottom
+  sheet settling to the shared velocity lifecycle, and add anchored settling and
+  swipe-to-collapse behavior to splitters.
+- c40a1be: Add theme-neutral fast, default, and slow effects and spatial motion token
+  pairs. Expose bottom-sheet settle easing through
+  `--rc-bottom-sheet-snap-easing` and map sheet settling to the Material spatial
+  motion scheme.
+
+  Give direct-child bottom-sheet handles a full-width 48px interaction target
+  while preserving the 32 by 4 pixel visual indicator. Replace rectangular
+  mobile browser tap highlights on chips with themeable, shape-clipped state
+  layers. Keep bottom-sheet snap targets docked to the block-end edge when CSS
+  minimum or maximum sizing constrains their requested heights.
+
+  Mount declaratively assigned textarea plugins at connection time and remount
+  them after reconnection, preserving plugin effects and adopted styles in
+  framework render lifecycles.
+
+### Patch Changes
+
+- ebec800: Dock bottom sheets without a theme to the viewport block-end by default and
+  support absolute positioning for non-modal sheets contained by a positioned ancestor.
+  Center authored drag handles with a splitter-aligned pill treatment. Align the
+  Material theme with its surface, elevation, scrim, drag-handle, and contextual
+  button treatment.
+- Updated dependencies [e57277f]
+- Updated dependencies [ccca8e2]
+- Updated dependencies [037b1b3]
+  - @rcarls/rc-dialog@0.4.0
+  - @rcarls/rc-common@0.4.0

package/README.md

@@ -0,0 +1,77 @@
+# `@rcarls/rc-bottom-sheet`
+
+Modal bottom-sheet wrapper for a native `<dialog>`.
+
+Docs: [https://richardcarls.github.io/rc-webcomponents/components/rc-bottom-sheet](https://richardcarls.github.io/rc-webcomponents/components/rc-bottom-sheet).
+
+## Installation
+
+```bash
+npm install @rcarls/rc-bottom-sheet
+```
+
+```bash
+yarn add @rcarls/rc-bottom-sheet
+```
+
+```js
+import '@rcarls/rc-bottom-sheet/define';
+```
+
+## Usage
+
+Place a `<dialog>` element directly inside `<rc-bottom-sheet>`. The inner dialog
+must have `aria-labelledby` or `aria-label`.
+
+```html
+<rc-bottom-sheet id="filters" snap-points="40dvh 70dvh 100dvh">
+  <dialog aria-label="Filter recipes">
+    <button
+      type="button"
+      data-rc-bottom-sheet-handle
+      data-rc-dialog-resize-axis="y"
+      data-rc-dialog-resize-origin="top"
+      aria-label="Resize sheet"
+    ></button>
+    <button value="close" formmethod="dialog">Done</button>
+  </dialog>
+</rc-bottom-sheet>
+
+<script type="module">
+  document.querySelector('#filters').showModal();
+</script>
+```
+
+`rc-bottom-sheet` inherits `rc-dialog` methods and events, including
+`showModal()`, `show()`, `close()`, `requestClose()`, `rc-dialog-toggle`, and
+`rc-dialog-request-close`. It defaults to light dismiss, vertical top-origin
+resize, downward swipe-dismiss, and fixed positioning at the viewport's bottom
+edge. Add an optional
+`[data-rc-bottom-sheet-handle]` element inside the dialog for an authored
+handle. Handles without a theme use the same centered 32 by 4 pixel pill
+geometry as the splitter-style drag indicator inside a full-width, 48 pixel-high pointer
+target. Keep a direct-child handle at the top of the dialog so that target
+starts at the sheet's draggable edge; when authoring custom dialog padding,
+leave its block-start padding at zero.
+
+For an embedded non-modal sheet, place the component in a positioned container,
+set `--rc-bottom-sheet-position: absolute`, and open it with `show()`. The sheet
+then docks to that container's block-end edge instead of the viewport.
+
+List `snap-points` as CSS heights in ascending order. Slow drag releases
+settle at the nearest point; a swipe at `swipe-velocity` or faster settles at
+the first or last point. Settling animates unless the user prefers reduced
+motion. `rc-bottom-sheet-resize-start` fires as an interactive resize begins,
+before the sheet geometry changes, so consumers can prepare content that the
+drag will reveal.
+
+Call `snapTo(index)` to move programmatically. The
+`rc-bottom-sheet-snap` event fires after the sheet has settled and reports the
+selected `index`, effective target `height` after CSS size constraints, and
+whether the trigger was a drag or API call. Interrupted animations do not emit
+a stale event. Constrained targets remain docked to the same block-end edge.
+
+Set `--rc-bottom-sheet-snap-duration` and
+`--rc-bottom-sheet-snap-easing` on the dialog to customize its settle motion.
+Themes can map these to their own spatial motion tokens; reduced motion still
+settles instantly.