noph-ui 0.10.11 → 0.10.13

package/dist/button/Button.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
-	import { generateUUIDv4 } from '../utils.js'
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
 	import type { ButtonProps } from './types.ts'
 
@@ -17,7 +16,7 @@
 		...attributes
 	}: ButtonProps = $props()
 
-	let tooltipId = $state(title ? generateUUIDv4() : '')
+	let tooltipId = $state(title ? crypto.randomUUID() : '')
 
 	const isButton = (obj: unknown): obj is HTMLButtonAttributes => {
 		return (obj as HTMLAnchorAttributes).href === undefined

package/dist/button/IconButton.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
-	import { generateUUIDv4 } from '../utils.js'
 	import type { IconButtonProps } from './types.ts'
-	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
+	import type {
+		HTMLAnchorAttributes,
+		HTMLButtonAttributes,
+		MouseEventHandler,
+	} from 'svelte/elements'
 
 	let {
 		variant = 'text',
@@ -15,10 +18,11 @@
 		selected = false,
 		selectedIcon,
 		keepTooltipOnClick,
+		onclick,
 		...attributes
 	}: IconButtonProps = $props()
 
-	let tooltipId = $state(title ? generateUUIDv4() : '')
+	let tooltipId = $state(title ? crypto.randomUUID() : '')
 	let selectedState = $state(!toggle || selected)
 	let touchEl: HTMLSpanElement | undefined = $state()
 
@@ -28,14 +32,6 @@
 	const isLink = (obj: unknown): obj is HTMLAnchorAttributes => {
 		return (obj as HTMLAnchorAttributes).href !== undefined
 	}
-
-	$effect(() => {
-		if (toggle) {
-			element?.addEventListener('click', () => {
-				selectedState = !selectedState
-			})
-		}
-	})
 </script>
 
 {#snippet content()}
@@ -58,6 +54,12 @@
 		{...attributes as HTMLButtonAttributes}
 		{disabled}
 		bind:this={element}
+		onclick={(event) => {
+			if (toggle) {
+				selectedState = !selectedState
+			}
+			;(onclick as MouseEventHandler<HTMLButtonElement>)?.(event)
+		}}
 		class={[
 			'np-icon-button',
 			disabled ? `${variant}-disabled disabled` : `${variant} enabled`,

package/dist/card/Card.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
+	import type { FocusEventHandler } from 'svelte/elements'
 	import type { CardProps } from './types.ts'
 
 	let {
@@ -12,6 +13,8 @@
 		supportingText,
 		action,
 		children,
+		onblur,
+		onfocus,
 		...attributes
 	}: CardProps = $props()
 
@@ -28,16 +31,6 @@
 			})
 		}
 	})
