@stealthscale/component-media 0.1.0

package/dist/recipe-m4bX2c06.js

@@ -0,0 +1,749 @@
+import { PALETTES, cornerVariants, defineRecipe, defineSlotRecipe, dense, flatVariants, onSlot, onSlots, paletteVariants, ratioVariants, sizeVariants } from "@stealthscale/theme/authoring";
+//#region src/audio/recipe.ts
+/**
+* Styles an `audio` element as a block as wide as its container.
+*
+* @remarks
+*   The browser draws the controls, so the recipe sets the box and the focus ring alone and offers
+*   no axis. A radius on the element clips Chromium's control panel, and the panel's colours follow
+*   the page's `color-scheme`.
+*/
+/**
+* Styles an audio element that fills the inline size of its container.
+*/
+const recipe$6 = defineRecipe({
+	base: {
+		display: "block",
+		focusRingColor: "colorPalette.focusRing",
+		focusVisibleRing: "outside",
+		inlineSize: "full",
+		maxInlineSize: "full"
+	},
+	className: "audio",
+	jsx: [/^Audio$/u]
+});
+//#endregion
+//#region src/avatar/recipe.ts
+/**
+* Declares the avatar's slot recipe: a box with a person's picture, or with their initials while
+* the picture is missing, loading or broken, and a group that overlaps several boxes.
+*
+* @remarks
+*   The box is a square on the control scale, so an avatar is as tall as a button of its size: 32,
+*   36, 40, 44, 48 and 56px from `xs` to `2xl`. `2xs` is the middle tag height, 24px, for a byline
+*   or a list row. The root sets its side as `--avatar-size`, and a group overlaps each avatar with
+*   the one before it by a quarter of that side. The image covers the box and takes the root's
+*   corners, and the root clips nothing, so a badge can overhang its edge. The fallback centres the
+*   initials in the label style of the avatar's size. The looks are the flat layer styles, because
+*   an avatar is read and not pressed, and the look and the palette color the fallback alone. A
+*   group rings each avatar in `bg.panel` with an outline, which is drawn outside the box and
+*   leaves the fill's curved edge alone. Under forced colors the box keeps a hairline `CanvasText`
+*   outline, because a look without an edge loses its shape there.
+*/
+/**
+* Custom property the root sets to its side, which a group and a badge read.
+*/
+const SIZE = "--avatar-size";
+/**
+* Sizes the avatar offers on the control scale.
+*/
+const SIZES = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl"
+];
+/**
+* Styles an element the machine hides with the `hidden` attribute, which a `display` value in the
+* recipe would override.
+*/
+const HIDDEN = { "&[hidden]": { display: "none" } };
+/**
+* Styles a subtle circle at the middle size in the neutral palette.
+*/
+const recipe$5 = defineSlotRecipe({
+	base: {
+		fallback: {
+			...HIDDEN,
+			"& > svg": {
+				blockSize: "50%",
+				inlineSize: "50%"
+			},
+			alignItems: "center",
+			blockSize: "full",
+			display: "flex",
+			inlineSize: "full",
+			justifyContent: "center",
+			lineHeight: "1",
+			textTransform: "uppercase"
+		},
+		group: {
+			"& > .avatar__root": {
+				outlineColor: "bg.panel",
+				outlineStyle: "solid",
+				outlineWidth: "indicator"
+			},
+			"& > .avatar__root + .avatar__root": { marginInlineStart: `calc(var(${SIZE}) / -4)` },
+			alignItems: "center",
+			display: "inline-flex",
+			flexShrink: "0",
+			verticalAlign: "middle"
+		},
+		image: {
+			...HIDDEN,
+			blockSize: "full",
+			borderRadius: "inherit",
+			display: "block",
+			inlineSize: "full",
+			objectFit: "cover"
+		},
+		root: {
+			_highContrast: {
+				outlineColor: "CanvasText",
+				outlineOffset: "calc({borderWidths.hairline} * -1)",
+				outlineStyle: "solid",
+				outlineWidth: "hairline"
+			},
+			alignItems: "center",
+			blockSize: `var(${SIZE})`,
+			colorPalette: "neutral",
+			display: "inline-flex",
+			flexShrink: "0",
+			fontWeight: "medium",
+			inlineSize: `var(${SIZE})`,
+			justifyContent: "center",
+			position: "relative",
+			userSelect: "none",
+			verticalAlign: "middle"
+		}
+	},
+	className: "avatar",
+	defaultVariants: {
+		shape: "circle",
+		size: "md",
+		variant: "subtle"
+	},
+	jsx: [/^Avatar\.\w+$/u],
+	slots: [
+		"root",
+		"image",
+		"fallback",
+		"group"
+	],
+	staticCss: [{ palette: [...PALETTES] }],
+	variants: {
+		/**
+		* The halo around the box, in the palette's solid at half opacity.
+		*
+		* @remarks
+		*   `pulse` animates the halo and stops under reduced motion, for a person who is speaking.
+		*/
+		effect: onSlot("root", {
+			glow: { layerStyle: "glow.sm" },
+			pulse: {
+				animationStyle: "pulse-glow",
+				boxShadowColor: "colorPalette.solid/50"
+			}
+		}),
+		palette: onSlot("root", paletteVariants()),
+		/**
+		* The corners of the box: a circle for a person, and a rounded or square box for a company, a
+		* service or a bot.
+		*/
+		shape: onSlot("root", {
+			circle: { borderRadius: "full" },
+			rounded: { borderRadius: "l2" },
+			square: { borderRadius: "none" }
+		}),
+		/**
+		* The side of the box and the initials in the label style of that size.
+		*
+		* @remarks
+		*   `2xs` is the middle tag height with the smallest text style, because the control scale and
+		*   the label role start at `xs`.
+		*/
+		size: onSlots({
+			fallback: {
+				"2xs": { textStyle: "2xs" },
+				...sizeVariants((size) => ({ textStyle: `label.${size}` }), SIZES)
+			},
+			root: {
+				"2xs": { [SIZE]: dense("{sizes.tag.md}") },
+				...sizeVariants((size) => ({ [SIZE]: dense(`{sizes.control.${size}}`) }), SIZES)
+			}
+		}),
+		variant: onSlot("root", flatVariants([
+			"solid",
+			"subtle",
+			"surface",
+			"outline"
+		]))
+	}
+});
+//#endregion
+//#region src/avatar/avatar-badge.recipe.ts
+/**
+* Declares the avatar badge's recipe: a mark pinned to one corner of an avatar, half over the
+* picture, which is a status dot when empty and grows around a count, an emoji or an icon.
+*
+* @remarks
+*   The badge centres on the point where the avatar's diagonal crosses its rim, 14.64% of the side
+*   in from the corner, and a rounded or square avatar takes the same point. An empty badge is 28%
+*   of the avatar's side and never under 8px. A badge with content is 40% of the side and never
+*   under 16px, its text is 60% of its own height, and a longer count widens it into a pill. The
+*   ring is an outline in `bg.panel`, which cuts the badge away from the picture behind it. Under
+*   forced colors the badge keeps its palette, and its label states the same thing in words.
+*/
+/**
+* Custom property the badge sets to its own side.
+*/
+const BADGE = "--avatar-badge-size";
+/**
+* Distance from the avatar's edges to the point where its diagonal crosses its rim.
+*/
+const RIM = `calc(var(${SIZE}) * 0.1464)`;
+/**
+* Styles a neutral dot in the solid look on the avatar's bottom end corner.
+*/
+const recipe$4 = defineRecipe({
+	base: {
+		_highContrast: { forcedColorAdjust: "none" },
+		"&:not(:empty)": {
+			[BADGE]: `max({sizes.4}, calc(var(${SIZE}) * 0.4))`,
+			fontSize: `calc(var(${BADGE}) * 0.6)`,
+			paddingInline: `calc(var(${BADGE}) * 0.2)`
+		},
+		"& > svg": {
+			blockSize: "75%",
+			inlineSize: "75%"
+		},
+		alignItems: "center",
+		[BADGE]: `max({sizes.2}, calc(var(${SIZE}) * 0.28))`,
+		blockSize: `var(${BADGE})`,
+		borderRadius: "full",
+		display: "inline-flex",
+		fontVariantNumeric: "tabular-nums",
+		fontWeight: "semibold",
+		justifyContent: "center",
+		lineHeight: "1",
+		minInlineSize: `var(${BADGE})`,
+		outlineColor: "bg.panel",
+		outlineStyle: "solid",
+		outlineWidth: "control",
+		position: "absolute",
+		whiteSpace: "nowrap"
+	},
+	className: "avatar-badge",
+	defaultVariants: {
+		palette: "neutral",
+		placement: "bottom-end",
+		variant: "solid"
+	},
+	jsx: [/^Avatar\.Badge$/u],
+	staticCss: [{ palette: [...PALETTES] }],
+	variants: {
+		palette: paletteVariants(),
+		/**
+		* The corner the badge is pinned to, in the direction of the text.
+		*/
+		placement: {
+			"bottom-end": {
+				_rtl: { translate: "-50% 50%" },
+				insetBlockEnd: RIM,
+				insetInlineEnd: RIM,
+				translate: "50% 50%"
+			},
+			"bottom-start": {
+				_rtl: { translate: "50% 50%" },
+				insetBlockEnd: RIM,
+				insetInlineStart: RIM,
+				translate: "-50% 50%"
+			},
+			"top-end": {
+				_rtl: { translate: "-50% -50%" },
+				insetBlockStart: RIM,
+				insetInlineEnd: RIM,
+				translate: "50% -50%"
+			},
+			"top-start": {
+				_rtl: { translate: "50% -50%" },
+				insetBlockStart: RIM,
+				insetInlineStart: RIM,
+				translate: "-50% -50%"
+			}
+		},
+		variant: flatVariants(["solid", "subtle"])
+	}
+});
+//#endregion
+//#region src/carousel/recipe.ts
+/**
+* Styles a carousel: the slides in a scroller that snaps a page at a time, the triggers that move a
+* page, the dots that pick one, the rotation control and the progress text.
+*
+* @remarks
+*   The machine writes the scroller's layout inline, a grid of slides a page wide with scroll
+*   snapping, and spaces the slides by its `spacing` option. The root passes that option a custom
+*   property the recipe sets to the theme's `gap.md`. A dot is a 24px target around an 8px mark in
+*   the palette's `border` role, which measures 3:1 against every surface. The current dot is a
+*   20px pill in the palette's solid, so the page it marks differs in shape as well as in color.
+*   With `controls` set to `overlay`, the controls share the slides' grid cell. The triggers are at
+*   the sides, the dots on a `bg.panel` pill at the bottom, padded by a dot's 2px focus ring, and
+*   the rotation control and the progress text at the top. In a vertical carousel the machine sizes
+*   a slide to a share of the scroller's height, so the scroller takes the `landscape` ratio unless
+*   `ratio` sets another. A picture that is a slide's child covers the slide: it keeps its own
+*   aspect ratio where the slide is as tall as its content, and the slide crops it where the
+*   scroller's ratio sets the height.
+*/
+/**
+* Custom property the root passes to the machine as the gap between slides.
+*/
+const GAP = "--carousel-gap";
+/**
+* Selects a part of a carousel that runs top to bottom.
+*/
+const VERTICAL = "&[data-orientation=vertical]";
+/**
+* Corners the slides offer. A fully round slide would clip its picture to an ellipse.
+*/
+const CORNERS = cornerVariants([
+	"l1",
+	"l2",
+	"l3"
+]);
+/**
+* Distance of an overlaid control from the slides' edge.
+*/
+const EDGE = dense("{spacing.gap.sm}");
+/**
+* Sets a `bg.panel` pill behind an overlaid control, so it reads over any photograph.
+*/
+const PILL = {
+	background: "bg.panel",
+	borderRadius: "full",
+	boxShadow: "sm",
+	position: "absolute"
+};
+/**
+* Defines the carousel recipe, with the controls under the slides, neutral dots and `l3` slides by
+* default.
+*/
+const recipe$3 = defineSlotRecipe({
+	base: {
+		autoplayTrigger: { flexShrink: "0" },
+		control: {
+			alignItems: "center",
+			display: "flex",
+			gap: dense("{spacing.gap.sm}"),
+			justifyContent: "space-between",
+			[VERTICAL]: { flexDirection: "column" }
+		},
+		indicator: {
+			_current: {
+				_hover: { "&::after": { background: "colorPalette.solid.hover" } },
+				"&::after": {
+					background: "colorPalette.solid",
+					inlineSize: "5"
+				}
+			},
+			_highContrast: {
+				_current: { "&::after": { background: "Highlight" } },
+				"&::after": {
+					background: "CanvasText",
+					forcedColorAdjust: "none"
+				}
+			},
+			_hover: { "&::after": { background: "colorPalette.border.hover" } },
+			"&::after": {
+				background: "colorPalette.border",
+				blockSize: "2",
+				borderRadius: "full",
+				content: "''",
+				inlineSize: "2",
+				transitionDuration: "moderate",
+				transitionProperty: "inline-size, background-color"
+			},
+			alignItems: "center",
+			background: "transparent",
+			borderRadius: "full",
+			borderWidth: "0",
+			boxSize: "6",
+			cursor: "button",
+			display: "inline-flex",
+			flexShrink: "0",
+			focusRingColor: "colorPalette.focusRing",
+			focusVisibleRing: "inside",
+			justifyContent: "center",
+			padding: "0"
+		},
+		indicatorGroup: {
+			alignItems: "center",
+			display: "flex",
+			flexWrap: "wrap",
+			justifyContent: "center",
+			[VERTICAL]: { flexDirection: "column" }
+		},
+		item: {
+			"& > img": {
+				blockSize: "full",
+				display: "block",
+				inlineSize: "full",
+				objectFit: "cover"
+			},
+			overflow: "hidden",
+			position: "relative"
+		},
+		itemGroup: {
+			focusRingColor: "colorPalette.focusRing",
+			focusVisibleRing: "outside",
+			[VERTICAL]: {
+				aspectRatio: "landscape",
+				flex: "1",
+				minInlineSize: "0"
+			}
+		},
+		nextTrigger: { flexShrink: "0" },
+		prevTrigger: { flexShrink: "0" },
+		progressText: {
+			color: "fg.muted",
+			fontVariantNumeric: "tabular-nums",
+			textStyle: "label.sm",
+			whiteSpace: "nowrap"
+		},
+		root: {
+			[GAP]: dense("{spacing.gap.md}"),
+			gap: dense("{spacing.gap.sm}"),
+			minInlineSize: "0",
+			position: "relative"
+		}
+	},
+	className: "carousel",
+	defaultVariants: {
+		controls: "outside",
+		palette: "neutral",
+		radius: "l3"
+	},
+	jsx: [/^Carousel(\.\w+)?$/u],
+	slots: [
+		"root",
+		"itemGroup",
+		"item",
+		"control",
+		"nextTrigger",
+		"prevTrigger",
+		"indicatorGroup",
+		"indicator",
+		"autoplayTrigger",
+		"progressText"
+	],
+	variants: {
+		/**
+		* Where the controls go: beside the slides in the root's flow, or over the slides.
+		*
+		* @remarks
+		*   Beside the slides, the root is a flex column, a row in a vertical carousel. Over the
+		*   slides, the root is a grid whose first cell contains both the scroller and the control, so
+		*   the control covers the slides exactly and any other child takes the next row. The control
+		*   passes presses through, and each control in it takes them.
+		*/
+		controls: {
+			outside: { root: {
+				display: "flex",
+				flexDirection: "column",
+				[VERTICAL]: { flexDirection: "row" }
+			} },
+			overlay: {
+				autoplayTrigger: {
+					insetBlockStart: EDGE,
+					insetInlineStart: EDGE,
+					position: "absolute"
+				},
+				control: {
+					"& > *": { pointerEvents: "auto" },
+					gridArea: "1 / 1 / 2 / 2",
+					padding: EDGE,
+					pointerEvents: "none",
+					position: "relative"
+				},
+				indicatorGroup: {
+					...PILL,
+					insetBlockEnd: EDGE,
+					left: "50%",
+					padding: "0.5",
+					translate: "-50% 0",
+					[VERTICAL]: {
+						insetBlockEnd: "auto",
+						insetInlineEnd: EDGE,
+						left: "auto",
+						top: "50%",
+						translate: "0 -50%"
+					}
+				},
+				itemGroup: { gridArea: "1 / 1 / 2 / 2" },
+				progressText: {
+					...PILL,
+					color: "fg",
+					insetBlockStart: EDGE,
+					insetInlineEnd: EDGE,
+					paddingBlock: "1",
+					paddingInline: dense("{spacing.gap.sm}")
+				},
+				root: { display: "grid" }
+			}
+		},
+		/**
+		* Palette of the dots.
+		*/
+		palette: onSlot("indicator", paletteVariants()),
+		/**
+		* Corner radius token of the slides and of the scroller's focus ring.
+		*/
+		radius: onSlots({
+			item: CORNERS,
+			itemGroup: CORNERS
+		}),
+		/**
+		* Aspect ratio token of the scroller, whose height a vertical carousel needs. A horizontal
+		* carousel without it is as tall as its slides.
+		*/
+		ratio: onSlot("itemGroup", ratioVariants())
+	}
+});
+//#endregion
+//#region src/iframe/recipe.ts
+/**
+* Styles an `iframe` as a box of one of the theme's ratios, as wide as its container.
+*
+* @remarks
+*   The ratio holds the box's shape before the framed document loads, so nothing below it moves
+*   when it does. The box is `bg.panel` with a hairline edge, which bounds a framed page with a
+*   white ground on a white page. The recipe sets no focus ring. Firefox and Chromium match no
+*   focus pseudo-class on an `iframe` while its document has focus, as the HTML Standard asks for a
+*   navigable container.
+*/
+/**
+* Styles a 16:9 frame with the `l3` corners.
+*/
+const recipe$2 = defineRecipe({
+	base: {
+		background: "bg.panel",
+		blockSize: "auto",
+		borderColor: "border",
+		borderStyle: "solid",
+		borderWidth: "hairline",
+		display: "block",
+		inlineSize: "full",
+		maxInlineSize: "full"
+	},
+	className: "iframe",
+	defaultVariants: {
+		radius: "l3",
+		ratio: "video"
+	},
+	jsx: [/^Iframe$/u],
+	variants: {
+		/**
+		* Corner radius token. The axis leaves out `full`, because a framed document's content reaches
+		* the frame's corners and a fully round corner clips it.
+		*/
+		radius: cornerVariants([
+			"l1",
+			"l2",
+			"l3"
+		]),
+		/**
+		* Aspect ratio token the frame keeps before and after its document loads.
+		*/
+		ratio: ratioVariants()
+	}
+});
+//#endregion
+//#region src/image-cropper/recipe.ts
+/**
+* Styles an image cropper: a picture in a viewport, the selection over the part it keeps with the
+* rest dimmed, the handles that resize the selection, and the thirds shown while it moves.
+*
+* @remarks
+*   The picture sets the viewport's shape: the image spans the viewport's width at its own ratio,
+*   because the machine writes `object-fit: fill` on it and measures the image's box for the crop
+*   it exports. The selection's box is the crop. Its line is a `bg.panel` hairline border and a
+*   `border.emphasized` inset hairline, so one of them contrasts with any photograph in either
+*   mode. The line's middle is the selection's padding edge, where the machine centres every
+*   handle. A spread shadow in `bg.backdrop` dims the viewport outside the crop. The focus ring is
+*   one color, so a `bg.panel` spread fills the gap under it and the ring contrasts with that band
+*   over any photograph. Forced colors drop shadows and paint the border in `CanvasText`, and the
+*   handles' dots keep a transparent hairline border for the same reason. A handle is a 24px
+*   target, and its visible dot is a pseudo-element inside it. The viewport and the selection take
+*   the `drag` cursor, because a press on either moves the crop or pans the picture, and the
+*   selection takes `dragging` while it moves.
+*/
+/**
+* Class name of the recipe, from which the binding writes each part's class.
+*/
+const CLASS = "image-cropper";
+/**
+* Paints the inner hairline of the selection's line.
+*/
+const LINE = "inset 0 0 0 {borderWidths.hairline} {colors.border.emphasized}";
+/**
+* Fills the gap between the selection and its focus ring with `bg.panel`, so the ring contrasts
+* with that band over any photograph.
+*/
+const BAND = "0 0 0 {spacing.ring} {colors.bg.panel}";
+/**
+* Dims the viewport outside the selection.
+*/
+const DIM = "0 0 0 100vmax {colors.bg.backdrop}";
+/**
+* Defines the image cropper recipe, with the `l2` corners on the viewport by default.
+*/
+const recipe$1 = defineSlotRecipe({
+	base: {
+		grid: {
+			"&:is([data-dragging], [data-panning])": { opacity: "1" },
+			"&[data-axis=horizontal]": { borderBlockWidth: "hairline" },
+			"&[data-axis=vertical]": { borderInlineWidth: "hairline" },
+			borderColor: "bg.panel",
+			borderStyle: "solid",
+			borderWidth: "0",
+			opacity: "0",
+			transitionDuration: "moderate",
+			transitionProperty: "opacity"
+		},
+		handle: {
+			"&::after": {
+				background: "bg.panel",
+				borderColor: "transparent",
+				borderRadius: "full",
+				borderStyle: "solid",
+				borderWidth: "hairline",
+				boxShadow: "0 0 0 {borderWidths.hairline} {colors.border.emphasized}",
+				boxSize: "2.5",
+				boxSizing: "border-box",
+				content: "''"
+			},
+			"&[data-disabled]": { display: "none" },
+			alignItems: "center",
+			blockSize: "6",
+			["&:is([data-position=ne], [data-position=nw], [data-position=se], [data-position=sw])"]: { "&::after": { boxSize: "3" } },
+			display: "flex",
+			inlineSize: "6",
+			justifyContent: "center",
+			touchAction: "none"
+		},
+		image: {
+			blockSize: "auto",
+			display: "block",
+			inlineSize: "full",
+			maxInlineSize: "none"
+		},
+		root: {
+			display: "block",
+			inlineSize: "full",
+			position: "relative"
+		},
+		selection: {
+			_focusVisible: { boxShadow: [
+				LINE,
+				BAND,
+				DIM
+			].join(", ") },
+			"&:is([data-dragging], [data-panning])": { cursor: "dragging" },
+			"&[data-shape=circle]": { borderRadius: "full" },
+			borderColor: "bg.panel",
+			borderStyle: "solid",
+			borderWidth: "hairline",
+			boxShadow: [LINE, DIM].join(", "),
+			boxSizing: "border-box",
+			cursor: "drag",
+			focusRingColor: "colorPalette.focusRing",
+			focusVisibleRing: "outside"
+		},
+		viewport: {
+			background: "bg.emphasized",
+			cursor: "drag",
+			display: "block"
+		}
+	},
+	className: CLASS,
+	defaultVariants: { radius: "l2" },
+	jsx: [/^ImageCropper(\.\w+)?$/u],
+	slots: [
+		"root",
+		"viewport",
+		"image",
+		"selection",
+		"handle",
+		"grid"
+	],
+	variants: { 
+	/**
+	* Corner radius token of the viewport. The axis leaves out `full`, because a fully round
+	* viewport clips the selection's corners and the handles on them.
+	*/
+radius: onSlot("viewport", cornerVariants([
+		"l1",
+		"l2",
+		"l3"
+	])) }
+});
+//#endregion
+//#region src/video/recipe.ts
+/**
+* Styles a video: a block of a theme aspect ratio that keeps its shape before the clip's metadata
+* loads.
+*
+* @remarks
+*   A `video` reports its size only once its metadata loads, so without a ratio it is 0 pixels tall
+*   and grows mid-load, which moves everything below it. The ratio defaults to `video`, 16:9. The
+*   background is `bg.emphasized`, which shows while the poster loads and fills the bars of the
+*   `contain` fit. A hairline edge bounds pale footage on a light page. The recipe has no `palette`
+*   axis, because the clip fills the element, and no `effect` axis, because a glow in a palette has
+*   no relation to the clip.
+*/
+/**
+* Defines the video recipe, which defaults to a 16:9 clip that fills its shape inside `l3` corners.
+*/
+const recipe = defineRecipe({
+	base: {
+		background: "bg.emphasized",
+		blockSize: "auto",
+		borderColor: "border",
+		borderStyle: "solid",
+		borderWidth: "hairline",
+		display: "block",
+		focusRingColor: "colorPalette.focusRing",
+		focusVisibleRing: "outside",
+		inlineSize: "full",
+		maxInlineSize: "full"
+	},
+	className: "video",
+	defaultVariants: {
+		fit: "cover",
+		radius: "l3",
+		ratio: "video"
+	},
+	jsx: [/^Video$/u],
+	variants: {
+		/**
+		* Object fit of the clip. `cover` crops it to the shape and `contain` shows the whole clip
+		* between bars.
+		*/
+		fit: {
+			contain: { objectFit: "contain" },
+			cover: { objectFit: "cover" }
+		},
+		/**
+		* Corner radius token.
+		*/
+		radius: cornerVariants(),
+		/**
+		* Aspect ratio token the element keeps before and after the metadata loads.
+		*/
+		ratio: ratioVariants()
+	}
+});
+//#endregion
+export { recipe$3 as a, recipe$6 as c, GAP as i, recipe$1 as n, recipe$4 as o, recipe$2 as r, recipe$5 as s, recipe as t };