noph-ui 0.8.9 → 0.8.11

package/dist/card/Card.svelte

@@ -28,6 +28,16 @@
 			})
 		}
 	})
+	$effect(() => {
+		if (element) {
+			element.addEventListener('focus', () => {
+				focused = true
+			})
+			element.addEventListener('blur', () => {
+				focused = false
+			})
+		}
+	})
 </script>
 
 {#snippet content()}
@@ -78,15 +88,9 @@
 	</div>
 {:else if attributes.type === 'button'}
 	<button
+		aria-disabled={disabled}
 		{...attributes}
 		bind:this={element}
-		aria-disabled={disabled}
-		onfocusin={() => {
-			focused = true
-		}}
-		onfocusout={() => {
-			focused = false
-		}}
 		{disabled}
 		class={[
 			'np-card-container',

package/dist/dialogs/Dialog.svelte

@@ -67,6 +67,8 @@
 		border-radius: var(--np-shape-corner-extra-large);
 		box-shadow: var(--np-elevation-3);
 		max-height: 100dvh;
+		scrollbar-color: var(--np-color-on-surface-variant) transparent;
+		scrollbar-width: thin;
 		transition:
 			display 0.2s allow-discrete,
 			overlay 0.2s allow-discrete,

package/dist/list/Item.svelte

@@ -13,6 +13,17 @@
 	}: ItemProps = $props()
 
 	let focused = $state(false)
+	let element: HTMLButtonElement | HTMLAnchorElement | undefined = $state()
+	$effect(() => {
+		if (element) {
+			element.addEventListener('focus', () => {
+				focused = true
+			})
+			element.addEventListener('blur', () => {
+				focused = false
+			})
+		}
+	})
 </script>
 
 {#snippet content()}
@@ -56,23 +67,13 @@
 	<button
 		{...attributes}
 		class={['np-item', selected && 'selected', attributes.class]}
-		onfocus={() => {
-			focused = true
-		}}
-		onfocusout={() => {
-			focused = false
-		}}>{@render content()}</button
+		bind:this={element}>{@render content()}</button
 	>
 {:else if attributes.variant === 'link'}
 	<a
 		{...attributes}
 		class={['np-item', selected && 'selected', attributes.class]}
-		onfocus={() => {
-			focused = true
-		}}
-		onfocusout={() => {
-			focused = false
-		}}>{@render content()}</a
+		bind:this={element}>{@render content()}</a
 	>
 {/if}
 

package/dist/menu/Menu.svelte

@@ -50,6 +50,23 @@
 
 	$effect(() => {
 		if (anchor && element) {
+			element.addEventListener('toggle', (event) => {
+				const { newState, currentTarget } = event as ToggleEvent & {
+					currentTarget: EventTarget & HTMLDivElement
+				}
+				if (newState === 'open') {
+					const rect = currentTarget.getBoundingClientRect()
+					const viewportHeight = window.innerHeight
+
+					if (rect.bottom > viewportHeight) {
+						const maxHeight = viewportHeight - rect.top - 18
+						currentTarget.style.maxHeight = `${maxHeight}px`
+					}
+				}
+				if (newState === 'closed') {
+					currentTarget.style.maxHeight = '80dvh'
+				}
+			})
 			if (!('anchorName' in document.documentElement.style)) {
 				anchor.addEventListener('click', () => {
 					refreshValues()
@@ -86,20 +103,6 @@
 	popover="auto"
 	class={[position, 'np-menu', attributes.class]}
 	role="menu"
-	ontoggle={(event) => {
-		if (event.newState === 'open') {
-			const rect = event.currentTarget.getBoundingClientRect()
-			const viewportHeight = window.innerHeight
-
-			if (rect.bottom > viewportHeight) {
-				const maxHeight = viewportHeight - rect.top - 18
-				event.currentTarget.style.maxHeight = `${maxHeight}px`
-			}
-		}
-		if (event.newState === 'closed') {
-			event.currentTarget.style.maxHeight = '80dvh'
-		}
-	}}
 >
 	{@render children()}
 </div>

package/dist/snackbar/Snackbar.svelte

@@ -31,25 +31,25 @@
 		element?.hidePopover()
 	}
 
-	const toggleHandler = (event: ToggleEvent) => {
-		if (event.newState === 'closed') {
+	const toggleHandler = (event: Event) => {
+		let { newState } = event as ToggleEvent
+		if (newState === 'closed') {
 			clearTimeout(timeoutId)
 		}
-		if (event.newState === 'open' && timeout > 0) {
+		if (newState === 'open' && timeout > 0) {
 			timeoutId = setTimeout(() => {
 				element?.hidePopover()
 			}, timeout)
 		}
 	}
+	$effect(() => {
+		if (element) {
+			element.addEventListener('beforetoggle', toggleHandler)
+		}
+	})
 </script>
 
-<div
-	{...attributes}
-	{popover}
-	class={['np-snackbar', attributes.class]}
-	onbeforetoggle={toggleHandler}
-	bind:this={element}
->
+<div {...attributes} {popover} class={['np-snackbar', attributes.class]} bind:this={element}>
 	<div class="np-snackbar-inner">
 		<div class="np-snackbar-label-container">
 			<div class="np-snackbar-label">{label}</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.8.9",
+  "version": "0.8.11",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {
@@ -66,11 +66,11 @@
     "prettier": "^3.4.2",
     "prettier-plugin-svelte": "^3.3.2",
     "publint": "^0.2.12",
-    "svelte": "^5.16.0",
+    "svelte": "^5.16.1",
     "svelte-check": "^4.1.1",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.19.0",
-    "vite": "^6.0.6",
+    "vite": "^6.0.7",
     "vitest": "^2.1.8"
   },
   "svelte": "./dist/index.js",