@plastic-js/tsumiki 0.1.39 → 0.1.41

package/dist/components/BottomSheet.js

@@ -3,10 +3,9 @@ import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/
 import { css } from "@emotion/css";
 import { createEffect, createSignal, mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
 //#region src/components/BottomSheet.jsx
-var _tmpl4 = template("<div><h2></h2></div>");
-var _tmpl3 = template("<div><div></div></div>");
-var _tmpl2 = template("<div role=\"dialog\" aria-modal=\"true\"><!><!><div></div><!></div>");
-var _tmpl = template("<div></div>");
+var _tmpl3 = template("<div data-part=\"grabber\"><div></div></div>");
+var _tmpl2 = template("<div role=\"dialog\" aria-modal=\"true\" aria-label=\"BottomSheet\"><!><div data-part=\"content\"></div></div>");
+var _tmpl = template("<div data-part=\"backdrop\"></div>");
 var CLOSE_DISTANCE_RATIO = .3;
 var CLOSE_VELOCITY = .5;
 var RUBBER_BAND_FACTOR = 3;
@@ -37,6 +36,7 @@ var sheetClass = css({
 	borderRadius: "var(--tsu-radius-l3-md) var(--tsu-radius-l3-md) 0 0",
 	boxShadow: "var(--tsu-shadow-lg)",
 	maxHeight: "70vh",
+	"@supports (height: 100dvh)": { maxHeight: "min(70dvh, 70vh)" },
 	display: "flex",
 	flexDirection: "column",
 	transform: "translateY(100%)",
@@ -62,7 +62,7 @@ var grabberAreaClass = css({
 	display: "flex",
 	alignItems: "center",
 	justifyContent: "center",
-	padding: "6px 0",
+	height: "24px",
 	flexShrink: 0,
 	cursor: "grab",
 	touchAction: "none",
@@ -74,35 +74,12 @@ var grabberClass = css({
 	borderRadius: "2.5px",
 	background: "var(--tsu-neutral-alpha-6)"
 });
-var headerClass = css({
+var contentClass = css({
 	display: "flex",
-	alignItems: "center",
-	justifyContent: "center",
-	padding: "var(--tsu-container-padding-lg)",
-	borderBottom: "1px solid var(--tsu-neutral-7)",
-	flexShrink: 0
-});
-var titleClass = css({
-	margin: 0,
-	fontSize: "var(--tsu-text-title-size)",
-	fontWeight: "var(--tsu-text-title-weight)",
-	lineHeight: "var(--tsu-text-title-line-height)",
-	color: "var(--tsu-fg)",
-	textAlign: "center"
-});
-var bodyClass = css({
-	overflowY: "auto",
-	padding: "var(--tsu-container-padding-lg)",
+	flexDirection: "column",
+	padding: "0 var(--tsu-container-padding-lg)",
 	flex: 1,
-	WebkitOverflowScrolling: "touch"
-});
-var bodyNoHeaderClass = css({ paddingTop: "calc(var(--tsu-container-padding-lg) * 2)" });
-var footerClass = css({
-	display: "flex",
-	gap: "var(--tsu-spacing-sm)",
-	padding: "0 var(--tsu-container-padding-lg) var(--tsu-container-padding-lg)",
-	flexShrink: 0,
-	paddingTop: "var(--tsu-spacing-sm)"
+	minHeight: 0
 });
 var read = (v) => typeof v === "function" ? v() : v;
 var BottomSheet = (props) => {
@@ -115,15 +92,12 @@ var BottomSheet = (props) => {
 		"onOpen",
 		"onClose",
 		"onOpenChange",
-		"title",
 		"dismissible",
 		"draggable",
 		"backdropBlur",
 		"backdropClassName",
 		"backdropStyle",
-		"bodyClassName",
-		"footer",
-		"footerClass",
+		"contentClassName",
 		"class",
 		"children"
 	]);
@@ -197,8 +171,6 @@ var BottomSheet = (props) => {
 		const _el0 = _tmpl2.cloneNode(true);
 		const _el1 = _el0.firstChild;
 		const _el2 = _el0.firstChild.nextSibling;
-		const _el3 = _el0.firstChild.nextSibling.nextSibling;
-		const _el4 = _el0.firstChild.nextSibling.nextSibling.nextSibling;
 		insert(_el0, () => showGrabber && (() => {
 			const _el0 = _tmpl3.cloneNode(true);
 			const _el1 = _el0.firstChild;
@@ -210,22 +182,8 @@ var BottomSheet = (props) => {
 			setProp(_el0, "onPointerCancel", () => onGrabberPointerCancel);
 			return _el0;
 		})(), _el1);
-		insert(_el0, () => local.title && (() => {
-			const _el0 = _tmpl4.cloneNode(true);
-			const _el1 = _el0.firstChild;
-			insert(_el1, () => local.title);
-			setProp(_el1, "className", () => titleClass);
-			setProp(_el0, "className", () => headerClass);
-			return _el0;
-		}), _el2);
-		insert(_el3, () => local.children);
-		setProp(_el3, "className", () => [!local.title && !showGrabber ? `${bodyClass} ${bodyNoHeaderClass}` : bodyClass, local.bodyClassName].filter(Boolean).join(" "));
-		insert(_el0, () => local.footer && (() => {
-			const _el0 = _tmpl.cloneNode(true);
-			insert(_el0, () => local.footer);
-			setProp(_el0, "className", () => local.footerClass ? `${footerClass} ${local.footerClass}` : footerClass);
-			return _el0;
-		}), _el4);
+		insert(_el2, () => local.children);
+		setProp(_el2, "className", () => [contentClass, local.contentClassName].filter(Boolean).join(" "));
 		setProp(_el0, "ref", (el) => {
 			sheetEl = el;
 		});
@@ -235,7 +193,6 @@ var BottomSheet = (props) => {
 			local.class
 		].filter(Boolean).join(" "));
 		setProp(_el0, "data-open", () => read(local.open) ? "" : void 0);
-		setProp(_el0, "aria-label", () => local.title || "BottomSheet");
 		return _el0;
 	}] }));
 };

package/dist/components/Dialog.js

@@ -1,13 +1,15 @@
 import Portal_default from "./Portal.js";
+import Spinner from "./Spinner.js";
 import Icon from "./Icon.js";
 import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
 import { css, keyframes } from "@emotion/css";
 import { Dialog } from "@plastic-js/ark";
 import { mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
 //#region src/components/Dialog.jsx
-var _tmpl6 = template("<div data-scope=\"dialog\" data-part=\"footer\"></div>");
-var _tmpl5 = template("<div data-scope=\"dialog\" data-part=\"body\"></div>");
-var _tmpl4 = template("<div data-scope=\"dialog\" data-part=\"header\"><div><!><!></div><!></div>");
+var _tmpl7 = template("<div data-scope=\"dialog\" data-part=\"footer\"></div>");
+var _tmpl6 = template("<div data-scope=\"dialog\" data-part=\"body\"></div>");
+var _tmpl5 = template("<div data-scope=\"dialog\" data-part=\"header\"><div><!><!></div><!></div>");
+var _tmpl4 = template("<span><!><!></span>");
 var _tmpl3 = template("<button data-part=\"positive-trigger\" type=\"button\"></button>");
 var _tmpl2 = template("<button data-part=\"negative-trigger\" type=\"button\"></button>");
 var _tmpl = template("<div><!><!></div>");
@@ -60,7 +62,8 @@ var contentModalClass = css({
 	borderRadius: "var(--tsu-radius-l3-md)",
 	width: "100%",
 	maxWidth: "440px",
-	maxHeight: "calc(100vh - var(--tsu-spacing-lg) * 2)",
+	maxHeight: "min(calc(100vh - var(--tsu-spacing-lg) * 2), 560px)",
+	"@supports (height: 100dvh)": { maxHeight: "min(calc(100dvh - var(--tsu-spacing-lg) * 2), 560px)" },
 	display: "flex",
 	flexDirection: "column",
 	color: "var(--tsu-fg)",
@@ -82,7 +85,8 @@ var headerClass = css({
 	display: "flex",
 	alignItems: "center",
 	justifyContent: "space-between",
-	padding: "18px var(--tsu-container-padding-lg)",
+	padding: "18px var(--tsu-container-padding-lg) var(--tsu-spacing-lg)",
+	marginBottom: "var(--tsu-spacing-sm)",
 	borderBottom: "1px solid var(--tsu-neutral-7)",
 	flexShrink: 0
 });
@@ -117,16 +121,16 @@ var closeBtnClass = css({
 	flexShrink: 0
 });
 var bodyClass = css({
-	padding: "var(--tsu-container-padding-lg)",
+	padding: "0 var(--tsu-container-padding-lg)",
 	flex: 1,
+	minHeight: 0,
 	overflowY: "auto",
 	WebkitOverflowScrolling: "touch"
 });
-var bodySheetNoHeaderClass = css({ paddingTop: "calc(var(--tsu-container-padding-lg) * 2)" });
 var footerClass = css({
 	display: "flex",
 	gap: "var(--tsu-spacing-md)",
-	padding: "var(--tsu-spacing-lg) var(--tsu-container-padding-lg) var(--tsu-container-padding-lg)",
+	padding: "var(--tsu-container-padding-lg)",
 	flexShrink: 0
 });
 var footerBtnClass = css({
@@ -166,7 +170,14 @@ var btnDangerClass = css({
 		cursor: "not-allowed"
 	}
 });
+var positiveLoadingClass = css({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	gap: "8px"
+});
 var read = (v) => typeof v === "function" ? v() : v;
+var warnedSheetNoTitle = false;
 var Dialog$1 = (props) => {
 	const [local, rest] = splitProps(mergeProps$2({
 		mode: "sheet",
@@ -218,7 +229,6 @@ var Dialog$1 = (props) => {
 		local.onOpenChange?.(open);
 	};
 	const handleCancel = () => {
-		if (read(local.loading)) return;
 		cancelRequested.current = true;
 		handleOpenChange(false);
 	};
@@ -241,7 +251,19 @@ var Dialog$1 = (props) => {
 		}), _el1);
 		insert(_el0, () => local.showConfirm && (() => {
 			const _el0 = _tmpl3.cloneNode(true);
-			insert(_el0, () => read(local.loading) ? "Loading…" : local.confirmText);
+			insert(_el0, () => read(local.loading) ? () => {
+				const _el0 = _tmpl4.cloneNode(true);
+				const _el1 = _el0.firstChild;
+				const _el2 = _el0.firstChild.nextSibling;
+				insert(_el0, () => jsx(Spinner, mergeProps({
+					size: 16,
+					strokeWidth: 3,
+					color: "currentColor"
+				})), _el1);
+				insert(_el0, () => local.confirmText, _el2);
+				setProp(_el0, "className", () => positiveLoadingClass);
+				return _el0;
+			} : local.confirmText);
 			setProp(_el0, "className", () => `${btnClass} ${local.danger ? btnDangerClass : btnPrimaryClass}`);
 			setProp(_el0, "disabled", () => read(local.loading));
 			setProp(_el0, "onClick", () => handleConfirm);
@@ -250,8 +272,10 @@ var Dialog$1 = (props) => {
 		setProp(_el0, "className", () => onlyOneBtn ? `${footerBtnClass} tsu-dialog-footer--center` : footerBtnClass);
 		return _el0;
 	} : void 0;
-	const hasFooter = !!footerContent;
-	const hasHeader = local.title || !isSheet && (local.closeable ?? true);
+	if (isSheet && !local.title && !warnedSheetNoTitle) {
+		warnedSheetNoTitle = true;
+		console.warn("[Dialog] sheet mode requires a title; use BottomSheet for header-less content.");
+	}
 	return jsx(Dialog.Root, mergeProps({
 		get open() {
 			return read(local.open);
@@ -280,8 +304,8 @@ var Dialog$1 = (props) => {
 				return local.class ? `${isSheet ? contentSheetClass : contentModalClass} ${local.class}` : isSheet ? contentSheetClass : contentModalClass;
 			},
 			children: [
-				() => hasHeader && (() => {
-					const _el0 = _tmpl4.cloneNode(true);
+				() => {
+					const _el0 = _tmpl5.cloneNode(true);
 					const _el1 = _el0.firstChild;
 					const _el2 = _el1.firstChild;
 					const _el3 = _el1.firstChild.nextSibling;
@@ -308,19 +332,19 @@ var Dialog$1 = (props) => {
 					})), _el4);
 					setProp(_el0, "className", () => headerClass);
 					return _el0;
-				}),
+				},
 				() => {
-					const _el0 = _tmpl5.cloneNode(true);
+					const _el0 = _tmpl6.cloneNode(true);
 					insert(_el0, () => local.children);
-					setProp(_el0, "className", () => isSheet && !local.title && !(local.closeable ?? true) ? `${bodyClass} ${bodySheetNoHeaderClass}` : bodyClass);
+					setProp(_el0, "className", () => bodyClass);
 					return _el0;
 				},
-				() => hasFooter && (() => {
-					const _el0 = _tmpl6.cloneNode(true);
+				() => {
+					const _el0 = _tmpl7.cloneNode(true);
 					insert(_el0, () => footerContent);
 					setProp(_el0, "className", () => footerClass);
 					return _el0;
-				})
+				}
 			]
 		}))
 	}))] })) }));

