@yahoo/uds-v5-wip 1.17.0 → 1.18.0

package/dist/components/dist/accordion.config.js

@@ -7,7 +7,7 @@ const accordionConfig = defaultFoundationPreset.defineComponent("Accordion", ({
 		width: "100%",
 		borderWidth: tokens.borderWidth.thin,
 		borderColor: tokens.borderColor.secondary,
-		borderRadius: tokens.borderRadius.md,
+		borderRadius: tokens.radius.md,
 		overflow: "hidden",
 		backgroundColor: tokens.bg.primary
 	},

package/dist/components/dist/alert.config.js

@@ -8,7 +8,7 @@ const alertConfig = defaultFoundationPreset.defineComponent("Alert", ({ tokens }
 			display: "flex",
 			alignItems: "center",
 			padding: tokens.spacing["4"],
-			borderRadius: tokens.borderRadius.md,
+			borderRadius: tokens.radius.md,
 			borderWidth: tokens.borderWidth.thin
 		},
 		text: {

package/dist/components/dist/avatar-group.config.js

@@ -14,7 +14,7 @@ const avatarGroupConfig = defaultFoundationPreset.defineComponent("AvatarGroup",
 		justifyContent: "center",
 		width: "2.5rem",
 		height: "2.5rem",
-		borderRadius: tokens.borderRadius.full,
+		borderRadius: tokens.radius.full,
 		backgroundColor: tokens.bg.tertiary,
 		borderWidth: tokens.borderWidth.medium,
 		borderColor: tokens.borderColor.primary

package/dist/components/dist/avatar.config.js

@@ -10,7 +10,7 @@ const avatarConfig = defaultFoundationPreset.defineComponent("Avatar", ({ tokens
 			justifyContent: "center",
 			width: "2.5rem",
 			height: "2.5rem",
-			borderRadius: tokens.borderRadius.full,
+			borderRadius: tokens.radius.full,
 			backgroundColor: tokens.bg.brand,
 			borderWidth: tokens.borderWidth.medium,
 			borderColor: tokens.borderColor.primary
@@ -19,7 +19,7 @@ const avatarConfig = defaultFoundationPreset.defineComponent("Avatar", ({ tokens
 			width: "100%",
 			height: "100%",
 			objectFit: "cover",
-			borderRadius: tokens.borderRadius.full
+			borderRadius: tokens.radius.full
 		},
 		fallbackText: {
 			...textVariants.label2,

package/dist/components/dist/badge.config.js

@@ -9,13 +9,13 @@ const badgeConfig = defaultFoundationPreset.defineComponent("Badge", ({ tokens }
 			alignItems: "center",
 			gap: tokens.spacing["1.5"],
 			padding: `${tokens.spacing["0.5"]} ${tokens.spacing["2"]}`,
-			borderRadius: tokens.borderRadius.full,
+			borderRadius: tokens.radius.full,
 			backgroundColor: tokens.bg.tertiary
 		},
 		dot: {
 			width: "0.375rem",
 			height: "0.375rem",
-			borderRadius: tokens.borderRadius.full,
+			borderRadius: tokens.radius.full,
 			display: "none"
 		},
 		text: {

package/dist/components/dist/button.config.js

@@ -14,7 +14,7 @@ const buttonConfig = defaultFoundationPreset.defineComponent("Button", ({ tokens
 			justifyContent: "center",
 			gap: tokens.spacing["1.5"],
 			padding: tokens.spacing["3"],
-			borderRadius: tokens.borderRadius.md
+			borderRadius: tokens.radius.md
 		},
 		startIcon: {
 			display: "flex",
@@ -31,12 +31,12 @@ const buttonConfig = defaultFoundationPreset.defineComponent("Button", ({ tokens
 				padding: `${tokens.spacing["0.5"]} ${tokens.spacing["1.5"]}`,
 				fontSize: "0.6875rem",
 				lineHeight: tokens.lineHeight.tight,
-				borderRadius: tokens.borderRadius.xs
+				borderRadius: tokens.radius.xs
 			} },
 			sm: { root: {
 				padding: `${tokens.spacing["1"]} ${tokens.spacing["2"]}`,
 				fontSize: "0.75rem",
-				borderRadius: tokens.borderRadius.sm
+				borderRadius: tokens.radius.sm
 			} },
 			md: { root: {
 				padding: tokens.spacing["3"],

package/dist/components/dist/card.config.js

@@ -4,7 +4,7 @@ import { textVariants } from "./text.config.js";
 //#region ../components/dist/card.config.js
 const cardConfig = defaultFoundationPreset.defineComponent("Card", ({ tokens }) => ({ base: {
 	root: {
-		borderRadius: tokens.borderRadius.md,
+		borderRadius: tokens.radius.md,
 		borderWidth: tokens.borderWidth.thin,
 		borderColor: tokens.borderColor.secondary,
 		backgroundColor: tokens.bg.primary,

package/dist/components/dist/command.config.js

@@ -6,7 +6,7 @@ const commandConfig = defaultFoundationPreset.defineComponent("Command", ({ toke
 	display: "flex",
 	flexDirection: "column",
 	overflow: "hidden",
-	borderRadius: tokens.borderRadius.lg,
+	borderRadius: tokens.radius.lg,
 	backgroundColor: tokens.bg["elevation-1"]
 } } }));
 const commandDialogConfig = defaultFoundationPreset.defineComponent("CommandDialog", ({ tokens }) => ({ base: {
@@ -39,7 +39,7 @@ const commandDialogConfig = defaultFoundationPreset.defineComponent("CommandDial
 		zIndex: "1",
 		width: "100%",
 		maxWidth: "32rem",
-		borderRadius: tokens.borderRadius.lg,
+		borderRadius: tokens.radius.lg,
 		backgroundColor: tokens.bg["elevation-2"],
 		borderWidth: tokens.borderWidth.thin,
 		borderColor: tokens.borderColor.secondary,
@@ -141,7 +141,7 @@ const commandItemConfig = defaultFoundationPreset.defineComponent("CommandItem",
 	paddingRight: tokens.spacing["3"],
 	paddingTop: tokens.spacing["2.5"],
 	paddingBottom: tokens.spacing["2.5"],
-	borderRadius: tokens.borderRadius.md,
+	borderRadius: tokens.radius.md,
 	cursor: "pointer",
 	color: tokens.color["on-primary"],
 	_ariaSelected: { backgroundColor: tokens.bg.secondary },

package/dist/components/dist/control-curve.config.js

@@ -3,7 +3,7 @@ import "../../foundational-presets/dist/index.js";
 //#region ../components/dist/control-curve.config.js
 const controlCurveConfig = defaultFoundationPreset.defineComponent("ControlCurve", ({ tokens }) => ({
 	base: { root: {
-		borderRadius: tokens.borderRadius.md,
+		borderRadius: tokens.radius.md,
 		overflow: "hidden",
 		backgroundColor: tokens.bg.secondary
 	} },

package/dist/components/dist/control-select.config.js

@@ -17,7 +17,7 @@ const controlSelectConfig = defaultFoundationPreset.defineComponent("ControlSele
 		},
 		trigger: {
 			backgroundColor: tokens.bg.secondary,
-			borderRadius: tokens.borderRadius.md,
+			borderRadius: tokens.radius.md,
 			padding: `${tokens.spacing["1"]} ${tokens.spacing["2"]}`,
 			cursor: "pointer",
 			borderWidth: tokens.borderWidth.thin,
@@ -35,7 +35,7 @@ const controlSelectConfig = defaultFoundationPreset.defineComponent("ControlSele
 			backgroundColor: tokens.bg.primary,
 			borderWidth: tokens.borderWidth.thin,
 			borderColor: tokens.borderColor.secondary,
-			borderRadius: tokens.borderRadius.md,
+			borderRadius: tokens.radius.md,
 			overflow: "hidden",
 			zIndex: "50",
 			minWidth: "120px",

package/dist/components/dist/control-slider.config.js

@@ -7,7 +7,7 @@ const controlSliderConfig = defaultFoundationPreset.defineComponent("ControlSlid
 		display: "flex",
 		alignItems: "center",
 		height: tokens.spacing["8"],
-		borderRadius: tokens.borderRadius.md,
+		borderRadius: tokens.radius.md,
 		backgroundColor: tokens.bg.secondary,
 		cursor: "ew-resize",
 		userSelect: "none",
@@ -22,7 +22,7 @@ const controlSliderConfig = defaultFoundationPreset.defineComponent("ControlSlid
 		right: tokens.spacing["0"],
 		top: tokens.spacing["0"],
 		bottom: tokens.spacing["0"],
-		borderRadius: tokens.borderRadius.md,
+		borderRadius: tokens.radius.md,
 		cursor: "ew-resize"
 	},
 	markers: {
@@ -41,7 +41,7 @@ const controlSliderConfig = defaultFoundationPreset.defineComponent("ControlSlid
 	marker: {
 		width: tokens.spacing["0.5"],
 		height: tokens.spacing["0.5"],
-		borderRadius: tokens.borderRadius.full,
+		borderRadius: tokens.radius.full,
 		backgroundColor: tokens.color["on-secondary"]
 	},
 	fill: {
@@ -50,7 +50,7 @@ const controlSliderConfig = defaultFoundationPreset.defineComponent("ControlSlid
 		top: tokens.spacing["0"],
 		bottom: tokens.spacing["0"],
 		width: tokens.spacing["0"],
-		borderRadius: tokens.borderRadius.md,
+		borderRadius: tokens.radius.md,
 		backgroundColor: tokens.color["always/black"],
 		opacity: "0.05",
 		transition: "width 0.1s linear",
@@ -63,7 +63,7 @@ const controlSliderConfig = defaultFoundationPreset.defineComponent("ControlSlid
 		transform: "translate(-50%, -50%)",
 		width: tokens.spacing["1"],
 		height: tokens.spacing["3"],
-		borderRadius: tokens.borderRadius.full,
+		borderRadius: tokens.radius.full,
 		backgroundColor: tokens.color["on-secondary"],
 		opacity: "0.5",
 		transition: "left 0.1s linear",

package/dist/components/dist/control-stepper.config.js

@@ -34,8 +34,8 @@ const controlStepperConfig = defaultFoundationPreset.defineComponent("ControlSte
 			cursor: "pointer",
 			borderWidth: "0",
 			fontSize: "16px",
-			borderTopRightRadius: tokens.borderRadius.sm,
-			borderBottomRightRadius: tokens.borderRadius.sm,
+			borderTopRightRadius: tokens.radius.sm,
+			borderBottomRightRadius: tokens.radius.sm,
 			_hover: {
 				backgroundColor: tokens.bg.tertiary,
 				color: tokens.color["on-primary"]
@@ -53,8 +53,8 @@ const controlStepperConfig = defaultFoundationPreset.defineComponent("ControlSte
 			cursor: "pointer",
 			borderWidth: "0",
 			fontSize: "16px",
-			borderTopLeftRadius: tokens.borderRadius.sm,
-			borderBottomLeftRadius: tokens.borderRadius.sm,
+			borderTopLeftRadius: tokens.radius.sm,
+			borderBottomLeftRadius: tokens.radius.sm,
 			_hover: {
 				backgroundColor: tokens.bg.tertiary,
 				color: tokens.color["on-primary"]

package/dist/components/dist/dropdown.config.js

@@ -15,7 +15,7 @@ const dropdownConfig = defaultFoundationPreset.defineComponent("Dropdown", ({ to
 			marginTop: "4px",
 			zIndex: "50",
 			backgroundColor: tokens.bg["elevation-1"],
-			borderRadius: tokens.borderRadius.md,
+			borderRadius: tokens.radius.md,
 			borderWidth: tokens.borderWidth.thin,
 			borderColor: tokens.borderColor.secondary,
 			padding: tokens.spacing["1"],
@@ -56,7 +56,7 @@ const dropdownConfig = defaultFoundationPreset.defineComponent("Dropdown", ({ to
 			justifyContent: "space-between",
 			gap: tokens.spacing["4"],
 			padding: `${tokens.spacing["2"]} ${tokens.spacing["3"]}`,
-			borderRadius: tokens.borderRadius.sm,
+			borderRadius: tokens.radius.sm,
 			cursor: "pointer",
 			color: tokens.color["on-primary"],
 			_hover: { backgroundColor: tokens.bg.tertiary }
@@ -68,7 +68,7 @@ const dropdownConfig = defaultFoundationPreset.defineComponent("Dropdown", ({ to
 			justifyContent: "space-between",
 			gap: tokens.spacing["4"],
 			padding: `${tokens.spacing["2"]} ${tokens.spacing["3"]}`,
-			borderRadius: tokens.borderRadius.sm,
+			borderRadius: tokens.radius.sm,
 			cursor: "pointer",
 			color: tokens.color.alert,
 			_hover: { backgroundColor: tokens.bg["alert-wash"] }
@@ -88,17 +88,17 @@ const dropdownConfig = defaultFoundationPreset.defineComponent("Dropdown", ({ to
 		menu: {
 			padding: tokens.spacing["0.5"],
 			minWidth: "8rem",
-			borderRadius: tokens.borderRadius.sm
+			borderRadius: tokens.radius.sm
 		},
 		item: {
 			padding: `${tokens.spacing["1"]} ${tokens.spacing["2"]}`,
 			fontSize: "0.75rem",
-			borderRadius: tokens.borderRadius.xs
+			borderRadius: tokens.radius.xs
 		},
 		destructiveItem: {
 			padding: `${tokens.spacing["1"]} ${tokens.spacing["2"]}`,
 			fontSize: "0.75rem",
-			borderRadius: tokens.borderRadius.xs
+			borderRadius: tokens.radius.xs
 		},
 		shortcut: { fontSize: "0.625rem" }
 	} } }

package/dist/components/dist/empty-state.config.js

@@ -15,7 +15,7 @@ const emptyStateConfig = defaultFoundationPreset.defineComponent("EmptyState", (
 	icon: {
 		width: "36px",
 		height: "36px",
-		borderRadius: tokens.borderRadius.full,
+		borderRadius: tokens.radius.full,
 		backgroundColor: tokens.bg.tertiary,
 		display: "flex",
 		alignItems: "center",

package/dist/components/dist/input.config.js

@@ -6,7 +6,7 @@ const inputConfig = defaultFoundationPreset.defineComponent("Input", ({ tokens }
 		backgroundColor: tokens.bg.primary,
 		color: tokens.color["on-primary"],
 		padding: tokens.spacing["3"],
-		borderRadius: tokens.borderRadius.md,
+		borderRadius: tokens.radius.md,
 		borderWidth: tokens.borderWidth.thin,
 		borderColor: tokens.borderColor.secondary,
 		outlineStyle: "none",
@@ -21,12 +21,12 @@ const inputConfig = defaultFoundationPreset.defineComponent("Input", ({ tokens }
 			padding: `${tokens.spacing["0.5"]} ${tokens.spacing["1.5"]}`,
 			fontSize: "0.6875rem",
 			lineHeight: tokens.lineHeight.tight,
-			borderRadius: tokens.borderRadius.xs
+			borderRadius: tokens.radius.xs
 		} },
 		sm: { root: {
 			padding: `${tokens.spacing["1"]} ${tokens.spacing["2"]}`,
 			fontSize: "0.75rem",
-			borderRadius: tokens.borderRadius.sm
+			borderRadius: tokens.radius.sm
 		} },
 		md: { root: {
 			padding: tokens.spacing["3"],

package/dist/components/dist/item.config.js

@@ -12,7 +12,7 @@ const itemConfig = defaultFoundationPreset.defineComponent("Item", ({ tokens })
 			paddingRight: tokens.spacing["3"],
 			paddingTop: tokens.spacing["2"],
 			paddingBottom: tokens.spacing["2"],
-			borderRadius: tokens.borderRadius.lg,
+			borderRadius: tokens.radius.lg,
 			cursor: "pointer",
 			_hover: { backgroundColor: tokens.bg.secondary }
 		},
@@ -22,7 +22,7 @@ const itemConfig = defaultFoundationPreset.defineComponent("Item", ({ tokens })
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "center",
-			borderRadius: tokens.borderRadius.md,
+			borderRadius: tokens.radius.md,
 			flexShrink: "0",
 			color: tokens.color["on-secondary"]
 		},

package/dist/components/dist/modal.config.js

@@ -34,7 +34,7 @@ const modalConfig = defaultFoundationPreset.defineComponent("Modal", ({ tokens }
 		position: "relative",
 		zIndex: "1",
 		backgroundColor: tokens.bg["elevation-1"],
-		borderRadius: tokens.borderRadius.lg,
+		borderRadius: tokens.radius.lg,
 		padding: tokens.spacing["6"],
 		minWidth: "24rem",
 		maxWidth: "32rem",

package/dist/components/dist/progress.config.js

@@ -19,14 +19,14 @@ const progressConfig = defaultFoundationPreset.defineComponent("Progress", ({ to
 	},
 	track: {
 		height: "0.5rem",
-		borderRadius: tokens.borderRadius.full,
+		borderRadius: tokens.radius.full,
 		backgroundColor: tokens.bg.secondary,
 		overflow: "hidden",
 		width: "100%"
 	},
 	fill: {
 		height: "100%",
-		borderRadius: tokens.borderRadius.full,
+		borderRadius: tokens.radius.full,
 		backgroundColor: tokens.bg.brand,
 		transition: "width 0.8s cubic-bezier(0.16, 1, 0.3, 1)"
 	}

package/dist/components/dist/select.config.js

@@ -8,7 +8,7 @@ const selectConfig = defaultFoundationPreset.defineComponent("Select", ({ tokens
 	spacingY: tokens.spacing["2"],
 	spacingLeft: tokens.spacing["3"],
 	spacingRight: tokens.spacing["8"],
-	borderRadius: tokens.borderRadius.md,
+	borderRadius: tokens.radius.md,
 	borderWidth: tokens.borderWidth.thin,
 	borderColor: tokens.borderColor.secondary,
 	outlineStyle: "none",

package/dist/components/dist/sheet.config.js

@@ -62,7 +62,7 @@ const sheetConfig = defaultFoundationPreset.defineComponent("Sheet", ({ tokens }
 			justifyContent: "center",
 			width: "2rem",
 			height: "2rem",
-			borderRadius: tokens.borderRadius.sm,
+			borderRadius: tokens.radius.sm,
 			cursor: "pointer",
 			color: tokens.color["on-secondary"],
 			_hover: { backgroundColor: tokens.bg.tertiary }

package/dist/components/dist/sidebar.config.js

@@ -44,7 +44,7 @@ const sidebarConfig = defaultFoundationPreset.defineComponent("Sidebar", ({ toke
 			justifyContent: "center",
 			width: "1.5rem",
 			height: "1.5rem",
-			borderRadius: tokens.borderRadius.sm,
+			borderRadius: tokens.radius.sm,
 			cursor: "pointer",
 			color: tokens.color["on-secondary"],
 			backgroundColor: "transparent",
@@ -70,7 +70,7 @@ const sidebarConfig = defaultFoundationPreset.defineComponent("Sidebar", ({ toke
 			gap: tokens.spacing["2"],
 			width: "100%",
 			padding: `${tokens.spacing["1.5"]} ${tokens.spacing["2"]}`,
-			borderRadius: tokens.borderRadius.md,
+			borderRadius: tokens.radius.md,
 			color: tokens.color["on-secondary"],
 			backgroundColor: "transparent",
 			borderWidth: "0",
@@ -94,7 +94,7 @@ const sidebarConfig = defaultFoundationPreset.defineComponent("Sidebar", ({ toke
 			justifyContent: "center",
 			width: "1.5rem",
 			height: "1.5rem",
-			borderRadius: tokens.borderRadius.sm,
+			borderRadius: tokens.radius.sm,
 			cursor: "pointer",
 			color: tokens.color["on-tertiary"],
 			backgroundColor: "transparent",
@@ -133,7 +133,7 @@ const sidebarConfig = defaultFoundationPreset.defineComponent("Sidebar", ({ toke
 			alignItems: "center",
 			width: "100%",
 			padding: `${tokens.spacing["1"]} ${tokens.spacing["2"]}`,
-			borderRadius: tokens.borderRadius.sm,
+			borderRadius: tokens.radius.sm,
 			color: tokens.color["on-tertiary"],
 			backgroundColor: "transparent",
 			borderWidth: "0",
@@ -151,7 +151,7 @@ const sidebarConfig = defaultFoundationPreset.defineComponent("Sidebar", ({ toke
 			justifyContent: "center",
 			width: "2rem",
 			height: "2rem",
-			borderRadius: tokens.borderRadius.sm,
+			borderRadius: tokens.radius.sm,
 			cursor: "pointer",
 			color: tokens.color["on-secondary"],
 			backgroundColor: "transparent",
@@ -188,14 +188,14 @@ const sidebarConfig = defaultFoundationPreset.defineComponent("Sidebar", ({ toke
 		},
 		skeleton: {
 			backgroundColor: tokens.bg.secondary,
-			borderRadius: tokens.borderRadius.md
+			borderRadius: tokens.radius.md
 		}
 	},
 	variants: { variant: {
 		sidebar: { root: {} },
 		floating: { root: {
 			margin: tokens.spacing["3"],
-			borderRadius: tokens.borderRadius.lg,
+			borderRadius: tokens.radius.lg,
 			borderWidth: tokens.borderWidth.thin,
 			borderColor: tokens.borderColor.secondary,
 			borderRightWidth: tokens.borderWidth.thin,
@@ -204,7 +204,7 @@ const sidebarConfig = defaultFoundationPreset.defineComponent("Sidebar", ({ toke
 		} },
 		inset: { root: {
 			margin: tokens.spacing["3"],
-			borderRadius: tokens.borderRadius.lg,
+			borderRadius: tokens.radius.lg,
 			borderWidth: tokens.borderWidth.thin,
 			borderColor: tokens.borderColor.secondary,
 			borderRightWidth: tokens.borderWidth.thin,

package/dist/components/dist/skeleton.config.js

@@ -2,7 +2,7 @@ import { defaultFoundationPreset } from "../../foundational-presets/dist/default
 import "../../foundational-presets/dist/index.js";
 //#region ../components/dist/skeleton.config.js
 const skeletonConfig = defaultFoundationPreset.defineComponent("Skeleton", ({ tokens }) => ({ base: { block: {
-	borderRadius: tokens.borderRadius.md,
+	borderRadius: tokens.radius.md,
 	backgroundColor: tokens.bg.secondary,
 	animation: "pulse 1.5s ease-in-out infinite"
 } } }));

package/dist/components/dist/slider.config.js

@@ -10,20 +10,20 @@ const sliderConfig = defaultFoundationPreset.defineComponent("Slider", ({ tokens
 	},
 	track: {
 		height: "0.5rem",
-		borderRadius: tokens.borderRadius.full,
+		borderRadius: tokens.radius.full,
 		backgroundColor: tokens.bg.secondary,
 		overflow: "visible",
 		width: "100%"
 	},
 	range: {
 		height: "100%",
-		borderRadius: tokens.borderRadius.full,
+		borderRadius: tokens.radius.full,
 		backgroundColor: tokens.bg.brand
 	},
 	thumb: {
 		width: "1.25rem",
 		height: "1.25rem",
-		borderRadius: tokens.borderRadius.full,
+		borderRadius: tokens.radius.full,
 		backgroundColor: tokens.bg.primary,
 		borderWidth: tokens.borderWidth.medium,
 		borderColor: tokens.borderColor.brand,

package/dist/components/dist/switch.config.js

@@ -14,7 +14,7 @@ const switchConfig = defaultFoundationPreset.defineComponent("Switch", ({ tokens
 	track: {
 		width: "2.75rem",
 		height: "1.5rem",
-		borderRadius: tokens.borderRadius.full,
+		borderRadius: tokens.radius.full,
 		padding: tokens.spacing["0.5"],
 		display: "flex",
 		alignItems: "center",
@@ -25,7 +25,7 @@ const switchConfig = defaultFoundationPreset.defineComponent("Switch", ({ tokens
 	thumb: {
 		width: "1.25rem",
 		height: "1.25rem",
-		borderRadius: tokens.borderRadius.full,
+		borderRadius: tokens.radius.full,
 		backgroundColor: tokens.bg.primary,
 		boxShadow: "0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)",
 		transition: "transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)",

package/dist/components/dist/tabs.config.js

@@ -13,7 +13,7 @@ const tabsConfig = defaultFoundationPreset.defineComponent("Tabs", ({ tokens })
 		gap: tokens.spacing["1"],
 		backgroundColor: tokens.bg.tertiary,
 		padding: tokens.spacing["1.5"],
-		borderRadius: tokens.borderRadius.sm
+		borderRadius: tokens.radius.sm
 	},
 	tab: {
 		...textVariants.label2,
@@ -21,7 +21,7 @@ const tabsConfig = defaultFoundationPreset.defineComponent("Tabs", ({ tokens })
 		flex: "1",
 		textAlign: "center",
 		padding: tokens.spacing["2"],
-		borderRadius: tokens.borderRadius.xs,
+		borderRadius: tokens.radius.xs,
 		color: tokens.color["on-tertiary"],
 		cursor: "pointer",
 		backgroundColor: "transparent"
@@ -32,21 +32,21 @@ const tabsConfig = defaultFoundationPreset.defineComponent("Tabs", ({ tokens })
 		flex: "1",
 		textAlign: "center",
 		padding: tokens.spacing["2"],
-		borderRadius: tokens.borderRadius.xs,
+		borderRadius: tokens.radius.xs,
 		color: tokens.color["on-primary"],
 		cursor: "pointer",
 		backgroundColor: "transparent"
 	},
 	indicator: {
 		backgroundColor: tokens.bg.primary,
-		borderRadius: tokens.borderRadius.xs,
+		borderRadius: tokens.radius.xs,
 		boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
 		transition: "left 0.4s cubic-bezier(0.16, 1, 0.3, 1), width 0.4s cubic-bezier(0.16, 1, 0.3, 1)"
 	},
 	content: {
 		padding: tokens.spacing["4"],
 		backgroundColor: tokens.bg.tertiary,
-		borderRadius: tokens.borderRadius.sm,
+		borderRadius: tokens.radius.sm,
 		borderWidth: tokens.borderWidth.thin,
 		borderColor: tokens.borderColor.secondary,
 		minHeight: "4rem"

package/dist/components/dist/textarea.config.js

@@ -7,7 +7,7 @@ const textareaConfig = defaultFoundationPreset.defineComponent("Textarea", ({ to
 		backgroundColor: tokens.bg.primary,
 		color: tokens.color["on-primary"],
 		padding: tokens.spacing["3"],
-		borderRadius: tokens.borderRadius.md,
+		borderRadius: tokens.radius.md,
 		borderWidth: tokens.borderWidth.thin,
 		borderColor: tokens.borderColor.secondary,
 		outlineStyle: "none",
@@ -35,12 +35,12 @@ const textareaConfig = defaultFoundationPreset.defineComponent("Textarea", ({ to
 				padding: `${tokens.spacing["0.5"]} ${tokens.spacing["1.5"]}`,
 				fontSize: "0.6875rem",
 				lineHeight: tokens.lineHeight.tight,
-				borderRadius: tokens.borderRadius.xs
+				borderRadius: tokens.radius.xs
 			} },
 			sm: { root: {
 				padding: `${tokens.spacing["1"]} ${tokens.spacing["2"]}`,
 				fontSize: "0.75rem",
-				borderRadius: tokens.borderRadius.sm
+				borderRadius: tokens.radius.sm
 			} },
 			md: { root: {
 				padding: tokens.spacing["3"],

package/dist/components/dist/toast.config.js

@@ -18,7 +18,7 @@ const toastConfig = defaultFoundationPreset.defineComponent("Toast", ({ tokens }
 			justifyContent: "space-between",
 			gap: tokens.spacing["3"],
 			padding: `${tokens.spacing["3"]} ${tokens.spacing["4"]}`,
-			borderRadius: tokens.borderRadius.md,
+			borderRadius: tokens.radius.md,
 			borderWidth: tokens.borderWidth.thin,
 			borderColor: tokens.borderColor.secondary,
 			backgroundColor: tokens.bg["elevation-3"],
@@ -96,7 +96,7 @@ const toastConfig = defaultFoundationPreset.defineComponent("Toast", ({ tokens }
 			justifyContent: "center",
 			width: "1.5rem",
 			height: "1.5rem",
-			borderRadius: tokens.borderRadius.sm,
+			borderRadius: tokens.radius.sm,
 			cursor: "pointer",
 			color: tokens.color["on-secondary"],
 			fontSize: "0.75rem",

package/dist/components/dist/tooltip.config.js

@@ -14,7 +14,7 @@ const tooltipConfig = defaultFoundationPreset.defineComponent("Tooltip", ({ toke
 		marginBottom: "6px",
 		pointerEvents: "none",
 		backgroundColor: tokens.bg.inverse,
-		borderRadius: tokens.borderRadius.md,
+		borderRadius: tokens.radius.md,
 		padding: `${tokens.spacing["1.5"]} ${tokens.spacing["3"]}`,
 		opacity: "0",
 		display: "none",

package/dist/config/dist/createConfig.d.ts

@@ -65,6 +65,12 @@ interface AtomicToken<M extends ModifierNameShape = ModifierNameShape> {
    * during config resolution.
    */
   type?: TokenType;
+  /**
+   * Free-form group description surfaced in Studio. Mirrors `$description`
+   * on the source `defineVars` namespace; not used by the runtime / CSS
+   * generator.
+   */
+  description?: string;
   /**
    * Optional CSS variable prefix override
    *
@@ -89,13 +95,19 @@ interface AtomicToken<M extends ModifierNameShape = ModifierNameShape> {
 /** Merge two token structures */
 type MergeTokens<A, B> = { [K in keyof A | keyof B]: K extends keyof B ? K extends keyof A ? A[K] & B[K] : B[K] : K extends keyof A ? A[K] : never };
 /**
- * Derive token types directly from defineVars namespaces.
- * Each var namespace key becomes a token property with the namespace's token names.
- * An index signature allows property-name access (e.g., `tokens.borderRadius`)
- * in addition to var-namespace access (e.g., `tokens.radius`).
- * Used by `defineScopes` to populate tokens without an explicit utility mapping.
+ * Derive token types directly from defineVars namespaces. Each var namespace
+ * key becomes a property on `tokens.*` with the namespace's token names.
+ *
+ * NOTE: We intentionally do NOT add a `Record<string, Record<string, string>>`
+ * index-signature fallback here. The fallback used to support property-name
+ * access (e.g. `tokens.borderRadius.*` for the `radius` namespace scoped to
+ * `borderRadius`), but it caused TypeScript to silently widen every
+ * `tokens.<ns>.<name>` access to `string` — typos like
+ * `tokens.borderColor.aksjdf` would not be flagged. With the fallback removed,
+ * accesses must use the defineVars namespace key (e.g. `tokens.radius.full`,
+ * not `tokens.borderRadius.full`); both forms remain valid at runtime.
  */
-type VarsToTokens<TVars extends VarsConfig> = { [K in keyof TVars]: { [T in Exclude<keyof TVars[K], '$type'>]: string } } & Record<string, Record<string, string>>;
+type VarsToTokens<TVars extends VarsConfig> = { [K in keyof TVars]: { [T in Exclude<keyof TVars[K], '$type' | '$description'>]: string } };
 /** Empty tokens type for initial state */
 type EmptyTokens = {};
 /** Empty vars type for initial state */