@plastic-js/tsumiki 0.1.69 → 0.1.71

package/dist/components/Dialog.js

@@ -122,7 +122,7 @@ var bodyClass = css({
 	flex: 1,
 	minHeight: 0,
 	overflowY: "auto",
-	WebkitOverflowScrolling: "touch"
+	overscrollBehavior: "contain"
 });
 var footerClass = css({
 	display: "flex",
@@ -130,6 +130,7 @@ var footerClass = css({
 	padding: "var(--tsu-container-padding-lg)",
 	flexShrink: 0
 });
+var footerSheetClass = css({ paddingBottom: "calc(var(--tsu-container-padding-lg) + env(safe-area-inset-bottom, 0px))" });
 var footerBtnClass = css({
 	display: "flex",
 	gap: "20px",
@@ -324,7 +325,7 @@ var Dialog$1 = (props) => {
 				() => {
 					const _el0 = _tmpl4.cloneNode(true);
 					insert(_el0, () => footerContent);
-					setProp(_el0, "className", () => footerClass);
+					setProp(_el0, "className", () => isSheet ? `${footerClass} ${footerSheetClass}` : footerClass);
 					return _el0;
 				}
 			]

package/docs/api.md

@@ -716,6 +716,8 @@ A free-form presentation layer: a backdrop, an optional drag grabber, and a scro
 **Rendered DOM parts:** exactly three — `data-part="backdrop"`, `data-part="grabber"` (only when `draggable`), and `data-part="content"`. With the default `lazyMount: true` + `unmountOnExit: true`, a closed sheet that was never opened renders **zero** nodes; after close it stays mounted only long enough for the exit transition, then unmounts. BottomSheet has no focus trap or Escape-to-close — use [`Dialog`](#dialog) when those are required.
 
 > **Design decision:** `content` is a pure container — `display: flex; flex-direction: column` only, with **no padding, no margin, and no scrolling**. Spacing and scrolling are entirely consumer-owned: build your own layout inside `children` (the sheet caps height at `70vh`, so a scrollable section can be a `flex: 1; min-height: 0; overflow-y: auto` child).
+>
+> **Consumer contract:** any scrollable child inside a `BottomSheet` must set `overscroll-behavior: contain` (or `none` if a hard edge is desired). Otherwise, on iOS the rubber-band overscroll at the child's top/bottom chains into the drag-to-dismiss area and shoves the whole sheet.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|---|

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plastic-js/tsumiki",
-  "version": "0.1.69",
+  "version": "0.1.71",
   "description": "A UI component library for Plastic JS.",
   "license": "MIT",
   "author": "tigre",

package/docs/pagination-ellipsis-issue.md

@@ -1,45 +0,0 @@
-# Pagination renders an invisible ellipsis
-
-**Status:** Known issue
-**Affects:** `src/components/Pagination.jsx:55`
-
-## Problem
-
-The `Pages` renderer emits the ellipsis without any content:
-
-```jsx
-// src/components/Pagination.jsx:55
-: <ArkPagination.Ellipsis key={i} index={i} className={ellipsisClass} />
-```
-
-`ArkPagination.Ellipsis` renders a plain empty `div` (it only spreads
-`getEllipsisProps` — id/data attrs — and never injects text). The tsumiki
-`ellipsisClass` only sizes/colors the box, so the ellipsis shows up as a blank
-gap with no `…` glyph.
-
-With enough pages to trigger the collapsed range, the page-number pattern looks
-random and buggy instead of standard, e.g. with 12 total pages and the default
-`boundaryCount = 1` / `siblingCount = 1`:
-
-- Page 1: `1 2 3 12` (should be `1 2 3 … 12`)
-- Page 4: `1 4 12` (should be `1 … 4 … 12`)
-- Page 10: `1 10 11 12` (should be `1 … 10 11 12`)
-
-Each gap is where the invisible ellipsis box sits.
-
-## Fix
-
-Pass the glyph as children so the ellipsis is visible:
-
-```jsx
-: <ArkPagination.Ellipsis key={i} index={i} className={ellipsisClass}>…</ArkPagination.Ellipsis>
-```
-
-Consider tightening `ellipsisClass` width (e.g. `28px`) so the visible `…` does
-not consume a full button-sized slot.
-
-## Secondary note (related UX)
-
-Prev/Next reuse `itemClass` (`minWidth: var(--tsu-level-primary-md)`, 40px),
-which is a small tap target. If wider triggers are desired, they need their own
-class, since `Pagination` currently exposes no per-trigger className override.