package/dist/components/Select.js

@@ -59,7 +59,13 @@ var triggerIndicatorClass = css({
 	}
 });
 var listBodyClass = css({ padding: 0 });
-var listClass = css({ padding: "0 8px calc(8px + env(safe-area-inset-bottom, 0px))" });
+var listClass = css({
+	flex: 1,
+	minHeight: 0,
+	overflowY: "auto",
+	WebkitOverflowScrolling: "touch",
+	padding: "0 8px calc(8px + env(safe-area-inset-bottom, 0px))"
+});
 var itemClass = css({
 	width: "100%",
 	display: "flex",
@@ -308,7 +314,7 @@ var Content = () => {
 		get backdropStyle() {
 			return ctx.backdropStyle ?? { background: "rgba(0,0,0,0.5)" };
 		},
-		bodyClassName: listBodyClass,
+		contentClassName: listBodyClass,
 		children: jsx("div", mergeProps(() => part("list"), {
 			className: listClass,
 			children: [() => ctx.filter && (() => {

package/docs/api.md

@@ -641,6 +641,8 @@ Passthrough: Ark `Root` props (`value`, `min`, `max`, …).
 
 **Rendered DOM parts:** content is `[data-scope="dialog"][data-part="content"]`; tsumiki adds `data-part="header"`, `data-part="body"`, `data-part="footer"`, and the action buttons `data-part="negative-trigger"` / `data-part="positive-trigger"`. `title`, `description`, and `closeTrigger` carry `data-part` from Ark.
 
+> **Note:** Dialog never renders a grabber / drag handle in either mode (`modal` or `sheet`). Drag-to-dismiss and the grabber are exclusive to [`BottomSheet`](#bottomsheet) — this is a deliberate difference between the two components.
+
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `mode` | `string` | `'sheet'` | `'modal'` (centered) or `'sheet'` (bottom sheet). |
@@ -666,6 +668,16 @@ Passthrough: Ark `Root` props (`value`, `min`, `max`, …).
 | `class` | `string` | — | Content class. |
 | `children` | `node` | — | Custom body content. |
 
+**Callback hierarchy:**
+
+`onOpenChange` → `onClose` → `onCancel` are **increasingly high-level**. Each is a refinement of the previous:
+
+- `onOpenChange` — raw state sync, fired on every open/close.
+- `onClose` — close cleanup, fired whenever the dialog closes for any reason.
+- `onCancel` — cancel intent, fired only on an explicit cancel (Cancel button, ✕, Escape, outside pointer).
+
+> **General rule: always use the highest-level callback you need.** Reach for `onCancel` (and `onConfirm`) first — they express intent. Only fall back to `onClose` when you need close cleanup for every path, and to `onOpenChange` only when you need raw open/close control. Passing a lower-level callback just because a higher-level one exists usually means you are bypassing the intent layer.
+
 **Known issues:**
 - Pressing <kbd>Escape</kbd> closes both the Dialog and any nested overlay (e.g. `DateInput`, `Select`) that is open inside it. There is currently no event coordination between the two — both react to the same key press.
 
@@ -747,16 +759,26 @@ Passthrough: Ark `Root` props (`open`, `onOpenChange`, `positioning`, …).
 
 ### BottomSheet
 
-Mobile bottom sheet (drag-to-dismiss).
+A free-form presentation layer: a backdrop, an optional drag grabber, and a scrollable content area (`children`). The content is fully consumer-owned — headers, titles, and footers are just regular content.
 
 **Exports:** `BottomSheet` · no `.origin`
 
+**Rendered DOM parts:** exactly three — `data-part="backdrop"`, `data-part="grabber"` (only when `draggable`), and `data-part="content"`. 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` with `padding: 0 24px` only. It has **no vertical 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).
+
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `dismissible` | `boolean` | `true` | Allow dismiss. |
+| `open` | `boolean \| (() => boolean)` | — | **Required** controlled open state. |
+| `onOpenChange` | `({ open }) => void` | — | Fired on open/close; sync your state here. |
+| `dismissible` | `boolean` | `true` | Allow dismiss via backdrop / drag. |
+| `draggable` | `boolean` | `true` | Show the grabber and enable drag-to-dismiss. |
 | `backdropBlur` | `boolean` | `true` | Blur the backdrop. |
-
-Passthrough: DOM props (`open`, `onOpenChange`, `title`, `children`, …).
+| `backdropClassName` | `string` | — | Extra class for the backdrop. |
+| `backdropStyle` | `object` | — | Extra style for the backdrop. |
+| `contentClassName` | `string` | — | Extra class for the content area. |
+| `class` | `string` | — | Extra class for the sheet. |
+| `children` | `node` | — | **Required** body content. |
 
 ---
 

package/package.json

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