@x33025/sveltely 0.1.18 → 0.1.19

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

@@ -0,0 +1,37 @@
+import type { Snippet } from 'svelte';
+export type TableColumnAlignment = 'leading' | 'center' | 'trailing';
+export type TableColumnHeaderVisibility = 'visible' | 'hidden';
+export type TableSelectionMode = 'none' | 'single' | 'multiple';
+export type TableSortDirection = 'ascending' | 'descending';
+export type TableRowKey = string | number;
+export type TableSelection = TableRowKey | TableRowKey[] | Set<TableRowKey> | null;
+export type TableSpanValue<T> = number | ((row: T, index: number) => number | undefined);
+export type TableSortDescriptor<T> = {
+    key: string;
+    direction: TableSortDirection;
+    compare?: (a: T, b: T) => number;
+};
+export type TableColumnCustomization = {
+    order?: string[];
+    hidden?: string[];
+};
+export type TableColumn<T> = {
+    key?: string;
+    label: string;
+    value?: keyof T | ((row: T) => unknown);
+    cell?: Snippet<[row: T, index: number]>;
+    width?: number | string;
+    minWidth?: number | string;
+    alignment?: TableColumnAlignment;
+    sortable?: boolean;
+    sortKey?: keyof T | string;
+    compare?: (a: T, b: T) => number;
+    colspan?: TableSpanValue<T>;
+    rowspan?: TableSpanValue<T>;
+    hidden?: boolean;
+};
+export type TableContext<T> = {
+    registerColumn: (column: TableColumn<T>) => symbol;
+    updateColumn: (id: symbol, column: TableColumn<T>) => void;
+    unregisterColumn: (id: symbol) => void;
+};

package/dist/components/Library/Table/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,21 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Text',
+		description: 'Semantic text component with shared heading and paragraph appearances.',
+		rowSpan: 2
+	};
+</script>
+
+<script lang="ts">
+	import VStack from '../VStack';
+	import Text from './Text.svelte';
+</script>
+
+<VStack gap={5}>
+	<Text as="h1">Heading 1</Text>
+	<Text as="h2">Heading 2</Text>
+	<Text as="h3">Heading 3</Text>
+	<Text as="paragraph" color="var(--sveltely-text-secondary-color)">
+		Paragraph text uses the same appearance presets that TextField and TextEditor can opt into.
+	</Text>
+</VStack>

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

@@ -0,0 +1,24 @@
+export declare const demo: {
+    name: string;
+    description: string;
+    rowSpan: number;
+};
+import Text from './Text.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> {
+    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;
+}
+declare const Text: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Text = InstanceType<typeof Text>;
+export default Text;

