@x33025/sveltely 0.1.22 → 0.1.24

package/dist/components/Library/VStack/VStack.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, 'vstack')].filter(Boolean).join(' ')
 	);
 </script>
 
-<div class="vstack" style={rootStyle} {...props} use:loaderAction={loaderOptions}>
+<div class="vstack" style={rootStyle} {...forwardedProps} use:loaderAction={loaderOptions}>
 	{#if children}
 		{@render children()}
 	{/if}
@@ -41,7 +41,7 @@
 		--vstack-padding-x: 0px;
 		--vstack-padding-y: 0px;
 		--vstack-font-size: inherit;
-		display: flex;
+		display: inline-flex;
 		min-width: 0;
 		min-height: 0;
 		flex-direction: column;

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

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

package/dist/components/Local/ColorStyleControls.svelte

@@ -34,7 +34,6 @@
 		orientation="leading"
 		width="100%"
 		align="center"
-		justify="between"
 		gap={5}
 	>
 		<HStack width="100%" align="center" justify="end" gap={5}>
@@ -52,7 +51,6 @@
 		orientation="leading"
 		width="100%"
 		align="center"
-		justify="between"
 		gap={5}
 	>
 		<HStack width="100%" align="center" justify="end" gap={5}>
@@ -70,7 +68,6 @@
 		orientation="leading"
 		width="100%"
 		align="center"
-		justify="between"
 		gap={5}
 	>
 		<HStack width="100%" align="center" justify="end" gap={5}>
@@ -90,7 +87,6 @@
 		orientation="leading"
 		width="100%"
 		align="center"
-		justify="between"
 		gap={5}
 	>
 		<HStack width="100%" align="center" justify="end" gap={5}>
@@ -108,7 +104,6 @@
 		orientation="leading"
 		width="100%"
 		align="center"
-		justify="between"
 		gap={5}
 	>
 		<HStack width="100%" align="center" justify="end" gap={5}>
@@ -123,7 +118,6 @@
 		orientation="leading"
 		width="100%"
 		align="center"
-		justify="between"
 		gap={5}
 	>
 		<HStack width="100%" align="center" justify="end" gap={5}>
@@ -141,7 +135,6 @@
 		orientation="leading"
 		width="100%"
 		align="center"
-		justify="between"
 		gap={5}
 	>
 		<HStack width="100%" align="center" justify="end" gap={5}>
@@ -159,7 +152,6 @@
 		orientation="leading"
 		width="100%"
 		align="center"
-		justify="between"
 		gap={5}
 	>
 		<HStack width="100%" align="center" justify="end" gap={5}>

package/dist/components/Local/ComponentGrid.svelte

@@ -2,6 +2,7 @@
 	import type { Component } from 'svelte';
 	import Grid from '../Library/Grid';
 	import { GridItem } from '../Library/Grid';
+	import ScrollView from '../Library/ScrollView';
 	import HeroCard from './HeroCard.svelte';
 
 	type DemoEntry = {
@@ -19,7 +20,7 @@
 	let { demos }: Props = $props();
 </script>
 
-<div class="component-grid-scroll">
+<ScrollView width="100%" height="100%">
 	<Grid
 		columns="repeat(auto-fit, minmax(min(100%, 18rem), 1fr))"
 		autoRows={14}
@@ -36,14 +37,4 @@
 			</GridItem>
 		{/each}
 	</Grid>
-</div>
-
-<style>
-	.component-grid-scroll {
-		width: 100%;
-		height: 100%;
-		min-width: 0;
-		min-height: 0;
-		overflow: auto;
-	}
-</style>
+</ScrollView>

package/dist/components/Local/HeroCard.svelte

@@ -15,7 +15,6 @@
 <VStack
 	minHeight={14}
 	height="100%"
-	shrink={0}
 	align="stretch"
 	gap={5}
 	border="1px solid var(--sveltely-border-color)"
@@ -34,7 +33,7 @@
 	{/if}
 	<div class="hero-card-content">
 		{#if children}
-			<HStack width="100%" height="100%" minWidth="min-content" align="center" justify="center">
+			<HStack width="100%" height="100%" align="center" justify="center">
 				{@render children()}
 			</HStack>
 		{/if}

package/dist/components/Local/LayoutStyleControls.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+	import HStack from '../Library/HStack';
 	import Slider from '../Library/Slider';
+	import Spacer from '../Library/Spacer';
 	import VStack from '../Library/VStack';
 
 	type Props = {
@@ -21,47 +23,53 @@
 	}: Props = $props();
 </script>
 
-<VStack gap={5}>
-	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3">
+<VStack width="100%" gap={5}>
+	<VStack width="100%" gap={5}>
+		<HStack width="100%" align="center" gap={7.5}>
 			<span class="font-medium">Font size</span>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{fontSize.toFixed(1)}</span>
-		</div>
+		</HStack>
 		<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">
+	</VStack>
+	<VStack width="100%" gap={5}>
+		<HStack width="100%" align="center" gap={7.5}>
 			<span class="font-medium">Border radius</span>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{borderRadius.toFixed(1)}</span>
-		</div>
+		</HStack>
 		<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">
+	</VStack>
+	<VStack width="100%" gap={5}>
+		<HStack width="100%" align="center" gap={7.5}>
 			<span class="font-medium">Padding X</span>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{paddingX.toFixed(1)}</span>
-		</div>
+		</HStack>
 		<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">
+	</VStack>
+	<VStack width="100%" gap={5}>
+		<HStack width="100%" align="center" gap={7.5}>
 			<span class="font-medium">Padding Y</span>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{paddingY.toFixed(1)}</span>
-		</div>
+		</HStack>
 		<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">
+	</VStack>
+	<VStack width="100%" gap={5}>
+		<HStack width="100%" align="center" gap={7.5}>
 			<span class="font-medium">Gap</span>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{gap.toFixed(1)}</span>
-		</div>
+		</HStack>
 		<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">
+	</VStack>
+	<VStack width="100%" gap={5}>
+		<HStack width="100%" align="center" gap={7.5}>
 			<span class="font-medium">Inset</span>
+			<Spacer />
 			<span class="text-[var(--sveltely-text-secondary-color)]">{inset.toFixed(1)}</span>
-		</div>
+		</HStack>
 		<Slider bind:value={inset} min={0} max={10} step="any" />
-	</div>
+	</VStack>
 </VStack>

package/dist/components/Local/StyleControls.svelte

@@ -48,7 +48,7 @@
 	let panel = $state<Panel>('layout');
 </script>
 
-<VStack gap={7.5} fontSize={8.75} color="var(--sveltely-text-primary-color)">
+<VStack width="100%" gap={7.5} fontSize={8.75} color="var(--sveltely-text-primary-color)">
 	<SegmentedPicker options={panelOptions} bind:value={panel} />
 	{#if panel === 'layout'}
 		<LayoutStyleControls

package/dist/index.d.ts

@@ -5,8 +5,8 @@ export type { TooltipOptions } from './actions/tooltip';
 export { loader } from './actions/loader';
 export type { LoaderOptions } from './actions/loader';
 export type { LoaderProps } from './style/loader';
-export { LayoutAlignment, LayoutJustification, LayoutSize } from './style/layout';
-export type { LayoutAlignmentValue, LayoutJustificationValue, LayoutProps, LayoutSizeValue } from './style/layout';
+export { LayoutAlignment, LayoutDimension, LayoutJustification } from './style/layout';
+export type { FrameProps, LayoutAlignmentValue, LayoutDimensionValue, LayoutJustificationValue, LayoutProps, StackProps } from './style/layout';
 export { LabelOrientation } from './style/label';
 export type { LabelOrientationValue } from './style/label';
 export { ImageFit, ImageLoading } from './style/media';

package/dist/index.js

@@ -2,7 +2,7 @@ export { motion, hover } from './actions/motion';
 export { portalHost, portalContent } from './actions/portal';
 export { tooltip } from './actions/tooltip';
 export { loader } from './actions/loader';
-export { LayoutAlignment, LayoutJustification, LayoutSize } from './style/layout';
+export { LayoutAlignment, LayoutDimension, LayoutJustification } from './style/layout';
 export { LabelOrientation } from './style/label';
 export { ImageFit, ImageLoading } from './style/media';
 export { ScrollAxis } from './style/scroll';

package/dist/style/index.css

@@ -89,11 +89,11 @@
 	}
 
 	.vstack {
-		@apply flex min-h-0 min-w-0 flex-col;
+		@apply inline-flex min-h-0 min-w-0 flex-col;
 	}
 
 	.hstack {
-		@apply flex min-h-0 min-w-0 flex-row;
+		@apply inline-flex min-h-0 min-w-0 flex-row;
 	}
 
 	.button,

package/dist/style/layout.d.ts

@@ -1,7 +1,6 @@
 type StringWithAutocomplete<T extends string> = T | (string & {});
-export declare const LayoutSize: {
-    readonly full: "full";
-    readonly fit: "fit";
+export declare const LayoutDimension: {
+    readonly infinity: "infinity";
 };
 export declare const LayoutAlignment: {
     readonly start: "start";
@@ -14,31 +13,26 @@ export declare const LayoutJustification: {
     readonly start: "start";
     readonly center: "center";
     readonly end: "end";
-    readonly between: "between";
-    readonly around: "around";
-    readonly evenly: "evenly";
 };
-export type LayoutSizeValue = (typeof LayoutSize)[keyof typeof LayoutSize];
+export type LayoutDimensionValue = (typeof LayoutDimension)[keyof typeof LayoutDimension];
 export type LayoutAlignmentValue = (typeof LayoutAlignment)[keyof typeof LayoutAlignment];
 export type LayoutJustificationValue = (typeof LayoutJustification)[keyof typeof LayoutJustification];
-export type LayoutSize = StringWithAutocomplete<LayoutSizeValue> | number;
+export type LayoutDimension = StringWithAutocomplete<LayoutDimensionValue> | number;
 export type LayoutAlignment = LayoutAlignmentValue;
 export type LayoutJustification = LayoutJustificationValue;
-export type LayoutProps = {
-    size?: LayoutSize;
-    width?: number | string;
-    height?: number | string;
-    minWidth?: number | string;
-    minHeight?: number | string;
-    maxWidth?: number | string;
-    maxHeight?: number | string;
-    grow?: boolean | number;
-    shrink?: boolean | number;
-    basis?: number | string;
-    border?: boolean | string;
+export type FrameProps = {
+    width?: LayoutDimension;
+    height?: LayoutDimension;
+    minWidth?: LayoutDimension;
+    minHeight?: LayoutDimension;
+    maxWidth?: LayoutDimension;
+    maxHeight?: LayoutDimension;
+};
+export type StackProps = {
     align?: LayoutAlignment;
     justify?: LayoutJustification;
 };
+export type LayoutProps = FrameProps & StackProps;
 export declare const extractLayoutProps: <T extends Record<string, unknown>>(props: T) => {
     layoutProps: Partial<LayoutProps>;
     restProps: Record<string, unknown>;

package/dist/style/layout.js

@@ -1,6 +1,5 @@
-export const LayoutSize = {
-    full: 'full',
-    fit: 'fit'
+export const LayoutDimension = {
+    infinity: 'infinity'
 };
 export const LayoutAlignment = {
     start: 'start',
@@ -12,45 +11,33 @@ export const LayoutAlignment = {
 export const LayoutJustification = {
     start: 'start',
     center: 'center',
-    end: 'end',
-    between: 'between',
-    around: 'around',
-    evenly: 'evenly'
+    end: 'end'
 };
 const LAYOUT_PROP_KEYS = new Set([
-    'size',
     'width',
     'height',
     'minWidth',
     'minHeight',
     'maxWidth',
     'maxHeight',
-    'grow',
-    'shrink',
-    'basis',
-    'border',
     'align',
     'justify'
 ]);
 const toRem = (value) => value === undefined ? undefined : typeof value === 'number' ? `${value}rem` : value;
-const toSize = (value) => {
-    if (value === 'full')
+const toDimension = (value) => {
+    if (value === 'infinity')
         return '100%';
-    if (value === 'fit')
-        return 'fit-content';
     return toRem(value);
 };
+const blockedIntrinsicSizes = new Set(['full', 'fit', 'min-content', 'max-content', 'fit-content']);
 const pushDeclaration = (declarations, name, value) => {
-    const resolved = toRem(value);
+    if (typeof value === 'string' && blockedIntrinsicSizes.has(value))
+        return;
+    const resolved = toDimension(value);
     if (resolved === undefined)
         return;
     declarations.push(`${name}: ${resolved};`);
 };
-const pushFlexValue = (declarations, name, value) => {
-    if (value === undefined)
-        return;
-    declarations.push(`${name}: ${value === true ? 1 : value === false ? 0 : value};`);
-};
 const alignValues = {
     start: 'flex-start',
     center: 'center',
@@ -61,10 +48,7 @@ const alignValues = {
 const justifyValues = {
     start: 'flex-start',
     center: 'center',
-    end: 'flex-end',
-    between: 'space-between',
-    around: 'space-around',
-    evenly: 'space-evenly'
+    end: 'flex-end'
 };
 export const extractLayoutProps = (props) => {
     const layoutProps = {};
@@ -85,27 +69,17 @@ export const layoutStyle = (styles) => {
     if (!styles)
         return '';
     const declarations = [];
-    const resolvedSize = toSize(styles.size);
-    if (resolvedSize !== undefined) {
-        declarations.push(`width: ${resolvedSize};`, `height: ${resolvedSize};`);
-    }
     pushDeclaration(declarations, 'width', styles.width);
     pushDeclaration(declarations, 'height', styles.height);
     pushDeclaration(declarations, 'min-width', styles.minWidth);
     pushDeclaration(declarations, 'min-height', styles.minHeight);
     pushDeclaration(declarations, 'max-width', styles.maxWidth);
     pushDeclaration(declarations, 'max-height', styles.maxHeight);
-    pushFlexValue(declarations, 'flex-grow', styles.grow);
-    pushFlexValue(declarations, 'flex-shrink', styles.shrink);
-    pushDeclaration(declarations, 'flex-basis', styles.basis);
-    if (styles.border === true) {
-        declarations.push('border: 1px solid var(--sveltely-border-color);');
+    if (styles.maxWidth === 'infinity' && styles.width === undefined) {
+        declarations.push('width: 100%;');
     }
-    else if (typeof styles.border === 'string') {
-        const borderValue = /\b(solid|dashed|dotted|double|none|hidden)\b|\d/.test(styles.border)
-            ? styles.border
-            : `1px solid ${styles.border}`;
-        declarations.push(`border: ${borderValue};`);
+    if (styles.maxHeight === 'infinity' && styles.height === undefined) {
+        declarations.push('height: 100%;');
     }
     if (styles.align !== undefined) {
         declarations.push(`align-items: ${alignValues[styles.align]};`);

package/dist/style/surface.d.ts

@@ -5,6 +5,7 @@ export type StyleProps = {
     gap?: number;
     borderRadius?: number;
     inset?: number;
+    border?: boolean | string;
     background?: string;
     borderColor?: string;
     color?: string;

package/dist/style/surface.js

@@ -5,6 +5,7 @@ const STYLE_PROP_KEYS = new Set([
     'gap',
     'borderRadius',
     'inset',
+    'border',
     'background',
     'borderColor',
     'color'
@@ -45,6 +46,15 @@ export const surfaceStyle = (styles, prefix = 'surface') => {
     pushVar(declarations, `--${prefix}-gap`, styles.gap);
     pushVar(declarations, `--${prefix}-border-radius`, styles.borderRadius);
     pushVar(declarations, `--${prefix}-inset`, styles.inset);
+    if (styles.border === true) {
+        declarations.push('border: 1px solid var(--sveltely-border-color);');
+    }
+    else if (typeof styles.border === 'string') {
+        const borderValue = /\b(solid|dashed|dotted|double|none|hidden)\b|\d/.test(styles.border)
+            ? styles.border
+            : `1px solid ${styles.border}`;
+        declarations.push(`border: ${borderValue};`);
+    }
     if (styles.background !== undefined) {
         declarations.push(`background: ${styles.background};`);
     }

package/dist/style.css

@@ -24,8 +24,6 @@
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
-    --container-sm: 24rem;
-    --container-md: 28rem;
     --container-3xl: 48rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
@@ -289,9 +287,6 @@
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
-  .h-36 {
-    height: calc(var(--spacing) * 36);
-  }
   .h-full {
     height: 100%;
   }
@@ -313,33 +308,15 @@
   .max-w-3xl {
     max-width: var(--container-3xl);
   }
-  .max-w-md {
-    max-width: var(--container-md);
-  }
-  .max-w-sm {
-    max-width: var(--container-sm);
-  }
-  .min-w-0 {
-    min-width: calc(var(--spacing) * 0);
-  }
   .flex-1 {
     flex: 1;
   }
   .flex-shrink {
     flex-shrink: 1;
   }
-  .shrink {
-    flex-shrink: 1;
-  }
   .shrink-0 {
     flex-shrink: 0;
   }
-  .flex-grow {
-    flex-grow: 1;
-  }
-  .grow {
-    flex-grow: 1;
-  }
   .border-collapse {
     border-collapse: collapse;
   }
@@ -379,30 +356,15 @@
   .items-center {
     align-items: center;
   }
-  .items-start {
-    align-items: flex-start;
-  }
   .justify-between {
     justify-content: space-between;
   }
   .justify-center {
     justify-content: center;
   }
-  .gap-0\.5 {
-    gap: calc(var(--spacing) * 0.5);
-  }
-  .gap-1 {
-    gap: calc(var(--spacing) * 1);
-  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
-  .gap-3 {
-    gap: calc(var(--spacing) * 3);
-  }
-  .gap-4 {
-    gap: calc(var(--spacing) * 4);
-  }
   .space-y-1 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -473,9 +435,6 @@
   .bg-transparent {
     background-color: transparent;
   }
-  .bg-white {
-    background-color: var(--color-white);
-  }
   .bg-zinc-100 {
     background-color: var(--color-zinc-100);
   }
@@ -771,16 +730,6 @@
       opacity: 50%;
     }
   }
-  .md\:grid-cols-2 {
-    @media (width >= 48rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-  .md\:grid-cols-\[minmax\(0\,18rem\)_minmax\(8rem\,1fr\)\] {
-    @media (width >= 48rem) {
-      grid-template-columns: minmax(0,18rem) minmax(8rem,1fr);
-    }
-  }
 }
 @layer base {
   :root {
@@ -850,13 +799,13 @@
     justify-content: center;
   }
   .vstack {
-    display: flex;
+    display: inline-flex;
     min-height: calc(var(--spacing) * 0);
     min-width: calc(var(--spacing) * 0);
     flex-direction: column;
   }
   .hstack {
-    display: flex;
+    display: inline-flex;
     min-height: calc(var(--spacing) * 0);
     min-width: calc(var(--spacing) * 0);
     flex-direction: row;

package/package.json

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