-	$effect(() => {
-		if (element) {
-			element.addEventListener('focus', () => {
-				focused = true
-			})
-			element.addEventListener('blur', () => {
-				focused = false
-			})
-		}
-	})
 </script>
 
 {#snippet content()}
@@ -77,6 +70,12 @@
 		{...attributes}
 		bind:this={element}
 		aria-disabled={disabled}
+		onfocus={(event) => {
+			;(onfocus as FocusEventHandler<HTMLDivElement>)?.(event)
+		}}
+		onblur={(event) => {
+			;(onblur as FocusEventHandler<HTMLDivElement>)?.(event)
+		}}
 		class={[
 			'np-card-container',
 			`np-card-${variant}`,
@@ -91,6 +90,14 @@
 		aria-disabled={disabled}
 		{...attributes}
 		bind:this={element}
+		onfocus={(event) => {
+			focused = true
+			;(onfocus as FocusEventHandler<HTMLButtonElement>)?.(event)
+		}}
+		onblur={(event) => {
+			focused = false
+			;(onblur as FocusEventHandler<HTMLButtonElement>)?.(event)
+		}}
 		{disabled}
 		class={[
 			'np-card-container',
@@ -108,11 +115,13 @@
 		aria-disabled={disabled}
 		tabindex={disabled ? -1 : undefined}
 		role="link"
-		onfocusin={() => {
+		onfocus={(event) => {
 			focused = true
+			;(onfocus as FocusEventHandler<HTMLAnchorElement>)?.(event)
 		}}
-		onfocusout={() => {
+		onblur={(event) => {
 			focused = false
+			;(onblur as FocusEventHandler<HTMLAnchorElement>)?.(event)
 		}}
 		class={[
 			'np-card-container',

package/dist/list/Item.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
+	import type { FocusEventHandler } from 'svelte/elements'
 	import type { ItemProps } from './types.ts'
 
 	let {
@@ -8,22 +9,14 @@
 		end,
 		children,
 		supportingText,
+		onblur,
+		onfocus,
 		disabled = false,
 		...attributes
 	}: 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()}
@@ -60,12 +53,29 @@
 		{@render content()}
 	</div>
 {:else if attributes.variant === 'text' || attributes.variant === undefined}
-	<div {...attributes} class={['np-item', selected && 'selected', attributes.class]}>
+	<div
+		{...attributes}
+		onfocus={(event) => {
+			;(onfocus as FocusEventHandler<HTMLDivElement>)?.(event)
+		}}
+		onblur={(event) => {
+			;(onblur as FocusEventHandler<HTMLDivElement>)?.(event)
+		}}
+		class={['np-item', selected && 'selected', attributes.class]}
+	>
 		{@render content()}
 	</div>
 {:else if attributes.variant === 'button'}
 	<button
 		{...attributes}
+		onfocus={(event) => {
+			focused = true
+			;(onfocus as FocusEventHandler<HTMLButtonElement>)?.(event)
+		}}
+		onblur={(event) => {
+			focused = false
+			;(onblur as FocusEventHandler<HTMLButtonElement>)?.(event)
+		}}
 		class={['np-item', selected && 'selected', attributes.class]}
 		bind:this={element}
 		>{@render content()}
@@ -73,6 +83,14 @@
 {:else if attributes.variant === 'link'}
 	<a
 		{...attributes}
+		onfocus={(event) => {
+			focused = true
+			;(onfocus as FocusEventHandler<HTMLAnchorElement>)?.(event)
+		}}
+		onblur={(event) => {
+			focused = false
+			;(onblur as FocusEventHandler<HTMLAnchorElement>)?.(event)
+		}}
 		class={['np-item', selected && 'selected', attributes.class]}
 		bind:this={element}>{@render content()}</a
 	>

package/dist/menu/Menu.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { generateUUIDv4 } from '../utils.js'
 	import type { MenuProps } from './types.ts'
 
 	let {
@@ -75,7 +74,7 @@
 					{ passive: true },
 				)
 			} else if (!anchor.style.getPropertyValue('anchor-name')) {
-				const generatedId = `--${generateUUIDv4()}`
+				const generatedId = `--${crypto.randomUUID()}`
 				element.style.setProperty('position-anchor', generatedId)
 				anchor.style.setProperty('anchor-name', generatedId)
 			}

package/dist/select/Select.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import Menu from '../menu/Menu.svelte'
 	import { isFirstInvalidControlInForm } from '../text-field/report-validity.js'
-	import { generateUUIDv4 } from '../utils.js'
 	import type { SelectProps } from './types.ts'
 	import Item from '../list/Item.svelte'
 	import { tick } from 'svelte'
@@ -35,7 +34,7 @@
 	let selectElement: HTMLSelectElement | undefined = $state()
 	let menuElement: HTMLDivElement | undefined = $state()
 	let field: HTMLDivElement | undefined = $state()
-	let menuId = $state(`--select-${generateUUIDv4()}`)
+	let menuId = $state(`--select-${crypto.randomUUID()}`)
 	let menuOpen = $state(false)
 	let selectedLabel = $derived.by<string>(() => {
 		return options.find((option) => option.value === value)?.label || ''
@@ -51,19 +50,6 @@
 			selectElement.form?.addEventListener('reset', () => {
 				errorRaw = error
 			})
-			selectElement.addEventListener('invalid', (event) => {
-				event.preventDefault()
-				const { currentTarget } = event as Event & {
-					currentTarget: HTMLInputElement | HTMLTextAreaElement
-				}
-				errorRaw = true
-				if (errorText === '') {
-					errorTextRaw = currentTarget.validationMessage
-				}
-				if (isFirstInvalidControlInForm(currentTarget.form, currentTarget)) {
-					currentTarget.focus()
-				}
-			})
 		}
 	})
 </script>
@@ -167,6 +153,17 @@
 							{form}
 							{onchange}
 							{oninput}
+							oninvalid={(event) => {
+								event.preventDefault()
+								const { currentTarget } = event
+								errorRaw = true
+								if (errorText === '') {
+									errorTextRaw = currentTarget.validationMessage
+								}
+								if (isFirstInvalidControlInForm(currentTarget.form, currentTarget)) {
+									currentTarget.focus()
+								}
+							}}
 							bind:value
 							bind:this={selectElement}
 						>

package/dist/snackbar/Snackbar.svelte

@@ -14,6 +14,7 @@
 		},
 		showPopover = $bindable(),
 		hidePopover = $bindable(),
+		onbeforetoggle,
 		timeout = 3000,
 		element = $bindable(),
 		popover = 'auto',
@@ -30,9 +31,15 @@
 	hidePopover = () => {
 		element?.hidePopover()
 	}
+</script>
 
-	const toggleHandler = (event: Event) => {
-		let { newState } = event as ToggleEvent
+<div
+	{...attributes}
+	{popover}
+	class={['np-snackbar', attributes.class]}
+	bind:this={element}
+	onbeforetoggle={(event) => {
+		let { newState } = event
 		if (newState === 'closed') {
 			clearTimeout(timeoutId)
 		}
@@ -41,15 +48,9 @@
 				element?.hidePopover()
 			}, timeout)
 		}
-	}
-	$effect(() => {
-		if (element) {
-			element.addEventListener('beforetoggle', toggleHandler)
-		}
-	})
-</script>
-
-<div {...attributes} {popover} class={['np-snackbar', attributes.class]} bind:this={element}>
+		onbeforetoggle?.(event)
+	}}
+>
 	<div class="np-snackbar-inner">
 		<div class="np-snackbar-label-container">
 			<div class="np-snackbar-label">{label}</div>

package/dist/tooltip/Tooltip.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { generateUUIDv4 } from '../utils.js'
 	import type { TooltipProps } from './types.ts'
 
 	let {
@@ -46,7 +45,7 @@
 		if (anchor && element) {
 			if ('anchorName' in document.documentElement.style) {
 				const anchorName = anchor.style.getPropertyValue('anchor-name')
-				const generatedId = anchorName || `--${generateUUIDv4()}`
+				const generatedId = anchorName || `--${crypto.randomUUID()}`
 				element.style.setProperty('position-anchor', generatedId)
 				if (!anchorName) {
 					anchor.style.setProperty('anchor-name', generatedId)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.10.11",
+  "version": "0.10.13",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {
@@ -59,17 +59,17 @@
     "@sveltejs/package": "^2.3.9",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@types/eslint": "^9.6.1",
-    "eslint": "^9.18.0",
+    "eslint": "^9.19.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-svelte": "^2.46.1",
     "globals": "^15.14.0",
     "prettier": "^3.4.2",
     "prettier-plugin-svelte": "^3.3.3",
     "publint": "^0.3.2",
-    "svelte": "^5.19.2",
+    "svelte": "^5.19.3",
     "svelte-check": "^4.1.4",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.21.0",
+    "typescript-eslint": "^8.22.0",
     "vite": "^6.0.11",
     "vitest": "^3.0.4"
   },

package/dist/utils.d.ts

@@ -1,2 +0,0 @@
-declare const generateUUIDv4: () => string;
-export { generateUUIDv4 };

package/dist/utils.js

@@ -1,7 +0,0 @@
-const generateUUIDv4 = () => {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-        const r = (Math.random() * 16) | 0, v = c === 'x' ? r : (r & 0x3) | 0x8;
-        return v.toString(16);
-    });
-};
-export { generateUUIDv4 };