package/dist/components/Library/Text/Text.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+	import { textElementFor, textStyle, type TextProps } from '../../../style/text';
+
+	type Props = {
+		children?: Snippet;
+	} & TextProps &
+		StyleProps &
+		Record<string, unknown>;
+
+	let { children, as, textAlign, ...restProps }: Props = $props();
+
+	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
+	const element = $derived(textElementFor(as));
+	const rootStyle = $derived.by(() =>
+		[textStyle({ as, textAlign }, 'text'), surfaceStyle(styleProps, 'text')]
+			.filter(Boolean)
+			.join(' ')
+	);
+</script>
+
+<svelte:element this={element} class="text" style={rootStyle} {...props}>
+	{#if children}
+		{@render children()}
+	{/if}
+</svelte:element>
+
+<style>
+	.text {
+		margin: 0;
+		min-width: 0;
+		color: var(--text-color, var(--sveltely-text-primary-color));
+		font-size: var(--text-font-size);
+		font-weight: var(--text-font-weight);
+		line-height: var(--text-line-height);
+		text-align: var(--text-text-align, start);
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import { type StyleProps } from '../../../style/surface';
+import { type TextProps } from '../../../style/text';
+type Props = {
+    children?: Snippet;
+} & TextProps & StyleProps & Record<string, unknown>;
+declare const Text: import("svelte").Component<Props, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

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

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

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

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

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

@@ -1,25 +1,21 @@
 <script lang="ts">
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
-	import { textEditorStyle, type TextEditorProps } from '../../../style/text-editor';
+	import { textStyle, type TextProps } from '../../../style/text';
 
 	type Props = Omit<HTMLTextareaAttributes, 'value' | 'class'> & {
 		value?: string;
-		class?: HTMLTextareaAttributes['class'];
 		autosize?: boolean;
-		className?: string;
 		onInput?: (event: Event) => void;
 		onKeyDown?: (event: KeyboardEvent) => void;
 		shouldFocus?: boolean;
 		focusPosition?: number | null;
 		onFocused?: () => void;
-	} & TextEditorProps;
+	} & TextProps;
 
 	let {
 		value = $bindable(''),
 		rows = 1,
-		class: classProp = '',
 		autosize = false,
-		className = '',
 		onInput,
 		onKeyDown,
 		oninput,
@@ -27,12 +23,19 @@
 		shouldFocus = false,
 		focusPosition = null,
 		onFocused,
+		as,
 		textAlign,
 		...textareaProps
 	}: Props = $props();
 
 	let textarea: HTMLTextAreaElement | undefined;
-	const rootStyle = $derived(textEditorStyle({ textAlign }, 'text-editor'));
+	const rootStyle = $derived(textStyle({ as, textAlign }, 'text-editor'));
+	const inputProps = $derived.by(() => {
+		const props = { ...textareaProps } as typeof textareaProps & Record<string, unknown>;
+		delete props.class;
+		delete props.style;
+		return props;
+	});
 
 	const resize = () => {
 		if (!autosize || !textarea) return;
@@ -61,7 +64,7 @@
 	bind:this={textarea}
 	{value}
 	{rows}
-	{...textareaProps}
+	{...inputProps}
 	style={rootStyle}
 	oninput={(event) => {
 		resize();
@@ -72,7 +75,7 @@
 		onkeydown?.(event);
 		onKeyDown?.(event);
 	}}
-	class={`text-editor ${classProp} ${className}`}
+	class="text-editor"
 ></textarea>
 
 <style>
@@ -85,6 +88,9 @@
 		overflow: hidden;
 		padding: 0;
 		resize: none;
+		font-size: var(--text-editor-font-size);
+		font-weight: var(--text-editor-font-weight);
+		line-height: var(--text-editor-line-height);
 		text-align: var(--text-editor-text-align, start);
 	}
 

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

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

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
 	export const demo = {
-		name: 'TextField',
+		name: 'Text Field',
 		description: 'Token-aware text input with help and error states.'
 	};
 </script>

package/dist/components/Library/TextField/TextField.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { tooltip } from '../../../actions/tooltip';
+	import { tooltip as tooltipAction } from '../../../actions/tooltip';
 	import { surfaceStyle, type StyleProps } from '../../../style/surface';
-	import {
-		textEditorStyle,
-		type TextEditorProps,
-		type TextFieldType,
-		type TextInputMode
-	} from '../../../style/text-editor';
+	import { textStyle, type TextProps } from '../../../style/text';
+	import { type TextFieldType, type TextInputMode } from '../../../style/text-editor';
+	import type { TooltipProps } from '../../../style/tooltip';
 
 	type Props = {
 		value?: string;
@@ -22,7 +19,8 @@
 		readonly?: boolean;
 		inputmode?: TextInputMode;
 	} & StyleProps &
-		TextEditorProps;
+		TextProps &
+		TooltipProps;
 
 	let {
 		value = $bindable(''),
@@ -36,6 +34,8 @@
 		required = false,
 		readonly = false,
 		inputmode,
+		tooltip,
+		as,
 		textAlign,
 		fontSize,
 		paddingX,
@@ -59,17 +59,18 @@
 		borderColor,
 		color
 	});
-	const textEditorProps = $derived({ textAlign });
+	const textProps = $derived({ as, textAlign });
 	const rootStyle = $derived.by(() =>
-		[surfaceStyle(styleProps, 'text-field'), textEditorStyle(textEditorProps)]
+		[textStyle(textProps, 'text-field'), surfaceStyle(styleProps, 'text-field')]
 			.filter(Boolean)
 			.join(' ')
 	);
 	const describedBy = $derived(help ? 'text-field-message' : undefined);
+	const resolvedTooltip = $derived(error ? { label: error } : tooltip);
 </script>
 
 <div
-	use:tooltip={{ label: error ?? '', disabled: !error }}
+	use:tooltipAction={resolvedTooltip}
 	class="text-field"
 	style={rootStyle}
 	data-disabled={disabled ? 'true' : 'false'}
@@ -102,8 +103,8 @@
 		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));
+		color: var(--text-field-color, var(--sveltely-text-primary-color));
+		font-size: var(--text-field-font-size, var(--sveltely-font-size));
 	}
 
 	.text-field-input {
@@ -111,9 +112,11 @@
 		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));
+		background: var(--text-field-background, var(--sveltely-control-background-color));
 		color: inherit;
-		line-height: 1.25rem;
+		font-size: var(--text-field-font-size);
+		font-weight: var(--text-field-font-weight);
+		line-height: var(--text-field-line-height);
 		outline: none;
 		padding: var(--text-field-padding-y, calc(var(--sveltely-padding-y) * 0.67))
 			var(--text-field-padding-x, var(--sveltely-padding-x));
