@14ch/svelte-ui 0.0.2 → 0.0.4

package/README.md

@@ -346,6 +346,15 @@ MIT License - see the [LICENSE](LICENSE) file for details.
 
 ## Changelog
 
+### v0.0.3
+
+- Improved text vertical alignment in Button, Fab, TabItem, Checkbox, and Radio components using `text-box-trim`
+- Text labels now appear more visually centered within their containers
+
+### v0.0.2
+
+(Previous release notes...)
+
 ### v0.0.1
 
 - Initial release

package/dist/assets/styles/import.scss

@@ -7,5 +7,7 @@
 @use './variables';
 @use './core';
 
-/* Material Symbols font (required for Icon component) */
+/* Material Symbols fonts (required for Icon component) */
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

package/dist/assets/styles/variables.scss

@@ -293,12 +293,13 @@
 	--svelte-ui-button-height-sm: var(--svelte-ui-form-height-sm);
 	--svelte-ui-button-height: var(--svelte-ui-form-height);
 	--svelte-ui-button-height-lg: var(--svelte-ui-form-height-lg);
-	--svelte-ui-button-padding-sm: 0 8px;
-	--svelte-ui-button-padding: 0 12px;
-	--svelte-ui-button-padding-lg: 0 16px;
+	--svelte-ui-button-padding-sm: 6px 8px;
+	--svelte-ui-button-padding: 8px 12px;
+	--svelte-ui-button-padding-lg: 12px 16px;
 	--svelte-ui-button-font-size-sm: 14px;
 	--svelte-ui-button-font-size: inherit;
 	--svelte-ui-button-font-size-lg: 16px;
+	--svelte-ui-button-line-height: 1.2em;
 	--svelte-ui-button-border-radius: var(--svelte-ui-border-radius);
 	--svelte-ui-button-border-radius-rounded: var(--svelte-ui-border-radius-rounded);
 	--svelte-ui-button-disabled-opacity: var(--svelte-ui-disabled-opacity);
@@ -403,15 +404,16 @@
 	--svelte-ui-checkbox-size: 16px;
 	--svelte-ui-checkbox-size-sm: 14px;
 	--svelte-ui-checkbox-size-lg: 20px;
-	--svelte-ui-checkbox-min-height: 20px;
-	--svelte-ui-checkbox-min-height-sm: 16px;
-	--svelte-ui-checkbox-min-height-lg: 24px;
+	--svelte-ui-checkbox-min-height: 1.8em;
+	--svelte-ui-checkbox-min-height-sm: 1.6em;
+	--svelte-ui-checkbox-min-height-lg: 2.2em;
 	--svelte-ui-checkbox-border-radius: 2px;
 	--svelte-ui-checkbox-border-width: 2px;
 	--svelte-ui-checkbox-gap: 8px;
 	--svelte-ui-checkbox-icon-size: 1rem;
 	--svelte-ui-checkbox-icon-size-sm: 0.875rem;
 	--svelte-ui-checkbox-icon-size-lg: 1.25rem;
+	--svelte-ui-checkbox-line-height: 1.2em;
 	--svelte-ui-checkbox-disabled-opacity: var(--svelte-ui-disabled-opacity);
 	--svelte-ui-checkbox-border-color: var(--svelte-ui-border-color);
 	--svelte-ui-checkbox-bg-checked: var(--svelte-ui-checkbox-checked-color);
@@ -437,6 +439,7 @@
 		var(--svelte-ui-switch-height-lg) - var(--svelte-ui-switch-thumb-margin) * 2
 	);
 	--svelte-ui-switch-gap: 8px;
+	--svelte-ui-switch-line-height: 1.2em;
 	--svelte-ui-switch-disabled-opacity: var(--svelte-ui-disabled-opacity);
 	--svelte-ui-switch-border-radius: var(--svelte-ui-border-radius-rounded);
 	--svelte-ui-switch-thumb-border-radius: var(--svelte-ui-border-radius-rounded);
@@ -454,12 +457,17 @@
 	--svelte-ui-radio-dot-size-lg: 10px;
 	--svelte-ui-radio-border-radius: var(--svelte-ui-border-radius-rounded);
 	--svelte-ui-radio-border-width: 2px;
