noph-ui 0.29.5 → 0.30.1

package/dist/chip/InputChip.svelte

@@ -2,7 +2,6 @@
 	import IconButton from '../button/IconButton.svelte'
 	import CloseIcon from '../icons/CloseIcon.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
-	import { onMount } from 'svelte'
 	import type { InputChipProps } from './types.ts'
 
 	let {
@@ -19,26 +18,6 @@
 	}: InputChipProps = $props()
 
 	let chipLabel: HTMLDivElement | undefined = $state()
-	let visible = $state(false)
-
-	onMount(() => {
-		const observer = new IntersectionObserver((entries) => {
-			entries.forEach((entry) => {
-				if (entry.isIntersecting) {
-					visible = true
-					observer.disconnect()
-				}
-			})
-		})
-
-		if (element) {
-			observer.observe(element)
-		}
-
-		return () => {
-			observer.disconnect()
-		}
-	})
 </script>
 
 <div
@@ -55,44 +34,37 @@
 		attributes.class,
 	]}
 >
-	{#if visible}
-		<div bind:this={chipLabel} class={['np-input-chip-label']}>
-			{#if icon}
-				<div class="np-chip-icon">
-					{@render icon()}
-				</div>
-			{/if}
-			<div class="np-chip-label">{label || value}</div>
-			<input type="hidden" {value} {name} {disabled} />
-		</div>
-		{#if !disabled}
-			<Ripple forElement={chipLabel} />
+	<div bind:this={chipLabel} class={['np-input-chip-label']}>
+		{#if icon}
+			<div class="np-chip-icon">
+				{@render icon()}
+			</div>
 		{/if}
-		<IconButton
-			{disabled}
-			type="button"
-			size="xs"
-			--np-icon-button-icon-size="1.125rem"
-			aria-label={ariaLabelRemove}
-			onclick={(
-				event: MouseEvent & {
-					currentTarget: EventTarget & HTMLButtonElement
-				},
-			) => {
-				if (element === undefined) {
-					return
-				}
-				onremove?.(event)
-			}}
-		>
-			<CloseIcon />
-		</IconButton>
-	{:else}
-		<div class="np-skeleton">
-			{label}
-			<input type="hidden" {value} {name} {disabled} />
-		</div>
+		<div class="np-chip-label">{label || value}</div>
+		<input type="hidden" {value} {name} {disabled} />
+	</div>
+	{#if !disabled}
+		<Ripple forElement={chipLabel} />
 	{/if}
+	<IconButton
+		{disabled}
+		type="button"
+		size="xs"
+		--np-icon-button-icon-size="1.125rem"
+		aria-label={ariaLabelRemove}
+		onclick={(
+			event: MouseEvent & {
+				currentTarget: EventTarget & HTMLButtonElement
+			},
+		) => {
+			if (element === undefined) {
+				return
+			}
+			onremove?.(event)
+		}}
+	>
+		<CloseIcon />
+	</IconButton>
 </div>
 
 <style>

package/dist/list/Item.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
+	import { onMount } from 'svelte'
 	import type { FocusEventHandler } from 'svelte/elements'
 	import type { ItemProps } from './types.ts'
-	import { onMount } from 'svelte'
 
 	let {
 		selected = false,
@@ -14,14 +14,18 @@
 		onfocus,
 		onblur,
 		softFocus = false,
+		lazy = false,
 		...attributes
 	}: ItemProps = $props()
 
 	let focused = $derived(softFocus)
-	let visible = $state(false)
+	let visible = $state(!lazy)
 	let element: HTMLButtonElement | HTMLAnchorElement | HTMLDivElement | undefined = $state()
 	let observer: IntersectionObserver | undefined
 	onMount(() => {
+		if (!lazy) {
+			return
+		}
 		observer = new IntersectionObserver((entries) => {
 			entries.forEach((entry) => {
 				if (entry.isIntersecting) {
@@ -34,7 +38,7 @@
 		return () => observer?.disconnect()
 	})
 	$effect(() => {
-		if (element) {
+		if (element && lazy) {
 			observer?.observe(element)
 		}
 	})

package/dist/list/types.d.ts

@@ -7,6 +7,7 @@ interface ButtonProps extends HTMLButtonAttributes {
     variant: 'button';
     supportingText?: Snippet;
     softFocus?: boolean;
+    lazy?: boolean;
 }
 interface AnchorProps extends HTMLAnchorAttributes {
     selected?: boolean;
@@ -16,6 +17,7 @@ interface AnchorProps extends HTMLAnchorAttributes {
     variant: 'link';
     supportingText?: Snippet;
     softFocus?: boolean;
+    lazy?: boolean;
 }
 interface TextProps extends HTMLAttributes<HTMLDivElement> {
     selected?: boolean;
@@ -25,6 +27,7 @@ interface TextProps extends HTMLAttributes<HTMLDivElement> {
     variant?: 'text';
     supportingText?: Snippet;
     softFocus?: boolean;
+    lazy?: boolean;
 }
 export type ItemProps = ButtonProps | AnchorProps | TextProps;
 export type ListItemProps = ButtonProps | AnchorProps | TextProps;

package/dist/menu/Menu.svelte

@@ -140,14 +140,14 @@
 		padding: 0;
 		box-shadow: var(--np-elevation-2);
 		margin: var(--np-menu-margin, 2px);
+		justify-self: var(--np-menu-justify-self, anchor-center);
+		position-area: var(--np-menu-position-area, bottom center);
+		position-try: normal flip-block;
 	}
 
-	.np-menu-container[popover]:popover-open {
+	.np-menu-container:popover-open {
 		opacity: 1;
 		animation: fadeIn 0.2s linear;
-		justify-self: var(--np-menu-justify-self, anchor-center);
-		position-area: var(--np-menu-position-area, bottom center);
-		position-try: normal flip-block;
 	}
 	@keyframes fadeIn {
 		0% {

package/dist/menu/types.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { HTMLAttributes, HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
 export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
     children: Snippet;
     anchor?: HTMLElement | undefined;
@@ -13,6 +13,7 @@ interface ButtonProps extends HTMLButtonAttributes {
     start?: Snippet;
     end?: Snippet;
     supportingText?: Snippet;
+    lazy?: boolean;
 }
 interface AnchorProps extends HTMLAnchorAttributes {
     selected?: boolean;
@@ -20,6 +21,7 @@ interface AnchorProps extends HTMLAnchorAttributes {
     end?: Snippet;
     disabled?: boolean;
     supportingText?: Snippet;
+    lazy?: boolean;
 }
 export type MenuItemProps = ButtonProps | AnchorProps;
 export {};

package/dist/ripple/Ripple.svelte

@@ -8,7 +8,6 @@
 		...attributes
 	}: RippleProps = $props()
 	let pressed = $state(false)
-	let hovered = $state(false)
 
 	const PRESS_GROW_MS = 450
 	const MINIMUM_PRESS_MS = 225
@@ -151,9 +150,10 @@
 			return
 		}
 
-		await new Promise((resolve) => {
-			setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState)
-		})
+		// TODO This is buggy in async svelte
+		// await new Promise((resolve) => {
+		// 	setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState)
+		// })
 
 		if (growAnimation !== animation) {
 			return
@@ -166,20 +166,11 @@
 		return x >= left && x <= right && y >= top && y <= bottom
 	}
 
-	const handlePointerenter = (event: PointerEvent) => {
-		if (!shouldReactToEvent(event)) {
-			return
-		}
-
-		hovered = true
-	}
-
 	const handlePointerleave = (event: PointerEvent) => {
 		if (!shouldReactToEvent(event)) {
 			return
 		}
 
-		hovered = false
 		if (step !== 'INACTIVE') {
 			endPressAnimation()
 		}
@@ -263,7 +254,6 @@
 		el.removeEventListener('contextmenu', handleContextmenu)
 		el.removeEventListener('pointercancel', handlePointercancel)
 		el.removeEventListener('pointerdown', handlePointerdown)
-		el.removeEventListener('pointerenter', handlePointerenter)
 		el.removeEventListener('pointerleave', handlePointerleave)
 		el.removeEventListener('pointerup', handlePointerup)
 	}
@@ -275,7 +265,6 @@
 		el.addEventListener('contextmenu', handleContextmenu)
 		el.addEventListener('pointercancel', handlePointercancel)
 		el.addEventListener('pointerdown', handlePointerdown)
-		el.addEventListener('pointerenter', handlePointerenter)
 		el.addEventListener('pointerleave', handlePointerleave)
 		el.addEventListener('pointerup', handlePointerup)
 	}
@@ -305,7 +294,7 @@
 	{...attributes}
 	class={[
 		pressed && 'np-ripple-pressed',
-		(hovered || forceHover) && 'np-ripple-hovered',
+		forceHover && 'np-ripple-hovered',
 		'np-ripple-surface',
 		attributes.class,
 	]}

package/dist/tooltip/Tooltip.svelte

@@ -123,13 +123,13 @@
 		border-radius: 0.25rem;
 		line-height: 1rem;
 		font-size: 0.75rem;
+		justify-self: var(--np-tooltip-justify-self, anchor-center);
+		position-area: var(--np-tooltip-position-area, top);
+		position-try: normal flip-block;
 	}
 	.np-tooltip:popover-open {
 		opacity: 1;
 		animation: scaleIn 0.3s ease;
-		justify-self: var(--np-tooltip-justify-self, anchor-center);
-		position-area: var(--np-tooltip-position-area, top);
-		position-try: normal flip-block;
 	}
 
 	@keyframes scaleIn {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.29.5",
+  "version": "0.30.1",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {
@@ -54,27 +54,27 @@
     "svelte": "^5.40.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.37.0",
+    "@eslint/js": "^9.39.1",
     "@material/material-color-utilities": "^0.3.0",
-    "@playwright/test": "^1.56.0",
-    "@sveltejs/adapter-auto": "^6.1.1",
-    "@sveltejs/kit": "^2.46.5",
+    "@playwright/test": "^1.56.1",
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/kit": "^2.48.4",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/eslint": "^9.6.1",
-    "eslint": "^9.37.0",
+    "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.12.4",
-    "globals": "^16.4.0",
+    "eslint-plugin-svelte": "^3.13.0",
+    "globals": "^16.5.0",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
-    "publint": "^0.3.14",
-    "svelte": "^5.40.0",
+    "publint": "^0.3.15",
+    "svelte": "^5.43.3",
     "svelte-check": "^4.3.3",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.1",
-    "vite": "^7.1.10",
-    "vitest": "^3.2.4"
+    "typescript-eslint": "^8.46.3",
+    "vite": "^7.1.12",
+    "vitest": "^4.0.6"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",