@x33025/sveltely 0.1.22 → 0.1.24

package/dist/components/Library/Grid/GridItem.svelte

@@ -16,7 +16,15 @@
 		StyleProps &
 		LoaderProps;
 
-	let { children, column, row, columnSpan, rowSpan, area, ...restProps }: Props = $props();
+	let {
+		children,
+		column,
+		row,
+		columnSpan,
+		rowSpan,
+		area,
+		...restProps
+	}: Props & Record<string, unknown> = $props();
 
 	const extractedLoaderProps = $derived.by(() => extractLoaderProps(restProps));
 	const loaderProps = $derived(extractedLoaderProps.loaderProps);
@@ -27,7 +35,7 @@
 	const afterLayoutProps = $derived(extractedLayoutProps.restProps);
 	const extractedStyleProps = $derived.by(() => extractStyleProps(afterLayoutProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
-	const props = $derived(extractedStyleProps.restProps);
+	const forwardedProps = $derived(extractedStyleProps.restProps);
 	const rootStyle = $derived.by(() =>
 		[
 			column !== undefined ? `grid-column: ${column};` : '',
@@ -47,7 +55,7 @@
 	);
 </script>
 
-<div class="grid-item" style={rootStyle} {...props} use:loaderAction={loaderOptions}>
+<div class="grid-item" style={rootStyle} {...forwardedProps} use:loaderAction={loaderOptions}>
 	{#if children}
 		{@render children()}
 	{/if}
@@ -55,6 +63,7 @@
 
 <style>
 	.grid-item {
+		width: 100%;
 		min-width: 0;
 		min-height: 0;
 		height: 100%;

package/dist/components/Library/Grid/GridItem.svelte.d.ts

@@ -10,6 +10,7 @@ type Props = {
     rowSpan?: number;
     area?: string;
 } & LayoutProps & StyleProps & LoaderProps;
-declare const GridItem: import("svelte").Component<Props, {}, "">;
+type $$ComponentProps = Props & Record<string, unknown>;
+declare const GridItem: import("svelte").Component<$$ComponentProps, {}, "">;
 type GridItem = ReturnType<typeof GridItem>;
 export default GridItem;

package/dist/components/Library/HStack/HStack.svelte

@@ -11,7 +11,7 @@
 		StyleProps &
 		LoaderProps;
 
-	let { children, ...restProps }: Props = $props();
+	let { children, ...restProps }: Props & Record<string, unknown> = $props();
 
 	const extractedLoaderProps = $derived.by(() => extractLoaderProps(restProps));
 	const loaderProps = $derived(extractedLoaderProps.loaderProps);
@@ -22,13 +22,13 @@
 	const afterLayoutProps = $derived(extractedLayoutProps.restProps);
 	const extractedStyleProps = $derived.by(() => extractStyleProps(afterLayoutProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
-	const props = $derived(extractedStyleProps.restProps);
+	const forwardedProps = $derived(extractedStyleProps.restProps);
 	const rootStyle = $derived.by(() =>
 		[layoutStyle(layoutProps), surfaceStyle(styleProps, 'hstack')].filter(Boolean).join(' ')
 	);
 </script>
 
-<div class="hstack" style={rootStyle} {...props} use:loaderAction={loaderOptions}>
+<div class="hstack" style={rootStyle} {...forwardedProps} use:loaderAction={loaderOptions}>
 	{#if children}
 		{@render children()}
 	{/if}
@@ -41,7 +41,7 @@
 		--hstack-padding-x: 0px;
 		--hstack-padding-y: 0px;
 		--hstack-font-size: inherit;
-		display: flex;
+		display: inline-flex;
 		min-width: 0;
 		min-height: 0;
 		flex-direction: row;

package/dist/components/Library/HStack/HStack.svelte.d.ts

@@ -5,6 +5,7 @@ import { type StyleProps } from '../../../style/surface';
 type Props = {
     children?: Snippet;
 } & LayoutProps & StyleProps & LoaderProps;
-declare const HStack: import("svelte").Component<Props, {}, "">;
+type $$ComponentProps = Props & Record<string, unknown>;
+declare const HStack: import("svelte").Component<$$ComponentProps, {}, "">;
 type HStack = ReturnType<typeof HStack>;
 export default HStack;

package/dist/components/Library/Image/Image.demo.svelte

@@ -1,7 +1,9 @@
 <script module lang="ts">
 	export const demo = {
 		name: 'Image',
-		description: 'Responsive image display with icon placeholder and busy states.'
+		description: 'Responsive image display with icon placeholder and busy states.',
+		columnSpan: 3,
+		rowSpan: 2
 	};
 </script>
 

package/dist/components/Library/Image/Image.demo.svelte.d.ts

@@ -1,6 +1,8 @@
 export declare const demo: {
     name: string;
     description: string;
+    columnSpan: number;
+    rowSpan: number;
 };
 import Image from './Image.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> {

package/dist/components/Library/ImageMask/ImageMask.demo.svelte

@@ -9,7 +9,9 @@
 
 <script lang="ts">
 	import { Brush, Eraser, X } from '@lucide/svelte';
+	import Grid from '../Grid';
 	import Slider from '../Slider';
+	import VStack from '../VStack';
 	import ImageMask from './ImageMask.svelte';
 	import type { ImageMaskValue, MaskTool } from './types';
 
@@ -19,7 +21,7 @@
 	let clearRevision = $state(0);
 </script>
 
-<div class="grid items-start gap-3 md:grid-cols-[minmax(0,18rem)_minmax(8rem,1fr)]">
+<Grid columns="repeat(auto-fit, minmax(min(100%, 18rem), 1fr))" align="start" gap={7.5}>
 	<ImageMask
 		src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=700&q=80"
 		alt="Red sneaker"
@@ -30,14 +32,14 @@
 		fit="cover"
 		aspectRatio="1 / 1"
 	/>
-	<div class="vstack gap-2 text-sm text-[var(--sveltely-text-secondary-color)]">
+	<VStack gap={5} fontSize={8.75} color="var(--sveltely-text-secondary-color)">
 		<div class="font-medium text-[var(--sveltely-text-primary-color)]">Mask</div>
 		<div class="aspect-square overflow-hidden rounded-md border border-zinc-200 bg-black">
 			{#if mask}
 				<img src={mask.dataUrl} alt="Exported mask" class="size-full object-contain" />
 			{/if}
 		</div>
-		<label class="vstack gap-2 bg-white p-3">
+		<VStack gap={5} background="white" paddingX={7.5} paddingY={7.5}>
 			<span class="font-medium text-[var(--sveltely-text-primary-color)]"
 				>Brush size {brushSize}px</span
 			>
@@ -78,9 +80,9 @@
 					<X size={16} />
 				</button>
 			</div>
-		</label>
-	</div>
-</div>
+		</VStack>
+	</VStack>
+</Grid>
 
 <style>
 	.image-mask-controls {

package/dist/components/Library/Label/Label.demo.svelte

@@ -20,19 +20,19 @@
 </script>
 
 <HStack gap={10} align="center">
-	<Label label="Name" icon={UserIcon} orientation="top" width="fit">
+	<Label label="Name" icon={UserIcon} orientation="top">
 		<TextField bind:value={name} placeholder="Sveltely" />
 	</Label>
 
-	<Label label="Amount" icon={HashIcon} orientation="leading" width="fit">
+	<Label label="Amount" icon={HashIcon} orientation="leading">
 		<NumberField bind:value={amount} min={0} max={100} />
 	</Label>
 
-	<Label label="Enabled" orientation="trailing" width="fit">
+	<Label label="Enabled" orientation="trailing">
 		<Switch bind:checked={enabled} />
 	</Label>
 
-	<Label orientation="leading" width="fit">
+	<Label orientation="leading">
 		{#snippet labelContent()}
 			<span>Name <span class="text-[var(--sveltely-text-tertiary-color)]">optional</span></span>
 		{/snippet}

package/dist/components/Library/Label/Label.svelte

@@ -23,17 +23,12 @@
 		iconSize,
 		iconColor,
 		orientation = 'top',
-		size,
 		width,
 		height,
 		minWidth,
 		minHeight,
 		maxWidth,
 		maxHeight,
-		grow,
-		shrink,
-		basis,
-		border,
 		align,
 		justify,
 		fontSize,
@@ -42,23 +37,19 @@
 		gap,
 		borderRadius,
 		inset,
+		border,
 		background,
 		borderColor,
 		color
 	}: Props = $props();
 
 	const layoutProps = $derived({
-		size,
 		width,
 		height,
 		minWidth,
 		minHeight,
 		maxWidth,
 		maxHeight,
-		grow,
-		shrink,
-		basis,
-		border,
 		align,
 		justify
 	});
@@ -69,6 +60,7 @@
 		gap,
 		borderRadius,
 		inset,
+		border,
 		background,
 		borderColor,
 		color
@@ -96,7 +88,7 @@
 
 <div class="label" data-orientation={orientation} style={rootStyle}>
 	{#if icon || label || labelContent}
-		<span class="label-heading">
+		<span class="label-heading" data-custom={labelContent ? 'true' : undefined}>
 			{#if icon}
 				{@const Icon = icon}
 				<span class="label-icon-frame" style={iconStyle}>
@@ -107,7 +99,7 @@
 			{#if label}
 				<span class="label-text">{label}</span>
 			{:else if labelContent}
-				<span class="label-text">
+				<span class="label-text label-text-custom">
 					{@render labelContent()}
 				</span>
 			{/if}
@@ -126,9 +118,9 @@
 		--label-font-size: var(--sveltely-font-size);
 		--label-icon-size: calc(var(--label-font-size) * 1.143);
 		display: inline-flex;
-		width: 100%;
-		min-width: min-content;
-		min-height: min-content;
+		width: fit-content;
+		min-width: 0;
+		min-height: 0;
 		gap: var(--label-gap, calc(var(--sveltely-gap) * 0.75));
 		border-radius: var(--label-border-radius, 0px);
 		color: var(--label-color, var(--sveltely-text-primary-color));
@@ -162,6 +154,19 @@
 		line-height: 1.25;
 	}
 
+	.label-heading[data-custom='true'] {
+		min-width: 0;
+		width: 100%;
+		flex: 1 1 auto;
+	}
+
+	.label-text-custom {
+		display: inline-flex;
+		min-width: 0;
+		width: 100%;
+		flex: 1 1 auto;
+	}
+
 	.label-content {
 		display: inline-flex;
 		min-width: 0;

package/dist/components/Library/NavigationStack/Link.svelte

@@ -48,12 +48,9 @@
 				calc(var(--sveltely-padding-x) * var(--navigation-link-scale))
 			);
 		text-decoration: none;
-		transition:
-			color 150ms,
-			background-color 150ms;
+		transition: color 150ms;
 	}
 
-	.navigation-link:hover,
 	.navigation-link-active {
 		background: var(
 			--navigation-link-active-background,

package/dist/components/Library/Pagination/Pagination.demo.svelte

@@ -7,6 +7,7 @@
 </script>
 
 <script lang="ts">
+	import HStack from '../HStack';
 	import Pagination from './Pagination.svelte';
 
 	let data = $state({
@@ -21,6 +22,6 @@
 	};
 </script>
 
-<div class="w-fit">
+<HStack>
 	<Pagination {data} showFirstLast={true} onPageChange={(page) => onPageChange(page)} />
-</div>
+</HStack>

package/dist/components/Library/Popover/PopoverDebugOverlay.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { portalContent } from '../../../actions/portal';
+	import { Content as PortalContent } from '../Portal';
 	import { getOpenPopoverIds, getParentId } from './registry.svelte';
 
 	type Point = { x: number; y: number };
@@ -96,7 +96,7 @@
 </script>
 
 {#if geometries.length > 0}
-	<div use:portalContent class="pointer-events-none fixed inset-0 z-[9999]">
+	<PortalContent class="pointer-events-none fixed inset-0 z-[9999]">
 		<svg width="100%" height="100%" aria-hidden="true">
 			{#each geometries as geo (geo.id)}
 				<!-- Safe polygon (rendered first so rects draw over it) -->
@@ -159,5 +159,5 @@
 				</text>
 			{/each}
 		</svg>
-	</div>
+	</PortalContent>
 {/if}

package/dist/components/Library/Portal/Content.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { portalContent } from '../../../actions/portal';
+
+	type Props = {
+		id?: string;
+		children?: Snippet;
+		element?: HTMLElement | null;
+	} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+
+	let { id = 'default', children, element = $bindable<HTMLElement | null>(null), ...props }: Props =
+		$props();
+</script>
+
+<div bind:this={element} use:portalContent={id} {...props}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

package/dist/components/Library/Portal/Content.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    id?: string;
+    children?: Snippet;
+    element?: HTMLElement | null;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+declare const Content: import("svelte").Component<Props, {}, "element">;
+type Content = ReturnType<typeof Content>;
+export default Content;

package/dist/components/Library/Portal/Portal.svelte

@@ -1,3 +1,7 @@
+<script module lang="ts">
+	export { default as Content } from './Content.svelte';
+</script>
+
 <script lang="ts">
 	import { portalHost } from '../../../actions/portal';
 

package/dist/components/Library/Portal/Portal.svelte.d.ts

@@ -1,3 +1,4 @@
+export { default as Content } from './Content.svelte';
 type Props = {
     id?: string;
 };

package/dist/components/Library/Portal/index.d.ts

@@ -1 +1,2 @@
 export { default } from './Portal.svelte';
+export { default as Content } from './Content.svelte';

package/dist/components/Library/Portal/index.js

@@ -1 +1,2 @@
 export { default } from './Portal.svelte';
+export { default as Content } from './Content.svelte';

package/dist/components/Library/ScrollView/ScrollView.svelte

@@ -117,7 +117,11 @@
 
 		const contentRect = contentElement.getBoundingClientRect();
 		let width = Math.max(contentElement.scrollWidth, contentElement.offsetWidth, contentRect.width);
-		let height = Math.max(contentElement.scrollHeight, contentElement.offsetHeight, contentRect.height);
+		let height = Math.max(
+			contentElement.scrollHeight,
+			contentElement.offsetHeight,
+			contentRect.height
+		);
 
 		for (const child of Array.from(contentElement.children)) {
 			const childElement = child as HTMLElement;
@@ -275,8 +279,11 @@
 	};
 
 	function handleWheel(event: WheelEvent) {
-		const wheelX = axis === 'horizontal' && event.deltaX === 0 ? event.deltaY : event.deltaX;
-		const consumed = scrollTo(offsetX + wheelX, offsetY + event.deltaY);
+		const shouldMapWheelYToX =
+			event.deltaX === 0 && (axis === 'horizontal' || (axis === 'both' && event.shiftKey));
+		const wheelX = shouldMapWheelYToX ? event.deltaY : event.deltaX;
+		const wheelY = axis === 'both' && event.shiftKey ? 0 : event.deltaY;
+		const consumed = scrollTo(offsetX + wheelX, offsetY + wheelY);
 
 		if (consumed || shouldContainOverscroll(consumed)) {
 			event.preventDefault();
@@ -363,7 +370,8 @@
 			const thumbSize = orientation === 'horizontal' ? thumbXSize : thumbYSize;
 			const maxScroll = Math.max(0, contentSize - viewportSize);
 			const maxThumbOffset = Math.max(1, viewportSize - thumbSize);
-			const delta = (orientation === 'horizontal' ? moveEvent.clientX : moveEvent.clientY) - startPointer;
+			const delta =
+				(orientation === 'horizontal' ? moveEvent.clientX : moveEvent.clientY) - startPointer;
 			const nextScroll = startScroll + (delta / maxThumbOffset) * maxScroll;
 
 			if (orientation === 'horizontal') {
@@ -383,7 +391,6 @@
 		window.addEventListener('pointerup', up);
 		window.addEventListener('pointercancel', up);
 	}
-
 </script>
 
 <div

package/dist/components/Library/SearchField/SearchField.demo.svelte

@@ -6,12 +6,13 @@
 </script>
 
 <script lang="ts">
+	import VStack from '../VStack';
 	import SearchField from './SearchField.svelte';
 
 	let value = $state('');
 </script>
 
-<div class="vstack w-full max-w-sm gap-2">
+<VStack width="100%" maxWidth="24rem" gap={5}>
 	<SearchField bind:value placeholder="Search components..." />
 	<p class="text-xs text-[var(--sveltely-text-secondary-color)]">Value: {value || 'empty'}</p>
-</div>
+</VStack>

package/dist/components/Library/SearchField/SearchField.svelte

@@ -19,15 +19,15 @@
 		disabled = false,
 		placeholder = 'Search',
 		...restProps
-	}: Props = $props();
+	}: Props & Record<string, unknown> = $props();
 
 	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
-	const props = $derived(extractedStyleProps.restProps);
+	const forwardedProps = $derived(extractedStyleProps.restProps);
 	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'search-field'));
 </script>
 
-<label
+<div
 	class="search-field"
 	style={rootStyle}
 	data-disabled={disabled ? 'true' : 'false'}
@@ -37,8 +37,8 @@
 	<span class="search-field-icon" aria-hidden="true">
 		<SearchIcon class="size-4" />
 	</span>
-	<input type="search" bind:value {disabled} {placeholder} class="search-field-input" {...props} />
-</label>
+	<input type="search" bind:value {disabled} {placeholder} class="search-field-input" {...forwardedProps} />
+</div>
 
 <style>
 	.search-field {

package/dist/components/Library/SearchField/SearchField.svelte.d.ts

@@ -5,6 +5,7 @@ type Props = {
     value?: string;
     radiusSource?: boolean;
 } & StyleProps & TooltipProps & Omit<HTMLInputAttributes, 'children' | 'type' | 'value' | 'class' | 'style'>;
-declare const SearchField: import("svelte").Component<Props, {}, "value">;
+type $$ComponentProps = Props & Record<string, unknown>;
+declare const SearchField: import("svelte").Component<$$ComponentProps, {}, "value">;
 type SearchField = ReturnType<typeof SearchField>;
 export default SearchField;

package/dist/components/Library/SegmentedPicker/SegmentedPicker.demo.svelte

@@ -6,6 +6,7 @@
 </script>
 
 <script lang="ts">
+	import VStack from '../VStack';
 	import SegmentedPicker from './SegmentedPicker.svelte';
 
 	const options = [
@@ -17,7 +18,7 @@
 	let value = $state('day');
 </script>
 
-<div class="vstack center gap-2">
+<VStack align="center" justify="center" gap={5}>
 	<SegmentedPicker {options} bind:value />
 	<p class="text-xs text-[var(--sveltely-text-secondary-color)]">Selected: {value}</p>
-</div>
+</VStack>

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

@@ -6,6 +6,7 @@
 </script>
 
 <script lang="ts">
+	import VStack from '../VStack';
 	import Sheet from './Sheet.svelte';
 </script>
 
@@ -14,12 +15,12 @@
 		<span>Open sheet</span>
 	{/snippet}
 
-	<div class="vstack gap-3">
+	<VStack gap={7.5}>
 		<p class="text-sm text-[var(--sveltely-text-primary-color)]">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>
-	</div>
+	</VStack>
 </Sheet>

package/dist/components/Library/Sheet/Sheet.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { portalContent } from '../../../actions/portal';
+	import { Content as PortalContent } from '../Portal';
 	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
 	interface Props {
 		trigger?: Snippet;
@@ -58,7 +58,7 @@
 {/if}
 
 {#if open}
-	<div class="center fixed inset-0 z-50 flex" use:portalContent>
+	<PortalContent class="center fixed inset-0 z-50 flex">
 		<button
 			type="button"
 			aria-label="Close dialog"
@@ -78,7 +78,7 @@
 				{/if}
 			</div>
 		</div>
-	</div>
+	</PortalContent>
 {/if}
 
 <style>

package/dist/components/Library/Slider/Slider.demo.svelte

@@ -6,12 +6,13 @@
 </script>
 
 <script lang="ts">
+	import VStack from '../VStack';
 	import Slider from './Slider.svelte';
 
 	let value = $state(35);
 </script>
 
-<div class="vstack w-full max-w-sm gap-2">
+<VStack width="100%" maxWidth="24rem" gap={5}>
 	<Slider bind:value min={0} max={100} />
 	<p class="text-xs text-[var(--sveltely-text-secondary-color)]">Value: {value}</p>
-</div>
+</VStack>

package/dist/components/Library/Spinner/Spinner.demo.svelte

@@ -6,9 +6,10 @@
 </script>
 
 <script lang="ts">
+	import HStack from '../HStack';
 	import Spinner from './Spinner.svelte';
 </script>
 
-<div class="text-[var(--sveltely-text-primary-color)]">
+<HStack color="var(--sveltely-text-primary-color)">
 	<Spinner />
-</div>
+</HStack>

package/dist/components/Library/Switch/Switch.demo.svelte

@@ -8,16 +8,17 @@
 <script lang="ts">
 	import Switch from './Switch.svelte';
 	import Label from '../Label';
+	import VStack from '../VStack';
 
 	let notificationsEnabled = $state(true);
 	let weeklySummaryEnabled = $state(false);
 </script>
 
-<div class="vstack gap-3">
-	<Label label="Enable notifications" orientation="leading" width="fit">
+<VStack gap={7.5}>
+	<Label label="Enable notifications" orientation="leading">
 		<Switch bind:checked={notificationsEnabled} />
 	</Label>
-	<Label label="Send weekly summary" orientation="leading" width="fit">
+	<Label label="Send weekly summary" orientation="leading">
 		<Switch bind:checked={weeklySummaryEnabled} />
 	</Label>
-</div>
+</VStack>