@x33025/sveltely 0.1.18 → 0.1.21

package/dist/components/Library/SearchField/SearchField.svelte

@@ -1,17 +1,21 @@
 <script lang="ts">
 	import { SearchIcon } 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 = {
 		value?: string;
 		radiusSource?: boolean;
 	} & StyleProps &
+		TooltipProps &
 		Omit<HTMLInputAttributes, 'children' | 'type' | 'value' | 'class' | 'style'>;
 
 	let {
 		value = $bindable(''),
 		radiusSource = true,
+		tooltip,
 		disabled = false,
 		placeholder = 'Search',
 		...restProps
@@ -28,6 +32,7 @@
 	style={rootStyle}
 	data-disabled={disabled ? 'true' : 'false'}
 	data-popover-radius-source={radiusSource ? 'true' : undefined}
+	use:tooltipAction={tooltip}
 >
 	<span class="search-field-icon" aria-hidden="true">
 		<SearchIcon class="size-4" />
@@ -42,8 +47,8 @@
 		align-items: center;
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius);
-		background: var(--sveltely-background-color);
-		color: var(--sveltely-primary-color);
+		background: var(--sveltely-control-background-color);
+		color: var(--sveltely-text-primary-color);
 		gap: var(--search-field-gap, calc(var(--sveltely-padding-x) * 0.67));
 		padding: var(--search-field-padding-y, calc(var(--sveltely-padding-y) * 0.67))
 			var(--search-field-padding-x, var(--sveltely-padding-x))
@@ -58,7 +63,7 @@
 	}
 
 	.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);
 	}
 
 	.search-field[data-disabled='true'] {
@@ -68,7 +73,7 @@
 
 	.search-field-icon {
 		flex-shrink: 0;
-		color: var(--sveltely-secondary-color);
+		color: var(--sveltely-text-secondary-color);
 	}
 
 	.search-field-input {

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

@@ -1,9 +1,10 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 import { type StyleProps } from '../../../style/surface';
+import type { TooltipProps } from '../../../style/tooltip';
 type Props = {
     value?: string;
     radiusSource?: boolean;
-} & StyleProps & Omit<HTMLInputAttributes, 'children' | 'type' | 'value' | 'class' | 'style'>;
+} & StyleProps & TooltipProps & Omit<HTMLInputAttributes, 'children' | 'type' | 'value' | 'class' | 'style'>;
 declare const SearchField: import("svelte").Component<Props, {}, "value">;
 type SearchField = ReturnType<typeof SearchField>;
 export default SearchField;

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
 	export const demo = {
-		name: 'SegmentedPicker',
+		name: 'Segmented Picker',
 		description: 'Segmented selection between fixed options.'
 	};
 </script>
@@ -19,5 +19,5 @@
 
 <div class="vstack center gap-2">
 	<SegmentedPicker {options} bind:value />
-	<p class="text-xs text-[var(--sveltely-secondary-color)]">Selected: {value}</p>
+	<p class="text-xs text-[var(--sveltely-text-secondary-color)]">Selected: {value}</p>
 </div>

package/dist/components/Library/SegmentedPicker/SegmentedPicker.svelte

@@ -66,7 +66,7 @@
 		--segmented-picker-scale: calc(var(--segmented-picker-font-size) / 0.875rem);
 		--sveltely-nested-inset: var(--segmented-picker-inset);
 		border-radius: var(--sveltely-border-radius);
-		background: var(--sveltely-inactive-color);
+		background: var(--sveltely-control-background-color);
 		gap: var(--segmented-picker-inset);
 		font-size: var(--segmented-picker-font-size);
 		padding: var(--segmented-picker-inset);
@@ -85,22 +85,22 @@
 	}
 
 	.segmented-picker-button:hover:not(.segmented-picker-button-active) {
-		background: var(--sveltely-hover-color);
+		background: color-mix(in oklab, var(--sveltely-control-active-color) 5%, transparent);
 	}
 
 	.segmented-picker-button-active {
-		background: var(--sveltely-active-color);
-		color: var(--sveltely-background-color);
+		background: var(--sveltely-control-active-color);
+		color: var(--sveltely-control-background-color);
 	}
 
 	.segmented-picker-button-disabled {
 		cursor: not-allowed;
-		color: var(--sveltely-secondary-color);
+		color: var(--sveltely-text-secondary-color);
 		pointer-events: none;
 	}
 
 	.segmented-picker-button-disabled-selected {
-		background: color-mix(in oklab, var(--sveltely-active-color) 35%, white);
-		color: var(--sveltely-secondary-color);
+		background: color-mix(in oklab, var(--sveltely-control-active-color) 35%, white);
+		color: var(--sveltely-text-secondary-color);
 	}
 </style>

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

