@x33025/sveltely 0.1.1 → 0.1.3

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

@@ -0,0 +1,28 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Label',
+		description: 'Form label wrapper with top and left orientation.',
+		columnSpan: 2
+	};
+</script>
+
+<script lang="ts">
+	import { HashIcon, UserIcon } from '@lucide/svelte';
+	import HStack from '../HStack';
+	import NumberField from '../NumberField';
+	import TextField from '../TextField';
+	import Label from './Label.svelte';
+
+	let name = $state('');
+	let amount = $state<number | null>(35);
+</script>
+
+<HStack gap={1} align="center">
+	<Label label="Name" icon={UserIcon} orientation="top">
+		<TextField bind:value={name} placeholder="Sveltely" />
+	</Label>
+
+	<Label label="Amount" icon={HashIcon} orientation="left">
+		<NumberField bind:value={amount} min={0} max={100} />
+	</Label>
+</HStack>

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

@@ -0,0 +1,9 @@
+export declare const demo: {
+    name: string;
+    description: string;
+    columnSpan: number;
+};
+import Label from './Label.svelte';
+declare const Label: import("svelte").Component<Record<string, never>, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

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

@@ -0,0 +1,175 @@
+<script lang="ts">
+	import type { Component, Snippet } from 'svelte';
+	import type { LabelOrientation } from '../../../style/label';
+	import { layoutStyle, type LayoutProps } from '../../../style/layout';
+	import { surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	type Props = {
+		children?: Snippet;
+		label?: string;
+		icon?: Component<{ class?: string; size?: number | string }>;
+		iconSize?: number | string;
+		iconColor?: string;
+		orientation?: LabelOrientation;
+	} & LayoutProps &
+		StyleProps;
+
+	let {
+		children,
+		label,
+		icon,
+		iconSize,
+		iconColor,
+		orientation = 'top',
+		size,
+		width,
+		height,
+		minWidth,
+		minHeight,
+		maxWidth,
+		maxHeight,
+		grow,
+		shrink,
+		basis,
+		border,
+		overflow,
+		align,
+		justify,
+		fontSize,
+		paddingX,
+		paddingY,
+		gap,
+		borderRadius,
+		inset,
+		background,
+		borderColor,
+		color
+	}: Props = $props();
+
+	const layoutProps = $derived({
+		size,
+		width,
+		height,
+		minWidth,
+		minHeight,
+		maxWidth,
+		maxHeight,
+		grow,
+		shrink,
+		basis,
+		border,
+		overflow,
+		align,
+		justify
+	});
+	const styleProps = $derived({
+		fontSize,
+		paddingX,
+		paddingY,
+		gap,
+		borderRadius,
+		inset,
+		background,
+		borderColor,
+		color
+	});
+
+	const rootStyle = $derived.by(() =>
+		[layoutStyle(layoutProps), surfaceStyle(styleProps, 'label')].filter(Boolean).join(' ')
+	);
+
+	const iconStyle = $derived.by(() => {
+		const declarations: string[] = [];
+
+		if (iconColor !== undefined) {
+			declarations.push(`color: ${iconColor};`);
+		}
+
+		if (iconSize !== undefined) {
+			const sizeValue = typeof iconSize === 'number' ? `${iconSize}rem` : iconSize;
+			declarations.push(`width: ${sizeValue};`, `height: ${sizeValue};`);
+		}
+
+		return declarations.join(' ');
+	});
+</script>
+
+<div class="label" data-orientation={orientation} style={rootStyle}>
+	{#if icon || label}
+		<span class="label-heading">
+			{#if icon}
+				{@const Icon = icon}
+				<span class="label-icon-frame" style={iconStyle}>
+					<Icon class="label-icon" />
+				</span>
+			{/if}
+
+			{#if label}
+				<span class="label-text">{label}</span>
+			{/if}
+		</span>
+	{/if}
+
+	{#if children}
+		<div class="label-content">
+			{@render children()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.label {
+		--label-font-size: var(--sveltely-font-size);
+		--label-icon-size: calc(var(--label-font-size) * 1.143);
+		display: inline-flex;
+		width: 100%;
+		min-width: min-content;
+		min-height: min-content;
+		gap: var(--label-gap, calc(var(--sveltely-gap) * 0.75));
+		border-radius: var(--label-border-radius, 0px);
+		color: var(--label-color, var(--sveltely-primary-color));
+		font-size: var(--label-font-size);
+		padding: var(--label-padding-y, 0px) var(--label-padding-x, 0px);
+	}
+
+	.label[data-orientation='top'] {
+		flex-direction: column;
+		align-items: stretch;
+	}
+
+	.label[data-orientation='left'] {
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.label-heading {
+		display: inline-flex;
+		min-width: max-content;
+		flex-shrink: 0;
+		align-items: center;
+		gap: calc(var(--label-gap, var(--sveltely-gap)) * 0.67);
+		font-weight: 500;
+		line-height: 1.25;
+	}
+
+	.label-content {
+		display: inline-flex;
+		min-width: 0;
+		flex: 1 1 auto;
+	}
+
+	.label-icon-frame {
+		display: inline-flex;
+		width: var(--label-icon-size);
+		height: var(--label-icon-size);
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: center;
+		color: var(--label-icon-color, currentColor);
+	}
+
+	.label-icon-frame :global(.label-icon) {
+		width: 100%;
+		height: 100%;
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import type { Component, Snippet } from 'svelte';
+import type { LabelOrientation } from '../../../style/label';
+import { type LayoutProps } from '../../../style/layout';
+import { type StyleProps } from '../../../style/surface';
+type Props = {
+    children?: Snippet;
+    label?: string;
+    icon?: Component<{
+        class?: string;
+        size?: number | string;
+    }>;
+    iconSize?: number | string;
+    iconColor?: string;
+    orientation?: LabelOrientation;
+} & LayoutProps & StyleProps;
+declare const Label: Component<Props, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

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

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

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

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

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

@@ -122,7 +122,9 @@
 		</div>
 	{/if}
 
-	<div class="navigation-stack-pane navigation-stack-pane-center navigation-stack-pane-body navigation-stack-content vstack">
+	<div
+		class="navigation-stack-pane navigation-stack-pane-center navigation-stack-pane-body navigation-stack-content vstack"
+	>
 		{#if children}
 			{@render children()}
 		{/if}
@@ -180,7 +182,7 @@
 	.navigation-stack-pane-header {
 		grid-row: 1;
 		border-bottom: 1px solid var(--sveltely-border-color);
-		background: white;
+		background: var(--sveltely-background-color);
 	}
 
 	.navigation-stack-pane-body {
@@ -204,20 +206,28 @@
 	}
 
 	.navigation-stack-sidebar-inner {
-		background: var(--color-zinc-50);
+		background: var(--sveltely-background-color);
 		transition:
 			visibility 0ms linear 300ms,
 			background-color 300ms ease-in-out;
 	}
 
-	.navigation-stack[data-left-open='true'] .navigation-stack-pane-left.navigation-stack-pane-body .navigation-stack-sidebar-inner,
-	.navigation-stack[data-right-open='true'] .navigation-stack-pane-right.navigation-stack-pane-body .navigation-stack-sidebar-inner {
+	.navigation-stack[data-left-open='true']
+		.navigation-stack-pane-left.navigation-stack-pane-body
+		.navigation-stack-sidebar-inner,
+	.navigation-stack[data-right-open='true']
+		.navigation-stack-pane-right.navigation-stack-pane-body
+		.navigation-stack-sidebar-inner {
 		visibility: visible;
 		transition-delay: 0ms;
 	}
 
-	.navigation-stack[data-left-open='false'] .navigation-stack-pane-left.navigation-stack-pane-body .navigation-stack-sidebar-inner,
-	.navigation-stack[data-right-open='false'] .navigation-stack-pane-right.navigation-stack-pane-body .navigation-stack-sidebar-inner {
+	.navigation-stack[data-left-open='false']
+		.navigation-stack-pane-left.navigation-stack-pane-body
+		.navigation-stack-sidebar-inner,
+	.navigation-stack[data-right-open='false']
+		.navigation-stack-pane-right.navigation-stack-pane-body
+		.navigation-stack-sidebar-inner {
 		visibility: hidden;
 		pointer-events: none;
 	}

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

@@ -21,7 +21,12 @@
 	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'navigation-stack-toolbar'));
 </script>
 
-<div class="navigation-stack-toolbar-shell vstack h-full" style={rootStyle} data-chrome={chrome ? 'true' : 'false'} {...props}>
+<div
+	class="navigation-stack-toolbar-shell vstack h-full"
+	style={rootStyle}
+	data-chrome={chrome ? 'true' : 'false'}
+	{...props}
+>
 	{#if header}
 		<div
 			class="navigation-stack-toolbar flex items-center gap-2"
@@ -41,7 +46,7 @@
 <style>
 	.navigation-stack-toolbar {
 		border-bottom: 1px solid var(--sveltely-border-color);
-		background: white;
+		background: var(--sveltely-background-color);
 	}
 
 	.navigation-stack-toolbar-shell[data-chrome='false'] .navigation-stack-toolbar {

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

@@ -0,0 +1,21 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'NumberField',
+		description: 'Token-aware numeric input with min, max, and step support.'
+	};
+</script>
+
+<script lang="ts">
+	import NumberField from './NumberField.svelte';
+
+	let value = $state<number | null>(35);
+</script>
+
+<NumberField
+	bind:value
+	min={0}
+	max={100}
+	step={1}
+	placeholder="0"
+	help={`Value: ${value ?? 'empty'}`}
+/>

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

@@ -0,0 +1,8 @@
+export declare const demo: {
+    name: string;
+    description: string;
+};
+import NumberField from './NumberField.svelte';
+declare const NumberField: import("svelte").Component<Record<string, never>, {}, "">;
+type NumberField = ReturnType<typeof NumberField>;
+export default NumberField;

package/dist/components/Library/NumberField/NumberField.svelte

@@ -0,0 +1,199 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { tooltip } from '../../../actions/tooltip';
+	import { surfaceStyle, type StyleProps } from '../../../style/surface';
+	import {
+		textEditorStyle,
+		type TextEditorProps,
+		type TextInputMode
+	} from '../../../style/text-editor';
+
+	type Props = {
+		value?: number | null;
+		help?: string;
+		error?: string | null;
+		disabled?: boolean;
+		placeholder?: string;
+		name?: string;
+		autocomplete?: HTMLInputAttributes['autocomplete'];
+		required?: boolean;
+		readonly?: boolean;
+		inputmode?: Extract<TextInputMode, 'numeric' | 'decimal'>;
+		min?: number;
+		max?: number;
+		step?: number | 'any';
+	} & StyleProps &
+		TextEditorProps;
+
+	let {
+		value = $bindable(null),
+		help,
+		error = null,
+		disabled = false,
+		placeholder = '',
+		name,
+		autocomplete,
+		required = false,
+		readonly = false,
+		inputmode = 'decimal',
+		min,
+		max,
+		step,
+		textAlign = 'right',
+		fontSize,
+		paddingX,
+		paddingY,
+		gap,
+		borderRadius,
+		inset,
+		background,
+		borderColor,
+		color
+	}: Props = $props();
+
+	const styleProps = $derived({
+		fontSize,
+		paddingX,
+		paddingY,
+		gap,
+		borderRadius,
+		inset,
+		background,
+		borderColor,
+		color
+	});
+	const textEditorProps = $derived({ textAlign });
+	const rootStyle = $derived.by(() =>
+		[surfaceStyle(styleProps, 'text-field'), textEditorStyle(textEditorProps)]
+			.filter(Boolean)
+			.join(' ')
+	);
+	const describedBy = $derived(help ? 'text-field-message' : undefined);
+
+	let draftValue = $state(formatValue(value));
+	let committedValue = $state(value);
+
+	$effect(() => {
+		if (value !== committedValue) {
+			draftValue = formatValue(value);
+			committedValue = value;
+		}
+	});
+
+	function formatValue(nextValue: number | null | undefined) {
+		return nextValue === null || nextValue === undefined ? '' : String(nextValue);
+	}
+
+	function handleInput(event: Event) {
+		const input = event.currentTarget as HTMLInputElement;
+		const nextValue = input.value;
+
+		draftValue = nextValue;
+
+		if (nextValue === '') {
+			value = null;
+			committedValue = null;
+			return;
+		}
+
+		const numericValue = Number(nextValue);
+
+		if (!input.validity.badInput && Number.isFinite(numericValue)) {
+			value = numericValue;
+			committedValue = numericValue;
+		}
+	}
+
+	function handleBlur() {
+		if (draftValue !== formatValue(value)) {
+			draftValue = formatValue(value);
+		}
+	}
+</script>
+
+<div
+	use:tooltip={{ label: error ?? '', disabled: !error }}
+	class="text-field"
+	style={rootStyle}
+	data-disabled={disabled ? 'true' : 'false'}
+	data-error={error ? 'true' : 'false'}
+>
+	<input
+		value={draftValue}
+		type="number"
+		{disabled}
+		{name}
+		{autocomplete}
+		{required}
+		{readonly}
+		{inputmode}
+		{placeholder}
+		{min}
+		{max}
+		{step}
+		aria-invalid={error ? 'true' : undefined}
+		aria-describedby={describedBy}
+		class="text-field-input"
+		oninput={handleInput}
+		onblur={handleBlur}
+	/>
+
+	{#if help}
+		<span id="text-field-message" class="text-field-message">{help}</span>
+	{/if}
+</div>
+
+<style>
+	.text-field {
+		display: inline-flex;
+		width: 100%;
+		min-width: 0;
+		flex-direction: column;
+		gap: var(--text-field-gap, calc(var(--sveltely-gap) * 0.75));
+		color: var(--text-field-color, var(--sveltely-primary-color));
+		font-size: var(--text-field-font-size, calc(var(--sveltely-font-size) * 0.875));
+	}
+
+	.text-field-input {
+		width: 100%;
+		min-width: 0;
+		border: 1px solid var(--text-field-border-color, var(--sveltely-border-color));
+		border-radius: var(--text-field-border-radius, var(--sveltely-border-radius));
+		background: var(--text-field-background, var(--sveltely-background-color));
+		color: inherit;
+		font-variant-numeric: tabular-nums;
+		line-height: 1.25rem;
+		outline: none;
+		padding: var(--text-field-padding-y, calc(var(--sveltely-padding-y) * 0.67))
+			var(--text-field-padding-x, var(--sveltely-padding-x));
+		text-align: var(--text-field-text-align, start);
+		transition:
+			color 150ms,
+			border-color 150ms,
+			background-color 150ms,
+			box-shadow 150ms;
+	}
+
+	.text-field-input:focus {
+		border-color: color-mix(in oklab, var(--sveltely-active-color) 50%, white);
+	}
+
+	.text-field-input::placeholder {
+		color: var(--sveltely-secondary-color);
+	}
+
+	.text-field-message {
+		color: var(--sveltely-secondary-color);
+		font-size: calc(var(--text-field-font-size, 0.875rem) * 0.857);
+		line-height: 1.25;
+	}
+
+	.text-field[data-error='true'] .text-field-input {
+		border-color: var(--color-red-500);
+	}
+
+	.text-field[data-disabled='true'] {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+</style>

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

@@ -0,0 +1,21 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type StyleProps } from '../../../style/surface';
+import { type TextEditorProps, type TextInputMode } from '../../../style/text-editor';
+type Props = {
+    value?: number | null;
+    help?: string;
+    error?: string | null;
+    disabled?: boolean;
+    placeholder?: string;
+    name?: string;
+    autocomplete?: HTMLInputAttributes['autocomplete'];
+    required?: boolean;
+    readonly?: boolean;
+    inputmode?: Extract<TextInputMode, 'numeric' | 'decimal'>;
+    min?: number;
+    max?: number;
+    step?: number | 'any';
+} & StyleProps & TextEditorProps;
+declare const NumberField: import("svelte").Component<Props, {}, "value">;
+type NumberField = ReturnType<typeof NumberField>;
+export default NumberField;

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

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

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

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

package/dist/components/Library/Pagination/Pagination.svelte

@@ -26,7 +26,8 @@
 		onPageChange?: (page: number, href: string) => void | Promise<void>;
 		showFirstLast?: boolean;
 		variant?: 'icon' | 'label';
-	} & StyleProps & Record<string, unknown> = $props();
+	} & StyleProps &
+		Record<string, unknown> = $props();
 
 	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
@@ -48,7 +49,7 @@
 	const hasNext = () => (typeof data.hasNext === 'boolean' ? data.hasNext : safePage() < maxPage());
 	const hasPrevious = () => safePage() > 1;
 	const buttonClass = () =>
-		`pagination-button action disabled:bg-zinc-200 disabled:text-zinc-500 inline-flex items-center justify-center leading-none ${
+		`pagination-button action disabled:bg-zinc-200 disabled:text-[var(--sveltely-secondary-color)] inline-flex items-center justify-center leading-none ${
 			variant === 'icon' ? 'pagination-button-icon' : ''
 		}`;
 
@@ -114,14 +115,8 @@
 
 	<form method="GET" style="display: inline;" novalidate onsubmit={handleSubmit}>
 		<input type="hidden" name="view" value={data.view} />
-			<input
-				id="page"
-				name="page"
-				type="number"
-				class="pagination-input"
-				value={safePage()}
-			/>
-		</form>
+		<input id="page" name="page" type="number" class="pagination-input" value={safePage()} />
+	</form>
 
 	<span>of {maxPage()}</span>
 
@@ -192,18 +187,20 @@
 
 	.pagination-button {
 		border-radius: var(--sveltely-border-radius);
-		background: var(--color-zinc-100);
-		padding:
-			calc(var(--sveltely-padding-y) * 0.67 * var(--pagination-scale))
+		background: var(--sveltely-inactive-color);
+		padding: calc(var(--sveltely-padding-y) * 0.67 * var(--pagination-scale))
 			calc(var(--sveltely-padding-x) * 0.67 * var(--pagination-scale));
 	}
 
 	.pagination-button-icon {
-		padding:
-			calc(var(--sveltely-padding-y) * 0.67 * var(--pagination-scale))
+		padding: calc(var(--sveltely-padding-y) * 0.67 * var(--pagination-scale))
 			calc(var(--sveltely-padding-x) * 0.67 * var(--pagination-scale));
-		min-width: calc((var(--sveltely-padding-x) * 1.34 * var(--pagination-scale)) + var(--pagination-icon-size));
-		min-height: calc((var(--sveltely-padding-y) * 1.34 * var(--pagination-scale)) + var(--pagination-icon-size));
+		min-width: calc(
+			(var(--sveltely-padding-x) * 1.34 * var(--pagination-scale)) + var(--pagination-icon-size)
+		);
+		min-height: calc(
+			(var(--sveltely-padding-y) * 1.34 * var(--pagination-scale)) + var(--pagination-icon-size)
+		);
 	}
 
 	.pagination-button:disabled {
@@ -214,12 +211,11 @@
 	.pagination-input {
 		width: 10ch;
 		border-radius: var(--sveltely-border-radius);
-		background: var(--color-zinc-100);
+		background: var(--sveltely-inactive-color);
 		font-size: inherit;
 		line-height: 1.25;
 		outline: none;
-		padding:
-			calc(var(--sveltely-padding-y) * 0.33 * var(--pagination-scale))
+		padding: calc(var(--sveltely-padding-y) * 0.33 * var(--pagination-scale))
 			calc(var(--sveltely-padding-y) * 0.33 * var(--pagination-scale))
 			calc(var(--sveltely-padding-y) * 0.33 * var(--pagination-scale))
 			calc(var(--sveltely-padding-x) * var(--pagination-scale));

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

@@ -7,7 +7,7 @@
 
 <script lang="ts">
 	import Popover from './Popover.svelte';
-	import SearchInput from '../SearchInput/SearchInput.svelte';
+	import SearchField from '../SearchField/SearchField.svelte';
 
 	let search = $state('');
 </script>
@@ -17,5 +17,5 @@
 		<span>Open popover</span>
 	{/snippet}
 
-	<SearchInput id="popover-demo-search" bind:value={search} placeholder="Type to search..." />
+	<SearchField id="popover-demo-search" bind:value={search} placeholder="Type to search..." />
 </Popover>