@x33025/sveltely 0.1.17 → 0.1.19

package/dist/actions/LoaderOverlay.svelte

@@ -4,15 +4,39 @@
 
 	type Props = {
 		text: string;
+		background?: string;
+		color?: string;
+		fontSize?: number;
 	};
 
-	let { text }: Props = $props();
+	let { text, background, color, fontSize }: Props = $props();
+
+	const toRem = (value: number | undefined) =>
+		value === undefined ? undefined : `${value / 10}rem`;
+
+	const overlayStyle = $derived.by(() =>
+		[
+			background ? `--sveltely-loader-background: ${background};` : '',
+			color ? `--sveltely-loader-color: ${color};` : '',
+			fontSize !== undefined ? `--sveltely-loader-font-size: ${toRem(fontSize)};` : ''
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
 </script>
 
-<div class="sveltely-loader-overlay" role="status" aria-live="polite" aria-label={text}>
+<div
+	class="sveltely-loader-overlay"
+	role="status"
+	aria-live="polite"
+	aria-label={text || 'Loading'}
+	style={overlayStyle}
+>
 	<VStack align="center" justify="center" gap={5}>
-		<Spinner />
-		<span class="sveltely-loader-text">{text}</span>
+		<Spinner size="calc(var(--sveltely-loader-font-size) * 1.143)" />
+		{#if text}
+			<span class="sveltely-loader-text">{text}</span>
+		{/if}
 	</VStack>
 </div>
 
@@ -25,8 +49,9 @@
 		align-items: center;
 		justify-content: center;
 		border-radius: inherit;
-		background: var(--sveltely-background-color, white);
-		color: var(--sveltely-primary-color, black);
+		background: var(--sveltely-loader-background, var(--sveltely-background-color, white));
+		color: var(--sveltely-loader-color, var(--sveltely-text-primary-color, black));
+		font-size: var(--sveltely-loader-font-size, var(--sveltely-font-size, 1rem));
 		padding: var(--sveltely-padding-y, 0.75rem) var(--sveltely-padding-x, 0.75rem);
 		pointer-events: auto;
 		text-align: center;
@@ -35,8 +60,8 @@
 	.sveltely-loader-text {
 		max-width: 100%;
 		overflow: hidden;
-		color: var(--sveltely-secondary-color, currentColor);
-		font-size: calc(var(--sveltely-font-size, 1rem) * 0.875);
+		color: var(--sveltely-loader-text-color, currentColor);
+		font-size: var(--sveltely-loader-font-size, var(--sveltely-font-size, 1rem));
 		line-height: 1.25;
 		text-overflow: ellipsis;
 		white-space: nowrap;

package/dist/actions/LoaderOverlay.svelte.d.ts

@@ -1,5 +1,8 @@
 type Props = {
     text: string;
+    background?: string;
+    color?: string;
+    fontSize?: number;
 };
 declare const LoaderOverlay: import("svelte").Component<Props, {}, "">;
 type LoaderOverlay = ReturnType<typeof LoaderOverlay>;

package/dist/actions/loader.d.ts

@@ -5,6 +5,9 @@ export type LoaderOptions = LoaderTrigger | [text: string, loading: LoaderTrigge
     loading?: LoaderTrigger;
     active?: LoaderTrigger;
     promise?: PromiseLike<unknown> | null;
+    background?: string;
+    color?: string;
+    fontSize?: number;
     disabled?: boolean;
 };
 export declare const loader: Action<HTMLElement, LoaderOptions>;

package/dist/actions/loader.js

@@ -8,21 +8,30 @@ const isPromiseLike = (value) => typeof value === 'object' &&
 const parseOptions = (value = false) => {
     if (Array.isArray(value)) {
         return {
-            text: value[0] || DEFAULT_TEXT,
+            text: value[0] ?? DEFAULT_TEXT,
             loading: value[1],
+            background: undefined,
+            color: undefined,
+            fontSize: undefined,
             disabled: false
         };
     }
     if (typeof value === 'object' && value !== null && !isPromiseLike(value)) {
         return {
-            text: value.text || DEFAULT_TEXT,
+            text: value.text ?? '',
             loading: value.loading ?? value.active ?? value.promise ?? false,
+            background: value.background,
+            color: value.color,
+            fontSize: value.fontSize,
             disabled: value.disabled ?? false
         };
     }
     return {
         text: DEFAULT_TEXT,
         loading: value,
+        background: undefined,
+        color: undefined,
+        fontSize: undefined,
         disabled: false
     };
 };
@@ -37,7 +46,7 @@ export const loader = (node, initialOptions = false) => {
     const originalAriaBusy = node.getAttribute('aria-busy');
     let options = parseOptions(initialOptions);
     let overlay = null;
-    let overlayText = '';
+    let overlayKey = '';
     let promiseVersion = 0;
     let appliedPosition = false;
     const ensureHostPosition = () => {
@@ -57,17 +66,21 @@ export const loader = (node, initialOptions = false) => {
     const show = () => {
         ensureHostPosition();
         node.setAttribute('aria-busy', 'true');
-        if (overlay && overlayText === options.text) {
+        const nextOverlayKey = [options.text, options.background, options.color, options.fontSize].join('\0');
+        if (overlay && overlayKey === nextOverlayKey) {
             return;
         }
         if (overlay) {
             void unmount(overlay);
         }
-        overlayText = options.text;
+        overlayKey = nextOverlayKey;
         overlay = mount(LoaderOverlay, {
             target: node,
             props: {
-                text: options.text
+                text: options.text,
+                background: options.background,
+                color: options.color,
+                fontSize: options.fontSize
             }
         });
     };
@@ -75,7 +88,7 @@ export const loader = (node, initialOptions = false) => {
         if (overlay) {
             void unmount(overlay);
             overlay = null;
-            overlayText = '';
+            overlayKey = '';
         }
         if (originalAriaBusy === null) {
             node.removeAttribute('aria-busy');

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
 	export const demo = {
-		name: 'AnimatedNumber',
+		name: 'Animated Number',
 		description: 'Spring-driven numeric transitions.'
 	};
 </script>
@@ -17,14 +17,8 @@
 </script>
 
 <div class="vstack center gap-3">
-	<div class="text-3xl font-semibold text-[var(--sveltely-primary-color)]">
+	<div class="text-3xl font-semibold text-[var(--sveltely-text-primary-color)]">
 		<AnimatedNumber {value} />
 	</div>
-	<Button
-		label="Change number"
-		background="var(--sveltely-active-color)"
-		borderColor="var(--sveltely-active-color)"
-		color="var(--sveltely-background-color)"
-		onclick={bump}
-	/>
+	<Button label="Change number" onclick={bump} />
 </div>

package/dist/components/Library/ArticleEditor/ArticleEditor.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import VStack from '../VStack';
 	import TextEditor from '../TextEditor';
-	import ArticleBlockFAQ from './ArticleBlockFAQ.svelte';
 	import ArticleEditorBody from './ArticleEditorBody.svelte';
 	import ArticleEditorHeader from './ArticleEditorHeader.svelte';
+	import FAQ from './Blocks/FAQ.svelte';
 	import type { BlockInsertKind, BlockTextFormat } from './articleEditor.svelte.js';
 	import type { ArticleEditorArticle, BlockDraft } from './types.js';
 
@@ -162,6 +162,7 @@
 			<VStack gap={12.5}>
 				{#each faqBlocks as block (block.id)}
 					<TextEditor
+						as="h2"
 						autosize
 						value={block.text ?? 'Frequently asked questions'}
 						rows={1}
@@ -169,10 +170,9 @@
 							onUpdateBlock(block.id, {
 								text: (event.currentTarget as HTMLTextAreaElement).value
 							})}
-						className="text-2xl leading-tight font-semibold tracking-[-0.025em] text-zinc-950 placeholder:text-zinc-300"
 						placeholder="FAQ title"
 					/>
-					<ArticleBlockFAQ {block} onUpdateItem={onUpdateFAQItem} />
+					<FAQ {block} onUpdateItem={onUpdateFAQItem} />
 				{/each}
 			</VStack>
 		</section>

package/dist/components/Library/ArticleEditor/ArticleEditorBody.svelte

@@ -2,14 +2,13 @@
 	import VStack from '../VStack';
 	import type { BlockInsertKind, BlockTextFormat } from './articleEditor.svelte.js';
 	import type { BlockDraft } from './types.js';
-	import ArticleBlockCode from './ArticleBlockCode.svelte';
-	import ArticleBlockFallback from './ArticleBlockFallback.svelte';
-	import ArticleBlockHeading from './ArticleBlockHeading.svelte';
-	import ArticleBlockImage from './ArticleBlockImage.svelte';
-	import ArticleBlockList from './ArticleBlockList.svelte';
-	import ArticleBlockParagraph from './ArticleBlockParagraph.svelte';
+	import Code from './Blocks/Code.svelte';
+	import Heading from './Blocks/Heading.svelte';
+	import Image from './Blocks/Image.svelte';
+	import List from './Blocks/List.svelte';
+	import Paragraph from './Blocks/Paragraph.svelte';
+	import Table from './Blocks/Table.svelte';
 	import ArticleBlockShell from './ArticleBlockShell.svelte';
-	import ArticleBlockTable from './ArticleBlockTable.svelte';
 
 	let {
 		draftTitle,
@@ -237,7 +236,7 @@
 	});
 </script>
 
-<VStack gap={5} paddingX={0} paddingY={0}>
+<VStack gap={5}>
 	{#each articleBlocks as block (block.id)}
 		{@const dropPlacement = dropPlacementFor(block.id)}
 		{@const textFormat = blockTextFormat(block)}
@@ -257,72 +256,58 @@
 			onDragStart={handleBlockDragStart}
 			onDragEnd={handleBlockDragEnd}
 		>
-			{#snippet children()}
-				{#if block.type === 'heading'}
-					<ArticleBlockHeading
-						{block}
-						onUpdate={onUpdateBlock}
-						{onCreateParagraphAfter}
-						{onMergeBlockWithPrevious}
-						{onRemoveBlock}
-						shouldFocus={focusTarget === block.id}
-						focusPosition={focusTarget === block.id ? focusPosition : null}
-						onFocused={onFocusHandled}
-					/>
-				{:else if block.type === 'paragraph'}
-					<ArticleBlockParagraph
-						{block}
-						onUpdate={onUpdateBlock}
-						{onCreateParagraphAfter}
-						{onMergeBlockWithPrevious}
-						{onRemoveBlock}
-						{onConvertToList}
-						shouldFocus={focusTarget === block.id}
-						focusPosition={focusTarget === block.id ? focusPosition : null}
-						onFocused={onFocusHandled}
-					/>
-				{:else if block.type === 'bullet_list' || block.type === 'list' || block.type === 'numbered_list'}
-					<ArticleBlockList
-						{block}
-						onUpdateItem={onUpdateListItem}
-						onInsertItemAfter={onInsertListItemAfter}
-						{onMergeListItemWithPrevious}
-						{onCreateParagraphAfter}
-						{onRemoveListItem}
-						focusItemIndex={focusTarget?.startsWith(`${block.id}:`)
-							? Number(focusTarget.split(':')[1])
-							: null}
-						focusPosition={focusTarget?.startsWith(`${block.id}:`) ? focusPosition : null}
-						onFocused={onFocusHandled}
-					/>
-				{:else if block.type === 'image'}
-					<ArticleBlockImage {block} titleFallback={draftTitle} onUpdate={onUpdateBlock} />
-				{:else if block.type === 'table'}
-					<ArticleBlockTable
-						{block}
-						onUpdateHeader={onUpdateTableHeader}
-						onUpdateCell={onUpdateTableCell}
-						onAddColumn={onAddTableColumn}
-						onAddRow={onAddTableRow}
-						onRemoveColumn={onRemoveTableColumn}
-						onRemoveRow={onRemoveTableRow}
-					/>
-				{:else if block.type === 'code'}
-					<ArticleBlockCode {block} onUpdate={onUpdateBlock} />
-				{:else}
-					<ArticleBlockFallback
-						{block}
-						onUpdate={onUpdateBlock}
-						{onCreateParagraphAfter}
-						{onMergeBlockWithPrevious}
-						{onRemoveBlock}
-						{onConvertToList}
-						shouldFocus={focusTarget === block.id}
-						focusPosition={focusTarget === block.id ? focusPosition : null}
-						onFocused={onFocusHandled}
-					/>
-				{/if}
-			{/snippet}
+			{#if block.type === 'heading'}
+				<Heading
+					{block}
+					onUpdate={onUpdateBlock}
+					{onCreateParagraphAfter}
+					{onMergeBlockWithPrevious}
+					{onRemoveBlock}
+					shouldFocus={focusTarget === block.id}
+					focusPosition={focusTarget === block.id ? focusPosition : null}
+					onFocused={onFocusHandled}
+				/>
+			{:else if block.type === 'paragraph'}
+				<Paragraph
+					{block}
+					onUpdate={onUpdateBlock}
+					{onCreateParagraphAfter}
+					{onMergeBlockWithPrevious}
+					{onRemoveBlock}
+					{onConvertToList}
+					shouldFocus={focusTarget === block.id}
+					focusPosition={focusTarget === block.id ? focusPosition : null}
+					onFocused={onFocusHandled}
+				/>
+			{:else if block.type === 'bullet_list' || block.type === 'list' || block.type === 'numbered_list'}
+				<List
+					{block}
+					onUpdateItem={onUpdateListItem}
+					onInsertItemAfter={onInsertListItemAfter}
+					{onMergeListItemWithPrevious}
+					{onCreateParagraphAfter}
+					{onRemoveListItem}
+					focusItemIndex={focusTarget?.startsWith(`${block.id}:`)
+						? Number(focusTarget.split(':')[1])
+						: null}
+					focusPosition={focusTarget?.startsWith(`${block.id}:`) ? focusPosition : null}
+					onFocused={onFocusHandled}
+				/>
+			{:else if block.type === 'image'}
+				<Image {block} titleFallback={draftTitle} onUpdate={onUpdateBlock} />
+			{:else if block.type === 'table'}
+				<Table
+					{block}
+					onUpdateHeader={onUpdateTableHeader}
+					onUpdateCell={onUpdateTableCell}
+					onAddColumn={onAddTableColumn}
+					onAddRow={onAddTableRow}
+					onRemoveColumn={onRemoveTableColumn}
+					onRemoveRow={onRemoveTableRow}
+				/>
+			{:else if block.type === 'code'}
+				<Code {block} onUpdate={onUpdateBlock} />
+			{/if}
 		</ArticleBlockShell>
 	{/each}
 </VStack>

package/dist/components/Library/ArticleEditor/ArticleEditorHeader.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import VStack from '../VStack';
-	import ArticleImagePreview from './ArticleImagePreview.svelte';
 	import TextEditor from '../TextEditor';
-	import type { ArticleEditorArticle } from './types.js';
+	import Image from './Blocks/Image.svelte';
+	import type { ArticleEditorArticle, BlockDraft } from './types.js';
 
 	let { article, draftTitle, draftImageAltText, onTitleChange, onImageAltTextChange } = $props<{
 		article: ArticleEditorArticle;
@@ -11,47 +11,37 @@
 		onTitleChange: (value: string) => void;
 		onImageAltTextChange: (value: string) => void;
 	}>();
+
+	const heroImageBlock = $derived<BlockDraft>({
+		id: article.id ? `${article.id}:hero-image` : 'article-hero-image',
+		order: -1,
+		type: 'image',
+		imageURL: article.imageURL,
+		imageAlt: draftImageAltText
+	});
+
+	const onHeroImageUpdate = (_id: string, patch: Partial<BlockDraft>) => {
+		if (patch.imageAlt === undefined) return;
+		onImageAltTextChange(patch.imageAlt ?? '');
+	};
 </script>
 
-<VStack gap={20} paddingX={0} paddingY={20}>
+<VStack gap={10}>
 	<TextEditor
+		as="h1"
 		autosize
 		value={draftTitle}
 		rows={1}
 		spellcheck={true}
 		onInput={(event) => onTitleChange((event.currentTarget as HTMLTextAreaElement).value)}
-		className="text-4xl leading-tight font-semibold tracking-[-0.03em] text-zinc-950 placeholder:text-zinc-300"
 		placeholder="Untitled article"
 	/>
 
 	{#if article.imageURL}
-		<ArticleImagePreview
-			src={article.imageURL}
-			alt={draftImageAltText || article.title}
-			aspectRatio="4 / 3"
-		/>
-		<TextEditor
-			autosize
-			value={draftImageAltText}
-			rows={1}
-			onInput={(event) => onImageAltTextChange((event.currentTarget as HTMLTextAreaElement).value)}
-			className="article-editor-hero-description"
-			placeholder="Image description"
+		<Image
+			block={heroImageBlock}
+			titleFallback={draftTitle || article.title}
+			onUpdate={onHeroImageUpdate}
 		/>
 	{/if}
 </VStack>
-
-<style>
-	:global(.article-editor-hero-description) {
-		border: 0;
-		background: transparent;
-		padding: 0;
-		color: #3f3f46;
-		font-size: 0.875rem;
-		line-height: 1.5rem;
-	}
-
-	:global(.article-editor-hero-description::placeholder) {
-		color: #d4d4d8;
-	}
-</style>

package/dist/components/Library/ArticleEditor/{ArticleBlockCode.svelte → Blocks/Code.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import TextEditor from '../TextEditor';
-	import type { BlockDraft } from './types.js';
+	import TextEditor from '../../TextEditor';
+	import type { BlockDraft } from '../types.js';
 
 	let { block, onUpdate } = $props<{
 		block: BlockDraft;
@@ -16,6 +16,5 @@
 		onUpdate(block.id, {
 			code: (event.currentTarget as HTMLTextAreaElement).value
 		})}
-	className="bg-zinc-950 px-4 py-4 font-mono text-sm leading-6 text-zinc-100"
 	placeholder="Code block"
 />

package/dist/components/Library/ArticleEditor/Blocks/Code.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { BlockDraft } from '../types.js';
+type $$ComponentProps = {
+    block: BlockDraft;
+    onUpdate: (id: string, patch: Partial<BlockDraft>) => void;
+};
+declare const Code: import("svelte").Component<$$ComponentProps, {}, "">;
+type Code = ReturnType<typeof Code>;
+export default Code;

package/dist/components/Library/ArticleEditor/{ArticleBlockFAQ.svelte → Blocks/FAQ.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import TextEditor from '../TextEditor';
-	import type { BlockDraft } from './types.js';
+	import TextEditor from '../../TextEditor';
+	import type { BlockDraft } from '../types.js';
 
 	let { block, onUpdateItem } = $props<{
 		block: BlockDraft;
@@ -29,9 +29,9 @@
 				placeholder="Question"
 			/>
 			<TextEditor
+				as="paragraph"
 				autosize
 				rows={1}
-				className="text-[15px] leading-7 text-zinc-700 placeholder:text-zinc-300"
 				value={item.answer}
 				onInput={(event) =>
 					onUpdateItem(

package/dist/components/Library/ArticleEditor/Blocks/FAQ.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { BlockDraft } from '../types.js';
+type $$ComponentProps = {
+    block: BlockDraft;
+    onUpdateItem: (blockID: string, index: number, field: 'question' | 'answer', value: string) => void;
+};
+declare const FAQ: import("svelte").Component<$$ComponentProps, {}, "">;
+type FAQ = ReturnType<typeof FAQ>;
+export default FAQ;

package/dist/components/Library/ArticleEditor/{ArticleBlockHeading.svelte → Blocks/Heading.svelte}

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import TextEditor from '../TextEditor';
-	import type { BlockDraft } from './types.js';
+	import TextEditor from '../../TextEditor';
+	import type { TextAs } from '../../../../style/text';
+	import type { BlockDraft } from '../types.js';
 
 	let {
 		block,
@@ -21,9 +22,15 @@
 		focusPosition?: number | null;
 		onFocused?: () => void;
 	}>();
+
+	const headingAs = $derived.by<TextAs>(() => {
+		const level = Math.min(6, Math.max(1, block.level ?? 2));
+		return `h${level}` as TextAs;
+	});
 </script>
 
 <TextEditor
+	as={headingAs}
 	autosize
 	rows={1}
 	value={block.text ?? ''}
@@ -62,12 +69,5 @@
 	{shouldFocus}
 	{focusPosition}
 	{onFocused}
-	className={`placeholder:text-zinc-300 ${
-		Number(block.level ?? 2) <= 1
-			? 'text-3xl font-semibold tracking-[-0.03em]'
-			: Number(block.level ?? 2) === 2
-				? 'text-2xl font-semibold tracking-[-0.025em]'
-				: 'text-xl font-semibold'
-	}`}
 	placeholder="Heading"
 />

package/dist/components/Library/ArticleEditor/{ArticleBlockHeading.svelte.d.ts → Blocks/Heading.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { BlockDraft } from './types.js';
+import type { BlockDraft } from '../types.js';
 type $$ComponentProps = {
     block: BlockDraft;
     onUpdate: (id: string, patch: Partial<BlockDraft>) => void;
@@ -9,6 +9,6 @@ type $$ComponentProps = {
     focusPosition?: number | null;
     onFocused?: () => void;
 };
-declare const ArticleBlockHeading: import("svelte").Component<$$ComponentProps, {}, "">;
-type ArticleBlockHeading = ReturnType<typeof ArticleBlockHeading>;
-export default ArticleBlockHeading;
+declare const Heading: import("svelte").Component<$$ComponentProps, {}, "">;
+type Heading = ReturnType<typeof Heading>;
+export default Heading;

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import Image from '../../Image';
+	import TextEditor from '../../TextEditor';
+	import VStack from '../../VStack';
+	import type { BlockDraft } from '../types.js';
+
+	let { block, titleFallback, onUpdate } = $props<{
+		block: BlockDraft;
+		titleFallback: string;
+		onUpdate: (id: string, patch: Partial<BlockDraft>) => void;
+	}>();
+</script>
+
+<VStack gap={10}>
+	<Image
+		src={block.imageURL}
+		alt={block.imageAlt ?? titleFallback}
+		fit="cover"
+		aspectRatio="4 / 3"
+	/>
+
+	<TextEditor
+		as="paragraph"
+		autosize
+		rows={1}
+		value={block.imageAlt ?? ''}
+		onInput={(event) =>
+			onUpdate(block.id, {
+				imageAlt: (event.currentTarget as HTMLTextAreaElement).value
+			})}
+	/>
+</VStack>

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

@@ -0,0 +1,10 @@
+import Image from '../../Image';
+import type { BlockDraft } from '../types.js';
+type $$ComponentProps = {
+    block: BlockDraft;
+    titleFallback: string;
+    onUpdate: (id: string, patch: Partial<BlockDraft>) => void;
+};
+declare const Image: import("svelte").Component<$$ComponentProps, {}, "">;
+type Image = ReturnType<typeof Image>;
+export default Image;

package/dist/components/Library/ArticleEditor/{ArticleBlockList.svelte → Blocks/List.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import TextEditor from '../TextEditor';
-	import type { BlockDraft } from './types.js';
+	import TextEditor from '../../TextEditor';
+	import type { BlockDraft } from '../types.js';
 
 	let {
 		block,
@@ -66,6 +66,7 @@
 		{#each block.items ?? [] as item, index}
 			<li class="article-editor-list-item pl-2">
 				<TextEditor
+					as="paragraph"
 					autosize
 					rows={1}
 					value={item}
@@ -75,7 +76,6 @@
 					shouldFocus={focusItemIndex === index}
 					focusPosition={focusItemIndex === index ? focusPosition : null}
 					{onFocused}
-					className="text-[17px] leading-7 text-zinc-700 placeholder:text-zinc-300"
 					placeholder="List item"
 				/>
 			</li>
@@ -88,6 +88,7 @@
 		{#each block.items ?? [] as item, index}
 			<li class="article-editor-list-item pl-2">
 				<TextEditor
+					as="paragraph"
 					autosize
 					rows={1}
 					value={item}
@@ -97,7 +98,6 @@
 					shouldFocus={focusItemIndex === index}
 					focusPosition={focusItemIndex === index ? focusPosition : null}
 					{onFocused}
-					className="text-[17px] leading-7 text-zinc-700 placeholder:text-zinc-300"
 					placeholder="List item"
 				/>
 			</li>

package/dist/components/Library/ArticleEditor/{ArticleBlockList.svelte.d.ts → Blocks/List.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { BlockDraft } from './types.js';
+import type { BlockDraft } from '../types.js';
 type $$ComponentProps = {
     block: BlockDraft;
     onUpdateItem: (blockID: string, index: number, value: string) => void;
@@ -10,6 +10,6 @@ type $$ComponentProps = {
     focusPosition?: number | null;
     onFocused?: () => void;
 };
-declare const ArticleBlockList: import("svelte").Component<$$ComponentProps, {}, "">;
-type ArticleBlockList = ReturnType<typeof ArticleBlockList>;
-export default ArticleBlockList;
+declare const List: import("svelte").Component<$$ComponentProps, {}, "">;
+type List = ReturnType<typeof List>;
+export default List;