@x33025/sveltely 0.1.22 → 0.1.24

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

@@ -10,25 +10,26 @@
 		TooltipProps &
 		Omit<HTMLInputAttributes, 'type' | 'class' | 'style' | 'checked'>;
 
-	let { checked = $bindable(false), tooltip, disabled = false, ...restProps }: Props = $props();
+	let { checked = $bindable(false), tooltip, disabled = false, ...restProps }: 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, 'switch'));
 </script>
 
-<label
+<span
 	class="switch"
 	style={rootStyle}
 	data-disabled={disabled ? 'true' : 'false'}
 	use:tooltipAction={tooltip}
 >
-	<input bind:checked type="checkbox" {disabled} {...props} />
+	<input bind:checked type="checkbox" {disabled} {...forwardedProps} />
 	<span class="switch-track" aria-hidden="true">
 		<span class="switch-thumb"></span>
 	</span>
-</label>
+</span>
 
 <style>
 	.switch {

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

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

package/dist/components/Library/Table/Column.svelte

@@ -6,6 +6,7 @@
 	type Props = {
 		key?: string;
 		label: string;
+		header?: TableColumn<T>['header'];
 		value?: keyof T | ((row: T) => unknown);
 		cell?: TableColumn<T>['cell'];
 		width?: number | string;
@@ -22,6 +23,7 @@
 	let {
 		key,
 		label,
+		header,
 		value,
 		cell,
 		width,
@@ -40,6 +42,7 @@
 	const snapshot = (): TableColumn<T> => ({
 		key,
 		label,
+		header,
 		value,
 		cell,
 		width,

package/dist/components/Library/Table/Column.svelte.d.ts

@@ -3,6 +3,7 @@ declare function $$render<T extends Record<string, unknown>>(): {
     props: {
         key?: string;
         label: string;
+        header?: TableColumn<T>["header"];
         value?: keyof T | ((row: T) => unknown);
         cell?: TableColumn<T>["cell"];
         width?: number | string;

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

@@ -5,6 +5,12 @@
 		owner: string;
 		status: 'Active' | 'Paused' | 'Review';
 		budget: number;
+		region: string;
+		phase: string;
+		priority: string;
+		launch: string;
+		risk: string;
+		updated: string;
 	};
 
 	export const demo = {
@@ -20,22 +26,214 @@
 	import type { TableSortDescriptor } from './types';
 
 	const rows: Project[] = [
-		{ id: 1, name: 'Atlas', owner: 'Mika', status: 'Active', budget: 18200 },
-		{ id: 2, name: 'Beacon', owner: 'Nia', status: 'Review', budget: 9400 },
-		{ id: 3, name: 'Canopy', owner: 'Tao', status: 'Paused', budget: 12650 },
-		{ id: 4, name: 'Drift', owner: 'Ari', status: 'Active', budget: 22100 },
-		{ id: 5, name: 'Ember', owner: 'Sana', status: 'Review', budget: 15840 },
-		{ id: 6, name: 'Fjord', owner: 'Leo', status: 'Active', budget: 27600 },
-		{ id: 7, name: 'Grove', owner: 'Ilya', status: 'Paused', budget: 7300 },
-		{ id: 8, name: 'Harbor', owner: 'Noor', status: 'Active', budget: 31450 },
-		{ id: 9, name: 'Ion', owner: 'Mika', status: 'Review', budget: 11900 },
-		{ id: 10, name: 'Juno', owner: 'Tao', status: 'Active', budget: 19875 },
-		{ id: 11, name: 'Keystone', owner: 'Ari', status: 'Paused', budget: 14620 },
-		{ id: 12, name: 'Lumen', owner: 'Nia', status: 'Review', budget: 24880 },
-		{ id: 13, name: 'Meridian', owner: 'Sana', status: 'Active', budget: 33750 },
-		{ id: 14, name: 'Nimbus', owner: 'Leo', status: 'Paused', budget: 6800 },
-		{ id: 15, name: 'Orchid', owner: 'Ilya', status: 'Active', budget: 17340 },
-		{ id: 16, name: 'Pulse', owner: 'Noor', status: 'Review', budget: 20410 }
+		{
+			id: 1,
+			name: 'Atlas',
+			owner: 'Mika',
+			status: 'Active',
+			budget: 18200,
+			region: 'North America',
+			phase: 'Discovery',
+			priority: 'High',
+			launch: 'Q2 2026',
+			risk: 'Low',
+			updated: 'Today'
+		},
+		{
+			id: 2,
+			name: 'Beacon',
+			owner: 'Nia',
+			status: 'Review',
+			budget: 9400,
+			region: 'Europe',
+			phase: 'Design',
+			priority: 'Medium',
+			launch: 'Q3 2026',
+			risk: 'Medium',
+			updated: 'Yesterday'
+		},
+		{
+			id: 3,
+			name: 'Canopy',
+			owner: 'Tao',
+			status: 'Paused',
+			budget: 12650,
+			region: 'Asia Pacific',
+			phase: 'Build',
+			priority: 'Low',
+			launch: 'Q4 2026',
+			risk: 'High',
+			updated: 'May 12'
+		},
+		{
+			id: 4,
+			name: 'Drift',
+			owner: 'Ari',
+			status: 'Active',
+			budget: 22100,
+			region: 'Latin America',
+			phase: 'Launch',
+			priority: 'High',
+			launch: 'Q1 2027',
+			risk: 'Low',
+			updated: 'May 10'
+		},
+		{
+			id: 5,
+			name: 'Ember',
+			owner: 'Sana',
+			status: 'Review',
+			budget: 15840,
+			region: 'Middle East',
+			phase: 'Validation',
+			priority: 'Medium',
+			launch: 'Q2 2027',
+			risk: 'Medium',
+			updated: 'May 8'
+		},
+		{
+			id: 6,
+			name: 'Fjord',
+			owner: 'Leo',
+			status: 'Active',
+			budget: 27600,
+			region: 'Nordics',
+			phase: 'Build',
+			priority: 'High',
+			launch: 'Q3 2027',
+			risk: 'Low',
+			updated: 'May 7'
+		},
+		{
+			id: 7,
+			name: 'Grove',
+			owner: 'Ilya',
+			status: 'Paused',
+			budget: 7300,
+			region: 'Africa',
+			phase: 'Planning',
+			priority: 'Low',
+			launch: 'Q4 2027',
+			risk: 'High',
+			updated: 'May 5'
+		},
+		{
+			id: 8,
+			name: 'Harbor',
+			owner: 'Noor',
+			status: 'Active',
+			budget: 31450,
+			region: 'Oceania',
+			phase: 'Scale',
+			priority: 'High',
+			launch: 'Q1 2028',
+			risk: 'Medium',
+			updated: 'May 3'
+		},
+		{
+			id: 9,
+			name: 'Ion',
+			owner: 'Mika',
+			status: 'Review',
+			budget: 11900,
+			region: 'North America',
+			phase: 'Research',
+			priority: 'Medium',
+			launch: 'Q2 2028',
+			risk: 'Low',
+			updated: 'May 1'
+		},
+		{
+			id: 10,
+			name: 'Juno',
+			owner: 'Tao',
+			status: 'Active',
+			budget: 19875,
+			region: 'Europe',
+			phase: 'Delivery',
+			priority: 'High',
+			launch: 'Q3 2028',
+			risk: 'Medium',
+			updated: 'Apr 29'
+		},
+		{
+			id: 11,
+			name: 'Keystone',
+			owner: 'Ari',
+			status: 'Paused',
+			budget: 14620,
+			region: 'Asia Pacific',
+			phase: 'Planning',
+			priority: 'Low',
+			launch: 'Q4 2028',
+			risk: 'High',
+			updated: 'Apr 27'
+		},
+		{
+			id: 12,
+			name: 'Lumen',
+			owner: 'Nia',
+			status: 'Review',
+			budget: 24880,
+			region: 'Latin America',
+			phase: 'Validation',
+			priority: 'Medium',
+			launch: 'Q1 2029',
+			risk: 'Low',
+			updated: 'Apr 24'
+		},
+		{
+			id: 13,
+			name: 'Meridian',
+			owner: 'Sana',
+			status: 'Active',
+			budget: 33750,
+			region: 'Middle East',
+			phase: 'Scale',
+			priority: 'High',
+			launch: 'Q2 2029',
+			risk: 'Medium',
+			updated: 'Apr 22'
+		},
+		{
+			id: 14,
+			name: 'Nimbus',
+			owner: 'Leo',
+			status: 'Paused',
+			budget: 6800,
+			region: 'Nordics',
+			phase: 'Discovery',
+			priority: 'Low',
+			launch: 'Q3 2029',
+			risk: 'High',
+			updated: 'Apr 20'
+		},
+		{
+			id: 15,
+			name: 'Orchid',
+			owner: 'Ilya',
+			status: 'Active',
+			budget: 17340,
+			region: 'Africa',
+			phase: 'Launch',
+			priority: 'Medium',
+			launch: 'Q4 2029',
+			risk: 'Low',
+			updated: 'Apr 18'
+		},
+		{
+			id: 16,
+			name: 'Pulse',
+			owner: 'Noor',
+			status: 'Review',
+			budget: 20410,
+			region: 'Oceania',
+			phase: 'Build',
+			priority: 'High',
+			launch: 'Q1 2030',
+			risk: 'Medium',
+			updated: 'Apr 16'
+		}
 	];
 
 	let selection = $state<Set<number>>(new Set([1, 4]));
@@ -72,7 +270,7 @@
 	})}
 {/snippet}
 
-<Table data={rows} bind:selection bind:sortOrder selectionMode="multiple">
+<Table data={rows} bind:selection bind:sortOrder selectionMode="multiple" height="100%">
 	<Table.Column label="Project" sortKey="name" sortable minWidth={160}>
 		{#snippet cell(project: Project)}
 			{@render projectCell(project)}
@@ -96,6 +294,13 @@
 			{@render budgetCell(project)}
 		{/snippet}
 	</Table.Column>
+
+	<Table.Column label="Region" value="region" sortKey="region" sortable minWidth={150} />
+	<Table.Column label="Phase" value="phase" sortKey="phase" sortable minWidth={120} />
+	<Table.Column label="Priority" value="priority" sortKey="priority" sortable minWidth={112} />
+	<Table.Column label="Launch" value="launch" sortKey="launch" sortable minWidth={112} />
+	<Table.Column label="Risk" value="risk" sortKey="risk" sortable minWidth={104} />
+	<Table.Column label="Updated" value="updated" sortKey="updated" sortable minWidth={120} />
 </Table>
 
 <style>

package/dist/components/Library/Table/Table.svelte

@@ -54,6 +54,7 @@
 	}: Props = $props();
 
 	let tableSortOrder = $state<TableSortDescriptor<T>[]>(sortOrder);
+	let scrollOffsetX = $state(0);
 	let dragSelection = $state<{
 		active: boolean;
 		pointerId: number;
@@ -88,15 +89,9 @@
 		typeof value === 'number' ? `${value}px` : value;
 
 	const tableShellStyle = $derived.by(() => {
-		const hasExplicitHeight = layoutProps.height !== undefined || layoutProps.size !== undefined;
-		const fallbackHeight = hasExplicitHeight ? undefined : (layoutProps.maxHeight ?? '100%');
-
 		return [
 			layoutStyle(layoutProps),
-			rootStyle,
-			layoutProps.height === undefined ? '' : `height: ${toCssSize(layoutProps.height)};`,
-			layoutProps.maxHeight === undefined ? '' : `max-height: ${toCssSize(layoutProps.maxHeight)};`,
-			fallbackHeight === undefined ? '' : `height: ${toCssSize(fallbackHeight)};`
+			rootStyle
 		]
 			.filter(Boolean)
 			.join(' ');
@@ -214,6 +209,18 @@
 			(column, index) => !column.hidden && !hidden.has(columnKey(column, index))
 		);
 	});
+	const tableMinWidth = $derived.by(() => {
+		const widths = visibleColumns
+			.map((column) => toCssSize(column.width ?? column.minWidth))
+			.filter((width): width is string => Boolean(width));
+
+		if (widths.length === 0) return '100%';
+		return `max(100%, calc(${widths.join(' + ')}))`;
+	});
+	const tableWidthStyle = $derived(`width: ${tableMinWidth};`);
+	const headerStyle = $derived(
+		`${tableWidthStyle} transform: translate3d(${-scrollOffsetX}px, 0, 0);`
+	);
 
 	const sortedRows = $derived.by(() => {
 		if (tableSortOrder.length === 0) return data;
@@ -391,6 +398,10 @@
 		if (selectionMode === 'multiple' || isInteractiveTarget(event.target)) return;
 		updateSelection(key);
 	};
+
+	const handleScroll = (geometry: { offset: { x: number } }) => {
+		scrollOffsetX = geometry.offset.x;
+	};
 </script>
 
 {#if children}
@@ -405,59 +416,78 @@
 
 <div class="table-shell" style={tableShellStyle} {...forwardedProps}>
 	{#if columnHeaders === 'visible'}
-		<table
-			class="table-header-table table"
-			role={selectionMode === 'none' ? undefined : 'grid'}
-			aria-multiselectable={selectionMode === 'multiple' ? 'true' : undefined}
-		>
-			<thead class="table-header">
-				<tr>
-					{#each visibleColumns as column, index (columnKey(column, index))}
-						<th
-							class={`table-heading table-align-${column.alignment ?? 'leading'}`}
-							colspan={headerSpan(column.colspan)}
-							rowspan={headerSpan(column.rowspan)}
-							style:min-width={toCssSize(column.minWidth)}
-							style:width={toCssSize(column.width)}
-							aria-sort={tableSortOrder[0]?.key === columnSortKey(column, index)
-								? tableSortOrder[0].direction === 'ascending'
-									? 'ascending'
-									: 'descending'
-								: undefined}
-						>
-							{#if column.sortable}
-								{@const sortDirection = activeSortDirection(column, index)}
-								<button
-									type="button"
-									class="table-sort-button"
-									onclick={() => updateSort(column, index)}
-								>
-									<span>{column.label}</span>
-									{#if sortDirection === 'ascending'}
-										<ArrowUpIcon class="table-sort-icon" size={12} strokeWidth={2.25} />
-									{:else if sortDirection === 'descending'}
-										<ArrowDownIcon class="table-sort-icon" size={12} strokeWidth={2.25} />
+		<div class="table-header-frame">
+			<table
+				class="table-header-table table"
+				style={headerStyle}
+				role={selectionMode === 'none' ? undefined : 'grid'}
+				aria-multiselectable={selectionMode === 'multiple' ? 'true' : undefined}
+			>
+				<thead class="table-header">
+					<tr>
+						{#each visibleColumns as column, index (columnKey(column, index))}
+							<th
+								class={`table-heading table-align-${column.alignment ?? 'leading'}`}
+								colspan={headerSpan(column.colspan)}
+								rowspan={headerSpan(column.rowspan)}
+								style:min-width={toCssSize(column.minWidth)}
+								style:width={toCssSize(column.width)}
+								aria-sort={tableSortOrder[0]?.key === columnSortKey(column, index)
+									? tableSortOrder[0].direction === 'ascending'
+										? 'ascending'
+										: 'descending'
+									: undefined}
+							>
+								{#if column.sortable}
+									{@const sortDirection = activeSortDirection(column, index)}
+									<button
+										type="button"
+										class="table-sort-button"
+										onclick={() => updateSort(column, index)}
+									>
+										<span>
+											{#if column.header}
+												{@render column.header(column, index)}
+											{:else}
+												{column.label}
+											{/if}
+										</span>
+										{#if sortDirection === 'ascending'}
+											<ArrowUpIcon class="table-sort-icon" size={12} strokeWidth={2.25} />
+										{:else if sortDirection === 'descending'}
+											<ArrowDownIcon class="table-sort-icon" size={12} strokeWidth={2.25} />
+										{:else}
+											<ArrowUpDownIcon
+												class="table-sort-icon table-sort-icon-muted"
+												size={12}
+												strokeWidth={2.25}
+											/>
+										{/if}
+									</button>
+								{:else}
+									{#if column.header}
+										{@render column.header(column, index)}
 									{:else}
-										<ArrowUpDownIcon
-											class="table-sort-icon table-sort-icon-muted"
-											size={12}
-											strokeWidth={2.25}
-										/>
+										{column.label}
 									{/if}
-								</button>
-							{:else}
-								{column.label}
-							{/if}
-						</th>
-					{/each}
-				</tr>
-			</thead>
-		</table>
+								{/if}
+							</th>
+						{/each}
+					</tr>
+				</thead>
+			</table>
+		</div>
 	{/if}
 
-	<ScrollView axis="both" loader={bodyLoaderOptions} contentStyles={{ paddingX: 0, paddingY: 0 }}>
+	<ScrollView
+		axis="both"
+		loader={bodyLoaderOptions}
+		contentStyles={{ paddingX: 0, paddingY: 0 }}
+		onScroll={handleScroll}
+	>
 		<table
 			class="table-body-table table"
+			style={tableWidthStyle}
 			role={selectionMode === 'none' ? undefined : 'grid'}
 			aria-multiselectable={selectionMode === 'multiple' ? 'true' : undefined}
 		>
@@ -512,8 +542,10 @@
 		flex-direction: column;
 		flex: 1 1 auto;
 		align-self: stretch;
+		min-width: 0;
 		min-height: 0;
 		width: 100%;
+		max-width: 100%;
 		overflow: hidden;
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius);
@@ -524,7 +556,7 @@
 
 	.table {
 		width: 100%;
-		min-width: max-content;
+		min-width: 100%;
 		border-collapse: separate;
 		border-spacing: 0;
 	}
@@ -537,19 +569,28 @@
 		);
 	}
 
+	.table-header-frame {
+		width: 100%;
+		min-width: 0;
+		overflow: hidden;
+		border-bottom: 1px solid var(--sveltely-border-color);
+	}
+
 	.table-header-table {
 		flex: 0 0 auto;
-		border-bottom: 1px solid var(--sveltely-border-color);
+		will-change: transform;
 	}
 
-	.table-header-table + :global(.scroll-view) {
+	.table-header-frame + :global(.scroll-view) {
 		border-top-left-radius: 0;
 		border-top-right-radius: 0;
 	}
 
 	.table-shell > :global(.scroll-view) {
 		flex: 1 1 auto;
+		min-width: 0;
 		min-height: 0;
+		max-width: 100%;
 	}
 
 	.table-heading,

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

@@ -1,7 +1,6 @@
 export { default as Column } from './Column.svelte';
 import { type Snippet } from 'svelte';
 import { type LoaderProps } from '../../../style/loader';
-import { type LayoutProps } from '../../../style/layout';
 import { type StyleProps } from '../../../style/surface';
 import type { TableColumn, TableColumnCustomization, TableColumnHeaderVisibility, TableSelection, TableSelectionMode, TableSortDescriptor } from './types';
 declare function $$render<T extends Record<string, unknown>>(): {
@@ -17,7 +16,7 @@ declare function $$render<T extends Record<string, unknown>>(): {
         emptyLabel?: string;
         onSortOrderChange?: (sortOrder: TableSortDescriptor<T>[]) => void;
         onSelectionChange?: (selection: TableSelection) => void;
-    } & LayoutProps & StyleProps & LoaderProps & Record<string, unknown>;
+    } & import("../../../style/layout").FrameProps & import("../../../style/layout").StackProps & StyleProps & LoaderProps & Record<string, unknown>;
     exports: {};
     bindings: "selection" | "sortOrder" | "columnCustomization";
     slots: {};

package/dist/components/Library/Table/types.d.ts

@@ -18,6 +18,7 @@ export type TableColumnCustomization = {
 export type TableColumn<T> = {
     key?: string;
     label: string;
+    header?: Snippet<[column: TableColumn<T>, index: number]>;
     value?: keyof T | ((row: T) => unknown);
     cell?: Snippet<[row: T, index: number]>;
     width?: number | string;

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

@@ -6,9 +6,10 @@
 </script>
 
 <script lang="ts">
+	import VStack from '../VStack';
 	import TextShimmer from './TextShimmer.svelte';
 </script>
 
-<div class="vstack gap-2">
+<VStack gap={5}>
 	<TextShimmer as="h2" text="Sveltely shimmer" />
-</div>
+</VStack>

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

@@ -8,19 +8,12 @@
 </script>
 
 <script lang="ts">
+	import VStack from '../VStack';
 	import TimePicker from './TimePicker.svelte';
 
 	let value = $state<Date | null>(new Date());
 </script>
 
-<div class="time-picker-demo vstack gap-4">
+<VStack width="100%" height="100%" gap={10}>
 	<TimePicker bind:value />
-</div>
-
-<style>
-	.time-picker-demo {
-		width: 100%;
-		height: 100%;
-		min-height: 0;
-	}
-</style>
+</VStack>

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

@@ -7,15 +7,16 @@
 </script>
 
 <script lang="ts">
+	import VStack from '../VStack';
 	import TokenSearchField from './TokenSearchField.svelte';
 
 	let tokens = $state(['svelte', 'ui']);
 	let value = $state('');
 </script>
 
-<div class="vstack w-full max-w-md gap-2">
+<VStack width="100%" maxWidth="28rem" gap={5}>
 	<TokenSearchField bind:tokens bind:value placeholder="Search keywords" />
 	<p class="text-xs text-[var(--sveltely-text-secondary-color)]">
 		Tokens: {tokens.join(', ') || 'empty'}
 	</p>
-</div>
+</VStack>