@plastic-js/tsumiki 0.1.52 → 0.1.54

package/dist/components/Slider.js

@@ -27,25 +27,25 @@ var trackClass = css({
 	width: "100%",
 	height: "4px",
 	borderRadius: "2px",
-	backgroundColor: "var(--tsu-neutral-7)"
+	backgroundColor: "var(--tsu-border)"
 });
 var rangeClass = css({
 	position: "absolute",
 	height: "100%",
 	borderRadius: "2px",
-	backgroundColor: "var(--tsu-accent-9)"
+	backgroundColor: "var(--tsu-accent-solid-bg)"
 });
 var thumbClass = css({
 	width: "20px",
 	height: "20px",
 	borderRadius: "50%",
-	backgroundColor: "var(--tsu-accent-9)",
-	border: "2px solid var(--tsu-accent-9)",
-	boxShadow: "0 1px 3px rgba(0,0,0,0.4)",
+	backgroundColor: "var(--tsu-accent-solid-bg)",
+	border: "2px solid var(--tsu-accent-solid-bg)",
+	boxShadow: "var(--tsu-shadow-sm)",
 	cursor: "pointer",
 	zIndex: 2,
 	transition: "box-shadow var(--tsu-transition-fast)",
-	"&:focus-visible": { boxShadow: "0 0 0 3px var(--tsu-accent-3)" }
+	"&:focus-visible": { boxShadow: "0 0 0 3px var(--tsu-accent-subtle-bg)" }
 });
 var indicatorClass = css({
 	position: "absolute",
@@ -55,7 +55,7 @@ var indicatorClass = css({
 	padding: "4px 8px",
 	borderRadius: "6px",
 	backgroundColor: "var(--tsu-fg)",
-	color: "var(--tsu-bg)",
+	color: "var(--tsu-bg-page)",
 	fontSize: "13px",
 	lineHeight: 1,
 	fontFamily: "inherit",

package/dist/components/Spinner.js

@@ -6,7 +6,7 @@ var rotate = keyframes({
 	from: { transform: "rotate(0deg)" },
 	to: { transform: "rotate(360deg)" }
 });
-var Spinner = ({ size = 24, strokeWidth = 2, color = "var(--tsu-accent-9)", duration = "0.8s", easing = "cubic-bezier(0.4, 0, 0.2, 1)", className } = {}) => {
+var Spinner = ({ size = 24, strokeWidth = 2, color = "var(--tsu-accent-solid-bg)", duration = "0.8s", easing = "cubic-bezier(0.4, 0, 0.2, 1)", className } = {}) => {
 	const style = {
 		"--spinner-size": typeof size === "number" ? `${size}px` : size,
 		"--spinner-stroke": strokeWidth,

package/dist/components/Steps.js

@@ -60,13 +60,13 @@ var triggerClass = css({
 	fontFamily: "inherit",
 	touchAction: "manipulation",
 	"&[data-complete] .steps-title, &[data-current] .steps-title": {
-		color: "var(--tsu-accent-9)",
+		color: "var(--tsu-accent-subtle-fg)",
 		fontWeight: "var(--tsu-font-weight-semibold)"
 	}
 });
 var titleClass = css({
 	fontSize: "var(--tsu-font-size-xs)",
-	color: "var(--tsu-neutral-9)",
+	color: "var(--tsu-text-subtle)",
 	textAlign: "center"
 });
 var indicatorClass = css({
@@ -76,21 +76,21 @@ var indicatorClass = css({
 	width: "28px",
 	height: "28px",
 	borderRadius: "50%",
-	border: "2px solid var(--tsu-neutral-5)",
-	backgroundColor: "var(--tsu-surface)",
+	border: "2px solid var(--tsu-border)",
+	backgroundColor: "var(--tsu-bg-panel)",
 	fontSize: "var(--tsu-font-size-sm)",
 	fontWeight: "var(--tsu-font-weight-semibold)",
-	color: "var(--tsu-neutral-9)",
+	color: "var(--tsu-text-subtle)",
 	transition: "background-color var(--tsu-transition-fast), border-color var(--tsu-transition-fast), color var(--tsu-transition-fast)",
 	".steps-trigger[data-current] &": {
-		borderColor: "var(--tsu-accent-8)",
-		backgroundColor: "var(--tsu-accent-9)",
-		color: "var(--tsu-bg)"
+		borderColor: "var(--tsu-accent-outline-border)",
+		backgroundColor: "var(--tsu-accent-solid-bg)",
+		color: "var(--tsu-accent-solid-fg)"
 	},
 	".steps-trigger[data-complete] &": {
-		borderColor: "var(--tsu-accent-8)",
-		backgroundColor: "var(--tsu-accent-3)",
-		color: "var(--tsu-accent-9)"
+		borderColor: "var(--tsu-accent-outline-border)",
+		backgroundColor: "var(--tsu-accent-subtle-bg)",
+		color: "var(--tsu-accent-subtle-fg)"
 	},
 	".steps-trigger[data-complete] & .steps-indicator-index": { display: "none" },
 	".steps-trigger[data-complete] & .steps-indicator-check": { display: "flex" },
@@ -104,24 +104,24 @@ var indicatorClass = css({
 var separatorClass = css({
 	flex: 1,
 	height: "2px",
-	backgroundColor: "var(--tsu-neutral-5)",
+	backgroundColor: "var(--tsu-border)",
 	margin: "0 var(--tsu-spacing-xs)",
 	marginBottom: "20px",
-	"&[data-complete]": { backgroundColor: "var(--tsu-accent-9)" }
+	"&[data-complete]": { backgroundColor: "var(--tsu-accent-solid-bg)" }
 });
 var contentClass = css({
 	padding: "var(--tsu-spacing-md)",
-	backgroundColor: "var(--tsu-neutral-2)",
+	backgroundColor: "var(--tsu-bg-panel)",
 	borderRadius: "var(--tsu-radius-l2-md)",
 	fontSize: "var(--tsu-font-size-sm)",
-	color: "var(--tsu-neutral-11)"
+	color: "var(--tsu-text-secondary)"
 });
 var completedContentClass = css({
 	padding: "var(--tsu-spacing-md)",
 	textAlign: "center",
 	fontSize: "var(--tsu-font-size-md)",
 	fontWeight: "var(--tsu-font-weight-semibold)",
-	color: "var(--tsu-success-9)"
+	color: "var(--tsu-success-solid-bg)"
 });
 var navClass = css({
 	display: "flex",
@@ -130,24 +130,24 @@ var navClass = css({
 });
 var navBtnClass = css({
 	padding: "var(--tsu-spacing-sm) var(--tsu-spacing-md)",
-	border: "1px solid var(--tsu-accent-7)",
+	border: "1px solid var(--tsu-accent-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",
 	fontFamily: "inherit",
 	touchAction: "manipulation",
 	"&:disabled": {
-		opacity: .4,
+		opacity: "var(--tsu-disabled-opacity)",
 		cursor: "not-allowed"
 	}
 });
 var navNextClass = css({
-	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)"
 });
 var checkIcon = _tmpl.cloneNode(true);
 var Steps$1 = (props = {}) => {

package/dist/components/Switch.js

@@ -76,17 +76,21 @@ var rootClass = css({
 	touchAction: "manipulation",
 	"&[data-disabled]": { cursor: "not-allowed" }
 });
+var intentClasses = {
+	default: css({ "--_sw-track-checked": "var(--tsu-accent-solid-bg)" }),
+	danger: css({ "--_sw-track-checked": "var(--tsu-danger-solid-bg)" })
+};
 var controlClass = css({
 	position: "relative",
 	width: "var(--_sw-track-width, calc(2 * var(--tsu-comp-secondary-height-md)))",
 	height: "var(--_sw-track-height, var(--tsu-comp-secondary-height-md))",
 	flexShrink: 0,
 	borderRadius: "var(--_sw-track-radius, calc(var(--tsu-comp-secondary-height-md) / 2))",
-	backgroundColor: "var(--tsu-neutral-7)",
+	backgroundColor: "var(--tsu-border)",
 	transition: "background-color var(--tsu-transition-fast)",
-	"&[data-state=\"checked\"]": { backgroundColor: "var(--tsu-accent-9)" },
-	"&[data-disabled]": { backgroundColor: "var(--tsu-neutral-5)" },
-	"&[data-disabled][data-state=\"checked\"]": { backgroundColor: "var(--tsu-disabled-border)" }
+	"&[data-state=\"checked\"]": { backgroundColor: "var(--_sw-track-checked)" },
+	"&[data-disabled]": { backgroundColor: "var(--tsu-border-strong)" },
+	"&[data-disabled][data-state=\"checked\"]": { backgroundColor: "var(--tsu-border-strong)" }
 });
 var thumbClass = css({
 	position: "absolute",
@@ -95,32 +99,37 @@ var thumbClass = css({
 	width: "var(--_sw-thumb-size, calc(var(--tsu-comp-secondary-height-md) - 4px))",
 	height: "var(--_sw-thumb-size, calc(var(--tsu-comp-secondary-height-md) - 4px))",
 	borderRadius: "50%",
-	backgroundColor: "var(--tsu-surface)",
-	boxShadow: "0 1px 3px rgba(0,0,0,0.15)",
+	backgroundColor: "var(--tsu-bg-panel)",
+	boxShadow: "var(--tsu-shadow-sm)",
 	transform: "translateX(0)",
 	transition: "transform var(--tsu-transition-fast)",
 	"&[data-state=\"checked\"]": { transform: "translateX(var(--_sw-thumb-travel, var(--tsu-comp-secondary-height-md)))" },
 	"&[data-disabled]": {
-		backgroundColor: "var(--tsu-neutral-8)",
+		backgroundColor: "var(--tsu-text-subtle)",
 		boxShadow: "none"
 	},
-	"&[data-disabled][data-state=\"checked\"]": { backgroundColor: "var(--tsu-surface)" }
+	"&[data-disabled][data-state=\"checked\"]": { backgroundColor: "var(--tsu-bg-panel)" }
 });
 var labelClass = css({
 	fontSize: "var(--_sw-font-size, var(--tsu-comp-font-size-md))",
 	lineHeight: "var(--_sw-line-height, var(--tsu-comp-line-height-md))",
 	color: "var(--tsu-fg)",
-	"&[data-disabled]": { color: "var(--tsu-disabled-fg)" }
+	"&[data-disabled]": { opacity: "var(--tsu-disabled-opacity)" }
 });
 var Switch$1 = (props = {}) => {
-	const [local, rest] = splitProps(mergeProps$2({ size: "md" }, props), [
+	const [local, rest] = splitProps(mergeProps$2({
+		size: "md",
+		intent: "default"
+	}, props), [
 		"size",
+		"intent",
 		"className",
 		"children"
 	]);
 	const classNames = [
 		rootClass,
 		sizeClasses[local.size],
+		intentClasses[local.intent],
 		local.className
 	].filter(Boolean).join(" ");
 	return jsx(Switch.Root, mergeProps(rest, {

package/dist/components/Tabs.js

@@ -6,7 +6,7 @@ import { splitProps } from "@plastic-js/plastic";
 var listClass = css({
 	position: "relative",
 	display: "flex",
-	borderBottom: "1px solid var(--tsu-neutral-7)"
+	borderBottom: "1px solid var(--tsu-border)"
 });
 var triggerClass = css({
 	position: "relative",
@@ -18,14 +18,14 @@ var triggerClass = css({
 	padding: "0 var(--tsu-container-padding-md)",
 	border: "none",
 	background: "transparent",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	fontSize: "var(--tsu-comp-font-size-md)",
 	fontFamily: "inherit",
 	cursor: "pointer",
 	whiteSpace: "nowrap",
-	"&[data-selected]": { color: "var(--tsu-accent-9)" },
+	"&[data-selected]": { color: "var(--tsu-accent-subtle-fg)" },
 	"&[data-disabled]": {
-		opacity: .4,
+		opacity: "var(--tsu-disabled-opacity)",
 		cursor: "not-allowed"
 	}
 });
@@ -33,7 +33,7 @@ var indicatorClass = css({
 	position: "absolute",
 	bottom: "-1px",
 	height: "2px",
-	backgroundColor: "var(--tsu-accent-9)",
+	backgroundColor: "var(--tsu-accent-solid-bg)",
 	borderRadius: "1px",
 	transition: "left var(--tsu-transition-fast), width var(--tsu-transition-fast)",
 	width: "var(--width)",

package/dist/components/TagsInput.js

@@ -10,9 +10,9 @@ var rootClass = css({
 	alignItems: "center",
 	gap: "var(--tsu-spacing-xs)",
 	padding: "var(--tsu-spacing-xs) var(--tsu-spacing-sm)",
-	border: "1px solid var(--tsu-accent-8)",
+	border: "1px solid var(--tsu-accent-outline-border)",
 	borderRadius: "var(--tsu-radius-l1-md)",
-	backgroundColor: "var(--tsu-surface)",
+	backgroundColor: "var(--tsu-bg-panel)",
 	minHeight: "var(--tsu-comp-height-lg)",
 	"&:focus-within": { borderColor: "var(--tsu-focus-border)" }
 });
@@ -22,8 +22,8 @@ var tagClass = css({
 	gap: "4px",
 	padding: "2px 8px",
 	borderRadius: "var(--tsu-radius-l1-xs)",
-	backgroundColor: "var(--tsu-accent-3)",
-	color: "var(--tsu-accent-9)",
+	backgroundColor: "var(--tsu-accent-subtle-bg)",
+	color: "var(--tsu-accent-subtle-fg)",
 	fontSize: "var(--tsu-font-size-sm)",
 	fontWeight: "var(--tsu-font-weight-medium)"
 });
@@ -36,7 +36,7 @@ var tagDeleteClass = css({
 	borderRadius: "50%",
 	border: "none",
 	background: "transparent",
-	color: "var(--tsu-accent-9)",
+	color: "var(--tsu-accent-subtle-fg)",
 	cursor: "pointer",
 	padding: 0,
 	fontSize: "12px",
@@ -62,7 +62,7 @@ var inputClass = css({
 	fontSize: "var(--tsu-comp-font-size-md)",
 	fontFamily: "inherit",
 	padding: 0,
-	"&::placeholder": { color: "var(--tsu-neutral-11)" }
+	"&::placeholder": { color: "var(--tsu-text-secondary)" }
 });
 var labelClass = css({
 	fontSize: "var(--tsu-comp-font-size-md)",

package/dist/components/Toast.js

@@ -17,11 +17,11 @@ var toastClass = css({
 	gap: "12px",
 	width: "min(92vw, 340px)",
 	padding: "16px",
-	background: "var(--tsu-surface)",
-	border: "1px solid var(--tsu-neutral-6)",
+	background: "var(--tsu-bg-panel)",
+	border: "1px solid var(--tsu-border)",
 	borderRadius: "var(--tsu-radius-l2-lg)",
-	borderLeft: "3px solid var(--tsu-neutral-7)",
-	boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
+	borderLeft: "3px solid var(--tsu-border-strong)",
+	boxShadow: "var(--tsu-shadow-lg)",
 	pointerEvents: "auto",
 	translate: "var(--x) var(--y)",
 	scale: "var(--scale)",
@@ -41,10 +41,10 @@ var toastClass = css({
       scale 400ms cubic-bezier(0.06, 0.71, 0.55, 1),
       opacity 200ms cubic-bezier(0.06, 0.71, 0.55, 1)
     ` },
-	"&[data-type=\"success\"]": { borderLeftColor: "var(--tsu-success-9)" },
-	"&[data-type=\"error\"]": { borderLeftColor: "var(--tsu-danger-9)" },
-	"&[data-type=\"info\"]": { borderLeftColor: "var(--tsu-info-9)" },
-	"&[data-type=\"warning\"]": { borderLeftColor: "var(--tsu-warning-9)" }
+	"&[data-type=\"success\"]": { borderLeftColor: "var(--tsu-success-solid-bg)" },
+	"&[data-type=\"error\"]": { borderLeftColor: "var(--tsu-danger-solid-bg)" },
+	"&[data-type=\"info\"]": { borderLeftColor: "var(--tsu-accent-solid-bg)" },
+	"&[data-type=\"warning\"]": { borderLeftColor: "var(--tsu-warning-solid-bg)" }
 });
 var titleClass = css({
 	margin: 0,
@@ -59,7 +59,7 @@ var descriptionClass = css({
 	margin: "6px 0 0",
 	fontSize: "14px",
 	lineHeight: 1.5,
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	wordBreak: "break-word"
 });
 var closeClass = css({
@@ -75,7 +75,7 @@ var closeClass = css({
 	border: "none",
 	borderRadius: "999px",
 	background: "transparent",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	cursor: "pointer",
 	"& svg": {
 		width: "14px",
@@ -97,10 +97,10 @@ var iconClass = css({
 		width: "100%",
 		height: "100%"
 	},
-	".toast-wrapper[data-type=\"success\"] &": { color: "var(--tsu-success-9)" },
-	".toast-wrapper[data-type=\"error\"]   &": { color: "var(--tsu-danger-9)" },
-	".toast-wrapper[data-type=\"info\"]    &": { color: "var(--tsu-info-9)" },
-	".toast-wrapper[data-type=\"warning\"] &": { color: "var(--tsu-warning-9)" }
+	".toast-wrapper[data-type=\"success\"] &": { color: "var(--tsu-success-solid-bg)" },
+	".toast-wrapper[data-type=\"error\"]   &": { color: "var(--tsu-danger-solid-bg)" },
+	".toast-wrapper[data-type=\"info\"]    &": { color: "var(--tsu-accent-solid-bg)" },
+	".toast-wrapper[data-type=\"warning\"] &": { color: "var(--tsu-warning-solid-bg)" }
 });
 var typeIcons = {
 	success: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>`,

package/dist/components/Toggle.js

@@ -8,10 +8,10 @@ var rootClass = css({
 	alignItems: "center",
 	justifyContent: "center",
 	padding: "var(--tsu-spacing-sm) var(--tsu-spacing-md)",
-	border: "1px solid var(--tsu-neutral-7)",
+	border: "1px solid var(--tsu-neutral-outline-border)",
 	borderRadius: "var(--tsu-radius-l1-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",
@@ -19,12 +19,12 @@ var rootClass = css({
 	touchAction: "manipulation",
 	transition: "background-color var(--tsu-transition-fast), border-color var(--tsu-transition-fast), color var(--tsu-transition-fast)",
 	"&[data-pressed]": {
-		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": {
-		opacity: .5,
+		opacity: "var(--tsu-disabled-opacity)",
 		cursor: "not-allowed"
 	}
 });

package/dist/components/ToggleGroup.js

@@ -19,7 +19,7 @@ var itemClass = css({
 	border: "none",
 	borderRight: "1px solid var(--_tg-border)",
 	background: "transparent",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	fontSize: "var(--_tg-font-size, var(--tsu-comp-font-size-md))",
 	fontWeight: "var(--tsu-font-weight-medium)",
 	fontFamily: "inherit",
@@ -28,14 +28,19 @@ var itemClass = css({
 	transition: "background-color var(--tsu-transition-fast), color var(--tsu-transition-fast)",
 	"&:last-child": { borderRight: "none" },
 	"&[data-state=\"on\"]": {
-		backgroundColor: "var(--tsu-accent-9)",
-		color: "var(--tsu-bg)"
+		backgroundColor: "var(--_tg-checked-bg, var(--tsu-accent-solid-bg))",
+		color: "var(--_tg-checked-fg, var(--tsu-accent-solid-fg))"
 	},
 	"&:disabled": {
-		opacity: .5,
+		backgroundColor: "var(--tsu-bg-control)",
+		opacity: "var(--tsu-disabled-opacity)",
 		cursor: "not-allowed"
 	}
 });
+var intentClasses = {
+	default: css({ "--_tg-border": "var(--tsu-accent-solid-bg)" }),
+	neutral: css({ "--_tg-border": "var(--tsu-neutral-outline-border)" })
+};
 var sizeVars = {
 	xs: {
 		"--_tg-height": "var(--tsu-comp-height-xs)",
@@ -73,7 +78,6 @@ var sizeVars = {
 		"--_tg-radius": "var(--tsu-radius-l1-xl)"
 	}
 };
-var defaultStyle = { "--_tg-border": "var(--tsu-accent-9)" };
 var ToggleGroupItem = (props = {}) => {
 	const [local, rest] = splitProps(props, ["className", "children"]);
 	return jsx(ToggleGroup.Item, mergeProps(rest, {
@@ -84,19 +88,26 @@ var ToggleGroupItem = (props = {}) => {
 	}));
 };
 var ToggleGroup$1 = (props = {}) => {
-	const [local, rest] = splitProps(mergeProps$2({ size: "md" }, props), [
+	const [local, rest] = splitProps(mergeProps$2({
+		size: "md",
+		intent: "default"
+	}, props), [
 		"className",
 		"children",
 		"size",
+		"intent",
 		"style"
 	]);
 	return jsx(ToggleGroup.Root, mergeProps(rest, {
 		get className() {
-			return [rootClass, local.className].filter(Boolean).join(" ");
+			return [
+				rootClass,
+				intentClasses[local.intent],
+				local.className
+			].filter(Boolean).join(" ");
 		},
 		get style() {
 			return {
-				...defaultStyle,
 				...sizeVars[local.size],
 				...local.style
 			};

package/dist/components/Tour.js

@@ -5,10 +5,10 @@ import { splitProps } from "@plastic-js/plastic";
 //#region src/components/Tour.jsx
 var contentClass = css({
 	padding: "var(--tsu-container-padding-sm) var(--tsu-container-padding-md)",
-	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)",
 	fontSize: "var(--tsu-comp-font-size-sm)",
 	color: "var(--tsu-fg)",
 	maxWidth: "280px"
@@ -26,7 +26,7 @@ var closeClass = css({
 	border: "none",
 	borderRadius: "var(--tsu-radius-l1-xs)",
 	background: "transparent",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	fontSize: "16px",
 	cursor: "pointer"
 });

package/dist/components/TreeView.js

@@ -32,13 +32,13 @@ var branchTriggerClass = css({
 	cursor: "pointer",
 	touchAction: "manipulation",
 	"&[disabled]": {
-		opacity: .4,
+		opacity: "var(--tsu-disabled-opacity)",
 		cursor: "not-allowed"
 	},
 	"& svg": {
 		width: "14px",
 		height: "14px",
-		color: "var(--tsu-neutral-11)",
+		color: "var(--tsu-text-secondary)",
 		transition: "transform var(--tsu-transition-fast)"
 	},
 	"[data-state=\"open\"] & svg": { transform: "rotate(90deg)" }
@@ -53,11 +53,11 @@ var itemClass = css({
 	color: "var(--tsu-fg)",
 	cursor: "pointer",
 	"&[data-selected]": {
-		backgroundColor: "var(--tsu-accent-3)",
-		color: "var(--tsu-accent-9)"
+		backgroundColor: "var(--tsu-pressed-accent)",
+		color: "var(--tsu-accent-subtle-fg)"
 	},
 	"&[data-disabled]": {
-		opacity: .4,
+		opacity: "var(--tsu-disabled-opacity)",
 		pointerEvents: "none"
 	}
 });

package/dist/index.js

@@ -19,7 +19,7 @@ import Root, { ComboboxContent, ComboboxItem, Input } from "./components/Combobo
 import Icon from "./components/Icon.js";
 import Dialog from "./components/Dialog.js";
 import ConfirmDialog, { confirm } from "./components/ConfirmDialog.js";
-import DateInput from "./components/DateInput.js";
+import DatePicker from "./components/DatePicker.js";
 import Root$1, { DrawerContent, DrawerTrigger } from "./components/Drawer.js";
 import Field from "./components/Field.js";
 import Fieldset from "./components/Fieldset.js";
@@ -56,4 +56,4 @@ 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, 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 };
+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, DatePicker, 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 };