@@ -15,7 +15,7 @@
 	{/snippet}
 
 	<div class="vstack gap-3">
-		<p class="text-sm text-[var(--sveltely-primary-color)]">This is a simple sheet example.</p>
+		<p class="text-sm text-[var(--sveltely-text-primary-color)]">This is a simple sheet example.</p>
 		<div class="rounded border border-gray-200/70 p-3 text-sm text-gray-700">
 			<div>Panel one content.</div>
 			<div class="mt-2">Panel two content.</div>

package/dist/components/Library/Sheet/Sheet.svelte

@@ -88,19 +88,14 @@
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius);
 		background: var(--sveltely-background-color);
-		color: var(--sveltely-primary-color);
+		color: var(--sveltely-text-primary-color);
 		gap: var(--sveltely-gap);
 		padding: calc(var(--sveltely-padding-y) * 0.67) var(--sveltely-padding-x);
 		font-size: 0.875rem;
 		line-height: 1.25rem;
 		transition:
 			color 150ms,
-			border-color 150ms,
-			background-color 150ms;
-	}
-
-	.sheet-trigger:hover {
-		background: var(--sveltely-hover-color);
+			border-color 150ms;
 	}
 
 	.sheet {

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

@@ -13,5 +13,5 @@
 
 <div class="vstack w-full max-w-sm gap-2">
 	<Slider bind:value min={0} max={100} />
-	<p class="text-xs text-[var(--sveltely-secondary-color)]">Value: {value}</p>
+	<p class="text-xs text-[var(--sveltely-text-secondary-color)]">Value: {value}</p>
 </div>

package/dist/components/Library/Slider/Slider.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
+	import { tooltip as tooltipAction } from '../../../actions/tooltip';
 	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+	import type { TooltipProps } from '../../../style/tooltip';
 
 	let {
 		value = $bindable(0),
 		min = 0,
 		max = 100,
 		step = 1,
+		tooltip,
 		disabled = false,
 		...props
 	}: {
@@ -15,6 +18,7 @@
 		step?: number | string;
 		disabled?: boolean;
 	} & StyleProps &
+		TooltipProps &
 		Record<string, unknown> = $props();
 
 	const extractedStyleProps = $derived.by(() => extractStyleProps(props));
@@ -49,6 +53,7 @@
 	class="slider"
 	style={sliderStyle}
 	{...inputProps}
+	use:tooltipAction={tooltip}
 />
 
 <style>
@@ -62,11 +67,10 @@
 		border-radius: var(--sveltely-border-radius);
 		background: transparent;
 		outline: none;
-		cursor: pointer;
 	}
 
 	.slider:focus-visible {
-		outline: 2px solid color-mix(in oklab, var(--sveltely-active-color) 35%, white);
+		outline: 2px solid color-mix(in oklab, var(--sveltely-control-active-color) 35%, white);
 		outline-offset: 4px;
 	}
 
