@x33025/sveltely 0.1.1 → 0.1.2

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

@@ -1,17 +1,19 @@
 <script module lang="ts">
 	export const demo = {
 		name: 'Button',
-		description: 'Token-aware button primitive with optional icon support.'
+		description: 'Token-aware button primitive with optional icon support.',
+		columnSpan: 2
 	};
 </script>
 
 <script lang="ts">
 	import { SaveIcon } from '@lucide/svelte';
 	import Button from './Button.svelte';
+	import HStack from '../HStack';
 </script>
 
-<div class="hstack items-center gap-3">
+<HStack align="center" gap={0.75}>
 	<Button label="Default" />
 	<Button label="Solid" variant="solid" />
 	<Button icon={SaveIcon} label="With icon" />
-</div>
+</HStack>

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

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

@@ -3,7 +3,7 @@
 		name: 'Calendar',
 		description: 'Compact month calendar with token-driven spacing and radius.',
 		columnSpan: 2,
-		rowSpan: 2
+		rowSpan: 3
 	};
 </script>
 
@@ -15,16 +15,4 @@
 	let weekStart = $state<'monday' | 'sunday'>('monday');
 </script>
 
-<div class="vstack gap-2">
-	<div class="hstack gap-2">
-		<button type="button" onclick={() => (weekStart = 'monday')}>Monday start</button>
-		<button type="button" onclick={() => (weekStart = 'sunday')}>Sunday start</button>
-	</div>
-	<Calendar bind:value bind:month {weekStart} />
-	<p class="text-xs text-zinc-500">
-		Selected: {value ? value.toLocaleDateString() : 'none'} | Month: {month.toLocaleDateString(undefined, {
-			month: 'long',
-			year: 'numeric'
-		})} | Week starts: {weekStart}
-	</p>
-</div>
+<Calendar bind:value bind:month {weekStart} />

package/dist/components/Library/Calendar/Calendar.svelte

@@ -5,8 +5,7 @@
 	const startOfDay = (value: Date) =>
 		new Date(value.getFullYear(), value.getMonth(), value.getDate());
 
-	const startOfMonth = (value: Date) =>
-		new Date(value.getFullYear(), value.getMonth(), 1);
+	const startOfMonth = (value: Date) => new Date(value.getFullYear(), value.getMonth(), 1);
 
 	type CalendarCell = {
 		key: string;
@@ -23,7 +22,8 @@
 		month?: Date;
 		weekdayLabels?: string[];
 		weekStart?: 'monday' | 'sunday';
-	} & StyleProps & Record<string, unknown>;
+	} & StyleProps &
+		Record<string, unknown>;
 
 	const defaultWeekdayLabels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 	const today = new Date();
@@ -42,14 +42,10 @@
 	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'calendar'));
 
 	const orderedWeekdayLabels = $derived(
-		weekStart === 'sunday'
-			? [weekdayLabels[6], ...weekdayLabels.slice(0, 6)]
-			: weekdayLabels
+		weekStart === 'sunday' ? [weekdayLabels[6], ...weekdayLabels.slice(0, 6)] : weekdayLabels
 	);
 
-	const weekendColumnIndexes = $derived(
-		weekStart === 'sunday' ? [0, 6] : [5, 6]
-	);
+	const weekendColumnIndexes = $derived(weekStart === 'sunday' ? [0, 6] : [5, 6]);
 
 	function shiftMonth(offset: number) {
 		month = new Date(month.getFullYear(), month.getMonth() + offset, 1);
@@ -59,6 +55,17 @@
 		value = startOfDay(nextValue);
 	}
 
+	function activateCell(cell: CalendarCell) {
+		if (!cell.value) return;
+
+		if (cell.isCurrentMonth) {
+			selectDate(cell.value);
+			return;
+		}
+
+		month = startOfMonth(cell.value);
+	}
+
 	const displayYear = $derived(month.getFullYear());
 	const displayMonth = $derived(month.getMonth());
 	const todayYear = today.getFullYear();
