@a-type/ui 2.6.2 → 2.7.1

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
+import { Box } from '../box/Box.js';
 import { Icon } from '../icon/index.js';
 import { Button } from './Button.js';
 import { ConfirmedButton } from './ConfirmedButton.js';
@@ -13,6 +14,12 @@ const meta = {
 	},
 	args: {
 		children: 'Button',
+		loading: false,
+		color: 'default',
+		size: 'default',
+		visuallyDisabled: false,
+		disabled: false,
+		visuallyFocused: false,
 	},
 } satisfies Meta<typeof Button>;
 
@@ -20,7 +27,37 @@ export default meta;
 
 type Story = StoryObj<typeof Button>;
 
-export const Default: Story = {};
+export const Default: Story = {
+	render: (args) => {
+		return (
+			<Box gap items="center">
+				<Button {...args} />
+				<Button {...args} color="primary">
+					<Icon name="placeholder" />
+					{args.children}
+				</Button>
+				<Button {...args} size="small" />
+			</Box>
+		);
+	},
+};
+
+export const WithIcon: Story = {
+	args: {
+		children: (
+			<>
+				<Icon name="placeholder" />
+				Iconic
+			</>
+		),
+	},
+};
+
+export const IconOnly: Story = {
+	args: {
+		children: <Icon name="placeholder" />,
+	},
+};
 
 export const Toggled: Story = {
 	render: (args) => {
@@ -31,18 +68,20 @@ export const Toggled: Story = {
 };
 
 export const Alignment: Story = {
-	render() {
+	render(args) {
 		return (
 			<div className="col">
 				<div className="row border-default">
-					<Button size="small">Button</Button>
-					<Button size="icon-small">
+					<Button size="small" {...args}>
+						Button
+					</Button>
+					<Button size="small" {...args}>
 						<Icon name="placeholder" />
 					</Button>
 				</div>
 				<div className="row border-default">
-					<Button>Button</Button>
-					<Button size="icon">
+					<Button {...args}>Button</Button>
+					<Button {...args}>
 						<Icon name="placeholder" />
 					</Button>
 				</div>
@@ -52,12 +91,13 @@ export const Alignment: Story = {
 };
 
 export const ConfirmedButtonDemo: Story = {
-	render() {
+	render(args) {
 		return (
 			<ConfirmedButton
 				confirmText="Are you sure?"
 				confirmTitle="Confirm"
 				onConfirm={() => console.log('confirmed')}
+				{...args}
 			>
 				Confirm
 			</ConfirmedButton>

package/src/components/button/Button.tsx

@@ -1,6 +1,17 @@
 import { Slot } from '@radix-ui/react-slot';
 import classNames from 'clsx';
-import { ButtonHTMLAttributes, memo, Ref } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import {
+	ButtonHTMLAttributes,
+	Children,
+	memo,
+	Ref,
+	useCallback,
+	useState,
+} from 'react';
+import { withClassName } from '../../hooks.js';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import { IconLoadingProvider } from '../icon/IconLoadingContext.js';
 import { Icon } from '../icon/index.js';
 import { Spinner } from '../spinner/index.js';
 import { getButtonClassName } from './classes.js';
@@ -16,6 +27,9 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 		| 'accent'
 		| 'contrast'
 		| 'unstyled';
+	/**
+	 * icon and icon-small are deprecated.
+	 */
 	size?: 'default' | 'small' | 'icon' | 'icon-small';
 	toggled?: boolean;
 	toggleMode?: 'color-and-indicator' | 'color' | 'indicator' | 'state-only';
@@ -27,7 +41,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 	ref?: Ref<HTMLButtonElement>;
 }
 
-export function Button({
+export function ButtonRoot({
 	className,
 	color,
 	size,
@@ -44,13 +58,21 @@ export function Button({
 	...props
 }: ButtonProps) {
 	const Comp = asChild ? Slot : 'button';
+
+	const isFormSubmitting = false;
+	const isSubmitLoading = props.type === 'submit' && isFormSubmitting;
+	const isLoading = loading || isSubmitLoading;
+
+	const finalRef = useMergedRef(useAnnotateWithChildParts(), ref);
+
 	const buttonProps = {
-		ref: ref,
+		ref: finalRef,
 		...props,
-		disabled: disabled || loading,
+		disabled: disabled || isLoading,
 		'data-disabled': visuallyDisabled,
 		'data-focus': visuallyFocused,
 		'data-size': size,
+		'data-loading': isLoading,
 		tabIndex: visuallyDisabled ? -1 : undefined,
 		className: classNames(
 			getButtonClassName({
@@ -69,25 +91,68 @@ export function Button({
 		buttonProps['aria-pressed'] = !!toggled;
 	}
 
+	// for asChild, no need to do the rest of this stuff.
 	if (asChild) {
 		// avoid rendering loading spinner with asChild
 		return <Comp {...buttonProps}>{children}</Comp>;
 	}
 
+	// wrap and inspect children
+	let hasLabel = false;
+	let hasIcon = false;
+	const wrappedChildren = Children.toArray(children).map((child, index) => {
+		if (child && typeof child === 'object' && 'type' in child) {
+			const isIcon = child.type === Icon || child.type;
+			if (isIcon) {
+				hasIcon = true;
+				return child; // return icon as is
+			}
+		}
+
+		hasLabel = true; // mark that we have a label
+
+		if ((!!child && typeof child === 'string') || typeof child === 'number') {
+			return (
+				<span key={`text-${index}`} data-auto-wrapped-label className="flex">
+					{child}
+				</span>
+			);
+		}
+		return child;
+	});
+
 	return (
-		<Comp {...buttonProps}>
-			{loading && <Spinner size={16} className="inline-block w-1em h-1em" />}
-			{toggled !== undefined &&
-				(toggleMode === 'indicator' ||
-					toggleMode === 'color-and-indicator') && (
-					<ToggleIndicator value={toggled} />
-				)}
-			{children}
-		</Comp>
+		<IconLoadingProvider value={isLoading}>
+			<Comp
+				{...buttonProps}
+				data-has-icon={String(hasIcon || isLoading)}
+				data-has-label={String(hasLabel)}
+			>
+				<AnimatePresence>
+					{isLoading && !hasIcon && (
+						<motion.div
+							key="spinner"
+							initial={{ width: 0, marginLeft: '-0.5rem' }}
+							animate={{ width: 'auto', marginLeft: 0 }}
+							exit={{ width: 0, marginLeft: '-0.5rem' }}
+							className="flex-shrink-0 inline-block overflow-hidden my-auto flex"
+						>
+							<Spinner size={15} className="inline-block w-1em h-1em" />
+						</motion.div>
+					)}
+				</AnimatePresence>
+				{toggled !== undefined &&
+					(toggleMode === 'indicator' ||
+						toggleMode === 'color-and-indicator') && (
+						<ButtonToggleIndicator value={toggled} />
+					)}
+				{wrappedChildren}
+			</Comp>
+		</IconLoadingProvider>
 	);
 }
 
-const ToggleIndicator = memo(function ToggleIndicator({
+export const ButtonToggleIndicator = memo(function ToggleIndicator({
 	value,
 }: {
 	value: boolean;
@@ -103,3 +168,61 @@ const ToggleIndicator = memo(function ToggleIndicator({
 		/>
 	);
 });
+
+// allows custom icons to trigger icon button behavior
+export const ButtonIcon = withClassName(
+	'div',
+	'icon flex-shrink-0 inline-block',
+);
+
+export const Button = Object.assign(ButtonRoot, {
+	ToggleIndicator: ButtonToggleIndicator,
+	Icon: ButtonIcon,
+});
+
+function useAnnotateWithChildParts() {
+	const mutationObserver = useState(() => {
+		if (typeof window === 'undefined') return null!;
+		return new MutationObserver((entries) => {
+			applyPartAttributes(entries[0].target as HTMLButtonElement);
+		});
+	})[0];
+
+	const ref = useCallback(
+		(node: HTMLButtonElement | null) => {
+			if (node && mutationObserver) {
+				mutationObserver.disconnect();
+				mutationObserver.observe(node, { childList: true, subtree: true });
+				applyPartAttributes(node);
+			} else if (mutationObserver) {
+				mutationObserver.disconnect();
+			}
+		},
+		[mutationObserver],
+	);
+
+	return ref;
+}
+
+function applyPartAttributes(button: HTMLButtonElement) {
+	// each child node that's not an icon counts as a label
+	const registry = {
+		icon: 0,
+		label: 0,
+	};
+	button.childNodes.forEach((child) => {
+		if (!(child instanceof HTMLElement || child instanceof SVGElement)) return;
+		if (child.style.display === 'none' || child.style.width === '0') return; // skip hidden elements
+		if (
+			(child instanceof HTMLElement || child instanceof SVGElement) &&
+			child.classList.contains('icon')
+		) {
+			registry.icon++;
+		} else {
+			registry.label++;
+		}
+	});
+	button.setAttribute('data-has-icon', String(registry.icon > 0));
+	button.setAttribute('data-has-label', String(registry.label > 0));
+	button.setAttribute('data-icon-count', String(registry.icon));
+}

package/src/components/button/classes.tsx

@@ -1,9 +1,16 @@
-import classNames from 'clsx';
-import type { ButtonProps } from './Button.jsx';
+import clsx from 'clsx';
+import { type ButtonProps } from './Button.jsx';
+
+const sizeMap = {
+	default: 'default',
+	small: 'small',
+	icon: 'default',
+	'icon-small': 'small',
+} satisfies Record<string, 'default' | 'small'>;
 
 export function getButtonClassName({
 	color,
-	size,
+	size: rawSize,
 	toggleable,
 	align,
 }: {
@@ -12,8 +19,10 @@ export function getButtonClassName({
 	toggleable?: boolean;
 	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-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)',
+	const size = sizeMap[rawSize ?? 'default'];
+
+	return clsx(
+		'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-sm 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)',
@@ -37,7 +46,7 @@ export function getButtonClassName({
 const colors = {
 	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)`,
+	default: `layer-variants:[&.btn-color-default]:([--bg-neutral:var(--color-white)] [--bg:var(--color-gray)] shadow-sm color-black border-gray-dark focus-visible:bg-lighten-1 hover:bg-lighten-1)`,
 	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-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))`,
@@ -48,11 +57,10 @@ const colors = {
 export const buttonColorClasses = colors;
 
 const sizes = {
-	default: '',
-	small: 'layer-variants:[&.size-small]:(px-4 py-1 text-sm rounded-md)',
-	icon: 'layer-variants:[&.size-icon]:(p-2.35 text-sm rounded-lg)',
-	'icon-small':
-		'layer-variants:[&.size-icon-small]:(p-2 text-xs rounded-lg -m-y-0.5)',
+	default:
+		'layer-variants:[&[data-has-icon=true][data-has-label=false]]:(p-2.35 text-sm rounded-lg)',
+	small:
+		'layer-variants:[&.size-small]:(px-4 py-1 text-sm rounded-md) layer-variants:[&.size-small[data-has-icon=true][data-has-label=false]]:(p-2 text-xs rounded-lg -m-y-0.5)',
 };
 
 const toggledClass =

package/src/components/camera/Camera.tsx

@@ -244,7 +244,6 @@ export const CameraDeviceSelector = (props: CameraDeviceSelectorProps) => {
 	if (devices.length === 2) {
 		return (
 			<Button
-				size="icon"
 				color="ghost"
 				className="absolute bottom-2 left-2 color-white"
 				onClick={swapCamera}
@@ -260,11 +259,7 @@ export const CameraDeviceSelector = (props: CameraDeviceSelectorProps) => {
 			onValueChange={selectDeviceId}
 		>
 			<Select.Trigger asChild>
-				<Button
-					size="icon"
-					color="ghost"
-					className="absolute bottom-2 left-2 color-white"
-				>
+				<Button color="ghost" className="absolute bottom-2 left-2 color-white">
 					<Icon name="refresh" />
 				</Button>
 			</Select.Trigger>
@@ -284,7 +279,6 @@ export const CameraFullscreenButton = (props: ButtonProps) => {
 	return (
 		<Button
 			{...props}
-			size="icon"
 			color="ghost"
 			className="absolute top-2 right-2 color-white"
 			onClick={() => setFullscreen(!fullscreen)}

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

@@ -46,12 +46,12 @@ export const Default: Story = {
 				<CardFooter>
 					<CardActions>
 						<Button size="small">Button</Button>
-						<Button size="icon-small" color="primary">
+						<Button size="small" color="primary">
 							<Icon name="placeholder" />
 						</Button>
 					</CardActions>
 					<CardMenu>
-						<Button size="icon-small" color="ghost">
+						<Button size="small" color="ghost">
 							<Icon name="dots" />
 						</Button>
 					</CardMenu>
@@ -68,7 +68,7 @@ export const Default: Story = {
 				<CardFooter>
 					<CardActions>
 						<Button size="small">Button</Button>
-						<Button size="icon-small" color="ghost">
+						<Button size="small" color="ghost">
 							<Icon name="placeholder" />
 						</Button>
 					</CardActions>
@@ -89,7 +89,7 @@ export const Compact: Story = {
 			<CardFooter>
 				<CardActions>
 					<Button size="small">Button</Button>
-					<Button size="icon-small" color="ghost">
+					<Button size="small" color="ghost">
 						<Icon name="placeholder" />
 					</Button>
 				</CardActions>
@@ -108,7 +108,7 @@ export const NonInteractive: Story = {
 			<CardFooter>
 				<CardActions>
 					<Button size="small">Button</Button>
-					<Button size="icon" color="ghost">
+					<Button color="ghost">
 						<Icon name="placeholder" />
 					</Button>
 				</CardActions>
@@ -129,7 +129,7 @@ export const AsChild: Story = {
 			<CardFooter>
 				<CardActions>
 					<Button size="small">Button</Button>
-					<Button size="icon" color="ghost">
+					<Button color="ghost">
 						<Icon name="placeholder" />
 					</Button>
 				</CardActions>
@@ -150,7 +150,7 @@ export const AsChildNonInteractive: Story = {
 			<CardFooter>
 				<CardActions>
 					<Button size="small">Button</Button>
-					<Button size="icon" color="ghost">
+					<Button color="ghost">
 						<Icon name="placeholder" />
 					</Button>
 				</CardActions>
@@ -249,7 +249,7 @@ export const VisuallyFocused: Story = {
 			<CardFooter>
 				<CardActions>
 					<Button size="small">Button</Button>
-					<Button size="icon" color="ghost">
+					<Button color="ghost">
 						<Icon name="placeholder" />
 					</Button>
 				</CardActions>
@@ -270,7 +270,7 @@ export const CardsInBox: Story = {
 					<CardFooter>
 						<CardActions>
 							<Button size="small">Button</Button>
-							<Button size="icon" color="ghost">
+							<Button color="ghost">
 								<Icon name="placeholder" />
 							</Button>
 						</CardActions>
@@ -284,7 +284,7 @@ export const CardsInBox: Story = {
 					<CardFooter>
 						<CardActions>
 							<Button size="small">Button</Button>
-							<Button size="icon" color="ghost">
+							<Button color="ghost">
 								<Icon name="placeholder" />
 							</Button>
 						</CardActions>

package/src/components/datePicker/DatePicker.tsx

@@ -40,7 +40,6 @@ export function DatePicker({
 		>
 			<MonthRow>
 				<MonthButton
-					size="icon"
 					color="ghost"
 					onClick={() =>
 						setDisplay((cur) => ({
@@ -53,7 +52,6 @@ export function DatePicker({
 				</MonthButton>
 				<MonthLabel>{monthLabel}</MonthLabel>
 				<MonthButton
-					size="icon"
 					color="ghost"
 					onClick={() =>
 						setDisplay((cur) => ({
@@ -143,7 +141,6 @@ export function DateRangePicker({
 		>
 			<RangeLayout>
 				<MonthButton
-					size="icon"
 					color="ghost"
 					className="[grid-area:prevMonth]"
 					onClick={() =>
@@ -160,7 +157,6 @@ export function DateRangePicker({
 					{nextMonthLabel}
 				</MonthLabel>
 				<MonthButton
-					size="icon"
 					color="ghost"
 					className="[grid-area:nextMonth]"
 					onClick={() =>

package/src/components/emojiPicker/EmojiPicker.tsx

@@ -71,11 +71,11 @@ export const EmojiPickerEmoji = withClassName(
 			color="ghost"
 			toggled={p.emoji.isActive}
 			toggleMode="color"
-			size="icon-small"
+			size="small"
 			aria-label={p.emoji.label}
 			className="text-lg p-xs"
 		>
-			{p.emoji.emoji}
+			<Button.Icon>{p.emoji.emoji}</Button.Icon>
 		</Button>
 	),
 	'',
@@ -122,12 +122,12 @@ export const EmojiPickerSkinToneSelector = (props: BoxProps) => {
 					color="ghost"
 					toggled={option.skinTone === skinTone}
 					toggleMode="color"
-					size="icon-small"
+					size="small"
 					aria-label={`Skin tone ${option}`}
 					className="text-md p-xs"
 					onClick={() => setSkinTone(option.skinTone)}
 				>
-					{option.emoji}
+					<Button.Icon>{option.emoji}</Button.Icon>
 				</Button>
 			))}
 		</Box>

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

@@ -36,7 +36,6 @@ const meta = {
 				<Button size="small">Twenty three</Button>
 				<Button size="small">Twenty four</Button>
 				<Button
-					size="icon"
 					color="primary"
 					className="sticky right-2 bottom-2 flex-shrink-0 shadow-sm ml-auto"
 				>
@@ -113,7 +112,6 @@ export const CantOpen: Story = {
 						</>
 					)}
 					<Button
-						size="icon"
 						color="primary"
 						className="sticky right-2 bottom-2 flex-shrink-0 shadow-sm ml-auto"
 					>

package/src/components/horizontalList/HorizontalList.tsx

@@ -169,7 +169,6 @@ export function HorizontalList({
 					>
 						<Button
 							onClick={toggleOpen}
-							size="icon"
 							color="ghost"
 							className={clsx(
 								'flex-shrink-0 bg-[var(--scroll-bg)] sticky left-0 top-2 z-1',

package/src/components/icon/Icon.tsx

@@ -1,6 +1,8 @@
 import classNames from 'clsx';
 import { HTMLAttributes } from 'react';
+import { Spinner } from '../spinner/Spinner.js';
 import { IconName } from './generated/iconNames.js';
+import { useIconLoading } from './IconLoadingContext.js';
 
 export interface IconProps extends HTMLAttributes<SVGSVGElement> {
 	name: IconName;
@@ -16,10 +18,17 @@ export const Icon = function Icon({
 }: IconProps & {
 	ref?: React.Ref<SVGSVGElement>;
 }) {
+	const loading = useIconLoading();
+
+	if (loading) {
+		return <Spinner size={size} className="inline-block" />;
+	}
+
 	return (
 		<svg
 			ref={ref}
 			className={classNames(
+				'icon',
 				'flex-shrink-0 layer-components:fill-none',
 				className,
 			)}

package/src/components/icon/IconLoadingContext.tsx

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+
+const IconLoadingContext = createContext(false);
+export const IconLoadingProvider = IconLoadingContext.Provider;
+export function useIconLoading() {
+	return useContext(IconLoadingContext);
+}

package/src/components/imageUploader/ImageUploader.tsx

@@ -263,7 +263,6 @@ export function ImageUploaderRemoveButton({ className, ...rest }: ButtonProps) {
 	return (
 		<Button
 			color="ghost"
-			size="icon"
 			className={clsx(
 				'layer-variants:(absolute top-2 right-2 w-32px h-32px border-none p-2 cursor-pointer bg-white color-black rounded-lg transition-colors shadow-sm z-10)',
 				className,

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

@@ -39,8 +39,8 @@ function ExplodeButton() {
 		);
 	};
 	return (
-		<Button size="icon" onClick={burst}>
-			💥
+		<Button onClick={burst}>
+			<Button.Icon>💥</Button.Icon>
 		</Button>
 	);
 }

package/src/components/select/Select.tsx

@@ -18,7 +18,8 @@ import {
 } from 'react';
 import { withClassName } from '../../hooks/withClassName.js';
 import { BoxContext } from '../box/Box.js';
-import { Button, ButtonProps, getButtonClassName } from '../button/index.js';
+import { Button, ButtonProps } from '../button/Button.js';
+import { getButtonClassName } from '../button/classes.js';
 import { Icon } from '../icon/index.js';
 
 export const SelectItem = ({

package/src/components/spinner/Spinner.tsx

@@ -25,7 +25,7 @@ export const Spinner = function Spinner({
 			role="progressbar"
 			{...props}
 			className={classNames(
-				'inline-block animate-spin animate-ease-linear animate-iteration-infinite color-inherit animate-duration-1400 transform-origin-[50%_50%]',
+				'flex-shrink-0 inline-block animate-spin animate-ease-linear animate-iteration-infinite color-inherit animate-duration-1400 transform-origin-[50%_50%]',
 				className,
 			)}
 			style={{ width: size, height: size, ...style }}

package/src/themes.stories.tsx

@@ -53,6 +53,7 @@ const meta = {
 		controls: { expanded: true },
 		layout: 'fullscreen',
 	},
+	tags: [],
 } satisfies Meta;
 
 export default meta;
@@ -121,7 +122,7 @@ function DemoUI({ className }: { className?: string }) {
 							<Card.Footer>
 								<Card.Actions>
 									<Button size="small">Action 1</Button>
-									<Button size="icon-small" color="ghost">
+									<Button size="small" color="ghost">
 										<Icon name="placeholder" />
 									</Button>
 								</Card.Actions>
@@ -135,7 +136,7 @@ function DemoUI({ className }: { className?: string }) {
 							<Card.Footer>
 								<Card.Actions>
 									<Button size="small">Action 1</Button>
-									<Button size="icon-small" color="ghost">
+									<Button size="small" color="ghost">
 										<Icon name="placeholder" />
 									</Button>
 								</Card.Actions>

package/src/uno/colors.ts

@@ -88,6 +88,7 @@ export const themeColors = {
 	white: 'var(--color-white)',
 	wash: 'var(--color-wash)',
 	transparent: 'transparent',
+	current: 'currentColor',
 
 	// magic tokens
 	bg: 'var(--v-bg-altered, var(--v-bg, transparent))',