@x33025/sveltely 0.1.17 → 0.1.19

package/dist/components/Library/ChipInput/ChipInput.svelte

@@ -2,7 +2,9 @@
 	import type { Snippet } from 'svelte';
 	import { tick } from 'svelte';
 	import { Plus } from '@lucide/svelte';
+	import { tooltip as tooltipAction } from '../../../actions/tooltip';
 	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+	import type { TooltipProps } from '../../../style/tooltip';
 
 	type Props = {
 		placeholder?: string;
@@ -11,6 +13,7 @@
 		disabled?: boolean;
 		action?: Snippet;
 	} & StyleProps &
+		TooltipProps &
 		Record<string, unknown>;
 
 	let {
@@ -19,6 +22,7 @@
 		selection = $bindable<string[] | undefined>(),
 		disabled = false,
 		action,
+		tooltip,
 		...restProps
 	}: Props = $props();
 
@@ -248,6 +252,7 @@
 	style={rootStyle}
 	class:chip-input-disabled={disabled}
 	aria-disabled={disabled}
+	use:tooltipAction={tooltip}
 	{...props}
 >
 	{#each tags as tag, index (tag)}
@@ -332,7 +337,7 @@
 		box-sizing: border-box;
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius);
-		background: var(--sveltely-inactive-color);
+		background: var(--sveltely-control-inactive-color);
 		color: black;
 		min-height: var(--chip-input-control-height);
 		padding: var(--chip-input-padding-y) var(--chip-input-padding-x);
@@ -345,13 +350,8 @@
 		border-color: var(--sveltely-border-color);
 	}
 
-	.chip:hover,
 	.chip-hovered {
-		background: var(--sveltely-hover-color);
-	}
-
-	.chip-input-field:hover {
-		background: var(--sveltely-hover-color);
+		background: color-mix(in oklab, var(--sveltely-control-active-color) 5%, transparent);
 	}
 
 	.chip-input-disabled {
@@ -363,10 +363,6 @@
 		opacity: 0.5;
 	}
 
-	.chip-input-disabled .chip:hover {
-		background: var(--sveltely-hover-color);
-	}
-
 	.chip-input-action {
 		padding: 0;
 		width: var(--chip-input-control-height);

package/dist/components/Library/ChipInput/ChipInput.svelte.d.ts

@@ -1,12 +1,13 @@
 import type { Snippet } from 'svelte';
 import { type StyleProps } from '../../../style/surface';
+import type { TooltipProps } from '../../../style/tooltip';
 type Props = {
     placeholder?: string;
     tags: string[];
     selection?: string[];
     disabled?: boolean;
     action?: Snippet;
-} & StyleProps & Record<string, unknown>;
-declare const ChipInput: import("svelte").Component<Props, {}, "tags" | "selection">;
+} & StyleProps & TooltipProps & Record<string, unknown>;
+declare const ChipInput: import("svelte").Component<Props, {}, "selection" | "tags">;
 type ChipInput = ReturnType<typeof ChipInput>;
 export default ChipInput;

package/dist/components/Library/Dropdown/Action.svelte

