@x33025/sveltely 0.0.56 → 0.0.57

package/dist/components/AnimatedNumber.demo.svelte

@@ -0,0 +1,28 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'AnimatedNumber',
+		description: 'Spring-driven numeric transitions.',
+		isProminent: false
+	};
+</script>
+
+<script lang="ts">
+	import AnimatedNumber from './AnimatedNumber.svelte';
+
+	let value = $state(1234);
+
+	const bump = () => {
+		value += Math.round(100 + Math.random() * 900);
+	};
+</script>
+
+<div class="vstack center gap-3">
+	<AnimatedNumber {value} class="text-3xl font-semibold text-zinc-900" />
+	<button
+		type="button"
+		class="rounded-full bg-zinc-900 px-3 py-2 text-sm text-white"
+		onclick={bump}
+	>
+		Change number
+	</button>
+</div>

package/dist/components/AnimatedNumber.demo.svelte.d.ts

@@ -0,0 +1,9 @@
+export declare const demo: {
+    name: string;
+    description: string;
+    isProminent: boolean;
+};
+import AnimatedNumber from './AnimatedNumber.svelte';
+declare const AnimatedNumber: import("svelte").Component<Record<string, never>, {}, "">;
+type AnimatedNumber = ReturnType<typeof AnimatedNumber>;
+export default AnimatedNumber;

package/dist/components/AsyncButton.demo.svelte

@@ -0,0 +1,24 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'AsyncButton',
+		description: 'Async action button with loading and error states.'
+	};
+</script>
+
+<script lang="ts">
+	import { SaveIcon } from '@lucide/svelte';
+	import AsyncButton from './AsyncButton.svelte';
+
+	const runDemo = async () => {
+		await new Promise<void>((resolve) => {
+			setTimeout(resolve, 1000);
+		});
+	};
+</script>
+
+<AsyncButton
+	icon={SaveIcon}
+	label="Run async action"
+	action={runDemo}
+	class="rounded-full bg-zinc-900 px-3 py-2 text-sm text-white"
+/>

package/dist/components/AsyncButton.demo.svelte.d.ts

@@ -0,0 +1,23 @@
+export declare const demo: {
+    name: string;
+    description: string;
+};
+import AsyncButton from './AsyncButton.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const AsyncButton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AsyncButton = InstanceType<typeof AsyncButton>;
+export default AsyncButton;

package/dist/components/ChipInput.demo.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'ChipInput',
+		description: 'Editable chip list with bindable tags.',
+		isProminent: false
+	};
+</script>
+
+<script lang="ts">
+	import ChipInput from './ChipInput.svelte';
+
+	let tags = $state(['svelte', 'ui', 'search']);
+</script>
+
+<div class="vstack w-full max-w-sm gap-2">
+	<ChipInput bind:tags />
+	<p class="text-xs text-zinc-500">Tags: {tags.join(', ')}</p>
+</div>

package/dist/components/ChipInput.demo.svelte.d.ts

@@ -0,0 +1,9 @@
+export declare const demo: {
+    name: string;
+    description: string;
+    isProminent: boolean;
+};
+import ChipInput from './ChipInput.svelte';
+declare const ChipInput: import("svelte").Component<Record<string, never>, {}, "">;
+type ChipInput = ReturnType<typeof ChipInput>;
+export default ChipInput;

package/dist/components/Local/ComponentGrid.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+	import HeroCard from './HeroCard.svelte';
+
+	type DemoEntry = {
+		component: Component;
+		name: string;
+		description: string;
+		isProminent: boolean;
+		columnSpan?: 1 | 2;
+	};
+
+	type Props = {
+		demos: DemoEntry[];
+	};
+
+	let { demos }: Props = $props();
+</script>
+
+<div
+	class="component-grid grid gap-4 overflow-auto p-6 md:grid-flow-dense md:grid-cols-2 xl:grid-cols-3"
+>
+	{#each demos as entry}
+		{@const DemoComponent = entry.component}
+		<HeroCard
+			title={entry.name}
+			description={entry.description}
+			isProminent={entry.isProminent}
+			columnSpan={entry.columnSpan ?? 1}
+		>
+			<DemoComponent />
+		</HeroCard>
+	{/each}
+</div>
+
+<style>
+	.component-grid :global(.hero-card) {
+		min-height: 14rem;
+		border: 1px solid rgb(228 228 231);
+		border-radius: 1rem;
+		box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
+		align-items: stretch;
+	}
+
+	.component-grid :global(.hero-card h1) {
+		font-size: 1rem;
+		line-height: 1.5rem;
+	}
+
+	.component-grid :global(.hero-card p) {
+		max-width: none;
+	}
+</style>

package/dist/components/Local/ComponentGrid.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Component } from 'svelte';
+type DemoEntry = {
+    component: Component;
+    name: string;
+    description: string;
+    isProminent: boolean;
+    columnSpan?: 1 | 2;
+};
+type Props = {
+    demos: DemoEntry[];
+};
+declare const ComponentGrid: Component<Props, {}, "">;
+type ComponentGrid = ReturnType<typeof ComponentGrid>;
+export default ComponentGrid;

