noph-ui 0.29.4 → 0.30.0

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/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/snackbar/Snackbar.svelte

@@ -14,6 +14,7 @@
 		},
 		showPopover = $bindable(),
 		hidePopover = $bindable(),
+		open = $bindable(false),
 		onbeforetoggle,
 		timeout = 4000,
 		element = $bindable(),
@@ -42,10 +43,10 @@
 	aria-labelledby="np-snackbar-label-{uid}"
 	onbeforetoggle={(event) => {
 		let { newState } = event
-		if (newState === 'closed') {
+		open = newState === 'open'
+		if (!open) {
 			clearTimeout(timeoutId)
-		}
-		if (newState === 'open' && timeout > 0) {
+		} else if (timeout > 0) {
 			timeoutId = setTimeout(() => {
 				element?.hidePopover()
 			}, timeout)

package/dist/snackbar/Snackbar.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { SnackbarProps } from './types.ts';
-declare const Snackbar: import("svelte").Component<SnackbarProps, {}, "element" | "showPopover" | "hidePopover">;
+declare const Snackbar: import("svelte").Component<SnackbarProps, {}, "element" | "showPopover" | "hidePopover" | "open">;
 type Snackbar = ReturnType<typeof Snackbar>;
 export default Snackbar;

package/dist/snackbar/types.d.ts

@@ -2,6 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 export interface SnackbarProps extends HTMLAttributes<HTMLDivElement> {
     label: string;
+    open?: boolean;
     supportingText?: string | undefined;
     actionLabel?: string | undefined;
     onActionClick?: (event: Event) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.29.4",
+  "version": "0.30.0",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {