@websline/system-components 1.0.15 → 1.1.0

package/dist/components/atoms/colorChip/ColorChip.svelte

@@ -19,7 +19,7 @@
 		color = "",
 		shape = "square",
 		size = "medium",
-		...args
+		...rest
 	} = $props();
 
 	let as = $derived(clickable ? "button" : "div");
@@ -29,5 +29,5 @@
 	this={as}
 	class={colorChipVariants({ class: className, clickable, shape, size })}
 	style="background-color: {color}; border-color: {borderColor};"
-	{...args}>
+	{...rest}>
 </svelte:element>

package/dist/components/atoms/feedback/spinner/Spinner.svelte

@@ -8,7 +8,7 @@
 	 */
 
 	/** @type {Props} */
-	let { class: className = "", size = "medium" } = $props();
+	let { class: className = "", size = "medium", ...rest } = $props();
 </script>
 
 <svg
@@ -16,7 +16,8 @@
 	role="status"
 	viewBox="0 0 100 101"
 	fill="none"
-	xmlns="http://www.w3.org/2000/svg">
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
 	<path
 		d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
 		fill="#fff"></path>

package/dist/components/atoms/helperText/HelperText.svelte

@@ -9,9 +9,9 @@
 	 */
 
 	/** @type {Props} */
-	let { children, class: className = "", error = false } = $props();
+	let { children, class: className = "", error = false, ...rest } = $props();
 </script>
 
-<p class={helperTextVariants({ class: className, error })}>
+<p class={helperTextVariants({ class: className, error })} {...rest}>
 	{@render children?.()}
 </p>

package/dist/components/molecules/comboBox/ComboBox.svelte