package/dist/components/Local/HeroCard.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		title?: string;
+		description?: string;
+		children?: Snippet;
+		isProminent?: boolean;
+		columnSpan?: 1 | 2;
+	};
+
+	let { title, description = '', children, isProminent = false, columnSpan = 1 }: Props = $props();
+</script>
+
+<div class="hero-card vstack gap-2" data-column-span={columnSpan}>
+	{#if title}
+		<h1 class="text-3xl font-semibold tracking-tight text-zinc-950">{title}</h1>
+		{#if description}
+			<p class="max-w-3xl text-sm text-zinc-600">{description}</p>
+		{/if}
+	{/if}
+	<div
+		class="hero-card-content center flex"
+		class:overflow-hidden={isProminent}
+		class:rounded-xl={isProminent}
+		class:bg-zinc-50={isProminent}
+		class:p-4={isProminent}
+	>
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.hero-card {
+		background: white;
+		padding: 1.5rem;
+	}
+
+	.hero-card-content {
+		min-height: 0;
+		flex: 1 1 auto;
+	}
+
+	@media (min-width: 48rem) {
+		.hero-card[data-column-span='2'] {
+			grid-column: span 2;
+		}
+	}
+</style>

package/dist/components/Local/HeroCard.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    title?: string;
+    description?: string;
+    children?: Snippet;
+    isProminent?: boolean;
+    columnSpan?: 1 | 2;
+};
+declare const HeroCard: import("svelte").Component<Props, {}, "">;
+type HeroCard = ReturnType<typeof HeroCard>;
+export default HeroCard;

package/dist/components/NavigationStack/NavigationStack.svelte

@@ -6,9 +6,10 @@
 		left?: Snippet;
 		right?: Snippet;
 		children?: Snippet;
+		chrome?: boolean;
 	}
 
-	let { left, right, children }: Props = $props();
+	let { left, right, children, chrome = true }: Props = $props();
 
 	const existingContext = getContext<{
 		leftOpen?: boolean;
@@ -38,14 +39,14 @@
 	});
 </script>
 