@@ -126,15 +129,15 @@
 	}
 
 	.text-field-input:focus {
-		border-color: color-mix(in oklab, var(--sveltely-active-color) 50%, white);
+		border-color: color-mix(in oklab, var(--sveltely-control-active-color) 50%, white);
 	}
 
 	.text-field-input::placeholder {
-		color: var(--sveltely-secondary-color);
+		color: var(--sveltely-text-secondary-color);
 	}
 
 	.text-field-message {
-		color: var(--sveltely-secondary-color);
+		color: var(--sveltely-text-secondary-color);
 		font-size: calc(var(--text-field-font-size, 0.875rem) * 0.857);
 		line-height: 1.25;
 	}

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

@@ -1,6 +1,8 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 import { type StyleProps } from '../../../style/surface';
-import { type TextEditorProps, type TextFieldType, type TextInputMode } from '../../../style/text-editor';
+import { type TextProps } from '../../../style/text';
+import { type TextFieldType, type TextInputMode } from '../../../style/text-editor';
+import type { TooltipProps } from '../../../style/tooltip';
 type Props = {
     value?: string;
     help?: string;
@@ -13,7 +15,7 @@ type Props = {
     required?: boolean;
     readonly?: boolean;
     inputmode?: TextInputMode;
-} & StyleProps & TextEditorProps;
+} & StyleProps & TextProps & TooltipProps;
 declare const TextField: import("svelte").Component<Props, {}, "value">;
 type TextField = ReturnType<typeof TextField>;
 export default TextField;

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
 	export const demo = {
-		name: 'TextShimmer',
+		name: 'Text Shimmer',
 		description: 'Animated shimmering text that follows the global font-size token.'
 	};
 </script>

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
 	export const demo = {
-		name: 'TimePicker',
+		name: 'Time Picker',
 		description: 'Wheel-based time picker with hour, minute, and period columns.',
 		columnSpan: 1,
 		rowSpan: 2
@@ -13,6 +13,14 @@
 	let value = $state<Date | null>(new Date());
 </script>
 
-<div class="vstack gap-4">
+<div class="time-picker-demo vstack gap-4">
 	<TimePicker bind:value />
 </div>
+
+<style>
+	.time-picker-demo {
+		width: 100%;
+		height: 100%;
+		min-height: 0;
+	}
+</style>

package/dist/components/Library/TimePicker/TimePicker.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import WheelPicker from '../WheelPicker';
-	import type { WheelColumn, WheelOption } from '../WheelPicker';
+	import type { AnyWheelColumn, WheelOption } from '../WheelPicker';
 	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
 
 	export type TimeMeridiem = 'AM' | 'PM';
@@ -97,24 +97,26 @@
 			0
 		);
 	};
-	const columns = $derived.by<WheelColumn[]>(() => [
+	const columns = $derived.by<AnyWheelColumn[]>(() => [
 		{
 			label: hourLabel,
 			value: selectedHour,
 			options: hourOptions,
-			onChange: (hour) => updateTime(hour as number, selectedMinute, selectedMeridiem)
+			onChange: (hour: string | number) =>
+				updateTime(Number(hour), selectedMinute, selectedMeridiem)
 		},
 		{
 			label: minuteLabel,
 			value: selectedMinute,
 			options: minuteOptions,
-			onChange: (minute) => updateTime(selectedHour, minute as number, selectedMeridiem)
+			onChange: (minute: string | number) =>
+				updateTime(selectedHour, Number(minute), selectedMeridiem)
 		},
 		{
 			label: periodLabel,
 			value: selectedMeridiem,
 			options: periodOptions,
-			onChange: (meridiem) =>
+			onChange: (meridiem: string | number) =>
 				updateTime(selectedHour, selectedMinute, meridiem as TimeMeridiem)
 		}
 	]);
@@ -133,7 +135,10 @@
 			(calc(var(--wheel-picker-font-size) * 0.875) * 1.2) +
 				(calc(var(--sveltely-padding-y) * 0.67 * var(--wheel-picker-scale)) * 2) + 2px
 		);
+		flex: 1 1 auto;
 		height: var(--time-picker-height, calc(var(--wheel-picker-option-height) * 10));
+		max-height: 100%;
+		min-height: 0;
 	}
 
 	:global(.time-picker .wheel-picker-label-column:last-child),

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
 	export const demo = {
-		name: 'TokenSearchField',
+		name: 'Token Search Field',
 		description: 'Search field that turns comma-separated entries into removable tokens.',
 		columnSpan: 2
 	};
@@ -15,5 +15,7 @@
 
 <div class="vstack w-full max-w-md gap-2">
 	<TokenSearchField bind:tokens bind:value placeholder="Search keywords" />