@@ -80,8 +84,8 @@
 		border-radius: var(--sveltely-border-radius);
 		background: linear-gradient(
 			to right,
-			var(--sveltely-active-color) 0%,
-			var(--sveltely-active-color) var(--slider-pct),
+			var(--sveltely-control-active-color) 0%,
+			var(--sveltely-control-active-color) var(--slider-pct),
 			var(--sveltely-border-color) var(--slider-pct),
 			var(--sveltely-border-color) 100%
 		);
@@ -94,7 +98,7 @@
 		height: var(--slider-thumb-size);
 		border-radius: var(--sveltely-border-radius);
 		border: var(--slider-thumb-ring-width) solid var(--color-white);
-		background: var(--sveltely-active-color);
+		background: var(--sveltely-control-active-color);
 		margin-top: calc((var(--slider-track-height) - var(--slider-thumb-size)) / 2);
 	}
 
@@ -109,7 +113,7 @@
 		height: var(--slider-track-height);
 		border: none;
 		border-radius: var(--sveltely-border-radius);
-		background: var(--sveltely-active-color);
+		background: var(--sveltely-control-active-color);
 	}
 
 	.slider::-moz-range-thumb {
@@ -118,6 +122,6 @@
 		height: var(--slider-thumb-size);
 		border-radius: var(--sveltely-border-radius);
 		border: var(--slider-thumb-ring-width) solid var(--color-white);
-		background: var(--sveltely-active-color);
+		background: var(--sveltely-control-active-color);
 	}
 </style>

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

@@ -1,11 +1,12 @@
 import { type StyleProps } from '../../../style/surface';
+import type { TooltipProps } from '../../../style/tooltip';
 type $$ComponentProps = {
     value?: number;
     min?: number;
     max?: number;
     step?: number | string;
     disabled?: boolean;
-} & StyleProps & Record<string, unknown>;
+} & StyleProps & TooltipProps & Record<string, unknown>;
 declare const Slider: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Slider = ReturnType<typeof Slider>;
 export default Slider;

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

@@ -9,6 +9,6 @@
 	import Spinner from './Spinner.svelte';
 </script>
 
-<div class="text-[var(--sveltely-primary-color)]">
+<div class="text-[var(--sveltely-text-primary-color)]">
 	<Spinner />
 </div>

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

@@ -7,14 +7,17 @@
 
 <script lang="ts">
 	import Switch from './Switch.svelte';
+	import Label from '../Label';
 
 	let notificationsEnabled = $state(true);
 	let weeklySummaryEnabled = $state(false);
 </script>
 
 <div class="vstack gap-3">
-	<Switch bind:checked={notificationsEnabled} label="Enable notifications" />
-	<Switch bind:checked={weeklySummaryEnabled}>
-		<span>Send weekly summary email</span>
-	</Switch>
+	<Label label="Enable notifications" orientation="leading" width="fit">
+		<Switch bind:checked={notificationsEnabled} />
+	</Label>
+	<Label label="Send weekly summary" orientation="leading" width="fit">
+		<Switch bind:checked={weeklySummaryEnabled} />
+	</Label>
 </div>

package/dist/components/Library/Switch/Switch.svelte

@@ -1,22 +1,16 @@
 <script lang="ts">
-	import type { Snippet } from '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 = {
 		checked?: boolean;
-		label?: string;
-		children?: Snippet;
 	} & StyleProps &
-		Omit<HTMLInputAttributes, 'type' | 'children' | 'class' | 'style' | 'checked'>;
+		TooltipProps &
+		Omit<HTMLInputAttributes, 'type' | 'class' | 'style' | 'checked'>;
 
-	let {
-		checked = $bindable(false),
-		label,
-		children,
-		disabled = false,
-		...restProps
-	}: Props = $props();
+	let { checked = $bindable(false), tooltip, disabled = false, ...restProps }: Props = $props();
 
 	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
@@ -24,28 +18,17 @@
 	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'switch'));
 </script>
 
