@plastic-js/tsumiki 0.1.27 → 0.1.29

package/dist/components/BackToTop.js

@@ -0,0 +1,99 @@
+import { insert, setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
+import { createSignal, mergeProps as mergeProps$1, onCleanup, splitProps } from "@plastic-js/plastic";
+//#region src/components/BackToTop.jsx
+var _tmpl2 = template("<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><title>Back to top</title><path d=\"m18 15-6-6-6 6\"></path></svg>");
+var _tmpl = template("<button type=\"button\"></button>");
+var read = (v) => typeof v === "function" ? v() : v;
+var baseClass = css({
+	position: "fixed",
+	right: "var(--tsu-spacing-lg)",
+	bottom: "var(--tsu-spacing-xl)",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	width: "48px",
+	height: "48px",
+	border: "none",
+	borderRadius: "50%",
+	backgroundColor: "var(--tsu-accent-9)",
+	color: "var(--tsu-bg)",
+	boxShadow: "var(--tsu-shadow-md)",
+	cursor: "pointer",
+	userSelect: "none",
+	touchAction: "manipulation",
+	zIndex: 90,
+	opacity: 0,
+	transform: "scale(0.8)",
+	pointerEvents: "none",
+	transition: "opacity var(--tsu-transition-normal), transform var(--tsu-transition-normal)",
+	"&:active": { transform: "scale(0.9)" },
+	"&:focus-visible": {
+		outline: "2px solid var(--tsu-accent-8)",
+		outlineOffset: "2px"
+	}
+});
+var visibleClass = css({
+	opacity: 1,
+	transform: "scale(1)",
+	pointerEvents: "auto"
+});
+var iconClass = css({
+	display: "block",
+	width: "22px",
+	height: "22px"
+});
+var BackToTop = (props = {}) => {
+	const [local] = splitProps(mergeProps$1({ threshold: 200 }, props), [
+		"className",
+		"threshold",
+		"target",
+		"icon",
+		"aria-label",
+		"onClick"
+	]);
+	const visible = createSignal(false);
+	const getEl = () => typeof local.target === "function" ? local.target() : null;
+	const onScroll = () => {
+		const el = getEl();
+		visible((el ? el.scrollTop : window.scrollY) > read(local.threshold));
+	};
+	onCleanup(() => {
+		window.removeEventListener("scroll", onScroll, true);
+	});
+	window.addEventListener("scroll", onScroll, {
+		capture: true,
+		passive: true
+	});
+	const handleClick = () => {
+		const el = getEl();
+		if (el) el.scrollTo({
+			top: 0,
+			behavior: "smooth"
+		});
+		else window.scrollTo({
+			top: 0,
+			behavior: "smooth"
+		});
+		local.onClick?.();
+	};
+	return () => {
+		const _el0 = _tmpl.cloneNode(true);
+		insert(_el0, () => local.icon || (() => {
+			const _el0 = _tmpl2.cloneNode(true);
+			setProp(_el0, "className", () => iconClass);
+			return _el0;
+		})());
+		setProp(_el0, "className", () => [
+			baseClass,
+			visible() && visibleClass,
+			local.className
+		].filter(Boolean).join(" "));
+		setProp(_el0, "onClick", () => handleClick);
+		setProp(_el0, "aria-label", () => local["aria-label"] || "Back to top");
+		return _el0;
+	};
+};
+BackToTop.origin = { Root: "button" };
+//#endregion
+export { BackToTop as default };

package/dist/components/BottomNavigation.js

@@ -0,0 +1,98 @@
+import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
+import { Dynamic, mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
+//#region src/components/BottomNavigation.jsx
+var _tmpl = template("<span></span>");
+var read = (v) => typeof v === "function" ? v() : v;
+var rootClass = css({
+	position: "fixed",
+	insetInline: "0",
+	bottom: "0",
+	display: "flex",
+	justifyContent: "space-around",
+	alignItems: "center",
+	height: "56px",
+	paddingBottom: "env(safe-area-inset-bottom)",
+	backgroundColor: "var(--tsu-bg)",
+	borderTop: "1px solid var(--tsu-neutral-6)",
+	zIndex: "var(--tsu-z-base)"
+});
+var itemClass = css({
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center",
+	gap: "var(--tsu-spacing-xxs)",
+	padding: "4px 12px",
+	border: "none",
+	background: "none",
+	fontFamily: "inherit",
+	color: "var(--tsu-neutral-8)",
+	textDecoration: "none",
+	cursor: "pointer",
+	userSelect: "none",
+	touchAction: "manipulation",
+	transition: "color var(--tsu-transition-fast)",
+	"&[data-active]": { color: "var(--tsu-accent-11)" }
+});
+var iconClass = css({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	width: "24px",
+	height: "24px",
+	"& svg": {
+		width: "100%",
+		height: "100%"
+	}
+});
+var labelClass = css({
+	fontSize: "11px",
+	lineHeight: "14px",
+	fontWeight: 500
+});
+var BottomNavigationItem = (props = {}) => {
+	const [local, rest] = splitProps(props, [
+		"icon",
+		"label",
+		"active",
+		"href",
+		"onClick",
+		"className"
+	]);
+	return jsx(Dynamic, mergeProps({ component: local.href ? "a" : "button" }, () => local.href ? { href: local.href } : { type: "button" }, {
+		get className() {
+			return [itemClass, local.className].filter(Boolean).join(" ");
+		},
+		"data-active": () => read(local.active) ? "" : void 0,
+		get onClick() {
+			return local.onClick;
+		},
+		children: [() => {
+			const _el0 = _tmpl.cloneNode(true);
+			insert(_el0, () => local.icon);
+			setProp(_el0, "className", () => iconClass);
+			return _el0;
+		}, () => {
+			const _el0 = _tmpl.cloneNode(true);
+			insert(_el0, () => local.label);
+			setProp(_el0, "className", () => labelClass);
+			return _el0;
+		}]
+	}));
+};
+var BottomNavigation = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$1({}, props), ["className", "children"]);
+	return jsx("nav", mergeProps(rest, {
+		get className() {
+			return [rootClass, local.className].filter(Boolean).join(" ");
+		},
+		children: () => local.children
+	}));
+};
+BottomNavigation.Item = BottomNavigationItem;
+BottomNavigation.origin = {
+	Root: "nav",
+	Item: BottomNavigationItem
+};
+//#endregion
+export { BottomNavigationItem, BottomNavigation as default };

