@a-type/ui 5.0.7 → 5.0.9

package/src/components/scrollArea/ScrollArea.tsx

@@ -11,27 +11,27 @@ export type * from '@base-ui/react/scroll-area';
 
 export const ScrollAreaRoot = withClassName(
 	BaseScrollArea.Root,
-	'layer-components:(min-w-0 min-h-0 flex flex-col box-border)',
+	'layer-components:(box-border min-h-0 min-w-0 flex flex-col)',
 );
 
 export const ScrollAreaViewport = withClassName(
 	BaseScrollArea.Viewport,
-	'layer-components:(h-full outline-none min-h-0)',
-	'layer-components:focus-visible:(outline-none ring-2 ring-accent)',
+	'layer-components:(h-full min-h-0 outline-none)',
+	'layer-components:foc',
 );
 
 export const ScrollAreaVerticalFades = withClassName(
 	'div',
-	'layer-components:(pointer-events-none absolute inset-0 [--scroll-area-overflow-y-start:inherit] [--scroll-area-overflow-y-end:inherit])',
-	'layer-components:before:(content-empty [--scroll-area-overflow-y-start:inherit] top-0 block left-0 w-full absolute transition-height h-[min(40px,var(--scroll-area-overflow-y-start,40px))] bg-gradient-to-b bg-gradient-from-bg bg-gradient-to-transparent)',
-	'layer-components:after:(content-empty [--scroll-area-overflow-y-end:inherit] bottom-0 block left-0 w-full absolute transition-height h-[min(40px,var(--scroll-area-overflow-y-end,40px))] bg-gradient-to-t bg-gradient-from-bg bg-gradient-to-transparent)',
+	'layer-components:([--scroll-area-overflow-y-end:inherit] [--scroll-area-overflow-y-start:inherit] pointer-events-none absolute inset-0)',
+	'layer-components:before:([--scroll-area-overflow-y-start:inherit] absolute left-0 top-0 block h-[min(40px,var(--scroll-area-overflow-y-start,40px))] w-full bg-gradient-from-bg bg-gradient-to-transparent bg-gradient-to-b transition-height content-empty)',
+	'layer-components:after:([--scroll-area-overflow-y-end:inherit] absolute bottom-0 left-0 block h-[min(40px,var(--scroll-area-overflow-y-end,40px))] w-full bg-gradient-from-bg bg-gradient-to-transparent bg-gradient-to-t transition-height content-empty)',
 );
 
 export const ScrollAreaHorizontalFades = withClassName(
 	'div',
-	'layer-components:(pointer-events-none absolute inset-0 [--scroll-area-overflow-x-start:inherit] [--scroll-area-overflow-x-end:inherit])',
-	'layer-components:before:(content-empty [--scroll-area-overflow-x-start:inherit] left-0 block top-0 h-full absolute transition-width w-[min(40px,var(--scroll-area-overflow-x-start,40px))] bg-gradient-to-r bg-gradient-from-bg bg-gradient-to-transparent)',
-	'layer-components:after:(content-empty [--scroll-area-overflow-x-end:inherit] right-0 block top-0 h-full absolute transition-width w-[min(40px,var(--scroll-area-overflow-x-end,40px))] bg-gradient-to-l bg-gradient-from-bg bg-gradient-to-transparent)',
+	'layer-components:([--scroll-area-overflow-x-end:inherit] [--scroll-area-overflow-x-start:inherit] pointer-events-none absolute inset-0)',
+	'layer-components:before:([--scroll-area-overflow-x-start:inherit] absolute left-0 top-0 block h-full w-[min(40px,var(--scroll-area-overflow-x-start,40px))] bg-gradient-from-bg bg-gradient-to-transparent bg-gradient-to-r transition-width content-empty)',
+	'layer-components:after:([--scroll-area-overflow-x-end:inherit] absolute right-0 top-0 block h-full w-[min(40px,var(--scroll-area-overflow-x-end,40px))] bg-gradient-from-bg bg-gradient-to-transparent bg-gradient-to-l transition-width content-empty)',
 );
 
 export const ScrollAreaViewportFades = () => (
@@ -76,14 +76,14 @@ ComposedScrollbar.displayName = 'ScrollAreaScrollbar';
 
 export const ScrollAreaScrollbar = withClassName(
 	ComposedScrollbar,
-	'layer-components:(flex rounded-full relative select-none touch-none pointer-events-none m-xxs opacity-0)',
-	'layer-components:(bg-fg/5 transition-[opacity,height,width])',
-	'layer-components:data-[hovering]:(opacity-100 pointer-events-auto)',
+	'layer-components:(pointer-events-none relative m-xxs flex touch-none select-none rounded-full opacity-0)',
+	'layer-components:(transition-[opacity,height,width] bg-fg/5)',
+	'layer-components:data-[hovering]:(pointer-events-auto opacity-100)',
 	'layer-components:data-[scrolling]:(duration-0)',
-	'layer-components:before:(content-empty absolute)',
+	'layer-components:before:(absolute content-empty)',
 
-	'layer-components:data-[orientation=vertical]:(w-0.25rem justify-center before:(w-1.25rem h-full) hover:w-0.5rem)',
-	'layer-components:data-[orientation=horizontal]:(h-0.25rem items-center before:(h-1.25rem w-full) hover:h-0.5rem)',
+	'layer-components:data-[orientation=vertical]:(w-0.25rem justify-center before:h-full before:w-1.25rem hover:w-0.5rem)',
+	'layer-components:data-[orientation=horizontal]:(h-0.25rem items-center before:h-1.25rem before:w-full hover:h-0.5rem)',
 );
 
 export const ScrollAreaCorner = withClassName(

package/src/components/slider/Slider.tsx

@@ -1,97 +1,103 @@
-import { Slider as BaseSlider, SliderRootProps } from '@base-ui/react/slider';
-import clsx from 'clsx';
-import { Ref } from 'react';
-import { withClassName } from '../../hooks.js';
-import { PaletteName } from '../../uno/index.js';
-
-export const SliderRoot = withClassName(
-	BaseSlider.Root,
-	'layer-components:w-full',
-);
-
-export const SliderControl = withClassName(
-	BaseSlider.Control,
-	'layer-components:(relative flex items-center select-none touch-none w-full h-30px translate-z-0)',
-	'layer-variants:[&[data-orientation=vertical]]:(flex-col h-full w-30px)',
-);
-export const SliderTrack = withClassName(
-	BaseSlider.Track,
-	'layer-components:(bg-transparent relative grow rounded-lg h-7px ring-1 ring-black transition-colors select-none)',
-	'layer-variants:[&[data-orientation=vertical]]:(w-7px h-full flex-1)',
-);
-export const SliderRange = withClassName(
-	BaseSlider.Indicator,
-	'layer-components:(bg-main rounded-lg transition-colors)',
-	'layer-variants:[&[data-orientation=vertical]]:(bg-main)',
-);
-export const SliderThumb = withClassName(
-	BaseSlider.Thumb,
-	'layer-components:(flex items-center justify-center leading-none cursor-pointer w-5 h-5 bg-white shadow-sm rounded-lg ring-2 ring-black touch-none transition-color)',
-	'layer-components:hover:(shadow-md)',
-	'layer-components:active:(shadow-lg ring-4 ring-main-dark ring-opacity-50 bg-main-light)',
-	'layer-components:focus-visible:(shadow-lg ring-4 ring-accent ring-opacity-50 outline-none bg-main-light)',
-	'layer-components:focus:(outline-none)',
-	'layer-components:disabled:(opacity-50)',
-);
-
-export const SliderBase = ({
-	children,
-	color,
-	className,
-	...props
-}: SliderProps) => {
-	return (
-		<SliderRoot
-			{...props}
-			className={clsx(color && `palette-${color}`, className)}
-		>
-			<SliderControl>{children}</SliderControl>
-		</SliderRoot>
-	);
-};
-
-/**
- * A pre-configured Slider UI component. Meant to compose
- * under Slider.Root when you want to use Slider.Value, too
- */
-export const SliderUi = ({
-	label,
-	className,
-}: {
-	label?: string;
-	className?: string;
-}) => (
-	<Slider.Control className={className}>
-		<SliderTrack>
-			<SliderRange />
-			<SliderThumb aria-label={label} />
-		</SliderTrack>
-	</Slider.Control>
-);
-
-export interface SliderProps extends SliderRootProps {
-	color?: PaletteName;
-	ref?: Ref<HTMLDivElement>;
-}
-
-export const Slider = Object.assign(
-	function Slider(props: SliderProps) {
-		return (
-			<SliderRoot {...props}>
-				<SliderUi />
-			</SliderRoot>
-		);
-	},
-	{
-		Root: SliderRoot,
-		Base: SliderBase,
-		Control: SliderControl,
-		Track: SliderTrack,
-		/** @deprecated - use Indicator */
-		Range: SliderRange,
-		Indicator: SliderRange,
-		Thumb: SliderThumb,
-		Value: BaseSlider.Value,
-		Ui: SliderUi,
-	},
-);
+import { Slider as BaseSlider, SliderRootProps } from '@base-ui/react/slider';
+import clsx from 'clsx';
+import { Ref } from 'react';
+import { withClassName } from '../../hooks.js';
+import { PaletteName } from '../../uno/index.js';
+
+export const SliderRoot = withClassName(
+	BaseSlider.Root,
+	'layer-components:w-full',
+);
+
+export const SliderControl = withClassName(
+	BaseSlider.Control,
+	'layer-components:(relative h-30px w-full flex translate-z-0 touch-none select-none items-center)',
+	'layer-variants:[&[data-orientation=vertical]]:(h-full w-30px flex-col)',
+);
+export const SliderTrack = withClassName(
+	BaseSlider.Track,
+	'layer-components:(relative h-7px grow select-none rounded-lg ring-1 transition-colors bg-transparent ring-black)',
+	'layer-variants:[&[data-orientation=vertical]]:(h-full w-7px flex-1)',
+);
+export const SliderRange = withClassName(
+	BaseSlider.Indicator,
+	'layer-components:(rounded-lg transition-colors bg-main)',
+	'layer-variants:[&[data-orientation=vertical]]:(bg-main)',
+);
+export const SliderThumb = withClassName(
+	BaseSlider.Thumb,
+	'layer-components:(h-5 w-5 flex cursor-pointer touch-none items-center justify-center rounded-lg leading-none shadow-sm ring-2 transition-color bg-white ring-black)',
+	'layer-components:hover:(shadow-md)',
+	'layer-components:active:(shadow-lg ring-4 ring-opacity-50 bg-main-light ring-main-dark)',
+	'layer-components:focus-visible:(shadow-lg bg-main-light)',
+	'foc-lg',
+	'layer-components:focus:(outline-none)',
+	'layer-components:disabled:(opacity-50)',
+);
+
+export const SliderBase = ({
+	children,
+	color,
+	className,
+	...props
+}: SliderProps) => {
+	return (
+		<SliderRoot
+			{...props}
+			className={clsx(color && `palette-${color}`, className)}
+		>
+			<SliderControl>{children}</SliderControl>
+		</SliderRoot>
+	);
+};
+
+/**
+ * A pre-configured Slider UI component. Meant to compose
+ * under Slider.Root when you want to use Slider.Value, too
+ */
+export const SliderUi = ({
+	label,
+	className,
+}: {
+	label?: string;
+	className?: string;
+}) => (
+	<Slider.Control className={className}>
+		<SliderTrack>
+			<SliderRange />
+			<SliderThumb aria-label={label} />
+		</SliderTrack>
+	</Slider.Control>
+);
+
+export interface SliderProps extends SliderRootProps {
+	color?: PaletteName;
+	ref?: Ref<HTMLDivElement>;
+}
+
+export const Slider = Object.assign(
+	function Slider(props: SliderProps) {
+		return (
+			<SliderRoot {...props}>
+				<SliderUi />
+			</SliderRoot>
+		);
+	},
+	{
+		Root: SliderRoot,
+		Base: SliderBase,
+		Control: SliderControl,
+		Track: SliderTrack,
+		/** @deprecated - use Indicator */
+		Range: SliderRange,
+		Indicator: SliderRange,
+		Thumb: SliderThumb,
+		Value: BaseSlider.Value,
+		Ui: SliderUi,
+
+		getSingle: (v: number | readonly number[]) => {
+			if (Array.isArray(v)) return v[0];
+			return v;
+		},
+	},
+);

package/src/components/switch/Switch.tsx

@@ -1,38 +1,38 @@
-import { Switch as BaseSwitch, SwitchRootProps } from '@base-ui/react/switch';
-import { withClassName } from '../../hooks/withClassName.js';
-
-const SwitchRoot = withClassName(
-	BaseSwitch.Root,
-	'layer-components:(unset appearance-none flex transition-all cursor-pointer w-42px h-25px p-3px bg-gray-light rounded-lg relative border-default flex-shrink-0 shadow-sm shadow-inset)',
-	'layer-components:data-[checked]:bg-main',
-	'layer-components:hover:[&:not(:disabled)]:(bg-lighten-2 ring-2 ring-bg)',
-	'layer-components:active:[&:not(:disabled)]:(bg-darken-1 ring-4)',
-	'layer-components:focus:outline-none',
-	'layer-components:focus-visible:(ring-4 ring-accent outline-off)',
-);
-
-const SwitchThumb = withClassName(
-	BaseSwitch.Thumb,
-	'layer-components:(block aspect-1 h-full bg-white rounded-lg border-default transition-transform will-change-transform shadow-sm)',
-	'layer-components:data-[checked]:(translate-x-1rem)',
-	'layer-components:data-[checked]:before:(content-["✓"] flex items-center justify-center absolute top-0 left-0 w-full h-full text-xs text-main-ink)',
-);
-
-export const Switch = Object.assign(
-	function Switch({
-		ref,
-		...props
-	}: SwitchRootProps & {
-		ref?: React.Ref<HTMLButtonElement>;
-	}) {
-		return (
-			<SwitchRoot {...props} ref={ref}>
-				<SwitchThumb />
-			</SwitchRoot>
-		);
-	},
-	{
-		Root: SwitchRoot,
-		Thumb: SwitchThumb,
-	},
-);
+import { Switch as BaseSwitch, SwitchRootProps } from '@base-ui/react/switch';
+import { withClassName } from '../../hooks/withClassName.js';
+
+const SwitchRoot = withClassName(
+	BaseSwitch.Root,
+	'layer-components:(unset relative h-25px w-42px flex flex-shrink-0 cursor-pointer appearance-none border-default rounded-lg p-3px shadow-sm shadow-inset transition-all bg-gray-light)',
+	'layer-components:data-[checked]:bg-main',
+	'layer-components:hover:[&:not(:disabled)]:(ring-2 bg-lighten-2 ring-bg)',
+	'layer-components:active:[&:not(:disabled)]:(ring-4 bg-darken-1)',
+	'layer-components:focus:outline-none',
+	'layer-components:foc',
+);
+
+const SwitchThumb = withClassName(
+	BaseSwitch.Thumb,
+	'layer-components:(block aspect-1 h-full border-default rounded-lg shadow-sm transition-transform will-change-transform bg-white)',
+	'layer-components:data-[checked]:(translate-x-1rem)',
+	'layer-components:data-[checked]:before:(absolute left-0 top-0 h-full w-full flex items-center justify-center text-xs text-main-ink content-["✓"])',
+);
+
+export const Switch = Object.assign(
+	function Switch({
+		ref,
+		...props
+	}: SwitchRootProps & {
+		ref?: React.Ref<HTMLButtonElement>;
+	}) {
+		return (
+			<SwitchRoot {...props} ref={ref}>
+				<SwitchThumb />
+			</SwitchRoot>
+		);
+	},
+	{
+		Root: SwitchRoot,
+		Thumb: SwitchThumb,
+	},
+);

package/src/components/tabs/tabs.tsx

@@ -24,7 +24,8 @@ export const TabsTrigger = withClassName(
 	'layer-components:(min-h-touch min-w-100px flex-shrink-0)',
 	'layer-components:(border rounded-lg bg-transparent border-transparent)',
 	'layer-components:hover:[&[data-state=inactive]]:(ring-4 bg-gray-light bg-darken-1 ring-bg)',
-	'layer-components:focus-visible:(outline-off border ring-4 bg-darken-1 border-black ring-accent)',
+	'layer-components:focus-visible:(border bg-darken-1 border-black)',
+	'foc',
 	'data-[active]:(cursor-default)',
 );
 

package/src/components/toggleGroup/toggleGroup.tsx

@@ -14,7 +14,7 @@ export const ToggleGroupItem = withClassName(
 	'layer-components:(flex cursor-pointer items-center justify-center border-1 rounded-lg border-solid px-md py-sm text-nowrap transition-all color-black bg-gray/30 border-transparent)',
 	'layer-components:hover:(ring-2 bg-lighten-2 border-main-ink/20 ring-bg)',
 	'layer-components:active:(ring-4 bg-darken-1 border-main-ink/30)',
-	'layer-components:focus-visible:(outline-off ring-4 ring-accent)',
+	'layer-components:foc',
 	'layer-components:data-[pressed]:(border-default shadow-sm bg-main hover:border-default)',
 );
 

package/src/components/viewport/Viewport.tsx

@@ -118,7 +118,7 @@ export function ViewportRoot({
 					<div
 						className={clsx(
 							'contain-strict relative h-full w-full flex-1 touch-none select-none overflow-hidden',
-							'focus-visible:(ring ring-accent)',
+							'foc',
 							className,
 						)}
 						{...gestureProps}

package/src/hooks/useVisualViewportOffset.ts

@@ -181,14 +181,18 @@ function useReactToViewportChanges(
 }
 
 export interface VirtualKeyboardFocusOptions {
-	focusElementTypes?: string[];
+	shouldScrollIntoView?: (el: Element) => boolean;
+}
+function defaultShouldScrollIntoView(el: Element) {
+	if (['input', 'textarea', 'select'].includes(el.tagName.toLowerCase()))
+		return true;
+	if (el.hasAttribute('contenteditable')) return true;
+	return false;
 }
 export function useVirtualKeyboardFocusBehavior({
-	focusElementTypes = ['input', 'textarea', 'select'],
+	shouldScrollIntoView = defaultShouldScrollIntoView,
 }: VirtualKeyboardFocusOptions = {}) {
-	const stableFocusElementTypes = focusElementTypes
-		.map((type) => type.toLowerCase())
-		.join(',');
+	const stableShouldScroll = useStableCallback(shouldScrollIntoView);
 	useEffect(() => {
 		if (typeof navigator === 'undefined' || typeof window === 'undefined') {
 			return;
@@ -204,16 +208,20 @@ export function useVirtualKeyboardFocusBehavior({
 
 		const virtualKeyboard = navigator.virtualKeyboard as any;
 
-		const matchElements = stableFocusElementTypes.split(',');
-
 		function update() {
-			// const open = virtualKeyboard.boundingRect.height > 0;
+			const open = virtualKeyboard.boundingRect.height > 0;
+			if (open) {
+				console.log('keyboard opened');
+			}
 			const activeElement = document.activeElement;
-			if (
-				activeElement &&
-				matchElements.includes(activeElement.tagName.toLowerCase())
-			) {
-				activeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+			if (activeElement && stableShouldScroll(activeElement)) {
+				setTimeout(() => {
+					console.log('scroll focused element');
+					activeElement.scrollIntoView({
+						behavior: 'instant',
+						block: 'start',
+					});
+				}, 10);
 			}
 		}
 
@@ -221,5 +229,5 @@ export function useVirtualKeyboardFocusBehavior({
 		return () => {
 			virtualKeyboard.removeEventListener('geometrychange', update);
 		};
-	}, [stableFocusElementTypes]);
+	}, [stableShouldScroll]);
 }

package/src/keyboard.stories.tsx

@@ -1,5 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Input, TextArea } from './components/index.js';
+import {
+	Input,
+	PageContent,
+	PageNowPlaying,
+	PageRoot,
+	TextArea,
+} from './components/index.js';
 import { useVirtualKeyboardBehavior } from './hooks/useVirtualKeyboardBehavior.js';
 
 const meta = {
@@ -19,16 +25,21 @@ export const Default: Story = {
 	render(args) {
 		useVirtualKeyboardBehavior('overlay');
 		return (
-			<>
-				<div className="h-screen flex flex-col">
-					<div className="flex flex-grow flex-col items-center justify-center p-lg">
-						Focus the inputs below to see how the virtual keyboard behavior
-						works.
+			<PageRoot id="root">
+				<PageContent>
+					<div className="h-screen flex flex-col">
+						<div className="flex flex-grow flex-col items-center justify-center p-lg">
+							Focus the inputs below to see how the virtual keyboard behavior
+							works.
+						</div>
+						<Input className="w-full" />
+						<TextArea className="w-full" />
 					</div>
-					<Input className="w-full" />
-					<TextArea className="w-full" />
-				</div>
-			</>
+					<PageNowPlaying keepAboveKeyboard>
+						<Input placeholder="now playing" />
+					</PageNowPlaying>
+				</PageContent>
+			</PageRoot>
 		);
 	},
 };

package/src/themes.stories.tsx

@@ -35,6 +35,7 @@ import {
 	Progress,
 	Provider,
 	Select,
+	Slider,
 	TextSkeleton,
 	ToggleGroup,
 	Tooltip,
@@ -242,6 +243,7 @@ export function DemoUI({ className }: { className?: string }) {
 						onChange={() => {}}
 					/>
 					<Progress value={50} className="m-auto" />
+					<Slider defaultValue={50} min={0} max={100} />
 					<Box surface color="primary" p gap d="col">
 						<H1>Primary surface</H1>
 						<H2>Primary surface</H2>

package/src/uno/logic/properties.ts

@@ -17,6 +17,7 @@ export const PROPS = {
 			SERIF: '--u-font-serif',
 			TITLE: '--u-font-title',
 		},
+		FOCUS_COLOR: '--u-focus-color',
 	},
 
 	PALETTE: {
@@ -134,5 +135,10 @@ export const PROPS = {
 		SHADOW_COLOR: '--un-shadow-color',
 		SHADOW_OPACITY: '--un-shadow-opacity',
 		SHADOW: '--un-shadow',
+		RING_WIDTH: '--un-ring-width',
+		RING_STYLE: '--un-ring-style',
+		RING_OFFSET_SHADOW: '--un-ring-offset-shadow',
+		RING_SHADOW: '--un-ring-shadow',
+		RING_INSET: '--un-ring-inset',
 	},
 };

package/src/uno/preflights/index.ts

@@ -3,7 +3,7 @@ import { basePreflight } from './base.js';
 import { colorPreflight, ColorPreflightOptions } from './colors.js';
 import { fontsPreflight, FontsPreflightOptions } from './fonts.js';
 import { globalPreflight, GlobalsPreflightConfig } from './globals.js';
-import { keyboardPreflight } from './keyboard.js';
+import { keyboardPreflight, KeyboardPreflightOptions } from './keyboard.js';
 import { layerPreflight } from './layers.js';
 import { modePreflight } from './mode.js';
 import { propertiesPreflight } from './properties.js';
@@ -12,7 +12,8 @@ import { userPreflight, UserPreflightOptions } from './user.js';
 export type PreflightConfig = FontsPreflightOptions &
 	GlobalsPreflightConfig &
 	UserPreflightOptions &
-	ColorPreflightOptions;
+	ColorPreflightOptions &
+	KeyboardPreflightOptions;
 
 export const preflights = (config: PreflightConfig): Preflight<any>[] => [
 	layerPreflight,
@@ -23,5 +24,5 @@ export const preflights = (config: PreflightConfig): Preflight<any>[] => [
 	fontsPreflight(config),
 	propertiesPreflight,
 	userPreflight(config),
-	keyboardPreflight,
+	keyboardPreflight(config),
 ];

package/src/uno/preflights/keyboard.ts

@@ -1,12 +1,19 @@
 import { preflight } from './_util.js';
 
-export const keyboardPreflight = preflight({
-	getCSS: () =>
-		// add space to bottom of body equal to virtual keyboard inset so that
-		// content is not hidden behind the keyboard
-		`
-	body {
-		margin-bottom: env(virtual-keyboard-inset-bottom, 0px) !important;
+export interface KeyboardPreflightOptions {
+	rootSelector?: string;
+}
+
+export const keyboardPreflight = ({
+	rootSelector = '#root,#main',
+}: KeyboardPreflightOptions) =>
+	preflight({
+		getCSS: () =>
+			// add space to bottom of body equal to virtual keyboard inset so that
+			// content is not hidden behind the keyboard
+			`
+	${rootSelector} {
+		transform: translateY(calc(-1 * env(keyboard-inset-height,0px)));
 	}
 `,
-});
+	});

package/src/uno/preflights/user.ts

@@ -18,6 +18,7 @@ export interface UserPreflightOptions {
 	cornerScale?: number;
 	shadowSpread?: number;
 	fontSize?: number;
+	focusColor?: 'black' | 'primary' | 'accent' | 'gray';
 }
 
 export const userPreflight = ({
@@ -30,6 +31,7 @@ export const userPreflight = ({
 	shadowSpread = 1,
 	namedHues,
 	fontSize = 16,
+	focusColor = 'accent',
 }: UserPreflightOptions) =>
 	preflight({
 		getCSS: () => {
@@ -44,6 +46,7 @@ export const userPreflight = ({
 
 		${PROPS.USER.COLOR.PRIMARY_HUE}: ${primaryHue};
 		${PROPS.USER.COLOR.ACCENT_HUE}: ${accentHue};
+		${PROPS.USER.FOCUS_COLOR}: var(${focusColors[focusColor]});
 		${
 			namedHues
 				? Object.entries(namedHues)
@@ -65,3 +68,13 @@ export const userPreflight = ({
 `;
 		},
 	});
+
+const focusColors: Record<
+	NonNullable<UserPreflightOptions['focusColor']>,
+	string
+> = {
+	black: PROPS.MODE.BLACK,
+	primary: PROPS.PALETTE.NAMED_SHADES('primary').DARK,
+	accent: PROPS.PALETTE.NAMED_SHADES('accent').MID,
+	gray: PROPS.PALETTE.GRAY_SHADES.DARK,
+};

package/src/uno/rules/focus.ts

@@ -0,0 +1,46 @@
+import { Theme } from '@unocss/preset-mini';
+import { Rule } from 'unocss';
+import { PROPS } from '../logic/properties.js';
+
+export const focusRules: Rule<Theme>[] = [
+	[
+		/^foc(?:-effect)?(-lg)?$/,
+		function* ([, size], { symbols }) {
+			yield {
+				[symbols.selector]: (selector) =>
+					`${selector}:focus-visible:not([data-focus-clicked]), ${selector}[data-focus-visible]`,
+				[PROPS.BUILT_IN.RING_COLOR]: `var(${PROPS.USER.FOCUS_COLOR})`,
+				[PROPS.BUILT_IN.RING_WIDTH]: size === '-lg' ? '4px' : '2px',
+				[PROPS.BUILT_IN.RING_STYLE]: 'solid',
+				[PROPS.BUILT_IN
+					.RING_SHADOW]: `var(${PROPS.BUILT_IN.RING_INSET}) 0 0 0 var(${PROPS.BUILT_IN.RING_WIDTH}) var(${PROPS.BUILT_IN.RING_COLOR})`,
+				outline: 'none',
+				'box-shadow': `var(${PROPS.BUILT_IN.RING_OFFSET_SHADOW}), var(${PROPS.BUILT_IN.RING_SHADOW}), var(${PROPS.BUILT_IN.SHADOW})`,
+			};
+			yield {
+				[symbols.selector]: (selector) => `${selector}:focus`,
+				outline: 'none',
+			};
+		},
+	],
+	[
+		/^foc-contained(-lg)?$/,
+		function* ([, size], { symbols }) {
+			yield {
+				[symbols.selector]: (selector) =>
+					`${selector}:has(:focus-visible:not([data-focus-clicked])), ${selector}:has([data-focus-visible])`,
+				[PROPS.BUILT_IN.RING_COLOR]: `var(${PROPS.USER.FOCUS_COLOR})`,
+				[PROPS.BUILT_IN.RING_WIDTH]: size === '-lg' ? '4px' : '2px',
+				[PROPS.BUILT_IN.RING_STYLE]: 'solid',
+				[PROPS.BUILT_IN
+					.RING_SHADOW]: `0 0 0 var(${PROPS.BUILT_IN.RING_WIDTH}) var(${PROPS.BUILT_IN.RING_COLOR})`,
+				outline: 'none',
+				'box-shadow': `var(${PROPS.BUILT_IN.RING_OFFSET_SHADOW}), var(${PROPS.BUILT_IN.RING_SHADOW})`,
+			};
+			yield {
+				[symbols.selector]: (selector) => `${selector}>*:focus`,
+				outline: 'none',
+			};
+		},
+	],
+];