@x33025/sveltely 0.1.23 → 0.1.25

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 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="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>

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,15 @@
 	})}
 {/snippet}
 
-<Table data={rows} bind:selection bind:sortOrder selectionMode="multiple">
+<Table
+	data={rows}
+	bind:selection
+	bind:sortOrder
+	selectionMode="multiple"
+	virtualized
+	rowHeight={48}
+	height="100%"
+>
 	<Table.Column label="Project" sortKey="name" sortable minWidth={160}>
 		{#snippet cell(project: Project)}
 			{@render projectCell(project)}
@@ -96,6 +302,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>