@a-type/ui 4.0.8 → 4.0.9

package/src/components/checkbox/Checkbox.tsx

@@ -29,14 +29,14 @@ export function CheckboxRoot({
 		<BaseCheckbox.Root
 			{...props}
 			className={classNames(
-				'layer-components:(block w-28px h-28px flex-shrink-0 relative bg-white border border-default transition-all rounded-lg shadow-sm cursor-pointer)',
+				'layer-components:(relative block h-28px w-28px flex-shrink-0 cursor-pointer border border-default rounded-lg shadow-sm transition-all bg-white)',
 				'layer-components:focus-visible:(outline-off ring-4 ring-accent)',
 				checkedMode === 'faded'
-					? 'layer-components:data-[checked]:(bg-main animate-checkbox-fade animate-forwards)'
+					? 'layer-components:data-[checked]:(animate-checkbox-fade animate-forwards bg-main)'
 					: 'layer-components:data-[checked]:(bg-main border-main-ink)',
-				'layer-components:[&:hover:not(:disabled)]:(bg-lighten-2 ring-bg ring-2)',
-				'layer-components:[&:active:not(:disabled)]:(bg-darken-1 ring-4)',
-				'layer-components:[&:disabled]:(bg-transparent border-gray-light shadow-none)',
+				'layer-components:[&:hover:not(:disabled)]:(ring-2 bg-lighten-2 ring-bg)',
+				'layer-components:[&:active:not(:disabled)]:(ring-4 bg-darken-1)',
+				'layer-components:[&:disabled]:(shadow-none bg-transparent border-gray-light)',
 				className,
 			)}
 		/>

package/src/components/chip/Chip.tsx

@@ -15,8 +15,8 @@ export function Chip({ className, color, ...rest }: ChipProps) {
 		<SlotDiv
 			className={classNames(
 				color && `palette-${color}`,
-				'layer-composed:(inline-flex flex-row gap-1 items-center whitespace-nowrap font-normal)',
-				'layer-composed:(bg-main-wash color-contrast border-light border-solid border rounded-lg)',
+				'layer-composed:(inline-flex flex-row items-center gap-1 whitespace-nowrap font-normal)',
+				'layer-composed:(border border-light rounded-lg border-solid color-contrast bg-main-wash)',
 				'layer-composed:(px-sm py-xs text-xs)',
 				className,
 			)}

package/src/components/colorPicker/ColorPicker.tsx

@@ -84,7 +84,7 @@ export function ColorSwatch({
 	return (
 		<div
 			className={classNames(
-				'bg-main w-16px h-16px rounded-sm',
+				'h-16px w-16px rounded-sm bg-main',
 				`palette-${value ?? 'lemon'}`,
 				className,
 			)}

package/src/components/contextMenu/contextMenu.tsx

@@ -22,10 +22,10 @@ export const ContextMenuContent = function Content({
 				<GroupScaleReset>
 					<BaseContextMenu.Popup
 						className={classNames(
-							'layer-components:(min-w-120px bg-white rounded-md overflow-hidden border-gray-dark border shadow-md z-menu)',
+							'layer-components:(z-menu min-w-120px overflow-hidden border rounded-md shadow-md bg-white border-gray-dark)',
 							'layer-components:transform-origin-[var(--transform-origin)]',
-							'layer-components:data-[starting-style]:(opacity-0 scale-95)',
-							'layer-components:data-[ending-style]:(opacity-0 scale-95)',
+							'layer-components:data-[starting-style]:(scale-95 opacity-0)',
+							'layer-components:data-[ending-style]:(scale-95 opacity-0)',
 							'layer-components:(overflow-y-auto overflow-unstable)',
 							'important:motion-reduce:animate-none',
 							'layer-components:(max-h-[--available-height] max-w-[--available-width])',

package/src/components/datePicker/DatePicker.tsx

@@ -12,7 +12,7 @@ import {
 	MonthRow,
 } from './Calendar.js';
 
-function DatePickerMonthControls({}: {}) {
+function DatePickerMonthControls() {
 	const { setDisplayInfo, month, year } = useCalendarContext();
 	const monthLabel = new Date(year, month).toLocaleDateString('en-US', {
 		month: 'long',
@@ -67,7 +67,8 @@ function DatePickerRoot({
 		<div
 			className={clsx(
 				color && `palette-${color}`,
-				'layer-components:(flex flex-col items-center justify-center w-[calc(var(--day-size,32px)*7)])',
+				'layer-components:(w-[calc(var(--day-size,32px)*7)] flex flex-col items-center justify-center)',
+				className,
 			)}
 			{...rest}
 		>

package/src/components/dialog/Dialog.stories.tsx

@@ -34,7 +34,7 @@ function DummyContent() {
 	return (
 		<div className="col">
 			<H1>Some content</H1>
-			<div className="overflow-y-auto max-h-20vh">
+			<div className="max-h-20vh overflow-y-auto">
 				<P>
 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at
 					porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget
@@ -127,7 +127,7 @@ export const Positioned: Story = {
 			<ParticleLayer noPortal>
 				<DialogTrigger render={<Button />}>Open</DialogTrigger>
 				<DummyContent />
-				<DialogContent className="top-auto bottom-0px">
+				<DialogContent className="bottom-0px top-auto">
 					<DialogTitle>Hello world</DialogTitle>
 					<DialogActions>
 						<DialogClose />
@@ -169,7 +169,7 @@ export const VirtualKeyboard: Story = {
 						</DialogActions>
 					</DialogContent>
 				</Dialog>
-				<div className="fixed bottom-0 h-[var(--mock-virtual-keyboard-height,0)] bg-black w-full transition-height left-0 right-0" />
+				<div className="fixed bottom-0 left-0 right-0 h-[var(--mock-virtual-keyboard-height,0)] w-full transition-height bg-black" />
 			</Provider>
 		);
 	},

package/src/components/dialog/Dialog.tsx

@@ -49,11 +49,11 @@ const StyledContent = withClassName(
 	'data-[ending-style]:layer-components:(opacity-0 scale-95)',
 );
 const sheetClassNames = clsx(
-	'layer-variants:lt-sm:(translate-0 left-0 right-0 top-auto h-min-content rounded-tl-xl rounded-tr-xl rounded-b-0 border-b-0 pt-lg w-screen max-w-none shadow-up)',
+	'layer-variants:lt-sm:(left-0 right-0 top-auto h-min-content max-w-none w-screen translate-0 border-b-0 rounded-b-0 rounded-tl-xl rounded-tr-xl pt-lg shadow-up)',
 	'layer-variants:lt-sm:pb-[calc(env(safe-area-inset-bottom,0px))]',
 
-	'data-[starting-style]:layer-variants:lt-sm:(opacity-0 translate-y-full)',
-	'data-[ending-style]:layer-variants:lt-sm:(opacity-0 translate-y-full)',
+	'data-[starting-style]:layer-variants:lt-sm:(translate-y-full opacity-0)',
+	'data-[ending-style]:layer-variants:lt-sm:(translate-y-full opacity-0)',
 );
 const sheetClassNameWithOverlayKeyboard = clsx(
 	'layer-variants:lt-sm:bottom-[calc(var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px))+var(--gesture-y,0px))]',
@@ -219,11 +219,11 @@ export const Content = function Content({
 					{!disableSheet && <DialogSwipeHandle />}
 					<ScrollArea
 						direction="vertical"
-						className="layer-components:(w-full h-full)"
+						className="layer-components:(h-full w-full)"
 					>
 						<ScrollArea.Content
 							className={clsx(
-								'layer-components:(p-md flex flex-col gap-md)',
+								'layer-components:(flex flex-col gap-md p-md)',
 								innerClassName,
 							)}
 							style={{
@@ -343,7 +343,7 @@ export const DialogSwipeHandle = function DialogSwipeHandle({
 	const close = useContext(DialogCloseContext);
 	const innerRef = useRef<HTMLDivElement>(null);
 	useDrag(
-		({ swipe: [, swipeY], movement: [, dy], velocity: [, vy], last }) => {
+		({ swipe: [, swipeY], movement: [, dy], last }) => {
 			const content = findParentDialogContent(innerRef.current);
 			if (!content) return;
 			sheetCloseGestureLogic(swipeY, dy, last, close, content);
@@ -359,11 +359,11 @@ export const DialogSwipeHandle = function DialogSwipeHandle({
 			ref={finalRef}
 			{...props}
 			className={clsx(
-				'layer-components:(absolute top-0 left-50% transform-gpu -translate-x-1/2 w-20% py-2 rounded-lg cursor-grab sm:hidden touch-none)',
+				'layer-components:(absolute left-50% top-0 w-20% transform-gpu cursor-grab touch-none rounded-lg py-2 sm:hidden -translate-x-1/2)',
 				className,
 			)}
 		>
-			<div className="layer-components:(w-full h-[4px] bg-gray rounded-lg)" />
+			<div className="layer-components:(h-[4px] w-full rounded-lg bg-gray)" />
 		</div>
 	);
 };
@@ -388,7 +388,7 @@ export const DialogDefaultClose = function DialogDefaultClose({
 	return (
 		<DialogClose
 			className={clsx(
-				'absolute top-sm right-sm hidden sm:flex z-101',
+				'absolute right-sm top-sm z-101 hidden sm:flex',
 				className,
 			)}
 			aria-label="Close dialog"
@@ -476,7 +476,6 @@ export const DialogActions = withClassName(
 );
 
 export const DialogSelectTrigger = function DialogSelectTrigger({
-	ref,
 	children,
 	className,
 	...props
@@ -506,7 +505,6 @@ export const DialogSelectItemRoot = withClassName(
 );
 
 export const DialogSelectItem = function DialogSelectItem({
-	ref,
 	children,
 	...props
 }: ComponentPropsWithoutRef<typeof DialogSelectItemRoot> & {
@@ -514,7 +512,7 @@ export const DialogSelectItem = function DialogSelectItem({
 }) {
 	return (
 		<DialogSelectItemRoot {...props}>
-			<span className="flex-1 flex-row items-center gap-md min-h-18px">
+			<span className="min-h-18px flex-1 flex-row items-center gap-md">
 				{children}
 			</span>
 			<BaseRadio.Indicator className="flex-0-0-auto">

package/src/components/dropdownMenu/DropdownMenu.tsx

@@ -42,10 +42,10 @@ const StyledContent = withClassName(
 	'will-change-transform',
 );
 const itemClassName = classNames(
-	'layer-components:(text-md leading-4 color-main-ink flex items-center pr-4 pl-8 py-sm min-h-touch-large relative text-left select-none cursor-pointer)',
-	'layer-components:[&[data-disabled]]:(color-gray-dark bg-white pointer-events-none)',
-	'layer-components:focus-visible:(bg-main-light color-black)',
-	'layer-components:hover:(bg-main-light color-black)',
+	'layer-components:(relative min-h-touch-large flex cursor-pointer select-none items-center py-sm pl-8 pr-4 text-left text-md leading-4 color-main-ink)',
+	'layer-components:[&[data-disabled]]:(pointer-events-none color-gray-dark bg-white)',
+	'layer-components:focus-visible:(color-black bg-main-light)',
+	'layer-components:hover:(color-black bg-main-light)',
 	'layer-components:focus:outline-none',
 );
 const StyledItemBase = withClassName(BaseMenu.Item, itemClassName);
@@ -161,7 +161,7 @@ export const DropdownMenuContent = ({
 				positionMethod={positionMethod}
 			>
 				<StyledContent {...props}>
-					<div className="layer-components:(overflow-y-auto overflow-x-hidden overflow-unstable max-h-full rounded-md min-h-0)">
+					<div className="layer-components:(max-h-full min-h-0 overflow-x-hidden rounded-md overflow-y-auto overflow-unstable)">
 						{children}
 					</div>
 					<StyledArrow />

package/src/components/editableText/EditableText.tsx

@@ -102,9 +102,9 @@ export function EditableText({
 			onClick={() => setEditingFinal(true)}
 			className={clsx(
 				inputClassName,
-				'layer-variants:(border-transparent bg-transparent w-auto inline-flex items-center gap-2 font-size-inherit color-inherit shadow-none text-left)',
+				'layer-variants:(w-auto inline-flex items-center gap-2 text-left font-size-inherit shadow-none color-inherit bg-transparent border-transparent)',
 				'layer-variants:hover:(bg-main-light/80)',
-				'layer-variants:focus-visible:(outline-none bg-main-light/80 ring-2 ring-accent)',
+				'layer-variants:focus-visible:(outline-none ring-2 bg-main-light/80 ring-accent)',
 				'cursor-pointer',
 				className,
 			)}

package/src/components/emojiPicker/EmojiPicker.tsx

@@ -29,7 +29,12 @@ export const EmojiPickerViewport = ({
 	className,
 	...props
 }: EmojiPickerViewportProps) => (
-	<Box className="flex-1 min-h-0 overflow-hidden rounded-md bg-white">
+	<Box
+		className={clsx(
+			'layer-components:(min-h-0 flex-1 overflow-hidden rounded-md bg-white)',
+			className,
+		)}
+	>
 		<Core.Viewport
 			className="layer-components:(relative outline-hidden)"
 			{...props}
@@ -54,7 +59,7 @@ export const EmojiPickerCategoryHeader = (
 ) => (
 	<div
 		className={clsx(
-			'layer-components:(bg-inherit px-md py-sm text-xs font-semibold color-gray-dark sticky top-0)',
+			'layer-components:(sticky top-0 px-md py-sm text-xs font-semibold color-gray-dark bg-inherit)',
 			props.className,
 		)}
 	>
@@ -74,7 +79,7 @@ export const EmojiPickerEmoji = withClassName(
 			toggleMode="color"
 			size="small"
 			aria-label={p.emoji.label}
-			className="text-lg p-xs"
+			className="p-xs text-lg"
 		>
 			<Button.Icon>{p.emoji.emoji}</Button.Icon>
 		</Button>
@@ -125,7 +130,7 @@ export const EmojiPickerSkinToneSelector = (props: BoxProps) => {
 					toggleMode="color"
 					size="small"
 					aria-label={`Skin tone ${option}`}
-					className="text-md p-xs"
+					className="p-xs text-md"
 					onClick={() => setSkinTone(option.skinTone)}
 				>
 					<Button.Icon>{option.emoji}</Button.Icon>

package/src/components/forms/CheckboxField.tsx

@@ -20,7 +20,7 @@ export function CheckboxField({
 	id: providedId,
 	...rest
 }: CheckboxFieldProps) {
-	const [props, _, tools] = useField({ name, type: 'checkbox' });
+	const [props, _, tools] = useField({ name, required, type: 'checkbox' });
 	const id = useIdOrGenerated(providedId);
 	return (
 		<Box gap="sm" className={className}>

package/src/components/forms/EmojiField.tsx

@@ -39,7 +39,7 @@ export function EmojiField({
 							className={clsx('p-0 transition-color', className)}
 							{...rest}
 						>
-							<Button.Icon className="text-[19px] w-touch h-touch flex items-center justify-center">
+							<Button.Icon className="h-touch w-touch flex items-center justify-center text-[19px]">
 								{props.value || <Icon name="smile" />}
 							</Button.Icon>
 						</Button>

package/src/components/forms/FormikForm.stories.tsx

@@ -27,7 +27,7 @@ export const Default: Story = {
 			alert(JSON.stringify(values, null, 2));
 		},
 	},
-	render({ initialValues, ...args }) {
+	render({ initialValues: _, ...args }) {
 		return (
 			<FormikForm
 				initialValues={{

package/src/components/forms/NumberStepperField.tsx

@@ -11,7 +11,6 @@ export interface NumberStepperFieldProps
 	extends Omit<NumberStepperProps, 'value' | 'onChange'> {
 	name: string;
 	label?: string;
-	required?: boolean;
 	className?: string;
 	id?: string;
 	onChange?: (value: number) => void;
@@ -21,7 +20,6 @@ export function NumberStepperField({
 	name,
 	label,
 	className,
-	required,
 	id: providedId,
 	onChange,
 	...rest

package/src/components/forms/SwitchField.tsx

@@ -20,7 +20,7 @@ export function SwitchField({
 	id: providedId,
 	...rest
 }: SwitchFieldProps) {
-	const [props, _, tools] = useField({ name, type: 'checkbox' });
+	const [props, _, tools] = useField({ name, required, type: 'checkbox' });
 	const id = useIdOrGenerated(providedId);
 	return (
 		<Box gap="sm" className={className}>

package/src/components/forms/ToggleGroupField.tsx

@@ -21,7 +21,7 @@ function ToggleGroupFieldDefault({
 	id,
 	...props
 }: ToggleGroupFieldProps) {
-	const [fieldProps, _, tools] = useField({ name, ...props });
+	const [fieldProps, _, tools] = useField({ name, required, ...props });
 
 	return (
 		<FieldRoot>

package/src/components/horizontalList/HorizontalList.stories.tsx

@@ -37,7 +37,7 @@ const meta = {
 				<Button size="small">Twenty four</Button>
 				<Button
 					color="primary"
-					className="sticky right-2 bottom-2 flex-shrink-0 shadow-sm ml-auto"
+					className="sticky bottom-2 right-2 ml-auto flex-shrink-0 shadow-sm"
 				>
 					<Icon name="plus" />
 				</Button>
@@ -57,17 +57,17 @@ export const Default: Story = {
 	render: (args) => {
 		const [open, setOpen] = useState(false);
 		return (
-			<div className="bg-black flex flex-col items-center h-full min-h-80vh">
-				<div className="bg-white w-400px flex flex-col items-stretch flex-1">
+			<div className="h-full min-h-80vh flex flex-col items-center bg-black">
+				<div className="w-400px flex flex-1 flex-col items-stretch bg-white">
 					<Button
 						toggled={open}
 						onClick={() => setOpen(!open)}
-						className="mt-auto mb-1 mr-1 self-end"
+						className="mb-1 mr-1 mt-auto self-end"
 					>
 						{open ? 'Close' : 'Open'}
 					</Button>
 					<HorizontalList
-						className="border-t border-t-solid border-t-black max-h-200px"
+						className="max-h-200px border-t border-t-solid border-t-black"
 						openDirection="up"
 						{...args}
 						open={open}
@@ -83,9 +83,9 @@ export const CantOpen: Story = {
 	render: (args) => {
 		const [more, setMore] = useState(false);
 		return (
-			<div className="bg-white w-full flex flex-col items-stretch h-full justify-end">
+			<div className="h-full w-full flex flex-col items-stretch justify-end bg-white">
 				<HorizontalList
-					className="border-t border-t-solid border-t-black max-h-200px"
+					className="max-h-200px border-t border-t-solid border-t-black"
 					openDirection="up"
 					{...args}
 				>
@@ -113,7 +113,7 @@ export const CantOpen: Story = {
 					)}
 					<Button
 						color="primary"
-						className="sticky right-2 bottom-2 flex-shrink-0 shadow-sm ml-auto"
+						className="sticky bottom-2 right-2 ml-auto flex-shrink-0 shadow-sm"
 					>
 						<Icon name="plus" />
 					</Button>

package/src/components/horizontalList/HorizontalList.tsx

@@ -139,7 +139,7 @@ export function HorizontalList({
 	return (
 		<ScrollArea.Root
 			className={clsx(
-				'layer-components:(flex flex-col w-full)',
+				'layer-components:(w-full flex flex-col)',
 				'layer-components:max-h-300px',
 				className,
 			)}
@@ -149,8 +149,8 @@ export function HorizontalList({
 			<ScrollArea.Viewport ref={containerRef}>
 				<ScrollArea.Content
 					className={clsx(
-						'layer-components:(px-3 pt-3 pb-4 gap-2)',
-						'flex flex-row items-center gap-2 flex-shrink-0 w-max-content w-auto)',
+						'layer-components:(gap-2 px-3 pb-4 pt-3)',
+						'w-auto) w-max-content flex flex-shrink-0 flex-row items-center gap-2',
 						contentClassName,
 					)}
 					ref={contentRef}
@@ -163,9 +163,9 @@ export function HorizontalList({
 							onClick={toggleOpen}
 							emphasis="ghost"
 							className={clsx(
-								'layer-variants:(flex-shrink-0 sticky left-0 top-2 z-1)',
+								'layer-variants:(sticky left-0 top-2 z-1 flex-shrink-0)',
 								!open &&
-									'layer-variants:(rounded-none h-full border-r border-r-solid border-r-gray)',
+									'layer-variants:(h-full border-r rounded-none border-r-solid border-r-gray)',
 							)}
 						>
 							<Icon

package/src/components/icon/Icon.stories.tsx

@@ -35,10 +35,10 @@ export const All: Story = {
 				{iconNames.map((name) => (
 					<div
 						key={name}
-						className="flex flex-col items-center justify-center p-4 border border-gray-light gap-2"
+						className="flex flex-col items-center justify-center gap-2 border p-4 border-gray-light"
 					>
 						<Icon name={name} size={25} />
-						<span className="text-sm text-center">{name}</span>
+						<span className="text-center text-sm">{name}</span>
 					</div>
 				))}
 			</div>

package/src/components/imageUploader/ImageUploader.stories.tsx

@@ -34,7 +34,7 @@ function ImageUploaderDemo() {
 				file ? setValue(URL.createObjectURL(file)) : setValue(null)
 			}
 			value={value}
-			className="w-64 h-64"
+			className="h-64 w-64"
 		/>
 	);
 }

package/src/components/imageUploader/ImageUploader.tsx

@@ -146,7 +146,7 @@ export function ImageUploaderRoot({
 					accept="image/*"
 					onChange={onFileChange}
 					onClick={onFileClick}
-					className="absolute inset-0 pointer-events-none op-0"
+					className="pointer-events-none absolute inset-0 op-0"
 					id={inputId}
 				/>
 				{children}
@@ -193,7 +193,7 @@ function ImageUploaderPrebuilt({
 			</ImageUploaderEmptyControls>
 			{!props.value && cameraOpen && (
 				<CameraRoot
-					className="absolute w-full h-full z-1"
+					className="absolute z-1 h-full w-full"
 					format="image/png"
 					onCapture={(file) => {
 						props.onChange(file);
@@ -208,7 +208,7 @@ function ImageUploaderPrebuilt({
 						onClick={() => setCameraOpen(false)}
 						emphasis="ghost"
 						size="small"
-						className="color-white absolute top-2 left-2"
+						className="absolute left-2 top-2 color-white"
 					>
 						Cancel
 					</Button>
@@ -268,7 +268,7 @@ export function ImageUploaderRemoveButton({ className, ...rest }: ButtonProps) {
 		<Button
 			emphasis="ghost"
 			className={clsx(
-				'layer-variants:(absolute top-2 right-2 w-32px h-32px border-none p-2 cursor-pointer bg-white color-black rounded-lg transition-colors shadow-sm z-10)',
+				'layer-variants:(absolute right-2 top-2 z-10 h-32px w-32px cursor-pointer rounded-lg border-none p-2 shadow-sm transition-colors color-black bg-white)',
 				className,
 			)}
 			onClick={() => onChange(null)}
@@ -288,7 +288,7 @@ export function ImageUploaderDisplay({
 		<img
 			src={value}
 			className={clsx(
-				'layer-components:(w-full h-full object-cover object-center rounded-lg)',
+				'layer-components:(h-full w-full rounded-lg object-cover object-center)',
 				className,
 			)}
 			{...rest}
@@ -310,7 +310,7 @@ export function ImageUploaderEmptyControls({
 	return (
 		<div
 			className={classNames(
-				'layer-components:(absolute bg-gray-light inset-0 flex flex-col items-center justify-center gap-3 rounded-lg)',
+				'layer-components:(absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-lg bg-gray-light)',
 				{
 					'layer-components:bg-darken-2': draggingOver,
 				},

package/src/components/input/Input.tsx

@@ -9,12 +9,12 @@ import {
 import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
 
 export const inputClassName = classNames(
-	'layer-components:(px-5 py-1.25 text-md font-inherit rounded-lg bg-white select-auto min-w-60px color-black border-solid border-width-thin border-gray-dark shadow-sm shadow-inset transition-shadow)',
-	'layer-components:focus:(outline-none bg-lighten-3 ring-4	ring-white)',
-	'layer-components:focus-visible:(outline-none ring-accent ring-4)',
-	'layer-components:disabled:(bg-transparent border-gray placeholder-gray-dark shadow-none)',
+	'layer-components:(min-w-60px select-auto border-width-thin rounded-lg border-solid px-5 py-1.25 text-md font-inherit shadow-sm shadow-inset transition-shadow color-black bg-white border-gray-dark)',
+	'layer-components:focus:(outline-none ring-4 bg-lighten-3 ring-white)',
+	'layer-components:focus-visible:(outline-none ring-4 ring-accent)',
+	'layer-components:disabled:(shadow-none bg-transparent border-gray placeholder-gray-dark)',
 	'layer-components:md:(min-w-120px)',
-	'layer-variants:[&[data-size="small"]]:(px-md py-xs text-sm rounded-md min-w-40px)',
+	'layer-variants:[&[data-size="small"]]:(min-w-40px rounded-md px-md py-xs text-sm)',
 );
 
 export interface InputProps extends ComponentPropsWithRef<'input'> {

package/src/components/layouts/PageContent.tsx

@@ -36,7 +36,7 @@ export function PageContent({
 			container="reset"
 			className={classNames(
 				'[grid-area:content]',
-				'layer-components:(max-w-full min-w-0 flex-1-0-auto mx-auto)',
+				'layer-components:flex-1-0-auto layer-components:(mx-auto max-w-full min-w-0)',
 				className,
 			)}
 			ref={finalRef}

package/src/components/layouts/PageFixedArea.tsx

@@ -9,7 +9,7 @@ export function PageFixedArea({
 		<div
 			{...props}
 			className={classNames(
-				'layer-components:(sticky top-0 z-nav bg-wash w-full items-stretch gap-2 flex flex-col)',
+				'layer-components:(sticky top-0 z-nav w-full flex flex-col items-stretch gap-2 bg-wash)',
 				className,
 			)}
 		/>

package/src/components/layouts/PageNav.tsx

@@ -26,9 +26,9 @@ export function PageNav({
 		<HideWhileKeyboardOpen
 			{...props}
 			className={classNames(
-				'layer-components:([grid-area:nav] sticky bottom-0 bg-inherit z-[var(--z-nav)] pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))])',
-				'layer-components:before:(content-[""] absolute inset-x-4 top-0 h-px bg-gray-dark/80)',
-				'layer-components:md:([grid-area:nav] sticky top-lg h-auto bottom-auto left-auto right-auto) layer-components:md:before:(hidden)',
+				'layer-components:([grid-area:nav] sticky bottom-0 z-[var(--z-nav)] pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))] bg-inherit)',
+				'layer-components:before:(absolute inset-x-4 top-0 h-px content-[""] bg-gray-dark/80)',
+				'layer-components:md:([grid-area:nav] sticky bottom-auto left-auto right-auto top-lg h-auto) layer-components:md:before:(hidden)',
 				className,
 			)}
 			ref={ref}

package/src/components/layouts/PageNowPlaying.tsx

@@ -21,15 +21,15 @@ export function PageNowPlaying({
 			<div
 				{...props}
 				className={classNames(
-					'layer-components:(fixed left-0 right-0 z-[var(--z-now-playing)] flex flex-col gap-2 items-end)',
+					'layer-components:(fixed left-0 right-0 z-[var(--z-now-playing)] flex flex-col items-end gap-2)',
 					// on mobile, this must be positioned above any nav bar that's present,
 					// or at minimum in the safe area
 					'layer-components:bottom-[var(--nav-height,env(safe-area-inset-bottom,0px))]',
 					'layer-components:transition-bottom',
-					'layer-components:md:(fixed bottom-3 left-[var(--content-left,20%)] transition-opacity top-auto items-end w-[var(--content-width,100%)] p-0 opacity-[var(--content-ready,0)])',
+					'layer-components:md:(fixed bottom-3 left-[var(--content-left,20%)] top-auto w-[var(--content-width,100%)] items-end p-0 opacity-[var(--content-ready,0)] transition-opacity)',
 					unstyled
 						? 'layer-variants:p-2'
-						: 'layer-components:(bg-wash p-2px rounded-xl border-light shadow-md min-w-32px items-center justify-center m-2 w-auto)',
+						: 'layer-components:(m-2 min-w-32px w-auto items-center justify-center border-light rounded-xl p-2px shadow-md bg-wash)',
 					keepAboveKeyboard &&
 						virtualKeyboardBehavior === 'overlay' &&
 						'layer-variants:lt-md:bottom-[max(var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px),var(--nav-height,env(safe-area-inset-bottom,0px))))]',

package/src/components/layouts/PageRoot.tsx

@@ -7,9 +7,9 @@ export function PageRoot({ className, children, ...rest }: PageRootProps) {
 	return (
 		<div
 			className={clsx(
-				'layer-components:(flex-grow-1 flex-shrink-1 flex-basis-0 min-h-100dvh bg-wash)',
-				'layer-components:(grid grid-areas-[content]-[nav] grid-cols-[1fr] grid-rows-[1fr_auto] items-start justify-center)',
-				'md:layer-responsive:(grid-areas-[gutter1_nav_content_gutter2] grid-cols-[1fr_auto_20fr_1fr] min-h-auto h-auto bg-wash)',
+				'layer-components:(min-h-100dvh flex-shrink-1 flex-grow-1 flex-basis-0 bg-wash)',
+				'layer-components:(grid grid-cols-[1fr] grid-rows-[1fr_auto] grid-areas-[content]-[nav] items-start justify-center)',
+				'md:layer-responsive:(grid-cols-[1fr_auto_20fr_1fr] grid-areas-[gutter1_nav_content_gutter2] h-auto min-h-auto bg-wash)',
 				'lg:layer-responsive:(grid-cols-[1fr_auto_min(800px,70vw)_1fr])',
 				className,
 			)}

package/src/components/layouts/layouts.stories.tsx

@@ -135,7 +135,7 @@ export const ManualWidth: Story = {
 
 export const WithoutNav: Story = {
 	render: () => (
-		<PageRoot className="w-full h-full">
+		<PageRoot className="h-full w-full">
 			<PageContent>
 				<div className="text-center">
 					<h1 className="text-3xl font-bold">Hello, World!</h1>
@@ -170,7 +170,7 @@ export const WithVirtualKeyboard: Story = {
 		}, [keyboard]);
 
 		return (
-			<PageRoot className="w-full h-full">
+			<PageRoot className="h-full w-full">
 				<PageContent>
 					<div className="text-center">
 						<h1 className="text-3xl font-bold">Hello, World!</h1>
@@ -200,7 +200,7 @@ export const WithVirtualKeyboard: Story = {
 						</NavBarItem>
 					</NavBarRoot>
 				</PageNav>
-				<div className="fixed bottom-0 h-[var(--mock-virtual-keyboard-height,0)] bg-black w-full transition-height left-0 right-0" />
+				<div className="fixed bottom-0 left-0 right-0 h-[var(--mock-virtual-keyboard-height,0)] w-full transition-height bg-black" />
 			</PageRoot>
 		);
 	},

package/src/components/lightbox/Lightbox.tsx

@@ -30,7 +30,7 @@ export const LightboxClose = (props: DialogCloseProps) => (
 				<Icon name="x" />
 			</Button>
 		}
-		className="absolute top-md right-md"
+		className="absolute right-md top-md"
 	/>
 );
 

package/src/components/marquee/marquee.stories.tsx

@@ -21,7 +21,7 @@ export const Default: Story = {
 				<Marquee.Item>
 					<img src="https://resources.biscuits.club/images/pashka.jpg" />
 				</Marquee.Item>
-				<Marquee.Item className="flex items-center justify-center bg-primary-wash color-primary-dark text-lg">
+				<Marquee.Item className="flex items-center justify-center text-lg color-primary-dark bg-primary-wash">
 					Hello, world
 				</Marquee.Item>
 				<Marquee.Item