-<div class="hstack size-full">
+<div class="navigation-stack hstack size-full" data-chrome={chrome ? 'true' : 'false'}>
 	{#if left}
 		<div
-			class="h-full overflow-hidden border-r border-zinc-200 transition-all duration-300 ease-in-out"
+			class="navigation-stack-sidebar navigation-stack-sidebar-left h-full overflow-hidden transition-all duration-300 ease-in-out"
 			style="width: {leftOpen ? 'var(--navigation-stack-sidebar-width)' : '0'}"
 		>
 			<div
-				class="vstack h-full overflow-auto bg-zinc-50 p-4"
+				class="navigation-stack-sidebar-inner vstack h-full overflow-auto p-4"
 				style="width: var(--navigation-stack-sidebar-width);"
 			>
 				{@render left()}
@@ -53,7 +54,7 @@
 		</div>
 	{/if}
 
-	<div class="vstack flex-1">
+	<div class="navigation-stack-content vstack flex-1">
 		{#if children}
 			{@render children()}
 		{/if}
@@ -61,11 +62,11 @@
 
 	{#if right}
 		<div
-			class="h-full overflow-hidden border-l border-zinc-200 transition-all duration-300 ease-in-out"
+			class="navigation-stack-sidebar navigation-stack-sidebar-right h-full overflow-hidden transition-all duration-300 ease-in-out"
 			style="width: {rightOpen ? 'var(--navigation-stack-sidebar-width)' : '0'}"
 		>
 			<div
-				class="vstack h-full overflow-auto bg-zinc-50 p-4"
+				class="navigation-stack-sidebar-inner vstack h-full overflow-auto p-4"
 				style="width: var(--navigation-stack-sidebar-width);"
 			>
 				{@render right()}

package/dist/components/NavigationStack/NavigationStack.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     left?: Snippet;
     right?: Snippet;
     children?: Snippet;
+    chrome?: boolean;
 }
 declare const NavigationStack: import("svelte").Component<Props, {}, "">;
 type NavigationStack = ReturnType<typeof NavigationStack>;

package/dist/components/NavigationStack/Toolbar.svelte

@@ -4,19 +4,20 @@
 	interface Props {
 		header?: Snippet;
 		children?: Snippet;
+		chrome?: boolean;
 	}
 
-	let { header, children }: Props = $props();
+	let { header, children, chrome = true }: Props = $props();
 </script>
 
-<div class="vstack h-full">
+<div class="navigation-stack-toolbar-shell vstack h-full" data-chrome={chrome ? 'true' : 'false'}>
 	{#if header}
-		<div class="flex items-center gap-2 border-b border-zinc-200 bg-white p-2">
+		<div class="navigation-stack-toolbar flex items-center gap-2 p-2">
 			{@render header()}
 		</div>
 	{/if}
 
-	<div class="vstack h-full">
+	<div class="navigation-stack-toolbar-content vstack h-full">
 		{#if children}
 			{@render children()}
 		{/if}

package/dist/components/NavigationStack/Toolbar.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Snippet } from 'svelte';
 interface Props {
     header?: Snippet;
     children?: Snippet;
+    chrome?: boolean;
 }
 declare const Toolbar: import("svelte").Component<Props, {}, "">;
 type Toolbar = ReturnType<typeof Toolbar>;

package/dist/components/Pagination.demo.svelte

@@ -0,0 +1,27 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Pagination',
+		description: 'Pagination control with local demo state.',
+		isProminent: false,
+		columnSpan: 2
+	};
+</script>
+
+<script lang="ts">
+	import Pagination from './Pagination.svelte';
+
+	let data = $state({
+		view: 'list',
+		page: 3,
+		totalPages: 12,
+		hasNext: true
+	});
+
+	const onPageChange = (page: number) => {
+		data = { ...data, page, hasNext: page < data.totalPages };
+	};
+</script>
+
+<div class="w-fit">
+	<Pagination {data} showFirstLast={true} onPageChange={(page) => onPageChange(page)} />
+</div>

package/dist/components/Pagination.demo.svelte.d.ts

@@ -0,0 +1,10 @@
+export declare const demo: {
+    name: string;
+    description: string;
+    isProminent: boolean;
+    columnSpan: number;
+};
+import Pagination from './Pagination.svelte';
+declare const Pagination: import("svelte").Component<Record<string, never>, {}, "">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/components/Popover/Popover.demo.svelte

@@ -0,0 +1,35 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Popover',
+		description: 'Composable popover with trigger and content snippets.'
+	};
+</script>
+
+<script lang="ts">
+	import Popover from './Popover.svelte';
+	import SearchInput from '../SearchInput.svelte';
+
+	let search = $state('');
+</script>
+
+<Popover align="center">
+	{#snippet trigger()}
+		<button
+			type="button"
+			class="rounded-full border border-zinc-300 px-3 py-2 text-sm text-zinc-800"
+		>
+			Open popover
+		</button>
+	{/snippet}
+
+	<div class="vstack gap-2">
+		<label for="popover-demo-search" class="text-sm font-medium text-zinc-700">Search</label>
+		<SearchInput
+			id="popover-demo-search"
+			bind:value={search}
+			placeholder="Type to search..."
+			confirmText="Enter"
+			class="w-64"
+		/>
+	</div>
+</Popover>

package/dist/components/Popover/Popover.demo.svelte.d.ts

@@ -0,0 +1,8 @@
+export declare const demo: {
+    name: string;
+    description: string;
+};
+import Popover from './Popover.svelte';
+declare const Popover: import("svelte").Component<Record<string, never>, {}, "">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/components/Popover/Popover.svelte

@@ -224,6 +224,12 @@
 		}
 	}
 