@@ -0,0 +1,200 @@
+<script>
+	import { getContext } from "svelte";
+	import Dropdown from "./Dropdown.svelte";
+	import Value from "./Value.svelte";
+	import { comboBoxVariants } from "./comboBox.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [autofocus=false] Whether the input should be autofocused on mount
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {boolean} [disabled=false] Whether the component is disabled
+	 * @property {string} [id=""] The ID of the input element
+	 * @property {string} [name] The name of the input, used for form submission
+	 * @property {Array<{id: string | number, label: string}>} [options=[]] The available tag options
+	 * @property {string} [placeholder=""] The placeholder text for the input
+	 * @property {Array<string | number>} [value=[]] The currently selected tags, bound to the component
+	 */
+
+	/** @type {Props} */
+	let {
+		autofocus = false,
+		class: className = "",
+		disabled = false,
+		id = "",
+		name,
+		options = [],
+		placeholder = "",
+		value = $bindable(""),
+		...rest
+	} = $props();
+
+	let store = getContext("form-field-store");
+
+	let localValues = $derived.by(() => {
+		if (store) return { ...store() };
+		return { disabled, id };
+	});
+
+	let open = $state(false);
+	let highlighted = $state(-1);
+	let isEditing = $state(false);
+
+	let inputRef = $state();
+	let rootRef = $state();
+
+	let valueLabel = $state("");
+
+	let exactMatch = $derived.by(() =>
+		options.find((o) => o.label.toLowerCase() === valueLabel.toLowerCase()),
+	);
+
+	let filtered = $derived(
+		options.filter((o) => o.label.toLowerCase().includes(valueLabel.toLowerCase())),
+	);
+
+	$effect(() => {
+		if (autofocus && inputRef) inputRef.focus();
+	});
+
+	$effect(() => {
+		if (isEditing) return;
+
+		const option = options.find((o) => String(o.id) === String(value));
+
+		if (option) {
+			if (valueLabel !== option.label) valueLabel = option.label;
+			return;
+		}
+
+		if (valueLabel !== (value ? String(value) : "")) {
+			valueLabel = value ? String(value) : "";
+		}
+	});
+
+	$effect(() => {
+		if (!isEditing) return;
+
+		if (!valueLabel) {
+			value = "";
+			return;
+		}
+
+		if (exactMatch) {
+			value = exactMatch.id.toString();
+			return;
+		}
+
+		value = valueLabel;
+	});
+
+	const openDropdown = () => {
+		open = true;
+		isEditing = true;
+		highlighted = -1;
+	};
+
+	const closeDropdown = () => {
+		open = false;
+		isEditing = false;
+		highlighted = -1;
+	};
+
+	const dispatchChange = () => {
+		rootRef.dispatchEvent(new CustomEvent("change", { detail: value }));
+	};
+
+	const selectItem = (id) => {
+		const option = options.find((o) => o.id === id);
+		if (!option) return;
+
+		value = id.toString();
+		valueLabel = option.label;
+
+		dispatchChange();
+		closeDropdown();
+	};
+
+	const handleFocusOut = (e) => {
+		const next = e.relatedTarget;
+		if (next && rootRef.contains(next)) return;
+		if (document.activeElement === inputRef) return;
+
+		dispatchChange();
+		closeDropdown();
+	};
+
+	const handleKey = (e) => {
+		if (!open) return;
+
+		const total = filtered.length;
+
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			highlighted = (highlighted + 1) % total;
+			return;
+		}
+
+		if (e.key === "ArrowUp") {
+			e.preventDefault();
+			highlighted = (highlighted - 1 + total) % total;
+			return;
+		}
+
+		if (e.key === "Escape") {
+			e.preventDefault();
+			closeDropdown();
+			return;
+		}
+
+		if (e.key === "Enter") {
+			e.preventDefault();
+
+			if (highlighted !== -1) {
+				selectItem(filtered[highlighted].id);
+				return;
+			}
+
+			dispatchChange();
+			closeDropdown();
+		}
+	};
+
+	let styles = $derived(comboBoxVariants({ disabled: localValues.disabled }));
+</script>
+
+<div
+	bind:this={rootRef}
+	role="combobox"
+	aria-expanded={open}
+	class={styles.base({ class: className })}
+	onfocusout={handleFocusOut}
+	{...open
+		? {
+				"aria-controls": localValues.id,
+				"aria-haspopup": "listbox",
+				"aria-owns": localValues.id,
+			}
+		: {}}
+	{...rest}>
+	<Value
+		bind:inputRef
+		{localValues}
+		{name}
+		onKeydown={handleKey}
+		onOpenDropdown={openDropdown}
+		{open}
+		{options}
+		{placeholder}
+		bind:value={valueLabel} />
+
+	{#if open}
+		<Dropdown
+			{filtered}
+			{highlighted}
+			{inputRef}
+			{localValues}
+			onSelectItem={selectItem}
+			bind:value />
+	{/if}
+</div>

package/dist/components/molecules/comboBox/ComboBox.svelte.d.ts

@@ -0,0 +1,79 @@
+export default ComboBox;
+type ComboBox = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const ComboBox: import("svelte").Component<{
+    /**
+     * Whether the input should be autofocused on mount
+     */
+    autofocus?: boolean;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the component is disabled
+     */
+    disabled?: boolean;
+    /**
+     * The ID of the input element
+     */
+    id?: string;
+    /**
+     * The name of the input, used for form submission
+     */
+    name?: string;
+    /**
+     * The available tag options
+     */
+    options?: Array<{
+        id: string | number;
+        label: string;
+    }>;
+    /**
+     * The placeholder text for the input
+     */
+    placeholder?: string;
+    /**
+     * The currently selected tags, bound to the component
+     */
+    value?: Array<string | number>;
+}, {}, "value">;
+type Props = {
+    /**
+     * Whether the input should be autofocused on mount
+     */
+    autofocus?: boolean;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the component is disabled
+     */
+    disabled?: boolean;
+    /**
+     * The ID of the input element
+     */
+    id?: string;
+    /**
+     * The name of the input, used for form submission
+     */
+    name?: string;
+    /**
+     * The available tag options
+     */
+    options?: Array<{
+        id: string | number;
+        label: string;
+    }>;
+    /**
+     * The placeholder text for the input
+     */
+    placeholder?: string;
+    /**
+     * The currently selected tags, bound to the component
+     */
+    value?: Array<string | number>;
+};

package/dist/components/molecules/comboBox/Dropdown.svelte

@@ -0,0 +1,92 @@
+<script>
+	import { Icon } from "../../../index.js";
+	import { onDestroy, onMount } from "svelte";
+	import { comboBoxVariants } from "./comboBox.variants.js";
+
+	let { filtered, highlighted, inputRef, localValues, onSelectItem, value, ...rest } =
+		$props();
+
+	let styles = $derived(comboBoxVariants());
+
+	let dropdownPosition = $state("bottom");
+	let dropdownMaxHeight = $state(200);
+
+	const attachHighlightedItem = (item) => {
+		if (inputRef) {
+			// so the screen reader can read the highlighted option aloud
+			if (item.id) inputRef.setAttribute("aria-activedescendant", item.id);
+			else inputRef.removeAttribute("aria-activedescendant");
+		}
+
+		// maybe scroll item into view
+		if (item.offsetTop < item.offsetParent.scrollTop)
+			item.scrollIntoView({ block: "nearest" });
+		else if (
+			item.offsetTop + item.offsetHeight >
+			item.offsetParent.scrollTop + item.offsetParent.offsetHeight
+		)
+			item.scrollIntoView({ block: "nearest" });
+	};
+
+	const updateDropdownPosition = () => {
+		if (!inputRef) return;
+
+		const rect = inputRef.getBoundingClientRect();
+		const spaceBelow = window.innerHeight - rect.bottom;
+		const spaceAbove = rect.top;
+
+		dropdownPosition = spaceBelow > spaceAbove ? "bottom" : "top";
+
+		dropdownMaxHeight =
+			dropdownPosition === "bottom"
+				? Math.min(300, spaceBelow - 24)
+				: Math.min(300, spaceAbove - 24);
+	};
+
+	const getOptionId = (itemId) =>
+		`${localValues?.id ?? "tagselector"}-option-${itemId}`;
+
+	onMount(() => updateDropdownPosition());
+	onDestroy(() => {
+		inputRef?.removeAttribute("aria-activedescendant");
+	});
+
+	let showDropdown = $derived(filtered.length > 0);
+</script>
+
+<svelte:window onscroll={updateDropdownPosition} onresize={updateDropdownPosition} />
+
+<div
+	class={styles.dropdown({ dropdownPosition, showDropdown })}
+	id={localValues.id}
+	role="listbox"
+	style={`max-height: ${dropdownMaxHeight}px`}
+	tabindex="-1"
+	{...rest}>
+	{#snippet option({ highlighted, id, label, selected, ...rest })}
+		<button
+			aria-selected={selected}
+			{@attach highlighted ? attachHighlightedItem : null}
+			class={styles.dropdownItem()}
+			data-highlighted={highlighted}
+			{id}
+			role="option"
+			tabindex="-1"
+			{...rest}>
+			{label}
+			{#if selected}
+				<Icon class={styles.dropdownCheckmark()} name="check" size={16} />
+			{/if}
+		</button>
+	{/snippet}
+
+	{#each filtered as item, i (item.id)}
+		{@render option({
+			highlighted: highlighted === i,
+			id: getOptionId(item.id),
+			label: item.label,
+			selected: value === item.id.toString(),
+			onclick: () => onSelectItem(item.id),
+		})}
+	{/each}
+</div>

package/dist/components/molecules/comboBox/Dropdown.svelte.d.ts

@@ -0,0 +1,21 @@
+export default Dropdown;
+type Dropdown = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Dropdown: import("svelte").Component<{
+    filtered: any;
+    highlighted: any;
+    inputRef: any;
+    localValues: any;
+    onSelectItem: any;
+    value: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    filtered: any;
+    highlighted: any;
+    inputRef: any;
+    localValues: any;
+    onSelectItem: any;
+    value: any;
+} & Record<string, any>;

package/dist/components/molecules/comboBox/Value.svelte

@@ -0,0 +1,39 @@
+<script>
+	import { comboBoxVariants } from "./comboBox.variants.js";
+
+	let {
+		inputRef = $bindable(),
+		localValues,
+		name,
+		onKeydown,
+		onOpenDropdown,
+		placeholder,
+		value = $bindable(),
+	} = $props();
+
+	let styles = $derived(comboBoxVariants());
+
+	const handleOpenDropdown = (e) => {
+		if (localValues.disabled) return;
+		onOpenDropdown(e);
+	};
+	const handleKeydown = (e) => {
+		if (localValues.disabled) return;
+		onKeydown(e);
+	};
+</script>
+
+<div class={styles.value({ disabled: localValues.disabled })}>
+	<input
+		bind:this={inputRef}
+		bind:value
+		autocomplete="off"
+		class={styles.searchInput()}
+		{name}
+		onfocus={handleOpenDropdown}
+		onbeforeinput={handleOpenDropdown}
+		onkeydown={handleKeydown}
+		{placeholder}
+		readonly={localValues.disabled}
+		role="searchbox" />
+</div>

package/dist/components/molecules/comboBox/Value.svelte.d.ts

@@ -0,0 +1,23 @@
+export default Value;
+type Value = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Value: import("svelte").Component<{
+    inputRef?: any;
+    localValues: any;
+    name: any;
+    onKeydown: any;
+    onOpenDropdown: any;
+    placeholder: any;
+    value?: any;
+}, {}, "value" | "inputRef">;
+type $$ComponentProps = {
+    inputRef?: any;
+    localValues: any;
+    name: any;
+    onKeydown: any;
+    onOpenDropdown: any;
+    placeholder: any;
+    value?: any;
+};

package/dist/components/molecules/comboBox/comboBox.variants.d.ts

@@ -0,0 +1,84 @@
+export const comboBoxVariants: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            value: string;
+        };
+    };
+    dropdownPosition: {
+        bottom: {
+            dropdown: string;
+        };
+        top: {
+            dropdown: string;
+        };
+    };
+    showDropdown: {
+        true: {
+            dropdown: string;
+        };
+        false: {
+            dropdown: string;
+        };
+    };
+}, {
+    base: string;
+    value: string;
+    item: string;
+    searchField: string;
+    searchInput: string;
+    dropdown: string;
+    dropdownCheckmark: string;
+    dropdownItem: string[];
+}, undefined, {
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, {
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, unknown, unknown, undefined>>>;

package/dist/components/molecules/comboBox/comboBox.variants.js

@@ -0,0 +1,49 @@
+import { tv } from "tailwind-variants";
+import { inputBaseVariant } from "../../atoms/input/input.variants.js";
+
+const comboBoxVariants = tv({
+	extend: inputBaseVariant,
+	slots: {
+		base: "relative min-h-10 p-1",
+		value: "flex flex-wrap gap-1",
+		item: "h-7.5",
+		searchField: "relative h-7.5 w-30",
+		searchInput:
+			"w-full appearance-none border-0 bg-transparent ui-tag-badge placeholder-current focus:ring-0",
+		dropdown:
+			"absolute w-full max-w-100 overflow-y-auto bg-white p-1 pr-5 shadow-sm dark:border-neutral-700 dark:bg-neutral-800",
+		dropdownCheckmark: "ml-auto shrink-0",
+		dropdownItem: [
+			"flex w-full grow items-center gap-2 rounded-sm p-2 ui-select-label",
+			"bg-white dark:bg-neutral-800",
+			"bg-linear-to-r to-transparent",
+			"cursor-pointer text-neutral-900 hover:from-black/15 dark:text-neutral-200 dark:hover:from-white/15",
+			"data-[highlighted=true]:from-black/15 dark:data-[highlighted=true]:from-white/15",
+		],
+	},
+	variants: {
+		disabled: {
+			true: {
+				value: "pointer-events-none",
+			},
+		},
+		dropdownPosition: {
+			bottom: {
+				dropdown: "top-full mt-1",
+			},
+			top: {
+				dropdown: "bottom-full mb-1",
+			},
+		},
+		showDropdown: {
+			true: {
+				dropdown: "block",
+			},
+			false: {
+				dropdown: "hidden",
+			},
+		},
+	},
+});
+
+export { comboBoxVariants };

package/dist/components/molecules/formActions/{formActions.svelte → FormActions.svelte}

@@ -15,11 +15,13 @@
 		class: className,
 		customLayout = false,
 		fullWidth = false,
+		...rest
 	} = $props();
 </script>
 
 <div
 	class={formActionsVariants({ class: className, customLayout, fullWidth })}
-	data-form-actions>
+	data-form-actions
+	{...rest}>
 	{@render children?.()}
 </div>

package/dist/components/molecules/formField/FormField.svelte

@@ -29,6 +29,7 @@
 		label,
 		layout = "stacked",
 		required = false,
+		...rest
 	} = $props();
 
 	setContext("form-field-store", () => {
@@ -51,7 +52,7 @@
 	let styles = $derived(formFieldVariants({ disabled, layout }));
 </script>
 
-<div class={styles.base({ class: className })}>
+<div class={styles.base({ class: className })} {...rest}>
 	{#if label}
 		<Label class={styles.label()} for={id} {error} {required}>{label}</Label>
 	{/if}

package/dist/components/molecules/formLayout/FormLayout.svelte

@@ -9,9 +9,9 @@
 	 */
 
 	/** @type {Props} */
-	let { children, class: className, gap = 2 } = $props();
+	let { children, class: className, gap = 2, ...rest } = $props();
 </script>
 
-<div class={formLayoutVariants({ class: className, gap })}>
+<div class={formLayoutVariants({ class: className, gap })} {...rest}>
 	{@render children?.()}
 </div>

package/dist/components/molecules/notification/Notification.svelte

@@ -21,12 +21,13 @@
 		onClose,
 		title = "",
 		variant = "",
+		...rest
 	} = $props();
 
 	let styles = $derived(notificationVariants({ variant }));
 </script>
 
-<div class={styles.base({ class: className })}>
+<div class={styles.base({ class: className })} {...rest}>
 	<div class={styles.icon()}>
 		<Icon name={icon} />
 	</div>

package/dist/components/molecules/pickers/colorSwatch/ColorSwatch.svelte

@@ -21,6 +21,7 @@
 		size = "medium",
 		type = "text",
 		variant = "transparent",
+		...rest
 	} = $props();
 
 	let styles = $derived(colorSwatchVariants({ isOpen, size, variant }));
@@ -67,7 +68,7 @@
 
 <Popover.Root open={isOpen} onOpenChange={(open) => (isOpen = open)}>
 	<Popover.Trigger>
-		<button class={styles.base({ class: className })}>
+		<button class={styles.base({ class: className })} {...rest}>
 			<div class={styles.iconText()} style={style()}>
 				{@render content()}
 			</div>

package/dist/components/molecules/richTextEditor/toolbar/ToolbarColor.svelte

@@ -4,7 +4,7 @@
 	let { colors = [], defaultColor = "#121110", editor } = $props();
 
 	let isOpen = $state(false);
-	let selectedColor = $state(defaultColor);
+	let selectedColor = $derived(defaultColor);
 
 	const handleColorSelect = (color) => {
 		selectedColor = color;
@@ -15,6 +15,7 @@
 
 	$effect(() => {
 		if (!editor) return;
+
 		const attrs = editor.getAttributes("textStyle");
 		selectedColor = attrs.color || defaultColor;
 	});

package/dist/components/molecules/toggleGroup/ToggleGroup.svelte

@@ -31,6 +31,7 @@
 		size = "medium",
 		value = $bindable(),
 		variant = "default",
+		...rest
 	} = $props();
 
 	let toggleGroupEl;
@@ -59,7 +60,7 @@
 </script>
 
 <XScroll class={styles.base({ class: className })}>
-	<div bind:this={toggleGroupEl} class={styles.tabs()} role="tablist">
+	<div bind:this={toggleGroupEl} class={styles.tabs()} role="tablist" {...rest}>
 		{@render children?.()}
 	</div>
 </XScroll>

package/dist/components/molecules/toggleGroup/ToggleGroupItem.svelte

@@ -21,6 +21,7 @@
 		class: className = "",
 		icon,
 		value: localeValue,
+		...rest
 	} = $props();
 
 	let store = $derived(getContext("toggle-group-store")());
@@ -36,7 +37,7 @@
 	});
 </script>
 