-<div
-	class="switch inline-flex items-center"
+<label
+	class="switch"
 	style={rootStyle}
 	data-disabled={disabled ? 'true' : 'false'}
+	use:tooltipAction={tooltip}
 >
-	<label class="switch-control">
-		<input bind:checked type="checkbox" {disabled} {...props} />
-		<span class="switch-track" aria-hidden="true">
-			<span class="switch-thumb"></span>
-		</span>
-	</label>
-
-	{#if children || label}
-		<span class="switch-label">
-			{#if children}
-				{@render children()}
-			{:else if label}
-				{label}
-			{/if}
-		</span>
-	{/if}
-</div>
+	<input bind:checked type="checkbox" {disabled} {...props} />
+	<span class="switch-track" aria-hidden="true">
+		<span class="switch-thumb"></span>
+	</span>
+</label>
 
 <style>
 	.switch {
@@ -71,11 +54,13 @@
 			var(--switch-width) - (var(--switch-border-width) * 2) - var(--switch-thumb-size) -
 				var(--switch-thumb-inset)
 		);
-		gap: var(--switch-gap, var(--sveltely-gap));
+		display: inline-block;
+		position: relative;
+		flex: 0 0 auto;
+		width: var(--switch-width);
+		height: var(--switch-height);
+		box-sizing: border-box;
 		font-size: var(--switch-font-size);
-		line-height: 1.25;
-		color: var(--switch-color, var(--sveltely-primary-color));
-		cursor: pointer;
 		user-select: none;
 	}
 
@@ -84,17 +69,7 @@
 		opacity: 0.5;
 	}
 
