noph-ui 0.46.0 → 0.46.1

package/dist/dialog/Dialog.svelte

@@ -9,6 +9,7 @@
 		quick = false,
 		children,
 		headline,
+		headlineLevel = 2,
 		icon,
 		supportingText,
 		actions,
@@ -61,13 +62,14 @@
 			</div>
 		{/if}
 		{#if headline}
-			<h1
+			<svelte:element
+				this={`h${headlineLevel}`}
 				id="{uid}-dialog-headline"
 				class="np-dialog-headline"
 				style={icon ? 'text-align: center' : ''}
 			>
 				{headline}
-			</h1>
+			</svelte:element>
 		{/if}
 		{#if supportingText}
 			<p id="{uid}-dialog-supporting-text" class="np-dialog-supporting-text">{supportingText}</p>

package/dist/dialog/types.d.ts

@@ -3,6 +3,7 @@ import type { HTMLDialogAttributes } from 'svelte/elements';
 export interface DialogProps extends Omit<HTMLDialogAttributes, 'open'> {
     icon?: Snippet;
     headline?: string;
+    headlineLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     supportingText?: string;
     divider?: boolean;
     actions?: Snippet;

package/dist/list/index.d.ts

@@ -1,2 +1,3 @@
+export { default as Item } from './Item.svelte';
 export { default as List } from './List.svelte';
 export { default as ListItem } from './ListItem.svelte';

package/dist/list/index.js

@@ -1,2 +1,3 @@
+export { default as Item } from './Item.svelte';
 export { default as List } from './List.svelte';
 export { default as ListItem } from './ListItem.svelte';

package/dist/search/Search.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { tick } from 'svelte'
+	import { flushSync } from 'svelte'
 	import '../internal/focus-ring.css'
 	import IconButton from '../button/IconButton.svelte'
 	import ArrowBackIcon from '../icons/ArrowBackIcon.svelte'
@@ -35,11 +35,12 @@
 
 	let pointerFocus = false
 	let focusRing = $state(false)
+	let pointerInside = false
 
-	export const show = async () => {
+	export const show = () => {
 		expanded = true
 		pointerFocus = true
-		await tick()
+		flushSync()
 		inputElement?.focus()
 	}
 
@@ -49,6 +50,14 @@
 	}
 </script>
 
+<svelte:window
+	onpointerdown={(event) => {
+		pointerInside = event.target instanceof Node && element?.contains(event.target) === true
+	}}
+	onpointercancel={() => (pointerInside = false)}
+	onclick={() => (pointerInside = false)}
+/>
+
 <div
 	{...attributes}
 	bind:this={element}
@@ -65,7 +74,8 @@
 	}}
 	onfocusout={(event) => {
 		const next = event.relatedTarget
-		if (expanded && !(next instanceof Node && element?.contains(next))) expanded = false
+		if (expanded && !pointerInside && !(next instanceof Node && element?.contains(next)))
+			expanded = false
 		attributes.onfocusout?.(event)
 	}}
 >

package/dist/search/Search.svelte.d.ts

@@ -1,7 +1,7 @@
 import '../internal/focus-ring.css';
 import type { SearchProps } from './types.ts';
 declare const Search: import("svelte").Component<SearchProps, {
-    show: () => Promise<void>;
+    show: () => void;
     close: () => void;
 }, "element" | "value" | "inputElement" | "expanded">;
 type Search = ReturnType<typeof Search>;

package/dist/sheet/Sheet.svelte

@@ -8,6 +8,7 @@
 		placement = 'bottom',
 		handle = true,
 		headline,
+		headlineLevel = 2,
 		action,
 		children,
 		element = $bindable(),
@@ -63,7 +64,9 @@
 	{#if headline || action}
 		<div class="np-sheet-header">
 			{#if headline}
-				<h2 id={headlineId} class="np-sheet-headline">{headline}</h2>
+				<svelte:element this={`h${headlineLevel}`} id={headlineId} class="np-sheet-headline">
+					{headline}
+				</svelte:element>
 			{/if}
 			{#if action}
 				<div class="np-sheet-action">{@render action()}</div>

package/dist/sheet/types.d.ts

@@ -6,6 +6,7 @@ export interface SheetProps extends Omit<HTMLDialogAttributes, 'open'> {
     placement?: 'bottom' | 'top' | 'start' | 'end';
     handle?: boolean;
     headline?: string;
+    headlineLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     action?: Snippet;
     element?: HTMLDialogElement;
 }

package/package.json

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