@@ -50,7 +50,7 @@
 	}
 
 	.dropdown-action:hover {
-		background: var(--sveltely-hover-color);
+		background: color-mix(in oklab, var(--sveltely-control-active-color) 5%, transparent);
 	}
 
 	.dropdown-action:disabled {

package/dist/components/Library/Dropdown/Dropdown.demo.svelte

@@ -89,7 +89,7 @@
 
 <div class="grid w-full gap-4 md:grid-cols-2">
 	<div class="vstack gap-2">
-		<p class="text-sm font-medium text-[var(--sveltely-primary-color)]">Default trigger</p>
+		<p class="text-sm font-medium text-[var(--sveltely-text-primary-color)]">Default trigger</p>
 		<Dropdown bind:value={status} placeholder="Choose status" selectedLabel={selectedStatusLabel}>
 			<Dropdown.Section label="Publishing">
 				<Dropdown.Item value="draft">Draft</Dropdown.Item>
@@ -103,13 +103,13 @@
 				<Dropdown.Item value="private" disabled>Private</Dropdown.Item>
 			</Dropdown.Section>
 		</Dropdown>
-		<p class="text-xs text-[var(--sveltely-secondary-color)]">
+		<p class="text-xs text-[var(--sveltely-text-secondary-color)]">
 			Selected: {selectedStatusLabel ?? 'none'}
 		</p>
 	</div>
 
 	<div class="vstack gap-2">
-		<p class="text-sm font-medium text-[var(--sveltely-primary-color)]">
+		<p class="text-sm font-medium text-[var(--sveltely-text-primary-color)]">
 			Custom trigger and rich rows
 		</p>
 		<Dropdown
@@ -121,17 +121,17 @@
 				<Dropdown.Trigger>
 					{#if selectedWebsite}
 						<span class="hstack min-w-0 items-center gap-2">
-							<span class="truncate text-[var(--sveltely-primary-color)]"
+							<span class="truncate text-[var(--sveltely-text-primary-color)]"
 								>{selectedWebsite.name}</span
 							>
 							{#if selectedWebsite.domain}
-								<span class="truncate text-xs text-[var(--sveltely-secondary-color)]">
+								<span class="truncate text-xs text-[var(--sveltely-text-secondary-color)]">
 									{selectedWebsite.domain}
 								</span>
 							{/if}
 						</span>
 					{:else}
-						<span class="text-[var(--sveltely-secondary-color)]">Select website</span>
+						<span class="text-[var(--sveltely-text-secondary-color)]">Select website</span>
 					{/if}
 				</Dropdown.Trigger>
 			{/snippet}
@@ -148,7 +148,7 @@
 			</Dropdown.Item>
 			<Dropdown.Section label="Websites">
 				{#if filteredWebsites.length === 0}
-					<div class="px-2 py-1 text-sm text-[var(--sveltely-secondary-color)]">
+					<div class="px-2 py-1 text-sm text-[var(--sveltely-text-secondary-color)]">
 						No websites found.
 					</div>
 				{:else}
@@ -166,7 +166,7 @@
 											<div class="vstack min-w-0 gap-0.5">
 												<span class="truncate">{website.name}</span>
 												{#if website.domain}
-													<span class="truncate text-xs text-[var(--sveltely-secondary-color)]"
+													<span class="truncate text-xs text-[var(--sveltely-text-secondary-color)]"
 														>{website.domain}</span
 													>
 												{/if}
@@ -174,7 +174,7 @@
 											{#if selected}
 												<CheckIcon
 													size={14}
-													class="shrink-0 text-[var(--sveltely-primary-color)]"
+													class="shrink-0 text-[var(--sveltely-text-primary-color)]"
 												/>
 											{/if}
 										{/snippet}
@@ -186,6 +186,6 @@
 				{/if}
 			</Dropdown.Section>
 		</Dropdown>
-		<p class="text-xs text-[var(--sveltely-secondary-color)]">Actions clicked: {actionCount}</p>
+		<p class="text-xs text-[var(--sveltely-text-secondary-color)]">Actions clicked: {actionCount}</p>
 	</div>
 </div>

package/dist/components/Library/Dropdown/Dropdown.svelte

@@ -121,7 +121,7 @@
 				onclick={triggerState.toggle}
 			>
 				<span class="dropdown-trigger-label">{triggerState.selectedLabel}</span>
-				<ChevronDownIcon class="size-4 text-[var(--sveltely-secondary-color)]" />
+				<ChevronDownIcon class="size-4 text-[var(--sveltely-text-secondary-color)]" />
 			</button>
 		{/if}
 	{/snippet}
@@ -151,7 +151,7 @@
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius);
 		background: var(--sveltely-background-color);
-		color: var(--sveltely-primary-color);
+		color: var(--sveltely-text-primary-color);
 		gap: var(--sveltely-gap);
 		padding: calc(var(--sveltely-padding-y) * 0.67) var(--sveltely-padding-x);
 		font-size: 0.875rem;
@@ -174,10 +174,6 @@
 		flex: 0 0 auto;
 	}
 
-	.dropdown-trigger:hover {
-		background: var(--sveltely-hover-color);
-	}
-
 	.dropdown-content {
 		--dropdown-item-padding-x: calc(var(--sveltely-padding-x) * 0.67);
 		--dropdown-item-padding-y: calc(var(--sveltely-padding-y) * 0.33);

package/dist/components/Library/Dropdown/Item.svelte

@@ -41,7 +41,7 @@
 		})}
 	{/if}
 	{#if resolvedShowCheck && selected}
-		<CheckIcon class="dropdown-item-check size-4 text-[var(--sveltely-primary-color)]" />
+		<CheckIcon class="dropdown-item-check size-4 text-[var(--sveltely-text-primary-color)]" />
 	{/if}
 </button>
 
@@ -58,7 +58,7 @@
 	}
 
 	.dropdown-item:hover {
-		background: var(--sveltely-hover-color);
+		background: color-mix(in oklab, var(--sveltely-control-active-color) 5%, transparent);
 	}
 
 	.dropdown-item:disabled {

package/dist/components/Library/Dropdown/Section.svelte

@@ -26,7 +26,7 @@
 	.dropdown-section-label {
 		padding-inline: 0.25rem;
 		padding-top: 0.25rem;
-		color: var(--sveltely-secondary-color);
+		color: var(--sveltely-text-secondary-color);
 		font-size: 0.75rem;
 		line-height: 1rem;
 		font-weight: 500;

package/dist/components/Library/Dropdown/Trigger.svelte

@@ -29,7 +29,7 @@
 			{dropdown.selectedLabel}
 		{/if}
 	</span>
-	<ChevronDownIcon class="size-4 text-[var(--sveltely-secondary-color)]" />
+	<ChevronDownIcon class="size-4 text-[var(--sveltely-text-secondary-color)]" />
 </button>
 
 <style>
@@ -40,8 +40,8 @@
 		align-items: center;
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius);
-		background: var(--sveltely-background-color);
-		color: var(--sveltely-primary-color);
+		background: var(--sveltely-control-background-color);
+		color: var(--sveltely-text-primary-color);
 		gap: var(--sveltely-gap);
 		padding: calc(var(--sveltely-padding-y) * 0.67) var(--sveltely-padding-x);
 		font-size: 0.875rem;
@@ -64,8 +64,4 @@
 	.dropdown-trigger :global(svg) {
 		flex: 0 0 auto;
 	}
-
-	.dropdown-trigger:hover {
-		background: var(--sveltely-hover-color);
-	}
 </style>

package/dist/components/Library/Image/Image.demo.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
 	export const demo = {
 		name: 'Image',
-		description: 'Responsive image display with generated placeholder and busy states.'
+		description: 'Responsive image display with icon placeholder and busy states.'
 	};
 </script>
 
@@ -13,6 +13,6 @@
 	src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=600&q=80"
 	alt="Red sneaker"
 	fit="cover"
-	class="aspect-square"
+	aspectRatio="1 / 1"
 />
-<Image busy placeholderKey="image-demo-loading" class="aspect-square" />
+<Image busy aspectRatio="1 / 1" />

package/dist/components/Library/Image/Image.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
+	import { ImageOffIcon } from '@lucide/svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLImgAttributes } from 'svelte/elements';
+	import { loader as loaderAction } from '../../../actions/loader';
 	import type { ImageFit, ImageLoading } from '../../../style/media';
-	import ImagePlaceholder from './ImagePlaceholder.svelte';
 
 	type Props = {
 		src?: string | null;
 		alt?: string;
 		fit?: ImageFit;
 		busy?: boolean;
-		placeholderKey?: string;
 		loading?: ImageLoading;
 		decoding?: HTMLImgAttributes['decoding'];
+		aspectRatio?: string;
 		children?: Snippet;
-		class?: string;
 	};
 
 	let {
@@ -21,28 +21,57 @@
 		alt = '',
 		fit = 'contain',
 		busy = false,
-		placeholderKey = 'default',
 		loading = 'lazy',
 		decoding = 'async',
-		children,
-		class: className = ''
+		aspectRatio,
+		children
 	}: Props = $props();
 
-	const showImage = $derived(Boolean(src) && !busy);
+	let imageLoaded = $state(false);
+	let imageFailed = $state(false);
+
+	$effect(() => {
+		src;
+		busy;
+		imageLoaded = false;
+		imageFailed = false;
+	});
+
+	const canRenderImage = $derived(Boolean(src) && !busy && !imageFailed);
+	const showLoader = $derived(busy || (Boolean(src) && !imageLoaded && !imageFailed));
+	const showMissingImage = $derived(!showLoader && (!src || imageFailed));
 </script>
 
-<div class={`image relative overflow-hidden bg-zinc-100 ${className}`}>
-	{#if showImage}
+<div
+	class="image relative overflow-hidden bg-zinc-100"
+	style={aspectRatio ? `aspect-ratio: ${aspectRatio}; height: auto;` : ''}
+	use:loaderAction={{
+		loading: showLoader,
+		background: 'color-mix(in oklab, var(--sveltely-text-secondary-color) 8%, transparent)',
+		color: 'color-mix(in oklab, var(--sveltely-text-secondary-color) 72%, transparent)'
+	}}
+>
+	{#if canRenderImage}
 		<img
 			{src}
 			{alt}
 			{loading}
 			{decoding}
 			draggable="false"
-			class="absolute inset-0 size-full {fit === 'cover' ? 'object-cover' : 'object-contain'}"
+			class="absolute inset-0 size-full {fit === 'cover'
+				? 'object-cover'
+				: 'object-contain'} {imageLoaded
+				? 'opacity-100'
+				: 'opacity-0'} transition-opacity duration-150"
+			onload={() => (imageLoaded = true)}
+			onerror={() => (imageFailed = true)}
 		/>
-	{:else}
-		<ImagePlaceholder seed={placeholderKey} class="absolute inset-0" />
+	{/if}
+
+	{#if showMissingImage}
+		<div class="image-fallback" aria-hidden="true">
+			<ImageOffIcon strokeWidth={1.5} />
+		</div>
 	{/if}
 
 	{#if children}
@@ -52,6 +81,22 @@
 
 <style>
 	.image {
+		width: 100%;
+		height: 100%;
 		border-radius: var(--image-border-radius, var(--sveltely-border-radius));
 	}
+
+	.image-fallback {
+		position: absolute;
+		inset: 0;
+		display: grid;
+		place-items: center;
+		background: color-mix(in oklab, var(--sveltely-text-secondary-color) 8%, transparent);
+		color: color-mix(in oklab, var(--sveltely-text-secondary-color) 72%, transparent);
+	}
+
+	.image-fallback :global(svg) {
+		width: clamp(3rem, 18%, 7rem);
+		height: clamp(3rem, 18%, 7rem);
+	}
 </style>

package/dist/components/Library/Image/Image.svelte.d.ts

@@ -6,11 +6,10 @@ type Props = {
     alt?: string;
     fit?: ImageFit;
     busy?: boolean;
-    placeholderKey?: string;
     loading?: ImageLoading;
     decoding?: HTMLImgAttributes['decoding'];
+    aspectRatio?: string;
     children?: Snippet;
-    class?: string;
 };
 declare const Image: import("svelte").Component<Props, {}, "">;
 type Image = ReturnType<typeof Image>;

package/dist/components/Library/Image/ImagePlaceholder.demo.svelte

@@ -0,0 +1,12 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'ImagePlaceholder',
+		description: 'Animated generated placeholder for custom image surfaces.'
+	};
+</script>
+
+<script lang="ts">
+	import { ImagePlaceholder } from './index';
+</script>
+
+<ImagePlaceholder seed="image-placeholder-demo" aspectRatio="4 / 3" />

package/dist/components/Library/Image/ImagePlaceholder.demo.svelte.d.ts

@@ -0,0 +1,23 @@
+export declare const demo: {
+    name: string;
+    description: string;
+};
+import { ImagePlaceholder } from './index';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ImagePlaceholder: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ImagePlaceholder = InstanceType<typeof ImagePlaceholder>;
+export default ImagePlaceholder;

package/dist/components/Library/Image/ImagePlaceholder.svelte

@@ -2,11 +2,11 @@
 	import { onMount } from 'svelte';
 
 	let {
-		class: className = '',
-		seed = 'default'
+		seed = 'default',
+		aspectRatio
 	}: {
-		class?: string;
 		seed?: string;
+		aspectRatio?: string;
 	} = $props();
 
 	const fps = 24;
@@ -199,4 +199,28 @@
 	});
 </script>
 
-<canvas bind:this={canvas} class={`block size-full ${className}`}></canvas>
+<div
+	class="image-placeholder"
+	style={aspectRatio ? `aspect-ratio: ${aspectRatio}; height: auto;` : ''}
+	aria-hidden="true"
+>
+	<canvas bind:this={canvas} class="image-placeholder-canvas"></canvas>
+</div>
+
+<style>
+	.image-placeholder {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		border-radius: var(--image-placeholder-border-radius, var(--sveltely-border-radius));
+	}
+
+	.image-placeholder-canvas {
+		position: absolute;
+		inset: 0;
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/dist/components/Library/Image/ImagePlaceholder.svelte.d.ts

@@ -1,6 +1,6 @@
 type $$ComponentProps = {
-    class?: string;
     seed?: string;
+    aspectRatio?: string;
 };
 declare const ImagePlaceholder: import("svelte").Component<$$ComponentProps, {}, "">;
 type ImagePlaceholder = ReturnType<typeof ImagePlaceholder>;

package/dist/components/Library/Image/index.d.ts

@@ -1 +1,2 @@
 export { default } from './Image.svelte';
+export { default as ImagePlaceholder } from './ImagePlaceholder.svelte';

package/dist/components/Library/Image/index.js

@@ -1 +1,2 @@
 export { default } from './Image.svelte';
+export { default as ImagePlaceholder } from './ImagePlaceholder.svelte';

package/dist/components/Library/ImageMask/BrushPreview.svelte

@@ -56,9 +56,9 @@
 		pointer-events: none;
 		border: 1.5px solid rgb(255 255 255 / 0.95);
 		border-radius: 9999px;
-		background: color-mix(in oklab, var(--sveltely-active-color) 16%, transparent);
+		background: color-mix(in oklab, var(--sveltely-control-active-color) 16%, transparent);
 		box-shadow:
-			0 0 0 1px color-mix(in oklab, var(--sveltely-active-color) 90%, transparent),
+			0 0 0 1px color-mix(in oklab, var(--sveltely-control-active-color) 90%, transparent),
 			0 1px 4px rgb(0 0 0 / 0.22);
 		will-change: transform, width, height;
 	}
@@ -88,16 +88,16 @@
 		box-sizing: border-box;
 		border-radius: 9999px;
 		border: 1.5px solid rgb(255 255 255 / 0.95);
-		background: color-mix(in oklab, var(--sveltely-active-color) 20%, transparent);
+		background: color-mix(in oklab, var(--sveltely-control-active-color) 20%, transparent);
 		box-shadow:
-			0 0 0 1px color-mix(in oklab, var(--sveltely-active-color) 95%, transparent),
+			0 0 0 1px color-mix(in oklab, var(--sveltely-control-active-color) 95%, transparent),
 			0 8px 24px rgb(0 0 0 / 0.24);
 	}
 
 	.brush-size-preview-label {
 		border-radius: 9999px;
 		background: rgb(255 255 255 / 0.88);
-		color: var(--sveltely-primary-color);
+		color: var(--sveltely-text-primary-color);
 		font-size: 0.75rem;
 		font-weight: 650;
 		line-height: 1;
@@ -113,7 +113,7 @@
 	.brush-size-preview-erase .brush-size-preview-circle {
 		background: rgb(255 255 255 / 0.2);
 		box-shadow:
-			0 0 0 1px color-mix(in oklab, var(--sveltely-active-color) 85%, transparent),
+			0 0 0 1px color-mix(in oklab, var(--sveltely-control-active-color) 85%, transparent),
 			0 8px 24px rgb(0 0 0 / 0.24);
 	}
 </style>

package/dist/components/Library/ImageMask/ImageMask.demo.svelte

@@ -1,6 +1,6 @@
 <script module lang="ts">
 	export const demo = {
-		name: 'ImageMask',
+		name: 'Image Mask',
 		description: 'Image mask editor that exposes the exported mask through bind:mask.',
 		columnSpan: 2,
 		rowSpan: 2
@@ -28,17 +28,19 @@
 		bind:tool
 		bind:clearRevision
 		fit="cover"
-		class="aspect-square"
+		aspectRatio="1 / 1"
 	/>
-	<div class="vstack gap-2 text-sm text-[var(--sveltely-secondary-color)]">
-		<div class="font-medium text-[var(--sveltely-primary-color)]">Mask</div>
+	<div class="vstack gap-2 text-sm text-[var(--sveltely-text-secondary-color)]">
+		<div class="font-medium text-[var(--sveltely-text-primary-color)]">Mask</div>
 		<div class="aspect-square overflow-hidden rounded-md border border-zinc-200 bg-black">
 			{#if mask}
 				<img src={mask.dataUrl} alt="Exported mask" class="size-full object-contain" />
 			{/if}
 		</div>
 		<label class="vstack gap-2 bg-white p-3">
-			<span class="font-medium text-[var(--sveltely-primary-color)]">Brush size {brushSize}px</span>
+			<span class="font-medium text-[var(--sveltely-text-primary-color)]"
+				>Brush size {brushSize}px</span
+			>
 			<Slider bind:value={brushSize} min={6} max={72} step={1} />
 			<div class="image-mask-controls">
 				<button
@@ -97,7 +99,7 @@
 		align-items: center;
 		justify-content: center;
 		border-radius: 9999px;
-		color: var(--sveltely-secondary-color);
+		color: var(--sveltely-text-secondary-color);
 		transition:
 			background-color 150ms,
 			color 150ms,
@@ -106,8 +108,8 @@
 
 	.image-mask-controls button:hover:not(:disabled),
 	.image-mask-controls button.active {
-		background: var(--sveltely-active-color);
-		color: var(--sveltely-background-color);
+		background: var(--sveltely-control-active-color);
+		color: var(--sveltely-control-background-color);
 	}
 
 	.image-mask-controls button:disabled {

package/dist/components/Library/ImageMask/ImageMask.svelte

@@ -11,13 +11,12 @@
 		fit = 'contain',
 		busy = false,
 		disabled = false,
-		placeholderKey = 'default',
 		loading = 'lazy',
 		brushSize = $bindable(24),
 		tool = $bindable<MaskTool>('paint'),
 		clearRevision = $bindable(0),
 		exportSize = 2048,
-		class: className = ''
+		aspectRatio
 	}: {
 		src?: string | null;
 		alt?: string;
@@ -25,22 +24,31 @@
 		fit?: ImageFit;
 		busy?: boolean;
 		disabled?: boolean;
-		placeholderKey?: string;
 		loading?: ImageLoading;
 		brushSize?: number;
 		tool?: MaskTool;
 		clearRevision?: number;
 		exportSize?: number;
-		class?: string;
+		aspectRatio?: string;
 	} = $props();
 
 	const canEdit = $derived(Boolean(src) && !busy && !disabled);
 </script>
 
-<div class={`image-mask relative ${className}`}>
-	<Image {src} {alt} {fit} {busy} {placeholderKey} {loading} class="size-full">
+<div
+	class="image-mask relative"
+	style={aspectRatio ? `aspect-ratio: ${aspectRatio}; height: auto;` : ''}
+>
+	<Image {src} {alt} {fit} {busy} {loading}>
 		{#if canEdit}
 			<MaskLayer bind:mask {tool} {brushSize} {exportSize} {disabled} {clearRevision} />
 		{/if}
 	</Image>
 </div>
+
+<style>
+	.image-mask {
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/dist/components/Library/ImageMask/ImageMask.svelte.d.ts

@@ -7,13 +7,12 @@ type $$ComponentProps = {
     fit?: ImageFit;
     busy?: boolean;
     disabled?: boolean;
-    placeholderKey?: string;
     loading?: ImageLoading;
     brushSize?: number;
     tool?: MaskTool;
     clearRevision?: number;
     exportSize?: number;
-    class?: string;
+    aspectRatio?: string;
 };
 declare const ImageMask: import("svelte").Component<$$ComponentProps, {}, "mask" | "brushSize" | "tool" | "clearRevision">;
 type ImageMask = ReturnType<typeof ImageMask>;