@x33025/sveltely 0.1.11 → 0.1.13

package/dist/components/Library/HStack/HStack.svelte

@@ -24,7 +24,7 @@
 	const styleProps = $derived(extractedStyleProps.styleProps);
 	const props = $derived(extractedStyleProps.restProps);
 	const rootStyle = $derived.by(() =>
-		[layoutStyle(layoutProps), surfaceStyle(styleProps, 'stack')].filter(Boolean).join(' ')
+		[layoutStyle(layoutProps), surfaceStyle(styleProps, 'hstack')].filter(Boolean).join(' ')
 	);
 </script>
 
@@ -36,14 +36,19 @@
 
 <style>
 	.hstack {
+		--hstack-gap: 0px;
+		--hstack-border-radius: 0px;
+		--hstack-padding-x: 0px;
+		--hstack-padding-y: 0px;
+		--hstack-font-size: inherit;
 		display: flex;
-		min-width: min-content;
-		min-height: min-content;
+		min-width: 0;
+		min-height: 0;
 		flex-direction: row;
-		gap: var(--stack-gap, 0px);
-		border-radius: var(--stack-border-radius, 0px);
-		padding: var(--stack-padding-y, 0px) var(--stack-padding-x, 0px);
-		font-size: var(--stack-font-size, inherit);
+		gap: var(--hstack-gap);
+		border-radius: var(--hstack-border-radius);
+		padding: var(--hstack-padding-y) var(--hstack-padding-x);
+		font-size: var(--hstack-font-size);
 		--divider-width: 1px;
 		--divider-height: auto;
 		--divider-align-self: stretch;

package/dist/components/Library/TextEditor/TextEditor.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
 	import { textEditorStyle, type TextEditorProps } from '../../../style/text-editor';
 
-	type Props = {
+	type Props = Omit<HTMLTextareaAttributes, 'value' | 'class'> & {
 		value?: string;
-		rows?: number;
-		placeholder?: string;
-		spellcheck?: boolean;
+		class?: HTMLTextareaAttributes['class'];
 		autosize?: boolean;
 		className?: string;
 		onInput?: (event: Event) => void;
@@ -16,18 +15,20 @@
 	} & TextEditorProps;
 
 	let {
-		value = '',
+		value = $bindable(''),
 		rows = 1,
-		placeholder,
-		spellcheck,
+		class: classProp = '',
 		autosize = false,
 		className = '',
 		onInput,
 		onKeyDown,
+		oninput,
+		onkeydown,
 		shouldFocus = false,
 		focusPosition = null,
 		onFocused,
-		textAlign
+		textAlign,
+		...textareaProps
 	}: Props = $props();
 
 	let textarea: HTMLTextAreaElement | undefined;
@@ -60,15 +61,18 @@
 	bind:this={textarea}
 	{value}
 	{rows}
-	{placeholder}
-	{spellcheck}
+	{...textareaProps}
 	style={rootStyle}
 	oninput={(event) => {
 		resize();
+		oninput?.(event);
 		onInput?.(event);
 	}}
-	onkeydown={(event) => onKeyDown?.(event)}
-	class={`text-editor ${className}`}
+	onkeydown={(event) => {
+		onkeydown?.(event);
+		onKeyDown?.(event);
+	}}
+	class={`text-editor ${classProp} ${className}`}
 ></textarea>
 
 <style>

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

@@ -1,9 +1,8 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
 import { type TextEditorProps } from '../../../style/text-editor';
-type Props = {
+type Props = Omit<HTMLTextareaAttributes, 'value' | 'class'> & {
     value?: string;
-    rows?: number;
-    placeholder?: string;
-    spellcheck?: boolean;
+    class?: HTMLTextareaAttributes['class'];
     autosize?: boolean;
     className?: string;
     onInput?: (event: Event) => void;
@@ -12,6 +11,6 @@ type Props = {
     focusPosition?: number | null;
     onFocused?: () => void;
 } & TextEditorProps;
-declare const TextEditor: import("svelte").Component<Props, {}, "">;
+declare const TextEditor: import("svelte").Component<Props, {}, "value">;
 type TextEditor = ReturnType<typeof TextEditor>;
 export default TextEditor;

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

@@ -135,11 +135,12 @@
 		--token-search-field-confirm-font-size: calc(var(--token-search-field-font-size) * 0.857);
 		--sveltely-nested-inset: var(--token-search-field-inset);
 		min-width: 0;
+		flex: 1 1 0;
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius);
 		color: var(--sveltely-primary-color);
 		gap: var(--token-search-field-inset);
-		padding: calc(var(--sveltely-padding-y) * 0.58 * var(--token-search-field-scale))
+		padding: calc(var(--sveltely-padding-y) * 0.67 * var(--token-search-field-scale))
 			calc(var(--sveltely-padding-x) * var(--token-search-field-scale));
 		font-size: var(--token-search-field-font-size);
 		line-height: var(--token-search-field-line-height);

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

@@ -24,7 +24,7 @@
 	const styleProps = $derived(extractedStyleProps.styleProps);
 	const props = $derived(extractedStyleProps.restProps);
 	const rootStyle = $derived.by(() =>
-		[layoutStyle(layoutProps), surfaceStyle(styleProps, 'stack')].filter(Boolean).join(' ')
+		[layoutStyle(layoutProps), surfaceStyle(styleProps, 'vstack')].filter(Boolean).join(' ')
 	);
 </script>
 
@@ -36,14 +36,19 @@
 
 <style>
 	.vstack {
+		--vstack-gap: 0px;
+		--vstack-border-radius: 0px;
+		--vstack-padding-x: 0px;
+		--vstack-padding-y: 0px;
+		--vstack-font-size: inherit;
 		display: flex;
-		min-width: min-content;
-		min-height: min-content;
+		min-width: 0;
+		min-height: 0;
 		flex-direction: column;
-		gap: var(--stack-gap, 0px);
-		border-radius: var(--stack-border-radius, 0px);
-		padding: var(--stack-padding-y, 0px) var(--stack-padding-x, 0px);
-		font-size: var(--stack-font-size, inherit);
+		gap: var(--vstack-gap);
+		border-radius: var(--vstack-border-radius);
+		padding: var(--vstack-padding-y) var(--vstack-padding-x);
+		font-size: var(--vstack-font-size);
 		--divider-width: 100%;
 		--divider-height: 1px;
 		--divider-align-self: auto;

package/dist/components/Local/StyleControls.svelte

@@ -26,8 +26,8 @@
 		borderColor = $bindable('#e4e4e7'),
 		primaryColor = $bindable('#18181b'),
 		secondaryColor = $bindable('#71717a'),
-		activeColor = $bindable('#18181b'),
-		inactiveColor = $bindable('#18181b'),
+		activeColor = $bindable('#f4f4f5'),
+		inactiveColor = $bindable('#f4f4f5'),
 		backgroundColor = $bindable('#ffffff')
 	}: Props = $props();
 </script>

package/dist/style/index.css

@@ -14,8 +14,8 @@
 		--sveltely-gap: 0.5rem;
 		--sveltely-primary-color: var(--color-zinc-900);
 		--sveltely-secondary-color: var(--color-zinc-500);
-		--sveltely-active-color: var(--color-zinc-900);
-		--sveltely-inactive-color: var(--sveltely-active-color);
+		--sveltely-active-color: var(--color-zinc-100);
+		--sveltely-inactive-color: var(--color-zinc-100);
 		--sveltely-background-color: white;
 		--sveltely-hover-color: color-mix(in oklab, var(--sveltely-active-color) 5%, transparent);
 		--sveltely-inactive-hover-color: color-mix(in oklab, var(--sveltely-inactive-color) 88%, white);

package/dist/style.css

@@ -855,8 +855,8 @@
     --sveltely-gap: 0.5rem;
     --sveltely-primary-color: var(--color-zinc-900);
     --sveltely-secondary-color: var(--color-zinc-500);
-    --sveltely-active-color: var(--color-zinc-900);
-    --sveltely-inactive-color: var(--sveltely-active-color);
+    --sveltely-active-color: var(--color-zinc-100);
+    --sveltely-inactive-color: var(--color-zinc-100);
     --sveltely-background-color: white;
     --sveltely-hover-color: var(--sveltely-active-color);
     @supports (color: color-mix(in lab, red, red)) {

package/package.json

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