@delightstack/components 0.1.0

package/dist/actions/Popover.svelte.d.ts

@@ -0,0 +1,31 @@
+export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+export type PopoverStrategy = 'fixed' | 'absolute';
+import { type Snippet } from 'svelte';
+declare const Popover: import("svelte").Component<{
+    ref_element?: HTMLElement | undefined;
+    opened?: boolean;
+    placement?: PopoverPlacement;
+    strategy?: PopoverStrategy;
+    arrow?: boolean;
+    x?: number | undefined;
+    y?: number | undefined;
+    open_on_hover?: boolean;
+    open_on_click?: boolean;
+    open_on_focus?: boolean;
+    close_on_outside_click?: boolean;
+    close_on_inside_click?: boolean;
+    close_on_escape_key?: boolean;
+    disable_initial_focus?: boolean;
+    hover_delay?: number;
+    transparent?: boolean;
+    dense?: boolean;
+    comfortable?: boolean;
+    radius?: string | undefined;
+    children?: undefined | Snippet;
+    id?: string;
+    class?: string;
+    style?: string;
+}, {}, "ref_element" | "opened">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;
+//# sourceMappingURL=Popover.svelte.d.ts.map

package/dist/actions/Popover.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../src/actions/Popover.svelte.ts"],"names":[],"mappings":"AAGC,MAAM,MAAM,gBAAgB,GACzB,KAAK,GACL,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,GACV,OAAO,GACP,aAAa,GACb,WAAW,CAAC;AACf,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,UAAU,CAAC;AAOpD,OAAO,EAAiB,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AA4/BrD,QAAA,MAAM,OAAO;kBA36B0E,WAAW,GAAG,SAAS;aAAW,OAAO;gBAAc,gBAAgB;eAAa,eAAe;YAAU,OAAO;QAAM,MAAM,GAAG,SAAS;QAAM,MAAM,GAAG,SAAS;oBAAkB,OAAO;oBAAkB,OAAO;oBAAkB,OAAO;6BAA2B,OAAO;4BAA0B,OAAO;0BAAwB,OAAO;4BAA0B,OAAO;kBAAgB,MAAM;kBAAgB,OAAO;YAAU,OAAO;kBAAgB,OAAO;aAAW,MAAM,GAAG,SAAS;eAAa,SAAS,GAAG,OAAO;;YAA8B,MAAM;YAAU,MAAM;gCA26B1lB,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/actions/Portal.svelte

@@ -0,0 +1,80 @@
+<script module lang="ts">
+	import { tick, type Snippet } from 'svelte';
+	import { DelightError } from '@delightstack/utilities';
+
+	/**
+	 * An action for moving a component to a different parent element
+	 * Usage: <div use:portal={'css selector'}> or <div use:portal={document.body}>
+	 */
+	export function portal(el: HTMLElement, target: HTMLElement | string = 'body') {
+		let targetEl: HTMLElement | null = null;
+		async function update(newTarget: HTMLElement | string) {
+			target = newTarget;
+			if (target === '.portals') {
+				targetEl = document.querySelector('.portals');
+				if (!targetEl) {
+					targetEl = document.createElement('div');
+					targetEl.classList.add('portals');
+					document.body.appendChild(targetEl);
+				}
+			} else if (typeof target === 'string') {
+				targetEl = document.querySelector(target);
+				if (targetEl === null) {
+					await tick();
+					targetEl = document.querySelector(target);
+				}
+				if (targetEl === null) {
+					throw new DelightError(`No element found matching css selector: "${target}"`);
+				}
+			} else if (target instanceof HTMLElement) {
+				targetEl = target;
+			} else {
+				throw new DelightError(
+					`Unknown portal target type: ${
+						target === null ? 'null' : typeof target
+					}. Allowed types: string (CSS selector) or HTMLElement.`,
+				);
+			}
+			targetEl.appendChild(el);
+			el.hidden = false;
+		}
+
+		function destroy() {
+			el.remove();
+		}
+
+		update(target);
+		return {
+			update,
+			destroy,
+		};
+	}
+</script>
+
+<script lang="ts">
+	const propId = $props.id();
+	let {
+		/** The DOM Element or CSS Selector where the portal elenent should be inserted */
+		target = '.portals' as HTMLElement | string,
+
+		/** The child elements to display inside the portal */
+		children = undefined as undefined | Snippet,
+
+		/** The ID of the portal element */
+		id = propId,
+	} = $props();
+</script>
+
+{#if children}
+	<div use:portal={target} hidden class="portal" {id}>
+		{@render children()}
+	</div>
+{/if}
+
+<style>
+	:global(.portals),
+	:global(.portals .portal) {
+		position: static;
+		display: contents;
+	}
+</style>

package/dist/actions/Portal.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type Snippet } from 'svelte';
+/**
+ * An action for moving a component to a different parent element
+ * Usage: <div use:portal={'css selector'}> or <div use:portal={document.body}>
+ */
+export declare function portal(el: HTMLElement, target?: HTMLElement | string): {
+    update: (newTarget: HTMLElement | string) => Promise<void>;
+    destroy: () => void;
+};
+declare const Portal: import("svelte").Component<{
+    target?: HTMLElement | string;
+    children?: undefined | Snippet;
+    id?: string;
+}, {}, "">;
+type Portal = ReturnType<typeof Portal>;
+export default Portal;
+//# sourceMappingURL=Portal.svelte.d.ts.map

