@x33025/sveltely 0.1.14 → 0.1.15

package/dist/actions/LoaderOverlay.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <div class="sveltely-loader-overlay" role="status" aria-live="polite" aria-label={text}>
-	<VStack align="center" justify="center" gap="var(--sveltely-gap)">
+	<VStack align="center" justify="center" gap={5}>
 		<Spinner />
 		<span class="sveltely-loader-text">{text}</span>
 	</VStack>

package/dist/components/Library/ArticleEditor/ArticleEditor.svelte

@@ -117,9 +117,9 @@
 <VStack
 	width="100%"
 	maxWidth="860px"
-	gap="2.5rem"
-	paddingX="3.5rem"
-	paddingY="2.5rem"
+	gap={25}
+	paddingX={35}
+	paddingY={25}
 	background="var(--sveltely-background-color)"
 >
 	<ArticleEditorHeader
@@ -159,7 +159,7 @@
 
 	{#if faqBlocks.length > 0}
 		<section class="article-editor-faq-section">
-			<VStack gap="1.25rem">
+			<VStack gap={12.5}>
 				{#each faqBlocks as block (block.id)}
 					<TextEditor
 						autosize

package/dist/components/Library/ArticleEditor/ArticleEditorBody.svelte

@@ -237,7 +237,7 @@
 	});
 </script>
 
-<VStack gap="0.5rem" paddingX="0" paddingY="0">
+<VStack gap={5} paddingX={0} paddingY={0}>
 	{#each articleBlocks as block (block.id)}
 		{@const dropPlacement = dropPlacementFor(block.id)}
 		{@const textFormat = blockTextFormat(block)}

package/dist/components/Library/ArticleEditor/ArticleEditorHeader.svelte

@@ -13,7 +13,7 @@
 	}>();
 </script>
 
-<VStack gap="2rem" paddingX="0" paddingY="2rem">
+<VStack gap={20} paddingX={0} paddingY={20}>
 	<TextEditor
 		autosize
 		value={draftTitle}

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

@@ -12,7 +12,7 @@
 	import HStack from '../HStack';
 </script>
 
-<HStack align="center" gap={0.75}>
+<HStack align="center" gap={7.5}>
 	<Button label="Default" />
 	<Button
 		label="Solid"

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

@@ -155,7 +155,7 @@
 					<div class="h-36">
 						<ScrollView
 							contentStyles={{ paddingX: 0, paddingY: 0 }}
-							borderRadius="var(--sveltely-border-radius-nested)"
+							borderRadius={5}
 							background="white"
 							onScroll={handleWebsiteScroll}
 						>

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

@@ -17,7 +17,7 @@
 	let amount = $state<number | null>(35);
 </script>
 
-<HStack gap={1} align="center">
+<HStack gap={10} align="center">
 	<Label label="Name" icon={UserIcon} orientation="top">
 		<TextField bind:value={name} placeholder="Sveltely" />
 	</Label>

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

@@ -29,7 +29,7 @@
 
 <ScrollView
 	background="color-mix(in oklab, var(--sveltely-background-color) 94%, var(--sveltely-primary-color))"
-	borderRadius="var(--sveltely-border-radius)"
+	borderRadius={7.5}
 	scrollGradient={false}
 	loader={{ text: 'Loading preview...', promise: pending }}
 >