@@ -74,37 +81,28 @@
 
 	const cells = $derived.by(() => {
 		const firstDay = new Date(displayYear, displayMonth, 1);
-		const daysInMonth = new Date(displayYear, displayMonth + 1, 0).getDate();
 		const leadingEmptyDays =
 			weekStart === 'sunday' ? firstDay.getDay() : (firstDay.getDay() + 6) % 7;
 
-		return Array.from({ length: leadingEmptyDays + daysInMonth }, (_, index): CalendarCell => {
+		return Array.from({ length: 42 }, (_, index): CalendarCell => {
 			const dayNumber = index - leadingEmptyDays + 1;
-			if (dayNumber < 1) {
-				return {
-					key: `empty-${index}`,
-					label: '',
-					isCurrentMonth: false,
-					isToday: false,
-					isWeekend: false,
-					isSelected: false
-				};
-			}
-
 			const cellDate = new Date(displayYear, displayMonth, dayNumber);
 			const dayOfWeek = cellDate.getDay();
+			const isCurrentMonth = cellDate.getMonth() === displayMonth;
 
 			return {
-				key: `day-${dayNumber}`,
-				label: String(dayNumber),
-				isCurrentMonth: true,
+				key: `day-${cellDate.getFullYear()}-${cellDate.getMonth()}-${cellDate.getDate()}`,
+				label: String(cellDate.getDate()),
+				isCurrentMonth,
 				value: cellDate,
 				isToday:
+					isCurrentMonth &&
 					displayYear === todayYear &&
 					displayMonth === todayMonth &&
-					dayNumber === todayDate,
+					cellDate.getDate() === todayDate,
 				isWeekend: dayOfWeek === 0 || dayOfWeek === 6,
 				isSelected:
+					isCurrentMonth &&
 					value !== null &&
 					cellDate.getFullYear() === value.getFullYear() &&
 					cellDate.getMonth() === value.getMonth() &&
@@ -116,16 +114,26 @@
 
 <div class="calendar vstack" style={rootStyle} {...props}>
 	<div class="calendar-grid">
-		<button class="calendar-nav-button" type="button" aria-label="Previous month" onclick={() => shiftMonth(-1)}>
+		<button
+			class="calendar-nav-button"
+			type="button"
+			aria-label="Previous month"
+			onclick={() => shiftMonth(-1)}
+		>
 			<ChevronLeftIcon class="calendar-nav-icon" strokeWidth={2} />
 		</button>
 		<div class="calendar-title-cell">
 			<h2 class="calendar-title">{monthLabel}</h2>
 		</div>
-		<button class="calendar-nav-button" type="button" aria-label="Next month" onclick={() => shiftMonth(1)}>
+		<button
+			class="calendar-nav-button"
+			type="button"
+			aria-label="Next month"
+			onclick={() => shiftMonth(1)}
+		>
 			<ChevronRightIcon class="calendar-nav-icon" strokeWidth={2} />
 		</button>
-		{#each orderedWeekdayLabels as weekday, index}
+		{#each orderedWeekdayLabels as weekday, index (weekday)}
 			<div
 				class="calendar-weekday"
 				class:calendar-weekday-weekend={weekendColumnIndexes.includes(index)}
@@ -135,23 +143,18 @@
 		{/each}
 
 		{#each cells as cell (cell.key)}
-			{#if cell.isCurrentMonth && cell.value}
-				<button
-					type="button"
-					class="calendar-day"
-					class:calendar-day-today={cell.isToday}
-					class:calendar-day-selected={cell.isSelected}
-					class:calendar-day-weekend={cell.isWeekend}
-					aria-pressed={cell.isSelected}
-					onclick={() => selectDate(cell.value!)}
-				>
-					{cell.label}
-				</button>
-			{:else}
-				<div class="calendar-day calendar-day-empty">
-					{cell.label}
-				</div>
-			{/if}
+			<button
+				type="button"
+				class="calendar-day"
+				class:calendar-day-outside={!cell.isCurrentMonth}
+				class:calendar-day-today={cell.isToday}
+				class:calendar-day-selected={cell.isSelected}
+				class:calendar-day-weekend={cell.isWeekend}
+				aria-pressed={cell.isSelected}
+				onclick={() => activateCell(cell)}
+			>
+				{cell.label}
+			</button>
 		{/each}
 	</div>
 </div>
@@ -165,7 +168,9 @@
 		--calendar-weekend-header-color: var(--color-zinc-400);
 		--calendar-weekend-selected-color: white;
 		--calendar-cell-width: calc(var(--calendar-cell-core-size) + (var(--sveltely-padding-x) * 2.2));
-		--calendar-cell-height: calc(var(--calendar-cell-core-size) + (var(--sveltely-padding-y) * 2.2));
+		--calendar-cell-height: calc(
+			var(--calendar-cell-core-size) + (var(--sveltely-padding-y) * 2.2)
+		);
 		--calendar-title-size: calc(var(--calendar-font-size) * 1.03);
 		--calendar-weekday-size: calc(var(--calendar-font-size) * 0.75);
 		font-size: var(--calendar-font-size);
@@ -283,11 +288,10 @@
 		background: var(--sveltely-hover-color);
 	}
 
-	.calendar-day-empty {
+	.calendar-day-outside {
 		border-color: transparent;
 		background: transparent;
-		color: transparent;
-		cursor: default;
+		color: var(--color-zinc-400);
 	}
 
 	.calendar-day-today {

package/dist/components/Library/Divider/Divider.svelte

@@ -0,0 +1,10 @@
+<div class="divider" role="separator"></div>
+
+<style>
+	.divider {
+		width: var(--divider-width, 100%);
+		height: var(--divider-height, 1px);
+		align-self: var(--divider-align-self, auto);
+		background: var(--color-gray-200);
+	}
+</style>

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

@@ -0,0 +1,26 @@
+export default Divider;
+type Divider = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Divider: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

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

@@ -0,0 +1 @@
+export { default } from './Divider.svelte';

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

@@ -0,0 +1 @@
+export { default } from './Divider.svelte';

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

@@ -7,19 +7,22 @@
 
 <script lang="ts">
 	import Dropdown from './Dropdown.svelte';
+	import type { DropdownEntry } from './types';
 
-	const allItems = [
+	const allItems: DropdownEntry<string>[] = [
 		{
 			type: 'group' as const,
 			label: 'Publishing',
 			items: [
 				{ label: 'Draft', value: 'draft' },
 				{ label: 'Scheduled', value: 'scheduled' },
+				{ type: 'divider' },
 				{
 					type: 'submenu' as const,
 					label: 'Advanced',
 					items: [
 						{ label: 'Review queue', value: 'review' },
+						{ type: 'divider' },
 						{
 							type: 'action' as const,
 							label: 'Open workflow',
@@ -48,11 +51,15 @@
 		}
 	];
 
-	const filterEntries = (entries: typeof allItems, query: string): typeof allItems => {
+	const filterEntries = (entries: DropdownEntry<string>[], query: string): DropdownEntry<string>[] => {
 		const normalizedQuery = query.trim().toLowerCase();
 		if (!normalizedQuery) return allItems;
 
-		return entries.flatMap((entry) => {
+		return entries.flatMap<DropdownEntry<string>>((entry) => {
+			if (entry.type === 'divider') {
+				return [];
+			}
+
 			if (entry.type === 'group') {
 				const nextItems = filterEntries(entry.items, normalizedQuery);
 				return nextItems.length > 0 ? [{ ...entry, items: nextItems }] : [];

package/dist/components/Library/Dropdown/Dropdown.svelte

@@ -1,11 +1,13 @@
 <script lang="ts" generics="T extends string | number = string">
 	import { CheckIcon, ChevronDownIcon, ChevronRightIcon } from '@lucide/svelte';
+	import Divider from '../Divider';
 	import Floating from '../Floating/Floating.svelte';
 	import SearchInput from '../SearchInput';
 	import { surfaceStyle, type StyleProps } from '../../../style/surface';
 	import type { Anchor } from '../../../utils/positioning';
 	import type {
 		DropdownAction,
+		DropdownDivider,
 		DropdownEntry,
 		DropdownGroup,
 		DropdownItem,
@@ -31,6 +33,8 @@
 		'type' in entry && entry.type === 'group';
 	const isAction = (entry: DropdownItem<T> | DropdownAction): entry is DropdownAction =>
 		'type' in entry && entry.type === 'action';
+	const isDivider = (entry: DropdownEntry<T>): entry is DropdownDivider =>
+		'type' in entry && entry.type === 'divider';
 	const isSubmenu = (entry: DropdownEntry<T>): entry is DropdownSubmenu<T> =>
 		'type' in entry && entry.type === 'submenu';
 
@@ -62,6 +66,10 @@
 		inheritedDisabled = false
 	): DropdownItem<T>[] =>
 		entries.flatMap((entry) => {
+			if (isDivider(entry)) {
+				return [];
+			}
+
 			const nextDisabled = inheritedDisabled || !!entry.disabled;
 			if (isGroup(entry) || isSubmenu(entry)) {
 				return flattenItems(entry.items, nextDisabled);
@@ -79,6 +87,9 @@
 				if (nested) return nested;
 				continue;
 			}
+			if (isDivider(entry)) {
+				continue;
+			}
 			return entry.label;
 		}
 		return null;
@@ -154,7 +165,7 @@
 			aria-haspopup="dialog"
 			onclick={floating.toggle}
 		>
-			<span>{triggerText}</span>
+			<span class="dropdown-trigger-label">{triggerText}</span>
 			<ChevronDownIcon class="size-4 text-zinc-500" />
 		</button>
 	{/snippet}
@@ -168,12 +179,13 @@
 				bind:value={query}
 				placeholder={searchPlaceholder}
 				radiusSource={true}
-				class="w-64"
 			/>
 		{/if}
 		{#snippet renderEntries(entries: DropdownEntry<T>[], inheritedDisabled = false)}
-			{#each entries as entry, index (`${index}-${entry.type ?? 'option'}-${entry.label}`)}
-				{#if isGroup(entry)}
+			{#each entries as entry, index (`${index}-${entry.type ?? 'option'}-${isDivider(entry) ? 'divider' : entry.label}`)}
+				{#if isDivider(entry)}
+					<Divider />
+				{:else if isGroup(entry)}
 					<div class="dropdown-group vstack">
 						{#if entry.label}
 							<div class="dropdown-group-label">{entry.label}</div>
@@ -274,6 +286,7 @@
 	.dropdown-trigger {
 		display: inline-flex;
 		min-width: 8rem;
+		max-width: 100%;
 		align-items: center;
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius);
@@ -286,6 +299,18 @@
 		transition: color 150ms, border-color 150ms, background-color 150ms;
 	}
 
+	.dropdown-trigger-label {
+		min-width: 0;
+		flex: 1 1 auto;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.dropdown-trigger :global(svg) {
+		flex: 0 0 auto;
+	}
+
 	.dropdown-trigger:hover {
 		background: var(--sveltely-hover-color);
 	}
@@ -300,6 +325,8 @@
 	}
 
 	.dropdown-content {
+		--dropdown-item-padding-x: calc(var(--sveltely-padding-x) * 0.67);
+		--dropdown-item-padding-y: calc(var(--sveltely-padding-y) * 0.33);
 		gap: var(--sveltely-inset);
 	}
 
@@ -307,11 +334,18 @@
 		gap: var(--sveltely-inset);
 	}
 
+	.dropdown-content :global(.divider) {
+		--divider-width: auto;
+		margin-inline: var(--dropdown-item-padding-x);
+		margin-block: calc(var(--sveltely-inset) * 0.5);
+		background: var(--sveltely-border-color);
+	}
+
 	.dropdown-item {
 		width: 100%;
 		gap: calc(var(--sveltely-inset) * 2);
 		border-radius: var(--dropdown-item-radius, var(--sveltely-border-radius-nested));
-		padding: calc(var(--sveltely-padding-y) * 0.33) calc(var(--sveltely-padding-x) * 0.67);
+		padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
 	}
 
 	.dropdown-item :global(*) {

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

@@ -1,2 +1,2 @@
 export { default } from './Dropdown.svelte';
-export type { DropdownAction, DropdownEntry, DropdownGroup, DropdownItem, DropdownSubmenu } from './types';
+export type { DropdownAction, DropdownDivider, DropdownEntry, DropdownGroup, DropdownItem, DropdownSubmenu } from './types';

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

@@ -11,6 +11,9 @@ export type DropdownAction = {
     disabled?: boolean;
     onSelect: () => void;
 };
+export type DropdownDivider = {
+    type: 'divider';
+};
 export type DropdownSubmenu<TValue extends string | number = string> = {
     type: 'submenu';
     label: string;
@@ -24,4 +27,4 @@ export type DropdownGroup<TValue extends string | number = string> = {
     disabled?: boolean;
     items: DropdownEntry<TValue>[];
 };
-export type DropdownEntry<TValue extends string | number = string> = DropdownItem<TValue> | DropdownAction | DropdownGroup<TValue> | DropdownSubmenu<TValue>;
+export type DropdownEntry<TValue extends string | number = string> = DropdownItem<TValue> | DropdownAction | DropdownDivider | DropdownGroup<TValue> | DropdownSubmenu<TValue>;

package/dist/components/Library/Floating/Floating.svelte

@@ -177,6 +177,39 @@
 		return Number.isFinite(parsed) ? parsed : 0;
 	};
 
+	const resolveCssLength = (element: HTMLElement, value: string) => {
+		const trimmedValue = value.trim();
+		if (!trimmedValue) return 0;
+		if (trimmedValue.endsWith('px')) return parsePx(trimmedValue);
+
+		const probe = document.createElement('div');
+		probe.style.position = 'absolute';
+		probe.style.visibility = 'hidden';
+		probe.style.pointerEvents = 'none';
+		probe.style.width = trimmedValue;
+		element.appendChild(probe);
+		const width = probe.getBoundingClientRect().width;
+		probe.remove();
+		return width;
+	};
+
+	const getFloatingInset = () => {
+		if (!panelEl) return 0;
+		const styles = getComputedStyle(panelEl);
+		return resolveCssLength(panelEl, styles.getPropertyValue('--sveltely-floating-inset'));
+	};
+
+	const offsetCoords = (
+		coords: { top: number; left: number },
+		currentAnchor: Anchor,
+		offset: number
+	) => {
+		if (currentAnchor === 'bottom') return { ...coords, top: coords.top + offset };
+		if (currentAnchor === 'top') return { ...coords, top: coords.top - offset };
+		if (currentAnchor === 'right') return { ...coords, left: coords.left + offset };
+		return { ...coords, left: coords.left - offset };
+	};
+
 	const updateRadiusFromSource = () => {
 		if (!matchPanelRadiusToSource || !panelEl || !contentEl) {
 			computedPanelRadius = null;
@@ -222,7 +255,7 @@
 			placement,
 			preferredAlign
 		);
-		panelCoords = { top: result.top, left: result.left };
+		panelCoords = offsetCoords({ top: result.top, left: result.left }, result.anchor, getFloatingInset());
 		panelTransform = result.transform;
 		resolvedAnchor = result.anchor;
 	};
@@ -317,6 +350,7 @@
 
 	const resolvedPanelStyle = $derived.by(() => {
 		const declarations = [
+			'--sveltely-floating-inset: var(--sveltely-inset);',
 			`top: ${panelCoords.top}px;`,
 			`left: ${panelCoords.left}px;`,
 			`transform: ${panelTransform};`

package/dist/components/Library/ForEach/ForEach.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		items: T[];
+		children: Snippet<[item: T, index: number]>;
+	};
+
+	let { items, children }: Props = $props();
+</script>
+
+{#each items as item, index}
+	{@render children(item, index)}
+{/each}

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

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        items: T[];
+        children: Snippet<[item: T, index: number]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ForEach: $$IsomorphicComponent;
+type ForEach<T> = InstanceType<typeof ForEach<T>>;
+export default ForEach;

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

@@ -0,0 +1 @@
+export { default } from './ForEach.svelte';

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

@@ -0,0 +1 @@
+export { default } from './ForEach.svelte';

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

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { extractLayoutProps, layoutStyle, type LayoutProps } from '../../../style/layout';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	type Props = {
+		children?: Snippet;
+		columns?: number | string;
+		rows?: number | string;
+		autoRows?: number | string;
+		dense?: boolean;
+	} & LayoutProps &
+		StyleProps;
+
+	let {
+		children,
+		columns = 1,
+		rows,
+		autoRows,
+		dense = false,
+		...restProps
+	}: Props = $props();
+
+	const extractedLayoutProps = $derived.by(() => extractLayoutProps(restProps));
+	const layoutProps = $derived(extractedLayoutProps.layoutProps);
+	const afterLayoutProps = $derived(extractedLayoutProps.restProps);
+	const extractedStyleProps = $derived.by(() => extractStyleProps(afterLayoutProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const templateColumns = $derived(
+		typeof columns === 'number' ? `repeat(${columns}, minmax(0, 1fr))` : columns
+	);
+	const templateRows = $derived(
+		rows === undefined ? undefined : typeof rows === 'number' ? `repeat(${rows}, minmax(0, 1fr))` : rows
+	);
+	const gridAutoRows = $derived(
+		autoRows === undefined ? undefined : typeof autoRows === 'number' ? `${autoRows}rem` : autoRows
+	);
+	const rootStyle = $derived.by(() =>
+		[
+			`grid-template-columns: ${templateColumns};`,
+			templateRows ? `grid-template-rows: ${templateRows};` : '',
+			gridAutoRows ? `grid-auto-rows: ${gridAutoRows};` : '',
+			layoutStyle(layoutProps),
+			surfaceStyle(styleProps, 'grid')
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+</script>
+
+<div class="grid" class:grid-dense={dense} style={rootStyle}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.grid {
+		display: grid;
+		min-width: 0;
+		min-height: 0;
+		align-items: stretch;
+		gap: var(--grid-gap, 0px);
+		border-radius: var(--grid-border-radius, 0px);
+		padding:
+			var(--grid-padding-y, 0px)
+			var(--grid-padding-x, 0px);
+		font-size: var(--grid-font-size, inherit);
+	}
+
+	.grid-dense {
+		grid-auto-flow: dense;
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import { type LayoutProps } from '../../../style/layout';
+import { type StyleProps } from '../../../style/surface';
+type Props = {
+    children?: Snippet;
+    columns?: number | string;
+    rows?: number | string;
+    autoRows?: number | string;
+    dense?: boolean;
+} & LayoutProps & StyleProps;
+declare const Grid: import("svelte").Component<Props, {}, "">;
+type Grid = ReturnType<typeof Grid>;
+export default Grid;