@a-type/ui 4.1.8 → 5.0.1

package/src/colors.stories.tsx

@@ -2,8 +2,9 @@ import type { Meta, StoryObj } from '@storybook/react';
 import clsx from 'clsx';
 import { CSSProperties } from 'react';
 import { Box } from './components/index.js';
+import { PROPS } from './uno/index.js';
 import { snapshotColorContext } from './uno/logic/color.js';
-import { palettes } from './uno/logic/palettes.js';
+import { defaultPalettes } from './uno/logic/palettes.js';
 
 const meta = {
 	title: 'System/Colors',
@@ -32,27 +33,31 @@ export const Default: Story = {
 	render(args: any) {
 		const style: any = args.customHue
 			? {
-					'--p-primary-hue': args.customHue,
+					[PROPS.USER.COLOR.PRIMARY_HUE]: args.customHue,
 			  }
 			: {};
 
 		const ranges = (
 			<>
-				<Range className="theme" style={style} />
-				<Range className="theme-lemon" />
-				<Range className="theme-leek" />
-				<Range className="theme-tomato" />
-				<Range className="theme-eggplant" />
-				<Range className="theme-blueberry" />
+				<Range className="palette-primary" style={style} />
+				<Range className="palette-lemon" />
+				<Range className="palette-leek" />
+				<Range className="palette-tomato" />
+				<Range className="palette-eggplant" />
+				<Range className="palette-blueberry" />
 				<Range className="palette-attention" />
 				<Range className="palette-success" />
-				<Box className="h-100px">
+				<Box className="relative h-100px">
 					<Box grow className="bg-gray-wash" />
 					<Box grow className="bg-gray-light" />
 					<Box grow className="bg-gray" />
 					<Box grow className="bg-gray-dark" />
 					<Box grow className="bg-gray-ink" />
+					<div className="absolute left-0 top-0 text-xs color-white bg-black/50">
+						local gray
+					</div>
 				</Box>
+				<Range className="palette-gray" />
 				<Range className="palette-high-contrast" />
 				<Box className="h-100px">
 					<Box grow className="bg-black" />
@@ -106,12 +111,15 @@ function Swatch({
 
 function Range({ className, style }: { className?: string; style?: any }) {
 	return (
-		<Box className={className} style={style}>
+		<Box className={clsx('relative', className)} style={style}>
 			<Swatch className="bg-main-wash" />
 			<Swatch className="bg-main-light" />
 			<Swatch className="bg-main" />
 			<Swatch className="bg-main-dark" />
 			<Swatch className="bg-main-ink" />
+			<div className="absolute left-0 top-0 text-xs color-white bg-black/50">
+				{className}
+			</div>
 		</Box>
 	);
 }
@@ -120,7 +128,7 @@ export const Modifiers: Story = {
 	render(args: any) {
 		const style: any = args.customHue
 			? {
-					'--p-primary-hue': args.customHue,
+					[PROPS.USER.COLOR.PRIMARY_HUE]: args.customHue,
 			  }
 			: {};
 		return (
@@ -167,7 +175,7 @@ export const Inheritance: Story = {
 	render(args: any) {
 		const style: any = args.customHue
 			? {
-					'--p-primary-hue': args.customHue,
+					[PROPS.USER.COLOR.PRIMARY_HUE]: args.customHue,
 			  }
 			: {};
 		return (
@@ -258,11 +266,11 @@ export const ComputedColors: Story = {
 	render() {
 		const ctx = snapshotColorContext('primary');
 		const oklchValues = [
-			palettes.primary.definitions.wash.computeOklch(ctx),
-			palettes.primary.definitions.light.computeOklch(ctx),
-			palettes.primary.definitions.default.computeOklch(ctx),
-			palettes.primary.definitions.dark.computeOklch(ctx),
-			palettes.primary.definitions.ink.computeOklch(ctx),
+			defaultPalettes.primary.definitions.wash.computeOklch(ctx),
+			defaultPalettes.primary.definitions.light.computeOklch(ctx),
+			defaultPalettes.primary.definitions.default.computeOklch(ctx),
+			defaultPalettes.primary.definitions.dark.computeOklch(ctx),
+			defaultPalettes.primary.definitions.ink.computeOklch(ctx),
 		];
 
 		return (

package/src/components/avatar/Avatar.tsx

@@ -33,7 +33,7 @@ export function Avatar({
 			className={classNames(
 				'layer-components:(relative aspect-1 w-24px flex flex-shrink-0 select-none items-center justify-center overflow-hidden border-default rounded-lg bg-white)',
 				popIn &&
-					'layer-variants:(animate-pop-in-from-half animate-duration-200 animate-ease-springy)',
+					'layer-variants:animate-pop-in-from-half layer-variants:animate-duration-200 layer-variants:animate-ease-springy',
 				empty && 'layer-components:(border-dashed bg-gray-light)',
 				className,
 			)}

package/src/components/button/Button.stories.tsx

@@ -49,11 +49,21 @@ export const Default: Story = {
 					</Button>
 				</Box>
 				<Box gap items="center">
-					<Button emphasis="primary">Primary</Button>
-					<Button emphasis="default">Default</Button>
-					<Button emphasis="light">Light</Button>
-					<Button emphasis="ghost">Ghost</Button>
-					<Button emphasis="contrast">Contrast</Button>
+					<Button {...args} emphasis="primary">
+						Primary
+					</Button>
+					<Button {...args} emphasis="default">
+						Default
+					</Button>
+					<Button {...args} emphasis="light">
+						Light
+					</Button>
+					<Button {...args} emphasis="ghost">
+						Ghost
+					</Button>
+					<Button {...args} emphasis="contrast">
+						Contrast
+					</Button>
 				</Box>
 			</Box>
 		);

package/src/components/button/Button.tsx

@@ -166,7 +166,7 @@ export const ButtonToggleIndicator = memo(function ToggleIndicator({
 		<Icon
 			aria-hidden
 			name="check"
-			className="ml--1 w-0 transition-width"
+			className="w-0 transition-width -ml-1"
 			style={{
 				width: value ? '15px' : 0,
 			}}
@@ -176,7 +176,7 @@ export const ButtonToggleIndicator = memo(function ToggleIndicator({
 });
 
 // allows custom icons to trigger icon button behavior
-export const ButtonIcon = withClassName(SlotDiv, 'icon flex-shrink-0 flex');
+export const ButtonIcon = withClassName(SlotDiv, 'icon flex flex-shrink-0');
 ButtonIcon.displayName = 'ButtonIcon';
 
 export const Button = Object.assign(ButtonRoot, {

package/src/components/button/classes.tsx

@@ -34,21 +34,22 @@ export function getButtonClassName({
 		'layer-components:(relative overflow-visible whitespace-nowrap)',
 		'layer-components:(transition-all duration-200)',
 		'layer-components:(shadow-sm ring-bg)',
-		'layer-components:(color-contrast)',
+		'layer-components:color-contrast',
 
 		emphasis === 'ghost' && 'layer-variants:(border-none shadow-none)',
-		emphasis === 'contrast' && 'layer-variants:(border-bg hover:bg-gray-ink)',
+		emphasis === 'contrast' &&
+			'layer-variants:border-bg layer-variants:hover:bg-gray-ink',
 
 		{
 			'layer-components:bg-main': emphasis === 'primary',
-			'layer-components:(color-main-ink bg-main-light)': emphasis === 'light',
+			'layer-components:color-main-ink layer-components:bg-main-light':
+				emphasis === 'light',
 			'layer-components:bg-white layer-variants:focus-visible:bg-white':
 				emphasis === 'default',
 			'layer-components:(color-main-ink bg-transparent aria-pressed:bg-main-wash)':
 				emphasis === 'ghost',
-			'layer-components:(bg-black)': emphasis === 'contrast',
+			'layer-components:bg-black': emphasis === 'contrast',
 		},
-		color === 'gray' && 'hov [--l-saturation:0]',
 
 		{
 			'layer-components:(rounded-lg px-4 py-2 text-md)': size === 'default',
@@ -56,7 +57,7 @@ export function getButtonClassName({
 				size === 'small',
 			'layer-components:[&[data-has-icon=true][data-has-label=false]]:(rounded-lg p-2.35 text-sm)':
 				size === 'default' && !disableIconMode,
-			'layer-components:[&[data-has-icon=true][data-has-label=false]]:(rounded-lg p-2 text-xs -m-y-0.5)':
+			'layer-components:[&[data-has-icon=true][data-has-label=false]]:(rounded-lg p-sm text-xs -m-y-2xs)':
 				size === 'small' && !disableIconMode,
 		},
 
@@ -68,7 +69,7 @@ export function getButtonClassName({
 
 		'layer-components:active:(ring-8 bg-darken-1)',
 
-		'layer-components:disabled:(cursor-default opacity-50 shadow-none ring-none)',
+		'layer-components:disabled:(cursor-default opacity-50 ring-none shadow-none)',
 		'layer-components:[&[data-disabled=true]]:(cursor-default opacity-50 shadow-none)',
 
 		{

package/src/components/card/Card.tsx

@@ -18,7 +18,7 @@ import { SlotDiv } from '../utility/SlotDiv.js';
 
 export const CardRoot = withClassName(
 	withProps(Box, { container: 'reset' }),
-	'layer-components:(flex flex-col border-light rounded-lg text-lg overflow-hidden h-max-content relative bg-wash bg-darken-0.5 color-black shadow-sm)',
+	'layer-components:(relative h-max-content flex flex-col overflow-hidden border-thin rounded-lg text-lg shadow-sm color-black bg-wash bg-darken-0.5 border-gray border-darken-3)',
 	'layer-variants:[&[data-borderless=true]]:(border-none shadow-md)',
 );
 
@@ -95,17 +95,17 @@ export function CardMain({
 
 export const CardTitle = withClassName(
 	'div',
-	'layer-components:(flex flex-col gap-1 my-xs mx-xs py-xs px-sm w-auto max-h-80px max-w-full relative z-1)',
-	'layer-components:(bg-white rounded-md border border-solid border-gray-dark transition-colors)',
-	'layer-components:(text-md overflow-hidden text-ellipsis text-inherit font-semibold)',
+	'layer-components:(relative z-1 mx-xs my-xs max-h-80px max-w-full w-auto flex flex-col gap-1 px-sm py-xs)',
+	'layer-components:(border rounded-md border-solid transition-colors bg-white border-gray-dark)',
+	'layer-components:(overflow-hidden text-ellipsis text-md text-inherit font-semibold)',
 	'layer-components:[[data-compact]_&]:(text-sm)',
 );
 
 const CardContentRoot = withClassName(
 	'div',
-	'layer-components:(flex flex-col gap-1 px-2 py-1 bg-white/80 color-black rounded-sm mx-2 my-0.5 border border-solid border-gray-dark/50 text-xs relative z-1)',
-	'layer-variants:[[data-compact]_&]:(py-0 px-sm my-0 text-xs)',
-	'layer-variants:[&[data-unstyled]]:(p-0 [background:unset] border-none)',
+	'layer-components:(relative z-1 mx-2 my-0.5 flex flex-col gap-1 border rounded-sm border-solid px-2 py-1 text-xs color-black bg-white/80 border-gray-dark/50)',
+	'layer-variants:[[data-compact]_&]:(my-0 px-sm py-0 text-xs)',
+	'layer-variants:[&[data-unstyled]]:([background:unset] border-none p-0)',
 );
 export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
 	unstyled?: boolean;
@@ -123,22 +123,22 @@ export function CardContent({ unstyled, ref, ...rest }: CardContentProps) {
 
 export const CardImage = withClassName(
 	SlotDiv,
-	'layer-components:(absolute z-0 right-0 top-0 bottom-0 w-full h-full object-cover bg-cover bg-center)',
+	'layer-components:(absolute bottom-0 right-0 top-0 z-0 h-full w-full bg-cover bg-center object-cover)',
 );
 
 export const CardFooter = withClassName(
 	'div',
-	'layer-components:(flex flex-row flex-shrink-0 p-1 relative z-1)',
+	'layer-components:(relative z-1 flex flex-shrink-0 flex-row p-1)',
 );
 
 export const CardActions = withClassName(
 	'div',
-	'layer-components:(ml-0 mr-auto flex flex-row gap-2 items-center bg-white/50 rounded-lg p-0 border border-solid border-gray-dark/50)',
+	'layer-components:(ml-0 mr-auto flex flex-row items-center gap-2 border rounded-lg border-solid p-0 bg-white/50 border-gray-dark/50)',
 );
 
 export const CardMenu = withClassName(
 	'div',
-	'layer-components:(mr-0 ml-auto my-auto flex flex-row gap-1 items-center bg-white/50 py-0.5 rounded-lg p-0)',
+	'layer-components:(my-auto ml-auto mr-0 flex flex-row items-center gap-1 rounded-lg p-0 py-0.5 bg-white/50)',
 );
 
 export const cardGridColumns = {

package/src/components/colorPicker/ColorPicker.tsx

@@ -37,7 +37,7 @@ export function ColorPicker({
 			>
 				<Button.Icon render={<ColorSwatch value={resolvedValue} />} />
 			</Select.Trigger>
-			<Select.Content className="z-[calc(var(--z-dialog)+1)]">
+			<Select.Content>
 				<Select.Item value="lemon">
 					<ColorSwatch value="lemon" />
 					<ItemLabel>Lemon</ItemLabel>

package/src/components/datePicker/Calendar.tsx

@@ -8,20 +8,20 @@ import { Button } from '../button/index.js';
 
 export const MonthRow = withClassName(
 	'div',
-	'layer-components:(flex flex-row justify-between items-center w-full)',
+	'layer-components:(w-full flex flex-row items-center justify-between)',
 );
 
 export const MonthLabel = withClassName(
 	'span',
-	'layer-components:(text-sm font-bold min-w-0 overflow-hidden text-center text-ellipsis self-center)',
+	'layer-components:(min-w-0 self-center overflow-hidden text-ellipsis text-center text-sm font-bold)',
 );
 
 export const MonthButton = withClassName(Button, 'self-center');
 
 export const CalendarGridRoot = withClassName(
 	'div',
-	'layer-components:(grid grid-cols-[repeat(7,var(--day-size,32px))] [grid-auto-rows:var(--day-size,32px)])',
-	'layer-components:(height-[calc(var(--day-size,32px)*7)] rounded overflow-hidden p-2)',
+	'layer-components:([grid-auto-rows:var(--day-size,32px)] grid grid-cols-[repeat(7,var(--day-size,32px))])',
+	'layer-components:height-[calc(var(--day-size,32px)*7)] layer-components:(overflow-hidden rounded p-2)',
 );
 
 export const DayLabel = withClassName(
@@ -55,25 +55,25 @@ export function CalendarGrid({
 
 export const CalendarDay = withClassName(
 	BaseCalendarDay,
-	'layer-components:(border border-solid border-transparent bg-white mr--1px mb--1px relative color-black)',
-	'layer-components:(flex items-center justify-center transition cursor-pointer)',
-	'layer-components:[&[data-highlighted]]:(z-1 ring-2 ring-accent)',
+	'layer-components:(relative mb--1px mr--1px border border-solid color-black bg-white border-transparent)',
+	'layer-components:(flex cursor-pointer items-center justify-center transition)',
+	'layer-components:data-[highlighted]:(z-1 ring-2 ring-accent)',
 	'layer-components:hover:(z-1 ring-2 ring-accent)',
-	'layer-components:active:(bg-main-light rounded)',
-	'layer-components:[&[data-selected]]:(bg-main z-2 rounded)',
-	'layer-components:[&[data-in-range]]:(bg-main-light rounded-none z-1)',
-	'layer-components:[&[data-range-start]]:(bg-main rounded-l rounded-r-none z-1)',
-	'layer-components:[&[data-range-end]]:(bg-main rounded-r rounded-l-none z-1)',
-	'layer-components:[&[data-disabled=true]]:(opacity-50 cursor-not-allowed)',
+	'layer-components:active:(rounded bg-main-light)',
+	'layer-components:[&[data-selected]]:(z-2 rounded bg-main)',
+	'layer-components:[&[data-in-range]]:(z-1 rounded-none bg-main-light)',
+	'layer-components:[&[data-range-start]]:(z-1 rounded-l rounded-r-none bg-main)',
+	'layer-components:[&[data-range-end]]:(z-1 rounded-l-none rounded-r bg-main)',
+	'layer-components:[&[data-disabled=true]]:(cursor-not-allowed opacity-50)',
 	// today dot
-	"layer-components:[&[data-today]]:before:(content-[''] absolute left-[1px] top-[1px] w-[6px] h-[6px] rounded-lg bg-attention border-1 border-solid border-black)",
+	"layer-components:[&[data-today]]:before:(absolute left-[1px] top-[1px] h-[6px] w-[6px] border-1 rounded-lg border-solid content-[''] bg-attention border-black)",
 	// calendar edges
 	'layer-components:[&[data-top-edge]]:(border-t-gray)',
 	'layer-components:[&[data-bottom-edge]]:(border-b-gray)',
 	'layer-components:[&[data-first-column]]:(border-l-gray)',
 	'layer-components:[&[data-last-column]]:(border-r-gray)',
-	'layer-components:[&[data-day-first]]:(border-l-gray rounded-tl)',
-	'layer-components:[&[data-day-last]]:(border-r-gray rounded-br)',
+	'layer-components:[&[data-day-first]]:(rounded-tl border-l-gray)',
+	'layer-components:[&[data-day-last]]:(rounded-br border-r-gray)',
 	'layer-components:[&[data-first-column][data-bottom-edge]]:rounded-bl',
 	'layer-components:[&[data-last-column][data-bottom-edge]]:rounded-br',
 	'layer-components:[&[data-first-column][data-top-edge]]:rounded-tl',

package/src/components/dialog/Dialog.tsx

@@ -32,7 +32,7 @@ import { selectTriggerClassName } from '../select/index.js';
 
 const StyledOverlay = withClassName(
 	BaseDialog.Backdrop,
-	'layer-components:border-top-1 layer-components:border-top-solid layer-components:border-top-gray layer-components:(fixed inset-0 shadow-[0_30px_60px_0px] shadow-black/20 shadow-inset transition bg-black/15)',
+	'layer-components:border-top-1 layer-components:border-top-gray layer-components:border-top-solid layer-components:(fixed inset-0 shadow-[0_30px_60px_0px] shadow-black/20 shadow-inset transition bg-black/15)',
 	'layer-components:backdrop-blur-sm',
 	'start-end:opacity-0',
 );

package/src/components/editableText/EditableText.tsx

@@ -88,7 +88,10 @@ export function EditableText({
 				value={value}
 				onChange={handleChange}
 				onBlur={handleBlur}
-				className={clsx('layer-variants:font-size-inherit', className)}
+				className={clsx(
+					'layer-variants:[&_input]:font-size-inherit',
+					className,
+				)}
 				id={id}
 				autoSelect={autoSelect}
 				onKeyDown={handleKeyDown}
@@ -102,7 +105,7 @@ export function EditableText({
 			onClick={() => setEditingFinal(true)}
 			className={clsx(
 				inputClassName,
-				'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:(w-auto inline-flex items-center gap-sm rounded-md px-md text-left font-size-inherit color-inherit bg-transparent border-transparent shadow-none)',
 				'layer-variants:hover:(bg-main-light/80)',
 				'layer-variants:focus-visible:(outline-none ring-2 bg-main-light/80 ring-accent)',
 				'cursor-pointer',
@@ -112,7 +115,7 @@ export function EditableText({
 			{...rest}
 		>
 			{value}
-			<Icon name="pencil" className="stroke-main-dark opacity-50" />
+			<Icon name="pencil" className="stroke-main-dark opacity-80" />
 		</button>
 	);
 }

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

@@ -41,7 +41,12 @@ export const Default: Story = {
 				}}
 				{...args}
 			>
-				<TextField name="email" type="email" label="Email" />
+				<TextField
+					name="email"
+					type="email"
+					label="Email"
+					placeholder="you@example.com"
+				/>
 				<TextField name="password" type="password" label="Password" />
 				<NumberStepperField name="age" label="Age" min={13} max={100} />
 				<CheckboxField name="tos" label="I agree" />

package/src/components/forms/TextField.tsx

@@ -2,7 +2,6 @@
 
 import { useField, useFormikContext } from 'formik';
 import {
-	ComponentProps,
 	InputHTMLAttributes,
 	KeyboardEvent,
 	Ref,
@@ -13,23 +12,19 @@ import {
 import { withClassName } from '../../hooks.js';
 import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
 import useMergedRef from '../../hooks/useMergedRef.js';
-import { Input } from '../input/Input.js';
+import { Input, InputProps } from '../input/Input.js';
 import { TextArea, TextAreaProps } from '../textArea/TextArea.js';
 import { FieldLabel } from './FieldLabel.js';
 
 export type TextFieldProps = {
 	name: string;
 	label?: string;
-	required?: boolean;
-	type?: InputHTMLAttributes<HTMLInputElement>['type'];
-	className?: string;
-	placeholder?: string;
-	autoComplete?: InputHTMLAttributes<HTMLInputElement>['autoComplete'];
 	autoFocus?: InputHTMLAttributes<HTMLInputElement>['autoFocus'];
 	autoFocusDelay?: number;
 	inputRef?: Ref<HTMLInputElement>;
 	inputClassName?: string;
-} & ComponentProps<typeof Input>;
+	ref?: Ref<HTMLDivElement>;
+} & Omit<InputProps, 'ref'>;
 
 const emptyRef = (() => {}) as any;
 
@@ -47,9 +42,7 @@ export const TextField = function TextField({
 	id: providedId,
 	inputClassName,
 	...rest
-}: TextFieldProps & {
-	ref?: React.Ref<HTMLDivElement>;
-}) {
+}: TextFieldProps) {
 	const [props] = useField({
 		name,
 		onChange,

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

@@ -36,7 +36,7 @@ const meta = {
 				<Button size="small">Twenty three</Button>
 				<Button size="small">Twenty four</Button>
 				<Button
-					color="primary"
+					emphasis="primary"
 					className="sticky bottom-2 right-2 ml-auto flex-shrink-0 shadow-sm"
 				>
 					<Icon name="plus" />

package/src/components/horizontalList/HorizontalList.tsx

@@ -59,7 +59,7 @@ export function HorizontalList({
 		if (!content || !container) {
 			return;
 		}
-		const contentWidth = content.offsetWidth;
+		const contentWidth = content.scrollWidth;
 		const containerHeight = container.offsetHeight;
 		const containerWidth = container.offsetWidth;
 		if (open && contentWidth > containerWidth) {
@@ -105,7 +105,8 @@ export function HorizontalList({
 				)
 				.finished.then(() => {
 					requestAnimationFrame(() => {
-						const canOpen = content.offsetWidth > container.offsetWidth;
+						const canOpen = container.scrollWidth > container.offsetWidth;
+						console.log('can open', canOpen);
 						emitCanOpenChange(canOpen);
 					});
 				});
@@ -124,7 +125,7 @@ export function HorizontalList({
 			if (!content || !container) {
 				return;
 			}
-			const canOpen = content.offsetWidth > container.offsetWidth;
+			const canOpen = container.scrollWidth > container.offsetWidth;
 			emitCanOpenChange(canOpen);
 		});
 		resizeObserver.observe(containerRef.current);
@@ -147,10 +148,10 @@ export function HorizontalList({
 			{...rest}
 		>
 			<ScrollArea.Viewport ref={containerRef}>
-				<ScrollArea.Content
+				<div
 					className={clsx(
 						'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',
+						'w-max-content flex flex-shrink-0 flex-row items-center gap-2',
 						contentClassName,
 					)}
 					ref={contentRef}
@@ -158,6 +159,8 @@ export function HorizontalList({
 					<CollapsibleSimple
 						horizontal
 						open={internalCanOpen && !disableInternalOpenToggle}
+						data-can-open={internalCanOpen}
+						data-disabled={disableInternalOpenToggle ? '' : undefined}
 					>
 						<Button
 							onClick={toggleOpen}
@@ -178,7 +181,7 @@ export function HorizontalList({
 						</Button>
 					</CollapsibleSimple>
 					{children}
-				</ScrollArea.Content>
+				</div>
 			</ScrollArea.Viewport>
 			<ScrollArea.Scrollbar />
 			<ScrollArea.Scrollbar orientation="horizontal" />

package/src/components/input/Input.tsx

@@ -8,10 +8,11 @@ import { withClassName } from '../../hooks.js';
 import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
 import { GroupScaleReset } from '../../systems/GroupScale.js';
 import { inputInfo } from '../../systems/inputs.js';
+import { PROPS } from '../../uno/index.js';
 
 export const inputClassName = clsx(
 	'layer-components:(min-w-60px flex-1 select-auto border-none px-0 py-1.25 text-md font-inherit bg-transparent)',
-	'layer-components:placeholder:(color-gray-dark)',
+	'layer-components:placeholder:color-gray-dark',
 	'layer-components:focus:(outline-none)',
 	'layer-components:focus-visible:(outline-none)',
 	'layer-components:first:(rounded-l-inherit pl-md)',
@@ -19,24 +20,32 @@ export const inputClassName = clsx(
 );
 
 const inputBorderClassName = clsx(
-	'layer-components:([--local-corner-scale:1] [--spacing-scale:1])',
-	'layer-components:([--global-shadow-spread:0] flex flex-row items-center gap-xs border-1 rounded-lg border-solid text-md shadow-sm shadow-inset transition-shadow color-black bg-white border-black)',
+	'layer-components:(flex flex-row items-center gap-xs border-1 rounded-lg border-solid text-md shadow-sm shadow-inset transition-shadow color-black bg-white border-black)',
 	'layer-components:(w-max-content overflow-clip)',
-	'layer-components:[&:has(input:disabled),&:has(textarea:disabled)]:(shadow-none bg-transparent border-gray placeholder-gray-dark)',
+	'layer-components:[&:has(input:disabled),&:has(textarea:disabled)]:(bg-transparent border-gray shadow-none placeholder-gray-dark)',
 	'layer-components:[&:has(input:focus-visible),&:has(textarea:focus-visible)]:(outline-none ring ring-4 ring-accent)',
 	'layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:(outline-none ring ring-4 bg-lighten-3 ring-main-light)',
-	'layer-components:[&:has(input:hover),&:has(textarea:hover)]:(border-black)',
-	'layer-components:[&>.icon]:(mx-sm)',
+	'layer-components:[&:has(input:hover),&:has(textarea:hover)]:border-black',
+	'layer-components:[&>.icon]:mx-sm',
 );
 
-function InputBorderImpl(
-	props: React.HTMLAttributes<HTMLDivElement> & {
-		ref?: Ref<HTMLDivElement>;
-	},
-) {
+function InputBorderImpl({
+	style,
+	...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+	ref?: Ref<HTMLDivElement>;
+}) {
 	return (
 		<GroupScaleReset>
-			<div {...props} />
+			<div
+				{...props}
+				style={{
+					[PROPS.LOCALS.CORNER_SCALE]: '1',
+					[PROPS.LOCALS.SPACING_SCALE]: '1',
+					[PROPS.USER.SHADOW_SPREAD]: '0',
+					...style,
+				}}
+			/>
 		</GroupScaleReset>
 	);
 }

package/src/components/lightbox/Lightbox.tsx

@@ -36,16 +36,16 @@ export const LightboxClose = (props: DialogCloseProps) => (
 
 export const LightboxOverlay = withClassName(
 	Dialog.Backdrop,
-	'layer-components:(fixed inset-0 bg-black/50 backdrop-blur-sm z-backdrop)',
+	'layer-components:(fixed inset-0 z-backdrop backdrop-blur-sm bg-black/50)',
 	'transform-gpu !motion-reduce:animate-none',
-	'layer-components:[&[data-state=closed]]:animate-fade-out layer-components:(animate-fade-in animate-duration-200)',
+	'layer-components:(animate-fade-in [&[data-state=closed]]:animate-fade-out) animate-duration-200',
 );
 
 export const LightboxContentRoot = withClassName(
 	Dialog.Popup,
-	'layer-components:(fixed z-dialog bg-none border-none p-lg w-full h-full max-w-full max-h-full flex items-center justify-center)',
+	'layer-components:(fixed z-dialog h-full max-h-full max-w-full w-full flex items-center justify-center border-none bg-none p-lg)',
 	'transform-gpu !motion-reduce:animate-none',
-	'layer-components:(left-50% top-50% translate-[-50%] w-90vw max-h-85vh)',
+	'layer-components:(left-50% top-50% max-h-85vh w-90vw translate-[-50%])',
 	'layer-components:animate-dialog-in',
 	'layer-components:[&[data-state=closed]]:animate-dialog-out',
 	'!pointer-events-none',
@@ -62,7 +62,7 @@ export const LightboxContent = (props: DialogPopupProps) => {
 
 const LightboxContentInner = withClassName(
 	'div',
-	'layer-components:(max-w-full max-h-full overflow-hidden flex flex-col items-center justify-center)',
+	'layer-components:(max-h-full max-w-full flex flex-col items-center justify-center overflow-hidden)',
 	'layer-components:pointer-events-none layer-components:[&>*]:pointer-events-auto',
 );
 
@@ -84,7 +84,7 @@ function LightboxDefault({
 
 const LightboxImage = withClassName(
 	'img',
-	'max-w-full max-h-full min-h-80px min-w-80px object-contain',
+	'max-h-full max-w-full min-h-80px min-w-80px object-contain',
 );
 
 export const Lightbox = Object.assign(LightboxDefault, {

package/src/components/marquee/marquee.tsx

@@ -42,7 +42,7 @@ export function Marquee({ className, children, timeout = 5000 }: MarqueeProps) {
 
 const MarqueeItem = withClassName(
 	SlotDiv,
-	'layer-components:(w-full h-full flex-shrink-0 object-cover)',
+	'layer-components:(h-full w-full flex-shrink-0 object-cover)',
 );
 
 Marquee.Item = MarqueeItem;

package/src/components/note/Note.tsx

@@ -23,8 +23,8 @@ function NoteRoot({ className, color, children, ...rest }: NoteProps) {
 			<div className="layer-components:(flex flex-row)">
 				<div
 					className={clsx(
-						'layer-components:(relative flex-1 border border-solid p-2 text-sm italic color-black bg-main-wash bg-darken-1 border-main-dark) layer-variants:border-r-0',
-						'layer-variants:[&_input,&_textarea]:(border-none p-0 shadow-none bg-transparent ring-none)',
+						'layer-components:(relative flex-1 border border-solid p-sm text-sm italic color-black bg-main-wash bg-darken-1 border-main-dark) layer-variants:border-r-0',
+						'layer-variants:[&_input,&_textarea]:(border-none p-0 bg-transparent ring-none shadow-none)',
 					)}
 				>
 					{children}

package/src/components/pwaInstall/useWebManifest.ts

@@ -40,13 +40,13 @@ export function useWebManifest(
 ): WebAppManifest {
 	useEffect(() => {
 		if (abortController) {
-			abortController.abort();
+			abortController.abort('Component unmounted');
 		}
 		abortController = abortableManifestSync(manifestPath);
 
 		return () => {
 			if (abortController) {
-				abortController.abort();
+				abortController.abort('Component unmounted');
 			}
 		};
 	}, [manifestPath]);