@plastic-js/tsumiki 0.1.52 → 0.1.54

package/dist/components/NumberInput.js

@@ -13,7 +13,7 @@ var rootBaseClass = css({
 });
 var variantClasses = {
 	solid: css({
-		backgroundColor: "var(--tsu-surface)",
+		backgroundColor: "var(--tsu-bg-control)",
 		border: "1px solid transparent",
 		"&:focus-within": {
 			backgroundColor: "var(--tsu-focus-bg)",
@@ -21,7 +21,7 @@ var variantClasses = {
 		}
 	}),
 	outline: css({
-		border: "1px solid var(--tsu-accent-8)",
+		border: "1px solid var(--tsu-accent-outline-border)",
 		"&:focus-within": {
 			backgroundColor: "var(--tsu-focus-bg)",
 			borderColor: "var(--tsu-focus-border)"
@@ -29,8 +29,8 @@ var variantClasses = {
 	})
 };
 var disabledClass = css({
-	borderColor: "var(--tsu-disabled-border)",
-	"& *": { color: "var(--tsu-disabled-fg)" }
+	opacity: "var(--tsu-disabled-opacity)",
+	cursor: "not-allowed"
 });
 var sizeClasses = {
 	xs: css({
@@ -62,8 +62,7 @@ var inputClass = css({
 	color: "var(--tsu-fg)",
 	fontFamily: "inherit",
 	textAlign: "center",
-	padding: 0,
-	"&:disabled": { color: "var(--tsu-disabled-fg)" }
+	padding: 0
 });
 var btnClass = css({
 	width: "28px",
@@ -73,14 +72,14 @@ var btnClass = css({
 	justifyContent: "center",
 	border: "none",
 	background: "transparent",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	cursor: "pointer",
 	fontFamily: "inherit",
 	fontSize: "14px",
 	touchAction: "manipulation",
-	"&:active:not(:disabled)": { backgroundColor: "var(--tsu-accent-3)" },
+	"&:active:not(:disabled)": { backgroundColor: "var(--tsu-pressed-accent)" },
 	"&:disabled": {
-		color: "var(--tsu-disabled-fg)",
+		color: "var(--tsu-text-subtle)",
 		cursor: "not-allowed"
 	}
 });
@@ -88,25 +87,25 @@ var read = (v) => typeof v === "function" ? v() : v;
 var NumberInput$1 = (props = {}) => {
 	const [local, rest] = splitProps(mergeProps$2({
 		size: "md",
-		solid: false,
+		variant: "outline",
 		disabled: false
 	}, props), [
 		"size",
-		"solid",
+		"variant",
 		"disabled",
 		"className",
 		"children"
 	]);
 	return () => {
 		const size = read(local.size);
-		const solid = read(local.solid);
+		const variant = read(local.variant) === "solid" ? "solid" : "outline";
 		const disabled = read(local.disabled);
 		return jsx(NumberInput.Root, mergeProps(rest, {
 			disabled,
 			get className() {
 				return [
 					rootBaseClass,
-					variantClasses[solid ? "solid" : "outline"],
+					variantClasses[variant],
 					sizeClasses[size],
 					disabled && disabledClass,
 					local.className

package/dist/components/Pagination.js

@@ -16,10 +16,10 @@ var itemClass = css({
 	minWidth: "var(--tsu-level-primary-md)",
 	height: "var(--tsu-level-primary-md)",
 	padding: "0 var(--tsu-spacing-sm)",
-	border: "1px solid var(--tsu-neutral-5)",
+	border: "1px solid var(--tsu-neutral-outline-border)",
 	borderRadius: "var(--tsu-radius-l2-md)",
-	backgroundColor: "var(--tsu-surface)",
-	color: "var(--tsu-neutral-11)",
+	backgroundColor: "var(--tsu-bg-panel)",
+	color: "var(--tsu-text-secondary)",
 	fontSize: "var(--tsu-font-size-sm)",
 	fontWeight: "var(--tsu-font-weight-medium)",
 	cursor: "pointer",
@@ -27,12 +27,12 @@ var itemClass = css({
 	touchAction: "manipulation",
 	transition: "background-color var(--tsu-transition-fast), border-color var(--tsu-transition-fast)",
 	"&[data-selected]": {
-		backgroundColor: "var(--tsu-accent-9)",
-		borderColor: "var(--tsu-accent-8)",
-		color: "var(--tsu-bg)"
+		backgroundColor: "var(--tsu-accent-solid-bg)",
+		borderColor: "var(--tsu-accent-solid-bg)",
+		color: "var(--tsu-accent-solid-fg)"
 	},
 	"&:disabled, &[data-disabled]": {
-		opacity: .5,
+		opacity: "var(--tsu-disabled-opacity)",
 		cursor: "not-allowed"
 	}
 });
@@ -41,7 +41,7 @@ var ellipsisClass = css({
 	alignItems: "center",
 	justifyContent: "center",
 	width: "var(--tsu-level-primary-md)",
-	color: "var(--tsu-neutral-9)",
+	color: "var(--tsu-text-subtle)",
 	fontSize: "var(--tsu-font-size-sm)",
 	userSelect: "none"
 });

package/dist/components/Popover.js

@@ -21,15 +21,15 @@ var positionerClass = css({
 });
 var contentClass = css({
 	padding: "var(--tsu-container-padding-sm)",
-	backgroundColor: "var(--tsu-surface)",
+	backgroundColor: "var(--tsu-bg-panel)",
 	borderRadius: "var(--tsu-radius-l2-md)",
 	boxShadow: "var(--tsu-shadow-lg)",
-	border: "1px solid var(--tsu-neutral-6)",
+	border: "1px solid var(--tsu-border)",
 	animation: `${popoverIn} var(--tsu-transition-fast)`
 });
 var arrowClass = css({
 	"--arrow-size": "8px",
-	"--arrow-background": "var(--tsu-surface)"
+	"--arrow-background": "var(--tsu-bg-panel)"
 });
 var closeTriggerClass = css({
 	display: "flex",
@@ -44,7 +44,7 @@ var closeTriggerClass = css({
 	border: "none",
 	borderRadius: "var(--tsu-radius-l1-md)",
 	background: "transparent",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	cursor: "pointer",
 	touchAction: "manipulation"
 });
@@ -59,7 +59,7 @@ var descriptionClass = css({
 	margin: 0,
 	marginTop: "4px",
 	fontSize: "var(--tsu-comp-font-size-sm)",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	lineHeight: 1.5
 });
 var Popover$1 = (props = {}) => {

package/dist/components/Progress.js

@@ -19,13 +19,13 @@ var rootClass = css({
 });
 var trackClass = css({
 	width: "100%",
-	backgroundColor: "var(--tsu-neutral-3)",
+	backgroundColor: "var(--tsu-bg-control)",
 	borderRadius: "999px",
 	overflow: "hidden"
 });
 var rangeClass = css({
 	height: "100%",
-	backgroundColor: "var(--tsu-accent-9)",
+	backgroundColor: "var(--tsu-accent-solid-bg)",
 	borderRadius: "999px",
 	transition: "width var(--tsu-transition-normal)"
 });
@@ -41,7 +41,7 @@ var stripedClass = css({
 });
 var labelClass = css({
 	fontSize: "var(--tsu-font-size-sm)",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	fontWeight: "var(--tsu-font-weight-medium)"
 });
 var sizeHeights = {

package/dist/components/RadioGroup.js

@@ -28,7 +28,7 @@ var itemClass = css({
 	touchAction: "manipulation",
 	"&:active": { backgroundColor: "transparent" },
 	"&[data-disabled]": {
-		color: "var(--tsu-disabled-fg)",
+		opacity: "var(--tsu-disabled-opacity)",
 		cursor: "not-allowed"
 	}
 });
@@ -36,8 +36,8 @@ var itemControlClass = css({
 	width: "20px",
 	height: "20px",
 	borderRadius: "50%",
-	border: "2px solid var(--tsu-accent-8)",
-	background: "var(--tsu-surface)",
+	border: "2px solid var(--tsu-accent-outline-border)",
+	background: "var(--tsu-bg-panel)",
 	display: "flex",
 	alignItems: "center",
 	justifyContent: "center",
@@ -45,18 +45,13 @@ var itemControlClass = css({
 	touchAction: "manipulation",
 	transition: "border-color var(--tsu-transition-fast), background-color var(--tsu-transition-fast)",
 	"&:active": { backgroundColor: "transparent" },
-	"&[data-state=\"checked\"]": { borderColor: "var(--tsu-accent-9)" },
-	"&[data-disabled]": {
-		borderColor: "var(--tsu-disabled-border)",
-		background: "var(--tsu-disabled-bg)"
-	}
+	"&[data-state=\"checked\"]": { borderColor: "var(--tsu-accent-solid-bg)" }
 });
 var indicatorClass = css({
 	width: "10px",
 	height: "10px",
 	borderRadius: "50%",
-	background: "var(--tsu-accent-9)",
-	"&[data-disabled]": { background: "var(--tsu-disabled-fg)" }
+	background: "var(--tsu-accent-solid-bg)"
 });
 var RadioGroup$1 = (props = {}) => {
 	const [local, rest] = splitProps(mergeProps$2({}, props), [

package/dist/components/RatingGroup.js

@@ -12,7 +12,7 @@ var rootClass = css({
 var labelClass = css({
 	fontSize: "var(--tsu-comp-font-size-sm)",
 	fontWeight: "var(--tsu-font-weight-medium)",
-	color: "var(--tsu-neutral-11)"
+	color: "var(--tsu-text-secondary)"
 });
 var controlClass = css({
 	display: "flex",
@@ -24,12 +24,12 @@ var itemClass = css({
 	padding: 0,
 	cursor: "pointer",
 	lineHeight: 0,
-	color: "var(--tsu-neutral-6)",
+	color: "var(--tsu-border)",
 	transition: "color var(--tsu-transition-fast)",
-	"&[data-highlighted]": { color: "var(--tsu-warning-9)" },
-	"&[data-checked]": { color: "var(--tsu-warning-9)" },
+	"&[data-highlighted]": { color: "var(--tsu-warning-solid-bg)" },
+	"&[data-checked]": { color: "var(--tsu-warning-solid-bg)" },
 	"&[data-disabled]": {
-		opacity: .4,
+		opacity: "var(--tsu-disabled-opacity)",
 		cursor: "not-allowed",
 		pointerEvents: "none"
 	}

package/dist/components/SearchInput.js

@@ -21,7 +21,10 @@ var clearButtonClass = css({
 		width: "100%",
 		height: "100%"
 	},
-	"&:hover": { color: "var(--tsu-fg)" }
+	"&:active": {
+		color: "var(--tsu-fg)",
+		backgroundColor: "var(--tsu-pressed)"
+	}
 });
 function SearchIcon() {
 	return _tmpl.cloneNode(true);

package/dist/components/Select.js

@@ -27,20 +27,32 @@ var triggerBaseClass = css({
 	fontFamily: "inherit",
 	textAlign: "left",
 	cursor: "pointer",
-	"&:focus-visible": { borderColor: "var(--tsu-accent-9)" },
+	"&:focus-visible": { borderColor: "var(--tsu-accent-outline-border-hover)" },
 	"&[data-disabled]": {
-		backgroundColor: "var(--tsu-disabled-bg)",
-		borderColor: "var(--tsu-disabled-border)",
-		color: "var(--tsu-disabled-fg)",
+		opacity: "var(--tsu-disabled-opacity)",
 		cursor: "not-allowed"
 	}
 });
 var triggerVariants = {
 	solid: css({
-		backgroundColor: "var(--tsu-surface)",
+		backgroundColor: "var(--tsu-bg-control)",
 		border: "1px solid transparent"
 	}),
-	outline: css({ border: "1px solid var(--tsu-accent-8)" })
+	outline: css({ border: "1px solid var(--_sel-border)" })
+};
+var intentClasses = {
+	default: css({
+		"--_sel-border": "var(--tsu-accent-outline-border)",
+		"--_sel-border-focus": "var(--tsu-accent-outline-border-hover)"
+	}),
+	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 sizeClasses = {
 	xs: css({
@@ -79,10 +91,10 @@ var triggerValueClass = css({
 	textOverflow: "ellipsis",
 	whiteSpace: "nowrap"
 });
-var triggerPlaceholderClass = css({ color: "var(--tsu-neutral-11)" });
+var triggerPlaceholderClass = css({ color: "var(--tsu-text-secondary)" });
 var triggerIndicatorClass = css({
 	flexShrink: 0,
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	display: "flex",
 	"& svg": {
 		width: "16px",
@@ -113,12 +125,16 @@ var itemClass = css({
 	fontFamily: "inherit",
 	textAlign: "left",
 	cursor: "pointer",
-	"&:active": { background: "rgba(255,255,255,0.06)" },
-	"&[data-selected]": { background: "var(--tsu-accent-3)" }
+	"&:active": { background: "var(--tsu-pressed)" },
+	"&[data-selected]": { background: "var(--tsu-pressed-accent)" },
+	"&:disabled": {
+		opacity: "var(--tsu-disabled-opacity)",
+		cursor: "not-allowed"
+	}
 });
 var itemIndicatorClass = css({
 	flexShrink: 0,
-	color: "var(--tsu-accent-9)",
+	color: "var(--tsu-accent-solid-bg)",
 	display: "flex",
 	"& svg": {
 		width: "18px",
@@ -133,15 +149,15 @@ var filterInputClass = css({
 	width: "100%",
 	height: "42px",
 	padding: "0 36px 0 40px",
-	background: "var(--tsu-surface)",
-	border: "1px solid var(--tsu-accent-8)",
+	background: "var(--tsu-bg-panel)",
+	border: "1px solid var(--_sel-border)",
 	borderRadius: "10px",
 	color: "var(--tsu-fg)",
 	fontSize: "16px",
 	fontFamily: "inherit",
 	boxSizing: "border-box",
-	"&:focus": { borderColor: "var(--tsu-accent-9)" },
-	"&::placeholder": { color: "var(--tsu-neutral-11)" },
+	"&:focus": { borderColor: "var(--_sel-border-focus)" },
+	"&::placeholder": { color: "var(--tsu-text-secondary)" },
 	"&::-webkit-search-cancel-button": { appearance: "none" }
 });
 var filterIconClass = css({
@@ -149,7 +165,7 @@ var filterIconClass = css({
 	left: "12px",
 	top: "50%",
 	transform: "translateY(-50%)",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	pointerEvents: "none",
 	display: "flex",
 	"& svg": {
@@ -171,7 +187,7 @@ var filterClearClass = css({
 	background: "none",
 	border: "none",
 	borderRadius: "6px",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	cursor: "pointer",
 	"& svg": {
 		width: "16px",
@@ -181,7 +197,7 @@ var filterClearClass = css({
 var noResultsClass = css({
 	padding: "20px 14px",
 	textAlign: "center",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	fontSize: "14px"
 });
 var SelectContext = createContext(null);
@@ -196,7 +212,8 @@ var read = (source) => {
 var Select = (props) => {
 	const [local, rest] = splitProps(mergeProps$1({
 		size: "md",
-		solid: false
+		variant: "outline",
+		intent: "default"
 	}, props), [
 		"value",
 		"onValueChange",
@@ -211,7 +228,8 @@ var Select = (props) => {
 		"backdropClassName",
 		"backdropStyle",
 		"filter",
-		"solid"
+		"variant",
+		"intent"
 	]);
 	const open = (v) => {
 		if (v === void 0) return read(local.open);
@@ -264,7 +282,11 @@ var Select = (props) => {
 		setValue,
 		disabled: () => local.disabled ?? false,
 		size: () => read(local.size),
-		solid: () => read(local.solid),
+		variant: () => read(local.variant),
+		intent: () => {
+			const intent = read(local.intent);
+			return intent === "neutral" && read(local.variant) === "solid" ? "default" : intent;
+		},
 		backdropClassName: local.backdropClassName,
 		backdropStyle: local.backdropStyle,
 		filter: local.filter,
@@ -285,7 +307,7 @@ var SelectTrigger = (props) => {
 	]);
 	return jsx("div", mergeProps(() => part("trigger"), {
 		get className() {
-			return `${triggerBaseClass} ${triggerVariants[ctx.solid() ? "solid" : "outline"]} ${sizeClasses[ctx.size()] || ""} ${local.className || ""}`;
+			return `${triggerBaseClass} ${triggerVariants[ctx.variant() === "solid" ? "solid" : "outline"]} ${intentClasses[ctx.intent()]} ${sizeClasses[ctx.size()] || ""} ${local.className || ""}`;
 		},
 		"data-disabled": () => ctx.disabled() ? "" : void 0,
 		onClick: () => {
@@ -317,14 +339,18 @@ var Item = (props) => {
 		"children"
 	]);
 	const value = () => local.item !== void 0 ? ctx.itemToValue(local.item) : local.value;
+	const disabled = () => (local.item !== void 0 ? local.item.disabled : local.disabled) ?? false;
 	return jsx("button", mergeProps(() => part("item"), {
 		get className() {
 			return `${itemClass} ${local.className || ""}`;
 		},
 		"data-selected": () => ctx.isSelected(value()) ? "" : void 0,
-		onClick: () => ctx.setValue(value()),
+		disabled: () => disabled(),
+		onClick: () => {
+			if (!disabled()) ctx.setValue(value());
+		},
 		type: "button"
-	}, rest, { children: [jsx("span", mergeProps(() => part("itemText"), { children: () => local.children ?? (local.item !== void 0 && ctx.itemToLabel(local.item)) })), () => ctx.isSelected(value()) && jsx("span", mergeProps(() => part("itemIndicator"), {
+	}, rest, { children: [jsx("span", mergeProps(() => part("itemText"), { children: () => local.children ?? (local.item !== void 0 && ctx.itemToLabel(local.item)) })), () => ctx.isSelected(value()) && !disabled() && jsx("span", mergeProps(() => part("itemIndicator"), {
 		className: itemIndicatorClass,
 		children: jsx(Icon, mergeProps({ svg: checkSvg }))
 	}))] }));
@@ -351,7 +377,7 @@ var List = () => {
 			setProp(_el2, "ref", (el) => {
 				filterInputEl = el;
 			});
-			setProp(_el2, "className", () => filterInputClass);
+			setProp(_el2, "className", () => `${filterInputClass} ${intentClasses[ctx.intent()]}`);
 			setProp(_el2, "value", () => ctx.query);
 			setProp(_el2, "onInput", (e) => ctx.query(e.target.value));
 			setProp(_el2, "onClick", (e) => e.stopPropagation());
@@ -398,7 +424,7 @@ var Content = () => {
 			return ctx.backdropClassName;
 		},
 		get backdropStyle() {
-			return ctx.backdropStyle ?? { background: "rgba(0,0,0,0.5)" };
+			return ctx.backdropStyle ?? { background: "var(--tsu-bg-overlay)" };
 		},
 		contentClassName: listBodyClass,
 		children: jsx(List, {})

package/dist/components/SelectPc.js

@@ -20,7 +20,7 @@ var triggerBaseClass = css({
 	cursor: "pointer",
 	textAlign: "start",
 	color: "var(--tsu-fg)",
-	"&[data-placeholder-shown]": { color: "var(--tsu-neutral-11)" }
+	"&[data-placeholder-shown]": { color: "var(--tsu-text-secondary)" }
 });
 var sizeClasses = {
 	xs: css({
@@ -56,12 +56,12 @@ var sizeClasses = {
 };
 var variantClasses = {
 	solid: css({
-		backgroundColor: "var(--tsu-neutral-3)",
+		backgroundColor: "var(--tsu-bg-control)",
 		border: "1px solid transparent",
-		"&:hover:not(:disabled)": { backgroundColor: "var(--tsu-neutral-4)" },
+		"&:hover:not(:disabled)": { backgroundColor: "var(--tsu-bg-control-hover)" },
 		"&:active:not(:disabled)": {
-			backgroundColor: "var(--tsu-neutral-5)",
-			borderColor: "var(--tsu-accent-9)"
+			backgroundColor: "var(--tsu-pressed)",
+			borderColor: "var(--tsu-accent-solid-bg)"
 		},
 		"&:focus-visible": {
 			backgroundColor: "var(--tsu-focus-bg)",
@@ -69,10 +69,10 @@ var variantClasses = {
 		}
 	}),
 	outline: css({
-		border: "1px solid var(--tsu-accent-8)",
+		border: "1px solid var(--_sel-border)",
 		"&:active:not(:disabled)": {
-			backgroundColor: "var(--tsu-accent-3)",
-			borderColor: "var(--tsu-accent-9)"
+			backgroundColor: "var(--tsu-pressed-accent)",
+			borderColor: "var(--tsu-accent-solid-bg)"
 		},
 		"&:focus-visible": {
 			backgroundColor: "var(--tsu-focus-bg)",
@@ -80,14 +80,17 @@ 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)" })
+};
 var errorClass = css({
-	borderColor: "var(--tsu-danger-9) !important",
-	"&:focus-visible": { borderColor: "var(--tsu-danger-9) !important" }
+	borderColor: "var(--tsu-danger-outline-border) !important",
+	"&:focus-visible": { borderColor: "var(--tsu-danger-outline-border) !important" }
 });
 var disabledClass = css({
-	backgroundColor: "var(--tsu-disabled-bg) !important",
-	borderColor: "var(--tsu-disabled-border) !important",
-	color: "var(--tsu-disabled-fg) !important",
+	opacity: "var(--tsu-disabled-opacity)",
 	cursor: "not-allowed"
 });
 var indicatorClass = css({
@@ -95,13 +98,13 @@ var indicatorClass = css({
 	display: "flex",
 	alignItems: "center",
 	transition: "transform var(--tsu-transition-fast)",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	"&[data-state=\"open\"]": { transform: "rotate(180deg)" }
 });
 var positionerClass = css({ zIndex: "var(--tsu-z-dropdown)" });
 var contentBaseClass = css({
-	backgroundColor: "var(--tsu-surface)",
-	border: "1px solid var(--tsu-neutral-6)",
+	backgroundColor: "var(--tsu-bg-panel)",
+	border: "1px solid var(--tsu-border)",
 	borderRadius: "var(--tsu-radius-l2-md)",
 	boxShadow: "var(--tsu-shadow-lg)",
 	overflow: "hidden"
@@ -116,13 +119,13 @@ var itemClass = css({
 	cursor: "pointer",
 	color: "var(--tsu-fg)",
 	minHeight: "var(--_item-min-height)",
-	"&:active": { backgroundColor: "var(--tsu-neutral-3)" },
+	"&:active": { backgroundColor: "var(--tsu-pressed)" },
 	"&[data-highlighted]": {
-		backgroundColor: "var(--tsu-accent-3)",
-		color: "var(--tsu-accent-9)"
+		backgroundColor: "var(--tsu-pressed-accent)",
+		color: "var(--tsu-accent-subtle-fg)"
 	},
 	"&[data-disabled]": {
-		color: "var(--tsu-disabled-fg)",
+		opacity: "var(--tsu-disabled-opacity)",
 		pointerEvents: "none"
 	}
 });
@@ -166,13 +169,15 @@ var SelectItem = (props = {}) => {
 };
 var SelectPc = (props = {}) => {
 	const [local, rest] = splitProps(mergeProps$2({
-		solid: false,
+		variant: "outline",
+		intent: "default",
 		size: "md",
 		disabled: false,
 		invalid: false,
 		positioning: { sameWidth: true }
 	}, props), [
-		"solid",
+		"variant",
+		"intent",
 		"size",
 		"disabled",
 		"invalid",
@@ -188,14 +193,20 @@ var SelectPc = (props = {}) => {
 		itemToValue: local.itemToValue ?? ((item) => String(item?.value ?? item?.id ?? item)),
 		itemToString: local.itemToString ?? ((item) => String(item?.label ?? item?.name ?? item))
 	});
-	const triggerClassName = () => [
-		triggerBaseClass,
-		sizeClasses[read(local.size)],
-		read(local.solid) ? variantClasses.solid : variantClasses.outline,
-		read(local.invalid) && errorClass,
-		read(local.disabled) && disabledClass,
-		read(local.className)
-	].filter(Boolean).join(" ");
+	const triggerClassName = () => {
+		const variant = read(local.variant) === "solid" ? "solid" : "outline";
+		let intent = read(local.intent);
+		if (intent === "neutral" && variant === "solid") intent = "default";
+		return [
+			triggerBaseClass,
+			sizeClasses[read(local.size)],
+			variant === "solid" ? variantClasses.solid : variantClasses.outline,
+			intentClasses[intent] ?? intentClasses.default,
+			read(local.invalid) && errorClass,
+			read(local.disabled) && disabledClass,
+			read(local.className)
+		].filter(Boolean).join(" ");
+	};
 	return jsx(Select.Root, mergeProps({
 		disabled: () => read(local.disabled),
 		collection

package/dist/components/SignaturePad.js

@@ -14,9 +14,9 @@ var labelClass = css({
 	fontWeight: "var(--tsu-font-weight-medium)"
 });
 var canvasClass = css({
-	border: "1px solid var(--tsu-neutral-7)",
+	border: "1px solid var(--tsu-border)",
 	borderRadius: "var(--tsu-radius-l2-md)",
-	backgroundColor: "var(--tsu-bg)",
+	backgroundColor: "var(--tsu-bg-page)",
 	color: "var(--tsu-fg)",
 	touchAction: "none",
 	width: "100%",
@@ -31,16 +31,15 @@ var clearClass = css({
 	justifyContent: "center",
 	gap: "6px",
 	padding: "var(--tsu-comp-padding-y-sm) var(--tsu-comp-padding-x-md)",
-	border: "1px solid var(--tsu-neutral-7)",
+	border: "1px solid var(--tsu-neutral-outline-border)",
 	borderRadius: "var(--tsu-radius-l2-md)",
-	background: "var(--tsu-bg)",
-	color: "var(--tsu-neutral-11)",
+	background: "var(--tsu-bg-page)",
+	color: "var(--tsu-text-secondary)",
 	fontSize: "var(--tsu-comp-font-size-sm)",
 	fontFamily: "inherit",
 	cursor: "pointer",
 	touchAction: "manipulation",
-	"&:hover": { borderColor: "var(--tsu-focus-border)" },
-	"&:active": { background: "var(--tsu-neutral-3)" }
+	"&:active": { background: "var(--tsu-pressed)" }
 });
 var ClearTrigger = (props = {}) => {
 	const [local, rest] = splitProps(props, ["className", "children"]);

package/dist/components/Skeleton.js

@@ -4,7 +4,7 @@ import { css, keyframes } from "@emotion/css";
 var _tmpl = template("<span></span>");
 var baseClass = css({
 	display: "block",
-	background: "linear-gradient(90deg, var(--tsu-neutral-6) 25%, var(--tsu-neutral-7) 50%, var(--tsu-neutral-6) 75%)",
+	background: "linear-gradient(90deg, var(--tsu-border) 25%, var(--tsu-border-strong) 50%, var(--tsu-border) 75%)",
 	backgroundSize: "200% 100%",
 	animation: `${keyframes({
 		"0%": { backgroundPosition: "-200% 0" },