@plastic-js/tsumiki 0.1.33 → 0.1.35

package/dist/components/BottomNavigation.js

@@ -13,7 +13,7 @@ var rootClass = css({
 	alignItems: "center",
 	height: "56px",
 	paddingBottom: "env(safe-area-inset-bottom)",
-	backgroundColor: "var(--tsu-bg)",
+	backgroundColor: "var(--tsu-surface)",
 	borderTop: "1px solid var(--tsu-neutral-6)",
 	zIndex: "var(--tsu-z-base)"
 });

package/dist/components/BottomSheet.js

@@ -1,7 +1,7 @@
 import Portal_default from "./Portal.js";
 import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
 import { css } from "@emotion/css";
-import { createSignal, mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
+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>");
@@ -33,7 +33,7 @@ var sheetClass = css({
 	insetInline: 0,
 	bottom: 0,
 	zIndex: 1400,
-	background: "var(--tsu-bg)",
+	background: "var(--tsu-surface)",
 	borderRadius: "var(--tsu-radius-l3-md) var(--tsu-radius-l3-md) 0 0",
 	boxShadow: "var(--tsu-shadow-lg)",
 	maxHeight: "70vh",
@@ -54,7 +54,7 @@ var sheetClass = css({
 		left: 0,
 		right: 0,
 		height: "30vh",
-		background: "var(--tsu-bg)"
+		background: "var(--tsu-surface)"
 	}
 });
 var draggingClass = css({ transition: "none" });
@@ -119,6 +119,9 @@ var BottomSheet = (props) => {
 		"dismissible",
 		"draggable",
 		"backdropBlur",
+		"backdropClassName",
+		"backdropStyle",
+		"bodyClassName",
 		"footer",
 		"footerClass",
 		"class",
@@ -135,6 +138,13 @@ var BottomSheet = (props) => {
 		if (!detail.open) local.onClose?.();
 		local.onOpenChange?.(detail);
 	};
+	const isOpen = () => read(local.open);
+	let prevOpen = isOpen();
+	createEffect(() => {
+		const cur = isOpen();
+		if (cur && !prevOpen) local.onOpen?.();
+		prevOpen = cur;
+	});
 	const handleBackdropClick = () => {
 		if (read(local.dismissible)) handleOpenChange({ open: false });
 	};
@@ -174,7 +184,12 @@ var BottomSheet = (props) => {
 	const showGrabber = read(local.draggable);
 	return jsx(Portal_default, mergeProps({ children: [(() => {
 		const _el0 = _tmpl.cloneNode(true);
-		setProp(_el0, "className", () => local.backdropBlur ? `${backdropClass} ${backdropBlurClass}` : backdropClass);
+		setProp(_el0, "className", () => [
+			backdropClass,
+			local.backdropBlur && backdropBlurClass,
+			local.backdropClassName
+		].filter(Boolean).join(" "));
+		setProp(_el0, "style", () => local.backdropStyle);
 		setProp(_el0, "data-open", () => read(local.open) ? "" : void 0);
 		setProp(_el0, "onClick", () => handleBackdropClick);
 		return _el0;
@@ -204,7 +219,7 @@ var BottomSheet = (props) => {
 			return _el0;
 		}), _el2);
 		insert(_el3, () => local.children);
-		setProp(_el3, "className", () => !local.title && !showGrabber ? `${bodyClass} ${bodyNoHeaderClass}` : bodyClass);
+		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);

package/dist/components/Card.js

@@ -3,7 +3,7 @@ import { css } from "@emotion/css";
 import { mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
 //#region src/components/Card.jsx
 var baseClass = css({
-	backgroundColor: "var(--tsu-bg)",
+	backgroundColor: "var(--tsu-surface)",
 	borderRadius: "var(--tsu-radius-l2-md)"
 });
 var Card = (props = {}) => {

package/dist/components/Checkbox.js

@@ -73,7 +73,7 @@ var controlClass = css({
 	flexShrink: 0,
 	borderRadius: "var(--_cb-radius, var(--tsu-radius-l1-md))",
 	border: "1px solid var(--tsu-accent-8)",
-	backgroundColor: "var(--tsu-bg)",
+	backgroundColor: "var(--tsu-surface)",
 	color: "transparent",
 	transition: "background-color var(--tsu-transition-fast), border-color var(--tsu-transition-fast), color var(--tsu-transition-fast), transform var(--tsu-transition-fast)",
 	"&[data-state=\"checked\"], &[data-state=\"indeterminate\"]": {
@@ -100,10 +100,10 @@ var errorClass = css({
 	},
 	"&[data-disabled]": {
 		borderColor: "var(--tsu-danger-9)",
-		backgroundColor: "var(--tsu-bg)"
+		backgroundColor: "var(--tsu-surface)"
 	},
 	"&[data-disabled][data-state=\"checked\"], &[data-disabled][data-state=\"indeterminate\"]": {
-		backgroundColor: "var(--tsu-bg)",
+		backgroundColor: "var(--tsu-surface)",
 		borderColor: "var(--tsu-danger-9)",
 		color: "var(--tsu-danger-9)"
 	}

package/dist/components/Clipboard.js

@@ -99,20 +99,32 @@ var Clipboard = (props = {}) => {
 	const copied = createSignal(false);
 	const handleCopy = async () => {
 		try {
-			await navigator.clipboard.writeText(local.value);
+			if (navigator.clipboard?.writeText) await navigator.clipboard.writeText(local.value);
+			else fallbackCopy();
 		} catch {
-			const ta = document.createElement("textarea");
-			ta.value = local.value;
-			ta.style.cssText = "position:fixed;opacity:0";
-			document.body.appendChild(ta);
-			ta.select();
-			document.execCommand("copy");
-			document.body.removeChild(ta);
+			fallbackCopy();
 		}
 		copied(true);
 		clearTimeout(timer);
 		timer = setTimeout(() => copied(false), local.copiedDuration);
 	};
+	const fallbackCopy = () => {
+		const ta = document.createElement("textarea");
+		ta.value = local.value;
+		ta.setAttribute("readonly", "");
+		ta.style.cssText = "position:fixed;top:0;left:0;width:2px;height:2px;padding:0;border:none;outline:none;box-shadow:none;background:transparent;opacity:0;pointer-events:none";
+		document.body.appendChild(ta);
+		const selection = document.getSelection();
+		const prevRange = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+		ta.select();
+		ta.setSelectionRange(0, local.value.length);
+		document.execCommand("copy");
+		document.body.removeChild(ta);
+		if (prevRange && selection) {
+			selection.removeAllRanges();
+			selection.addRange(prevRange);
+		}
+	};
 	onCleanup(() => clearTimeout(timer));
 	return jsx("button", mergeProps(rest, {
 		type: "button",

package/dist/components/ColorPicker.js

@@ -65,7 +65,7 @@ var valueTextClass = css({
 	fontVariantNumeric: "tabular-nums"
 });
 var contentClass = css({
-	backgroundColor: "var(--tsu-bg)",
+	backgroundColor: "var(--tsu-surface)",
 	border: "1px solid var(--tsu-neutral-6)",
 	borderRadius: "var(--tsu-radius-l2-xl)",
 	boxShadow: "var(--tsu-shadow-lg)",

package/dist/components/Combobox.js

@@ -7,7 +7,7 @@ var inputClass = css({
 	width: "100%",
 	height: "var(--tsu-comp-height-md)",
 	padding: "0 var(--tsu-comp-padding-x-md)",
-	background: "var(--tsu-bg)",
+	background: "var(--tsu-surface)",
 	border: "1px solid var(--tsu-accent-8)",
 	borderRadius: "var(--tsu-radius-l1-md)",
 	color: "var(--tsu-fg)",
@@ -21,7 +21,7 @@ var inputClass = css({
 	}
 });
 var contentClass = css({
-	backgroundColor: "var(--tsu-bg)",
+	backgroundColor: "var(--tsu-surface)",
 	border: "1px solid var(--tsu-neutral-6)",
 	borderRadius: "var(--tsu-radius-l2-md)",
 	boxShadow: "var(--tsu-shadow-lg)",

package/dist/components/ConfirmDialog.js

@@ -72,8 +72,6 @@ function ConfirmDialog(props) {
 		}
 	}));
 }
-var container = document.createElement("div");
-document.body.appendChild(container);
 var _resolve = null;
 var _reject = null;
 var _setState = null;
@@ -81,6 +79,8 @@ var _initialized = false;
 function ensureInit() {
 	if (_initialized) return;
 	_initialized = true;
+	const container = document.createElement("div");
+	document.body.appendChild(container);
 	const state = createSignal(null);
 	_setState = state;
 	const handleConfirm = () => {

package/dist/components/DateInput.js

@@ -71,7 +71,7 @@ var triggerClass = css({
 	width: "100%",
 	height: "var(--tsu-comp-height-md)",
 	padding: "0 36px 0 var(--tsu-comp-padding-x-md)",
-	background: "var(--tsu-bg)",
+	background: "var(--tsu-surface)",
 	border: "1px solid var(--tsu-accent-8)",
 	borderRadius: "var(--tsu-radius-l1-md)",
 	color: "var(--tsu-fg)",
@@ -118,7 +118,7 @@ var sheetClass = css({
 	width: "100%",
 	display: "flex",
 	flexDirection: "column",
-	background: "var(--tsu-bg)",
+	background: "var(--tsu-surface)",
 	borderTop: "1px solid var(--tsu-neutral-7)",
 	borderRadius: "18px 18px 0 0",
 	boxShadow: "0 -8px 32px rgba(0,0,0,0.4)",
@@ -193,11 +193,11 @@ var columnViewportClass = css({
 	},
 	"&::before": {
 		top: 0,
-		background: "linear-gradient(to bottom, var(--tsu-bg) 0%, transparent 100%)"
+		background: "linear-gradient(to bottom, var(--tsu-surface) 0%, transparent 100%)"
 	},
 	"&::after": {
 		bottom: 0,
-		background: "linear-gradient(to top, var(--tsu-bg) 0%, transparent 100%)"
+		background: "linear-gradient(to top, var(--tsu-surface) 0%, transparent 100%)"
 	}
 });
 var columnListClass = css({ willChange: "transform" });

package/dist/components/Dialog.js

@@ -54,7 +54,7 @@ var sheetContentIn = keyframes({
 	to: { transform: "translateY(0)" }
 });
 var contentModalClass = css({
-	background: "var(--tsu-bg)",
+	background: "var(--tsu-surface)",
 	borderRadius: "var(--tsu-radius-l3-md)",
 	width: "100%",
 	maxWidth: "440px",
@@ -67,7 +67,7 @@ var contentModalClass = css({
 	animation: `${modalContentIn} 200ms ease`
 });
 var contentSheetClass = css({
-	background: "var(--tsu-bg)",
+	background: "var(--tsu-surface)",
 	borderRadius: "var(--tsu-radius-l3-md) var(--tsu-radius-l3-md) 0 0",
 	width: "100%",
 	maxHeight: "70vh",
@@ -98,7 +98,7 @@ var titleIconClass = css({
 });
 var titleClass = css({
 	fontSize: "18px",
-	fontWeight: 700,
+	fontWeight: "var(--tsu-font-weight-semibold)",
 	margin: 0
 });
 var closeBtnClass = css({
@@ -204,15 +204,22 @@ var Dialog$1 = (props) => {
 		"class",
 		"children"
 	]);
+	const cancelRequested = { current: false };
 	const handleOpenChange = (open) => {
 		if (!open) {
-			local.onCancel?.();
+			const wasCancelled = cancelRequested.current;
+			cancelRequested.current = false;
+			if (wasCancelled) local.onCancel?.();
 			local.onClose?.();
-		} else local.onOpen?.();
+		} else {
+			cancelRequested.current = false;
+			local.onOpen?.();
+		}
 		local.onOpenChange?.(open);
 	};
 	const handleCancel = () => {
 		if (read(local.loading)) return;
+		cancelRequested.current = true;
 		handleOpenChange(false);
 	};
 	const handleConfirm = () => {
@@ -250,6 +257,12 @@ var Dialog$1 = (props) => {
 			return read(local.open);
 		},
 		onOpenChange: handleOpenChange,
+		onEscapeKeyDown: () => {
+			cancelRequested.current = true;
+		},
+		onInteractOutside: () => {
+			if (read(local.closeOnInteractOutside)) cancelRequested.current = true;
+		},
 		get lazyMount() {
 			return local.lazyMount;
 		},
@@ -288,6 +301,9 @@ var Dialog$1 = (props) => {
 					insert(_el0, () => !isSheet && (local.closeable ?? true) && jsx(Dialog.CloseTrigger, mergeProps({
 						"aria-label": "Close",
 						className: closeBtnClass,
+						onClick: () => {
+							cancelRequested.current = true;
+						},
 						children: "×"
 					})), _el4);
 					setProp(_el0, "className", () => headerClass);

package/dist/components/Drawer.js

@@ -24,7 +24,7 @@ var positionerClass = css({
 });
 var contentClass = css({
 	pointerEvents: "auto",
-	background: "var(--tsu-bg)",
+	background: "var(--tsu-surface)",
 	borderLeft: "1px solid var(--tsu-neutral-7)",
 	width: "min(320px, calc(100vw - 24px))",
 	height: "100%",
@@ -54,7 +54,7 @@ var titleIconClass = css({
 });
 var titleClass = css({
 	fontSize: "18px",
-	fontWeight: 700,
+	fontWeight: "var(--tsu-font-weight-semibold)",
 	margin: 0
 });
 var closeBtnClass = css({

package/dist/components/FileUpload.js

@@ -25,7 +25,7 @@ var dropzoneClass = css({
 	padding: "var(--tsu-spacing-xl)",
 	border: "2px dashed var(--tsu-accent-7)",
 	borderRadius: "var(--tsu-radius-l2-md)",
-	backgroundColor: "var(--tsu-bg)",
+	backgroundColor: "var(--tsu-surface)",
 	cursor: "pointer",
 	minHeight: "120px",
 	transition: "border-color var(--tsu-transition-fast), background-color var(--tsu-transition-fast)",
@@ -54,7 +54,7 @@ var itemClass = css({
 	alignItems: "center",
 	gap: "var(--tsu-spacing-sm)",
 	padding: "var(--tsu-spacing-sm) var(--tsu-spacing-md)",
-	backgroundColor: "var(--tsu-bg)",
+	backgroundColor: "var(--tsu-surface)",
 	border: "1px solid var(--tsu-neutral-5)",
 	borderRadius: "var(--tsu-radius-l2-md)"
 });
@@ -92,7 +92,7 @@ var clearClass = css({
 	padding: "var(--tsu-spacing-sm) var(--tsu-spacing-md)",
 	border: "1px solid var(--tsu-neutral-7)",
 	borderRadius: "var(--tsu-radius-l2-md)",
-	backgroundColor: "var(--tsu-bg)",
+	backgroundColor: "var(--tsu-surface)",
 	color: "var(--tsu-neutral-11)",
 	fontSize: "var(--tsu-font-size-sm)",
 	cursor: "pointer",

package/dist/components/FilterGroup.js

@@ -51,7 +51,7 @@ var stickyClass = css({
 	position: "sticky",
 	top: 0,
 	zIndex: "var(--tsu-z-dropdown)",
-	backgroundColor: "var(--tsu-bg)"
+	backgroundColor: "var(--tsu-surface)"
 });
 var allClass = css({
 	display: "flex",

package/dist/components/Icon.js

@@ -4,6 +4,23 @@ import { mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
 //#region src/components/Icon.jsx
 var _tmpl = template("<span></span>");
 var read = (v) => typeof v === "function" ? v() : v;
+var sanitizeSvg = (svgString) => {
+	let doc;
+	try {
+		doc = new DOMParser().parseFromString(svgString, "image/svg+xml");
+	} catch {
+		return "";
+	}
+	if (!doc || doc.querySelector("parsererror")) return "";
+	const svg = doc.querySelector("svg");
+	if (!svg) return "";
+	svg.querySelectorAll("script").forEach((el) => {
+		el.remove();
+	});
+	const all = [svg, ...Array.from(svg.querySelectorAll("*"))];
+	for (const el of all) for (const attr of Array.from(el.attributes)) if (attr.name.toLowerCase().startsWith("on") || /^\s*javascript:/i.test(attr.value)) el.removeAttribute(attr.name);
+	return svg.outerHTML;
+};
 var iconClass = css({
 	display: "inline-flex",
 	alignItems: "center",
@@ -37,7 +54,9 @@ var Icon = (props = {}) => {
 			"--icon-sw": sw
 		};
 		const setEl = (el) => {
-			if (el && el.innerHTML !== svgContent) el.innerHTML = svgContent;
+			if (!el) return;
+			const safe = sanitizeSvg(svgContent);
+			if (el.innerHTML !== safe) el.innerHTML = safe;
 		};
 		return (() => {
 			const _el0 = _tmpl.cloneNode(true);

package/dist/components/Input.js

@@ -56,7 +56,7 @@ var sizeClasses = {
 };
 var variantClasses = {
 	solid: css({
-		backgroundColor: "var(--tsu-neutral-3)",
+		backgroundColor: "var(--tsu-surface-raised)",
 		border: "1px solid transparent",
 		color: "var(--tsu-fg)",
 		"&:focus-within": {

package/dist/components/Listbox.js

@@ -4,7 +4,7 @@ import { Listbox } from "@plastic-js/ark";
 import { splitProps } from "@plastic-js/plastic";
 //#region src/components/Listbox.jsx
 css({
-	backgroundColor: "var(--tsu-bg)",
+	backgroundColor: "var(--tsu-surface)",
 	border: "1px solid var(--tsu-neutral-6)",
 	borderRadius: "var(--tsu-radius-l2-md)",
 	boxShadow: "var(--tsu-shadow-lg)",

package/dist/components/Menu.js

@@ -6,7 +6,7 @@ import { splitProps } from "@plastic-js/plastic";
 //#region src/components/Menu.jsx
 var positionerClass = css({ zIndex: "var(--tsu-z-dropdown)" });
 var contentClass = css({
-	backgroundColor: "var(--tsu-bg)",
+	backgroundColor: "var(--tsu-surface)",
 	border: "1px solid var(--tsu-neutral-6)",
 	borderRadius: "var(--tsu-radius-l2-md)",
 	boxShadow: "var(--tsu-shadow-lg)",

package/dist/components/MoneyInput.js

@@ -8,7 +8,7 @@ var affixSuffixClass = css({
 	color: "var(--tsu-fg)",
 	fontWeight: "var(--tsu-font-weight-semibold)",
 	paddingLeft: "10px",
-	marginLeft: "4px",
+	marginLeft: "var(--tsu-spacing-xs)",
 	borderLeft: "1px solid var(--tsu-neutral-7)"
 });
 var read = (value) => {

package/dist/components/NumberInput.js

@@ -10,7 +10,7 @@ var rootClass = css({
 	alignItems: "center",
 	border: "1px solid var(--tsu-accent-8)",
 	borderRadius: "var(--tsu-radius-l1-md)",
-	backgroundColor: "var(--tsu-bg)",
+	backgroundColor: "var(--tsu-surface)",
 	overflow: "hidden",
 	"&:focus-within": { borderColor: "var(--tsu-focus-border)" }
 });

package/dist/components/Pagination.js

@@ -18,7 +18,7 @@ var itemClass = css({
 	padding: "0 var(--tsu-spacing-sm)",
 	border: "1px solid var(--tsu-neutral-5)",
 	borderRadius: "var(--tsu-radius-l2-md)",
-	backgroundColor: "var(--tsu-bg)",
+	backgroundColor: "var(--tsu-surface)",
 	color: "var(--tsu-neutral-11)",
 	fontSize: "var(--tsu-font-size-sm)",
 	fontWeight: "var(--tsu-font-weight-medium)",

package/dist/components/Popover.js

@@ -21,7 +21,7 @@ var positionerClass = css({
 });
 var contentClass = css({
 	padding: "var(--tsu-container-padding-sm)",
-	backgroundColor: "var(--tsu-bg)",
+	backgroundColor: "var(--tsu-surface)",
 	borderRadius: "var(--tsu-radius-l2-md)",
 	boxShadow: "var(--tsu-shadow-lg)",
 	border: "1px solid var(--tsu-neutral-6)",
@@ -30,7 +30,7 @@ var contentClass = css({
 });
 var arrowClass = css({
 	"--arrow-size": "8px",
-	"--arrow-background": "var(--tsu-bg)"
+	"--arrow-background": "var(--tsu-surface)"
 });
 var closeTriggerClass = css({
 	display: "flex",

package/dist/components/RadioGroup.js

@@ -38,7 +38,7 @@ var itemControlClass = css({
 	height: "20px",
 	borderRadius: "50%",
 	border: "2px solid var(--tsu-accent-8)",
-	background: "var(--tsu-bg)",
+	background: "var(--tsu-surface)",
 	display: "flex",
 	alignItems: "center",
 	justifyContent: "center",