-	--svelte-ui-radio-min-height: 20px;
-	--svelte-ui-radio-min-height-sm: 16px;
-	--svelte-ui-radio-min-height-lg: 24px;
-	--svelte-ui-radio-padding: 0 0 0 24px;
-	--svelte-ui-radio-padding-sm: 0 0 0 20px;
-	--svelte-ui-radio-padding-lg: 0 0 0 28px;
+	--svelte-ui-radio-min-height: 1.8em;
+	--svelte-ui-radio-min-height-sm: 1.6em;
+	--svelte-ui-radio-min-height-lg: 2.2em;
+	--svelte-ui-radio-gap: 8px;
+	--svelte-ui-radio-line-height: 1.2em;
+
+	/* CheckboxGroup */
+	--svelte-ui-checkbox-group-gap: 0 24px;
+
+	/* RadioGroup */
+	--svelte-ui-radio-group-gap: 0 24px;
 	--svelte-ui-radio-disabled-opacity: var(--svelte-ui-disabled-opacity);
 	--svelte-ui-radio-border-color: var(--svelte-ui-border-color);
 	--svelte-ui-radio-bg-checked: var(--svelte-ui-radio-checked-color);

package/dist/components/Button.svelte

@@ -41,12 +41,12 @@
 		// 状態/動作
 		disabled = false,
 		loading = false,
-		reducedMotion = false,
 
 		// ARIA/アクセシビリティ
 		ariaLabel,
 		ariaDescribedby,
 		ariaExpanded,
+		reducedMotion = false,
 
 		// フォーカスイベント
 		onfocus = () => {}, // No params for type inference
@@ -113,12 +113,12 @@
 		// 状態/動作
 		disabled?: boolean;
 		loading?: boolean;
-		reducedMotion?: boolean;
 
 		// ARIA/アクセシビリティ
 		ariaLabel?: string;
 		ariaDescribedby?: string;
 		ariaExpanded?: boolean;
+		reducedMotion?: boolean;
 
 		// フォーカスイベント
 		onfocus?: Function; // No params for type inference
@@ -502,9 +502,11 @@
 
 	.button__label {
 		width: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
+		display: block;
+		text-align: center;
+		line-height: var(--svelte-ui-button-line-height);
+		text-box-trim: trim-both;
+		text-box-edge: cap alphabetic;
 		transition-property: opacity;
 		transition-duration: var(--svelte-ui-transition-duration);
 	}

package/dist/components/Button.svelte.d.ts

@@ -22,10 +22,10 @@ type $$ComponentProps = {
     iconVariant?: IconVariant;
     disabled?: boolean;
     loading?: boolean;
-    reducedMotion?: boolean;
     ariaLabel?: string;
     ariaDescribedby?: string;
     ariaExpanded?: boolean;
+    reducedMotion?: boolean;
     onfocus?: Function;
     onblur?: Function;
     onkeydown?: Function;

package/dist/components/Checkbox.svelte

@@ -26,6 +26,8 @@
 		// 状態/動作
 		disabled = false,
 		required = false,
+
+		// ARIA/アクセシビリティ
 		reducedMotion = false,
 
 		// 入力イベント
@@ -85,6 +87,8 @@
 		// 状態/動作
 		disabled?: boolean;
 		required?: boolean;
+
+		// ARIA/アクセシビリティ
 		reducedMotion?: boolean;
 
 		// 入力イベント
@@ -330,6 +334,7 @@
 		display: flex;
 		align-items: center;
 		width: fit-content;
+		min-height: var(--svelte-ui-checkbox-min-height);
 		contain: layout;
 	}
 
@@ -344,14 +349,15 @@
 
 	/* Label */
 	.checkbox__label {
-		display: flex;
-		align-items: center;
-		min-height: var(--svelte-ui-checkbox-min-height);
+		display: block;
 		padding-left: var(--svelte-ui-checkbox-gap);
 		white-space: nowrap;
 		font-size: inherit;
 		color: inherit;
+		line-height: var(--svelte-ui-checkbox-line-height);
 		cursor: pointer;
+		text-box-trim: trim-both;
+		text-box-edge: cap alphabetic;
 	}
 
 	/* Checkbox box */