-	<p class="text-xs text-[var(--sveltely-secondary-color)]">Tokens: {tokens.join(', ') || 'empty'}</p>
+	<p class="text-xs text-[var(--sveltely-text-secondary-color)]">
+		Tokens: {tokens.join(', ') || 'empty'}
+	</p>
 </div>

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

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import { SearchIcon, X } from '@lucide/svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { tooltip as tooltipAction } from '../../../actions/tooltip';
 	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+	import type { TooltipProps } from '../../../style/tooltip';
 
 	type Props = {
 		tokens?: string[];
@@ -12,6 +14,7 @@
 		normalizeToken?: (value: string) => string;
 		showIcon?: boolean;
 	} & StyleProps &
+		TooltipProps &
 		Omit<HTMLInputAttributes, 'children' | 'type' | 'value' | 'placeholder' | 'class' | 'style'>;
 
 	const defaultNormalizeToken = (value: string) => value.trim().replace(/\s+/g, ' ');
@@ -24,6 +27,7 @@
 		tokenPlaceholder = 'Add search token',
 		normalizeToken = defaultNormalizeToken,
 		showIcon = false,
+		tooltip,
 		disabled = false,
 		...restProps
 	}: Props = $props();
@@ -85,6 +89,7 @@
 	class:token-search-field-has-tokens={tokens.length > 0}
 	style={rootStyle}
 	data-disabled={disabled ? 'true' : 'false'}
+	use:tooltipAction={tooltip}
 >
 	{#if showIcon}
 		<span class="token-search-field-icon" aria-hidden="true">
@@ -138,7 +143,7 @@
 		flex: 1 1 0;
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius);
-		color: var(--sveltely-primary-color);
+		color: var(--sveltely-text-primary-color);
 		gap: var(--token-search-field-inset);
 		padding: calc(var(--sveltely-padding-y) * 0.67 * var(--token-search-field-scale))
 			calc(var(--sveltely-padding-x) * var(--token-search-field-scale));
@@ -153,7 +158,7 @@
 	}
 
 	.token-search-field:focus-within {
-		border-color: color-mix(in oklab, var(--sveltely-active-color) 50%, white);
+		border-color: color-mix(in oklab, var(--sveltely-control-active-color) 50%, white);
 	}
 
 	.token-search-field-has-tokens {
@@ -167,7 +172,7 @@
 
 	.token-search-field-icon {
 		flex-shrink: 0;
-		color: var(--sveltely-secondary-color);
+		color: var(--sveltely-text-secondary-color);
 	}
 
 	:global(.token-search-field-search-icon) {
@@ -193,8 +198,8 @@
 		align-items: center;
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius-nested);
-		background: var(--sveltely-inactive-color);
-		color: var(--sveltely-primary-color);
+		background: var(--sveltely-control-inactive-color);
+		color: var(--sveltely-text-primary-color);
 		font-size: inherit;
 		line-height: inherit;
 		gap: calc(var(--sveltely-padding-x) * 0.66 * var(--token-search-field-scale));
@@ -213,11 +218,6 @@
 		height: var(--token-search-field-remove-icon-size);
 	}
 
-	.token-search-field-token:hover:not(:disabled) {
-		border-color: var(--sveltely-border-color);
-		background: var(--sveltely-hover-color);
-	}
-
 	.token-search-field-token:disabled {
 		cursor: not-allowed;
 		opacity: 0.6;
@@ -225,7 +225,7 @@
 
 	.token-search-field-confirm {
 		flex-shrink: 0;
-		color: var(--sveltely-secondary-color);
+		color: var(--sveltely-text-secondary-color);
 		font-size: var(--token-search-field-confirm-font-size);
 		font-weight: 500;
 		line-height: calc(var(--token-search-field-confirm-font-size) * 1.333);

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

@@ -1,5 +1,6 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 import { type StyleProps } from '../../../style/surface';
+import type { TooltipProps } from '../../../style/tooltip';
 type Props = {
     tokens?: string[];
     value?: string;
@@ -8,7 +9,7 @@ type Props = {
     tokenPlaceholder?: string;
     normalizeToken?: (value: string) => string;
     showIcon?: boolean;
-} & StyleProps & Omit<HTMLInputAttributes, 'children' | 'type' | 'value' | 'placeholder' | 'class' | 'style'>;
+} & StyleProps & TooltipProps & Omit<HTMLInputAttributes, 'children' | 'type' | 'value' | 'placeholder' | 'class' | 'style'>;
 declare const TokenSearchField: import("svelte").Component<Props, {}, "value" | "tokens">;
 type TokenSearchField = ReturnType<typeof TokenSearchField>;
 export default TokenSearchField;