@x33025/sveltely 0.0.27 → 0.0.29

package/dist/components/ChipInput.svelte

@@ -20,6 +20,9 @@
 	let inputValue = $state('');
 	let showInput = $state(false);
 	let inputEl = $state<HTMLInputElement | null>(null);
+	let editingTag = $state<string | null>(null);
+	let editingValue = $state('');
+	let editingEl = $state<HTMLInputElement | null>(null);
 	const selectionEnabled = $derived(selection !== undefined);
 
 	const addTag = (rawValue: string) => {
@@ -64,6 +67,48 @@
 		inputEl?.focus();
 	};
 
+	const startEditing = async (tag: string) => {
+		editingTag = tag;
+		editingValue = tag;
+		await tick();
+		editingEl?.focus();
+		editingEl?.select();
+	};
+
+	const commitEdit = () => {
+		if (!editingTag) return;
+
+		const previous = editingTag;
+		const next = editingValue.trim();
+		editingTag = null;
+
+		if (!next || next === previous) return;
+		if (tags.includes(next)) return;
+
+		tags = tags.map((tag) => (tag === previous ? next : tag));
+		if (selection?.includes(previous)) {
+			selection = selection.map((tag) => (tag === previous ? next : tag));
+		}
+	};
+
+	const cancelEdit = () => {
+		editingTag = null;
+		editingValue = '';
+	};
+
+	const onEditKeydown = (event: KeyboardEvent) => {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			commitEdit();
+			return;
+		}
+
+		if (event.key === 'Escape') {
+			event.preventDefault();
+			cancelEdit();
+		}
+	};
+
 	const onBlur = () => {
 		if (!inputValue.trim()) {
 			showInput = false;
@@ -82,18 +127,31 @@
 <div class="w-full max-w-lg">
 	<div class="tag-row flex flex-wrap items-center">
 		{#each tags as tag (tag)}
-			{#if selectionEnabled}
+			{#if editingTag === tag}
+				<input
+					bind:this={editingEl}
+					bind:value={editingValue}
+					class="tag-surface tag-input-field min-w-20 outline-none"
+					onblur={commitEdit}
+					onkeydown={onEditKeydown}
+				/>
+			{:else if selectionEnabled}
 				<button
 					type="button"
 					class="tag-surface inline-flex items-center gap-2"
 					class:tag-selected={selection?.includes(tag)}
 					onclick={() => toggleSelected(tag)}
+					ondblclick={() => startEditing(tag)}
 					aria-pressed={selection?.includes(tag)}
 				>
 					{tag}
 				</button>
 			{:else}
-				<span class="tag-surface inline-flex items-center gap-2">{tag}</span>
+				<button
+					type="button"
+					class="tag-surface inline-flex items-center gap-2"
+					ondblclick={() => startEditing(tag)}>{tag}</button
+				>
 			{/if}
 		{/each}
 

package/dist/components/Dropdown/Dropdown.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tick } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import { portalContent } from '../../actions/portal';
 
@@ -23,9 +24,11 @@
 	let isOpen = $state(false);
 	let triggerEl = $state<HTMLElement | null>(null);
 	let menuEl = $state<HTMLElement | null>(null);
+	let contentEl = $state<HTMLElement | null>(null);
 	let menuCoords = $state({ top: 0, left: 0 });
 	let menuTransform = $state('none');
 	let resolvedAnchor = $state<'top' | 'bottom' | 'leading' | 'trailing'>('bottom');
+	let computedMenuRadius = $state<string | null>(null);
 
 	type Point = { x: number; y: number };
 
@@ -87,7 +90,46 @@
 		];
 	};
 
-	function open() {
+	const parsePx = (value: string) => {
+		const first = value.split(' ')[0];
+		const parsed = Number.parseFloat(first);
+		return Number.isFinite(parsed) ? parsed : 0;
+	};
+
+	function updateComputedMenuRadius() {
+		if (!menuEl || !contentEl) {
+			computedMenuRadius = null;
+			return;
+		}
+
+		const itemEl = contentEl.querySelector<HTMLElement>('.dropdown-item');
+		if (!itemEl) {
+			computedMenuRadius = null;
+			return;
+		}
+
+		const itemRect = itemEl.getBoundingClientRect();
+		const itemStyle = getComputedStyle(itemEl);
+		const itemRadius = parsePx(itemStyle.borderTopLeftRadius);
+		const effectiveItemRadius = Math.min(itemRadius, itemRect.height / 2, itemRect.width / 2);
+
+		const contentStyle = getComputedStyle(contentEl);
+		const contentPadding = Math.min(
+			parsePx(contentStyle.paddingTop),
+			parsePx(contentStyle.paddingLeft)
+		);
+
+		const menuRect = menuEl.getBoundingClientRect();
+		const outerRadius = Math.min(
+			effectiveItemRadius + contentPadding,
+			menuRect.height / 2,
+			menuRect.width / 2
+		);
+
+		computedMenuRadius = `${outerRadius}px`;
+	}
+
+	async function open() {
 		if (triggerEl) {
 			const rect = triggerEl.getBoundingClientRect();
 			const spaceAbove = rect.top;
@@ -125,10 +167,13 @@
 			}
 		}
 		isOpen = true;
+		await tick();
+		updateComputedMenuRadius();
 	}
 
 	function close() {
 		isOpen = false;
+		computedMenuRadius = null;
 	}
 
 	function toggle() {
@@ -170,6 +215,11 @@
 	function handleSelect() {
 		if (closeOnSelect) close();
 	}
+
+	$effect(() => {
+		if (!isOpen) return;
+		updateComputedMenuRadius();
+	});
 </script>
 
 <svelte:window
@@ -197,7 +247,8 @@
 		<div
 			use:portalContent
 			class="dropdown-menu fixed z-50 border border-gray-200 focus:outline-none"
-			style="top: {menuCoords.top}px; left: {menuCoords.left}px; transform: {menuTransform}; border-radius: var(--dropdown-border-radius); background: var(--dropdown-background); box-shadow: var(--dropdown-shadow);"
+			style="top: {menuCoords.top}px; left: {menuCoords.left}px; transform: {menuTransform}; border-radius: {computedMenuRadius ??
+				'var(--dropdown-border-radius)'}; background: var(--dropdown-background); box-shadow: var(--dropdown-shadow);"
 			role="menu"
 			aria-orientation="vertical"
 			tabindex="-1"
@@ -208,6 +259,7 @@
 				style="padding: var(--dropdown-content-padding);"
 				role="none"
 				onclick={handleSelect}
+				bind:this={contentEl}
 			>
 				{@render children()}
 			</div>

package/dist/style/index.css

@@ -68,10 +68,8 @@
 		--sheet-shadow: var(--shadow-md);
 
 		--dropdown-content-padding: calc(var(--spacing));
-		--dropdown-item-border-radius: var(--radius-sm);
-		--dropdown-border-radius: calc(
-			var(--dropdown-item-border-radius) + var(--dropdown-content-padding)
-		);
+		--dropdown-item-border-radius: var(--radius-md);
+		--dropdown-border-radius: var(--radius-md);
 		--dropdown-background: var(--color-white);
 		--dropdown-shadow: var(--shadow-md);
 		--dropdown-item-highlight: var(--color-zinc-100);

package/dist/style.css

@@ -272,6 +272,9 @@
   .max-w-lg {
     max-width: var(--container-lg);
   }
+  .min-w-20 {
+    min-width: calc(var(--spacing) * 20);
+  }
   .min-w-36 {
     min-width: calc(var(--spacing) * 36);
   }
@@ -604,10 +607,8 @@
     --sheet-blur: var(--blur-sm);
     --sheet-shadow: var(--shadow-md);
     --dropdown-content-padding: calc(var(--spacing));
-    --dropdown-item-border-radius: var(--radius-sm);
-    --dropdown-border-radius: calc(
-			var(--dropdown-item-border-radius) + var(--dropdown-content-padding)
-		);
+    --dropdown-item-border-radius: var(--radius-md);
+    --dropdown-border-radius: var(--radius-md);
     --dropdown-background: var(--color-white);
     --dropdown-shadow: var(--shadow-md);
     --dropdown-item-highlight: var(--color-zinc-100);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.0.27",
+	"version": "0.0.29",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",