package/dist/components/Button.js

@@ -116,7 +116,10 @@ var loadingMaskClass = css({
 });
 var loadingSpinnerClass = css({
 	position: "relative",
-	zIndex: 1
+	zIndex: 1,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center"
 });
 var loadingClass = css({ pointerEvents: "none" });
 var read = (v) => typeof v === "function" ? v() : v;

package/dist/components/Card.js

@@ -0,0 +1,20 @@
+import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
+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)",
+	borderRadius: "var(--tsu-radius-l2-md)"
+});
+var Card = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$1({}, props), ["className", "children"]);
+	return jsx("div", mergeProps(rest, {
+		get className() {
+			return [baseClass, local.className].filter(Boolean).join(" ");
+		},
+		children: () => local.children
+	}));
+};
+Card.origin = { Root: "div" };
+//#endregion
+export { Card as default };

package/dist/components/Collapsible.js

@@ -1,12 +1,45 @@
-import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
+import { jsx, mergeProps, template } from "@plastic-js/plastic/jsx-runtime";
 import { css } from "@emotion/css";
 import { Collapsible } from "@plastic-js/ark";
 import { splitProps } from "@plastic-js/plastic";
 //#region src/components/Collapsible.jsx
+var _tmpl = template("<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"></path></svg>");
 var rootClass = css({
 	display: "flex",
 	flexDirection: "column"
 });
+var triggerClass = css({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: "var(--tsu-spacing-sm)",
+	width: "100%",
+	padding: "var(--tsu-comp-padding-y-sm) var(--tsu-comp-padding-x-sm)",
+	border: "none",
+	background: "var(--tsu-neutral-2)",
+	borderRadius: "var(--tsu-radius-l1-md)",
+	color: "var(--tsu-fg)",
+	fontSize: "var(--tsu-comp-font-size-sm)",
+	fontWeight: 500,
+	fontFamily: "inherit",
+	cursor: "pointer",
+	textAlign: "left",
+	touchAction: "manipulation",
+	transition: "background-color var(--tsu-transition-fast)",
+	"& svg": {
+		flexShrink: 0,
+		width: "16px",
+		height: "16px",
+		color: "var(--tsu-neutral-11)",
+		transition: "transform var(--tsu-transition-normal)"
+	},
+	"&[aria-expanded=\"true\"] svg": { transform: "rotate(180deg)" },
+	"&:disabled": {
+		opacity: .5,
+		cursor: "not-allowed"
+	}
+});
+var contentClass = css({ padding: "var(--tsu-spacing-sm) var(--tsu-spacing-md)" });
 var Collapsible$1 = (props = {}) => {
 	const [local, rest] = splitProps(props, ["className", "children"]);
 	return jsx(Collapsible.Root, mergeProps(rest, {
@@ -16,10 +49,25 @@ var Collapsible$1 = (props = {}) => {
 		children: () => local.children
 	}));
 };
+var CollapsibleTrigger = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className", "children"]);
+	return jsx(Collapsible.Trigger, mergeProps(rest, {
+		get className() {
+			return [triggerClass, local.className].filter(Boolean).join(" ");
+		},
+		children: [() => local.children, _tmpl.cloneNode(true)]
+	}));
+};
+var CollapsibleContent = (props = {}) => {
+	const [local, rest] = splitProps(props, ["className"]);
+	return jsx(Collapsible.Content, mergeProps(rest, { get className() {
+		return [contentClass, local.className].filter(Boolean).join(" ");
+	} }));
+};
 Collapsible$1.origin = {
 	Root: Collapsible.Root,
 	Trigger: Collapsible.Trigger,
 	Content: Collapsible.Content
 };
 //#endregion
-export { Collapsible$1 as default };
+export { CollapsibleContent, CollapsibleTrigger, Collapsible$1 as default };

package/dist/components/Field.js

@@ -1,11 +1,9 @@
 import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
 import { css } from "@emotion/css";
-import { mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
+import { Field } from "@plastic-js/ark";
+import { mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
 //#region src/components/Field.jsx
-var _tmpl4 = template("<p></p>");
-var _tmpl3 = template("<div></div>");
-var _tmpl2 = template("<span>*</span>");
-var _tmpl = template("<span><!><!></span>");
+var _tmpl = template("<div></div>");
 var rootClass = css({
 	display: "flex",
 	flexDirection: "column",
@@ -51,8 +49,8 @@ var helperTextClass = css({
 	flexBasis: "100%"
 });
 var read = (v) => typeof v === "function" ? v() : v;
-var Field = (props = {}) => {
-	const [local, rest] = splitProps(mergeProps$1({
+var Field$1 = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$2({
 		label: "",
 		error: "",
 		helper: "",
@@ -64,6 +62,9 @@ var Field = (props = {}) => {
 		"helper",
 		"required",
 		"compact",
+		"invalid",
+		"disabled",
+		"readOnly",
 		"className",
 		"children"
 	]);
@@ -72,52 +73,61 @@ var Field = (props = {}) => {
 	const hasError = () => !!error();
 	const hasHelper = () => !!helper();
 	const isCompact = () => read(local.compact);
-	return jsx("div", mergeProps(rest, {
-		className: () => [isCompact() ? compactRootClass : rootClass, local.className].filter(Boolean).join(" "),
-		get "data-invalid"() {
-			return hasError() ? "" : void 0;
+	const required = () => read(local.required);
+	const invalid = () => {
+		if (hasError()) return true;
+		return local.invalid === void 0 ? void 0 : read(local.invalid);
+	};
+	const disabled = () => local.disabled === void 0 ? void 0 : read(local.disabled);
+	const readOnly = () => local.readOnly === void 0 ? void 0 : read(local.readOnly);
+	return jsx(Field.Root, mergeProps(rest, {
+		get invalid() {
+			return invalid();
+		},
+		get disabled() {
+			return disabled();
+		},
+		get readOnly() {
+			return readOnly();
 		},
+		get required() {
+			return required();
+		},
+		className: () => [isCompact() ? compactRootClass : rootClass, local.className].filter(Boolean).join(" "),
 		children: [
-			() => {
-				const label = read(local.label);
-				if (!label) return null;
-				return () => {
-					const _el0 = _tmpl.cloneNode(true);
-					const _el1 = _el0.firstChild;
-					const _el2 = _el0.firstChild.nextSibling;
-					insert(_el0, () => label, _el1);
-					insert(_el0, () => read(local.required) && (() => {
-						const _el0 = _tmpl2.cloneNode(true);
-						setProp(_el0, "className", () => requiredClass);
-						return _el0;
-					})(), _el2);
-					setProp(_el0, "className", () => [labelClass, isCompact() && compactLabelClass].filter(Boolean).join(" "));
-					return _el0;
-				};
-			},
+			() => read(local.label) ? jsx(Field.Label, mergeProps({
+				className: () => [labelClass, isCompact() && compactLabelClass].filter(Boolean).join(" "),
+				children: [() => read(local.label), () => required() && jsx(Field.RequiredIndicator, mergeProps({
+					className: requiredClass,
+					children: "*"
+				}))]
+			})) : null,
 			() => isCompact() ? () => {
-				const _el0 = _tmpl3.cloneNode(true);
+				const _el0 = _tmpl.cloneNode(true);
 				insert(_el0, () => local.children);
 				setProp(_el0, "className", () => inputWrapClass);
 				return _el0;
 			} : local.children,
-			() => {
-				if (hasError()) return () => {
-					const _el0 = _tmpl4.cloneNode(true);
-					insert(_el0, () => error());
-					setProp(_el0, "className", () => errorTextClass);
-					return _el0;
-				};
-				if (hasHelper()) return () => {
-					const _el0 = _tmpl4.cloneNode(true);
-					insert(_el0, () => helper());
-					setProp(_el0, "className", () => helperTextClass);
-					return _el0;
-				};
-				return null;
-			}
+			() => hasError() ? jsx(Field.ErrorText, mergeProps({
+				className: errorTextClass,
+				children: () => error()
+			})) : hasHelper() ? jsx(Field.HelperText, mergeProps({
+				className: helperTextClass,
+				children: () => helper()
+			})) : null
 		]
 	}));
 };
+Field$1.origin = {
+	Root: Field.Root,
+	Label: Field.Label,
+	Input: Field.Input,
+	Textarea: Field.Textarea,
+	Select: Field.Select,
+	HelperText: Field.HelperText,
+	ErrorText: Field.ErrorText,
+	RequiredIndicator: Field.RequiredIndicator,
+	Item: Field.Item
+};
 //#endregion
-export { Field as default };
+export { Field$1 as default };

package/dist/components/Fieldset.js

@@ -1,9 +1,8 @@
-import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
 import { css } from "@emotion/css";
-import { mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
+import { Fieldset } from "@plastic-js/ark";
+import { mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
 //#region src/components/Fieldset.jsx
-var _tmpl2 = template("<p></p>");
-var _tmpl = template("<div></div>");
 var rootClass = css({
 	display: "flex",
 	flexDirection: "column",
@@ -25,8 +24,8 @@ var helperClass = css({
 	margin: 0
 });
 var read = (v) => typeof v === "function" ? v() : v;
-var Fieldset = (props = {}) => {
-	const [local, rest] = splitProps(mergeProps$1({
+var Fieldset$1 = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$2({
 		legend: "",
 		helper: ""
 	}, props), [
@@ -35,32 +34,26 @@ var Fieldset = (props = {}) => {
 		"className",
 		"children"
 	]);
-	return jsx("div", mergeProps(rest, {
+	return jsx(Fieldset.Root, mergeProps(rest, {
 		className: () => [rootClass, local.className].filter(Boolean).join(" "),
 		children: [
-			() => {
-				const legend = read(local.legend);
-				if (!legend) return null;
-				return () => {
-					const _el0 = _tmpl.cloneNode(true);
-					insert(_el0, () => legend);
-					setProp(_el0, "className", () => legendClass);
-					return _el0;
-				};
-			},
+			() => read(local.legend) ? jsx(Fieldset.Legend, mergeProps({
+				className: legendClass,
+				children: () => read(local.legend)
+			})) : null,
 			() => local.children,
-			() => {
-				const helper = read(local.helper);
-				if (!helper) return null;
-				return () => {
-					const _el0 = _tmpl2.cloneNode(true);
-					insert(_el0, () => helper);
-					setProp(_el0, "className", () => helperClass);
-					return _el0;
-				};
-			}
+			() => read(local.helper) ? jsx(Fieldset.HelperText, mergeProps({
+				className: helperClass,
+				children: () => read(local.helper)
+			})) : null
 		]
 	}));
 };
+Fieldset$1.origin = {
+	Root: Fieldset.Root,
+	Legend: Fieldset.Legend,
+	HelperText: Fieldset.HelperText,
+	ErrorText: Fieldset.ErrorText
+};
 //#endregion
-export { Fieldset as default };
+export { Fieldset$1 as default };

package/dist/components/FilterGroup.js

@@ -0,0 +1,150 @@
+import ToggleGroup, { ToggleGroupItem } from "./ToggleGroup.js";
+import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
+import { mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
+//#region src/components/FilterGroup.jsx
+var _tmpl = template("<button type=\"button\"></button>");
+var access = (v) => typeof v === "function" ? v() : v;
+var sizeVars = {
+	xs: {
+		"--_tg-padding-y": "var(--tsu-comp-padding-y-xs)",
+		"--_tg-padding-x": "var(--tsu-comp-padding-x-xs)",
+		"--_tg-font-size": "var(--tsu-comp-font-size-xs)",
+		"--_tg-radius": "var(--tsu-radius-l1-xs)"
+	},
+	sm: {
+		"--_tg-padding-y": "var(--tsu-comp-padding-y-sm)",
+		"--_tg-padding-x": "var(--tsu-comp-padding-x-sm)",
+		"--_tg-font-size": "var(--tsu-comp-font-size-sm)",
+		"--_tg-radius": "var(--tsu-radius-l1-sm)"
+	},
+	md: {
+		"--_tg-padding-y": "var(--tsu-comp-padding-y-md)",
+		"--_tg-padding-x": "var(--tsu-comp-padding-x-md)",
+		"--_tg-font-size": "var(--tsu-comp-font-size-md)",
+		"--_tg-radius": "var(--tsu-radius-l1-md)"
+	},
+	lg: {
+		"--_tg-padding-y": "var(--tsu-comp-padding-y-lg)",
+		"--_tg-padding-x": "var(--tsu-comp-padding-x-lg)",
+		"--_tg-font-size": "var(--tsu-comp-font-size-lg)",
+		"--_tg-radius": "var(--tsu-radius-l1-lg)"
+	},
+	xl: {
+		"--_tg-padding-y": "var(--tsu-comp-padding-y-xl)",
+		"--_tg-padding-x": "var(--tsu-comp-padding-x-xl)",
+		"--_tg-font-size": "var(--tsu-comp-font-size-xl)",
+		"--_tg-radius": "var(--tsu-radius-l1-xl)"
+	}
+};
+var defaultStyle = { "--_tg-border": "var(--tsu-accent-9)" };
+var rootClass = css({ display: "inline-flex" });
+var allClass = css({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	padding: "var(--_tg-padding-y, var(--tsu-comp-padding-y-md)) var(--_tg-padding-x, var(--tsu-comp-padding-x-md))",
+	border: "1px solid var(--_tg-border)",
+	borderRight: "none",
+	borderTopLeftRadius: "var(--_tg-radius, var(--tsu-radius-l1-md))",
+	borderBottomLeftRadius: "var(--_tg-radius, var(--tsu-radius-l1-md))",
+	background: "transparent",
+	color: "var(--tsu-neutral-11)",
+	fontSize: "var(--_tg-font-size, var(--tsu-comp-font-size-md))",
+	fontWeight: 500,
+	fontFamily: "inherit",
+	cursor: "pointer",
+	touchAction: "manipulation",
+	transition: "background-color var(--tsu-transition-fast), color var(--tsu-transition-fast)",
+	"&[data-state=\"on\"]": {
+		backgroundColor: "var(--tsu-accent-9)",
+		color: "var(--tsu-bg)"
+	},
+	"&:disabled": {
+		opacity: .5,
+		cursor: "not-allowed"
+	}
+});
+var tgStyle = {
+	borderTopLeftRadius: "0",
+	borderBottomLeftRadius: "0"
+};
+var FilterGroup = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$1({
+		size: "md",
+		allLabel: "All",
+		items: []
+	}, props), [
+		"className",
+		"items",
+		"value",
+		"onValueChange",
+		"allLabel",
+		"size",
+		"buttonClass",
+		"groupClass"
+	]);
+	const value = () => access(local.value) ?? [];
+	const allActive = () => value().length === 0;
+	const emit = (val) => {
+		local.onValueChange?.(val);
+	};
+	const handleAllClick = () => {
+		if (allActive()) return;
+		emit([]);
+	};
+	const handleChange = (value) => emit(value);
+	return jsx("div", mergeProps(rest, {
+		get className() {
+			return [rootClass, local.className].filter(Boolean).join(" ");
+		},
+		get style() {
+			return {
+				...defaultStyle,
+				...sizeVars[local.size]
+			};
+		},
+		children: [() => {
+			const _el0 = _tmpl.cloneNode(true);
+			insert(_el0, () => local.allLabel);
+			setProp(_el0, "className", () => [allClass, local.buttonClass].filter(Boolean).join(" "));
+			setProp(_el0, "data-state", () => allActive() ? "on" : "off");
+			setProp(_el0, "onClick", () => handleAllClick);
+			return _el0;
+		}, jsx(ToggleGroup, mergeProps({
+			multiple: true,
+			get size() {
+				return local.size;
+			},
+			get value() {
+				return allActive() ? [] : value();
+			},
+			onValueChange: handleChange,
+			get className() {
+				return local.groupClass;
+			},
+			style: tgStyle,
+			children: () => local.items.map((item) => jsx(ToggleGroupItem, mergeProps({
+				get key() {
+					return item.value;
+				},
+				get value() {
+					return item.value;
+				},
+				get disabled() {
+					return item.disabled;
+				},
+				get className() {
+					return local.buttonClass;
+				},
+				children: () => item.label
+			})))
+		}))]
+	}));
+};
+FilterGroup.origin = {
+	ToggleGroup,
+	ToggleGroupItem
+};
+//#endregion
+export { FilterGroup as default };

package/dist/components/Input.js

@@ -1,7 +1,8 @@
 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 { ark } from "@plastic-js/ark/factory";
+import { useFieldContext } from "@plastic-js/ark";
+import { createSignal, mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
+import { ark as ark$1 } from "@plastic-js/ark/factory";
 //#region src/components/Input.jsx
 var _tmpl5 = template("<svg fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" viewBox=\"0 0 24 24\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"></path><circle cx=\"12\" cy=\"12\" r=\"3\"></circle></svg>");
 var _tmpl4 = template("<svg fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" viewBox=\"0 0 24 24\"><path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94\"></path><path d=\"M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19\"></path><line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line></svg>");
@@ -128,7 +129,7 @@ var eyeButtonClass = css({
 });
 var read = (v) => typeof v === "function" ? v() : v;
 var Input = (props = {}) => {
-	const [local, rest] = splitProps(mergeProps$1({
+	const [local, rest] = splitProps(mergeProps$2({
 		solid: false,
 		size: "md",
 		disabled: false,
@@ -147,12 +148,17 @@ var Input = (props = {}) => {
 	]);
 	const showPassword = createSignal(false);
 	const isPassword = read(local.type) === "password";
+	const field = useFieldContext();
+	const fieldInvalid = () => field?.invalid?.() ?? false;
+	const fieldDisabled = () => field?.disabled?.() ?? false;
+	const effectiveInvalid = () => read(local.invalid) || fieldInvalid();
+	const effectiveDisabled = () => read(local.disabled) || fieldDisabled();
 	const wrapperClassName = () => [
 		wrapperClass,
 		sizeClasses[read(local.size)],
 		read(local.solid) ? variantClasses.solid : variantClasses.outline,
-		read(local.invalid) && errorClass,
-		read(local.disabled) && disabledClass,
+		effectiveInvalid() && errorClass,
+		effectiveDisabled() && disabledClass,
 		read(local.className)
 	].filter(Boolean).join(" ");
 	const inputType = () => {
@@ -178,11 +184,13 @@ var Input = (props = {}) => {
 			if (p == null) return null;
 			return renderAffix(p);
 		}, _el1);
-		insert(_el0, () => jsx(ark.input, mergeProps({ get ref() {
+		insert(_el0, () => jsx(ark$1.input, mergeProps({ get ref() {
 			return local.ref;
-		} }, rest, {
+		} }, () => field ? field.getInputProps() : {}, rest, {
 			type: inputType,
-			disabled: () => read(local.disabled),
+			"aria-invalid": () => effectiveInvalid() ? "true" : "false",
+			"data-invalid": () => effectiveInvalid() ? "" : void 0,
+			disabled: () => effectiveDisabled(),
 			className: () => [inputClass, read(local.inputClassName)].filter(Boolean).join(" ")
 		})), _el2);
 		insert(_el0, () => {
@@ -206,6 +214,6 @@ var Input = (props = {}) => {
 		return _el0;
 	};
 };
-Input.origin = { Root: ark.input };
+Input.origin = { Root: ark$1.input };
 //#endregion
 export { Input as default };

package/dist/components/Link.js

@@ -0,0 +1,32 @@
+import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
+import { mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
+//#region src/components/Link.jsx
+var baseClass = css({
+	color: "var(--tsu-accent-11)",
+	textDecoration: "none",
+	cursor: "pointer",
+	fontWeight: 500,
+	transition: "color var(--tsu-transition-fast), text-decoration-color var(--tsu-transition-fast)",
+	"&:hover": {
+		textDecoration: "underline",
+		textDecorationColor: "var(--tsu-accent-6)"
+	},
+	"&:focus-visible": {
+		outline: "2px solid var(--tsu-focus-border)",
+		outlineOffset: "2px",
+		borderRadius: "2px"
+	}
+});
+var Link = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$1({}, props), ["className", "children"]);
+	return jsx("a", mergeProps(rest, {
+		get className() {
+			return [baseClass, local.className].filter(Boolean).join(" ");
+		},
+		children: () => local.children
+	}));
+};
+Link.origin = { Root: "a" };
+//#endregion
+export { Link as default };

package/dist/components/SafeArea.js

@@ -0,0 +1,30 @@
+import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
+import { mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
+//#region src/components/SafeArea.jsx
+var read = (v) => typeof v === "function" ? v() : v;
+var baseClass = css({ boxSizing: "border-box" });
+var positionClasses = {
+	top: css({ paddingTop: "env(safe-area-inset-top)" }),
+	bottom: css({ paddingBottom: "env(safe-area-inset-bottom)" }),
+	left: css({ paddingLeft: "env(safe-area-inset-left)" }),
+	right: css({ paddingRight: "env(safe-area-inset-right)" })
+};
+var SafeArea = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$1({ position: "top" }, props), [
+		"className",
+		"children",
+		"position"
+	]);
+	return jsx("div", mergeProps(rest, {
+		className: () => [
+			baseClass,
+			positionClasses[read(local.position)],
+			local.className
+		].filter(Boolean).join(" "),
+		children: () => local.children
+	}));
+};
+SafeArea.origin = { Root: "div" };
+//#endregion
+export { SafeArea as default };

package/dist/components/Select.js

@@ -352,9 +352,7 @@ var Content = () => {
 	};
 	return jsx("div", mergeProps(() => part("positioner"), {
 		"aria-hidden": () => !ctx.open(),
-		get className() {
-			return `${overlayClass} ${ctx.open() ? openClass : ""}`;
-		},
+		className: () => `${overlayClass} ${ctx.open() ? openClass : ""}`,
 		children: [jsx("div", mergeProps(() => part("backdrop"), {
 			get className() {
 				return `${backdropClass} ${ctx.backdropClassName ?? ""}`;

package/dist/components/SelectPc.js

@@ -236,4 +236,4 @@ SelectPc.origin = {
 	HiddenSelect: Select.HiddenSelect
 };
 //#endregion
-export { SelectPc as default };
+export { SelectItem, SelectPc as default };

package/dist/components/StickyHeader.js

@@ -0,0 +1,35 @@
+import { jsx, mergeProps } from "@plastic-js/plastic/jsx-runtime";
+import { css } from "@emotion/css";
+import { mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
+//#region src/components/StickyHeader.jsx
+var read = (v) => typeof v === "function" ? v() : v;
+var baseClass = css({
+	position: "sticky",
+	zIndex: "var(--tsu-z-dropdown)",
+	backgroundColor: "var(--tsu-bg)"
+});
+var shadowClass = css({ boxShadow: "var(--tsu-shadow-sm)" });
+var StickyHeader = (props = {}) => {
+	const [local, rest] = splitProps(mergeProps$1({ offsetTop: 0 }, props), [
+		"className",
+		"children",
+		"offsetTop",
+		"shadow",
+		"style"
+	]);
+	return jsx("div", mergeProps(rest, {
+		className: () => [
+			baseClass,
+			read(local.shadow) && shadowClass,
+			local.className
+		].filter(Boolean).join(" "),
+		style: () => ({
+			top: `${read(local.offsetTop)}px`,
+			...typeof local.style === "object" && local.style ? local.style : void 0
+		}),
+		children: () => local.children
+	}));
+};
+StickyHeader.origin = { Root: "div" };
+//#endregion
+export { StickyHeader as default };

package/dist/components/TreeView.js

@@ -112,5 +112,11 @@ TreeView$1.origin = {
 	Label: TreeView.Label,
 	Tree: TreeView.Tree
 };
+TreeView$1.treeViewPart = TreeView.Root.treeViewPart;
+TreeViewBranch.treeViewPart = TreeView.Branch.treeViewPart;
+TreeViewBranchTrigger.treeViewPart = TreeView.BranchTrigger.treeViewPart;
+TreeViewBranchContent.treeViewPart = TreeView.BranchContent.treeViewPart;
+TreeViewBranchControl.treeViewPart = TreeView.BranchControl.treeViewPart;
+TreeViewItem.treeViewPart = TreeView.Item.treeViewPart;
 //#endregion
 export { TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchTrigger, TreeViewItem, TreeView$1 as default };

package/dist/index.js

@@ -1,16 +1,19 @@
 import AccordionRoot, { AccordionContent, AccordionItem, AccordionTrigger } from "./components/Accordion.js";
 import Avatar, { AvatarFallback, AvatarImage } from "./components/Avatar.js";
+import BackToTop from "./components/BackToTop.js";
+import BottomNavigation, { BottomNavigationItem } from "./components/BottomNavigation.js";
 import Portal_default from "./components/Portal.js";
 import BottomSheet from "./components/BottomSheet.js";
 import Spinner from "./components/Spinner.js";
 import Button from "./components/Button.js";
+import Card from "./components/Card.js";
 import Input$1 from "./components/Input.js";
 import CardNumberInput from "./components/CardNumberInput.js";
 import Carousel_default, { CarouselAutoplayTrigger, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselProgressText } from "./components/Carousel.js";
 import Checkbox from "./components/Checkbox.js";
 import Clipboard from "./components/Clipboard.js";
 import CloseButton from "./components/CloseButton.js";
-import Collapsible from "./components/Collapsible.js";
+import Collapsible, { CollapsibleContent, CollapsibleTrigger } from "./components/Collapsible.js";
 import ColorPicker from "./components/ColorPicker.js";
 import Root, { ComboboxContent, ComboboxItem, Input } from "./components/Combobox.js";
 import Icon from "./components/Icon.js";
@@ -23,6 +26,7 @@ import Fieldset from "./components/Fieldset.js";
 import FileUpload, { FileUploadClearTrigger, FileUploadItem, FileUploadItemGroup } from "./components/FileUpload.js";
 import FocusTrap_default from "./components/FocusTrap.js";
 import Listbox from "./components/Listbox.js";
+import Link from "./components/Link.js";
 import Menu, { MenuContent, MenuItem, MenuSeparator, MenuTrigger } from "./components/Menu.js";
 import MoneyInput from "./components/MoneyInput.js";
 import NumberInput from "./components/NumberInput.js";
@@ -32,14 +36,16 @@ import Presence_default from "./components/Presence.js";
 import Progress, { ProgressLabel } from "./components/Progress.js";
 import RadioGroup from "./components/RadioGroup.js";
 import RatingGroup from "./components/RatingGroup.js";
+import SafeArea from "./components/SafeArea.js";
 import SearchInput from "./components/SearchInput.js";
 import Select, { SelectTrigger } from "./components/Select.js";
-import SelectPc from "./components/SelectPc.js";
+import SelectPc, { SelectItem } from "./components/SelectPc.js";
 import SignaturePad, { ClearTrigger } from "./components/SignaturePad.js";
 import Skeleton from "./components/Skeleton.js";
 import Slider from "./components/Slider.js";
 import Splitter, { SplitterPanel, SplitterResizeTrigger, SplitterResizeTriggerIndicator } from "./components/Splitter.js";
 import Steps from "./components/Steps.js";
+import StickyHeader from "./components/StickyHeader.js";
 import SwipeReveal from "./components/SwipeReveal.js";
 import Switch from "./components/Switch.js";
 import Tabs from "./components/Tabs.js";
@@ -47,6 +53,7 @@ import TagsInput from "./components/TagsInput.js";
 import Toast, { ToastCloseTrigger, ToastDescription, ToastIcon, ToastTitle, ToastToaster, createToaster } from "./components/Toast.js";
 import Toggle from "./components/Toggle.js";
 import ToggleGroup, { ToggleGroupItem } from "./components/ToggleGroup.js";
+import FilterGroup from "./components/FilterGroup.js";
 import Tour, { TourCloseTrigger, TourContent } from "./components/Tour.js";
 import TreeView, { TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchTrigger, TreeViewItem } from "./components/TreeView.js";
-export { AccordionRoot as Accordion, AccordionContent, AccordionItem, AccordionTrigger, Avatar, AvatarFallback, AvatarImage, BottomSheet, Button, CardNumberInput, Carousel_default as Carousel, CarouselAutoplayTrigger, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselProgressText, Checkbox, ClearTrigger, Clipboard, CloseButton, Collapsible, ColorPicker, Root as Combobox, ComboboxContent, Input as ComboboxInput, ComboboxItem, ConfirmDialog, DateInput, Dialog, Root$1 as Drawer, DrawerContent, DrawerTrigger, Field, Fieldset, FileUpload, FileUploadClearTrigger, FileUploadItem, FileUploadItemGroup, FocusTrap_default as FocusTrap, Icon, Input$1 as Input, Listbox, Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, MoneyInput, NumberInput, Pagination, Popover, Portal_default as Portal, Presence_default as Presence, Progress, ProgressLabel, RadioGroup, RatingGroup, SearchInput, Select, SelectPc, SelectTrigger, SignaturePad, Skeleton, Slider, Spinner, Splitter, SplitterPanel, SplitterResizeTrigger, SplitterResizeTriggerIndicator, Steps, SwipeReveal, Switch, Tabs, TagsInput, Toast, ToastCloseTrigger, ToastDescription, ToastIcon, ToastTitle, ToastToaster, Toggle, ToggleGroup, ToggleGroupItem, Tour, TourCloseTrigger, TourContent, TreeView, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchTrigger, TreeViewItem, confirm, createToaster };
+export { AccordionRoot as Accordion, AccordionContent, AccordionItem, AccordionTrigger, Avatar, AvatarFallback, AvatarImage, BackToTop, BottomNavigation, BottomNavigationItem, BottomSheet, Button, Card, CardNumberInput, Carousel_default as Carousel, CarouselAutoplayTrigger, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselProgressText, Checkbox, ClearTrigger, Clipboard, CloseButton, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, Root as Combobox, ComboboxContent, Input as ComboboxInput, ComboboxItem, ConfirmDialog, DateInput, Dialog, Root$1 as Drawer, DrawerContent, DrawerTrigger, Field, Fieldset, FileUpload, FileUploadClearTrigger, FileUploadItem, FileUploadItemGroup, FilterGroup, FocusTrap_default as FocusTrap, Icon, Input$1 as Input, Link, Listbox, Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, MoneyInput, NumberInput, Pagination, Popover, Portal_default as Portal, Presence_default as Presence, Progress, ProgressLabel, RadioGroup, RatingGroup, SafeArea, SearchInput, Select, SelectItem, SelectPc, SelectTrigger, SignaturePad, Skeleton, Slider, Spinner, Splitter, SplitterPanel, SplitterResizeTrigger, SplitterResizeTriggerIndicator, Steps, StickyHeader, SwipeReveal, Switch, Tabs, TagsInput, Toast, ToastCloseTrigger, ToastDescription, ToastIcon, ToastTitle, ToastToaster, Toggle, ToggleGroup, ToggleGroupItem, Tour, TourCloseTrigger, TourContent, TreeView, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchTrigger, TreeViewItem, confirm, createToaster };

package/docs/api.md

@@ -52,31 +52,38 @@ The shared `size` prop accepts: `xs | sm | md | lg | xl | xxl` (default `md`).
 
 ### Field
 
-A labeled field wrapper combining a label, an error message and helper text.
+A labeled field wrapper combining a label, an error message and helper text, backed by `ArkField`.
 
-**Exports:** `Field`
+**Exports:** `Field` · Escape hatch: `Field.origin.{Root, Label, Input, Textarea, Select, HelperText, ErrorText, RequiredIndicator, Item}`
 
 | Prop | Type | Default | Description |
-|---|---|---|---|
-| `label` | `string` | `''` | Field label text. |
-| `error` | `string` | `''` | Error message; when non-empty the field renders in its error state. |
-| `helper` | `string` | `''` | Helper text below the control. |
+|---|---|---|---|---|
+| `label` | `string \| node` | `''` | Label content — any text or JSX. Styling is fixed. |
+| `error` | `string \| node` | `''` | Error content; when non-empty the field renders in its error state. Styling is fixed. |
+| `helper` | `string \| node` | `''` | Helper content below the control. Styling is fixed. |
 | `required` | `boolean` | `false` | Marks the label with a required indicator. |
 | `compact` | `boolean` | `false` | Renders in a compact (smaller) layout. |
+| `invalid` | `boolean` | `false` | Error state (also implied by a non-empty `error`). |
+| `disabled` | `boolean` | — | Disables the control; inherits from an enclosing `Fieldset`. |
+| `readOnly` | `boolean` | — | Read-only state. |
 | `children` | `node` | — | The input control (e.g. `<Input />`). |
 
+Passthrough: Ark `Field.Root` props (`id`, `ids`, …).
+
 ### Fieldset
 
-Groups several `Field`s with a legend.
+Groups several `Field`s with a legend, backed by `ArkFieldset` (native `<fieldset>`).
 
-**Exports:** `Fieldset`
+**Exports:** `Fieldset` · Escape hatch: `Fieldset.origin.{Root, Legend, HelperText, ErrorText}`
 
 | Prop | Type | Default | Description |
-|---|---|---|---|
-| `legend` | `string` | `''` | Fieldset legend text. |
-| `helper` | `string` | `''` | Helper text below the fields. |
+|---|---|---|---|---|
+| `legend` | `string \| node` | `''` | Legend content — any text or JSX. Styling is fixed. |
+| `helper` | `string \| node` | `''` | Helper content below the fields. Styling is fixed. |
 | `children` | `node` | — | `Field` components to group. |
 
+Passthrough: Ark `Fieldset.Root` props (`disabled`, `invalid`, …).
+
 ### Input
 
 **Exports:** `Input` · Escape hatch: `Input.origin.Root`
@@ -260,6 +267,23 @@ Passthrough: Ark `Root` props (`pressed`, `onPressedChange`, …).
 | `size` | `string` | `md` | See size values. |
 | `children` | `node` | — | `ToggleGroupItem` elements. |
 
+### FilterGroup
+
+Multi-select filter bar built on `ToggleGroup`. Renders an "All" toggle; selecting any item clears it, and an empty selection maps back to "All".
+
+**Exports:** `FilterGroup`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `value` | `array \| (() => array)` | — | Selected item values (controlled). |
+| `onValueChange` | `(value) => void` | — | Called with the new selection array. |
+| `items` | `array` | `[]` | Filter items (`{ value, label, disabled? }`). |
+| `allLabel` | `string` | `'All'` | Label for the clear/All toggle. |
+| `size` | `string` | `md` | See size values. |
+| `buttonClass` | `string` | — | Class applied to every button. |
+| `groupClass` | `string` | — | Class applied to the inner `ToggleGroup`. |
+| `className` | `string` | — | Root class. |
+
 ### RadioGroup
 
 **Exports:** `RadioGroup` · Escape hatch: `RadioGroup.origin.{Root, Label, Item, ItemControl, ItemText, ItemHiddenInput, Indicator}`
@@ -316,7 +340,7 @@ Mobile-optimized bottom-sheet select (draggable sheet overlay).
 
 Desktop (popover-style) select built on Ark `Select`.
 
-**Exports:** `SelectPc` · Escape hatch: `SelectPc.origin.{Root, Trigger, Indicator, Positioner, Content, List, Item, ItemText, ValueText, HiddenSelect}`
+**Exports:** `SelectPc`, `SelectItem` · Escape hatch: `SelectPc.origin.{Root, Trigger, Indicator, Positioner, Content, List, Item, ItemText, ValueText, HiddenSelect}`
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -325,7 +349,7 @@ Desktop (popover-style) select built on Ark `Select`.
 | `disabled` | `boolean` | `false` | Disabled. |
 | `invalid` | `boolean` | `false` | Error state. |
 | `positioning` | `object` | `{ sameWidth: true }` | Positioning options. |
-| `children` | `node` | — | `SelectPc.origin.Item` elements or custom content. |
+| `children` | `node` | — | `SelectItem` elements or custom content. |
 
 Passthrough: Ark `Root` props (`value`, `onValueChange`, `collection`, …). Note: unlike `Select`, it is **not** controlled-only at the tsumiki level — state flows through the Ark props.
 
@@ -404,18 +428,105 @@ Passthrough: Ark `Root` props (`value`, `onValueChange`, `orientation`, …).
 
 Passthrough: Ark `Root` props (`count`, `pageSize`, `page`, `onPageChange`, …).
 
+### BottomNavigation
+
+Fixed bottom navigation bar with icons and labels.
+
+**Exports:** `BottomNavigation`, `BottomNavigationItem`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `className` | `string` | — | Root class. |
+| `children` | `node` | — | `BottomNavigationItem` elements. |
+
+`BottomNavigationItem`:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `icon` | `node` | — | Icon content. |
+| `label` | `string` | — | Item label. |
+| `active` | `boolean` | `false` | Active state. |
+| `href` | `string` | — | When set, renders an `<a>` instead of a `<button>`. |
+| `onClick` | `() => void` | — | Click handler. |
+| `className` | `string` | — | Item class. |
+
+### BackToTop
+
+Floating scroll-to-top button that appears after scrolling past a threshold.
+
+**Exports:** `BackToTop`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `threshold` | `number` | `200` | Scroll offset (px) at which the button appears. |
+| `target` | `() => Element` | — | Scroll container. When omitted, uses the window. |
+| `icon` | `node` | — | Custom button icon. |
+| `onClick` | `() => void` | — | Click callback. |
+| `className` | `string` | — | Button class. |
+
 ---
 
 ## Content & Layout
 
 ### Collapsible
 
-**Exports:** `Collapsible` · Escape hatch: `Collapsible.origin.{Root, Trigger, Content}`
+**Exports:** `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent` · Escape hatch: `Collapsible.origin.{Root, Trigger, Content}`
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `className` | `string` | — | Root class. |
-| `children` | `node` | — | `Trigger` / `Content` elements. |
+| `children` | `node` | — | `CollapsibleTrigger` / `CollapsibleContent` elements. |
+
+### Card
+
+Container with themed background and border radius.
+
+**Exports:** `Card`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `className` | `string` | — | Root class. |
+| `children` | `node` | — | Content. |
+
+Passthrough: `div` DOM props (`style`, `onClick`, …).
+
+### Link
+
+Styled anchor.
+
+**Exports:** `Link`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `className` | `string` | — | Root class. |
+| `children` | `node` | — | Content. |
+
+Passthrough: native `<a>` props (`href`, `target`, `rel`, …).
+
+### SafeArea
+
+Adds device safe-area inset padding.
+
+**Exports:** `SafeArea`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `position` | `string` | `'top'` | `'top' \| 'bottom' \| 'left' \| 'right'`. |
+| `className` | `string` | — | Root class. |
+| `children` | `node` | — | Content. |
+
+### StickyHeader
+
+Header that sticks to the top while scrolling.
+
+**Exports:** `StickyHeader`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `offsetTop` | `number` | `0` | Sticky top offset (px). |
+| `shadow` | `boolean` | `false` | Add a drop shadow when stuck. |
+| `className` | `string` | — | Root class. |
+| `children` | `node` | — | Content. |
 
 ### Splitter
 

package/docs/component-api-pattern.md

@@ -28,7 +28,7 @@ Whether the component is built on top of a same-named Ark primitive, or implemen
 
 ### Component Matrix
 
-#### Completed · Ark-Backed (30)
+#### Completed · Ark-Backed (32)
 
 | Component | Ark Primitive |
 |-----------|---------------|
@@ -39,6 +39,8 @@ Whether the component is built on top of a same-named Ark primitive, or implemen
 | ColorPicker | `ArkColorPicker` |
 | Dialog | `ArkDialog` |
 | Drawer | `ArkDrawer` |
+| Field | `ArkField` |
+| Fieldset | `ArkFieldset` |
 | FileUpload | `ArkFileUpload` |
 | FocusTrap | `ArkFocusTrap` |
 | Input | `ark("input")` via factory |
@@ -63,7 +65,7 @@ Whether the component is built on top of a same-named Ark primitive, or implemen
 | Toggle | `ArkToggle` |
 | ToggleGroup | `ArkToggleGroup` |
 
-#### Completed · Custom-Built (15)
+#### Completed · Custom-Built (13)
 
 | Component | Built With |
 |-----------|------------|
@@ -73,8 +75,6 @@ Whether the component is built on top of a same-named Ark primitive, or implemen
 | CloseButton | `@emotion/css` |
 | ConfirmDialog | Composes `Dialog` |
 | DateInput | `DateWheel` utility |
-| Field | `@emotion/css` |
-| Fieldset | `@emotion/css` |
 | Icon | `@emotion/css` |
 | MoneyInput | Composes `Input` |
 | SearchInput | Composes `Input` |
@@ -103,11 +103,11 @@ Whether the component is built on top of a same-named Ark primitive, or implemen
 ```
                     Ark-Backed          Custom-Built
                   ┌─────────────────┬─────────────────┐
-    Completed     │       30        │       15        │  45
+    Completed     │       32        │       13        │  45
                   ├─────────────────┼─────────────────┤
  In Development   │        6        │        0        │   6
                   └─────────────────┴─────────────────┘
-                        36                   15          51
+                        38                   13          51
 ```
 
 ---

package/package.json

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