@a-type/ui 5.0.21 → 6.0.0

package/src/components/primitives/menus.module.css

@@ -0,0 +1,264 @@
+.popup {
+	box-sizing: border-box;
+
+	min-width: 120px;
+	max-width: var(--available-width, 95vw);
+	max-height: var(--available-height);
+
+	transition: all var(--m-duration) var(--m-easing);
+
+	@apply --mx-shadow(var(--m-shadow-lg));
+	@apply --mx-surface-ambient;
+	padding: 0;
+
+	transform-origin: var(--transform-origin);
+	will-change: transform;
+
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		@apply --mx-ring(--fn-ring(
+			--fn-color-faded(var(--m-color-main-ink), 50%),
+			2px
+		));
+	}
+
+	@media (forced-colors: active) {
+		border-color: var(--m-color-main-ink);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		transition: none;
+	}
+
+	--y: 0px;
+	--x: 0px;
+	transform: translate(var(--x), var(--y));
+
+	&[data-starting-style] {
+		opacity: 0;
+		&[data-side='bottom'] {
+			--y: 4px;
+		}
+		&[data-side='top'] {
+			--y: -4px;
+		}
+		&[data-side='left'] {
+			--x: -4px;
+		}
+		&[data-side='right'] {
+			--x: 4px;
+		}
+	}
+	&[data-ending-style] {
+		opacity: 0;
+	}
+}
+
+.itemList {
+	box-sizing: border-box;
+	max-height: min(var(--available-height, 100%), 95vh);
+	min-height: 0px;
+	overflow-x: clip;
+	overflow-y: auto;
+	scroll-padding-block: var(--m-spacing-md);
+	position: relative;
+	padding: var(--m-spacing-xs);
+
+	border-radius: inherit;
+}
+
+.item {
+	min-height: 30px;
+	position: relative;
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+	user-select: none;
+
+	padding: var(--m-action-padding);
+	padding-left: var(--m-spacing-lg);
+	gap: var(--m-spacing-sm);
+
+	text-align: left;
+	font-size: var(--m-text-secondary-size);
+	font-weight: var(--m-text-secondary-weight);
+	line-height: var(--m-text-secondary-lineHeight);
+	font-family: var(--m-text-secondary-font);
+
+	@apply --mx-fg(color-contrast(var(--mx-bg-ref)));
+
+	&[data-disabled],
+	&:disabled {
+		pointer-events: none;
+		@apply --mx-fg(var(--m-color-neutral-heavy));
+		@apply --mx-bg(var(--m-color-neutral-paper));
+	}
+
+	&:hover,
+	&[data-highlighted],
+	&[data-state='checked'],
+	&:focus-visible {
+		@apply --mx-bg(var(--m-color-neutral-light));
+	}
+
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		--mx-ring-value: --fn-focus-ring();
+	}
+
+	border-radius: var(--m-radius-xs);
+	&:first-child {
+		border-top-left-radius: calc(var(--m-surface-radius) - var(--m-spacing-xs));
+		border-top-right-radius: calc(
+			var(--m-surface-radius) - var(--m-spacing-xs)
+		);
+	}
+	&:last-child {
+		border-bottom-left-radius: calc(
+			var(--m-surface-radius) - var(--m-spacing-xs)
+		);
+		border-bottom-right-radius: calc(
+			var(--m-surface-radius) - var(--m-spacing-xs)
+		);
+	}
+}
+
+.itemText {
+	flex: 1;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--m-spacing-sm);
+	scroll-padding-block: var(--m-spacing-md);
+}
+
+.itemIndicator {
+	margin-inline-start: auto;
+	height: 10px;
+	flex-shrink: 0;
+	flex-basis: 10px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	right: calc(-1 * var(--m-spacing-xs));
+}
+
+.itemRightSlot {
+	margin-inline-start: auto;
+	padding-inline-start: var(--m-spacing-sm);
+}
+
+.arrow {
+	--size: 18px;
+	@apply --mx-fill(var(--mx-bg-ref, var(--m-global-trueLightColor)));
+	@apply --mx-stroke(var(--mx-borderColor-ref, var(--mx-fg-ref, var(--m-global-trueHeavyColor))));
+	stroke-width: var(--m-lineWidth);
+	width: var(--size);
+	height: calc(var(--size) / 2);
+	position: relative;
+	--angle: 0deg;
+	--scale: 1;
+	transform: translate(0, 0) rotate(var(--angle, 0deg)) scale(var(--scale, 1));
+	transition: opacity var(--m-duration) var(--m-easing);
+
+	&[data-side='top'] {
+		--angle: 0deg;
+		bottom: calc(-1 * var(--size) / 2 + 1px);
+	}
+	&[data-side='bottom'] {
+		--angle: 180deg;
+		top: calc(-1 * var(--size) / 2 + 1px);
+	}
+	&[data-side='left'] {
+		--angle: 270deg;
+		right: calc(-1 * var(--size) * 0.75);
+	}
+	&[data-side='right'] {
+		--angle: 90deg;
+		left: calc(-1 * var(--size) * 0.75);
+	}
+
+	&[data-open] {
+		opacity: 1;
+		--scale: 1;
+	}
+	&[data-closed] {
+		opacity: 0;
+		--scale: 0.5;
+	}
+}
+
+.separator {
+	margin: var(--m-spacing-xs);
+	height: var(--m-lineWidth-sm);
+	@apply --mx-bg(var(--m-color-neutral));
+}
+
+.groupLabel {
+	user-select: none;
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	font-size: var(--m-text-ambient-size);
+	line-height: var(--m-text-ambient-lineHeight);
+	font-weight: var(--m-text-ambient-weight);
+}
+
+.scrollArrow {
+	box-sizing: border-box;
+	z-index: 1;
+	height: 1rem;
+	left: var(--m-spacing-md);
+	right: var(--m-spacing-md);
+	cursor: default;
+	user-select: none;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	@apply --mx-fg(var(--m-surface-ambient-fg));
+	border-radius: inherit;
+	font-size: var(--m-text-ambient-size);
+	line-height: var(--m-text-ambient-lineHeight);
+	font-weight: var(--m-text-ambient-weight);
+
+	&::before {
+		position: absolute;
+		left: 0;
+		height: 100%;
+		width: 100%;
+		content: '';
+	}
+
+	&[data-direction='up'] {
+		top: 0;
+		&[data-side='none'] {
+			&::before {
+				top: -100%;
+			}
+		}
+	}
+	&[data-direction='down'] {
+		bottom: 0;
+		&[data-side='none'] {
+			&::before {
+				bottom: -100%;
+			}
+		}
+	}
+}
+
+.trigger {
+	user-select: none;
+}
+
+.triggerIcon {
+	transition: transform var(--m-duration) var(--m-easing);
+	margin-inline-start: auto;
+	[data-open] > &,
+	[data-popup-open] > & {
+		transform: rotate(180deg);
+	}
+}

