noph-ui 0.26.0 → 0.26.2

package/dist/select/NativeSelect.svelte

@@ -18,6 +18,8 @@
 		value = $bindable(),
 		label,
 		disabled,
+		required,
+		noAsterisk,
 		children,
 		onchange,
 		oninvalid,
@@ -27,8 +29,8 @@
 	const selectId = id ?? `select-${uid}`
 
 	let animateLabel = $state(false)
-	let errorTextRaw = $state(errorText)
-	let errorRaw = $state(error)
+	let errorTextRaw = $derived(errorText)
+	let errorRaw = $derived(error)
 </script>
 
 <div
@@ -37,8 +39,10 @@
 		variant,
 		errorRaw && 'error',
 		disabled && 'disabled',
-		(value === undefined || value === '' || value === null) && 'is-empty',
-		animateLabel && 'label-animate',
+		required && !noAsterisk && 'asterisk',
+		!value && 'is-empty',
+		animateLabel && 'animate-label',
+		attributes.class,
 	]}
 	aria-disabled={disabled}
 >
@@ -64,8 +68,10 @@
 		<polygon stroke="none" fill-rule="evenodd" points="7 10 12 15 17 10"></polygon>
 	</svg>
 	<select
-		onchange={(event) => {
-			animateLabel = true
+		oninput={(event) => {
+			if ((!value && event.currentTarget.value) || (value && !event.currentTarget.value)) {
+				animateLabel = true
+			}
 			onchange?.(event)
 		}}
 		oninvalid={(event) => {
@@ -78,10 +84,12 @@
 			oninvalid?.(event)
 		}}
 		{disabled}
+		{required}
 		id={selectId}
 		aria-invalid={error}
 		bind:value
 		{...attributes}
+		class="np-select"
 	>
 		{@render children?.()}
 	</select>
@@ -99,11 +107,10 @@
 		position: relative;
 		font-size: 1rem;
 		display: inline-block;
-		min-width: 200px;
 		color: var(--np-color-on-surface-variant);
 	}
 
-	select {
+	.np-select {
 		all: unset;
 		&,
 		&::picker(select) {
@@ -277,6 +284,10 @@
 		font-size: 0.75rem;
 	}
 
+	.asterisk label::after {
+		content: '*';
+	}
+
 	.np-select-outline label {
 		transform: translateY(-0.5rem);
 	}
@@ -286,7 +297,7 @@
 		transform: translateY(0.5rem);
 	}
 
-	.label-animate label {
+	.animate-label label {
 		transition-property: font-size;
 		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 		transition-duration: 150ms;
@@ -296,7 +307,7 @@
 		color: var(--np-color-primary);
 	}
 
-	.label-animate:not(.is-empty) .np-select-outline label {
+	.animate-label:not(.is-empty) .np-select-outline label {
 		animation: slideUpOutline 150ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
 	}
 
@@ -309,7 +320,7 @@
 		}
 	}
 
-	.label-animate:not(.is-empty) .np-select-filled label {
+	.animate-label:not(.is-empty) .np-select-filled label {
 		animation: slideUpFilled 150ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
 	}
 
@@ -329,7 +340,7 @@
 		position: absolute;
 	}
 
-	.is-empty.label-animate .np-select-outline label {
+	.is-empty.animate-label .np-select-outline label {
 		animation: slideDownOutline 150ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
 	}
 
@@ -347,7 +358,7 @@
 		transform: translateY(1.25rem);
 	}
 
-	.is-empty.label-animate .np-select-filled label {
+	.is-empty.animate-label .np-select-filled label {
 		animation: slideDownFilled 150ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
 	}
 

package/dist/select/Option.svelte

@@ -24,6 +24,7 @@
 
 <style>
 	option {
+		all: unset;
 		cursor: pointer;
 		position: relative;
 		display: flex;
@@ -31,6 +32,7 @@
 		gap: 0.75rem;
 		height: 2rem;
 		background: var(--np-surface);
+		align-items: center;
 
 		&:checked {
 			background-color: var(--np-color-secondary-container);

package/package.json

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