package/dist/actions/Portal.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.svelte.d.ts","sourceRoot":"","sources":["../../src/actions/Portal.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAG5C;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EAAE,EAAE,WAAW,EAAE,MAAM,GAAE,WAAW,GAAG,MAAe;wBAE3C,WAAW,GAAG,MAAM;;EAwCrD;AA4BF,QAAA,MAAM,MAAM;aAzBsE,WAAW,GAAG,MAAM;eAAa,SAAS,GAAG,OAAO;;UAyBlF,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/actions/ThemeToggle.svelte

@@ -0,0 +1,345 @@
+<script lang="ts">
+	import { tooltip, ripple } from '@delightstack/utilities';
+
+	/**
+	 * A theme toggle component that cycles between light, dark, and auto modes.
+	 * Uses a moon-with-stars icon for dark and a sun for light; transitions
+	 * between them with a soft fade/scale microinteraction.
+	 */
+
+	const STORAGE_KEY = 'delightstack:theme';
+
+	let {
+		/** The current theme: 'light', 'dark', or 'auto' */
+		theme = $bindable('auto') as 'light' | 'dark' | 'auto',
+
+		/** Whether the current effective theme is dark. */
+		is_dark = $bindable(false) as boolean,
+
+		/** The size of the toggle button: '0' (small), '1' (medium), '2' (large), '3' (xlarge) */
+		size = '1' as '0' | '1' | '2' | '3',
+
+		/** Whether the system/auto option should be disabled (only light/dark) */
+		disable_auto = false,
+
+		/** Show a text label beside the icon ("Light" / "Dark" / "Auto"). */
+		show_label = false,
+
+		/** Custom text label override. Falls back to the current mode name. */
+		label = undefined as string | undefined,
+
+		/** Tooltip text shown on hover */
+		tooltip: tooltip_message = '',
+
+		/** The ID of the element. @defaults to a random ID */
+		id = undefined as string | undefined,
+
+		/** Specifies a custom class name for the container element */
+		class: class_name = '',
+
+		/** Called when the theme changes */
+		onchange = undefined as ((theme: 'light' | 'dark' | 'auto') => void) | undefined,
+	} = $props();
+
+	const SIZE_MAP = { '0': 18, '1': 22, '2': 28, '3': 34 } as const;
+	const svgSize = $derived(SIZE_MAP[size]);
+
+	let systemPrefersDark = $state(false);
+
+	const effectiveDark = $derived(
+		theme === 'dark' ? true : theme === 'light' ? false : systemPrefersDark,
+	);
+
+	$effect(() => {
+		is_dark = effectiveDark;
+	});
+
+	$effect(() => {
+		try {
+			const stored = localStorage.getItem(STORAGE_KEY);
+			if (stored === 'light' || stored === 'dark' || stored === 'auto') {
+				theme = disable_auto && stored === 'auto' ? 'light' : stored;
+			}
+		} catch {
+			// ignore
+		}
+
+		const mql = window.matchMedia('(prefers-color-scheme: dark)');
+		systemPrefersDark = mql.matches;
+
+		function handleChange(e: MediaQueryListEvent) {
+			systemPrefersDark = e.matches;
+		}
+		mql.addEventListener('change', handleChange);
+
+		return () => {
+			mql.removeEventListener('change', handleChange);
+		};
+	});
+
+	$effect(() => {
+		document.documentElement.style.colorScheme = effectiveDark ? 'dark' : 'light';
+	});
+
+	function persistTheme(value: 'light' | 'dark' | 'auto') {
+		try {
+			localStorage.setItem(STORAGE_KEY, value);
+		} catch {
+			// ignore
+		}
+	}
+
+	function cycleTheme() {
+		if (disable_auto) {
+			theme = theme === 'light' ? 'dark' : 'light';
+		} else {
+			if (theme === 'light') theme = 'dark';
+			else if (theme === 'dark') theme = 'auto';
+			else theme = 'light';
+		}
+		persistTheme(theme);
+		onchange?.(theme);
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			cycleTheme();
+		}
+	}
+
+	const modeLabel = $derived(
+		theme === 'auto' ? 'Auto' : theme === 'dark' ? 'Dark' : 'Light',
+	);
+	const ariaLabel = $derived(
+		theme === 'auto'
+			? 'Theme: auto (system preference)'
+			: theme === 'dark'
+				? 'Theme: dark'
+				: 'Theme: light',
+	);
+</script>
+
+<button
+	type="button"
+	{id}
+	class={['theme-toggle', `size-${size}`, class_name].filter(Boolean).join(' ')}
+	class:is-dark={effectiveDark}
+	class:is-auto={theme === 'auto'}
+	class:has-label={show_label}
+	aria-label={ariaLabel}
+	onclick={cycleTheme}
+	onkeydown={handleKeyDown}
+	{@attach tooltip(tooltip_message || (show_label ? '' : ariaLabel))}
+	{@attach ripple({})}>
+	<span class="icon" style:width="{svgSize}px" style:height="{svgSize}px">
+		<svg
+			class="sun"
+			width={svgSize}
+			height={svgSize}
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			aria-hidden="true">
+			<circle cx="12" cy="12" r="5" />
+			<g class="rays">
+				<line x1="12" y1="1" x2="12" y2="3" />
+				<line x1="12" y1="21" x2="12" y2="23" />
+				<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+				<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+				<line x1="1" y1="12" x2="3" y2="12" />
+				<line x1="21" y1="12" x2="23" y2="12" />
+				<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+				<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+			</g>
+		</svg>
+		<svg
+			class="moon"
+			width={svgSize}
+			height={svgSize}
+			viewBox="0 0 24 24"
+			fill="currentColor"
+			aria-hidden="true">
+			<!-- Crescent moon facing left, with two small twinkling stars. -->
+			<path d="M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5z" />
+			<circle class="star star-1" cx="7" cy="5" r="0.9" />
+			<circle class="star star-2" cx="4" cy="10" r="0.6" />
+		</svg>
+	</span>
+	{#if show_label}
+		<span class="label">{label ?? modeLabel}</span>
+	{/if}
+	{#if theme === 'auto'}
+		<span class="auto-indicator" aria-hidden="true">A</span>
+	{/if}
+</button>
+
+<style>
+	button {
+		--icon-duration: 500ms;
+		--icon-easing: cubic-bezier(0.22, 1, 0.36, 1);
+
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5em;
+		background: none;
+		border: none;
+		padding: 0.5em;
+		cursor: pointer;
+		color: currentColor;
+		border-radius: var(--radius-full, 9999px);
+		font: inherit;
+		transition:
+			background-color 250ms ease,
+			translate 200ms ease;
+		-webkit-tap-highlight-color: transparent;
+
+		&.has-label {
+			padding: 0.4em 0.9em;
+			border-radius: var(--radius-lg, 8px);
+			@supports (corner-shape: squircle) {
+				corner-shape: squircle;
+				border-radius: calc(var(--radius-lg, 8px) * var(--squircle-ratio, 2));
+			}
+		}
+		&:hover {
+			background-color: rgb(from currentColor r g b / 0.08);
+			/* Snap the tint in on hover; the base rule eases it back out on leave. */
+			transition: translate 200ms ease;
+		}
+		&:active {
+			translate: 0px 1px clamp(-10px, calc(0.2em - 12px), -2px);
+		}
+		&:focus-visible {
+			outline: 2px solid currentColor;
+			outline-offset: 2px;
+		}
+
+		.icon {
+			position: relative;
+			display: inline-block;
+			flex-shrink: 0;
+
+			svg {
+				position: absolute;
+				inset: 0;
+				transition:
+					opacity var(--icon-duration) var(--icon-easing),
+					transform var(--icon-duration) var(--icon-easing);
+				transform-origin: center;
+			}
+		}
+
+		/* Light mode: sun visible, moon hidden */
+		&:not(.is-dark) {
+			.sun {
+				opacity: 1;
+				transform: scale(1) rotate(0deg);
+			}
+			.moon {
+				opacity: 0;
+				transform: scale(0.4) rotate(-90deg);
+			}
+			.rays {
+				opacity: 1;
+				transform: scale(1) rotate(0deg);
+			}
+		}
+
+		/* Dark mode: moon visible, sun hidden */
+		&.is-dark {
+			.sun {
+				opacity: 0;
+				transform: scale(0.4) rotate(90deg);
+			}
+			.moon {
+				opacity: 1;
+				transform: scale(1) rotate(0deg);
+			}
+			.rays {
+				opacity: 0;
+				transform: scale(0) rotate(45deg);
+			}
+		}
+
+		.rays {
+			transform-origin: center;
+			transition:
+				opacity var(--icon-duration) var(--icon-easing),
+				transform var(--icon-duration) var(--icon-easing);
+		}
+
+		.moon .star {
+			transform-origin: center;
+			opacity: 0.85;
+			animation: twinkle 2.4s ease-in-out infinite;
+		}
+		.moon .star-2 {
+			animation-delay: 1.2s;
+		}
+
+		.label {
+			font-size: 0.9em;
+			line-height: 1;
+		}
+
+		/* The "auto" badge sits in the lower-right corner. It's a small filled pill
+		 * (text-colored, with the letter knocked out in the background color) so it
+		 * reads clearly as an "A" and a ring separates it from the icon. The button
+		 * no longer clips its overflow, so the badge is never cut off. */
+		.auto-indicator {
+			position: absolute;
+			bottom: -0.05em;
+			right: -0.05em;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			min-width: 1.15em;
+			height: 1.15em;
+			padding: 0 0.2em;
+			font-size: 0.62em;
+			font-weight: 800;
+			line-height: 1;
+			border-radius: var(--radius-full, 9999px);
+			/* Fill with the foreground color and knock the letter out in the
+			 * background color. Use explicit tokens (not currentColor) since this
+			 * element overrides its own `color`, which would collapse the contrast. */
+			background-color: var(--color-text, currentColor);
+			color: var(--color-bg, #fff);
+			box-shadow: 0 0 0 2px var(--color-bg, #fff);
+			pointer-events: none;
+		}
+		/* With a text label the mode is already spelled out, so the badge is redundant. */
+		&.has-label .auto-indicator {
+			display: none;
+		}
+	}
+
+	@keyframes twinkle {
+		0%,
+		100% {
+			opacity: 0.4;
+			transform: scale(0.85);
+		}
+		50% {
+			opacity: 1;
+			transform: scale(1.15);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		button {
+			.icon svg,
+			.rays {
+				transition: none;
+			}
+			.moon .star {
+				animation: none;
+			}
+		}
+	}
+</style>

package/dist/actions/ThemeToggle.svelte.d.ts

@@ -0,0 +1,15 @@
+declare const ThemeToggle: import("svelte").Component<{
+    theme?: "light" | "dark" | "auto";
+    is_dark?: boolean;
+    size?: "0" | "1" | "2" | "3";
+    disable_auto?: boolean;
+    show_label?: boolean;
+    label?: string | undefined;
+    tooltip?: string;
+    id?: string | undefined;
+    class?: string;
+    onchange?: ((theme: "light" | "dark" | "auto") => void) | undefined;
+}, {}, "theme" | "is_dark">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;
+//# sourceMappingURL=ThemeToggle.svelte.d.ts.map

package/dist/actions/ThemeToggle.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeToggle.svelte.d.ts","sourceRoot":"","sources":["../../src/actions/ThemeToggle.svelte.ts"],"names":[],"mappings":"AAiKA,QAAA,MAAM,WAAW;YAnJ8E,OAAO,GAAG,MAAM,GAAG,MAAM;cAAY,OAAO;WAAS,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;mBAAiB,OAAO;iBAAe,OAAO;YAAU,MAAM,GAAG,SAAS;cAAY,MAAM;SAAO,MAAM,GAAG,SAAS;YAAU,MAAM;eAAa,CAAC,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS;2BAmJ1T,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/actions/index.d.ts

@@ -0,0 +1,13 @@
+export { default as Button } from './Button.svelte';
+export { default as ButtonGroup } from './ButtonGroup.svelte';
+export type { ButtonGroupContext } from './ButtonGroup.svelte';
+export { default as Modal } from './Modal.svelte';
+export { default as Alert, alert } from './Alert.svelte';
+export { default as Popover, type PopoverPlacement, type PopoverStrategy, } from './Popover.svelte';
+export { default as ContextMenu, contextMenu } from './ContextMenu.svelte';
+export { default as Portal, portal } from './Portal.svelte';
+export { scrollbar, type ScrollbarOptions } from './scrollbar';
+export { default as CommandPalette } from './CommandPalette.svelte';
+export type { CommandOption } from './CommandPalette.svelte';
+export { default as ThemeToggle } from './ThemeToggle.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/actions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/actions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EACN,OAAO,IAAI,OAAO,EAClB,KAAK,gBAAgB,EACrB,KAAK,eAAe,GACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,KAAK,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,YAAY,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/actions/index.js

@@ -0,0 +1,10 @@
+export { default as Button } from './Button.svelte';
+export { default as ButtonGroup } from './ButtonGroup.svelte';
+export { default as Modal } from './Modal.svelte';
+export { default as Alert, alert } from './Alert.svelte';
+export { default as Popover, } from './Popover.svelte';
+export { default as ContextMenu, contextMenu } from './ContextMenu.svelte';
+export { default as Portal, portal } from './Portal.svelte';
+export { scrollbar } from './scrollbar';
+export { default as CommandPalette } from './CommandPalette.svelte';
+export { default as ThemeToggle } from './ThemeToggle.svelte';

package/dist/actions/scrollbar.d.ts

@@ -0,0 +1,48 @@
+import type { Attachment } from 'svelte/attachments';
+export interface ScrollbarOptions {
+    /** Whether the scrollbar fades out when idle. Defaults to true. */
+    autohide?: boolean;
+    /** How long (in ms) after the last scroll/pointer activity before an autohiding scrollbar fades out. Defaults to 1000. */
+    autohide_delay?: number;
+    /**
+     * Inset (in px) from the container's corners at both ends of each track.
+     * Defaults to half the container's computed border-radius, so the thumb
+     * never overlaps a rounded corner.
+     */
+    corner_inset?: number;
+    /**
+     * Per-edge track insets (in px) that override the corner-derived defaults
+     * for the edges they specify. Pass a function to have it re-evaluated on
+     * every layout (e.g. to track a sticky header's height); return undefined
+     * for an edge to keep its default.
+     */
+    track_insets?: TrackInsets | ((node: HTMLElement) => TrackInsets);
+}
+export interface TrackInsets {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+}
+/**
+ * A svelte attachment that replaces an element's native scrollbars with the
+ * delightstack overlay scrollbar: a token-driven thumb that floats over the
+ * content (no layout gutter), fades in while scrolling/hovering and back out
+ * when idle, insets itself past the container's rounded corners, and supports
+ * dragging and click-to-jump like a native bar.
+ *
+ * Native scrolling (wheel, keyboard, touch, momentum) is untouched — the
+ * element keeps scrolling itself; only the visual scrollbar is replaced. On
+ * touch-only devices the attachment does nothing and the native auto-hiding
+ * indicators remain.
+ *
+ * The element's parent is used as the positioning context for the overlay
+ * (it is given `position: relative` if static), so the element should keep
+ * the same box as its parent or be positioned statically within it.
+ * @example
+ * ```svelte
+ * <div class="content" {@attach scrollbar()}>...</div>
+ * ```
+ */
+export declare function scrollbar(options?: ScrollbarOptions): Attachment<HTMLElement>;
+//# sourceMappingURL=scrollbar.d.ts.map

package/dist/actions/scrollbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollbar.d.ts","sourceRoot":"","sources":["../../src/actions/scrollbar.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,gBAAgB;IAChC,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0HAA0H;IAC1H,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,WAAW,GAAG,CAAC,CAAC,IAAI,EAAE,WAAW,KAAK,WAAW,CAAC,CAAC;CAClE;AAED,MAAM,WAAW,WAAW;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAkGD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,gBAAqB,GAAG,UAAU,CAAC,WAAW,CAAC,CA8UjF"}