package/src/components/progress/Progress.module.css

@@ -0,0 +1,54 @@
+.root {
+	width: 100%;
+
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	row-gap: var(--m-spacing-xs);
+	column-gap: var(--m-spacing-md);
+	align-items: center;
+	box-sizing: border-box;
+}
+
+.indicator {
+	width: 100%;
+	transition: transform var(--m-duration) var(--m-easing);
+	border-radius: var(--m-radius);
+	@apply --mx-bg(var(--m-color-main));
+
+	&[data-complete] {
+		@apply --mx-bg(var(--m-color-palette-success));
+	}
+}
+
+.track {
+	position: relative;
+	width: 100%;
+	height: --fn-literal(8px);
+	overflow: clip;
+	grid-column-start: 1;
+	grid-column-end: 3;
+	box-sizing: border-box;
+
+	border-radius: var(--m-radius-lg);
+	@apply --mx-bg(var(--m-color-neutral-paper));
+	@apply --mx-borderColor(var(--m-color-neutral-ink));
+}
+
+.label {
+	grid-column-start: 1;
+	grid-row-start: 1;
+	@apply --mx-fg(var(--m-color-neutral-ink));
+	font-size: var(--m-text-ambient-size);
+	line-height: var(--m-text-ambient-lineHeight);
+	font-weight: var(--m-text-ambient-weight);
+}
+
+.value {
+	grid-column-start: 2;
+	grid-row-start: 1;
+	justify-self: end;
+	@apply --mx-fg(var(--m-color-neutral-ink));
+	font-size: var(--m-text-ambient-size);
+	line-height: var(--m-text-ambient-lineHeight);
+	font-weight: 500;
+}

