noph-ui 0.32.6 → 0.32.8

package/dist/badge/Badge.svelte

@@ -3,6 +3,7 @@
 </script>
 
 <div
+	aria-hidden="true"
 	class={[
 		'np-badge-container',
 		label === undefined ? 'np-badge-container-no-label' : 'np-badge-container-label',

package/dist/card/Card.svelte

@@ -21,16 +21,15 @@
 	let focused = $state(false)
 
 	$effect(() => {
-		if (disabled && element) {
-			// eslint-disable-next-line no-undef
-			const formElements: NodeListOf<
-				HTMLButtonElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
-			> = element.querySelectorAll('input, button, select, textarea')
+		if (!element) return
+		// eslint-disable-next-line no-undef
+		const formElements: NodeListOf<
+			HTMLButtonElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+		> = element.querySelectorAll('input, button, select, textarea')
 
-			formElements.forEach((element) => {
-				element.disabled = disabled
-			})
-		}
+		formElements.forEach((el) => {
+			el.disabled = disabled
+		})
 	})
 </script>
 
@@ -167,7 +166,6 @@
 	}
 	.np-card-container {
 		font: inherit;
-		box-sizing: border-box;
 		text-align: start;
 		display: inline-flex;
 		flex-direction: column;
@@ -210,10 +208,8 @@
 		width: 100%;
 		height: 200px;
 		overflow: hidden;
-		justify-content: center;
 		background-size: cover;
 		background-position: 50%;
-		align-items: center;
 		border-radius: var(--border-radius);
 	}
 	.np-card-content {

package/dist/chip/FilterChip.svelte

@@ -25,25 +25,14 @@
 	let chipLabel: HTMLLabelElement | undefined = $state()
 
 	$effect(() => {
-		if (group && value) {
-			selected = group.includes(value)
-		}
-	})
-
-	$effect(() => {
-		if (value && group) {
-			const index = group.indexOf(value)
-			if (selected) {
-				if (index < 0) {
-					group?.push(value)
-					group = group
-				}
-			} else {
-				if (index >= 0) {
-					group.splice(index, 1)
-					group = group
-				}
-			}
+		if (!group || !value) return
+		const included = group.includes(value)
+		if (selected && !included) {
+			group = [...group, value]
+		} else if (!selected && included) {
+			group = group.filter((v) => v !== value)
+		} else if (included !== selected) {
+			selected = included
 		}
 	})
 </script>

package/dist/chip/InputChip.svelte

@@ -59,17 +59,6 @@
 </div>
 
 <style>
-	.np-skeleton {
-		height: 2rem;
-		line-height: 1.25rem;
-		font-size: 0.875rem;
-		font-weight: 500;
-		opacity: 0;
-		display: flex;
-		align-items: center;
-		padding-inline-start: 1rem;
-		padding-inline-end: 2rem;
-	}
 	.np-input-chip {
 		position: relative;
 		display: inline-flex;

package/dist/dialog/Dialog.svelte

@@ -45,7 +45,7 @@
 		role="dialog"
 		aria-modal="true"
 		aria-labelledby="{uid}-dialog-headline"
-		aria-describedby="{uid}-dialog-supporting-text"
+		aria-describedby={supportingText ? '{uid}-dialog-supporting-text' : undefined}
 	>
 		{#if icon}
 			<div class="np-dialog-icon">

package/dist/menu/Menu.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { onMount } from 'svelte'
 	import type { MenuProps } from './types.ts'
+	import { on } from 'svelte/events'
 
 	let {
 		children,
@@ -79,23 +79,12 @@
 		return window
 	}
 
-	const onScroll = () => {
-		refreshValues()
-	}
-
 	const attachScrollableParent = (el: HTMLDivElement) => {
 		if (!('anchorName' in document.documentElement.style)) {
-			getScrollableParent(el).addEventListener('scroll', onScroll, { passive: true })
+			const parent = getScrollableParent(el)
+			return on(parent, 'scroll', refreshValues, { passive: true })
 		}
 	}
-
-	onMount(() => {
-		return () => {
-			if (element && !('anchorName' in document.documentElement.style)) {
-				getScrollableParent(element).removeEventListener('scroll', onScroll)
-			}
-		}
-	})
 </script>
 
 <svelte:window bind:innerHeight onresize={refreshValues} />

package/dist/navigation-rail/NavigationRailItem.svelte

@@ -20,6 +20,7 @@
 	<a
 		{...attributes}
 		class={['np-navigation-action', selected && 'np-navigation-action-selected', attributes.class]}
+		aria-current={selected ? 'page' : undefined}
 	>
 		{@render content()}
 	</a>
@@ -27,6 +28,7 @@
 	<button
 		{...attributes as HTMLButtonAttributes}
 		class={['np-navigation-action', selected && 'np-navigation-action-selected', attributes.class]}
+		aria-pressed={selected ? 'true' : undefined}
 	>
 		{@render content()}
 	</button>

package/dist/ripple/Ripple.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { on } from 'svelte/events'
 	import type { RippleProps } from './types.ts'
 
 	let {
@@ -258,43 +259,32 @@
 		endPressAnimation()
 	}
 
-	const removeEvents = (el: HTMLElement) => {
-		el.removeEventListener('click', handleClick)
-		el.removeEventListener('contextmenu', handleContextmenu)
-		el.removeEventListener('pointercancel', handlePointercancel)
-		el.removeEventListener('pointerdown', handlePointerdown)
-		el.removeEventListener('pointerenter', handlePointerenter)
-		el.removeEventListener('pointerleave', handlePointerleave)
-		el.removeEventListener('pointerup', handlePointerup)
-	}
-
 	const addEvents = (el: HTMLElement) => {
-		removeEvents(el)
-
-		el.addEventListener('click', handleClick)
-		el.addEventListener('contextmenu', handleContextmenu)
-		el.addEventListener('pointercancel', handlePointercancel)
-		el.addEventListener('pointerdown', handlePointerdown)
-		el.addEventListener('pointerenter', handlePointerenter)
-		el.addEventListener('pointerleave', handlePointerleave)
-		el.addEventListener('pointerup', handlePointerup)
+		const click = on(el, 'click', handleClick)
+		const contextmenu = on(el, 'contextmenu', handleContextmenu)
+		const pointercancel = on(el, 'pointercancel', handlePointercancel)
+		const pointerdown = on(el, 'pointerdown', handlePointerdown)
+		const pointerenter = on(el, 'pointerenter', handlePointerenter)
+		const pointerleave = on(el, 'pointerleave', handlePointerleave)
+		const pointerup = on(el, 'pointerup', handlePointerup)
+		return () => {
+			click()
+			contextmenu()
+			pointercancel()
+			pointerdown()
+			pointerenter()
+			pointerleave()
+			pointerup()
+		}
 	}
 
 	$effect(() => {
 		const forcedColors = window?.matchMedia('(forced-colors: active)')
 		if (!forcedColors.matches && forElement) {
-			addEvents(forElement)
+			return addEvents(forElement)
 		} else {
 			if (!forcedColors.matches && element) {
-				addEvents(element)
-			}
-		}
-		return () => {
-			if (forElement) {
-				removeEvents(forElement)
-			}
-			if (element) {
-				removeEvents(element)
+				return addEvents(element)
 			}
 		}
 	})

package/dist/tooltip/Tooltip.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { onMount } from 'svelte'
 	import type { TooltipProps } from './types.ts'
 	import { MediaQuery } from 'svelte/reactivity'
+	import { on } from 'svelte/events'
 
 	let {
 		children,
@@ -49,10 +49,16 @@
 				anchor.style.setProperty('anchor-name', generatedId)
 			}
 		}
-		anchor.addEventListener('mouseenter', showPopover)
-		anchor.addEventListener('mouseleave', onLeave)
-		anchor.addEventListener('focus', onAnchorFocus)
-		anchor.addEventListener('blur', hidePopover)
+		const mouseEnter = on(anchor, 'mouseenter', showPopover)
+		const mouseLeave = on(anchor, 'mouseleave', onLeave)
+		const focus = on(anchor, 'focus', onAnchorFocus)
+		const blur = on(anchor, 'blur', hidePopover)
+		return () => {
+			mouseEnter()
+			mouseLeave()
+			focus()
+			blur()
+		}
 	}
 
 	const onAnchorFocus = (e: FocusEvent) => {
@@ -77,17 +83,6 @@
 		// 	hidePopover()
 		// }, 500)
 	}
-
-	onMount(() => {
-		return () => {
-			if (anchor) {
-				anchor.removeEventListener('mouseenter', showPopover)
-				anchor.removeEventListener('mouseleave', onLeave)
-				anchor.removeEventListener('focus', onAnchorFocus)
-				anchor.removeEventListener('blur', hidePopover)
-			}
-		}
-	})
 </script>
 
 <svelte:window bind:innerHeight />

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "noph-ui",
-	"version": "0.32.6",
+	"version": "0.32.8",
 	"license": "MIT",
 	"homepage": "https://noph.dev",
 	"repository": {
@@ -72,23 +72,23 @@
 		"@materialx/material-color-utilities": "^0.4.8",
 		"@playwright/test": "^1.58.2",
 		"@sveltejs/adapter-auto": "^7.0.1",
-		"@sveltejs/kit": "^2.53.4",
+		"@sveltejs/kit": "^2.55.0",
 		"@sveltejs/package": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "^7.0.0",
 		"@types/eslint": "^9.6.1",
-		"eslint": "^10.0.2",
+		"eslint": "^10.1.0",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.15.0",
+		"eslint-plugin-svelte": "^3.16.0",
 		"globals": "^17.4.0",
 		"prettier": "^3.8.1",
 		"prettier-plugin-svelte": "^3.5.1",
 		"publint": "^0.3.18",
-		"svelte": "^5.53.7",
-		"svelte-check": "^4.4.4",
-		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.56.1",
-		"vite": "8.0.0-beta.16",
-		"vitest": "^4.0.18"
+		"svelte": "^5.55.0",
+		"svelte-check": "^4.4.5",
+		"typescript": "^6.0.2",
+		"typescript-eslint": "^8.57.2",
+		"vite": "8.0.3",
+		"vitest": "^4.1.2"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",