-<div class={stylesByVariant.base({ class: baseClass })}>
+<div class={stylesByVariant.base({ class: baseClass })} {...rest}>
 	<button
 		class={stylesByVariant.button({ appearance, class: className, isActive, size })}
 		role="tab"

package/dist/components/organisms/dialog/DialogActions.svelte

@@ -9,11 +9,11 @@
 	 */
 
 	/** @type {Props} */
-	let { children, class: className = "" } = $props();
+	let { children, class: className = "", ...rest } = $props();
 
 	let styles = $derived(dialogVariants());
 </script>
 
-<FormActions class={styles.formActions({ class: className })} customLayout>
+<FormActions class={styles.formActions({ class: className })} customLayout {...rest}>
 	{@render children?.()}
 </FormActions>

package/dist/index.d.ts

@@ -19,7 +19,8 @@ export { default as Switch } from "./components/atoms/switch/Switch.svelte";
 export { default as Textarea } from "./components/atoms/textarea/Textarea.svelte";
 export { default as XScroll } from "./components/atoms/utils/xScroll/XScroll.svelte";
 export * as ColorSwatch from "./components/molecules/pickers/colorSwatch/index.js";
-export { default as FormActions } from "./components/molecules/formActions/formActions.svelte";
+export { default as ComboBox } from "./components/molecules/comboBox/ComboBox.svelte";
+export { default as FormActions } from "./components/molecules/formActions/FormActions.svelte";
 export { default as FormField } from "./components/molecules/formField/FormField.svelte";
 export { default as FormLayout } from "./components/molecules/formLayout/FormLayout.svelte";
 export { default as Notification } from "./components/molecules/notification/Notification.svelte";