+	function handleTriggerKeydown(event: KeyboardEvent) {
+		if (event.key !== 'Enter' && event.key !== ' ') return;
+		event.preventDefault();
+		toggle();
+	}
+
 	function handleOutsideClick(event: MouseEvent) {
 		if (!open) return;
 		if (isEventInPopoverTree(event)) return;
@@ -273,15 +279,17 @@
 	data-popover-parent-id={parentPopoverId ?? ''}
 >
 	<div bind:this={triggerEl}>
-		<button
-			type="button"
+		<div
 			class="text-left"
+			role="button"
+			tabindex="0"
 			onclick={toggle}
+			onkeydown={handleTriggerKeydown}
 			aria-expanded={open}
 			aria-haspopup="dialog"
 		>
 			{@render trigger()}
-		</button>
+		</div>
 	</div>
 
 	{#if open}

package/dist/components/SearchInput.demo.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'SearchInput',
+		description: 'Search field with icon, input, and optional confirmation hint.',
+		isProminent: false
+	};
+</script>
+
+<script lang="ts">
+	import SearchInput from './SearchInput.svelte';
+
+	let value = $state('');
+</script>
+
+<div class="vstack w-full max-w-sm gap-2">
+	<SearchInput bind:value placeholder="Search components..." confirmText="Enter" class="w-full" />
+	<p class="text-xs text-zinc-500">Value: {value || 'empty'}</p>
+</div>

package/dist/components/SearchInput.demo.svelte.d.ts

@@ -0,0 +1,9 @@
+export declare const demo: {
+    name: string;
+    description: string;
+    isProminent: boolean;
+};
+import SearchInput from './SearchInput.svelte';
+declare const SearchInput: import("svelte").Component<Record<string, never>, {}, "">;
+type SearchInput = ReturnType<typeof SearchInput>;
+export default SearchInput;

package/dist/components/SearchInput.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { SearchIcon } from '@lucide/svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	type Props = {
+		value?: string;
+		confirmText?: string | null;
+		inputClass?: string;
+	} & Omit<HTMLInputAttributes, 'children' | 'type' | 'value'>;
+
+	let {
+		value = $bindable(''),
+		confirmText = null,
+		inputClass = '',
+		class: className = '',
+		disabled = false,
+		placeholder = 'Search',
+		...props
+	}: Props = $props();
+</script>
+
+<label class="search-input {className}" data-disabled={disabled ? 'true' : 'false'}>
+	<span class="search-input-icon" aria-hidden="true">
+		<SearchIcon class="size-4" />
+	</span>
+	<input
+		type="search"
+		bind:value
+		{disabled}
+		{placeholder}
+		class="search-input-field {inputClass}"
+		{...props}
+	/>
+	{#if confirmText}
+		<span class="search-input-confirm">
+			{confirmText}
+		</span>
+	{/if}
+</label>

package/dist/components/SearchInput.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type Props = {
+    value?: string;
+    confirmText?: string | null;
+    inputClass?: string;
+} & Omit<HTMLInputAttributes, 'children' | 'type' | 'value'>;
+declare const SearchInput: import("svelte").Component<Props, {}, "value">;
+type SearchInput = ReturnType<typeof SearchInput>;
+export default SearchInput;

package/dist/components/SegmentedPicker.demo.svelte

@@ -0,0 +1,24 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'SegmentedPicker',
+		description: 'Segmented selection between fixed options.',
+		isProminent: false
+	};
+</script>
+
+<script lang="ts">
+	import SegmentedPicker from './SegmentedPicker.svelte';
+
+	const options = [
+		{ label: 'Day', value: 'day' },
+		{ label: 'Week', value: 'week', disabled: true },
+		{ label: 'Month', value: 'month' }
+	];
+
+	let value = $state('week');
+</script>
+
+<div class="vstack center gap-2">
+	<SegmentedPicker {options} bind:value />
+	<p class="text-xs text-zinc-500">Selected: {value}</p>
+</div>

package/dist/components/SegmentedPicker.demo.svelte.d.ts