-	.switch-control {
-		cursor: inherit;
-		display: inline-block;
-		position: relative;
-		flex: 0 0 auto;
-		width: var(--switch-width);
-		height: var(--switch-height);
-		box-sizing: border-box;
-	}
-
-	.switch-control input {
+	.switch input {
 		position: absolute;
 		inset: 0;
 		margin: 0;
@@ -109,7 +84,7 @@
 		border: var(--switch-border-width) solid
 			var(--switch-border-color, var(--sveltely-border-color));
 		border-radius: var(--switch-resolved-border-radius);
-		background: var(--switch-background, var(--sveltely-inactive-color));
+		background: var(--switch-background, var(--sveltely-control-inactive-color));
 		box-sizing: border-box;
 		position: relative;
 		overflow: hidden;
@@ -128,36 +103,21 @@
 		box-sizing: border-box;
 		border-radius: var(--switch-thumb-border-radius, var(--switch-resolved-thumb-border-radius));
 		background: var(--switch-thumb-background, white);
-		transition:
-			left 180ms ease,
-			background-color 150ms;
+		transition: left 180ms ease;
 	}
 
-	.switch:hover .switch-track {
-		background: var(--switch-hover-background, var(--sveltely-inactive-hover-color));
+	.switch input:checked + .switch-track {
+		border-color: var(--switch-checked-border-color, var(--sveltely-control-active-color));
+		background: var(--switch-checked-background, var(--sveltely-control-active-color));
 	}
 
-	.switch-control input:checked + .switch-track {
-		border-color: var(--switch-checked-border-color, var(--sveltely-active-color));
-		background: var(--switch-checked-background, var(--sveltely-active-color));
-	}
-
-	.switch:hover .switch-control input:checked + .switch-track {
-		border-color: var(--switch-checked-hover-border-color, var(--sveltely-active-hover-color));
-		background: var(--switch-checked-hover-background, var(--sveltely-active-hover-color));
-	}
-
-	.switch-control input:checked + .switch-track .switch-thumb {
+	.switch input:checked + .switch-track .switch-thumb {
 		background: var(--switch-checked-thumb-background, white);
 		left: var(--switch-thumb-left-checked);
 	}
 
-	.switch-control input:focus-visible + .switch-track {
-		outline: 2px solid color-mix(in oklab, var(--sveltely-active-color) 24%, white);
+	.switch input:focus-visible + .switch-track {
+		outline: 2px solid color-mix(in oklab, var(--sveltely-control-active-color) 24%, white);
 		outline-offset: 2px;
 	}
-
-	.switch-label {
-		min-width: 0;
-	}
 </style>

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

@@ -1,11 +1,9 @@
-import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
 import { type StyleProps } from '../../../style/surface';
+import type { TooltipProps } from '../../../style/tooltip';
 type Props = {
     checked?: boolean;
-    label?: string;
-    children?: Snippet;
-} & StyleProps & Omit<HTMLInputAttributes, 'type' | 'children' | 'class' | 'style' | 'checked'>;
+} & StyleProps & TooltipProps & Omit<HTMLInputAttributes, 'type' | 'class' | 'style' | 'checked'>;
 declare const Switch: import("svelte").Component<Props, {}, "checked">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/components/Library/Table/Column.svelte

@@ -0,0 +1,81 @@
+<script lang="ts" generics="T extends Record<string, unknown>">
+	import { getContext, onDestroy } from 'svelte';
+	import { TABLE_CONTEXT } from './context';
+	import type { TableColumn, TableColumnAlignment, TableContext } from './types';
+
+	type Props = {
+		key?: string;
+		label: string;
+		value?: keyof T | ((row: T) => unknown);
+		cell?: TableColumn<T>['cell'];
+		width?: number | string;
+		minWidth?: number | string;
+		alignment?: TableColumnAlignment;
+		sortable?: boolean;
+		sortKey?: keyof T | string;
+		compare?: (a: T, b: T) => number;
+		colspan?: TableColumn<T>['colspan'];
+		rowspan?: TableColumn<T>['rowspan'];
+		hidden?: boolean;
+	};
+
+	let {
+		key,
+		label,
+		value,
+		cell,
+		width,
+		minWidth,
+		alignment,
+		sortable,
+		sortKey,
+		compare,
+		colspan,
+		rowspan,
+		hidden
+	}: Props = $props();
+
+	const table = getContext<TableContext<T>>(TABLE_CONTEXT);
+
+	const snapshot = (): TableColumn<T> => ({
+		key,
+		label,
+		value,
+		cell,
+		width,
+		minWidth,
+		alignment,
+		sortable,
+		sortKey,
+		compare,
+		colspan,
+		rowspan,
+		hidden
+	});
+
+	const signature = () =>
+		JSON.stringify({
+			key,
+			label,
+			width,
+			minWidth,
+			alignment,
+			sortable,
+			sortKey,
+			colspan: typeof colspan === 'function' ? null : colspan,
+			rowspan: typeof rowspan === 'function' ? null : rowspan,
+			hidden
+		});
+
+	const id = table.registerColumn(snapshot());
+	let previousSignature = signature();
+
+	$effect(() => {
+		const nextSignature = signature();
+		if (nextSignature === previousSignature) return;
+		previousSignature = nextSignature;
+		table.updateColumn(id, snapshot());
+	});
+
+	onDestroy(() => table.unregisterColumn(id));
+</script>

package/dist/components/Library/Table/Column.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { TableColumn, TableColumnAlignment } from './types';
+declare function $$render<T extends Record<string, unknown>>(): {
+    props: {
+        key?: string;
+        label: string;
+        value?: keyof T | ((row: T) => unknown);
+        cell?: TableColumn<T>["cell"];
+        width?: number | string;
+        minWidth?: number | string;
+        alignment?: TableColumnAlignment;
+        sortable?: boolean;
+        sortKey?: keyof T | string;
+        compare?: (a: T, b: T) => number;
+        colspan?: TableColumn<T>["colspan"];
+        rowspan?: TableColumn<T>["rowspan"];
+        hidden?: boolean;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Column: $$IsomorphicComponent;
+type Column<T extends Record<string, unknown>> = InstanceType<typeof Column<T>>;
+export default Column;