noph-ui 0.2.7 → 0.2.9

package/dist/text-field/TextField.svelte

@@ -14,9 +14,9 @@
 		label,
 		noAsterisk = false,
 		variant = 'filled',
+		placeholder = ' ',
 		...attributes
 	}: TextFieldProps | TextAreaFieldProps = $props()
-	let focused = $state(false)
 
 	let contentEl: HTMLInputElement | HTMLTextAreaElement | undefined = $state()
 	let errorTextRaw = $state(errorText)
@@ -40,15 +40,6 @@
 					currentTarget.focus()
 				}
 			})
-			contentEl.addEventListener('focus', () => {
-				if (!attributes.disabled) {
-					focused = true
-				}
-			})
-
-			contentEl.addEventListener('blur', () => {
-				focused = false
-			})
 
 			contentEl.addEventListener('change', (event) => {
 				const { currentTarget } = event as Event & {
@@ -61,7 +52,6 @@
 			})
 		}
 	})
-	let emptyValue = $derived(value === undefined || value === null || value === '')
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -77,15 +67,12 @@
 		if (attributes.disabled) {
 			return
 		}
-		focused = true
 		contentEl?.focus()
 	}}
 >
 	<div
 		class="field"
-		class:populated={!emptyValue}
 		class:error
-		class:focused
 		class:resizable={attributes.type === 'textarea'}
 		class:no-label={!label?.length}
 		class:with-start={start}
@@ -121,12 +108,7 @@
 				<div class="middle">
 					<div class="label-wrapper">
 						{#if label?.length}
-							<span
-								class="label"
-								class:resting={!focused && emptyValue}
-								class:floating={focused || !emptyValue}
-								>{label}{noAsterisk || !attributes.required ? '' : '*'}
-							</span>
+							<span class="label">{label}{noAsterisk || !attributes.required ? '' : '*'} </span>
 						{/if}
 					</div>
 					<div class="content">
@@ -137,6 +119,7 @@
 								bind:this={contentEl}
 								class="input"
 								aria-label={label}
+								{placeholder}
 								rows={attributes.rows || 2}
 							></textarea>
 						{:else}
@@ -151,6 +134,7 @@
 									bind:value
 									bind:this={contentEl}
 									class="input"
+									{placeholder}
 									aria-label={label}
 									aria-invalid={error}
 								/>
@@ -191,7 +175,8 @@
 		width: 100%;
 		z-index: 1;
 	}
-	.field:has(input:focus-visible) .active-indicator::after {
+	.field:has(input:focus-visible) .active-indicator::after,
+	.field:has(textarea:focus-visible) .active-indicator::after {
 		opacity: 1;
 	}
 	.active-indicator::after {
@@ -356,7 +341,9 @@
 
 	.no-label .content,
 	.field:has(input:focus-visible) .content,
-	.populated .content {
+	.field:has(textarea:focus-visible) .content,
+	.field:has(input:not(:placeholder-shown)) .content,
+	.field:has(textarea:not(:placeholder-shown)) .content {
 		opacity: 1;
 	}
 
@@ -481,22 +468,31 @@
 	.label.np-hidden {
 		opacity: 0;
 	}
-	.label.resting {
+
+	.field:has(input:not(:focus-visible):placeholder-shown) .label,
+	.field:has(textarea:not(:focus-visible):placeholder-shown) .label {
 		position: absolute;
 		top: 1rem;
 		left: 0rem;
 	}
-
-	.label.floating {
+	.field:has(input:focus-visible:not(:placeholder-shown)) .label,
+	.field:has(input:focus-visible) .label,
+	.field:has(input:not(:placeholder-shown)) .label,
+	.field:has(textarea:focus-visible:not(:placeholder-shown)) .label,
+	.field:has(textarea:focus-visible) .label,
+	.field:has(textarea:not(:placeholder-shown)) .label {
 		font-size: 0.75rem;
 		line-height: 1rem;
 		transform-origin: top left;
-	}
-	.label.floating {
 		position: absolute;
 		top: var(--floating-label-top, 0.5rem);
 	}
-	.with-start .label.floating {
+	.with-start:has(input:focus-visible:not(:placeholder-shown)) .label,
+	.with-start:has(input:focus-visible) .label,
+	.with-start:has(input:not(:placeholder-shown)) .label,
+	.with-start:has(textarea:focus-visible:not(:placeholder-shown)) .label,
+	.with-start:has(textarea:focus-visible) .label,
+	.with-start:has(textarea:not(:placeholder-shown)) .label {
 		left: var(--floating-label-left, 0);
 	}
 	.label {
@@ -514,11 +510,13 @@
 		line-height: 1.5rem;
 		width: min-content;
 	}
-	.field:has(input:focus-visible) .label {
+	.field:has(input:focus-visible) .label,
+	.field:has(textarea:focus-visible) .label {
 		color: var(--np-color-primary);
 	}
 	.error .label,
-	.error:has(input:focus-visible) .label {
+	.error:has(input:focus-visible) .label,
+	.error:has(textarea:focus-visible) .label {
 		color: var(--np-color-error);
 	}
 	.disabled .label {
@@ -532,7 +530,8 @@
 		overflow: hidden;
 	}
 	.disabled.no-label .content,
-	.disabled.populated .content {
+	.disabled:has(input:not(:placeholder-shown)) .content,
+	.disabled:has(textarea:not(:placeholder-shown)) .content {
 		opacity: 0.38;
 	}
 	.field,
@@ -598,14 +597,19 @@
 		border-bottom-style: solid;
 		border-top-style: solid;
 	}
-	.outline-notch::before,
 	.outline-notch::after {
 		border-bottom-style: solid;
 		border-top-style: none;
 	}
-	.field:not(:has(input:focus-visible)):not(.populated) .outline-notch::before {
+	.outline-notch::before {
+		border-bottom-style: solid;
 		border-top-style: solid;
 	}
+	.field:has(input:focus-visible) .outline-notch::before,
+	.field:has(textarea:focus-visible) .outline-notch::before,
+	.field:has(input:not(:placeholder-shown)) .outline-notch::before {
+		border-top-style: none;
+	}
 
 	.outline-notch::before,
 	.outline-notch::after {
@@ -643,7 +647,10 @@
 	}
 	.field:has(input:focus-visible) .outline-start::after,
 	.field:has(input:focus-visible) .outline-end::after,
-	.field:has(input:focus-visible) .outline-notch::after {
+	.field:has(input:focus-visible) .outline-notch::after,
+	.field:has(textarea:focus-visible) .outline-start::after,
+	.field:has(textarea:focus-visible) .outline-end::after,
+	.field:has(textarea:focus-visible) .outline-notch::after {
 		opacity: 1;
 	}
 	.np-outline {
@@ -657,12 +664,14 @@
 		z-index: 1;
 	}
 
-	.field:has(input:focus-visible) .np-outline {
+	.field:has(input:focus-visible) .np-outline,
+	.field:has(textarea:focus-visible) .np-outline {
 		border-color: var(--np-color-primary);
 		color: var(--np-color-primary);
 	}
 	.error .np-outline,
-	.error:has(input:focus-visible) .np-outline {
+	.error:has(input:focus-visible) .np-outline,
+	.error:has(textarea:focus-visible) .np-outline {
 		border-color: var(--np-color-error);
 	}
 	.disabled .np-outline {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "noph-ui",
-	"version": "0.2.7",
+	"version": "0.2.9",
 	"license": "MIT",
 	"homepage": "https://noph.dev",
 	"repository": {