@@ -0,0 +1,9 @@
+export declare const demo: {
+    name: string;
+    description: string;
+    isProminent: boolean;
+};
+import SegmentedPicker from './SegmentedPicker.svelte';
+declare const SegmentedPicker: import("svelte").Component<Record<string, never>, {}, "">;
+type SegmentedPicker = ReturnType<typeof SegmentedPicker>;
+export default SegmentedPicker;

package/dist/components/SegmentedPicker.svelte

@@ -2,6 +2,7 @@
 	type Option = {
 		label: string;
 		value: string;
+		disabled?: boolean;
 	};
 
 	let {
@@ -22,7 +23,16 @@
 	class:segmented-picker-disabled={disabled}
 >
 	{#each options as option}
-		{#if option.value === value}
+		{#if option.disabled}
+			<span
+				class={`segmented-picker-button segmented-picker-button-disabled ${
+					option.value === value ? 'segmented-picker-button-disabled-selected' : ''
+				}`}
+				aria-disabled="true"
+			>
+				{option.label}
+			</span>
+		{:else if option.value === value}
 			<span class="segmented-picker-button segmented-picker-button-active">{option.label}</span>
 		{:else}
 			<button

package/dist/components/SegmentedPicker.svelte.d.ts

@@ -1,6 +1,7 @@
 type Option = {
     label: string;
     value: string;
+    disabled?: boolean;
 };
 type $$ComponentProps = {
     options: Option[];

package/dist/components/Sheet/Sheet.demo.svelte

@@ -0,0 +1,38 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Sheet',
+		description: 'Overlay sheet with local open state.'
+	};
+</script>
+
+<script lang="ts">
+	import Sheet from './Sheet.svelte';
+
+	let open = $state(false);
+</script>
+
+<button
+	type="button"
+	class="rounded-full bg-zinc-900 px-3 py-2 text-sm text-white"
+	onclick={() => (open = true)}
+>
+	Open sheet
+</button>
+
+<Sheet bind:open label="Example Sheet">
+	<div class="vstack gap-3">
+		<p class="text-sm text-zinc-700">This is a simple sheet example.</p>
+		<div class="rounded border border-gray-200/70 p-3 text-sm text-gray-700">
+			<div>Panel one content.</div>
+			<div class="mt-2">Panel two content.</div>
+			<div class="mt-2">Panel three content.</div>
+		</div>
+		<button
+			type="button"
+			class="rounded-full border border-zinc-300 px-3 py-2 text-sm text-zinc-800"
+			onclick={() => (open = false)}
+		>
+			Close
+		</button>
+	</div>
+</Sheet>

package/dist/components/Sheet/Sheet.demo.svelte.d.ts

@@ -0,0 +1,8 @@
+export declare const demo: {
+    name: string;
+    description: string;
+};
+import Sheet from './Sheet.svelte';
+declare const Sheet: import("svelte").Component<Record<string, never>, {}, "">;
+type Sheet = ReturnType<typeof Sheet>;
+export default Sheet;

package/dist/components/Slider.demo.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Slider',
+		description: 'Range input with shared slider styling.',
+		isProminent: false
+	};
+</script>
+
+<script lang="ts">
+	import Slider from './Slider.svelte';
+
+	let value = $state(35);
+</script>
+
+<div class="vstack w-full max-w-sm gap-2">
+	<Slider bind:value min={0} max={100} class="w-full" />
+	<p class="text-xs text-zinc-500">Value: {value}</p>
+</div>

package/dist/components/Slider.demo.svelte.d.ts

@@ -0,0 +1,9 @@
+export declare const demo: {
+    name: string;
+    description: string;
+    isProminent: boolean;
+};
+import Slider from './Slider.svelte';
+declare const Slider: import("svelte").Component<Record<string, never>, {}, "">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/components/Spinner.demo.svelte

@@ -0,0 +1,12 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Spinner',
+		description: 'Small loading indicator.'
+	};
+</script>
+
+<script lang="ts">
+	import Spinner from './Spinner.svelte';
+</script>
+
+<Spinner class="size-6 text-zinc-700" />

package/dist/components/Spinner.demo.svelte.d.ts

@@ -0,0 +1,23 @@
+export declare const demo: {
+    name: string;
+    description: string;
+};
+import Spinner from './Spinner.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Spinner: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Spinner = InstanceType<typeof Spinner>;
+export default Spinner;

package/dist/components/Tooltip.demo.svelte

@@ -0,0 +1,16 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Tooltip',
+		description: 'Hover or focus a trigger to reveal contextual text.'
+	};
+</script>
+
+<script lang="ts">
+	import Tooltip from './Tooltip.svelte';
+</script>
+
+<Tooltip label="This is a tooltip">
+	<button type="button" class="rounded-full border border-zinc-300 px-3 py-2 text-sm text-zinc-800">
+		Hover me
+	</button>
+</Tooltip>

package/dist/components/Tooltip.demo.svelte.d.ts

@@ -0,0 +1,23 @@
+export declare const demo: {
+    name: string;
+    description: string;
+};
+import Tooltip from './Tooltip.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Tooltip: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Tooltip = InstanceType<typeof Tooltip>;
+export default Tooltip;

package/dist/index.d.ts

@@ -13,3 +13,4 @@ export { default as Tooltip } from './components/Tooltip.svelte';
 export { default as Popover } from './components/Popover';
 export { default as ChipInput } from './components/ChipInput.svelte';
 export { default as AsyncButton } from './components/AsyncButton.svelte';
+export { default as SearchInput } from './components/SearchInput.svelte';

package/dist/index.js

@@ -13,3 +13,4 @@ export { default as Tooltip } from './components/Tooltip.svelte';
 export { default as Popover } from './components/Popover';
 export { default as ChipInput } from './components/ChipInput.svelte';
 export { default as AsyncButton } from './components/AsyncButton.svelte';
+export { default as SearchInput } from './components/SearchInput.svelte';

package/dist/style/index.css

@@ -87,13 +87,50 @@
 	}
 
 	.pagination {
-		@apply gap-4;
+		@apply inline-flex w-fit gap-4;
 	}
 
 	.sidebar-toggle {
 		@apply rounded p-1.5 hover:bg-zinc-100;
 	}
 
