noph-ui 0.26.1 → 0.26.3

package/dist/select/NativeSelect.svelte

@@ -40,8 +40,9 @@
 		errorRaw && 'error',
 		disabled && 'disabled',
 		required && !noAsterisk && 'asterisk',
-		(value === undefined || value === '' || value === null) && 'is-empty',
-		animateLabel && 'label-animate',
+		!value && 'is-empty',
+		animateLabel && 'animate-label',
+		attributes.class,
 	]}
 	aria-disabled={disabled}
 >
@@ -63,12 +64,14 @@
 		</div>
 		<div class="np-select-state-layer"></div>
 	{/if}
-	<svg class="arrow" height="5" viewBox="7 10 10 5" focusable="false">
+	<svg class="arrow" height="6" viewBox="7 10 10 5" focusable="false">
 		<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) => {
@@ -86,6 +89,7 @@
 		aria-invalid={error}
 		bind:value
 		{...attributes}
+		class="np-select"
 	>
 		{@render children?.()}
 	</select>
@@ -103,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) {
@@ -145,13 +148,15 @@
 	}
 
 	.outlined select {
-		padding: 1rem;
+		padding-inline-start: 1rem;
+		padding-block: 1rem;
+		padding-inline-end: 3.25rem;
 	}
 
 	.filled select {
-		padding-inline: 1rem;
+		padding-inline-start: 1rem;
 		padding-block-start: 1.5rem;
-		padding-block-end: 0.5rem;
+		padding-inline-end: 3.25rem;
 	}
 
 	.np-select-outline {
@@ -197,11 +202,13 @@
 	}
 
 	.arrow {
+		padding-inline: 0.375rem;
+		padding-block: 0.5625rem;
 		fill: currentColor;
 		position: absolute;
 		pointer-events: none;
 		inset-inline-end: 0.75rem;
-		inset-block-start: calc(1.75rem - 3px);
+		inset-block-start: 1rem;
 		transition: rotate var(--easing-fast);
 	}
 
@@ -294,7 +301,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;
@@ -304,7 +311,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;
 	}
 
@@ -317,7 +324,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;
 	}
 
@@ -337,7 +344,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;
 	}
 
@@ -355,7 +362,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

@@ -25,7 +25,6 @@
 <style>
 	option {
 		all: unset;
-		cursor: pointer;
 		position: relative;
 		display: flex;
 		padding: 0.5rem 1rem;

package/package.json

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