noph-ui 0.10.12 → 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/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 || ''

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.12",
+  "version": "0.10.13",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {

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 };