package/dist/components/CheckboxGroup.svelte

@@ -11,9 +11,17 @@
 
 		// スタイル/レイアウト
 		direction = 'vertical',
-		gap = '0',
+		gap,
 		wrap = false,
 		minOptionWidth,
+		size = 'medium',
+
+		// 状態/動作
+		disabled = false,
+		required = false,
+
+		// ARIA/アクセシビリティ
+		reducedMotion = false,
 
 		// 入力イベント
 		onchange = () => {} // No params for type inference
@@ -27,6 +35,14 @@
 		gap?: string | number;
 		wrap?: boolean;
 		minOptionWidth?: string | number;
+		size?: 'small' | 'medium' | 'large';
+
+		// 状態/動作
+		disabled?: boolean;
+		required?: boolean;
+
+		// ARIA/アクセシビリティ
+		reducedMotion?: boolean;
 
 		// 入力イベント
 		onchange?: (value: OptionValue[]) => void;
@@ -44,23 +60,30 @@
 		onchange(value);
 	};
 
-	const gapStyle = getStyleFromNumber(gap);
+	const gapStyle = gap !== undefined ? getStyleFromNumber(gap) : undefined;
 
 	const minOptionWidthStyle = getStyleFromNumber(minOptionWidth);
 </script>
 
 <ul
 	class="checkbox-group"
-	style="--flex-direction: {direction === 'vertical' ? 'column' : 'row'};
-    --gap: {gapStyle};
-    --wrap: {wrap ? 'wrap' : 'none'};
-    --min-option-width: {minOptionWidthStyle}
+	style="--svelte-ui-checkbox-group-flex-direction: {direction === 'vertical' ? 'column' : 'row'};
+    {gapStyle ? `--svelte-ui-checkbox-group-gap: ${gapStyle};` : ''}
+    --svelte-ui-checkbox-group-wrap: {wrap ? 'wrap' : 'none'};
+    --svelte-ui-checkbox-group-min-option-width: {minOptionWidthStyle}
     "
 >
 	{#each options as option (option.value)}
 		{#if localValues[option.value] !== undefined}
 			<li class="checkbox-group__option">
-				<Checkbox bind:value={localValues[option.value]} onchange={handleChange}>
+				<Checkbox
+					bind:value={localValues[option.value]}
+					{size}
+					{disabled}
+					{required}
+					{reducedMotion}
+					onchange={handleChange}
+				>
 					{option.label}
 				</Checkbox>
 			</li>
@@ -71,12 +94,12 @@
 <style>
 	.checkbox-group {
 		display: flex;
-		flex-direction: var(--flex-direction);
-		gap: var(--gap);
-		flex-wrap: var(--wrap);
+		flex-direction: var(--svelte-ui-checkbox-group-flex-direction);
+		gap: var(--svelte-ui-checkbox-group-gap);
+		flex-wrap: var(--svelte-ui-checkbox-group-wrap);
 	}
 
 	.checkbox-group__option {
-		min-width: var(--min-option-width);
+		min-width: var(--svelte-ui-checkbox-group-min-option-width);
 	}
 </style>

package/dist/components/CheckboxGroup.svelte.d.ts

@@ -6,6 +6,10 @@ type $$ComponentProps = {
     gap?: string | number;
     wrap?: boolean;
     minOptionWidth?: string | number;
+    size?: 'small' | 'medium' | 'large';
+    disabled?: boolean;
+    required?: boolean;
+    reducedMotion?: boolean;
     onchange?: (value: OptionValue[]) => void;
 };
 declare const CheckboxGroup: import("svelte").Component<$$ComponentProps, {}, "value">;

package/dist/components/Dialog.svelte

@@ -115,7 +115,7 @@
 		return styles.join('; ');
 	});
 