package/dist/components/Library/NavigationLink/NavigationLink.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	type Props = {
+		children?: Snippet;
+		label?: string;
+		active?: boolean;
+	} & StyleProps &
+		Omit<HTMLAnchorAttributes, 'children' | 'class' | 'style'> & {
+			class?: HTMLAnchorAttributes['class'];
+		};
+
+	let { children, label, active = false, class: className = '', ...restProps }: Props = $props();
+
+	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
+	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'navigation-link'));
+</script>
+
+<a
+	class="navigation-link {className}"
+	class:navigation-link-active={active}
+	style={rootStyle}
+	{...props}
+>
+	{#if children}
+		{@render children()}
+	{:else if label}
+		<span>{label}</span>
+	{/if}
+</a>
+
+<style>
+	.navigation-link {
+		--navigation-link-font-size: calc(var(--sveltely-font-size) * 0.875);
+		--navigation-link-scale: calc(var(--navigation-link-font-size) / 0.875rem);
+		--navigation-link-icon-size: calc(var(--navigation-link-font-size) * 1.143);
+		display: flex;
+		min-width: 0;
+		align-items: center;
+		border-radius: var(--navigation-link-border-radius, var(--sveltely-border-radius));
+		color: var(--navigation-link-color, var(--sveltely-primary-color));
+		gap: var(--navigation-link-gap, var(--sveltely-gap));
+		font-size: var(--navigation-link-font-size);
+		line-height: 1.25;
+		padding: var(
+				--navigation-link-padding-y,
+				calc(var(--sveltely-padding-y) * 0.67 * var(--navigation-link-scale))
+			)
+			var(
+				--navigation-link-padding-x,
+				calc(var(--sveltely-padding-x) * var(--navigation-link-scale))
+			);
+		text-decoration: none;
+		transition:
+			color 150ms,
+			background-color 150ms;
+	}
+
+	.navigation-link:hover,
+	.navigation-link-active {
+		background: var(--navigation-link-active-background, var(--sveltely-hover-color));
+	}
+
+	.navigation-link :global(svg) {
+		width: var(--navigation-link-icon-size);
+		height: var(--navigation-link-icon-size);
+		flex-shrink: 0;
+	}
+
+	.navigation-link :global(span) {
+		min-width: 0;
+	}
+
+	.navigation-link > span {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+import { type StyleProps } from '../../../style/surface';
+type Props = {
+    children?: Snippet;
+    label?: string;
+    active?: boolean;
+} & StyleProps & Omit<HTMLAnchorAttributes, 'children' | 'class' | 'style'> & {
+    class?: HTMLAnchorAttributes['class'];
+};
+declare const NavigationLink: import("svelte").Component<Props, {}, "">;
+type NavigationLink = ReturnType<typeof NavigationLink>;
+export default NavigationLink;

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

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

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

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

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

@@ -57,8 +57,10 @@
 
 	const shellStyle = $derived.by(() => {
 		const declarations = [
-			`--navigation-stack-left-width: ${left && leftOpen ? 'var(--navigation-stack-sidebar-width)' : '0px'};`,
-			`--navigation-stack-right-width: ${right && rightOpen ? 'var(--navigation-stack-sidebar-width)' : '0px'};`
+			`--navigation-stack-left-width: ${left || leftHeader ? 'var(--navigation-stack-sidebar-width)' : '0px'};`,
+			`--navigation-stack-right-width: ${right || rightHeader ? 'var(--navigation-stack-sidebar-width)' : '0px'};`,
+			`--navigation-stack-center-margin-left: ${left && leftOpen ? 'var(--navigation-stack-left-width)' : '0px'};`,
+			`--navigation-stack-center-margin-right: ${right && rightOpen ? 'var(--navigation-stack-right-width)' : '0px'};`
 		];
 		const stylePropDeclarations = surfaceStyle(styleProps, 'navigation-stack');
 		if (stylePropDeclarations) declarations.push(stylePropDeclarations);
@@ -152,7 +154,6 @@
 			var(--navigation-stack-right-width);
 		grid-template-rows: auto minmax(0, 1fr);
 		overflow: hidden;
-		transition: grid-template-columns 300ms ease-in-out;
 	}
 
 	.navigation-stack-pane {
@@ -171,7 +172,15 @@
 
 	.navigation-stack-pane-center.navigation-stack-pane-header,
 	.navigation-stack-pane-center.navigation-stack-pane-body {
-		grid-column: 2;
+		grid-column: 1 / 4;
+		margin-left: var(--navigation-stack-center-margin-left);
+		margin-right: var(--navigation-stack-center-margin-right);
+		z-index: 2;
+		transition:
+			margin-left 300ms ease-in-out,
+			margin-right 300ms ease-in-out,
+			border-color 300ms ease-in-out,
+			background-color 300ms ease-in-out;
 	}
 
 	.navigation-stack-pane-right.navigation-stack-pane-header,
@@ -202,6 +211,7 @@
 	}
 
 	.navigation-stack-content {
+		background: var(--sveltely-background-color);
 		overflow: auto;
 	}
 

package/dist/components/Local/ComponentGrid.svelte

@@ -23,9 +23,9 @@
 	<Grid
 		columns="repeat(auto-fit, minmax(min(100%, 18rem), 1fr))"
 		autoRows={14}
-		gap={1}
-		paddingX="calc(var(--sveltely-padding-x) * 2)"
-		paddingY="calc(var(--sveltely-padding-y) * 2)"
+		gap={10}
+		paddingX={15}
+		paddingY={15}
 	>
 		{#each demos as entry (entry.name)}
 			{@const DemoComponent = entry.component}

package/dist/components/Local/HeroCard.svelte

@@ -17,12 +17,12 @@
 	height="100%"
 	shrink={0}
 	align="stretch"
-	gap={0.5}
+	gap={5}
 	border="1px solid var(--sveltely-border-color)"
-	borderRadius={0.75}
+	borderRadius={7.5}
 	background="var(--sveltely-background-color)"
-	paddingX={1.5}
-	paddingY={1.5}
+	paddingX={15}
+	paddingY={15}
 >
 	{#if title}
 		<h1 class="text-3xl font-semibold tracking-tight text-[var(--sveltely-primary-color)]">

package/dist/components/Local/StyleControls.svelte

@@ -17,12 +17,12 @@
 	};
 
 	let {
-		fontSize = $bindable(1),
-		borderRadius = $bindable(0.75),
-		paddingX = $bindable(0.75),
-		paddingY = $bindable(0.75),
-		gap = $bindable(0.5),
-		inset = $bindable(0.25),
+		fontSize = $bindable(10),
+		borderRadius = $bindable(7.5),
+		paddingX = $bindable(7.5),
+		paddingY = $bindable(7.5),
+		gap = $bindable(5),
+		inset = $bindable(2.5),
 		borderColor = $bindable('#e4e4e7'),
 		primaryColor = $bindable('#18181b'),
 		secondaryColor = $bindable('#71717a'),
@@ -42,44 +42,44 @@
 	<div class="vstack gap-2">
 		<div class="hstack items-center justify-between gap-3">
 			<span class="font-medium">Font size</span>
-			<span class="text-[var(--sveltely-secondary-color)]">{fontSize.toFixed(2)}rem</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{fontSize.toFixed(1)}</span>
 		</div>
-		<Slider bind:value={fontSize} min={0.5} max={2} step={0.05} />
+		<Slider bind:value={fontSize} min={5} max={20} step={0.5} />
 	</div>
 	<div class="vstack gap-2">
 		<div class="hstack items-center justify-between gap-3">
 			<span class="font-medium">Border radius</span>
-			<span class="text-[var(--sveltely-secondary-color)]">{borderRadius.toFixed(2)}rem</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{borderRadius.toFixed(1)}</span>
 		</div>
-		<Slider bind:value={borderRadius} min={0} max={3} step={0.05} />
+		<Slider bind:value={borderRadius} min={0} max={30} step={0.5} />
 	</div>
 	<div class="vstack gap-2">
 		<div class="hstack items-center justify-between gap-3">
 			<span class="font-medium">Padding X</span>
-			<span class="text-[var(--sveltely-secondary-color)]">{paddingX.toFixed(2)}rem</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{paddingX.toFixed(1)}</span>
 		</div>
-		<Slider bind:value={paddingX} min={0} max={2} step="any" />
+		<Slider bind:value={paddingX} min={0} max={20} step="any" />
 	</div>
 	<div class="vstack gap-2">
 		<div class="hstack items-center justify-between gap-3">
 			<span class="font-medium">Padding Y</span>
-			<span class="text-[var(--sveltely-secondary-color)]">{paddingY.toFixed(2)}rem</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{paddingY.toFixed(1)}</span>
 		</div>
-		<Slider bind:value={paddingY} min={0} max={2} step="any" />
+		<Slider bind:value={paddingY} min={0} max={20} step="any" />
 	</div>
 	<div class="vstack gap-2">
 		<div class="hstack items-center justify-between gap-3">
 			<span class="font-medium">Gap</span>
-			<span class="text-[var(--sveltely-secondary-color)]">{gap.toFixed(2)}rem</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{gap.toFixed(1)}</span>
 		</div>
-		<Slider bind:value={gap} min={0} max={2} step="any" />
+		<Slider bind:value={gap} min={0} max={20} step="any" />
 	</div>
 	<div class="vstack gap-2">
 		<div class="hstack items-center justify-between gap-3">
 			<span class="font-medium">Inset</span>
-			<span class="text-[var(--sveltely-secondary-color)]">{inset.toFixed(2)}rem</span>
+			<span class="text-[var(--sveltely-secondary-color)]">{inset.toFixed(1)}</span>
 		</div>
-		<Slider bind:value={inset} min={0} max={1} step="any" />
+		<Slider bind:value={inset} min={0} max={10} step="any" />
 	</div>
 	<div class="vstack gap-2">
 		<div class="hstack items-center justify-between gap-3">

package/dist/index.d.ts

@@ -27,6 +27,7 @@ export { default as Image } from './components/Library/Image';
 export { default as ImageMask } from './components/Library/ImageMask';
 export type { ImageMaskValue } from './components/Library/ImageMask';
 export { default as Label } from './components/Library/Label';
+export { default as NavigationLink } from './components/Library/NavigationLink';
 export { default as NavigationStack } from './components/Library/NavigationStack';
 export { default as NumberField } from './components/Library/NumberField';
 export { default as SegmentedPicker } from './components/Library/SegmentedPicker';

package/dist/index.js

@@ -18,6 +18,7 @@ export { default as HStack } from './components/Library/HStack';
 export { default as Image } from './components/Library/Image';
 export { default as ImageMask } from './components/Library/ImageMask';
 export { default as Label } from './components/Library/Label';
+export { default as NavigationLink } from './components/Library/NavigationLink';
 export { default as NavigationStack } from './components/Library/NavigationStack';
 export { default as NumberField } from './components/Library/NumberField';
 export { default as SegmentedPicker } from './components/Library/SegmentedPicker';

package/dist/style/index.css

@@ -12,6 +12,17 @@
 		--sveltely-padding-x: 0.75rem;
 		--sveltely-padding-y: 0.75rem;
 		--sveltely-gap: 0.5rem;
+		--sveltely-scale-0: 0;
+		--sveltely-scale-1: 0.1;
+		--sveltely-scale-2: 0.2;
+		--sveltely-scale-3: 0.3;
+		--sveltely-scale-4: 0.4;
+		--sveltely-scale-5: 0.5;
+		--sveltely-scale-6: 0.6;
+		--sveltely-scale-7: 0.7;
+		--sveltely-scale-8: 0.8;
+		--sveltely-scale-9: 0.9;
+		--sveltely-scale-10: 1;
 		--sveltely-primary-color: var(--color-zinc-900);
 		--sveltely-secondary-color: var(--color-zinc-500);
 		--sveltely-active-color: var(--color-zinc-900);

package/dist/style/surface.d.ts

@@ -1,10 +1,10 @@
 export type StyleProps = {
-    fontSize?: number | string;
-    paddingX?: number | string;
-    paddingY?: number | string;
-    gap?: number | string;
-    borderRadius?: number | string;
-    inset?: number | string;
+    fontSize?: number;
+    paddingX?: number;
+    paddingY?: number;
+    gap?: number;
+    borderRadius?: number;
+    inset?: number;
     background?: string;
     borderColor?: string;
     color?: string;

package/dist/style/surface.js

@@ -9,7 +9,7 @@ const STYLE_PROP_KEYS = new Set([
     'borderColor',
     'color'
 ]);
-const toRem = (value) => value === undefined ? undefined : typeof value === 'number' ? `${value}rem` : value;
+const toRem = (value) => (value === undefined ? undefined : `${value / 10}rem`);
 const pushVar = (declarations, name, value) => {
     const resolved = toRem(value);
     if (resolved === undefined)

package/dist/style.css

@@ -853,6 +853,17 @@
     --sveltely-padding-x: 0.75rem;
     --sveltely-padding-y: 0.75rem;
     --sveltely-gap: 0.5rem;
+    --sveltely-scale-0: 0;
+    --sveltely-scale-1: 0.1;
+    --sveltely-scale-2: 0.2;
+    --sveltely-scale-3: 0.3;
+    --sveltely-scale-4: 0.4;
+    --sveltely-scale-5: 0.5;
+    --sveltely-scale-6: 0.6;
+    --sveltely-scale-7: 0.7;
+    --sveltely-scale-8: 0.8;
+    --sveltely-scale-9: 0.9;
+    --sveltely-scale-10: 1;
     --sveltely-primary-color: var(--color-zinc-900);
     --sveltely-secondary-color: var(--color-zinc-500);
     --sveltely-active-color: var(--color-zinc-900);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.1.14",
+	"version": "0.1.15",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",