package/src/components/progress/Progress.stories.tsx

@@ -1,4 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Box } from '../box/Box.js';
 import { Progress } from './Progress.js';
 
 const meta = {
@@ -17,11 +18,11 @@ type Story = StoryObj<typeof Progress>;
 export const Default: Story = {
 	render(args) {
 		return (
-			<div className="col">
+			<Box col gap>
 				<Progress {...args} value={50} max={100} />
 				<Progress {...args} value={100} max={100} />
 				<Progress {...args} value={0} max={100} />
-			</div>
+			</Box>
 		);
 	},
 };
@@ -29,11 +30,11 @@ export const Default: Story = {
 export const Labeled: Story = {
 	render(args) {
 		return (
-			<div className="col gap-10px">
+			<Box col gap>
 				<Progress.Labeled {...args} value={33} max={100} label="Loading..." />
 				<Progress.Labeled {...args} value={100} max={100} label="Complete" />
 				<Progress.Labeled {...args} value={0} max={100} label="Starting..." />
-			</div>
+			</Box>
 		);
 	},
 };

package/src/components/progress/Progress.tsx

@@ -5,42 +5,29 @@ import {
 } from '@base-ui/react/progress';
 import clsx from 'clsx';
 import { withClassName } from '../../hooks.js';
-import { PaletteName } from '../../uno/index.js';
+import cls from './Progress.module.css';
 
-export const ProgressRoot = withClassName(
-	ProgressPrimitive.Root,
-	'layer-components:grid-columns-[1fr_1fr] layer-components:(grid w-full items-center gap-col-md gap-row-xs)',
-);
+export const ProgressRoot = withClassName(ProgressPrimitive.Root, cls.root);
 export const ProgressIndicator = withClassName(
 	ProgressPrimitive.Indicator,
-	'layer-components:(w-full rounded-lg transition-transform bg-main)',
-	'layer-components:data-[complete]:(bg-success)',
-);
-export const ProgressTrack = withClassName(
-	ProgressPrimitive.Track,
-	'layer-components:(relative h-8px w-full overflow-hidden border rounded-lg border-black)',
+	cls.indicator,
 );
+export const ProgressTrack = withClassName(ProgressPrimitive.Track, cls.track);
 
 const ProgressBase = function ProgressBase({
 	ref,
 	children,
-	color,
 	max = 100,
 	value,
 	className,
 	...props
 }: ProgressRootProps & {
 	ref?: React.Ref<HTMLDivElement>;
-	color?: PaletteName;
 }) {
 	return (
 		<ProgressPrimitive.Root
 			{...props}
-			className={clsx(
-				color && `palette-${color}`,
-				'layer-components:w-full',
-				className,
-			)}
+			className={clsx('layer-components:w-full', className)}
 			value={value}
 			max={max}
 			ref={ref}
@@ -53,35 +40,23 @@ const ProgressBase = function ProgressBase({
 	);
 };
 
-const ProgressLabel = withClassName(
-	ProgressPrimitive.Label,
-	'layer-components:(col-start-1 row-start-1 font-size-xs color-gray-ink)',
-);
+const ProgressLabel = withClassName(ProgressPrimitive.Label, cls.label);
 
-const ProgressValue = withClassName(
-	ProgressPrimitive.Value,
-	'layer-components:(col-start-2 row-start-1 justify-self-end font-size-xs font-semibold color-gray-ink)',
-);
+const ProgressValue = withClassName(ProgressPrimitive.Value, cls.value);
 
 export const ProgressLabeled = function ProgressLabeled({
 	ref,
 	label,
 	className,
-	color,
 	formatValue,
 	...props
 }: Omit<ProgressRootProps, 'children'> & {
 	ref?: React.Ref<HTMLDivElement>;
 	label: React.ReactNode;
-	color?: PaletteName;
 	formatValue?: ProgressValueProps['children'];
 }) {
 	return (
-		<ProgressRoot
-			ref={ref}
-			className={clsx(color && `palette-${color}`, className)}
-			{...props}
-		>
+		<ProgressRoot ref={ref} className={clsx(className)} {...props}>
 			<ProgressLabel>{label}</ProgressLabel>
 			<ProgressValue>{formatValue}</ProgressValue>
 			<ProgressTrack className="col-span-2">

package/src/components/provider/Provider.tsx

@@ -10,7 +10,6 @@ import { ParticleLayer } from '../particles/index.js';
 import { PwaInstall } from '../pwaInstall/PwaInstall.js';
 import { DefaultToastProvider, Toaster } from '../toasts/toasts.js';
 import { TooltipProvider } from '../tooltip/index.js';
-import { TweakPane } from './TweakPane.js';
 
 export interface ProviderProps {
 	children?: ReactNode;
@@ -19,7 +18,6 @@ export interface ProviderProps {
 	virtualKeyboardBehavior?: 'overlay' | 'displace';
 	disableTitleBarColor?: boolean;
 	manifestPath?: string | false;
-	tweaks?: boolean;
 }
 
 /**
@@ -32,7 +30,6 @@ export function Provider({
 	virtualKeyboardBehavior = 'displace',
 	disableTitleBarColor,
 	manifestPath,
-	tweaks,
 }: ProviderProps) {
 	useVisualViewportOffset(disableViewportOffset);
 	useVirtualKeyboardFocusBehavior();
@@ -49,7 +46,6 @@ export function Provider({
 			{manifestPath === false ? null : (
 				<PwaInstall manifestPath={manifestPath} />
 			)}
-			{tweaks && <TweakPane />}
 		</>
 	);
 

package/src/components/pwaInstall/PlatformIcons.tsx

@@ -5,7 +5,7 @@ export function SafariShareIcon() {
 			width="24"
 			height="24"
 			viewBox="0 0 17.695 26.475"
-			className="v-middle"
+			style={{ verticalAlign: 'middle' }}
 		>
 			<g fill="currentColor">
 				<path d="M17.334 10.762v9.746c0 2.012-1.025 3.027-3.066 3.027H3.066C1.026 23.535 0 22.52 0 20.508v-9.746C0 8.75 1.025 7.734 3.066 7.734h2.94v1.573h-2.92c-.977 0-1.514.527-1.514 1.543v9.57c0 1.015.537 1.543 1.514 1.543h11.152c.967 0 1.524-.527 1.524-1.543v-9.57c0-1.016-.557-1.543-1.524-1.543h-2.91V7.734h2.94c2.04 0 3.066 1.016 3.066 3.028Z" />
@@ -22,7 +22,7 @@ export function SafariIcon() {
 			viewBox="0 0 20.283 19.932"
 			width="25"
 			height="25"
-			className="v-middle"
+			style={{ verticalAlign: 'middle' }}
 		>
 			<g fill="currentColor">
 				<path d="M9.96 19.922c5.45 0 9.962-4.522 9.962-9.961C19.922 4.51 15.4 0 9.952 0 4.511 0 0 4.512 0 9.96c0 5.44 4.521 9.962 9.96 9.962Zm0-1.66A8.26 8.26 0 0 1 1.67 9.96c0-4.61 3.672-8.3 8.281-8.3 4.61 0 8.31 3.69 8.31 8.3 0 4.61-3.69 8.3-8.3 8.3Z" />
@@ -40,7 +40,7 @@ export function SafariPlusSquareIcon() {
 			height="24"
 			viewBox="-4 -4 33 33"
 			fill="currentColor"
-			className="v-middle"
+			style={{ verticalAlign: 'middle' }}
 		>
 			<g>
 				<path d="m23.40492,1.60784c-1.32504,-1.32504 -3.19052,-1.56912 -5.59644,-1.56912l-10.65243,0c-2.33622,0 -4.2017,0.24408 -5.5267,1.56912c-1.32504,1.34243 -1.56911,3.17306 -1.56911,5.50924l0,10.5827c0,2.40596 0.22665,4.254 1.55165,5.57902c1.34246,1.32501 3.19052,1.5691 5.59647,1.5691l10.60013,0c2.40592,0 4.2714,-0.24408 5.59644,-1.5691c1.325,-1.34245 1.55166,-3.17306 1.55166,-5.57902l0,-10.51293c0,-2.40596 -0.22666,-4.25401 -1.55166,-5.57901zm-0.38355,5.21289l0,11.24518c0,1.51681 -0.20924,2.94643 -1.02865,3.78327c-0.83683,0.83685 -2.30134,1.0635 -3.81815,1.0635l-11.33234,0c-1.51681,0 -2.96386,-0.22665 -3.80073,-1.0635c-0.83683,-0.83684 -1.04607,-2.26646 -1.04607,-3.78327l0,-11.19288c0,-1.5517 0.20924,-3.01617 1.02865,-3.85304c0.83687,-0.83683 2.31876,-1.04607 3.87042,-1.04607l11.28007,0c1.51681,0 2.98132,0.22666 3.81815,1.06353c0.81941,0.81941 1.02865,2.26645 1.02865,3.78327zm-10.53039,12.08205c0.64506,0 1.02861,-0.43586 1.02861,-1.13326l0,-4.34117l4.53294,0c0.66252,0 1.13326,-0.36613 1.13326,-0.99376c0,-0.64506 -0.43586,-1.02861 -1.13326,-1.02861l-4.53294,0l0,-4.53294c0,-0.6974 -0.38355,-1.13326 -1.02861,-1.13326c-0.62763,0 -0.99376,0.45332 -0.99376,1.13326l0,4.53294l-4.51552,0c-0.69737,0 -1.15069,0.38355 -1.15069,1.02861c0,0.62763 0.48817,0.99376 1.15069,0.99376l4.51552,0l0,4.34117c0,0.66252 0.36613,1.13326 0.99376,1.13326z" />
@@ -56,7 +56,7 @@ export function SafariAddToDockIcon() {
 			viewBox="0 0 23.389 17.979"
 			width="24"
 			height="24"
-			className="v-middle"
+			style={{ verticalAlign: 'middle' }}
 		>
 			<g fill="currentColor">
 				<path d="M1.045 3.291v1.377h20.937V3.291Zm2.021 14.688h16.895c2.05 0 3.066-1.006 3.066-3.018V3.027C23.027 1.016 22.012 0 19.961 0H3.066C1.026 0 0 1.016 0 3.027v11.934c0 2.012 1.025 3.018 3.066 3.018Zm.02-1.573c-.977 0-1.514-.517-1.514-1.533V3.115c0-1.015.537-1.543 1.514-1.543H19.94c.967 0 1.514.528 1.514 1.543v11.758c0 1.016-.547 1.533-1.514 1.533Z" />
@@ -68,7 +68,12 @@ export function SafariAddToDockIcon() {
 
 export function AndroidAddToHomeIcon() {
 	return (
-		<svg height="24" viewBox="0 -960 960 960" width="24" className="v-middle">
+		<svg
+			height="24"
+			viewBox="0 -960 960 960"
+			width="24"
+			style={{ verticalAlign: 'middle' }}
+		>
 			<path d="M320-40q-33 0-56.5-23.5T240-120v-160h80v40h400v-480H320v40h-80v-160q0-33 23.5-56.5T320-920h400q33 0 56.5 23.5T800-840v720q0 33-23.5 56.5T720-40H320Zm0-120v40h400v-40H320ZM176-280l-56-56 224-224H200v-80h280v280h-80v-144L176-280Zm144-520h400v-40H320v40Zm0 0v-40 40Zm0 640v40-40Z" />
 		</svg>
 	);

package/src/components/pwaInstall/PwaInstall.module.css

@@ -0,0 +1,23 @@
+.dialogContent {
+	display: flex;
+	flex-direction: column;
+	gap: var(--m-spacing-xs);
+}
+
+.dialogTitle {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--m-spacing-md);
+}
+
+.appIcon {
+	display: inline-block;
+	height: 1em;
+	width: 1em;
+	border-radius: var(--m-radius);
+}
+
+.appDescription {
+	margin-bottom: var(--m-spacing-sm);
+}

package/src/components/pwaInstall/PwaInstall.tsx

@@ -20,6 +20,7 @@ import {
 	SafariPlusSquareIcon,
 	SafariShareIcon,
 } from './PlatformIcons.js';
+import cls from './PwaInstall.module.css';
 import { pwaInstallerState } from './state.js';
 import {
 	triggerDeferredInstall,
@@ -54,8 +55,8 @@ export function PwaInstall({ manifestPath, ...rest }: PwaInstall) {
 				rest.onOpenChange?.(isOpen, ev);
 			}}
 		>
-			<Dialog.Content className="flex flex-col gap-xs" id="pwa-install-dialog">
-				<Dialog.Title className="flex flex-row items-center gap-md">
+			<Dialog.Content className={cls.dialogContent} id="pwa-install-dialog">
+				<Dialog.Title className={cls.dialogTitle}>
 					{primaryIcon && (
 						<img
 							src={primaryIcon.src}
@@ -65,7 +66,7 @@ export function PwaInstall({ manifestPath, ...rest }: PwaInstall) {
 								manifest?.name ??
 								'App Icon'
 							}
-							className="inline-block h-1em w-1em rounded"
+							className={cls.appIcon}
 						/>
 					)}
 					Install {manifest?.short_name ?? manifest?.name ?? 'App'}
@@ -92,7 +93,7 @@ export function PwaInstall({ manifestPath, ...rest }: PwaInstall) {
 							access and more features.
 						</Dialog.Description>
 						{manifest?.description && (
-							<P className="mb-sm">{manifest.description}</P>
+							<P className={cls.appDescription}>{manifest.description}</P>
 						)}
 						<ManifestImageGallery manifestPath={manifestPath} />
 						<Dialog.Actions>
@@ -176,7 +177,7 @@ function ManifestImageGallery({ manifestPath }: { manifestPath?: string }) {
 	}
 
 	return (
-		<Box overflow="auto-x" p="sm" gap className="h-240px">
+		<Box overflow="auto-x" p="sm" gap style={{ height: 240 }}>
 			{manifest.screenshots?.map((screenshot, index) => (
 				<Lightbox.Root key={screenshot.src}>
 					<Lightbox.Trigger
@@ -186,13 +187,13 @@ function ManifestImageGallery({ manifestPath }: { manifestPath?: string }) {
 								key={index}
 								src={screenshot.src}
 								alt={screenshot.label || `Screenshot ${index + 1}`}
-								className="border border-default rounded-xs"
+								className="border-default border rd-xs"
 							/>
 						}
 					/>
 					<Lightbox.Portal>
-						<Lightbox.Overlay className="z-10000" />
-						<Lightbox.Content className="z-10001">
+						<Lightbox.Overlay style={{ zIndex: 10000 }} />
+						<Lightbox.Content style={{ zIndex: 10001 }}>
 							<Lightbox.Image
 								src={screenshot.src}
 								alt={screenshot.label || `Screenshot ${index + 1}`}

package/src/components/pwaInstall/PwaInstallTrigger.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Button } from '../button/Button.js';
 import { Icon } from '../icon/Icon.js';
 import { PwaInstallTrigger } from './PwaInstallTrigger.js';

package/src/components/quickAction/QuickAction.module.css

@@ -0,0 +1,59 @@
+.trigger {
+	position: relative;
+	justify-content: center;
+	padding: var(--m-spacing-xs);
+	border-radius: var(--m-action-radius);
+}
+
+.popup {
+	transition-property: all;
+	transition-duration: var(--m-duration);
+	transition-timing-function: var(--m-easing-loose);
+
+	position: fixed;
+	contain: layout;
+
+	@apply --mx-shadow(var(--m-shadow-lg));
+	@apply --mx-surface-ambient;
+	padding: 0;
+
+	clip-path: inset(-50px -50px -50px -50px);
+
+	bottom: anchor(bottom);
+	&[data-align='center'] {
+		justify-self: anchor-center;
+	}
+	&[data-align='start'] {
+		justify-self: anchor-start;
+	}
+	&[data-align='end'] {
+		justify-self: anchor-end;
+	}
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		&[data-align='center'] {
+			clip-path: inset(
+				calc(100% - var(--trigger-height, 0px))
+					calc((100% - var(--trigger-width, 0px)) / 2) 0
+					calc((100% - var(--trigger-width, 0px)) / 2) round 200px
+			);
+		}
+		&[data-align='start'] {
+			clip-path: inset(
+				calc(100% - var(--trigger-height, 0px))
+					calc(100% - var(--trigger-width, 0px)) 0 0 round 200px
+			);
+		}
+		&[data-align='end'] {
+			clip-path: inset(
+				calc(100% - var(--trigger-height, 0px)) 0 0
+					calc(100% - var(--trigger-width, 0px)) round 200px
+			);
+		}
+	}
+
+	&[data-ending-style] {
+		opacity: 0;
+	}
+}