-	const dialogClasses = $derived(['dialog', scrollable && 'scrollable'].filter(Boolean).join(' '));
+	const dialogClasses = $derived([scrollable && 'scrollable'].filter(Boolean).join(' ')); // dialogクラス自体はcustomClassに含めない
 
 	const ariaLabelledby = $derived(title ? 'dialog-title' : undefined);
 	const ariaDescribedbyValue = $derived(
@@ -136,7 +136,7 @@
 	customStyles={dialogStyles}
 	id={id ? `${id}-modal` : undefined}
 >
-	<div class="dialog">
+	<div class="dialog {scrollable ? 'scrollable' : ''}">
 		{#if header || title}
 			<div class="dialog__header">
 				{#if header}
@@ -166,11 +166,7 @@
 	</div>
 </Modal>
 
-<style>:global(.dialog) {
-  color: var(--svelte-ui-dialog-title-color);
-}
-
-.dialog {
+<style>.dialog {
   display: flex;
   flex-direction: column;
   justify-content: stretch;
@@ -218,28 +214,15 @@
   border-bottom: 1px solid var(--svelte-ui-border-weak-color);
 }
 
-:global(.dialog.scrollable) .dialog__header {
+:global(.scrollable) .dialog__header {
   margin-bottom: 0;
   border-bottom: solid var(--svelte-ui-border-width, 1px) var(--svelte-ui-border-weak-color);
 }
-:global(.dialog.scrollable) .dialog__body {
+:global(.scrollable) .dialog__body {
   flex-shrink: 1;
   padding: var(--svelte-ui-dialog-body-padding);
   overflow: auto;
 }
-:global(.dialog.scrollable) .dialog__footer {
+:global(.scrollable) .dialog__footer {
   border-top: solid var(--svelte-ui-border-width, 1px) var(--svelte-ui-border-weak-color);
-}
-
-/* Screen reader only content */
-:global(.sr-only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
 }</style>

package/dist/components/Drawer.svelte

@@ -123,7 +123,9 @@
 	});
 
 	const drawerClasses = $derived(
-		['drawer', `drawer--${position}`, scrollable && 'drawer--scrollable'].filter(Boolean).join(' ')
+		['drawer-wrapper', `drawer-wrapper--${position}`, scrollable && 'drawer-wrapper--scrollable']
+			.filter(Boolean)
+			.join(' ')
 	);
 
 	const ariaLabelledby = $derived(title ? 'drawer-title' : undefined);
@@ -176,7 +178,7 @@
 </Modal>
 
 <style>@charset "UTF-8";
-:global(.drawer) {
+:global(.drawer-wrapper) {
   width: 100%;
   height: 100%;
   min-height: 100%;
@@ -186,7 +188,7 @@
   color: var(--svelte-ui-drawer-title-color);
 }
 
-:global(.drawer:-internal-dialog-in-top-layer) {
+:global(.drawer-wrapper:-internal-dialog-in-top-layer) {
   max-height: none;
   max-width: none;
   width: 100%;
@@ -257,31 +259,31 @@
     transform: translateX(-50%);
   }
 }
-:global(.drawer--right.fade-in) {
+:global(.drawer-wrapper--right.fade-in) {
   animation: fadeInFromRight var(--svelte-ui-transition-duration, 300ms) forwards;
 }
 
-:global(.drawer--right.fade-in::backdrop) {
+:global(.drawer-wrapper--right.fade-in::backdrop) {
   animation: fadeIn var(--svelte-ui-transition-duration, 300ms) forwards;
 }
 
-:global(.drawer--left.fade-in) {
+:global(.drawer-wrapper--left.fade-in) {
   animation: fadeInFromLeft var(--svelte-ui-transition-duration, 300ms) forwards;
 }
 
-:global(.drawer--left.fade-in::backdrop) {
+:global(.drawer-wrapper--left.fade-in::backdrop) {
   animation: fadeIn var(--svelte-ui-transition-duration, 300ms) forwards;
 }
 
-:global(.drawer--left.fade-out) {
+:global(.drawer-wrapper--left.fade-out) {
   animation: fadeOutToLeft var(--svelte-ui-transition-duration, 300ms) forwards;
 }
 
-:global(.drawer--right.fade-out) {
+:global(.drawer-wrapper--right.fade-out) {
   animation: fadeOutToRight var(--svelte-ui-transition-duration, 300ms) forwards;
 }
 
-:global(.drawer.fade-out::backdrop) {
+:global(.drawer-wrapper.fade-out::backdrop) {
   animation: fadeOut var(--svelte-ui-transition-duration, 300ms) forwards;
 }
 
@@ -356,28 +358,16 @@
 
 /* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {
-  :global(.drawer.fade-in),
-  :global(.drawer.fade-in::backdrop),
-  :global(.drawer.fade-out),
-  :global(.drawer.fade-out::backdrop),
-  :global(.drawer--left.fade-in),
-  :global(.drawer--left.fade-in::backdrop),
-  :global(.drawer--left.fade-out),
-  :global(.drawer--right.fade-in),
-  :global(.drawer--right.fade-in::backdrop),
-  :global(.drawer--right.fade-out) {
+  :global(.drawer-wrapper.fade-in),
+  :global(.drawer-wrapper.fade-in::backdrop),
+  :global(.drawer-wrapper.fade-out),
+  :global(.drawer-wrapper.fade-out::backdrop),
+  :global(.drawer-wrapper--left.fade-in),
+  :global(.drawer-wrapper--left.fade-in::backdrop),
+  :global(.drawer-wrapper--left.fade-out),
+  :global(.drawer-wrapper--right.fade-in),
+  :global(.drawer-wrapper--right.fade-in::backdrop),
+  :global(.drawer-wrapper--right.fade-out) {
     animation-duration: 0.01s;
   }
-}
-/* Screen reader only content */
-:global(.sr-only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
 }</style>

package/dist/components/Fab.svelte

@@ -452,8 +452,12 @@
   justify-content: center;
 }
 .fab .fab__label {
+  display: block;
   white-space: nowrap;
   user-select: none;
+  text-align: center;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
   transition-property: opacity;
   transition-duration: var(--svelte-ui-transition-duration);
 }

package/dist/components/FileUploader.svelte

@@ -230,6 +230,11 @@
 			value = dataTransfer.files;
 			onchange(value);
 		}
+
+		// input要素をリセット
+		if (fileInputRef) {
+			fileInputRef.value = '';
+		}
 	};
 
 	export const reset = () => {
@@ -252,8 +257,8 @@
 	class:file-uploader--hover={isHover}
 	class:rounded
 	style="
-		--file-uploader-width: {widthStyle};
-		--file-uploader-height: {height}px
+		--svelte-ui-file-uploader-width: {widthStyle};
+		--svelte-ui-file-uploader-height: {height}px
 	"
 	data-testid="file-uploader"
 	onclick={handleClick}
@@ -365,8 +370,8 @@
 		align-items: center;
 		gap: 16px;
 		position: relative;
-		width: var(--file-uploader-width, 100%);
-		height: var(--file-uploader-height);
+		width: var(--svelte-ui-file-uploader-width, 100%);
+		height: var(--svelte-ui-file-uploader-height);
 		min-height: 100px;
 		padding: 16px;
 		background-color: var(--svelte-ui-file-uploader-bg);

package/dist/components/Icon.svelte

@@ -111,11 +111,9 @@
 
 <style>
 	.material-symbols-outlined,
-	.material-symbols-filled,
 	.material-symbols-rounded,
 	.material-symbols-sharp {
 		display: block;
-		font-family: 'Material Symbols Outlined';
 		font-size: inherit;
 		color: inherit;
 		line-height: inherit;
@@ -129,6 +127,18 @@
 		transition-timing-function: ease;
 	}
 
+	.material-symbols-outlined {
+		font-family: 'Material Symbols Outlined';
+	}
+
+	.material-symbols-rounded {
+		font-family: 'Material Symbols Rounded';
+	}
+
+	.material-symbols-sharp {
+		font-family: 'Material Symbols Sharp';
+	}
+
 	/* font-variation-settings are controlled via inline styles for dynamic props */
 
 	.icon-fallback-text {

package/dist/components/IconButton.svelte

@@ -47,12 +47,12 @@
 		disabled = false,
 		loading = false,
 		pressed = false,
-		reducedMotion = false,
 
 		// ARIA/アクセシビリティ
 		ariaLabel,
 		ariaDescribedby,
 		ariaPressed,
+		reducedMotion = false,
 
 		// フォーカスイベント
 		onfocus = () => {}, // No params for type inference
@@ -125,12 +125,12 @@
 		disabled?: boolean;
 		loading?: boolean;
 		pressed?: boolean;
-		reducedMotion?: boolean;
 
 		// ARIA/アクセシビリティ
 		ariaLabel: string;
 		ariaDescribedby?: string;
 		ariaPressed?: boolean;
+		reducedMotion?: boolean;
 
 		// フォーカスイベント
 		onfocus?: Function; // No params for type inference

package/dist/components/IconButton.svelte.d.ts

@@ -26,10 +26,10 @@ type $$ComponentProps = {
     disabled?: boolean;
     loading?: boolean;
     pressed?: boolean;
-    reducedMotion?: boolean;
     ariaLabel: string;
     ariaDescribedby?: string;
     ariaPressed?: boolean;
+    reducedMotion?: boolean;
     onfocus?: Function;
     onblur?: Function;
     onkeydown?: Function;

package/dist/components/ImageUploader.svelte

@@ -27,6 +27,7 @@
 		width = '120px',
 		height = '120px',
 		rounded = false,
+		previewStyle = 'framed',
 
 		// アイコン系
 		icon = 'add_photo_alternate',
@@ -39,7 +40,7 @@
 		removeFileAriaLabel = t('imageUploader.removeFile'),
 
 		// 状態/動作
-		adaptiveSize = false,
+		previewAdaptive = false,
 
 		// 入力イベント
 		onchange = () => {}, // No params for type inference
@@ -75,11 +76,11 @@
 		accept?: string;
 
 		// スタイル/レイアウト
-
 		width?: string | number;
 		height?: string | number;
 		rounded?: boolean;
-		adaptiveSize?: boolean;
+		previewStyle?: 'plain' | 'framed';
+		previewAdaptive?: boolean;
 
 		// アイコン系
 		icon?: string;
@@ -250,6 +251,11 @@
 			value = dataTransfer.files;
 			onchange(value);
 		}
+
+		// input要素をリセット
+		if (fileInputRef) {
+			fileInputRef.value = '';
+		}
 	};
 
 	const removeFile = (index: number) => {
@@ -307,8 +313,9 @@
 		{file}
 		{width}
 		{height}
-		{adaptiveSize}
+		{previewAdaptive}
 		{rounded}
+		{previewStyle}
 		id={id ? `${id}-preview-${index}` : undefined}
 		{removeFileAriaLabel}
 		onRemove={() => removeFile(index)}
@@ -319,17 +326,19 @@
 	class="image-uploader"
 	class:image-uploader--multiple={multiple}
 	class:image-uploader--rounded={rounded}
-	class:image-uploader--adaptive={adaptiveSize}
+	class:image-uploader--adaptive={previewAdaptive}
 	style="
-			--image-uploader-button-width: {previewWidthStyle};
-			--image-uploader-button-height: {previewHeightStyle};
+			--svelte-ui-image-uploader-button-width: {previewWidthStyle};
+			--svelte-ui-image-uploader-button-height: {previewHeightStyle};
 		"
 	data-testid="image-uploader"
 >
 	{#if multiple}
-		{#each value as file, index}
-			{@render preview(file, index)}
-		{/each}
+		{#if value}
+			{#each value as file, index}
+				{@render preview(file, index)}
+			{/each}
+		{/if}
 	{/if}
 	<button
 		bind:this={dropAreaRef}
@@ -427,8 +436,8 @@
 		align-items: center;
 		position: relative;
 		max-width: 100%;
-		min-width: var(--image-uploader-button-width);
-		min-height: var(--image-uploader-button-height);
+		min-width: var(--svelte-ui-image-uploader-button-width);
+		min-height: var(--svelte-ui-image-uploader-button-height);
 		padding: 16px;
 		background-color: var(--svelte-ui-form-bg);
 		border-radius: var(--svelte-ui-border-radius);

package/dist/components/ImageUploader.svelte.d.ts

@@ -9,7 +9,8 @@ type $$ComponentProps = {
     width?: string | number;
     height?: string | number;
     rounded?: boolean;
-    adaptiveSize?: boolean;
+    previewStyle?: 'plain' | 'framed';
+    previewAdaptive?: boolean;
     icon?: string;
     iconSize?: number;
     iconFilled?: boolean;