@x33025/sveltely 0.0.31 → 0.0.32

package/dist/components/ChipInput.svelte

@@ -157,86 +157,87 @@
 	});
 </script>
 
-<div class="w-full max-w-lg">
-	<div class="tag-row flex flex-wrap items-center">
-		{#each tags as tag (tag)}
-			{#if editingTag === tag}
-				<input
-					bind:this={editingEl}
-					bind:value={editingValue}
-					class="tag-surface tag-input-field min-w-20 outline-none"
-					onblur={() => commitEdit('blur', tag)}
-					onkeydown={(event) => onEditKeydown(event, tag)}
-				/>
-			{: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}
-				<button
-					type="button"
-					class="tag-surface inline-flex items-center gap-2"
-					ondblclick={() => startEditing(tag)}>{tag}</button
-				>
-			{/if}
-		{/each}
-
-		{#if showInput}
+<div class="chip-row flex w-full flex-wrap items-center">
+	{#each tags as tag (tag)}
+		{#if editingTag === tag}
 			<input
-				bind:this={inputEl}
-				bind:value={inputValue}
-				class="tag-surface tag-input-field min-w-36 outline-none"
-				{placeholder}
-				onkeydown={onKeydown}
-				onblur={onBlur}
+				bind:this={editingEl}
+				bind:value={editingValue}
+				size={Math.max(editingValue.length, 1)}
+				class="chip-surface chip-input-field outline-none"
+				onblur={() => commitEdit('blur', tag)}
+				onkeydown={(event) => onEditKeydown(event, tag)}
 			/>
-		{:else}
+		{:else if selectionEnabled}
 			<button
 				type="button"
-				class="tag-surface chip-input-action inline-flex items-center justify-center font-semibold"
-				aria-label="Add tag"
-				onclick={openInput}
+				class="chip-surface inline-flex items-center gap-2"
+				class:chip-selected={selection?.includes(tag)}
+				onclick={() => toggleSelected(tag)}
+				ondblclick={() => startEditing(tag)}
+				aria-pressed={selection?.includes(tag)}
 			>
-				<Plus style="width: var(--chip-input-font-size); height: var(--chip-input-font-size);" />
+				{tag}
 			</button>
+		{:else}
+			<button
+				type="button"
+				class="chip-surface inline-flex items-center gap-2"
+				ondblclick={() => startEditing(tag)}>{tag}</button
+			>
 		{/if}
-
-		{#if action}
-			{@render action()}
-		{/if}
-	</div>
+	{/each}
+
+	{#if showInput}
+		<input
+			bind:this={inputEl}
+			bind:value={inputValue}
+			size={Math.max(inputValue.length, placeholder.length, 1)}
+			class="chip-surface chip-input-field outline-none"
+			{placeholder}
+			onkeydown={onKeydown}
+			onblur={onBlur}
+		/>
+	{:else}
+		<button
+			type="button"
+			class="chip-surface chip-input-action inline-flex items-center justify-center font-semibold"
+			aria-label="Add tag"
+			onclick={openInput}
+		>
+			<Plus style="width: var(--chip-input-font-size); height: var(--chip-input-font-size);" />
+		</button>
+	{/if}
+
+	{#if action}
+		{@render action()}
+	{/if}
 </div>
 
 <style>
-	.tag-row {
+	.chip-row {
 		gap: var(--chip-input-gap);
 	}
 
-	.tag-surface {
+	.chip-surface {
 		background: var(--chip-input-background);
 		color: var(--chip-input-text);
 		font-size: var(--chip-input-font-size);
 		border-radius: var(--chip-input-border-radius);
 		padding: var(--chip-input-padding);
 		border: 1px solid var(--chip-input-border-color);
+		white-space: nowrap;
 	}
 
-	.tag-selected {
+	.chip-selected {
 		border-color: var(--chip-input-highlight);
 	}
 
-	.tag-surface:hover {
+	.chip-surface:hover {
 		background: var(--chip-input-hover);
 	}
 
-	.tag-input-field:hover {
+	.chip-input-field:hover {
 		background: var(--chip-input-background);
 	}
 </style>

package/dist/style.css

@@ -22,7 +22,6 @@
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
-    --container-lg: 32rem;
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
     --font-weight-medium: 500;
@@ -269,15 +268,6 @@
   .w-full {
     width: 100%;
   }
-  .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);
-  }
   .flex-1 {
     flex: 1;
   }

package/package.json

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