package/dist/index.js

@@ -29,7 +29,8 @@ export { default as XScroll } from "./components/atoms/utils/xScroll/XScroll.sve
  */
 
 export * as ColorSwatch from "./components/molecules/pickers/colorSwatch/index.js";
-export { default as FormActions } from "./components/molecules/formActions/formActions.svelte";
+export { default as ComboBox } from "./components/molecules/comboBox/ComboBox.svelte";
+export { default as FormActions } from "./components/molecules/formActions/FormActions.svelte";
 export { default as FormField } from "./components/molecules/formField/FormField.svelte";
 export { default as FormLayout } from "./components/molecules/formLayout/FormLayout.svelte";
 export { default as Notification } from "./components/molecules/notification/Notification.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/system-components",
-  "version": "1.0.15",
+  "version": "1.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -26,14 +26,14 @@
     }
   },
   "dependencies": {
-    "@tiptap/core": "^3.13.0",
-    "@tiptap/extension-color": "^3.13.0",
-    "@tiptap/extension-highlight": "^3.13.0",
-    "@tiptap/extension-placeholder": "^3.13.0",
-    "@tiptap/extension-text-align": "^3.13.0",
-    "@tiptap/extension-text-style": "^3.13.0",
-    "@tiptap/pm": "^3.13.0",
-    "@tiptap/starter-kit": "^3.13.0",
+    "@tiptap/core": "^3.14.0",
+    "@tiptap/extension-color": "^3.14.0",
+    "@tiptap/extension-highlight": "^3.14.0",
+    "@tiptap/extension-placeholder": "^3.14.0",
+    "@tiptap/extension-text-align": "^3.14.0",
+    "@tiptap/extension-text-style": "^3.14.0",
+    "@tiptap/pm": "^3.14.0",
+    "@tiptap/starter-kit": "^3.14.0",
     "bits-ui": "^2.14.4",
     "dompurify": "^3.3.1",
     "tailwind-variants": "^3.2.2",
@@ -70,7 +70,7 @@
     "prettier-plugin-tailwindcss": "^0.7.2",
     "publint": "^0.3.16",
     "storybook": "^10.1.10",
-    "svelte": "^5.46.0",
+    "svelte": "^5.46.1",
     "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3",
     "vite": "^7.3.0",