@plastic-js/tsumiki 0.1.57 → 0.1.59

package/README.md

@@ -69,8 +69,6 @@ function Example(){
 | `open` | `(() => boolean)` | — | Controlled open state (getter) — REQUIRED |
 | `onOpenChange` | `(isOpen: boolean) => void` | — | Called when open state changes |
 | `disabled` | `boolean` | `false` | Disable the select |
-| `clearable` | `boolean` | `false` | Show a "clear selection" row at the top |
-| `clearLabel` | `string` | `'None'` | Label for the clear row |
 | `backdropClassName` | `string` | — | CSS class for the backdrop overlay |
 | `backdropStyle` | `object` | — | Inline style for the backdrop overlay |
 | `filter` | `boolean \| (item, query, itemToLabel) => boolean` | — | Enable filter: `true` for substring match, or a custom filter function |
@@ -103,7 +101,7 @@ The search input is auto-focused when the sheet opens and cleared when it closes
 
 ## 1. Project Nature
 
-**Tsumiki** (`@plastic-js/tsumiki`) is a mobile-first UI component library for the [Plastic JS](https://github.com/plastic-js/plastic) reactive framework. It provides 51 production-grade, accessible components built on top of headless UI primitives from Ark UI, styled with a Radix Colors-based design token system.
+**Tsumiki** (`@plastic-js/tsumiki`) is a mobile-first UI component library for the [Plastic JS](https://github.com/plastic-js/plastic) reactive framework. It provides 53 production-grade, accessible components built on top of headless UI primitives from Ark UI, styled with a Radix Colors-based design token system.
 
 The name "tsumiki" (積み木) means "building blocks" in Japanese — the library is designed to be composable, tree-shakable, and themeable.
 
@@ -152,7 +150,7 @@ Every tsumiki component wraps a corresponding `@plastic-js/ark` primitive:
 import { Switch as ArkSwitch } from '@plastic-js/ark'
 ```
 
-The Ark import is always aliased with an `Ark` prefix to distinguish it from the tsumiki component being defined. All 36 Ark module components have corresponding tsumiki implementations, plus 15 additional custom/project-specific components (Button, Input, Skeleton, ConfirmDialog, mobile variants, etc.).
+The Ark import is always aliased with an `Ark` prefix to distinguish it from the tsumiki component being defined. All 40 Ark-backed components have corresponding tsumiki implementations, plus 13 additional custom/project-specific components (CardNumberInput, ConfirmDialog, Select, Skeleton, mobile variants, etc.).
 
 ---
 

package/dist/components/Badge.js

@@ -5,79 +5,100 @@ import { ark } from "@plastic-js/ark/factory";
 //#region src/components/Badge.jsx
 var _tmpl = template("<span data-part=\"dot\" aria-hidden=\"true\"></span>");
 var baseClass = css({
-	"--_badge-bg": "transparent",
-	"--_badge-fg": "transparent",
-	"--_badge-border": "transparent",
+	"--_badge-solid-bg": "transparent",
+	"--_badge-solid-fg": "transparent",
+	"--_badge-surface-bg": "transparent",
+	"--_badge-surface-border": "transparent",
+	"--_badge-surface-fg": "transparent",
+	"--_badge-subtle-bg": "transparent",
+	"--_badge-subtle-fg": "transparent",
+	"--_badge-outline-border": "transparent",
+	"--_badge-outline-fg": "transparent",
 	display: "inline-flex",
 	alignItems: "center",
 	justifyContent: "center",
 	gap: "var(--tsu-spacing-xs)",
-	border: "1px solid var(--_badge-border)",
+	border: "1px solid transparent",
 	borderRadius: "var(--tsu-radius-round)",
-	backgroundColor: "var(--_badge-bg)",
-	color: "var(--_badge-fg)",
 	fontFamily: "inherit",
 	fontWeight: "var(--tsu-font-weight-medium)",
 	lineHeight: 1,
-	whiteSpace: "nowrap"
+	fontVariantNumeric: "tabular-nums",
+	whiteSpace: "nowrap",
+	userSelect: "none"
 });
 var solidClass = css({
-	backgroundColor: "var(--_badge-bg)",
-	color: "var(--_badge-fg)",
-	border: "1px solid var(--_badge-border)"
+	backgroundColor: "var(--_badge-solid-bg)",
+	color: "var(--_badge-solid-fg)"
+});
+var surfaceClass = css({
+	backgroundColor: "var(--_badge-surface-bg)",
+	borderColor: "var(--_badge-surface-border)",
+	color: "var(--_badge-surface-fg)"
+});
+var subtleClass = css({
+	backgroundColor: "var(--_badge-subtle-bg)",
+	color: "var(--_badge-subtle-fg)"
 });
 var outlineClass = css({
-	backgroundColor: "transparent",
-	color: "var(--_badge-fg)",
-	border: "1px solid var(--_badge-border)"
+	borderColor: "var(--_badge-outline-border)",
+	color: "var(--_badge-outline-fg)"
 });
-var solidIntents = {
+var intentClasses = {
 	neutral: css({
-		"--_badge-bg": "var(--tsu-neutral-solid-bg)",
-		"--_badge-fg": "var(--tsu-neutral-solid-fg)",
-		"--_badge-border": "var(--tsu-neutral-solid-bg)"
-	}),
-	danger: css({
-		"--_badge-bg": "var(--tsu-danger-subtle-bg)",
-		"--_badge-fg": "var(--tsu-danger-subtle-fg)",
-		"--_badge-border": "var(--tsu-danger-subtle-bg)"
-	}),
-	success: css({
-		"--_badge-bg": "var(--tsu-success-subtle-bg)",
-		"--_badge-fg": "var(--tsu-success-subtle-fg)",
-		"--_badge-border": "var(--tsu-success-subtle-bg)"
-	}),
-	warning: css({
-		"--_badge-bg": "var(--tsu-warning-subtle-bg)",
-		"--_badge-fg": "var(--tsu-warning-subtle-fg)",
-		"--_badge-border": "var(--tsu-warning-subtle-bg)"
+		"--_badge-solid-bg": "var(--tsu-neutral-solid-bg)",
+		"--_badge-solid-fg": "var(--tsu-neutral-solid-fg)",
+		"--_badge-surface-bg": "var(--tsu-neutral-surface-bg)",
+		"--_badge-surface-border": "var(--tsu-neutral-surface-border)",
+		"--_badge-surface-fg": "var(--tsu-neutral-surface-fg)",
+		"--_badge-subtle-bg": "var(--tsu-neutral-subtle-bg)",
+		"--_badge-subtle-fg": "var(--tsu-neutral-subtle-fg)",
+		"--_badge-outline-border": "var(--tsu-neutral-outline-border)",
+		"--_badge-outline-fg": "var(--tsu-neutral-outline-fg)"
 	}),
 	accent: css({
-		"--_badge-bg": "var(--tsu-accent-subtle-bg)",
-		"--_badge-fg": "var(--tsu-accent-subtle-fg)",
-		"--_badge-border": "var(--tsu-accent-subtle-bg)"
-	})
-};
-var outlineIntents = {
-	neutral: css({
-		"--_badge-fg": "var(--tsu-text-primary)",
-		"--_badge-border": "var(--tsu-neutral-outline-border)"
+		"--_badge-solid-bg": "var(--tsu-accent-solid-bg)",
+		"--_badge-solid-fg": "var(--tsu-accent-solid-fg)",
+		"--_badge-surface-bg": "var(--tsu-accent-surface-bg)",
+		"--_badge-surface-border": "var(--tsu-accent-surface-border)",
+		"--_badge-surface-fg": "var(--tsu-accent-surface-fg)",
+		"--_badge-subtle-bg": "var(--tsu-accent-subtle-bg)",
+		"--_badge-subtle-fg": "var(--tsu-accent-subtle-fg)",
+		"--_badge-outline-border": "var(--tsu-accent-outline-border)",
+		"--_badge-outline-fg": "var(--tsu-accent-outline-fg)"
 	}),
 	danger: css({
-		"--_badge-fg": "var(--tsu-danger-outline-fg)",
-		"--_badge-border": "var(--tsu-danger-outline-border)"
+		"--_badge-solid-bg": "var(--tsu-danger-solid-bg)",
+		"--_badge-solid-fg": "var(--tsu-danger-solid-fg)",
+		"--_badge-surface-bg": "var(--tsu-danger-surface-bg)",
+		"--_badge-surface-border": "var(--tsu-danger-surface-border)",
+		"--_badge-surface-fg": "var(--tsu-danger-surface-fg)",
+		"--_badge-subtle-bg": "var(--tsu-danger-subtle-bg)",
+		"--_badge-subtle-fg": "var(--tsu-danger-subtle-fg)",
+		"--_badge-outline-border": "var(--tsu-danger-outline-border)",
+		"--_badge-outline-fg": "var(--tsu-danger-outline-fg)"
 	}),
 	success: css({
-		"--_badge-fg": "var(--tsu-success-outline-fg)",
-		"--_badge-border": "var(--tsu-success-outline-border)"
+		"--_badge-solid-bg": "var(--tsu-success-solid-bg)",
+		"--_badge-solid-fg": "var(--tsu-success-solid-fg)",
+		"--_badge-surface-bg": "var(--tsu-success-surface-bg)",
+		"--_badge-surface-border": "var(--tsu-success-surface-border)",
+		"--_badge-surface-fg": "var(--tsu-success-surface-fg)",
+		"--_badge-subtle-bg": "var(--tsu-success-subtle-bg)",
+		"--_badge-subtle-fg": "var(--tsu-success-subtle-fg)",
+		"--_badge-outline-border": "var(--tsu-success-outline-border)",
+		"--_badge-outline-fg": "var(--tsu-success-outline-fg)"
 	}),
 	warning: css({
-		"--_badge-fg": "var(--tsu-warning-outline-fg)",
-		"--_badge-border": "var(--tsu-warning-outline-border)"
-	}),
-	accent: css({
-		"--_badge-fg": "var(--tsu-accent-outline-fg)",
-		"--_badge-border": "var(--tsu-accent-outline-border)"
+		"--_badge-solid-bg": "var(--tsu-warning-solid-bg)",
+		"--_badge-solid-fg": "var(--tsu-warning-solid-fg)",
+		"--_badge-surface-bg": "var(--tsu-warning-surface-bg)",
+		"--_badge-surface-border": "var(--tsu-warning-surface-border)",
+		"--_badge-surface-fg": "var(--tsu-warning-surface-fg)",
+		"--_badge-subtle-bg": "var(--tsu-warning-subtle-bg)",
+		"--_badge-subtle-fg": "var(--tsu-warning-subtle-fg)",
+		"--_badge-outline-border": "var(--tsu-warning-outline-border)",
+		"--_badge-outline-fg": "var(--tsu-warning-outline-fg)"
 	})
 };
 var sizeClasses = {
@@ -132,22 +153,20 @@ var intentMap = {
 var read = (v) => typeof v === "function" ? v() : v;
 var variantClasses = {
 	solid: solidClass,
+	surface: surfaceClass,
+	subtle: subtleClass,
 	outline: outlineClass
 };
-var intentClasses = {
-	solid: solidIntents,
-	outline: outlineIntents
-};
 var Badge = (props = {}) => {
 	const [local, rest] = splitProps(mergeProps$1({
-		size: "md",
+		variant: "subtle",
 		intent: "default",
-		solid: true,
+		size: "md",
 		dot: false
 	}, props), [
-		"size",
+		"variant",
 		"intent",
-		"solid",
+		"size",
 		"dot",
 		"className",
 		"children"
@@ -155,13 +174,13 @@ var Badge = (props = {}) => {
 	return jsx(ark.span, mergeProps(rest, {
 		"data-part": "root",
 		className: () => {
-			const solid = read(local.solid) ? "solid" : "outline";
+			const variant = read(local.variant);
 			const intent = intentMap[read(local.intent)] || read(local.intent);
 			const size = read(local.size);
 			return [
 				baseClass,
-				variantClasses[solid],
-				intentClasses[solid][intent],
+				variantClasses[variant],
+				intentClasses[intent],
 				sizeClasses[size],
 				local.className
 			].filter(Boolean).join(" ");

package/dist/components/DatePicker.js

@@ -74,12 +74,13 @@ var intentClasses = {
 	neutral: css({
 		"--_di-border": "var(--tsu-neutral-outline-border)",
 		"--_di-border-focus": "var(--tsu-neutral-outline-border-hover)"
-	}),
-	danger: css({
-		"--_di-border": "var(--tsu-danger-outline-border)",
-		"--_di-border-focus": "var(--tsu-danger-outline-border-hover)"
 	})
 };
+var errorClass = css({
+	borderColor: "var(--tsu-danger-outline-border) !important",
+	"&:focus-visible": { borderColor: "var(--tsu-danger-outline-border) !important" }
+});
+var invalidWrapperClass = css({ "--_di-border-focus": "var(--tsu-danger-outline-border-hover)" });
 var triggerBaseClass = css({
 	width: "100%",
 	background: "transparent",
@@ -279,7 +280,8 @@ var DatePicker = (props = {}) => {
 	const [local] = splitProps(mergeProps$1({
 		size: "md",
 		disabled: false,
-		intent: "default"
+		intent: "default",
+		invalid: false
 	}, props), [
 		"value",
 		"onValueChange",
@@ -287,6 +289,7 @@ var DatePicker = (props = {}) => {
 		"disabled",
 		"size",
 		"intent",
+		"invalid",
 		"className"
 	]);
 	const open = createSignal(false);
@@ -342,7 +345,7 @@ var DatePicker = (props = {}) => {
 			return () => {
 				const _el0 = _tmpl2.cloneNode(true);
 				insert(_el0, () => displayDate ? formatDateLabel(displayDate) : local.placeholder || "Select date");
-				setProp(_el0, "className", () => `${triggerBaseClass} ${intentClasses[read(local.intent)]} ${triggerSizeClasses[read(local.size)]} ${displayDate ? triggerValueClass : triggerPlaceholderClass}`);
+				setProp(_el0, "className", () => `${triggerBaseClass} ${intentClasses[read(local.intent)] ?? intentClasses.default} ${read(local.invalid) ? errorClass : ""} ${triggerSizeClasses[read(local.size)]} ${displayDate ? triggerValueClass : triggerPlaceholderClass}`);
 				return _el0;
 			};
 		}, _el1);
@@ -352,7 +355,7 @@ var DatePicker = (props = {}) => {
 			strokeWidth: 1.5
 		})));
 		setProp(_el2, "className", () => calendarIconClass);
-		setProp(_el0, "className", () => `${triggerWrapperClass} ${isDisabled() ? triggerDisabledClass : ""} ${local.className || ""}`);
+		setProp(_el0, "className", () => `${triggerWrapperClass} ${read(local.invalid) ? invalidWrapperClass : ""} ${isDisabled() ? triggerDisabledClass : ""} ${local.className || ""}`);
 		setProp(_el0, "onClick", () => openSheet);
 		setProp(_el0, "aria-disabled", () => isDisabled());
 		return _el0;

package/dist/components/Input.js

@@ -75,8 +75,7 @@ var variantClasses = {
 };
 var intentClasses = {
 	default: css({ "--_input-border": "var(--tsu-accent-outline-border)" }),
-	neutral: css({ "--_input-border": "var(--tsu-neutral-outline-border)" }),
-	danger: css({ "--_input-border": "var(--tsu-danger-outline-border)" })
+	neutral: css({ "--_input-border": "var(--tsu-neutral-outline-border)" })
 };
 var errorClass = css({
 	borderColor: "var(--tsu-danger-outline-border) !important",
@@ -176,7 +175,7 @@ var Input = (props = {}) => {
 			wrapperClass,
 			sizeClasses[read(local.size)],
 			variant === "solid" ? variantClasses.solid : variantClasses.outline,
-			intentClasses[intent],
+			intentClasses[intent] ?? intentClasses.default,
 			effectiveInvalid() && errorClass,
 			effectiveDisabled() && disabledClass,
 			hasPrefix() && hasPrefixClass,

package/dist/components/Select.js

@@ -48,12 +48,12 @@ var intentClasses = {
 	neutral: css({
 		"--_sel-border": "var(--tsu-neutral-outline-border)",
 		"--_sel-border-focus": "var(--tsu-neutral-outline-border-hover)"
-	}),
-	danger: css({
-		"--_sel-border": "var(--tsu-danger-outline-border)",
-		"--_sel-border-focus": "var(--tsu-danger-outline-border-hover)"
 	})
 };
+var errorClass = css({
+	borderColor: "var(--tsu-danger-outline-border) !important",
+	"&:focus-visible": { borderColor: "var(--tsu-danger-outline-border) !important" }
+});
 var sizeClasses = {
 	xs: css({
 		height: "var(--tsu-comp-height-xs)",
@@ -213,7 +213,8 @@ var Select = (props) => {
 	const [local, rest] = splitProps(mergeProps$1({
 		size: "md",
 		variant: "outline",
-		intent: "default"
+		intent: "default",
+		invalid: false
 	}, props), [
 		"value",
 		"onValueChange",
@@ -229,7 +230,8 @@ var Select = (props) => {
 		"backdropStyle",
 		"filter",
 		"variant",
-		"intent"
+		"intent",
+		"invalid"
 	]);
 	const open = (v) => {
 		if (v === void 0) return read(local.open);
@@ -281,6 +283,7 @@ var Select = (props) => {
 		selectedItem,
 		setValue,
 		disabled: () => local.disabled ?? false,
+		invalid: () => local.invalid ?? false,
 		size: () => read(local.size),
 		variant: () => read(local.variant),
 		intent: () => {
@@ -307,7 +310,7 @@ var SelectTrigger = (props) => {
 	]);
 	return jsx("div", mergeProps(() => part("trigger"), {
 		get className() {
-			return `${triggerBaseClass} ${triggerVariants[ctx.variant() === "solid" ? "solid" : "outline"]} ${intentClasses[ctx.intent()]} ${sizeClasses[ctx.size()] || ""} ${local.className || ""}`;
+			return `${triggerBaseClass} ${triggerVariants[ctx.variant() === "solid" ? "solid" : "outline"]} ${intentClasses[ctx.intent()] ?? intentClasses.default} ${ctx.invalid() ? errorClass : ""} ${sizeClasses[ctx.size()] || ""} ${local.className || ""}`;
 		},
 		"data-disabled": () => ctx.disabled() ? "" : void 0,
 		onClick: () => {
@@ -377,7 +380,7 @@ var List = () => {
 			setProp(_el2, "ref", (el) => {
 				filterInputEl = el;
 			});
-			setProp(_el2, "className", () => `${filterInputClass} ${intentClasses[ctx.intent()]}`);
+			setProp(_el2, "className", () => `${filterInputClass} ${intentClasses[ctx.intent()] ?? intentClasses.default} ${ctx.invalid() ? errorClass : ""}`);
 			setProp(_el2, "value", () => ctx.query);
 			setProp(_el2, "onInput", (e) => ctx.query(e.target.value));
 			setProp(_el2, "onClick", (e) => e.stopPropagation());

package/dist/components/SelectPc.js

@@ -82,8 +82,7 @@ var variantClasses = {
 };
 var intentClasses = {
 	default: css({ "--_sel-border": "var(--tsu-accent-outline-border)" }),
-	neutral: css({ "--_sel-border": "var(--tsu-neutral-outline-border)" }),
-	danger: css({ "--_sel-border": "var(--tsu-danger-outline-border)" })
+	neutral: css({ "--_sel-border": "var(--tsu-neutral-outline-border)" })
 };
 var errorClass = css({
 	borderColor: "var(--tsu-danger-outline-border) !important",

package/dist/components/Tag.js

@@ -5,9 +5,19 @@ import { ark } from "@plastic-js/ark/factory";
 //#region src/components/Tag.jsx
 var _tmpl = template("<button type=\"button\" data-part=\"close\" aria-label=\"Close\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" width=\"10\" height=\"10\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\"></path></svg></button>");
 var baseClass = css({
+	"--_tag-solid-bg": "transparent",
+	"--_tag-solid-fg": "transparent",
+	"--_tag-surface-bg": "transparent",
+	"--_tag-surface-border": "transparent",
+	"--_tag-surface-fg": "transparent",
+	"--_tag-subtle-bg": "transparent",
+	"--_tag-subtle-fg": "transparent",
+	"--_tag-outline-border": "transparent",
+	"--_tag-outline-fg": "transparent",
 	display: "inline-flex",
 	alignItems: "center",
 	gap: "var(--tsu-spacing-xs)",
+	border: "1px solid transparent",
 	whiteSpace: "nowrap",
 	userSelect: "none",
 	borderRadius: "var(--tsu-radius-round)",
@@ -16,45 +26,77 @@ var baseClass = css({
 	transition: "background-color var(--tsu-transition-fast), color var(--tsu-transition-fast), border-color var(--tsu-transition-fast)"
 });
 var solidClass = css({
-	backgroundColor: "var(--_tag-bg)",
-	color: "var(--_tag-solid-fg)",
-	border: "1px solid transparent"
+	backgroundColor: "var(--_tag-solid-bg)",
+	color: "var(--_tag-solid-fg)"
+});
+var surfaceClass = css({
+	backgroundColor: "var(--_tag-surface-bg)",
+	borderColor: "var(--_tag-surface-border)",
+	color: "var(--_tag-surface-fg)"
+});
+var subtleClass = css({
+	backgroundColor: "var(--_tag-subtle-bg)",
+	color: "var(--_tag-subtle-fg)"
 });
 var outlineClass = css({
-	backgroundColor: "transparent",
-	color: "var(--_tag-outline-fg)",
-	border: "1px solid var(--_tag-border)"
+	borderColor: "var(--_tag-outline-border)",
+	color: "var(--_tag-outline-fg)"
 });
 var intentClasses = {
 	neutral: css({
-		"--_tag-bg": "var(--tsu-neutral-solid-bg)",
+		"--_tag-solid-bg": "var(--tsu-neutral-solid-bg)",
 		"--_tag-solid-fg": "var(--tsu-neutral-solid-fg)",
-		"--_tag-outline-fg": "var(--tsu-text-primary)",
-		"--_tag-border": "var(--tsu-neutral-outline-border)"
+		"--_tag-surface-bg": "var(--tsu-neutral-surface-bg)",
+		"--_tag-surface-border": "var(--tsu-neutral-surface-border)",
+		"--_tag-surface-fg": "var(--tsu-neutral-surface-fg)",
+		"--_tag-subtle-bg": "var(--tsu-neutral-subtle-bg)",
+		"--_tag-subtle-fg": "var(--tsu-neutral-subtle-fg)",
+		"--_tag-outline-border": "var(--tsu-neutral-outline-border)",
+		"--_tag-outline-fg": "var(--tsu-neutral-outline-fg)"
 	}),
 	success: css({
-		"--_tag-bg": "var(--tsu-success-solid-bg)",
+		"--_tag-solid-bg": "var(--tsu-success-solid-bg)",
 		"--_tag-solid-fg": "var(--tsu-success-solid-fg)",
-		"--_tag-outline-fg": "var(--tsu-success-outline-fg)",
-		"--_tag-border": "var(--tsu-success-outline-border)"
+		"--_tag-surface-bg": "var(--tsu-success-surface-bg)",
+		"--_tag-surface-border": "var(--tsu-success-surface-border)",
+		"--_tag-surface-fg": "var(--tsu-success-surface-fg)",
+		"--_tag-subtle-bg": "var(--tsu-success-subtle-bg)",
+		"--_tag-subtle-fg": "var(--tsu-success-subtle-fg)",
+		"--_tag-outline-border": "var(--tsu-success-outline-border)",
+		"--_tag-outline-fg": "var(--tsu-success-outline-fg)"
 	}),
 	warning: css({
-		"--_tag-bg": "var(--tsu-warning-solid-bg)",
+		"--_tag-solid-bg": "var(--tsu-warning-solid-bg)",
 		"--_tag-solid-fg": "var(--tsu-warning-solid-fg)",
-		"--_tag-outline-fg": "var(--tsu-warning-outline-fg)",
-		"--_tag-border": "var(--tsu-warning-outline-border)"
+		"--_tag-surface-bg": "var(--tsu-warning-surface-bg)",
+		"--_tag-surface-border": "var(--tsu-warning-surface-border)",
+		"--_tag-surface-fg": "var(--tsu-warning-surface-fg)",
+		"--_tag-subtle-bg": "var(--tsu-warning-subtle-bg)",
+		"--_tag-subtle-fg": "var(--tsu-warning-subtle-fg)",
+		"--_tag-outline-border": "var(--tsu-warning-outline-border)",
+		"--_tag-outline-fg": "var(--tsu-warning-outline-fg)"
 	}),
 	danger: css({
-		"--_tag-bg": "var(--tsu-danger-solid-bg)",
+		"--_tag-solid-bg": "var(--tsu-danger-solid-bg)",
 		"--_tag-solid-fg": "var(--tsu-danger-solid-fg)",
-		"--_tag-outline-fg": "var(--tsu-danger-outline-fg)",
-		"--_tag-border": "var(--tsu-danger-outline-border)"
+		"--_tag-surface-bg": "var(--tsu-danger-surface-bg)",
+		"--_tag-surface-border": "var(--tsu-danger-surface-border)",
+		"--_tag-surface-fg": "var(--tsu-danger-surface-fg)",
+		"--_tag-subtle-bg": "var(--tsu-danger-subtle-bg)",
+		"--_tag-subtle-fg": "var(--tsu-danger-subtle-fg)",
+		"--_tag-outline-border": "var(--tsu-danger-outline-border)",
+		"--_tag-outline-fg": "var(--tsu-danger-outline-fg)"
 	}),
 	accent: css({
-		"--_tag-bg": "var(--tsu-accent-solid-bg)",
+		"--_tag-solid-bg": "var(--tsu-accent-solid-bg)",
 		"--_tag-solid-fg": "var(--tsu-accent-solid-fg)",
-		"--_tag-outline-fg": "var(--tsu-accent-outline-fg)",
-		"--_tag-border": "var(--tsu-accent-outline-border)"
+		"--_tag-surface-bg": "var(--tsu-accent-surface-bg)",
+		"--_tag-surface-border": "var(--tsu-accent-surface-border)",
+		"--_tag-surface-fg": "var(--tsu-accent-surface-fg)",
+		"--_tag-subtle-bg": "var(--tsu-accent-subtle-bg)",
+		"--_tag-subtle-fg": "var(--tsu-accent-subtle-fg)",
+		"--_tag-outline-border": "var(--tsu-accent-outline-border)",
+		"--_tag-outline-fg": "var(--tsu-accent-outline-fg)"
 	})
 };
 var sizeClasses = {
@@ -121,13 +163,15 @@ var intentMap = {
 	info: "accent"
 };
 var read = (v) => typeof v === "function" ? v() : v;
-var variantClass = {
+var variantClasses = {
 	solid: solidClass,
+	surface: surfaceClass,
+	subtle: subtleClass,
 	outline: outlineClass
 };
 var Tag = (props = {}) => {
 	const [local, rest] = splitProps(mergeProps$1({
-		variant: "solid",
+		variant: "subtle",
 		intent: "default",
 		size: "sm",
 		closable: false
@@ -143,12 +187,12 @@ var Tag = (props = {}) => {
 	return jsx(ark.span, mergeProps(rest, {
 		"data-part": "root",
 		className: () => {
-			const variant = read(local.variant) === "outline" ? "outline" : "solid";
+			const variant = read(local.variant);
 			const intent = intentMap[read(local.intent)] || read(local.intent);
 			const size = read(local.size);
 			return [
 				baseClass,
-				variantClass[variant],
+				variantClasses[variant],
 				intentClasses[intent],
 				sizeClasses[size],
 				local.className

package/docs/api.md

@@ -129,7 +129,7 @@ Passthrough: Ark `Fieldset.Root` props (`disabled`, `invalid`, …).
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `variant` | `'outline' \| 'solid'` | `'outline'` | Filled background instead of outlined. |
-| `intent` | `string` | `'default'` | Border intent (`'default'`, `'neutral'`, `'danger'`). `neutral` applies only to the outline variant (ignored when `variant='solid'`). |
+| `intent` | `string` | `'default'` | Border intent (`'default'`, `'neutral'`). `neutral` applies only to the outline variant (ignored when `variant='solid'`). For error states use `invalid` instead. |
 | `size` | `string` | `md` | See size values. |
 | `disabled` | `boolean` | `false` | Disables the input. |
 | `invalid` | `boolean` | `false` | Renders the error/invalid style. |
@@ -243,7 +243,8 @@ Mobile-optimized bottom-sheet select (draggable sheet overlay).
 | `onOpenChange` | `(open) => void` | — | Open/close callback. |
 | `disabled` | `boolean` | `false` | Disabled. |
 | `variant` | `'outline' \| 'solid'` | `'outline'` | Filled trigger variant instead of outline. |
-| `intent` | `'default' \| 'neutral' \| 'danger'` | `'default'` | Border color for trigger and the search input. `neutral` applies only to the outline variant (ignored when `variant='solid'`). |
+| `intent` | `'default' \| 'neutral'` | `'default'` | Border color for trigger and the search input. `neutral` applies only to the outline variant (ignored when `variant='solid'`). For error states use `invalid` instead. |
+| `invalid` | `boolean` | `false` | Renders the error/invalid style (red border on the trigger and the search input). |
 | `filter` | `(item, query, itemToLabel) => boolean` | — | Custom filter for the search box. |
 | `placeholder` | `string` | — | Trigger placeholder. |
 | `backdropClassName` | `string` | — | Backdrop class. |
@@ -519,6 +520,37 @@ Pure-CSS spinner.
 
 Accepts no tsumiki-specific props; `className`/style/DOM props pass through.
 
+### Badge
+
+Pill-shaped status indicator.
+
+**Exports:** `Badge` · Escape hatch: `Badge.origin.Root`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'solid' \| 'surface' \| 'subtle' \| 'outline'` | `'subtle'` | Filled, panel-tinted, tinted, or outlined badge. |
+| `intent` | `string` | `'default'` | Color intent: `'default'`, `'neutral'`, `'accent'`, `'info'`, `'danger'`, `'success'`, `'warning'`. `default`/`info`/`intent` map to `neutral`/`accent`. |
+| `size` | `string` | `md` | See size values. |
+| `dot` | `boolean` | `false` | Show a small status dot before the label. |
+| `className` | `string` | — | Root class. |
+| `children` | `node` | — | Label content. |
+
+### Tag
+
+Closable pill label.
+
+**Exports:** `Tag` · Escape hatch: `Tag.origin.Root`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'solid' \| 'surface' \| 'subtle' \| 'outline'` | `'subtle'` | Filled, panel-tinted, tinted, or outlined tag. |
+| `intent` | `string` | `'default'` | Color intent: `'default'`, `'neutral'`, `'accent'`, `'info'`, `'danger'`, `'success'`, `'warning'`. `default`/`info` map to `neutral`/`accent`. |
+| `size` | `string` | `sm` | See size values. |
+| `closable` | `boolean` | `false` | Show a close (✕) button; renders `data-part="close"`. |
+| `onClose` | `() => void` | — | Called when the close button is clicked. |
+| `className` | `string` | — | Root class. |
+| `children` | `node` | — | Label content. |
+
 ---
 
 ## Feedback

package/docs/component-api-pattern.md

@@ -6,7 +6,7 @@ A single reference for `@plastic-js/tsumiki` covering the component inventory &
 
 ## Part 1 — Component Classification
 
-All 51 components are classified along two orthogonal axes.
+All 53 components are classified along two orthogonal axes.
 
 ### Axis 1: Development Lifecycle
 
@@ -28,11 +28,12 @@ Whether the component is built on top of a same-named Ark primitive, or implemen
 
 ### Component Matrix
 
-#### Completed · Ark-Backed (32)
+#### Completed · Ark-Backed (34)
 
 | Component | Ark Primitive |
 |-----------|---------------|
 | Avatar | `ArkAvatar` |
+| Badge | `ark("span")` via factory |
 | Button | `ark("button")` via factory |
 | Checkbox | `ArkCheckbox` |
 | Collapsible | `ArkCollapsible` |
@@ -60,6 +61,7 @@ Whether the component is built on top of a same-named Ark primitive, or implemen
 | Steps | `ArkSteps` |
 | Switch | `ArkSwitch` |
 | Tabs | `ArkTabs` |
+| Tag | `ark("span")` via factory |
 | TagsInput | `ArkTagsInput` |
 | Toast | `ArkToast` |
 | Toggle | `ArkToggle` |
@@ -103,11 +105,11 @@ Whether the component is built on top of a same-named Ark primitive, or implemen
 ```
                     Ark-Backed          Custom-Built
                   ┌─────────────────┬─────────────────┐
-    Completed     │       32        │       13        │  45
+    Completed     │       34        │       13        │  47
                   ├─────────────────┼─────────────────┤
  In Development   │        6        │        0        │   6
                   └─────────────────┴─────────────────┘
-                        38                   13          51
+                        40                   13          53
 ```
 
 ---

package/package.json

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