@a-type/ui 2.4.1 → 2.6.0

package/src/components/box/Box.tsx

@@ -6,6 +6,7 @@ import { SlotDiv, SlotDivProps } from '../utility/SlotDiv.js';
 export type BoxAlignment = 'center' | 'stretch' | 'start' | 'end';
 export type BoxJustification =
 	| 'center'
+	| 'safe-center'
 	| 'start'
 	| 'stretch'
 	| 'between'
@@ -31,6 +32,11 @@ function hasDefault<T>(value: BoxResponsive<T>, val: T) {
 	return value === val || (isResponsive(value) && value.default === val);
 }
 
+type ShadowSize = 'sm' | 'md' | 'lg' | 'xl';
+type MaybeMinus = '' | '-';
+type MaybeUp = '' | '-up';
+type ShadowValue = `${MaybeMinus}${ShadowSize}${MaybeUp}`;
+
 export interface BoxProps extends Omit<SlotDivProps, 'wrap'> {
 	className?: string;
 	direction?: BoxResponsive<'row' | 'col' | 'row-reverse' | 'col-reverse'>;
@@ -49,6 +55,7 @@ export interface BoxProps extends Omit<SlotDivProps, 'wrap'> {
 	full?: boolean | 'width' | 'height';
 	overflow?: 'hidden' | 'auto' | 'auto-x' | 'auto-y';
 	grow?: boolean;
+	elevated?: ShadowValue;
 	ref?: Ref<HTMLDivElement>;
 }
 
@@ -71,6 +78,7 @@ export function Box({
 	overflow,
 	col,
 	grow,
+	elevated,
 	ref,
 	...rest
 }: BoxProps) {
@@ -144,6 +152,8 @@ export function Box({
 					'layer-components:items-start': items === 'start',
 					'layer-components:items-end': items === 'end',
 					'layer-components:justify-center': justify === 'center',
+					'layer-components:[justify-content:safe_center]':
+						justify === 'safe-center',
 					'layer-components:justify-stretch': justify === 'stretch',
 					'layer-components:justify-start': justify === 'start',
 					'layer-components:justify-end': justify === 'end',
@@ -170,9 +180,9 @@ export function Box({
 					'layer-components:lg:p-lg': isResponsive(p) && p.lg === 'lg',
 					'layer-components:lg:p-xl': isResponsive(p) && p.lg === 'xl',
 					'layer-components:rounded-lg': !!surface,
-					'layer-components:(bg-white border-black)':
+					'layer-components:(bg-white border-gray-ink)':
 						surface === true || surface === 'default',
-					'layer-components:(bg-wash border-black)': surface === 'wash',
+					'layer-components:(bg-wash border-gray-ink)': surface === 'wash',
 					'layer-components:(bg-primary-wash border-primary-dark color-primary-ink)':
 						surface === 'primary',
 					'layer-components:(bg-accent-wash border-accent-dark color-accent-ink)':
@@ -190,6 +200,12 @@ export function Box({
 						overflow === 'auto-y',
 					'layer-components:flex-grow': grow,
 					'layer-components:@container': container === true,
+					'layer-components:shadow-sm': elevated?.includes('sm'),
+					'layer-components:shadow-md': elevated?.includes('md'),
+					'layer-components:shadow-lg': elevated?.includes('lg'),
+					'layer-components:shadow-xl': elevated?.includes('xl'),
+					'layer-components:shadow-inset': elevated?.startsWith('-'),
+					'layer-components:(shadow-up)': elevated?.endsWith('-up'),
 				},
 				theme && `theme-${theme}`,
 				className,

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

@@ -5,7 +5,7 @@ import { Button } from './Button.js';
 import { ConfirmedButton } from './ConfirmedButton.js';
 
 const meta = {
-	title: 'Button',
+	title: 'Components/Button',
 	component: Button,
 	argTypes: {},
 	parameters: {

package/src/components/button/classes.tsx

@@ -13,7 +13,7 @@ export function getButtonClassName({
 	align?: ButtonProps['align'];
 }) {
 	return classNames(
-		'layer-components:(px-4 py-2 bg-[var(--bg-neutral,var(--bg))] [--webkit-tap-highlight-color:transparent] [line-height:1] text-size-md font-inherit border-solid border-thin border-color-transparent rounded-lg cursor-pointer font-bold flex flex-row gap-1 items-center relative overflow-visible select-none all:transition duration-200 whitespace-nowrap ring-color-bg)',
+		'layer-components:(px-4 py-2 bg-[var(--bg-neutral,var(--bg))] [--webkit-tap-highlight-color:transparent] [line-height:1] text-size-md font-inherit border-solid border-thin border-transparent rounded-lg cursor-pointer font-bold flex flex-row gap-1 items-center relative overflow-visible select-none all:transition duration-200 whitespace-nowrap ring-bg)',
 		'layer-components:hover:(bg-[var(--bg)] bg-darken-1 ring-4)',
 		'layer-components:focus:outline-off',
 		'layer-components:focus-visible:(bg-[var(--bg)] outline-off bg-darken-1 ring-6)',
@@ -35,15 +35,15 @@ export function getButtonClassName({
 }
 
 const colors = {
-	primary: `layer-variants:[&.btn-color-primary]:([--bg:var(--color-primary)] shadow-sm color-black border-color-primary-dark)`,
+	primary: `layer-variants:[&.btn-color-primary]:([--bg:var(--color-primary)] shadow-sm color-black border-primary-dark)`,
 	accent: `layer-variants:[&.btn-color-accent]:([--bg-neutral:var(--color-accent-wash)] [--bg:var(--color-accent-light)] shadow-sm color-black border-accent-dark)`,
 	default: `layer-variants:[&.btn-color-default]:([--bg-neutral:var(--color-white)] [--bg:var(--color-gray-light)] shadow-sm color-black border-gray-dark)`,
 	ghost: `layer-variants:[&.btn-color-ghost]:([--bg-neutral:transparent] [--bg:oklch(from_var(--color-gray)_l_c_h/50%)] color-dark-blend)`,
-	destructive: `layer-variants:[&.btn-color-destructive]:([--bg:var(--color-attention)] shadow-sm border-color-attention-dark color-black ))`,
+	destructive: `layer-variants:[&.btn-color-destructive]:([--bg:var(--color-attention)] shadow-sm border-attention-dark color-black)`,
 	ghostDestructive: `layer-variants:[&.btn-color-ghostDestructive]:([--bg-neutral:transparent] [--bg:var(--color-attention-light)] color-attention-dark hover:(color-black) focus-visible:(color-black))`,
 	ghostAccent: `layer-variants:[&.btn-color-ghostAccent]:([--bg-neutral:transparent] [--bg:var(--color-accent-light)] color-accent-dark hover:color-black focus-visible:color-black)`,
-	contrast: `layer-variants:[&.btn-color-contrast]:([--bg:var(--color-black)] color-white border-color-black hover:bg-lighten-1 focus-visible:bg-lighten-1 active:bg-lighten-1)`,
-	unstyled: `layer-variants:(bg-transparent hover:(bg-transparent) focus:(bg-transparent) active:(bg-transparent) color-inherit border-color-transparent shadow-none hover:(shadow-none) focus:(shadow-none) active:(shadow-none) p-0 items-start font-inherit font-normal rounded-none text-size-inherit transition-none)`,
+	contrast: `layer-variants:[&.btn-color-contrast]:([--bg:var(--color-black)] color-white border-black hover:bg-lighten-1 focus-visible:bg-lighten-1 active:bg-lighten-1)`,
+	unstyled: `layer-variants:(bg-transparent hover:(bg-transparent) focus:(bg-transparent) active:(bg-transparent) color-inherit border-transparent shadow-none hover:(shadow-none) focus:(shadow-none) active:(shadow-none) p-0 items-start font-inherit font-normal rounded-none text-size-inherit transition-none)`,
 };
 export const buttonColorClasses = colors;
 

package/src/components/camera/Camera.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Camera } from './Camera.js';
 import { useMemo, useState } from 'react';
+import { Camera } from './Camera.js';
 
 const meta = {
-	title: 'Camera',
+	title: 'Components/Camera',
 	component: Camera,
 	argTypes: {},
 	parameters: {

package/src/components/camera/Camera.tsx

@@ -164,7 +164,7 @@ export function CameraRoot({
 				ref={ref}
 				className={classNames(
 					'override-light',
-					'layer-components:([font-family:inherit] text-white bg-black rounded-lg overflow-hidden min-w-4 min-h-4 relative)',
+					'layer-components:([font-family:inherit] color-white bg-black rounded-lg overflow-hidden min-w-4 min-h-4 relative)',
 					fullscreen && 'fixed inset-0 w-full h-full z-1000 rounded-none',
 					className,
 				)}
@@ -246,7 +246,7 @@ export const CameraDeviceSelector = (props: CameraDeviceSelectorProps) => {
 			<Button
 				size="icon"
 				color="ghost"
-				className="absolute bottom-2 left-2 text-white"
+				className="absolute bottom-2 left-2 color-white"
 				onClick={swapCamera}
 			>
 				<Icon name="refresh" />
@@ -263,7 +263,7 @@ export const CameraDeviceSelector = (props: CameraDeviceSelectorProps) => {
 				<Button
 					size="icon"
 					color="ghost"
-					className="absolute bottom-2 left-2 text-white"
+					className="absolute bottom-2 left-2 color-white"
 				>
 					<Icon name="refresh" />
 				</Button>
@@ -286,7 +286,7 @@ export const CameraFullscreenButton = (props: ButtonProps) => {
 			{...props}
 			size="icon"
 			color="ghost"
-			className="absolute top-2 right-2 text-white"
+			className="absolute top-2 right-2 color-white"
 			onClick={() => setFullscreen(!fullscreen)}
 		>
 			<Icon name={fullscreen ? 'x' : 'maximize'} />

package/src/components/card/Card.stories.tsx

@@ -17,7 +17,7 @@ import {
 } from './Card.js';
 
 const meta = {
-	title: 'Card',
+	title: 'Components/Card',
 	component: CardRoot,
 	argTypes: {},
 	parameters: {

package/src/components/card/Card.tsx

@@ -8,7 +8,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-1 text-black shadow-sm)',
+	'layer-components:(flex flex-col border-light rounded-lg text-lg overflow-hidden h-max-content relative bg-wash bg-darken-1 color-black shadow-sm)',
 	'layer-variants:[&[data-borderless=true]]:(border-none shadow-md)',
 );
 
@@ -66,7 +66,7 @@ export const CardTitle = withClassName(
 
 const CardContentRoot = withClassName(
 	'div',
-	'layer-components:(flex flex-col gap-1 px-2 py-1 bg-light-blend text-black rounded-md mx-2 my-0.5 border border-solid border-gray-dark-blend text-xs relative z-1)',
+	'layer-components:(flex flex-col gap-1 px-2 py-1 bg-light-blend color-black rounded-md mx-2 my-0.5 border border-solid border-gray-dark-blend text-xs relative z-1)',
 	'layer-variants:[[data-compact=true]_&]:(py-0 px-1 my-0 text-xs)',
 	'layer-variants:[&[data-unstyled=true]]:(p-0 [background:unset] border-none)',
 );

package/src/components/checkbox/Checkbox.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Checkbox } from './Checkbox.js';
 
 const meta = {
-	title: 'Checkbox',
+	title: 'Components/Checkbox',
 	component: Checkbox,
 	argTypes: {},
 	parameters: {

package/src/components/chip/Chip.tsx

@@ -20,7 +20,7 @@ export function Chip({
 		<Component
 			ref={ref}
 			className={classNames(
-				'layer-components:(inline-flex flex-row gap-1 items-center whitespace-nowrap border-light border-solid border rounded-lg px-2 py-1 text-black)',
+				'layer-components:(inline-flex flex-row gap-1 items-center whitespace-nowrap border-light border-solid border rounded-lg px-2 py-1 clor-black)',
 				{
 					'layer-variants:bg-primary-wash': color === 'primary',
 					'layer-variants:bg-accent-wash': color === 'accent',

package/src/components/collapsible/Collapsible.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { CollapsibleSimple, CollapsibleTrigger } from './Collapsible.js';
 import { useState } from 'react';
+import { CollapsibleSimple } from './Collapsible.js';
 
 const meta = {
-	title: 'CollapsibleSimple',
+	title: 'Components/CollapsibleSimple',
 	component: CollapsibleSimple,
 	argTypes: {},
 	parameters: {

package/src/components/colorMode/ColorModeToggle.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { ColorModeToggle } from './ColorModeToggle.js';
 
 const meta = {
-	title: 'ColorModeToggle',
+	title: 'Components/ColorModeToggle',
 	component: ColorModeToggle,
 	argTypes: {},
 	parameters: {

package/src/components/contextMenu/contextMenu.tsx

@@ -19,7 +19,7 @@ export const ContextMenuContent = function Content({
 			<BoxContext.Provider value={{ spacingScale: 1 }}>
 				<ContextMenuPrimitive.Content
 					className={classNames(
-						'layer-components:(min-w-120px bg-white rounded-md border-default overflow-hidden p-1 shadow-md z-menu)',
+						'layer-components:(min-w-120px bg-white rounded-sm overflow-hidden p-1 border-gray-dark border shadow-md z-menu)',
 						'layer-components:transform-origin-[var(--radix-context-menu-transform-origin)]',
 						'layer-components:[&[data-state=open]]:animate-popover-in',
 						'layer-components:[&[data-state=closed]]:animate-popover-out',
@@ -32,6 +32,7 @@ export const ContextMenuContent = function Content({
 						onClick?.(ev);
 					}}
 					ref={ref}
+					alignOffset={-10}
 					{...props}
 				/>
 			</BoxContext.Provider>
@@ -41,7 +42,7 @@ export const ContextMenuContent = function Content({
 
 export const ContextMenuArrow = withClassName(
 	ContextMenuPrimitive.Arrow,
-	'layer-components:fill-white',
+	'layer-components:(arrow)',
 );
 
 export const ContextMenuItem = withClassName(

package/src/components/datePicker/DatePicker.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { DatePicker, DateRangePicker } from './DatePicker.js';
 import { useState } from 'react';
+import { DatePicker, DateRangePicker } from './DatePicker.js';
 
 const meta = {
-	title: 'DatePicker',
+	title: 'Components/DatePicker',
 	component: DatePicker,
 	argTypes: {},
 	parameters: {

package/src/components/datePicker/DatePicker.tsx

@@ -210,7 +210,7 @@ const CalendarGrid = withClassName(
 
 const CalendarDay = withClassName(
 	BaseCalendarDay,
-	'border border-solid border-transparent bg-white mr--1px mb--1px relative text-black',
+	'border border-solid border-transparent bg-white mr--1px mb--1px relative color-black',
 	'flex items-center justify-center transition cursor-pointer',
 	'[&[data-highlighted]]:(z-1 outline-accent)',
 	'hover:(z-1 outline-accent)',
@@ -238,7 +238,7 @@ const CalendarDay = withClassName(
 
 const DayLabel = withClassName(
 	'div',
-	'flex items-center justify-center text-sm text-gray-dark',
+	'flex items-center justify-center text-sm color-gray-dark',
 );
 
 const DayLabels = () => (

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

@@ -17,7 +17,7 @@ import {
 } from './Dialog.js';
 
 const meta = {
-	title: 'Dialog',
+	title: 'Components/Dialog',
 	component: Dialog,
 	argTypes: {},
 	parameters: {

package/src/components/dialog/Dialog.tsx

@@ -32,8 +32,8 @@ const StyledOverlay = withClassName(
 
 const StyledContent = withClassName(
 	DialogPrimitive.Content,
-	'layer-components:(z-dialog fixed shadow-xl-up bg-white overflow-y-auto border border-gray flex flex-col border-top-1 border-top-solid border-top-gray)',
-	'layer-components:sm:(shadow-xl)',
+	'layer-components:(z-dialog fixed shadow-xl shadow-up bg-white overflow-y-auto border border-gray flex flex-col border border-gray-dark)',
+	'layer-components:sm:(shadow-down)',
 	'transform-gpu !motion-reduce:animate-none',
 	'layer-components:(left-50% top-50% translate-[-50%] w-90vw max-w-450px max-h-85vh p-6 pt-8 rounded-lg border-b-1 pt-6)',
 	'layer-components:(animate-dialog-in [&[data-state=closed]]:animate-dialog-out motion-reduce:animate-none)',
@@ -325,7 +325,7 @@ export const DialogSelectList = withClassName(
 export const DialogSelectItemRoot = withClassName(
 	RadioGroupPrimitive.Item,
 	'layer-components:(flex items-center gap-3 w-full py-3 px-4 text-left border-none rounded-lg font-normal bg-transparent [&:nth-child(2n+1)]:bg-gray-blend cursor-pointer transition-all)',
-	'layer-components:[&[data-state=checked]]:(bg-primary-wash text-primary-dark)',
+	'layer-components:[&[data-state=checked]]:(bg-primary-wash color-primary-dark)',
 );
 
 export const DialogSelectItem = function DialogSelectItem({

package/src/components/dropdownMenu/DropdownMenu.stories.tsx

@@ -3,7 +3,7 @@ import { Icon } from '../icon/index.js';
 import { DropdownMenu } from './DropdownMenu.js';
 
 const meta = {
-	title: 'DropdownMenu',
+	title: 'Components/DropdownMenu',
 	component: DropdownMenu,
 	argTypes: {},
 	parameters: {

package/src/components/dropdownMenu/DropdownMenu.tsx

@@ -15,7 +15,7 @@ const StyledContent = withClassName(
 			</BoxContext.Provider>
 		);
 	},
-	'layer-components:(min-w-220px bg-white z-menu shadow-lg rounded-lg border border-gray)',
+	'layer-components:(min-w-220px bg-white z-menu shadow-lg rounded-sm border border-gray-dark)',
 	'layer-components:transform-origin-[var(--radix-dropdown-menu-transform-origin)]',
 	'layer-components:[&[data-state=open]]:animate-popover-in',
 	'layer-components:[&[data-state=closed]]:animate-popover-out',
@@ -46,7 +46,7 @@ const StyledItem = ({
 			{...props}
 			className={clsx(
 				color === 'destructive' &&
-					'layer-variants:(text-attention-dark hover:bg-attention-wash focus-visible:bg-attention-wash)',
+					'layer-variants:(color-attention-dark hover:bg-attention-wash focus-visible:bg-attention-wash)',
 				className,
 			)}
 			ref={forwardedRef}
@@ -79,7 +79,7 @@ const StyledItemIndicator = withClassName(
 
 const StyledArrow = withClassName(
 	DropdownMenuPrimitive.Arrow,
-	'layer-components:(fill-white stroke-gray)',
+	'layer-components:(arrow)',
 );
 
 const StyledTrigger = withClassName(

package/src/components/editableText/EditableText.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { EditableText } from './EditableText.js';
 import { useState } from 'react';
+import { EditableText } from './EditableText.js';
 
 const meta = {
-	title: 'EditableText',
+	title: 'Components/EditableText',
 	component: EditableText,
 	argTypes: {},
 	args: {

package/src/components/editableText/EditableText.tsx

@@ -102,7 +102,7 @@ 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 text-inherit shadow-none text-left)',
+				'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:hover:(bg-gray-blend)',
 				'layer-variants:focus-visible:(outline-none bg-gray-dark-blend)',
 				'cursor-pointer',

package/src/components/emojiPicker/EmojiPicker.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EmojiPicker } from './EmojiPicker.js';
 
 const meta = {
-	title: 'EmojiPicker',
+	title: 'Components/EmojiPicker',
 	component: EmojiPicker,
 	argTypes: {},
 	parameters: {

package/src/components/forms/CheckboxField.tsx

@@ -43,5 +43,5 @@ const FieldRoot = withClassName(
 
 const FieldLabel = withClassName(
 	'label',
-	'layer-components:(inline-flex flex-col gap-1 text-md font-normal text-dark-blend mt-2px)',
+	'layer-components:(inline-flex flex-col gap-1 text-md font-normal color-dark-blend mt-2px)',
 );

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

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { FormikForm } from './FormikForm.js';
-import { TextField } from './TextField.js';
 import { CheckboxField } from './CheckboxField.js';
-import { SubmitButton } from './SubmitButton.js';
+import { FormikForm } from './FormikForm.js';
 import { NumberStepperField } from './NumberStepperField.js';
+import { SubmitButton } from './SubmitButton.js';
+import { TextField } from './TextField.js';
 
 const meta = {
-	title: 'Form',
+	title: 'Components/Form',
 	component: FormikForm,
 	argTypes: {},
 	parameters: {

package/src/components/forms/NumberStepperField.tsx

@@ -50,5 +50,5 @@ const FieldRoot = withClassName(
 
 const FieldLabel = withClassName(
 	'label',
-	'layer-components:(block flex-col gap-1 text-md font-normal text-dark-blend mt-2px)',
+	'layer-components:(block flex-col gap-1 text-md font-normal color-dark-blend mt-2px)',
 );

package/src/components/forms/TextField.tsx

@@ -139,5 +139,5 @@ export const FieldRoot = withClassName(
 );
 export const FieldLabel = withClassName(
 	'label',
-	'inline-flex flex-col gap-1 text-sm font-bold text-dark-blend mb-1',
+	'inline-flex flex-col gap-1 text-sm font-bold color-dark-blend mb-1',
 );

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

@@ -5,7 +5,7 @@ import { Icon } from '../icon/index.js';
 import { HorizontalList } from './HorizontalList.js';
 
 const meta = {
-	title: 'HorizontalList',
+	title: 'Components/HorizontalList',
 	component: HorizontalList,
 	argTypes: {},
 	args: {

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

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { ImageUploader } from './ImageUploader.js';
 
 const meta = {
-	title: 'ImageUploader',
+	title: 'Components/ImageUploader',
 	component: ImageUploader,
 	argTypes: {
 		onChange: { action: 'change' },

package/src/components/imageUploader/ImageUploader.tsx

@@ -208,7 +208,7 @@ function ImageUploaderPrebuilt({
 						onClick={() => setCameraOpen(false)}
 						color="ghost"
 						size="small"
-						className="text-white absolute top-2 left-2"
+						className="color-white absolute top-2 left-2"
 					>
 						Cancel
 					</Button>

package/src/components/input/Input.stories.tsx

@@ -4,7 +4,7 @@ import { Button } from '../button/Button.js';
 import { Input } from './Input.js';
 
 const meta = {
-	title: 'Input',
+	title: 'Components/Input',
 	component: Input,
 	argTypes: {
 		disabled: { control: 'boolean' },

package/src/components/input/Input.tsx

@@ -9,7 +9,7 @@ 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-inset)',
+	'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-inset transition-shadow)',
 	'layer-components:focus:(outline-none bg-lighten-3 ring-4	ring-white)',
 	'layer-components:focus-visible:(outline-none ring-gray)',
 	'layer-components:disabled:(bg-transparent border-gray placeholder-gray-dark shadow-none)',

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

@@ -19,7 +19,7 @@ import { PageNowPlaying } from './PageNowPlaying.js';
 import { PageRoot } from './PageRoot.js';
 
 const meta = {
-	title: 'layouts',
+	title: 'Components/Layouts',
 	argTypes: {},
 	parameters: {
 		controls: { expanded: true },

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Marquee } from './marquee.js';
 
 const meta = {
-	title: 'Marquee',
+	title: 'Components/Marquee',
 	component: Marquee,
 	argTypes: {},
 	parameters: {

package/src/components/masonry/masonry.stories.tsx

@@ -1,9 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
+import { Box } from '../box/Box.js';
 import { Masonry } from './masonry.js';
 
 const meta = {
-	title: 'Masonry',
+	title: 'Components/Masonry',
 	component: Masonry,
 	argTypes: {},
 	parameters: {
@@ -31,15 +32,17 @@ const content = (spans?: boolean) =>
 		const [span, setSpan] = useState(randomSpan);
 
 		return (
-			<div
+			<Box
 				key={i}
-				className="bg-gray-light rounded-lg"
+				layout="center center"
+				surface="primary"
+				border
 				style={{ height: size }}
 				data-span={spans ? span : undefined}
 				onClick={() => setSpan((v) => (v === 1 ? 2 : 1))}
 			>
-				{size}
-			</div>
+				<div>{size}</div>
+			</Box>
 		);
 	});
 

package/src/components/masonry/masonry.tsx

@@ -53,6 +53,10 @@ abstract class MasonryLayout implements Layout {
 				this.relayout();
 				return true;
 			}
+		} else if (this.config.columns !== this.columns) {
+			this.columns = this.config.columns;
+			this.relayout();
+			return true;
 		}
 		return false;
 	};

package/src/components/navBar/NavBar.tsx

@@ -9,7 +9,7 @@ export const navBarItemClass = classNames(
 	'layer-components:active:bg-darken-2',
 	'layer-components:hover:bg-darken-1',
 	'layer-components:focus-visible:(outline-none bg-darken-2)',
-	'layer-components:[&[data-active=true]]:(bg-[var(--bg)] bg-darken-1 text-black)',
+	'layer-components:[&[data-active=true]]:(bg-[var(--bg)] bg-darken-1 color-black)',
 	'layer-components:([--bg:var(--color-primary-wash)] [--fill:var(--color-primary)])',
 	'layer-responsive:md:(flex-row-reverse h-auto justify-start gap-2 overflow-visible active:bg-darken-2)',
 );
@@ -43,7 +43,7 @@ export const NavBarItem = function NavBarItem({
 					'layer-variants:active:bg-gray-dark-blend layer-variants:md:active:bg-gray-dark-blend',
 					'layer-variants:hover:bg-gray-dark-blend',
 					'layer-variants:focus-visible:(bg-gray-dark-blend)',
-					'layer-variants:[&[data-active=true]]:(bg-gray-dark-blend text-black)',
+					'layer-variants:[&[data-active=true]]:(bg-gray-dark-blend color-black)',
 					'layer-variants:([--bg:var(--color-gray-blend)] [--fill:var(--color-gray)])',
 				],
 				className,
@@ -85,7 +85,7 @@ export const NavBarItemIcon = function NavBarItemIcon({
 		<Comp
 			name={name}
 			className={clsx(
-				'layer-components:(relative z-1 flex fill-none text-inherit)',
+				'layer-components:(relative z-1 flex fill-none color-inherit)',
 				'layer-variants:[*[data-active=true]_&]:fill-[var(--fill)]',
 				className,
 			)}

package/src/components/note/Note.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Note } from './Note.js';
 
 const meta = {
-	title: 'Note',
+	title: 'Components/Note',
 	component: Note,
 
 	args: {

package/src/components/note/Note.tsx

@@ -17,7 +17,7 @@ export function Note({ className, children, ...rest }: NoteProps) {
 					aria-hidden
 				>
 					<div className="layer-components:(border-0 border-solid border-primary-dark flex-[0_0_20px] w-[20px] h-[20px] relative) layer-variants:(border-b-1px border-l-1px)">
-						<div className="layer-components:(absolute w-1px bg-primary-dark h-26px rotate--45 left-9px top--4px transform-origin-cc)" />
+						<div className="layer-components:(absolute w-0.5px bg-primary-dark h-27px rotate--45 left-9px top--3px transform-origin-cc)" />
 						<div
 							className={`layer-components:(border-solid box-content border-transparent border-r-primary-wash border-13px w-0 h-0 rotate--45 translate--7px transform-origin-br)`}
 						/>

package/src/components/numberStepper/NumberStepper.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { NumberStepper } from './NumberStepper.js';
 
 const meta = {
-	title: 'NumberStepper',
+	title: 'Components/NumberStepper',
 	component: NumberStepper,
 	argTypes: {},
 	parameters: {

package/src/components/particles/ParticleLayer.stories.tsx

@@ -7,7 +7,7 @@ import { useParticles } from './ParticleContext.js';
 import { ParticleLayer } from './ParticleLayer.js';
 
 const meta = {
-	title: 'ParticleLayer',
+	title: 'Components/ParticleLayer',
 	component: ParticleLayer,
 	argTypes: {},
 	parameters: {},

package/src/components/peek/Peek.stories.tsx

@@ -4,7 +4,7 @@ import { P } from '../typography/typography.js';
 import { Peek } from './Peek.js';
 
 const meta = {
-	title: 'Peek',
+	title: 'Components/Peek',
 	component: Peek,
 	argTypes: {},
 	parameters: {