+	.navigation-stack-sidebar-left {
+		@apply border-r border-zinc-200;
+	}
+
+	.navigation-stack-sidebar-right {
+		@apply border-l border-zinc-200;
+	}
+
+	.navigation-stack-sidebar-inner {
+		@apply bg-zinc-50;
+	}
+
+	.navigation-stack-toolbar {
+		@apply border-b border-zinc-200 bg-white;
+	}
+
+	.navigation-stack[data-chrome='false'] .navigation-stack-sidebar-left,
+	.navigation-stack[data-chrome='false'] .navigation-stack-sidebar-right {
+		@apply border-transparent;
+	}
+
+	.navigation-stack[data-chrome='false'] .navigation-stack-sidebar-inner {
+		@apply bg-transparent;
+	}
+
+	.navigation-stack-toolbar-shell[data-chrome='false'] .navigation-stack-toolbar {
+		@apply border-transparent bg-transparent;
+	}
+
+	.navigation-stack-toolbar-shell[data-chrome='false'] .navigation-stack-toolbar-content {
+		@apply bg-transparent;
+	}
+
+	.navigation-stack-toolbar-shell[data-chrome='false'] .sidebar-toggle {
+		@apply hover:bg-transparent;
+	}
+
 	.popover {
 		@apply border border-gray-200 bg-white p-1 shadow-md;
 	}
@@ -234,6 +271,43 @@
 	.segmented-picker-button-active {
 		@apply bg-white shadow-xs;
 	}
