@rcarls/rc-bottom-sheet 0.4.0

package/README.md

@@ -0,0 +1,74 @@
+# `@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.
+
+Call `snapTo(index)` to move programmatically. The
+`rc-bottom-sheet-snap` event reports the selected `index`, effective target
+`height` after CSS size constraints, and whether the trigger was a drag or API
+call. 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.

package/dist/custom-elements.json

@@ -0,0 +1,619 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/define.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "rc-bottom-sheet",
+          "declaration": {
+            "name": "RCBottomSheet",
+            "module": "/src/index.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/index.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/rc-bottom-sheet.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/rc-bottom-sheet.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Modal bottom-sheet wrapper for a native `<dialog>`, built on `rc-dialog`.\n\nThe direct child `<dialog>` remains the semantic dialog surface and owns\ncontent, labels, and form behavior. `rc-bottom-sheet` supplies the same\nopen/close lifecycle, focus restoration, cancel/request-close events, and\nlight-dismiss affordance as `rc-dialog`. The component docks the sheet to\nthe viewport block-end by default, while themes provide its visual surface.\n\nDragging the resize handle past a decisive velocity in either direction\n(a \"swipe\" or \"fling,\" distinct from a slow deliberate drag) snaps\nstraight to the extreme `snap-points` entry in that direction — swipe up\nto fully expand, swipe down to fully collapse — regardless of how close\nthe release position was to some other point. Below that velocity, the\nsheet settles to whichever declared snap point is nearest the release\nheight. All settling, whether from a drag or from `snapTo()`, animates\nover `--rc-bottom-sheet-snap-duration`, follows\n`--rc-bottom-sheet-snap-easing`, and is skipped for\n`prefers-reduced-motion: reduce`.",
+          "name": "RCBottomSheet",
+          "cssProperties": [
+            {
+              "description": "Sheet surface background.",
+              "name": "--rc-bottom-sheet-bg",
+              "default": "Canvas"
+            },
+            {
+              "description": "Sheet text color.",
+              "name": "--rc-bottom-sheet-color",
+              "default": "CanvasText"
+            },
+            {
+              "description": "Sheet corner radius.",
+              "name": "--rc-bottom-sheet-radius",
+              "default": "1rem 1rem 0 0"
+            },
+            {
+              "description": "Sheet elevation shadow.",
+              "name": "--rc-bottom-sheet-shadow",
+              "default": "none"
+            },
+            {
+              "description": "Positioning scheme. Use `absolute` with `show()` to dock a non-modal sheet to a positioned ancestor.",
+              "name": "--rc-bottom-sheet-position",
+              "default": "fixed"
+            },
+            {
+              "description": "Distance from the positioning container's block-end edge.",
+              "name": "--rc-bottom-sheet-inset-block-end",
+              "default": "0px"
+            },
+            {
+              "description": "Inline-axis inset used with automatic margins.",
+              "name": "--rc-bottom-sheet-inset-inline",
+              "default": "0px"
+            },
+            {
+              "description": "Maximum sheet width.",
+              "name": "--rc-bottom-sheet-max-inline-size",
+              "default": "40rem"
+            },
+            {
+              "description": "Maximum sheet height.",
+              "name": "--rc-bottom-sheet-max-block-size",
+              "default": "70dvh"
+            },
+            {
+              "description": "Sheet padding.",
+              "name": "--rc-bottom-sheet-padding",
+              "default": "0 1rem 1rem"
+            },
+            {
+              "description": "Modal backdrop color.",
+              "name": "--rc-bottom-sheet-scrim",
+              "default": "var(--rc-dialog-scrim)"
+            },
+            {
+              "description": "Resize handle color.",
+              "name": "--rc-bottom-sheet-handle-color",
+              "default": "GrayText"
+            },
+            {
+              "description": "Resize handle width.",
+              "name": "--rc-bottom-sheet-handle-inline-size",
+              "default": "2rem"
+            },
+            {
+              "description": "Resize handle height.",
+              "name": "--rc-bottom-sheet-handle-block-size",
+              "default": "0.25rem"
+            },
+            {
+              "description": "Resize handle corner radius.",
+              "name": "--rc-bottom-sheet-handle-radius",
+              "default": "999px"
+            },
+            {
+              "description": "Pointer target width for a direct-child handle.",
+              "name": "--rc-bottom-sheet-handle-target-inline-size",
+              "default": "100%"
+            },
+            {
+              "description": "Pointer target height for a direct-child handle.",
+              "name": "--rc-bottom-sheet-handle-target-block-size",
+              "default": "3rem"
+            },
+            {
+              "description": "Margin around a direct-child handle target.",
+              "name": "--rc-bottom-sheet-handle-target-margin",
+              "default": "0"
+            },
+            {
+              "description": "Duration of the settle animation after a drag release or `snapTo()` call.",
+              "name": "--rc-bottom-sheet-snap-duration",
+              "default": "300ms"
+            },
+            {
+              "description": "Easing for the settle animation after a drag release or `snapTo()` call.",
+              "name": "--rc-bottom-sheet-snap-easing",
+              "default": "cubic-bezier(0.4, 0, 0.2, 1)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Place a `<dialog>` element with the sheet content and optional `[data-rc-bottom-sheet-handle]` resize handle here.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "swipeDismissThreshold",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "static": true,
+              "readonly": true,
+              "default": "96"
+            },
+            {
+              "kind": "field",
+              "name": "_styledRoots",
+              "privacy": "private",
+              "static": true,
+              "readonly": true,
+              "default": "new Set<Document | ShadowRoot>()"
+            },
+            {
+              "kind": "method",
+              "name": "_ensureBaseStyles",
+              "privacy": "private",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "root",
+                  "type": {
+                    "text": "Document | ShadowRoot"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "lightDismiss",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Bottom sheets light-dismiss by default.\n\nSet `light-dismiss=\"false\"` as a property from JavaScript when a sheet must\nbe closed only by explicit actions.",
+              "attribute": "light-dismiss"
+            },
+            {
+              "kind": "field",
+              "name": "resize",
+              "type": {
+                "text": "ResizeDirection"
+              },
+              "default": "'vertical'",
+              "description": "Bottom sheets resize vertically from the top edge by default.",
+              "attribute": "resize",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "resizeOrigin",
+              "type": {
+                "text": "ResizeOrigin"
+              },
+              "default": "'top'",
+              "description": "Top-origin resizing keeps the sheet docked to the viewport bottom.",
+              "attribute": "resize-origin"
+            },
+            {
+              "kind": "field",
+              "name": "resizeHandle",
+              "type": {
+                "text": "string"
+              },
+              "default": "'[data-rc-bottom-sheet-handle]'",
+              "description": "Default optional handle selector. Falls back to top-edge resize when absent.",
+              "attribute": "resize-handle"
+            },
+            {
+              "kind": "field",
+              "name": "snapPoints",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Whitespace-separated CSS heights in ascending order.\n\nEach height becomes an addressable snap target. Slow releases choose the\nnearest target, while decisive swipes choose the first or last target.",
+              "attribute": "snap-points"
+            },
+            {
+              "kind": "field",
+              "name": "swipeDismiss",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Whether a downward pointer resize of at least 96 pixels requests close.\n\nWhen false, a decisive downward swipe settles at the first snap point.",
+              "attribute": "swipe-dismiss"
+            },
+            {
+              "kind": "field",
+              "name": "swipeVelocity",
+              "type": {
+                "text": "number"
+              },
+              "default": "500",
+              "description": "Minimum release velocity, in pixels per second, that counts as a decisive\nswipe rather than a slow deliberate drag. A swipe jumps straight to the\nextreme `snap-points` entry in its direction; below this, the release\nsettles to the nearest point instead.",
+              "attribute": "swipe-velocity"
+            },
+            {
+              "kind": "field",
+              "name": "_reducedMotion",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_activeSnapAnimation",
+              "type": {
+                "text": "Animation | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "method",
+              "name": "snapTo",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "zero-based index into `snapPoints`"
+                },
+                {
+                  "name": "behavior",
+                  "default": "'animated'",
+                  "type": {
+                    "text": "'animated' | 'instant'"
+                  },
+                  "description": "whether to animate the movement"
+                }
+              ],
+              "description": "Snaps to a declared target by zero-based index.\n\nFinite fractional indices are truncated and out-of-range indices clamp to\nthe nearest endpoint. Non-finite indices and calls without valid snap\npoints have no effect."
+            },
+            {
+              "kind": "method",
+              "name": "_onResizeEnd",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "detail",
+                  "type": {
+                    "text": "ResizeLifecycleDetail"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_shouldSwipeDismiss",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "detail",
+                  "type": {
+                    "text": "ResizeLifecycleDetail"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_snapToNearestPoint",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "trigger",
+                  "default": "'api'",
+                  "type": {
+                    "text": "'drag' | 'api'"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_snapToIndex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "behavior",
+                  "type": {
+                    "text": "'animated' | 'instant'"
+                  }
+                },
+                {
+                  "name": "trigger",
+                  "type": {
+                    "text": "'drag' | 'api'"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_applySnap",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "$dialog",
+                  "type": {
+                    "text": "HTMLDialogElement"
+                  }
+                },
+                {
+                  "name": "top",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "height",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "behavior",
+                  "type": {
+                    "text": "'animated' | 'instant'"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_snapDuration",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "$dialog",
+                  "type": {
+                    "text": "HTMLDialogElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_snapEasing",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "$dialog",
+                  "type": {
+                    "text": "HTMLDialogElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_resolvedSnapPoints",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number[]"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_resolveSnapPoint",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "point",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "rc-bottom-sheet-snap",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fires when a drag release or `snapTo()` call selects a snap target. `detail: { index, height, trigger }`"
+            },
+            {
+              "description": "Inherited from `rc-dialog`; fired when the sheet opens.",
+              "name": "rc-dialog-open"
+            },
+            {
+              "description": "Inherited from `rc-dialog`; fired when user/native interaction changes open state.",
+              "name": "rc-dialog-toggle"
+            },
+            {
+              "description": "Inherited from `rc-dialog`; cancelable close request.",
+              "name": "rc-dialog-request-close"
+            },
+            {
+              "description": "Inherited from `rc-dialog`; backward-compatible cancel alias.",
+              "name": "rc-dialog-cancel"
+            },
+            {
+              "description": "Inherited from `rc-dialog`; fired after the sheet closes.",
+              "name": "rc-dialog-close"
+            }
+          ],
+          "attributes": [
+            {
+              "description": "Bottom sheets light-dismiss by default.\n\nSet `light-dismiss=\"false\"` as a property from JavaScript when a sheet must\nbe closed only by explicit actions.",
+              "name": "light-dismiss",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "fieldName": "lightDismiss"
+            },
+            {
+              "description": "Bottom sheets resize vertically from the top edge by default.",
+              "name": "resize",
+              "type": {
+                "text": "ResizeDirection"
+              },
+              "default": "'vertical'",
+              "fieldName": "resize"
+            },
+            {
+              "description": "Top-origin resizing keeps the sheet docked to the viewport bottom.",
+              "name": "resize-origin",
+              "type": {
+                "text": "ResizeOrigin"
+              },
+              "default": "'top'",
+              "fieldName": "resizeOrigin"
+            },
+            {
+              "description": "Default optional handle selector. Falls back to top-edge resize when absent.",
+              "name": "resize-handle",
+              "type": {
+                "text": "string"
+              },
+              "default": "'[data-rc-bottom-sheet-handle]'",
+              "fieldName": "resizeHandle"
+            },
+            {
+              "description": "Whitespace-separated CSS heights in ascending order.\n\nEach height becomes an addressable snap target. Slow releases choose the\nnearest target, while decisive swipes choose the first or last target.",
+              "name": "snap-points",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "snapPoints"
+            },
+            {
+              "description": "Whether a downward pointer resize of at least 96 pixels requests close.\n\nWhen false, a decisive downward swipe settles at the first snap point.",
+              "name": "swipe-dismiss",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "fieldName": "swipeDismiss"
+            },
+            {
+              "description": "Minimum release velocity, in pixels per second, that counts as a decisive\nswipe rather than a slow deliberate drag. A swipe jumps straight to the\nextreme `snap-points` entry in its direction; below this, the release\nsettles to the nearest point instead.",
+              "name": "swipe-velocity",
+              "type": {
+                "text": "number"
+              },
+              "default": "500",
+              "fieldName": "swipeVelocity"
+            }
+          ],
+          "superclass": {
+            "name": "RCDialog",
+            "package": "@rcarls/rc-dialog"
+          },
+          "tagName": "rc-bottom-sheet",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RCBottomSheet",
+          "declaration": {
+            "name": "RCBottomSheet",
+            "module": "src/rc-bottom-sheet.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "RCBottomSheet",
+            "module": "src/rc-bottom-sheet.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/rc-bottom-sheet-DbzpQjd0.js

@@ -0,0 +1,215 @@
+import { property as h } from "lit/decorators.js";
+import { RCDialog as b } from "@rcarls/rc-dialog";
+import { findExtremeSnapIndex as g, findNearestSnapIndex as y, pinElementBox as v } from "@rcarls/rc-common";
+var _ = Object.defineProperty, c = (l, t, e, n) => {
+  for (var i = void 0, s = l.length - 1, o; s >= 0; s--)
+    (o = l[s]) && (i = o(t, e, i) || i);
+  return i && _(t, e, i), i;
+};
+const f = 300, S = "cubic-bezier(0.4, 0, 0.2, 1)", x = `
+@layer rc-base {
+  rc-bottom-sheet > dialog {
+    position: var(--rc-bottom-sheet-position, fixed);
+    inset-block-start: auto;
+    inset-block-end: var(--rc-bottom-sheet-inset-block-end, 0px);
+    inset-inline: var(--rc-bottom-sheet-inset-inline, 0px);
+    box-sizing: border-box;
+    inline-size: 100%;
+    max-inline-size: var(--rc-bottom-sheet-max-inline-size, 40rem);
+    max-block-size: var(--rc-bottom-sheet-max-block-size, 70dvh);
+    margin-block: 0;
+    margin-inline: auto;
+    overflow: auto;
+  }
+
+  rc-bottom-sheet > dialog [data-rc-bottom-sheet-handle] {
+    box-sizing: border-box;
+    cursor: ns-resize;
+    touch-action: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  rc-bottom-sheet > dialog > [data-rc-bottom-sheet-handle] {
+    position: relative;
+    display: block;
+    inline-size: var(--rc-bottom-sheet-handle-target-inline-size, 100%);
+    min-block-size: var(--rc-bottom-sheet-handle-target-block-size, 3rem);
+    margin: var(--rc-bottom-sheet-handle-target-margin, 0);
+    padding: 0;
+    border: 0;
+    border-radius: inherit;
+    background: transparent;
+    appearance: none;
+  }
+
+  rc-bottom-sheet > dialog > [data-rc-bottom-sheet-handle]::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    inline-size: var(--rc-bottom-sheet-handle-inline-size, 2rem);
+    block-size: var(--rc-bottom-sheet-handle-block-size, 0.25rem);
+    border-radius: var(--rc-bottom-sheet-handle-radius, 999px);
+    background: var(--rc-bottom-sheet-handle-color, GrayText);
+    translate: -50% -50%;
+  }
+
+  rc-bottom-sheet > dialog [data-rc-bottom-sheet-handle]:focus-visible {
+    outline: auto;
+    outline-offset: -0.25rem;
+  }
+}
+`, z = 24;
+var r;
+const a = (r = class extends b {
+  constructor() {
+    super(...arguments), this.lightDismiss = !0, this.resize = "vertical", this.resizeOrigin = "top", this.resizeHandle = "[data-rc-bottom-sheet-handle]", this.snapPoints = "", this.swipeDismiss = !0, this.swipeVelocity = 500, this._reducedMotion = typeof window < "u" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null, this._activeSnapAnimation = null;
+  }
+  static _ensureBaseStyles(t) {
+    if (r._styledRoots.has(t))
+      return;
+    r._styledRoots.add(t);
+    const e = document.createElement("style");
+    e.setAttribute("data-rc-light-dom-base", "rc-bottom-sheet"), e.textContent = x, t instanceof Document ? t.head.append(e) : t.append(e);
+  }
+  connectedCallback() {
+    super.connectedCallback(), r._ensureBaseStyles(this.getRootNode());
+  }
+  /**
+   * Snaps to a declared target by zero-based index.
+   *
+   * Finite fractional indices are truncated and out-of-range indices clamp to
+   * the nearest endpoint. Non-finite indices and calls without valid snap
+   * points have no effect.
+   *
+   * @param index - zero-based index into `snapPoints`
+   * @param behavior - whether to animate the movement
+   *
+   * @example
+   * const sheet = document.querySelector('rc-bottom-sheet');
+   * sheet.snapTo(1);
+   */
+  snapTo(t, e = "animated") {
+    Number.isFinite(t) && this._snapToIndex(Math.trunc(t), e, "api");
+  }
+  _onResizeEnd(t) {
+    if (t.inputType === "pointer" && this.swipeDismiss && this._shouldSwipeDismiss(t)) {
+      this.requestClose();
+      return;
+    }
+    const e = this._resolvedSnapPoints(), n = t.edge.includes("n") ? -t.velocityY : t.velocityY, i = Math.abs(t.height - t.startHeight);
+    if (t.inputType === "pointer" && e.length > 0 && i >= z && Math.abs(n) >= this.swipeVelocity) {
+      const s = g(e, n > 0 ? 1 : -1);
+      this._snapToIndex(s, "animated", "drag");
+      return;
+    }
+    this._snapToNearestPoint("drag");
+  }
+  _shouldSwipeDismiss(t) {
+    return t.edge.includes("n") && t.startHeight - t.height >= r.swipeDismissThreshold;
+  }
+  _snapToNearestPoint(t = "api") {
+    const e = this._$dialog, n = this._resolvedSnapPoints();
+    if (!e || n.length === 0)
+      return;
+    const i = e.getBoundingClientRect().height, s = y(n, i);
+    this._snapToIndex(s, "animated", t);
+  }
+  _snapToIndex(t, e, n) {
+    const i = this._$dialog, s = this._resolvedSnapPoints();
+    if (!i || s.length === 0)
+      return;
+    const o = v(i), d = Math.max(0, Math.min(t, s.length - 1)), m = s[d];
+    this._activeSnapAnimation?.cancel(), this._activeSnapAnimation = null, i.style.height = `${m}px`;
+    const p = i.getBoundingClientRect().height;
+    i.style.top = `${o.top}px`, i.style.height = `${o.height}px`;
+    const u = o.bottom - p;
+    this._applySnap(i, u, p, e), this.dispatchEvent(
+      new CustomEvent("rc-bottom-sheet-snap", {
+        bubbles: !0,
+        composed: !0,
+        detail: { index: d, height: p, trigger: n }
+      })
+    );
+  }
+  _applySnap(t, e, n, i) {
+    const s = t.getBoundingClientRect();
+    if (this._activeSnapAnimation?.cancel(), this._activeSnapAnimation = null, i === "instant" || this._reducedMotion?.matches) {
+      t.style.top = `${e}px`, t.style.height = `${n}px`;
+      return;
+    }
+    if (s.top === e && s.height === n)
+      return;
+    const o = t.animate(
+      [
+        { top: `${s.top}px`, height: `${s.height}px` },
+        { top: `${e}px`, height: `${n}px` }
+      ],
+      {
+        duration: this._snapDuration(t),
+        easing: this._snapEasing(t),
+        fill: "forwards"
+      }
+    );
+    this._activeSnapAnimation = o, o.finished.then(() => o.commitStyles()).catch(() => {
+    }).finally(() => {
+      o.cancel(), this._activeSnapAnimation === o && (this._activeSnapAnimation = null);
+    });
+  }
+  _snapDuration(t) {
+    const e = getComputedStyle(t).getPropertyValue("--rc-bottom-sheet-snap-duration").trim(), n = Number.parseFloat(e);
+    return Number.isFinite(n) ? n : f;
+  }
+  _snapEasing(t) {
+    return getComputedStyle(t).getPropertyValue("--rc-bottom-sheet-snap-easing").trim() || S;
+  }
+  _resolvedSnapPoints() {
+    return this.snapPoints.trim() ? this.snapPoints.trim().split(/\s+/).map((t) => this._resolveSnapPoint(t)).filter((t) => Number.isFinite(t) && t > 0) : [];
+  }
+  _resolveSnapPoint(t) {
+    const e = Number.parseFloat(t);
+    if (!Number.isFinite(e))
+      return Number.NaN;
+    if (t.endsWith("%"))
+      return window.innerHeight * (e / 100);
+    if (t.endsWith("px") || String(e) === t)
+      return e;
+    const n = document.createElement("div");
+    Object.assign(n.style, {
+      position: "fixed",
+      visibility: "hidden",
+      pointerEvents: "none",
+      blockSize: t,
+      inlineSize: "0",
+      inset: "0 auto auto 0"
+    }), document.body.append(n);
+    const i = n.getBoundingClientRect().height;
+    return n.remove(), i;
+  }
+}, r.swipeDismissThreshold = 96, r._styledRoots = /* @__PURE__ */ new Set(), r);
+c([
+  h({ type: Boolean, attribute: "light-dismiss" })
+], a.prototype, "lightDismiss");
+c([
+  h({ type: String, reflect: !0 })
+], a.prototype, "resize");
+c([
+  h({ type: String, attribute: "resize-origin" })
+], a.prototype, "resizeOrigin");
+c([
+  h({ type: String, attribute: "resize-handle" })
+], a.prototype, "resizeHandle");
+c([
+  h({ type: String, attribute: "snap-points" })
+], a.prototype, "snapPoints");
+c([
+  h({ type: Boolean, attribute: "swipe-dismiss" })
+], a.prototype, "swipeDismiss");
+c([
+  h({ type: Number, attribute: "swipe-velocity" })
+], a.prototype, "swipeVelocity");
+let k = a;
+export {
+  k as R
+};
+//# sourceMappingURL=rc-bottom-sheet-DbzpQjd0.js.map

package/dist/rc-bottom-sheet-DbzpQjd0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-bottom-sheet-DbzpQjd0.js","sources":["../src/rc-bottom-sheet.ts"],"sourcesContent":["import { property } from 'lit/decorators.js';\n\nimport { RCDialog } from '@rcarls/rc-dialog';\nimport {\n  findExtremeSnapIndex,\n  findNearestSnapIndex,\n  pinElementBox,\n  type ResizeDirection,\n  type ResizeLifecycleDetail,\n  type ResizeOrigin,\n} from '@rcarls/rc-common';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-bottom-sheet': RCBottomSheet;\n  }\n\n  interface HTMLElementEventMap {\n    'rc-bottom-sheet-snap': CustomEvent<RCBottomSheetSnapDetail>;\n  }\n}\n\n/** Detail shape for `rc-bottom-sheet-snap`. */\nexport interface RCBottomSheetSnapDetail {\n  /** Index into the resolved `snap-points` list selected as the target. */\n  index: number;\n\n  /** Effective target height in pixels, after CSS size constraints. */\n  height: number;\n\n  /** Whether the snap came from a drag release or a `snapTo()` call. */\n  trigger: 'drag' | 'api';\n}\n\nconst DEFAULT_SNAP_DURATION_MS = 300;\nconst DEFAULT_SNAP_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\nconst LIGHT_DOM_CSS = `\n@layer rc-base {\n  rc-bottom-sheet > dialog {\n    position: var(--rc-bottom-sheet-position, fixed);\n    inset-block-start: auto;\n    inset-block-end: var(--rc-bottom-sheet-inset-block-end, 0px);\n    inset-inline: var(--rc-bottom-sheet-inset-inline, 0px);\n    box-sizing: border-box;\n    inline-size: 100%;\n    max-inline-size: var(--rc-bottom-sheet-max-inline-size, 40rem);\n    max-block-size: var(--rc-bottom-sheet-max-block-size, 70dvh);\n    margin-block: 0;\n    margin-inline: auto;\n    overflow: auto;\n  }\n\n  rc-bottom-sheet > dialog [data-rc-bottom-sheet-handle] {\n    box-sizing: border-box;\n    cursor: ns-resize;\n    touch-action: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  rc-bottom-sheet > dialog > [data-rc-bottom-sheet-handle] {\n    position: relative;\n    display: block;\n    inline-size: var(--rc-bottom-sheet-handle-target-inline-size, 100%);\n    min-block-size: var(--rc-bottom-sheet-handle-target-block-size, 3rem);\n    margin: var(--rc-bottom-sheet-handle-target-margin, 0);\n    padding: 0;\n    border: 0;\n    border-radius: inherit;\n    background: transparent;\n    appearance: none;\n  }\n\n  rc-bottom-sheet > dialog > [data-rc-bottom-sheet-handle]::before {\n    content: '';\n    position: absolute;\n    inset-block-start: 50%;\n    inset-inline-start: 50%;\n    inline-size: var(--rc-bottom-sheet-handle-inline-size, 2rem);\n    block-size: var(--rc-bottom-sheet-handle-block-size, 0.25rem);\n    border-radius: var(--rc-bottom-sheet-handle-radius, 999px);\n    background: var(--rc-bottom-sheet-handle-color, GrayText);\n    translate: -50% -50%;\n  }\n\n  rc-bottom-sheet > dialog [data-rc-bottom-sheet-handle]:focus-visible {\n    outline: auto;\n    outline-offset: -0.25rem;\n  }\n}\n`;\n\n// Floor so a noisy near-zero-distance release can't misread as a decisive\n// fling; a real swipe travels at least this far even if it's very quick.\nconst MIN_SWIPE_DISTANCE = 24;\n\n/**\n * Modal bottom-sheet wrapper for a native `<dialog>`, built on `rc-dialog`.\n *\n * The direct child `<dialog>` remains the semantic dialog surface and owns\n * content, labels, and form behavior. `rc-bottom-sheet` supplies the same\n * open/close lifecycle, focus restoration, cancel/request-close events, and\n * light-dismiss affordance as `rc-dialog`. The component docks the sheet to\n * the viewport block-end by default, while themes provide its visual surface.\n *\n * Dragging the resize handle past a decisive velocity in either direction\n * (a \"swipe\" or \"fling,\" distinct from a slow deliberate drag) snaps\n * straight to the extreme `snap-points` entry in that direction — swipe up\n * to fully expand, swipe down to fully collapse — regardless of how close\n * the release position was to some other point. Below that velocity, the\n * sheet settles to whichever declared snap point is nearest the release\n * height. All settling, whether from a drag or from `snapTo()`, animates\n * over `--rc-bottom-sheet-snap-duration`, follows\n * `--rc-bottom-sheet-snap-easing`, and is skipped for\n * `prefers-reduced-motion: reduce`.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-bottom-sheet rc-bottom-sheet docs}\n * @see {@link https://m3.material.io/components/bottom-sheets/overview Material Design bottom sheets}\n *\n * @slot - Place a `<dialog>` element with the sheet content and optional\n *   `[data-rc-bottom-sheet-handle]` resize handle here.\n *\n * @fires rc-dialog-open - Inherited from `rc-dialog`; fired when the sheet opens.\n * @fires rc-dialog-toggle - Inherited from `rc-dialog`; fired when user/native interaction changes open state.\n * @fires rc-dialog-request-close - Inherited from `rc-dialog`; cancelable close request.\n * @fires rc-dialog-cancel - Inherited from `rc-dialog`; backward-compatible cancel alias.\n * @fires rc-dialog-close - Inherited from `rc-dialog`; fired after the sheet closes.\n * @fires rc-bottom-sheet-snap - Fires when a drag release or `snapTo()` call\n *   selects a snap target. `detail: { index, height, trigger }`\n *\n * @attr light-dismiss - When present, a click on the backdrop area calls `requestClose()`.\n *   Present by default; inherited from `rc-dialog`.\n * @attr resize - Enables edge resizing, mirroring the CSS `resize` property values.\n *   Defaults to `vertical`; inherited from `rc-dialog`.\n * @attr resize-origin - Origin for resize edge hit-testing or explicit handles. Defaults to\n *   `top`; inherited from `rc-dialog`.\n * @attr resize-handle - CSS selector, scoped to the inner `<dialog>`, for explicit resize\n *   handles. Defaults to `[data-rc-bottom-sheet-handle]`; inherited from `rc-dialog`.\n * @attr snap-points - Whitespace-separated CSS heights, in ascending order, addressable by\n *   `snapTo()` and settled to on drag release.\n * @attr swipe-dismiss - Whether a decisive downward swipe of at least 96 pixels requests close.\n * @attr swipe-velocity - Minimum release velocity, in pixels per second, that counts as a\n *   decisive swipe rather than a slow deliberate drag.\n *\n * @cssprop [--rc-bottom-sheet-bg=Canvas] - Sheet surface background.\n * @cssprop [--rc-bottom-sheet-color=CanvasText] - Sheet text color.\n * @cssprop [--rc-bottom-sheet-radius=1rem 1rem 0 0] - Sheet corner radius.\n * @cssprop [--rc-bottom-sheet-shadow=none] - Sheet elevation shadow.\n * @cssprop [--rc-bottom-sheet-position=fixed] - Positioning scheme. Use `absolute` with `show()` to dock a non-modal sheet to a positioned ancestor.\n * @cssprop [--rc-bottom-sheet-inset-block-end=0px] - Distance from the positioning container's block-end edge.\n * @cssprop [--rc-bottom-sheet-inset-inline=0px] - Inline-axis inset used with automatic margins.\n * @cssprop [--rc-bottom-sheet-max-inline-size=40rem] - Maximum sheet width.\n * @cssprop [--rc-bottom-sheet-max-block-size=70dvh] - Maximum sheet height.\n * @cssprop [--rc-bottom-sheet-padding=0 1rem 1rem] - Sheet padding.\n * @cssprop [--rc-bottom-sheet-scrim=var(--rc-dialog-scrim)] - Modal backdrop color.\n * @cssprop [--rc-bottom-sheet-handle-color=GrayText] - Resize handle color.\n * @cssprop [--rc-bottom-sheet-handle-inline-size=2rem] - Resize handle width.\n * @cssprop [--rc-bottom-sheet-handle-block-size=0.25rem] - Resize handle height.\n * @cssprop [--rc-bottom-sheet-handle-radius=999px] - Resize handle corner radius.\n * @cssprop [--rc-bottom-sheet-handle-target-inline-size=100%] - Pointer target width for a direct-child handle.\n * @cssprop [--rc-bottom-sheet-handle-target-block-size=3rem] - Pointer target height for a direct-child handle.\n * @cssprop [--rc-bottom-sheet-handle-target-margin=0] - Margin around a direct-child handle target.\n * @cssprop [--rc-bottom-sheet-snap-duration=300ms] - Duration of the settle animation\n *   after a drag release or `snapTo()` call.\n * @cssprop [--rc-bottom-sheet-snap-easing=cubic-bezier(0.4, 0, 0.2, 1)] - Easing\n *   for the settle animation after a drag release or `snapTo()` call.\n */\nexport class RCBottomSheet extends RCDialog {\n  private static readonly swipeDismissThreshold = 96;\n  private static readonly _styledRoots = new Set<Document | ShadowRoot>();\n\n  private static _ensureBaseStyles(root: Document | ShadowRoot): void {\n    if (RCBottomSheet._styledRoots.has(root)) {\n      return;\n    }\n\n    RCBottomSheet._styledRoots.add(root);\n\n    const $style = document.createElement('style');\n\n    $style.setAttribute('data-rc-light-dom-base', 'rc-bottom-sheet');\n    $style.textContent = LIGHT_DOM_CSS;\n\n    if (root instanceof Document) {\n      root.head.append($style);\n    } else {\n      root.append($style);\n    }\n  }\n\n  /**\n   * Bottom sheets light-dismiss by default.\n   *\n   * Set `light-dismiss=\"false\"` as a property from JavaScript when a sheet must\n   * be closed only by explicit actions.\n   */\n  @property({ type: Boolean, attribute: 'light-dismiss' })\n  override lightDismiss = true;\n\n  /** Bottom sheets resize vertically from the top edge by default. */\n  @property({ type: String, reflect: true })\n  override resize: ResizeDirection = 'vertical';\n\n  /** Top-origin resizing keeps the sheet docked to the viewport bottom. */\n  @property({ type: String, attribute: 'resize-origin' })\n  override resizeOrigin: ResizeOrigin = 'top';\n\n  /** Default optional handle selector. Falls back to top-edge resize when absent. */\n  @property({ type: String, attribute: 'resize-handle' })\n  override resizeHandle = '[data-rc-bottom-sheet-handle]';\n\n  /**\n   * Whitespace-separated CSS heights in ascending order.\n   *\n   * Each height becomes an addressable snap target. Slow releases choose the\n   * nearest target, while decisive swipes choose the first or last target.\n   */\n  @property({ type: String, attribute: 'snap-points' })\n  snapPoints = '';\n\n  /**\n   * Whether a downward pointer resize of at least 96 pixels requests close.\n   *\n   * When false, a decisive downward swipe settles at the first snap point.\n   */\n  @property({ type: Boolean, attribute: 'swipe-dismiss' })\n  swipeDismiss = true;\n\n  /**\n   * Minimum release velocity, in pixels per second, that counts as a decisive\n   * swipe rather than a slow deliberate drag. A swipe jumps straight to the\n   * extreme `snap-points` entry in its direction; below this, the release\n   * settles to the nearest point instead.\n   */\n  @property({ type: Number, attribute: 'swipe-velocity' })\n  swipeVelocity = 500;\n\n  private readonly _reducedMotion =\n    typeof window !== 'undefined' ? window.matchMedia('(prefers-reduced-motion: reduce)') : null;\n\n  private _activeSnapAnimation: Animation | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    RCBottomSheet._ensureBaseStyles(this.getRootNode() as Document | ShadowRoot);\n  }\n\n  /**\n   * Snaps to a declared target by zero-based index.\n   *\n   * Finite fractional indices are truncated and out-of-range indices clamp to\n   * the nearest endpoint. Non-finite indices and calls without valid snap\n   * points have no effect.\n   *\n   * @param index - zero-based index into `snapPoints`\n   * @param behavior - whether to animate the movement\n   *\n   * @example\n   * const sheet = document.querySelector('rc-bottom-sheet');\n   * sheet.snapTo(1);\n   */\n  snapTo(index: number, behavior: 'animated' | 'instant' = 'animated'): void {\n    if (!Number.isFinite(index)) {\n      return;\n    }\n\n    this._snapToIndex(Math.trunc(index), behavior, 'api');\n  }\n\n  protected override _onResizeEnd(detail: ResizeLifecycleDetail): void {\n    if (detail.inputType === 'pointer' && this.swipeDismiss && this._shouldSwipeDismiss(detail)) {\n      this.requestClose();\n\n      return;\n    }\n\n    const points = this._resolvedSnapPoints();\n    const velocity = detail.edge.includes('n') ? -detail.velocityY : detail.velocityY;\n    const distance = Math.abs(detail.height - detail.startHeight);\n\n    if (\n      detail.inputType === 'pointer' &&\n      points.length > 0 &&\n      distance >= MIN_SWIPE_DISTANCE &&\n      Math.abs(velocity) >= this.swipeVelocity\n    ) {\n      // Decisive fling: jump to the extreme point in the swipe direction,\n      // regardless of proximity to some other point. Height grows as the\n      // sheet is dragged upward, so a positive velocity is a swipe up.\n      const targetIndex = findExtremeSnapIndex(points, velocity > 0 ? 1 : -1);\n\n      this._snapToIndex(targetIndex, 'animated', 'drag');\n\n      return;\n    }\n\n    this._snapToNearestPoint('drag');\n  }\n\n  private _shouldSwipeDismiss(detail: ResizeLifecycleDetail): boolean {\n    return (\n      detail.edge.includes('n') &&\n      detail.startHeight - detail.height >= RCBottomSheet.swipeDismissThreshold\n    );\n  }\n\n  private _snapToNearestPoint(trigger: 'drag' | 'api' = 'api'): void {\n    const $dialog = this._$dialog;\n    const points = this._resolvedSnapPoints();\n\n    if (!$dialog || points.length === 0) {\n      return;\n    }\n\n    const height = $dialog.getBoundingClientRect().height;\n    const nearestIndex = findNearestSnapIndex(points, height);\n\n    this._snapToIndex(nearestIndex, 'animated', trigger);\n  }\n\n  private _snapToIndex(\n    index: number,\n    behavior: 'animated' | 'instant',\n    trigger: 'drag' | 'api',\n  ): void {\n    const $dialog = this._$dialog;\n    const points = this._resolvedSnapPoints();\n\n    if (!$dialog || points.length === 0) {\n      return;\n    }\n\n    // Pinning (border-box, explicit left/top/width/height) is normally\n    // established by the first drag gesture; snapTo() must do the same so a\n    // sheet that has never been dragged still measures and sets height\n    // consistently.\n    const rect = pinElementBox($dialog);\n    const clampedIndex = Math.max(0, Math.min(index, points.length - 1));\n    const requestedHeight = points[clampedIndex];\n\n    // An in-flight animation wins over inline geometry in the cascade. Pin\n    // its current visual box before cancelling so the constrained target can\n    // be measured without jumping back to the prior snap point.\n    this._activeSnapAnimation?.cancel();\n    this._activeSnapAnimation = null;\n\n    $dialog.style.height = `${requestedHeight}px`;\n\n    const targetHeight = $dialog.getBoundingClientRect().height;\n\n    // Restore the current visual box before applying or animating the target.\n    // CSS min/max block-size can make targetHeight differ from the authored\n    // snap point; anchoring from the effective height keeps the block-end edge\n    // fixed in either case.\n    $dialog.style.top = `${rect.top}px`;\n    $dialog.style.height = `${rect.height}px`;\n\n    const targetTop = rect.bottom - targetHeight;\n\n    this._applySnap($dialog, targetTop, targetHeight, behavior);\n\n    this.dispatchEvent(\n      new CustomEvent<RCBottomSheetSnapDetail>('rc-bottom-sheet-snap', {\n        bubbles: true,\n        composed: true,\n        detail: { index: clampedIndex, height: targetHeight, trigger },\n      }),\n    );\n  }\n\n  private _applySnap(\n    $dialog: HTMLDialogElement,\n    top: number,\n    height: number,\n    behavior: 'animated' | 'instant',\n  ): void {\n    // Measure before cancelling any in-flight animation. `_snapToIndex()`\n    // normally pins and cancels first, while this ordering also keeps direct\n    // calls robust if applying a snap is refactored later.\n    const fromRect = $dialog.getBoundingClientRect();\n\n    this._activeSnapAnimation?.cancel();\n    this._activeSnapAnimation = null;\n\n    if (behavior === 'instant' || this._reducedMotion?.matches) {\n      $dialog.style.top = `${top}px`;\n      $dialog.style.height = `${height}px`;\n\n      return;\n    }\n\n    if (fromRect.top === top && fromRect.height === height) {\n      return;\n    }\n\n    const animation = $dialog.animate(\n      [\n        { top: `${fromRect.top}px`, height: `${fromRect.height}px` },\n        { top: `${top}px`, height: `${height}px` },\n      ],\n      {\n        duration: this._snapDuration($dialog),\n        easing: this._snapEasing($dialog),\n        fill: 'forwards',\n      },\n    );\n\n    this._activeSnapAnimation = animation;\n\n    animation.finished\n      .then(() => animation.commitStyles())\n      .catch(() => {\n        // Interrupted by a newer gesture or snapTo() call, which owns applying\n        // its own final styles.\n      })\n      .finally(() => {\n        animation.cancel();\n\n        if (this._activeSnapAnimation === animation) {\n          this._activeSnapAnimation = null;\n        }\n      });\n  }\n\n  private _snapDuration($dialog: HTMLDialogElement): number {\n    const raw = getComputedStyle($dialog)\n      .getPropertyValue('--rc-bottom-sheet-snap-duration')\n      .trim();\n    const parsed = Number.parseFloat(raw);\n\n    return Number.isFinite(parsed) ? parsed : DEFAULT_SNAP_DURATION_MS;\n  }\n\n  private _snapEasing($dialog: HTMLDialogElement): string {\n    return (\n      getComputedStyle($dialog).getPropertyValue('--rc-bottom-sheet-snap-easing').trim() ||\n      DEFAULT_SNAP_EASING\n    );\n  }\n\n  private _resolvedSnapPoints(): number[] {\n    if (!this.snapPoints.trim()) {\n      return [];\n    }\n\n    return this.snapPoints\n      .trim()\n      .split(/\\s+/)\n      .map((point) => this._resolveSnapPoint(point))\n      .filter((point): point is number => Number.isFinite(point) && point > 0);\n  }\n\n  private _resolveSnapPoint(point: string): number {\n    const numeric = Number.parseFloat(point);\n\n    if (!Number.isFinite(numeric)) {\n      return Number.NaN;\n    }\n\n    if (point.endsWith('%')) {\n      return window.innerHeight * (numeric / 100);\n    }\n\n    if (point.endsWith('px') || String(numeric) === point) {\n      return numeric;\n    }\n\n    const probe = document.createElement('div');\n\n    Object.assign(probe.style, {\n      position: 'fixed',\n      visibility: 'hidden',\n      pointerEvents: 'none',\n      blockSize: point,\n      inlineSize: '0',\n      inset: '0 auto auto 0',\n    });\n\n    document.body.append(probe);\n\n    const height = probe.getBoundingClientRect().height;\n\n    probe.remove();\n\n    return height;\n  }\n}\n\nexport default RCBottomSheet;\n"],"names":["DEFAULT_SNAP_DURATION_MS","DEFAULT_SNAP_EASING","LIGHT_DOM_CSS","MIN_SWIPE_DISTANCE","_RCBottomSheet","_a","RCDialog","root","$style","index","behavior","detail","points","velocity","distance","targetIndex","findExtremeSnapIndex","trigger","$dialog","height","nearestIndex","findNearestSnapIndex","rect","pinElementBox","clampedIndex","requestedHeight","targetHeight","targetTop","top","fromRect","animation","raw","parsed","point","numeric","probe","__decorateClass","property","RCBottomSheet"],"mappings":"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"}

package/dist/rc-bottom-sheet-define.js

@@ -0,0 +1,6 @@
+import { R as t } from "./rc-bottom-sheet-DbzpQjd0.js";
+customElements.get("rc-bottom-sheet") || customElements.define("rc-bottom-sheet", t);
+export {
+  t as RCBottomSheet
+};
+//# sourceMappingURL=rc-bottom-sheet-define.js.map

package/dist/rc-bottom-sheet-define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-bottom-sheet-define.js","sources":["../src/define.ts"],"sourcesContent":["import { RCBottomSheet } from './index.js';\n\ncustomElements.get('rc-bottom-sheet') || customElements.define('rc-bottom-sheet', RCBottomSheet);\n\nexport * from './index.js';\n"],"names":["RCBottomSheet"],"mappings":";AAEA,eAAe,IAAI,iBAAiB,KAAK,eAAe,OAAO,mBAAmBA,CAAa;"}

package/dist/rc-bottom-sheet.js

@@ -0,0 +1,5 @@
+import { R as e } from "./rc-bottom-sheet-DbzpQjd0.js";
+export {
+  e as RCBottomSheet
+};
+//# sourceMappingURL=rc-bottom-sheet.js.map

package/dist/rc-bottom-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-bottom-sheet.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/types/packages/rc-bottom-sheet/src/define.d.ts

@@ -0,0 +1 @@
+export * from './index.js';

package/dist/types/packages/rc-bottom-sheet/src/index.d.ts

@@ -0,0 +1 @@
+export * from './rc-bottom-sheet.js';

package/dist/types/packages/rc-bottom-sheet/src/rc-bottom-sheet.d.ts

@@ -0,0 +1,156 @@
+import { RCDialog } from '@rcarls/rc-dialog';
+import { ResizeDirection, ResizeLifecycleDetail, ResizeOrigin } from '@rcarls/rc-common';
+declare global {
+    interface HTMLElementTagNameMap {
+        'rc-bottom-sheet': RCBottomSheet;
+    }
+    interface HTMLElementEventMap {
+        'rc-bottom-sheet-snap': CustomEvent<RCBottomSheetSnapDetail>;
+    }
+}
+/** Detail shape for `rc-bottom-sheet-snap`. */
+export interface RCBottomSheetSnapDetail {
+    /** Index into the resolved `snap-points` list selected as the target. */
+    index: number;
+    /** Effective target height in pixels, after CSS size constraints. */
+    height: number;
+    /** Whether the snap came from a drag release or a `snapTo()` call. */
+    trigger: 'drag' | 'api';
+}
+/**
+ * Modal bottom-sheet wrapper for a native `<dialog>`, built on `rc-dialog`.
+ *
+ * The direct child `<dialog>` remains the semantic dialog surface and owns
+ * content, labels, and form behavior. `rc-bottom-sheet` supplies the same
+ * open/close lifecycle, focus restoration, cancel/request-close events, and
+ * light-dismiss affordance as `rc-dialog`. The component docks the sheet to
+ * the viewport block-end by default, while themes provide its visual surface.
+ *
+ * Dragging the resize handle past a decisive velocity in either direction
+ * (a "swipe" or "fling," distinct from a slow deliberate drag) snaps
+ * straight to the extreme `snap-points` entry in that direction — swipe up
+ * to fully expand, swipe down to fully collapse — regardless of how close
+ * the release position was to some other point. Below that velocity, the
+ * sheet settles to whichever declared snap point is nearest the release
+ * height. All settling, whether from a drag or from `snapTo()`, animates
+ * over `--rc-bottom-sheet-snap-duration`, follows
+ * `--rc-bottom-sheet-snap-easing`, and is skipped for
+ * `prefers-reduced-motion: reduce`.
+ *
+ * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-bottom-sheet rc-bottom-sheet docs}
+ * @see {@link https://m3.material.io/components/bottom-sheets/overview Material Design bottom sheets}
+ *
+ * @slot - Place a `<dialog>` element with the sheet content and optional
+ *   `[data-rc-bottom-sheet-handle]` resize handle here.
+ *
+ * @fires rc-dialog-open - Inherited from `rc-dialog`; fired when the sheet opens.
+ * @fires rc-dialog-toggle - Inherited from `rc-dialog`; fired when user/native interaction changes open state.
+ * @fires rc-dialog-request-close - Inherited from `rc-dialog`; cancelable close request.
+ * @fires rc-dialog-cancel - Inherited from `rc-dialog`; backward-compatible cancel alias.
+ * @fires rc-dialog-close - Inherited from `rc-dialog`; fired after the sheet closes.
+ * @fires rc-bottom-sheet-snap - Fires when a drag release or `snapTo()` call
+ *   selects a snap target. `detail: { index, height, trigger }`
+ *
+ * @attr light-dismiss - When present, a click on the backdrop area calls `requestClose()`.
+ *   Present by default; inherited from `rc-dialog`.
+ * @attr resize - Enables edge resizing, mirroring the CSS `resize` property values.
+ *   Defaults to `vertical`; inherited from `rc-dialog`.
+ * @attr resize-origin - Origin for resize edge hit-testing or explicit handles. Defaults to
+ *   `top`; inherited from `rc-dialog`.
+ * @attr resize-handle - CSS selector, scoped to the inner `<dialog>`, for explicit resize
+ *   handles. Defaults to `[data-rc-bottom-sheet-handle]`; inherited from `rc-dialog`.
+ * @attr snap-points - Whitespace-separated CSS heights, in ascending order, addressable by
+ *   `snapTo()` and settled to on drag release.
+ * @attr swipe-dismiss - Whether a decisive downward swipe of at least 96 pixels requests close.
+ * @attr swipe-velocity - Minimum release velocity, in pixels per second, that counts as a
+ *   decisive swipe rather than a slow deliberate drag.
+ *
+ * @cssprop [--rc-bottom-sheet-bg=Canvas] - Sheet surface background.
+ * @cssprop [--rc-bottom-sheet-color=CanvasText] - Sheet text color.
+ * @cssprop [--rc-bottom-sheet-radius=1rem 1rem 0 0] - Sheet corner radius.
+ * @cssprop [--rc-bottom-sheet-shadow=none] - Sheet elevation shadow.
+ * @cssprop [--rc-bottom-sheet-position=fixed] - Positioning scheme. Use `absolute` with `show()` to dock a non-modal sheet to a positioned ancestor.
+ * @cssprop [--rc-bottom-sheet-inset-block-end=0px] - Distance from the positioning container's block-end edge.
+ * @cssprop [--rc-bottom-sheet-inset-inline=0px] - Inline-axis inset used with automatic margins.
+ * @cssprop [--rc-bottom-sheet-max-inline-size=40rem] - Maximum sheet width.
+ * @cssprop [--rc-bottom-sheet-max-block-size=70dvh] - Maximum sheet height.
+ * @cssprop [--rc-bottom-sheet-padding=0 1rem 1rem] - Sheet padding.
+ * @cssprop [--rc-bottom-sheet-scrim=var(--rc-dialog-scrim)] - Modal backdrop color.
+ * @cssprop [--rc-bottom-sheet-handle-color=GrayText] - Resize handle color.
+ * @cssprop [--rc-bottom-sheet-handle-inline-size=2rem] - Resize handle width.
+ * @cssprop [--rc-bottom-sheet-handle-block-size=0.25rem] - Resize handle height.
+ * @cssprop [--rc-bottom-sheet-handle-radius=999px] - Resize handle corner radius.
+ * @cssprop [--rc-bottom-sheet-handle-target-inline-size=100%] - Pointer target width for a direct-child handle.
+ * @cssprop [--rc-bottom-sheet-handle-target-block-size=3rem] - Pointer target height for a direct-child handle.
+ * @cssprop [--rc-bottom-sheet-handle-target-margin=0] - Margin around a direct-child handle target.
+ * @cssprop [--rc-bottom-sheet-snap-duration=300ms] - Duration of the settle animation
+ *   after a drag release or `snapTo()` call.
+ * @cssprop [--rc-bottom-sheet-snap-easing=cubic-bezier(0.4, 0, 0.2, 1)] - Easing
+ *   for the settle animation after a drag release or `snapTo()` call.
+ */
+export declare class RCBottomSheet extends RCDialog {
+    private static readonly swipeDismissThreshold;
+    private static readonly _styledRoots;
+    private static _ensureBaseStyles;
+    /**
+     * Bottom sheets light-dismiss by default.
+     *
+     * Set `light-dismiss="false"` as a property from JavaScript when a sheet must
+     * be closed only by explicit actions.
+     */
+    lightDismiss: boolean;
+    /** Bottom sheets resize vertically from the top edge by default. */
+    resize: ResizeDirection;
+    /** Top-origin resizing keeps the sheet docked to the viewport bottom. */
+    resizeOrigin: ResizeOrigin;
+    /** Default optional handle selector. Falls back to top-edge resize when absent. */
+    resizeHandle: string;
+    /**
+     * Whitespace-separated CSS heights in ascending order.
+     *
+     * Each height becomes an addressable snap target. Slow releases choose the
+     * nearest target, while decisive swipes choose the first or last target.
+     */
+    snapPoints: string;
+    /**
+     * Whether a downward pointer resize of at least 96 pixels requests close.
+     *
+     * When false, a decisive downward swipe settles at the first snap point.
+     */
+    swipeDismiss: boolean;
+    /**
+     * Minimum release velocity, in pixels per second, that counts as a decisive
+     * swipe rather than a slow deliberate drag. A swipe jumps straight to the
+     * extreme `snap-points` entry in its direction; below this, the release
+     * settles to the nearest point instead.
+     */
+    swipeVelocity: number;
+    private readonly _reducedMotion;
+    private _activeSnapAnimation;
+    connectedCallback(): void;
+    /**
+     * Snaps to a declared target by zero-based index.
+     *
+     * Finite fractional indices are truncated and out-of-range indices clamp to
+     * the nearest endpoint. Non-finite indices and calls without valid snap
+     * points have no effect.
+     *
+     * @param index - zero-based index into `snapPoints`
+     * @param behavior - whether to animate the movement
+     *
+     * @example
+     * const sheet = document.querySelector('rc-bottom-sheet');
+     * sheet.snapTo(1);
+     */
+    snapTo(index: number, behavior?: 'animated' | 'instant'): void;
+    protected _onResizeEnd(detail: ResizeLifecycleDetail): void;
+    private _shouldSwipeDismiss;
+    private _snapToNearestPoint;
+    private _snapToIndex;
+    private _applySnap;
+    private _snapDuration;
+    private _snapEasing;
+    private _resolvedSnapPoints;
+    private _resolveSnapPoint;
+}
+export default RCBottomSheet;

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@rcarls/rc-bottom-sheet",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.4.0",
+  "description": "Modal bottom-sheet wrapper for a native <dialog>.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
+    "directory": "packages/rc-bottom-sheet"
+  },
+  "homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-bottom-sheet",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/rc-bottom-sheet.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/packages/rc-bottom-sheet/src/index.d.ts",
+        "default": "./dist/rc-bottom-sheet.js"
+      }
+    },
+    "./define": {
+      "import": {
+        "types": "./dist/types/packages/rc-bottom-sheet/src/define.d.ts",
+        "default": "./dist/rc-bottom-sheet-define.js"
+      }
+    }
+  },
+  "types": "./dist/types/packages/rc-bottom-sheet/src/index.d.ts",
+  "sideEffects": [
+    "./dist/rc-bottom-sheet-define.js"
+  ],
+  "customElements": "dist/custom-elements.json",
+  "scripts": {
+    "build": "tsc && vite build && cem analyze",
+    "cem:analyze": "cem analyze",
+    "preview": "vite preview",
+    "test:browser": "vitest --run",
+    "test:browser:chrome": "vitest --run --project=chromium",
+    "test:browser:firefox": "vitest --run --project=firefox"
+  },
+  "dependencies": {
+    "@rcarls/rc-common": "workspace:*",
+    "@rcarls/rc-dialog": "workspace:*"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.11.0",
+    "@vitest/browser-playwright": "4.1.5",
+    "lit": "^3.0.0",
+    "playwright": "^1.56.0",
+    "rollup": "^4.60.2",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.6",
+    "vitest-browser-lit": "^1.0.1"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  }
+}