@a-type/ui 4.1.7 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "4.1.7",
+  "version": "5.0.0",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"
@@ -56,6 +56,7 @@
     "pluralize": "^8.0.0",
     "react-hot-toast": "^2.6.0",
     "react-is": "^19.1.0",
+    "unocss-preset-completion": "^0.3.0",
     "valtio": "^2.1.4"
   },
   "devDependencies": {
@@ -67,6 +68,7 @@
     "@storybook/react": "8.4.7",
     "@storybook/react-vite": "8.4.7",
     "@storybook/test": "8.4.7",
+    "@testing-library/react": "^16.3.2",
     "@types/dom-chromium-installation-events": "^101.0.4",
     "@types/pluralize": "^0.0.33",
     "@types/react": "^19.0.1",
@@ -78,8 +80,9 @@
     "@unocss/core": "66.5.4",
     "@unocss/eslint-config": "^66.6.0",
     "@unocss/transformer-variant-group": "66.5.4",
-    "@vitejs/plugin-react": "^5.1.0",
-    "@vitest/browser-playwright": "^4.0.6",
+    "@vitejs/plugin-react": "^5.1.2",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/ui": "4.0.18",
     "axios": "^1.5.0",
     "bumpp": "^10.3.1",
     "change-case": "^4.1.2",
@@ -98,8 +101,8 @@
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.53.0",
     "unocss": "^66.5.4",
-    "vitest": "^4.0.6",
-    "vitest-browser-react": "^2.0.2"
+    "vitest": "^4.0.18",
+    "vitest-browser-react": "^2.0.4"
   },
   "lint-staged": {
     "**/*.{ts,tsx}": [
@@ -108,7 +111,7 @@
     ]
   },
   "scripts": {
-    "build:transpile": "tsc && tsc -P tsconfig-cjs.json",
+    "build:transpile": "tsc",
     "build:prefix": "node ./scripts/addUnoInclude.js",
     "build:process": "unocss --write-transformed -o ./dist/css/main.css -m -c uno.config.js \"./dist/**/*.js\"",
     "build": "pnpm run build:transpile && pnpm run build:prefix && pnpm run build:process",
@@ -119,6 +122,8 @@
     "up-radix": "pnpm update \"@radix-ui/*\" --latest",
     "bump": "pnpm run typecheck && bumpp",
     "test": "vitest",
+    "test:unit": "vitest --project=unit",
+    "test:snapshots": "pnpm build && vitest --project=snapshots",
     "typecheck": "tsc --noEmit",
     "test:browser": "vitest --config=vitest.browser.config.ts",
     "lint": "eslint **/*.{ts,tsx} --fix"

package/src/__tests__/render.tsx

@@ -0,0 +1,22 @@
+import {
+	render as baseRender,
+	RenderOptions,
+	RenderResult,
+} from '@testing-library/react';
+import { ReactElement } from 'react';
+import { IconSpritesheet, Provider } from '../components/index.js';
+
+export const render = (
+	ui: ReactElement,
+	options?: RenderOptions,
+): RenderResult => {
+	return baseRender(ui, {
+		wrapper: ({ children }) => (
+			<Provider disableParticles>
+				{children}
+				<IconSpritesheet />
+			</Provider>
+		),
+		...options,
+	});
+};

package/src/__tests__/setup.ts

@@ -1 +1,2 @@
-import 'virtual:uno.css';
+/// <reference types="vitest/browser" />
+import '../../dist/css/main.css';

package/src/colors.snapshots.tsx

@@ -0,0 +1,8 @@
+import { expect, it } from 'vitest';
+import { render } from './__tests__/render.js';
+import { Default } from './colors.stories.js';
+
+it('colors match snapshot', async () => {
+	const result = render(Default.render?.({}, {} as any));
+	await expect(result.baseElement).toMatchScreenshot('snapshot');
+});

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.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,29 +34,31 @@ 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',
+			'layer-components:(rounded-lg px-4 py-2 text-md)':
+				size === 'default',
 			'layer-components:(min-h-touch rounded-md px-4 py-0.25 text-sm)':
 				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 +70,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/combobox/Combobox.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
+import { PaletteName } from '../../uno/index.js';
 import { Box } from '../box/Box.js';
 import { Icon } from '../icon/Icon.js';
 import { Combobox } from './Combobox.js';
@@ -128,11 +129,13 @@ export const Default: Story = {
 
 interface ItemGroup {
 	category: string;
+	color: PaletteName;
 	items: Item[];
 }
 const groupedItems: ItemGroup[] = [
 	{
 		category: 'Fruits',
+		color: 'lemon',
 		items: [
 			{ id: 'apple', label: 'Apple' },
 			{ id: 'banana', label: 'Banana' },
@@ -141,6 +144,7 @@ const groupedItems: ItemGroup[] = [
 	},
 	{
 		category: 'Berries',
+		color: 'blueberry',
 		items: [
 			{ id: 'strawberry', label: 'Strawberry' },
 			{ id: 'blueberry', label: 'Blueberry' },
@@ -180,7 +184,11 @@ export const Grouped: Story = {
 								</GroupedCombobox.GroupLabel>
 								<GroupedCombobox.GroupList>
 									{group.items.map((item) => (
-										<GroupedCombobox.Item key={item.id} value={item}>
+										<GroupedCombobox.Item
+											key={item.id}
+											value={item}
+											color={group.color}
+										>
 											{item.label}
 										</GroupedCombobox.Item>
 									))}
@@ -276,7 +284,7 @@ export const MultiSelect: Story = {
 							<>
 								<ExampleCombobox.ChipsList>
 									{items.map((item) => (
-										<ExampleCombobox.Chip key={item.id}>
+										<ExampleCombobox.Chip key={item.id} color={'accent'}>
 											{item.label}
 										</ExampleCombobox.Chip>
 									))}

package/src/components/combobox/Combobox.tsx

@@ -68,8 +68,7 @@ export const comboboxRowClassName = clsx(
 );
 
 export const comboboxGroupItemClassName = clsx(
-	'layer-composed-2:(bg-white)',
-	'layer-composed-2:data-[highlighted]:(ring-2 bg-main-wash ring-primary)',
+	'layer-composed-2:data-[highlighted]:(ring-2 bg-main-wash ring-main)',
 );
 
 export interface ComboboxInputProps
@@ -115,14 +114,17 @@ export function ComboboxComposedInput({
 		return (
 			<div
 				className={clsx(
-					'max-w-full min-w-12ch flex flex-1 flex-row items-center gap-xs',
+					'layer-components:(max-w-full min-w-12ch flex flex-1 flex-row items-center gap-xs)',
 					className,
 				)}
 			>
 				<Input.Input
 					autoComplete="off"
 					ref={ref}
-					className={clsx('layer-components:(min-w-3ch flex-1)')}
+					className={clsx(
+						'layer-components:(min-w-3ch flex-1)',
+						'layer-composed:pl-0',
+					)}
 					minLength={3}
 					{...props}
 				/>
@@ -297,7 +299,7 @@ function ComboboxTrigger({
 			render={<Button emphasis="ghost" size="small" />}
 			{...props}
 		>
-			{children ?? <ComboboxIcon data-open={open} />}
+			{children ?? <ComboboxIcon data-open={open ? true : undefined} />}
 		</BaseCombobox.Combobox.Trigger>
 	);
 }
@@ -367,6 +369,7 @@ function ComboboxChips({
 				ref={anchorRef || undefined}
 				className={clsx(
 					'layer-components:(flex flex-row items-center gap-xs)',
+					'layer-composed:pl-md',
 					className,
 				)}
 				render={<Input.Border />}
@@ -378,20 +381,23 @@ function ComboboxChips({
 
 const ComboboxChipsList = withClassName(
 	SlotDiv,
-	'layer-components:(flex flex-row flex-wrap gap-xs p-xs)',
+	'layer-components:(flex flex-row flex-wrap gap-xs px-sm py-xs -ml-md)',
 	'layer-components:empty:hidden',
 );
 
 function ComboboxChip({
 	className,
 	children,
+	color = 'gray',
 	...props
-}: BaseCombobox.ComboboxChipProps) {
+}: BaseCombobox.ComboboxChipProps & {
+	color?: ChipProps['color'];
+}) {
 	return (
 		<BaseCombobox.Combobox.Chip
-			render={<Chip />}
+			render={<Chip color={color} />}
 			className={clsx(
-				'layer-composed-2:(my-auto flex flex-row items-center gap-xs px-sm bg-white)',
+				'layer-composed-2:(my-auto flex flex-row items-center gap-xs px-sm)',
 				className,
 			)}
 			{...props}
@@ -562,7 +568,7 @@ function ComboboxGroupItem({
 	className,
 	replace,
 	render,
-	color,
+	color = 'gray',
 	children,
 	...props
 }: ComboboxGroupItemProps) {

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',
 );
@@ -330,7 +330,7 @@ function useDialogInherentSwipe({ disableSheet }: { disableSheet?: boolean }) {
 	return { gestureRef, onTouchStart, onTouchMove, onTouchEnd };
 }
 
-export const DialogSwipeHandle = function DialogSwipeHandle({
+export function DialogSwipeHandle({
 	ref,
 	className,
 	...props
@@ -363,7 +363,7 @@ export const DialogSwipeHandle = function DialogSwipeHandle({
 			<div className="layer-components:(h-[4px] w-full rounded-lg bg-gray)" />
 		</div>
 	);
-};
+}
 
 function findParentDialogContent(
 	element: HTMLElement | null,

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/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" />