noph-ui 0.45.1 → 0.46.1

package/dist/date-picker/DockedDatePicker.svelte

@@ -35,6 +35,7 @@
 	let {
 		value = $bindable(),
 		defaultValue,
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars -- pulled out of the rest props on purpose
 		type,
 		'aria-invalid': ariaInvalid,
 		style,

package/dist/date-picker/DockedDateTimePicker.svelte

@@ -49,6 +49,7 @@
 	let {
 		value = $bindable(),
 		defaultValue,
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars -- pulled out of the rest props on purpose
 		type,
 		'aria-invalid': ariaInvalid,
 		style,

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,4 +1,5 @@
 <script lang="ts">
+	import { flushSync } from 'svelte'
 	import '../internal/focus-ring.css'
 	import IconButton from '../button/IconButton.svelte'
 	import ArrowBackIcon from '../icons/ArrowBackIcon.svelte'
@@ -34,8 +35,29 @@
 
 	let pointerFocus = false
 	let focusRing = $state(false)
+	let pointerInside = false
+
+	export const show = () => {
+		expanded = true
+		pointerFocus = true
+		flushSync()
+		inputElement?.focus()
+	}
+
+	export const close = () => {
+		expanded = false
+		inputElement?.blur()
+	}
 </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}
@@ -52,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)
 	}}
 >
@@ -388,4 +411,14 @@
 	.np-search-divided.np-search-full-screen.np-search-expanded .np-search-bar {
 		height: 4.5rem;
 	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		@starting-style {
+			.np-search-full-screen.np-search-expanded,
+			.np-search-divided.np-search-full-screen.np-search-expanded {
+				padding-block-start: 0;
+				padding-inline: var(--np-search-pane-margin, 1.5rem);
+			}
+		}
+	}
 </style>

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

@@ -1,5 +1,8 @@
 import '../internal/focus-ring.css';
 import type { SearchProps } from './types.ts';
-declare const Search: import("svelte").Component<SearchProps, {}, "element" | "value" | "inputElement" | "expanded">;
+declare const Search: import("svelte").Component<SearchProps, {
+    show: () => void;
+    close: () => void;
+}, "element" | "value" | "inputElement" | "expanded">;
 type Search = ReturnType<typeof Search>;
 export default 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.45.1",
+  "version": "0.46.1",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {