@plastic-js/tsumiki 0.1.37 → 0.1.39

package/dist/components/DateInput.js

@@ -1,3 +1,4 @@
+import Portal_default from "./Portal.js";
 import Icon from "./Icon.js";
 import { expandCircular, makeWheel } from "./DateWheel.js";
 import { Fragment, insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
@@ -100,7 +101,7 @@ var calendarIconClass = css({
 var overlayClass = css({
 	position: "fixed",
 	inset: 0,
-	zIndex: 1e3,
+	zIndex: 1400,
 	display: "flex",
 	flexDirection: "column",
 	justifyContent: "flex-end",
@@ -322,7 +323,7 @@ var DateInput = (props = {}) => {
 		const monthWheel = makeWheel(monthItems, monthStartIdx, true);
 		const [dayItemsArr, dayStartIdx] = expandCircular(days, selDay - 1);
 		const dayWheel = makeWheel(dayItemsArr, dayStartIdx, true);
-		return () => {
+		return jsx(Portal_default, mergeProps({ children: () => {
 			const _el0 = _tmpl3.cloneNode(true);
 			const _el1 = _el0.firstChild;
 			const _el2 = _el0.firstChild.nextSibling;
@@ -432,7 +433,7 @@ var DateInput = (props = {}) => {
 			setProp(_el2, "className", () => sheetClass);
 			setProp(_el0, "className", () => `${overlayClass} ${openClass}`);
 			return _el0;
-		};
+		} }));
 	}] });
 };
 //#endregion

package/dist/components/Dialog.js

@@ -5,9 +5,11 @@ 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 _tmpl4 = template("<div></div>");
-var _tmpl3 = template("<div><div><!><!></div><!></div>");
-var _tmpl2 = template("<button type=\"button\"></button>");
+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 _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>");
 var backdropModalClass = css({
 	position: "fixed",
@@ -63,7 +65,6 @@ var contentModalClass = css({
 	flexDirection: "column",
 	color: "var(--tsu-fg)",
 	boxShadow: "var(--tsu-shadow-lg)",
-	overflowY: "auto",
 	animation: `${modalContentIn} 200ms ease`
 });
 var contentSheetClass = css({
@@ -75,7 +76,6 @@ var contentSheetClass = css({
 	flexDirection: "column",
 	color: "var(--tsu-fg)",
 	boxShadow: "var(--tsu-shadow-lg)",
-	overflowY: "auto",
 	animation: `${sheetContentIn} 250ms ease`
 });
 var headerClass = css({
@@ -126,7 +126,7 @@ var bodySheetNoHeaderClass = css({ paddingTop: "calc(var(--tsu-container-padding
 var footerClass = css({
 	display: "flex",
 	gap: "var(--tsu-spacing-md)",
-	padding: "0 var(--tsu-container-padding-lg) var(--tsu-container-padding-lg)",
+	padding: "var(--tsu-spacing-lg) var(--tsu-container-padding-lg) var(--tsu-container-padding-lg)",
 	flexShrink: 0
 });
 var footerBtnClass = css({
@@ -137,8 +137,7 @@ var footerBtnClass = css({
 	"&.tsu-dialog-footer--center": { justifyContent: "center" }
 });
 var btnClass = css({
-	flex: "0 0 auto",
-	whiteSpace: "nowrap",
+	flex: 1,
 	height: "var(--tsu-comp-height-xl)",
 	borderRadius: "var(--tsu-radius-l1-lg)",
 	border: "1px solid var(--tsu-neutral-7)",
@@ -241,7 +240,7 @@ var Dialog$1 = (props) => {
 			return _el0;
 		}), _el1);
 		insert(_el0, () => local.showConfirm && (() => {
-			const _el0 = _tmpl2.cloneNode(true);
+			const _el0 = _tmpl3.cloneNode(true);
 			insert(_el0, () => read(local.loading) ? "Loading…" : local.confirmText);
 			setProp(_el0, "className", () => `${btnClass} ${local.danger ? btnDangerClass : btnPrimaryClass}`);
 			setProp(_el0, "disabled", () => read(local.loading));
@@ -282,7 +281,7 @@ var Dialog$1 = (props) => {
 			},
 			children: [
 				() => hasHeader && (() => {
-					const _el0 = _tmpl3.cloneNode(true);
+					const _el0 = _tmpl4.cloneNode(true);
 					const _el1 = _el0.firstChild;
 					const _el2 = _el1.firstChild;
 					const _el3 = _el1.firstChild.nextSibling;
@@ -311,13 +310,13 @@ var Dialog$1 = (props) => {
 					return _el0;
 				}),
 				() => {
-					const _el0 = _tmpl4.cloneNode(true);
+					const _el0 = _tmpl5.cloneNode(true);
 					insert(_el0, () => local.children);
 					setProp(_el0, "className", () => isSheet && !local.title && !(local.closeable ?? true) ? `${bodyClass} ${bodySheetNoHeaderClass}` : bodyClass);
 					return _el0;
 				},
 				() => hasFooter && (() => {
-					const _el0 = _tmpl4.cloneNode(true);
+					const _el0 = _tmpl6.cloneNode(true);
 					insert(_el0, () => footerContent);
 					setProp(_el0, "className", () => footerClass);
 					return _el0;

package/docs/api.md

@@ -639,16 +639,17 @@ Passthrough: Ark `Root` props (`value`, `min`, `max`, …).
 
 **Exports:** `Dialog` · Escape hatch: `Dialog.origin.{Root, Trigger, Backdrop, Positioner, Content, Title, Description, CloseTrigger}`
 
+**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.
+
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `mode` | `string` | `'modal'` | `'modal'` or `'nonModal'`. |
+| `mode` | `string` | `'sheet'` | `'modal'` (centered) or `'sheet'` (bottom sheet). |
 | `open` | `boolean \| (() => boolean)` | — | **Required** controlled open state. |
-| `onOpenChange` | `(v) => void` | — | Receives `{ open }`; sync your state here. |
+| `onOpenChange` | `(open: boolean) => void` | — | Fired on every open/close with the new `open` boolean; sync your state here. |
 | `onOpen` | `() => void` | — | Fired when opened. |
 | `onClose` | `() => void` | — | Fired when closed. |
 | `title` | `string` | — | Dialog title. |
 | `icon` | `node` | — | Optional icon above the title. |
-| `message` | `string` | — | Body text. |
 | `showCancel` | `boolean` | `true` | Show the cancel button. |
 | `showConfirm` | `boolean` | `true` | Show the confirm button. |
 | `cancelText` | `string` | `'Cancel'` | Cancel button label. |
@@ -665,6 +666,9 @@ Passthrough: Ark `Root` props (`value`, `min`, `max`, …).
 | `class` | `string` | — | Content class. |
 | `children` | `node` | — | Custom body content. |
 
+**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.
+
 ### ConfirmDialog
 
 Imperative + declarative confirm dialog built on `Dialog`.

package/package.json

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