@delightstack/components 0.1.0

package/dist/display/Comparison.svelte.d.ts

@@ -0,0 +1,22 @@
+type $$ComponentProps = {
+    before: string;
+    after: string;
+    before_alt?: string;
+    after_alt?: string;
+    position?: number;
+    vertical?: boolean;
+    show_labels?: boolean;
+    label_before?: string;
+    label_after?: string;
+    skeleton?: boolean;
+    snaps?: number[];
+    id?: string;
+    class?: string;
+    onchange?: (detail: {
+        position: number;
+    }) => void;
+};
+declare const Comparison: import("svelte").Component<$$ComponentProps, {}, "position">;
+type Comparison = ReturnType<typeof Comparison>;
+export default Comparison;
+//# sourceMappingURL=Comparison.svelte.d.ts.map

package/dist/display/Comparison.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Comparison.svelte.d.ts","sourceRoot":"","sources":["../../src/display/Comparison.svelte.ts"],"names":[],"mappings":"AAGC,KAAK,gBAAgB,GAAI;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAClD,CAAC;AA0VH,QAAA,MAAM,UAAU,8DAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/display/Counter.svelte

@@ -0,0 +1,285 @@
+<script lang="ts">
+	import { intersectionObserver } from '@delightstack/utilities';
+	import { untrack } from 'svelte';
+
+	type EasingFunction = (t: number) => number;
+
+	const propId = $props.id();
+	let {
+		/** The target numeric value to display. May be assigned later (e.g.
+		 *  while stats load) — pair with `skeleton` to show a placeholder
+		 *  until it arrives. */
+		value = undefined as number | undefined,
+
+		/** Animation duration in milliseconds */
+		duration = 5000,
+
+		/** Delay before animation starts in milliseconds */
+		delay = 0,
+
+		/** Number of decimal places to display */
+		decimals = 0,
+
+		/** Text to display before the number (rendered smaller, top-aligned) */
+		prefix = undefined as string | undefined,
+
+		/** Text to display after the number (rendered smaller, top-aligned) */
+		suffix = undefined as string | undefined,
+
+		/** Custom format function — takes precedence over Intl.NumberFormat */
+		format = undefined as ((value: number) => string) | undefined,
+
+		/** Whether to show thousands separators */
+		separator = true,
+
+		/** BCP 47 locale for number formatting */
+		locale = undefined as string | undefined,
+
+		/** Custom easing function (receives t in 0..1, returns 0..1) */
+		easing = undefined as EasingFunction | undefined,
+
+		/** Show a number-shaped shimmer placeholder while `value` is not yet
+		 *  available. It dismisses itself (and the count-up starts) as soon as
+		 *  `value` arrives. Width can be tuned via `--counter-skeleton-width`. */
+		skeleton = false,
+
+		/** Callback fired when the animation completes */
+		oncomplete = undefined as (() => void) | undefined,
+
+		/** Element ID */
+		id = propId,
+
+		/** Additional CSS classes */
+		class: class_name = '',
+	} = $props();
+
+	const easeFn = $derived(
+		easing ??
+			/** Heavy ease-out: fast start, slow finish. */
+			((t: number) => 1 - Math.pow(1 - t, Math.max(5, Math.min(50, duration * 0.006)))),
+	);
+
+	let has_animated = $state(false);
+	let is_animating = $state(false);
+	let has_intersected = $state(false);
+
+	/** Placeholder shows until the value exists; the count-up is deferred so
+	 *  it doesn't run invisibly behind the shimmer. */
+	const show_skeleton = $derived(skeleton && value == null);
+	/** Start at 0 so SSR and the initial client render match (no hydration jump):
+	 *  the count then animates up from 0 once the element scrolls into view. The
+	 *  true value is always exposed via `aria-label` for assistive tech. */
+	let display_value = $state(0);
+	let raf_id = $state(0);
+
+	let prefers_reduced_motion = $state(false);
+	$effect(() => {
+		if (typeof window !== 'undefined') {
+			const mql = window.matchMedia('(prefers-reduced-motion: reduce)');
+			prefers_reduced_motion = mql.matches;
+			const handler = (e: MediaQueryListEvent) => {
+				prefers_reduced_motion = e.matches;
+			};
+			mql.addEventListener('change', handler);
+			return () => mql.removeEventListener('change', handler);
+		}
+	});
+
+	function formatNumber(n: number): string {
+		if (format) return format(n);
+		const options: Intl.NumberFormatOptions = {
+			minimumFractionDigits: decimals,
+			maximumFractionDigits: decimals,
+			useGrouping: separator,
+		};
+		return new Intl.NumberFormat(locale, options).format(n);
+	}
+
+	const formatted_value = $derived(formatNumber(display_value));
+
+	const aria_label_text = $derived(
+		value == null
+			? 'Loading'
+			: (prefix ?? '') + formatNumber(value) + (suffix ? ` ${suffix}` : ''),
+	);
+
+	function animateCount(from: number, to: number) {
+		if (raf_id) cancelAnimationFrame(raf_id);
+		is_animating = true;
+		const start_time = performance.now() + delay;
+
+		function step(now: number) {
+			const elapsed = now - start_time;
+			if (elapsed < 0) {
+				raf_id = requestAnimationFrame(step);
+				return;
+			}
+			const progress = Math.min(elapsed / duration, 1);
+			const eased = easeFn(progress);
+			display_value = from + (to - from) * eased;
+
+			if (progress < 1) {
+				raf_id = requestAnimationFrame(step);
+			} else {
+				display_value = to;
+				is_animating = false;
+				raf_id = 0;
+				oncomplete?.();
+			}
+		}
+
+		raf_id = requestAnimationFrame(step);
+	}
+
+	function startAnimation() {
+		if (has_animated || value == null) return;
+		has_animated = true;
+
+		if (prefers_reduced_motion) {
+			display_value = value;
+			oncomplete?.();
+			return;
+		}
+
+		animateCount(0, value);
+	}
+
+	// Kick off the count-up once the counter is both on screen and has a real
+	// value (the skeleton may still be covering it when it first intersects).
+	// The animation itself is untracked: animateCount reads AND writes raf_id
+	// (and display_value), which would otherwise re-trigger this effect
+	// forever (effect_update_depth_exceeded).
+	$effect(() => {
+		if (!has_intersected || show_skeleton) return;
+		untrack(() => startAnimation());
+	});
+
+	$effect(() => {
+		const current_target = value;
+		const animated = untrack(() => has_animated);
+		const prev = untrack(() => display_value);
+
+		if (!animated || current_target == null) return;
+
+		if (prefers_reduced_motion) {
+			display_value = current_target;
+			return;
+		}
+
+		untrack(() => animateCount(prev, current_target));
+	});
+
+	$effect(() => {
+		return () => {
+			if (raf_id) cancelAnimationFrame(raf_id);
+		};
+	});
+
+	export function restart() {
+		if (raf_id) cancelAnimationFrame(raf_id);
+		display_value = 0;
+		has_animated = false;
+		is_animating = false;
+		startAnimation();
+	}
+</script>
+
+<span
+	class={['counter', class_name].filter(Boolean).join(' ')}
+	class:skeleton={show_skeleton}
+	{id}
+	role="img"
+	aria-live="polite"
+	aria-busy={show_skeleton || undefined}
+	aria-label={aria_label_text}
+	{@attach intersectionObserver({ onintersectonce: () => (has_intersected = true) })}>
+	{#if prefix}<span class="affix prefix">{prefix}</span>{/if}
+
+	{#if show_skeleton}
+		<!-- Known affixes render for real; only the unknown number is a pill. -->
+		<span class="skeleton-pill"></span>
+	{:else}
+		<span class="value">{formatted_value}</span>
+	{/if}
+
+	{#if suffix}<span class="affix suffix">{suffix}</span>{/if}
+</span>
+
+<style>
+	.counter {
+		display: inline-flex;
+		align-items: flex-start;
+		font-variant-numeric: tabular-nums;
+		white-space: nowrap;
+		line-height: 1;
+
+		&.skeleton {
+			user-select: none;
+		}
+
+		.affix {
+			display: inline-block;
+			font-size: 0.5em;
+			line-height: 1;
+			font-weight: 500;
+			opacity: 0.85;
+			align-self: flex-start;
+			padding-top: 0.15em;
+		}
+		.prefix {
+			margin-right: 0.1em;
+		}
+		.suffix {
+			margin-left: 0.1em;
+		}
+
+		.value {
+			display: inline;
+		}
+	}
+
+	/* A digits-sized pill standing in for the unknown number. `ch` units track
+	   the counter's own font, so a 3rem stat gets a proportionally large pill. */
+	.skeleton-pill {
+		display: inline-block;
+		width: var(--counter-skeleton-width, 4ch);
+		height: 0.8em;
+		margin-top: 0.1em;
+		border-radius: var(--radius-full, 1e5px);
+		position: relative;
+		overflow: hidden;
+		background: var(--skeleton-bg, rgb(from var(--color-text, #888) r g b / 0.1));
+
+		&::after {
+			content: '';
+			position: absolute;
+			inset: 0;
+			transform: translateX(-100%);
+			background-image: linear-gradient(
+				105deg,
+				transparent 25%,
+				var(--skeleton-sheen, rgb(from var(--color-text, #888) r g b / 0.12)) 50%,
+				transparent 75%
+			);
+			animation: delight-skeleton-shimmer var(--skeleton-duration, 2.4s) ease-in-out
+				infinite;
+			animation-delay: var(--shimmer-delay, 0s);
+		}
+	}
+
+	@keyframes -global-delight-skeleton-shimmer {
+		0% {
+			transform: translateX(-100%);
+		}
+		55%,
+		100% {
+			transform: translateX(100%);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.skeleton-pill::after {
+			animation: none;
+		}
+	}
+</style>

package/dist/display/Counter.svelte.d.ts

@@ -0,0 +1,21 @@
+declare const Counter: import("svelte").Component<{
+    value?: number | undefined;
+    duration?: number;
+    delay?: number;
+    decimals?: number;
+    prefix?: string | undefined;
+    suffix?: string | undefined;
+    format?: ((value: number) => string) | undefined;
+    separator?: boolean;
+    locale?: string | undefined;
+    easing?: ((t: number) => number) | undefined;
+    skeleton?: boolean;
+    oncomplete?: (() => void) | undefined;
+    id?: string;
+    class?: string;
+}, {
+    restart: () => void;
+}, "">;
+type Counter = ReturnType<typeof Counter>;
+export default Counter;
+//# sourceMappingURL=Counter.svelte.d.ts.map

package/dist/display/Counter.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Counter.svelte.d.ts","sourceRoot":"","sources":["../../src/display/Counter.svelte.ts"],"names":[],"mappings":"AAiNA,QAAA,MAAM,OAAO;YArMoE,MAAM,GAAG,SAAS;eAAa,MAAM;YAAU,MAAM;eAAa,MAAM;aAAW,MAAM,GAAG,SAAS;aAAW,MAAM,GAAG,SAAS;aAAW,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS;gBAAc,OAAO;aAAW,MAAM,GAAG,SAAS;aAAW,KAFvS,MAAM,KAAK,MAAM,IAEuS,SAAS;eAAa,OAAO;iBAAe,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;;YAA8B,MAAM;;;MAqMtY,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/display/Expand.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { type Snippet } from 'svelte';
+
+	let {
+		/** Whether the content is expanded (visible). Bindable */
+		show = $bindable(false),
+
+		/** Additional inline styles applied to the expanding container */
+		style = '',
+
+		/** The content to expand/collapse */
+		children = undefined as undefined | Snippet,
+	} = $props();
+</script>
+
+{#if children}
+	<div class="expand" class:show inert={!show} {style}>
+		<div>{@render children()}</div>
+	</div>
+{/if}
+
+<style>
+	.expand {
+		display: grid;
+		grid-template-rows: min-content 0fr;
+		transition:
+			grid-template-rows 300ms cubic-bezier(0.23, 1, 0.32, 1),
+			opacity 200ms;
+		opacity: 0;
+		&::before {
+			content: '';
+		}
+		:global(> *) {
+			visibility: hidden;
+			overflow: hidden;
+			transition-behavior: allow-discrete;
+			transition: visibility 0ms 200ms;
+		}
+		&.show {
+			opacity: 1;
+			grid-template-rows: min-content 1fr;
+			:global(> *) {
+				visibility: visible;
+				transition: visibility 0ms;
+			}
+		}
+	}
+</style>

package/dist/display/Expand.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type Snippet } from 'svelte';
+declare const Expand: import("svelte").Component<{
+    show?: boolean;
+    style?: string;
+    children?: undefined | Snippet;
+}, {}, "show">;
+type Expand = ReturnType<typeof Expand>;
+export default Expand;
+//# sourceMappingURL=Expand.svelte.d.ts.map

package/dist/display/Expand.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expand.svelte.d.ts","sourceRoot":"","sources":["../../src/display/Expand.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AA2BtC,QAAA,MAAM,MAAM;WAxByC,OAAO;YAAU,MAAM;eAAa,SAAS,GAAG,OAAO;cAwBxD,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/display/List.svelte

@@ -0,0 +1,294 @@
+<script module lang="ts">
+	export interface ListContext {
+		/** How items in the list behave (plain text, buttons, or selection controls) */
+		type: 'button' | 'text' | 'radio' | 'checkbox' | 'toggle';
+		/** Indices of the currently selected items */
+		value: number[];
+		/** Whether the list uses dense (compact) spacing */
+		dense: boolean;
+		/** Whether the list uses comfortable (roomy) spacing */
+		comfortable: boolean;
+		/** Whether the whole list is disabled */
+		disabled: boolean;
+		/** The nesting depth of this list (drives indentation of nested lists) */
+		level: number;
+		/** Unique ID of the list element */
+		id: string;
+	}
+</script>
+
+<script lang="ts">
+	import { onFocusWithin } from '@delightstack/utilities';
+	import { getContext, setContext, type Snippet } from 'svelte';
+
+	const propId = $props.id();
+	let {
+		/** Whether the list should display in a condensed view (less padding) */
+		dense = false,
+
+		/** Whether the form should display in an expanded view (more padding) */
+		comfortable = false,
+
+		/** Whether the list sits on a subtle filled surface (the iOS "inset
+		 * grouped" look). Off by default — the list is transparent so it
+		 * composes onto any surface. Combine with `outline` for a defined card. */
+		filled = false,
+
+		/** Whether the list has a 1px outline + rounded corners (transparent
+		 * fill). Gives visible rounded corners without imposing a surface fill. */
+		outline = false,
+
+		/** Whether the buttons/checkboxes/radios should be disabled */
+		disabled = false,
+
+		/** Whether the field has been touched (and blurred) */
+		touched = $bindable(false) as boolean,
+
+		/**
+		 * The type of items in the list.
+		 * @default 'button'
+		 * `button` - A list of buttons that can be clicked
+		 * `text` - A list of non-interactive text
+		 * `radio` - A list of radio buttons (only one can be selected)
+		 * `checkbox` - A list of checkboxes (multiple can be selected)
+		 * `toggle` - A list of toggle switches (multiple can be selected)
+		 */
+		type = 'button' as 'button' | 'text' | 'radio' | 'checkbox' | 'toggle',
+
+		/** The list of indexes that have been selected (can be multiple for checkbox and only one for radio)*/
+		value = $bindable([]) as number[],
+
+		/** The css amount (@example '16px') to pad the list items in the X direction */
+		padding_x = undefined as string | undefined,
+
+		/** The css amount (@example '16px') to pad the list items in the Y direction */
+		padding_y = undefined as string | undefined,
+
+		/** Whether to show a skeleton loading placeholder instead of the items */
+		skeleton = false,
+
+		/** Number of skeleton rows to render when `skeleton` is true */
+		skeleton_count = 5,
+
+		/** The css style string added to the component from the parent */
+		style = '',
+
+		/** The ID of the select element. @defaults to a random ID */
+		id = propId,
+
+		/** Specifies a custom class name for the container element */
+		class: class_name = '',
+
+		/** The child elements to display inside the element */
+		children = undefined as undefined | Snippet,
+
+		/** Called when the field is touched */
+		ontouch = undefined as (() => void) | undefined,
+
+		/** Called when the value changes */
+		onchange = undefined as ((val: number[]) => void) | undefined,
+	} = $props();
+
+	let element = $state<HTMLElement | undefined>(undefined);
+	const parentContext = getContext<ListContext | undefined>('list');
+
+	// Emit the necessary events when the field is touched or dirty or value changes
+	$effect(() => {
+		if (touched) ontouch?.();
+	});
+
+	const context = $state({
+		type,
+		value,
+		dense,
+		comfortable,
+		disabled,
+		id,
+		...parentContext,
+		level: (parentContext?.level || 0) + 1,
+	});
+	setContext<ListContext>('list', context);
+	$effect(() => {
+		context.type = parentContext?.type ?? type;
+		context.value = parentContext?.value ?? value;
+		context.dense = parentContext?.dense ?? dense;
+		context.comfortable = parentContext?.comfortable ?? comfortable;
+		context.disabled = parentContext?.disabled ?? disabled;
+		context.id = parentContext?.id ?? id;
+		context.level = (parentContext?.level || 0) + 1;
+	});
+
+	function handleChangeEvent(e: Event) {
+		const target = e.target as HTMLInputElement;
+		if (!target || (target.type !== 'checkbox' && target.type !== 'radio')) return;
+		let hostChild: HTMLElement | null = target;
+		while (hostChild && hostChild.parentElement !== element) {
+			hostChild = hostChild.parentElement;
+		}
+		if (!hostChild || !element) return;
+		const index = Array.from(element.children).indexOf(hostChild);
+		let tempSelected = type === 'radio' ? [index] : [...value].filter((i) => i !== index);
+		if (type !== 'radio' && target.checked) {
+			tempSelected = [...tempSelected, index];
+		}
+		if (JSON.stringify(tempSelected) === JSON.stringify(value)) return;
+		value = tempSelected;
+		if (onchange) onchange(value);
+	}
+</script>
+
+{#if skeleton && !parentContext?.level}
+	<ul
+		class={['list', 'skeleton', class_name].filter(Boolean).join(' ')}
+		class:dense
+		class:comfortable
+		class:filled
+		class:outline
+		style:--list-pad-x={padding_x}
+		style:--list-pad-y={padding_y}
+		{style}
+		aria-hidden="true">
+		{#each { length: skeleton_count } as _, i}
+			<li class="skeleton-item" style:--shimmer-delay="{i * 120}ms">
+				<span class="skeleton-bar" style:width={`${55 + ((i * 37) % 35)}%`}></span>
+			</li>
+		{/each}
+	</ul>
+{:else if !parentContext?.level}
+	<ul
+		class={['list', class_name].filter(Boolean).join(' ')}
+		class:dense
+		class:comfortable
+		class:filled
+		class:outline
+		class:disabled
+		style:--list-pad-x={padding_x}
+		style:--list-pad-y={padding_y}
+		{@attach onFocusWithin({
+			onfocuswithin: () => touched || (touched = true),
+		})}
+		{style}
+		bind:this={element}
+		onchange={handleChangeEvent}>
+		{#if children}{@render children()}{/if}
+	</ul>
+{:else if children}{@render children()}{/if}
+
+<style>
+	ul {
+		--_radius: calc(var(--radius-lg) * 1.5);
+		--border-inset: 6px;
+		border-radius: var(--_radius);
+		@supports (corner-shape: superellipse(var(--squircle-ratio, 2))) {
+			corner-shape: superellipse(var(--squircle-ratio, 2));
+			border-radius: calc(var(--_radius) * var(--squircle-ratio, 2));
+		}
+		padding: 0;
+		margin: 0;
+		/* Transparent by default so the list composes onto any surface; the
+		   rounded corners only become visible with `filled` or `outline`. The
+		   item hover/active highlights stay rounded regardless. */
+		background-color: transparent;
+		perspective: 100px;
+		&.filled {
+			background-color: var(--color-bg-active);
+		}
+		&.outline {
+			border: 1px solid var(--color-border);
+		}
+		&.disabled {
+			color: var(--color-text-disabled);
+			cursor: not-allowed;
+		}
+		&.dense {
+			--border-inset: 4px;
+			--_radius: var(--radius-lg);
+
+			.skeleton-item {
+				min-height: 2.5rem;
+				padding: 0 1rem;
+			}
+		}
+		&.comfortable {
+			--border-inset: 8px;
+			--_radius: var(--radius-xl);
+
+			.skeleton-item {
+				min-height: 3.5rem;
+				padding: 0 calc(2rem + var(--list-pad-x, 0px));
+			}
+		}
+		&.skeleton {
+			/* Lists fill their container. In a definite-width parent this spans the
+		 * full width (so skeleton %-width bars and rows lay out correctly); in a
+		 * shrink-to-fit parent (e.g. a popover) it collapses to content width. */
+			width: 100%;
+		}
+
+		:global(> li:first-child) {
+			border-top-left-radius: var(--_radius);
+			border-top-right-radius: var(--_radius);
+			@supports (corner-shape: superellipse(var(--squircle-ratio, 2))) {
+				corner-shape: superellipse(var(--squircle-ratio, 2));
+				border-top-left-radius: calc(var(--_radius) * var(--squircle-ratio, 2));
+				border-top-right-radius: calc(var(--_radius) * var(--squircle-ratio, 2));
+			}
+		}
+		:global(> li:last-child) {
+			border-bottom-left-radius: var(--_radius);
+			border-bottom-right-radius: var(--_radius);
+			@supports (corner-shape: superellipse(var(--squircle-ratio, 2))) {
+				corner-shape: superellipse(var(--squircle-ratio, 2));
+				border-bottom-left-radius: calc(var(--_radius) * var(--squircle-ratio, 2));
+				border-bottom-right-radius: calc(var(--_radius) * var(--squircle-ratio, 2));
+			}
+		}
+	}
+
+	/* Mirrors the real ListItem row metrics (min-height + inline padding,
+	   incl. dense/comfortable) so the swap to loaded items doesn't shift. */
+	.skeleton-item {
+		list-style: none;
+		display: flex;
+		align-items: center;
+		min-height: 3rem;
+		padding: 0 calc(1.5rem + var(--list-pad-x, 0px));
+	}
+	.skeleton-bar {
+		height: 0.7em;
+		border-radius: var(--radius-full, 1e5px);
+		position: relative;
+		overflow: hidden;
+		background: var(--skeleton-bg, rgb(from var(--color-text, #888) r g b / 0.1));
+
+		&::after {
+			content: '';
+			position: absolute;
+			inset: 0;
+			transform: translateX(-100%);
+			background-image: linear-gradient(
+				105deg,
+				transparent 25%,
+				var(--skeleton-sheen, rgb(from var(--color-text, #888) r g b / 0.12)) 50%,
+				transparent 75%
+			);
+			animation: delight-skeleton-shimmer var(--skeleton-duration, 2.4s) ease-in-out
+				infinite;
+			animation-delay: var(--shimmer-delay, 0s);
+		}
+	}
+	@keyframes -global-delight-skeleton-shimmer {
+		0% {
+			transform: translateX(-100%);
+		}
+		55%,
+		100% {
+			transform: translateX(100%);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.skeleton-bar::after {
+			animation: none;
+		}
+	}
+</style>