+
+	.segmented-picker-button-disabled {
+		@apply cursor-not-allowed text-zinc-400;
+		pointer-events: none;
+	}
+
+	.segmented-picker-button-disabled-selected {
+		@apply bg-zinc-200 text-zinc-400 shadow-none;
+	}
+
+	.search-input {
+		@apply inline-flex items-center gap-2 rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 shadow-xs transition-colors;
+	}
+
+	.search-input:focus-within {
+		@apply border-zinc-400;
+	}
+
+	.search-input[data-disabled='true'] {
+		@apply cursor-not-allowed opacity-60;
+	}
+
+	.search-input-icon {
+		@apply shrink-0 text-zinc-500;
+	}
+
+	.search-input-field {
+		@apply min-w-0 flex-1 bg-transparent outline-none;
+	}
+
+	.search-input-field::-webkit-search-cancel-button {
+		appearance: none;
+	}
+
+	.search-input-confirm {
+		@apply shrink-0 text-xs font-medium tracking-[0.18em] text-zinc-500 uppercase;
+	}
 }
 
 @layer theme {

package/dist/style.css

@@ -7,11 +7,7 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
-    --color-red-100: oklch(93.6% 0.032 17.717);
-    --color-red-200: oklch(88.5% 0.062 18.334);
-    --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
-    --color-red-700: oklch(50.5% 0.213 27.518);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-gray-900: oklch(21% 0.034 264.665);
@@ -21,21 +17,29 @@
     --color-zinc-300: oklch(87.1% 0.006 286.286);
     --color-zinc-400: oklch(70.5% 0.015 286.067);
     --color-zinc-500: oklch(55.2% 0.016 285.938);
+    --color-zinc-600: oklch(44.2% 0.017 285.786);
     --color-zinc-700: oklch(37% 0.013 285.805);
     --color-zinc-800: oklch(27.4% 0.006 286.033);
     --color-zinc-900: oklch(21% 0.006 285.885);
+    --color-zinc-950: oklch(14.1% 0.005 285.823);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
+    --container-sm: 24rem;
+    --container-3xl: 48rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
+    --tracking-tight: -0.025em;
     --tracking-wide: 0.025em;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
+    --radius-xl: 0.75rem;
     --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
@@ -245,6 +249,9 @@
   .flex {
     display: flex;
   }
+  .grid {
+    display: grid;
+  }
   .hidden {
     display: none;
   }
@@ -265,6 +272,10 @@
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
+  .size-6 {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
   .size-full {
     width: 100%;
     height: 100%;
@@ -287,12 +298,6 @@
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
-  .w-56 {
-    width: calc(var(--spacing) * 56);
-  }
-  .w-60 {
-    width: calc(var(--spacing) * 60);
-  }
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
@@ -302,6 +307,12 @@
   .w-full {
     width: 100%;
   }
+  .max-w-3xl {
+    max-width: var(--container-3xl);
+  }
+  .max-w-sm {
+    max-width: var(--container-sm);
+  }
   .flex-1 {
     flex: 1;
   }
@@ -337,15 +348,24 @@
   .items-center {
     align-items: center;
   }
+  .justify-between {
+    justify-content: space-between;
+  }
   .justify-center {
     justify-content: center;
   }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -365,22 +385,16 @@
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .rounded-xl {
+    border-radius: var(--radius-xl);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
-  .border-r {
-    border-right-style: var(--tw-border-style);
-    border-right-width: 1px;
-  }
-  .border-b {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 1px;
-  }
-  .border-l {
-    border-left-style: var(--tw-border-style);
-    border-left-width: 1px;
-  }
   .border-gray-200\/70 {
     border-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 70%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -393,24 +407,21 @@
   .border-zinc-300 {
     border-color: var(--color-zinc-300);
   }
-  .bg-red-100 {
-    background-color: var(--color-red-100);
-  }
   .bg-white {
     background-color: var(--color-white);
   }
   .bg-zinc-50 {
     background-color: var(--color-zinc-50);
   }
-  .bg-zinc-100 {
-    background-color: var(--color-zinc-100);
-  }
   .bg-zinc-900 {
     background-color: var(--color-zinc-900);
   }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
+  .p-1 {
+    padding: calc(var(--spacing) * 1);
+  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -420,6 +431,9 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
@@ -435,6 +449,10 @@
   .text-left {
     text-align: left;
   }
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -455,6 +473,10 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .tracking-tight {
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+  }
   .tracking-wide {
     --tw-tracking: var(--tracking-wide);
     letter-spacing: var(--tracking-wide);
@@ -465,21 +487,27 @@
   .text-red-600 {
     color: var(--color-red-600);
   }
-  .text-red-700 {
-    color: var(--color-red-700);
-  }
   .text-white {
     color: var(--color-white);
   }
   .text-zinc-500 {
     color: var(--color-zinc-500);
   }
+  .text-zinc-600 {
+    color: var(--color-zinc-600);
+  }
   .text-zinc-700 {
     color: var(--color-zinc-700);
   }
   .text-zinc-800 {
     color: var(--color-zinc-800);
   }
+  .text-zinc-900 {
+    color: var(--color-zinc-900);
+  }
+  .text-zinc-950 {
+    color: var(--color-zinc-950);
+  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -536,13 +564,6 @@
     --tw-outline-style: none;
     outline-style: none;
   }
-  .hover\:bg-red-200 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-red-200);
-      }
-    }
-  }
   .hover\:bg-zinc-100 {
     &:hover {
       @media (hover: hover) {
@@ -550,18 +571,6 @@
       }
     }
   }
-  .hover\:bg-zinc-200 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-zinc-200);
-      }
-    }
-  }
-  .focus\:border-zinc-400 {
-    &:focus {
-      border-color: var(--color-zinc-400);
-    }
-  }
   .focus\:outline-none {
     &:focus {
       --tw-outline-style: none;
@@ -588,14 +597,19 @@
       opacity: 50%;
     }
   }
-  .error\:border-red-500 {
-    &[data-error='true'] {
-      border-color: var(--color-red-500);
+  .md\:grid-flow-dense {
+    @media (width >= 48rem) {
+      grid-auto-flow: dense;
     }
   }
-  .error\:text-red-600 {
-    &[data-error='true'] {
-      color: var(--color-red-600);
+  .md\:grid-cols-2 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .xl\:grid-cols-3 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
 }
@@ -700,6 +714,8 @@
     outline-style: none;
   }
   .pagination {
+    display: inline-flex;
+    width: fit-content;
     gap: calc(var(--spacing) * 4);
   }
   .sidebar-toggle {
@@ -711,6 +727,45 @@
       }
     }
   }
+  .navigation-stack-sidebar-left {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+    border-color: var(--color-zinc-200);
+  }
+  .navigation-stack-sidebar-right {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+    border-color: var(--color-zinc-200);
+  }
+  .navigation-stack-sidebar-inner {
+    background-color: var(--color-zinc-50);
+  }
+  .navigation-stack-toolbar {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+    border-color: var(--color-zinc-200);
+    background-color: var(--color-white);
+  }
+  .navigation-stack[data-chrome='false'] .navigation-stack-sidebar-left,	.navigation-stack[data-chrome='false'] .navigation-stack-sidebar-right {
+    border-color: transparent;
+  }
+  .navigation-stack[data-chrome='false'] .navigation-stack-sidebar-inner {
+    background-color: transparent;
+  }
+  .navigation-stack-toolbar-shell[data-chrome='false'] .navigation-stack-toolbar {
+    border-color: transparent;
+    background-color: transparent;
+  }
+  .navigation-stack-toolbar-shell[data-chrome='false'] .navigation-stack-toolbar-content {
+    background-color: transparent;
+  }
+  .navigation-stack-toolbar-shell[data-chrome='false'] .sidebar-toggle {
+    &:hover {
+      @media (hover: hover) {
+        background-color: transparent;
+      }
+    }
+  }
   .popover {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -858,6 +913,69 @@
     --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .segmented-picker-button-disabled {
+    cursor: not-allowed;
+    color: var(--color-zinc-400);
+    pointer-events: none;
+  }
+  .segmented-picker-button-disabled-selected {
+    background-color: var(--color-zinc-200);
+    color: var(--color-zinc-400);
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .search-input {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    border-radius: var(--radius-md);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-zinc-200);
+    background-color: var(--color-white);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-zinc-900);
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .search-input:focus-within {
+    border-color: var(--color-zinc-400);
+  }
+  .search-input[data-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 60%;
+  }
+  .search-input-icon {
+    flex-shrink: 0;
+    color: var(--color-zinc-500);
+  }
+  .search-input-field {
+    min-width: calc(var(--spacing) * 0);
+    flex: 1;
+    background-color: transparent;
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .search-input-field::-webkit-search-cancel-button {
+    appearance: none;
+  }
+  .search-input-confirm {
+    flex-shrink: 0;
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    --tw-tracking: 0.18em;
+    letter-spacing: 0.18em;
+    color: var(--color-zinc-500);
+    text-transform: uppercase;
+  }
 }
 @layer theme {
   :root {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.0.56",
+	"version": "0.0.57",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",