@noahbaumgartner/svelte-ui 0.0.5 → 0.0.7

package/dist/components/spinner/Spinner.svelte

@@ -5,68 +5,93 @@
 		size?: 'sm' | 'md' | 'lg';
 		/** Accessible name. Ignored when the spinner is `aria-hidden`, e.g. inside a loading Button. */
 		label?: string;
+		ref?: HTMLSpanElement | null;
 	};
 
-	let { size = 'md', label = 'Loading', class: className, ...rest }: Props = $props();
+	let {
+		size = 'md',
+		label = 'Loading',
+		ref = $bindable(null),
+		class: className,
+		...rest
+	}: Props = $props();
 </script>
 
-<span {...rest} role="status" aria-label={label} class={['spinner', `spinner--${size}`, className]}
+<span
+	{...rest}
+	bind:this={ref}
+	role="status"
+	aria-label={label}
+	class={['spinner', `spinner--${size}`, className]}
 ></span>
 
 <style>
-	@property --spinner-angle {
-		syntax: '<angle>';
-		initial-value: 0deg;
-		inherits: false;
-	}
+	@layer svelte-ui {
+		@property --spinner-angle {
+			syntax: '<angle>';
+			initial-value: 0deg;
+			inherits: false;
+		}
 
-	.spinner {
-		--spinner-size: 16px;
-		position: relative;
-		display: inline-block;
-		flex-shrink: 0;
-		width: var(--spinner-size);
-		height: var(--spinner-size);
-	}
+		.spinner {
+			--spinner-size: 16px;
+			position: relative;
+			display: inline-block;
+			flex-shrink: 0;
+			width: var(--spinner-size);
+			height: var(--spinner-size);
+		}
 
-	.spinner--sm {
-		--spinner-size: 14px;
-	}
+		.spinner--sm {
+			--spinner-size: 14px;
+		}
 
-	.spinner--lg {
-		--spinner-size: 20px;
-	}
+		.spinner--lg {
+			--spinner-size: 20px;
+		}
 
-	.spinner::before,
-	.spinner::after {
-		content: '';
-		position: absolute;
-		inset: 0;
-		box-sizing: border-box;
-		border: calc(var(--spinner-size) / 8) solid currentColor;
-		border-radius: 30%;
-	}
+		.spinner::before,
+		.spinner::after {
+			content: '';
+			position: absolute;
+			inset: 0;
+			box-sizing: border-box;
+			border: calc(var(--spinner-size) / 8) solid currentColor;
+			border-radius: 30%;
+		}
 
-	/* Track */
-	.spinner::before {
-		opacity: 0.2;
-	}
+		/* Track */
+		.spinner::before {
+			opacity: 0.2;
+		}
 
-	/* Handle: a conic mask whose head is opaque and whose tail fades out */
-	.spinner::after {
-		mask: conic-gradient(from var(--spinner-angle), transparent 0% 60%, #000 100%);
-		animation: spinner-rotate 1s linear infinite;
-	}
+		/* Handle: a conic mask whose head is opaque and whose tail fades out */
+		.spinner::after {
+			mask: conic-gradient(from var(--spinner-angle), transparent 0% 60%, #000 100%);
+			animation: spinner-rotate 1s linear infinite;
+		}
 
-	@keyframes spinner-rotate {
-		to {
-			--spinner-angle: 360deg;
+		@keyframes spinner-rotate {
+			to {
+				--spinner-angle: 360deg;
+			}
 		}
-	}
 
-	@media (prefers-reduced-motion: reduce) {
-		.spinner::after {
-			animation-duration: 3s;
+		@media (forced-colors: active) {
+			.spinner::before {
+				opacity: 1;
+				border-color: GrayText;
+			}
+
+			.spinner::after {
+				border-color: Highlight;
+			}
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.spinner::after {
+				animation-duration: 3s;
+			}
 		}
 	}
 </style>

package/dist/components/spinner/Spinner.svelte.d.ts

@@ -3,7 +3,8 @@ type Props = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
     size?: 'sm' | 'md' | 'lg';
     /** Accessible name. Ignored when the spinner is `aria-hidden`, e.g. inside a loading Button. */
     label?: string;
+    ref?: HTMLSpanElement | null;
 };
-declare const Spinner: import("svelte").Component<Props, {}, "">;
+declare const Spinner: import("svelte").Component<Props, {}, "ref">;
 type Spinner = ReturnType<typeof Spinner>;
 export default Spinner;

package/dist/components/switch/Switch.svelte

@@ -1,88 +1,149 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
 
-	type Props = Omit<HTMLInputAttributes, 'type' | 'role'>;
+	type Props = Omit<HTMLInputAttributes, 'type' | 'role'> & {
+		ref?: HTMLInputElement | null;
+	};
 
-	let { checked = $bindable(false), class: className, ...rest }: Props = $props();
+	let {
+		checked = $bindable(false),
+		ref = $bindable(null),
+		class: className,
+		...rest
+	}: Props = $props();
 </script>
 
 <span class={['switch', className]}>
-	<input {...rest} type="checkbox" role="switch" bind:checked />
+	<input {...rest} bind:this={ref} type="checkbox" role="switch" bind:checked />
 	<span class="switch-thumb" aria-hidden="true"></span>
 </span>
 
 <style>
-	.switch {
-		position: relative;
-		display: inline-flex;
-		flex-shrink: 0;
-		width: 36px;
-		height: 22px;
-	}
+	@layer svelte-ui {
+		.switch {
+			position: relative;
+			display: inline-flex;
+			flex-shrink: 0;
+			width: 36px;
+			height: 22px;
+		}
 
-	input {
-		appearance: none;
-		box-sizing: border-box;
-		width: 100%;
-		height: 100%;
-		margin: 0;
-		background-color: var(--color-surface);
-		border: 1px solid var(--color-border);
-		border-radius: 9px;
-		outline: none;
-		cursor: pointer;
-		transition:
-			background-color 200ms ease,
-			border-color 200ms ease;
-	}
+		input {
+			appearance: none;
+			box-sizing: border-box;
+			width: 100%;
+			height: 100%;
+			margin: 0;
+			background-color: var(--color-surface);
+			border: 1px solid var(--color-border);
+			border-radius: 9px;
+			outline: none;
+			cursor: pointer;
+			transition:
+				background-color 200ms ease,
+				border-color 200ms ease;
+		}
 
-	input:checked {
-		background-color: var(--color-accent);
-		border-color: var(--color-accent);
-	}
+		input:checked {
+			background-color: var(--color-accent);
+			border-color: var(--color-accent);
+		}
 
-	input:focus-visible {
-		outline: 2px solid var(--color-accent);
-		outline-offset: 2px;
-	}
+		input:focus-visible {
+			outline: 2px solid var(--color-accent);
+			outline-offset: 2px;
+		}
 
-	input[aria-invalid='true'] {
-		border-color: var(--color-destructive);
-	}
+		input[aria-invalid='true'] {
+			border-color: var(--color-destructive);
+		}
 
-	input:disabled {
-		cursor: not-allowed;
-		opacity: 0.5;
-	}
+		input:disabled {
+			cursor: not-allowed;
+			opacity: 0.5;
+		}
 
-	/* Radius is the track's 9px minus the 4px inset, so the corners stay concentric */
-	.switch-thumb {
-		position: absolute;
-		top: 4px;
-		left: 4px;
-		width: 14px;
-		height: 14px;
-		background-color: var(--color-base);
-		border-radius: 5px;
-		pointer-events: none;
-		transition:
-			transform 200ms ease,
-			background-color 200ms ease;
-	}
+		/* Radius is the track's 9px minus the 4px inset, so the corners stay concentric */
+		.switch-thumb {
+			position: absolute;
+			top: 4px;
+			left: 4px;
+			width: 14px;
+			height: 14px;
+			background-color: var(--color-base);
+			border-radius: 5px;
+			pointer-events: none;
+			transition:
+				transform 200ms ease,
+				background-color 200ms ease;
+		}
 
-	input:checked + .switch-thumb {
-		background-color: var(--color-accent-foreground);
-		transform: translateX(14px);
-	}
+		input:checked + .switch-thumb {
+			background-color: var(--color-accent-foreground);
+			transform: translateX(14px);
+		}
 
-	input:disabled + .switch-thumb {
-		opacity: 0.5;
-	}
+		input:disabled + .switch-thumb {
+			opacity: 0.5;
+		}
 
-	@media (prefers-reduced-motion: reduce) {
-		input,
-		.switch-thumb {
-			transition: none;
+		@media (pointer: coarse) {
+			input {
+				position: relative;
+			}
+
+			input::after {
+				content: '';
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				width: max(100%, 44px);
+				height: max(100%, 44px);
+				transform: translate(-50%, -50%);
+			}
+		}
+
+		@media (forced-colors: active) {
+			input {
+				border-color: ButtonText;
+			}
+
+			input:checked {
+				background-color: Highlight;
+				border-color: Highlight;
+			}
+
+			input:disabled {
+				border-color: GrayText;
+			}
+
+			input:checked:disabled {
+				background-color: GrayText;
+				border-color: GrayText;
+			}
+
+			.switch-thumb {
+				background-color: ButtonText;
+			}
+
+			input:checked + .switch-thumb {
+				background-color: HighlightText;
+			}
+
+			input:disabled + .switch-thumb {
+				background-color: GrayText;
+			}
+
+			input:checked:disabled + .switch-thumb {
+				background-color: HighlightText;
+			}
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			input,
+			.switch-thumb {
+				transition: none;
+			}
 		}
 	}
 </style>

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

@@ -1,5 +1,7 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
-type Props = Omit<HTMLInputAttributes, 'type' | 'role'>;
-declare const Switch: import("svelte").Component<Props, {}, "checked">;
+type Props = Omit<HTMLInputAttributes, 'type' | 'role'> & {
+    ref?: HTMLInputElement | null;
+};
+declare const Switch: import("svelte").Component<Props, {}, "ref" | "checked">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/components/table/Table.svelte

@@ -35,7 +35,9 @@
 
 <script lang="ts" generics="T">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { ArrowDown, ArrowUp, ChevronsUpDown } from '@lucide/svelte';
+	import ArrowDown from '../../internal/icons/ArrowDown.svelte';
+	import ArrowUp from '../../internal/icons/ArrowUp.svelte';
+	import ChevronsUpDown from '../../internal/icons/ChevronsUpDown.svelte';
 	import Checkbox from '../checkbox/Checkbox.svelte';
 
 	type Props = Omit<HTMLAttributes<HTMLTableElement>, 'children'> & {
@@ -47,6 +49,13 @@
 		selected?: T[];
 		/** Identifies rows across data updates; defaults to the row object itself. */
 		rowId?: (row: T) => unknown;
+		/** Locale used to compare strings when sorting. Defaults to the runtime locale. */
+		locale?: string;
+		/** Accessible names of the selection checkboxes. */
+		labels?: { selectAll?: string; selectRow?: string };
+		/** Rendered in a full-width row while `data` is empty. */
+		empty?: Snippet;
+		ref?: HTMLTableElement | null;
 	};
 
 	let {
@@ -56,10 +65,17 @@
 		selection,
 		selected = $bindable([]),
 		rowId = (row) => row,
+		locale,
+		labels,
+		empty,
+		ref = $bindable(null),
 		class: className,
 		...rest
 	}: Props = $props();
 
+	const selectAllLabel = $derived(labels?.selectAll ?? 'Select all rows');
+	const selectRowLabel = $derived(labels?.selectRow ?? 'Select row');
+
 	const columnId = (column: TableColumn<T>) => column.id ?? column.key ?? column.header;
 
 	function sortValue(column: TableColumn<T>, row: T): unknown {
@@ -70,7 +86,7 @@
 	function compare(a: unknown, b: unknown) {
 		if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
 		if (typeof a === 'number' && typeof b === 'number') return a - b;
-		return String(a).localeCompare(String(b), undefined, { numeric: true });
+		return String(a).localeCompare(String(b), locale, { numeric: true });
 	}
 
 	const rows = $derived.by(() => {
@@ -114,14 +130,14 @@
 </script>
 
 <div class="table-container">
-	<table {...rest} class={['table', className]}>
+	<table {...rest} bind:this={ref} class={['table', className]}>
 		<thead>
 			<tr>
 				{#if selection}
 					<th scope="col" class="table-select">
 						{#if selection === 'multiple'}
 							<Checkbox
-								aria-label="Select all rows"
+								aria-label={selectAllLabel}
 								checked={allSelected}
 								indeterminate={someSelected}
 								onchange={toggleAll}
@@ -165,7 +181,7 @@
 					{#if selection}
 						<td class="table-select">
 							<Checkbox
-								aria-label="Select row"
+								aria-label={selectRowLabel}
 								checked={isSelected}
 								onchange={() => toggleRow(row)}
 							/>
@@ -181,96 +197,139 @@
 						</td>
 					{/each}
 				</tr>
+			{:else}
+				{#if empty}
+					<tr>
+						<td class="table-empty" colspan={columns.length + (selection ? 1 : 0)}>
+							{@render empty()}
+						</td>
+					</tr>
+				{/if}
 			{/each}
 		</tbody>
 	</table>
 </div>
 
 <style>
-	.table-container {
-		width: 100%;
-		overflow-x: auto;
-	}
+	@layer svelte-ui {
+		.table-container {
+			width: 100%;
+			overflow-x: auto;
+		}
 
-	.table {
-		width: 100%;
-		border-collapse: collapse;
-		font-size: 13px;
-		color: var(--color-text);
-	}
+		.table {
+			width: 100%;
+			border-collapse: collapse;
+			font-size: 13px;
+			color: var(--color-text);
+		}
 
-	th,
-	td {
-		padding: 10px 12px;
-		white-space: nowrap;
-		border-bottom: 1px solid var(--color-border);
-	}
+		th,
+		td {
+			padding: 10px 12px;
+			white-space: nowrap;
+			border-bottom: 1px solid var(--color-border);
+		}
 
-	th {
-		font-weight: 500;
-		color: var(--color-text-muted);
-	}
+		th {
+			font-weight: 500;
+			color: var(--color-text-muted);
+		}
 
-	tbody tr:last-child td {
-		border-bottom: none;
-	}
+		tbody tr:last-child td {
+			border-bottom: none;
+		}
 
-	tbody tr:hover,
-	tbody tr[data-selected] {
-		background-color: var(--color-surface);
-	}
+		tbody tr:hover,
+		tbody tr[data-selected] {
+			background-color: var(--color-surface);
+		}
 
-	.table-left {
-		text-align: left;
-	}
+		.table-left {
+			text-align: left;
+		}
 
-	.table-center {
-		text-align: center;
-	}
+		.table-center {
+			text-align: center;
+		}
 
-	.table-right {
-		text-align: right;
-	}
+		.table-right {
+			text-align: right;
+		}
 
-	.table-select {
-		width: 16px;
-		padding-right: 0;
-		line-height: 0;
-	}
+		.table-select {
+			width: 16px;
+			padding-right: 0;
+			line-height: 0;
+		}
 
-	.table-sort {
-		display: inline-flex;
-		align-items: center;
-		gap: 4px;
-		margin: -2px -4px;
-		padding: 2px 4px;
-		font: inherit;
-		color: inherit;
-		background: none;
-		border: none;
-		border-radius: 6px;
-		outline: none;
-		cursor: pointer;
-		transition: color 200ms ease;
-	}
+		.table-sort {
+			display: inline-flex;
+			align-items: center;
+			gap: 4px;
+			margin: -2px -4px;
+			padding: 2px 4px;
+			font: inherit;
+			color: inherit;
+			background: none;
+			border: none;
+			border-radius: 6px;
+			outline: none;
+			cursor: pointer;
+			transition: color 200ms ease;
+		}
 
-	.table-sort:hover,
-	th[aria-sort='ascending'] .table-sort,
-	th[aria-sort='descending'] .table-sort {
-		color: var(--color-text);
-	}
+		.table-sort:hover,
+		th[aria-sort='ascending'] .table-sort,
+		th[aria-sort='descending'] .table-sort {
+			color: var(--color-text);
+		}
 
-	.table-sort:focus-visible {
-		outline: 2px solid var(--color-accent);
-	}
+		.table-sort:focus-visible {
+			outline: 2px solid var(--color-accent);
+		}
 
-	.table-sort :global(.table-sort-icon) {
-		width: 14px;
-		height: 14px;
-		flex-shrink: 0;
-	}
+		.table-sort :global(.table-sort-icon) {
+			width: 14px;
+			height: 14px;
+			flex-shrink: 0;
+		}
+
+		.table-sort :global(.table-sort-icon--idle) {
+			opacity: 0.5;
+		}
+
+		.table-empty {
+			text-align: center;
+			color: var(--color-text-muted);
+		}
+
+		@media (pointer: coarse) {
+			.table-sort {
+				min-width: 44px;
+				min-height: 44px;
+			}
+		}
+
+		@media (forced-colors: active) {
+			tbody tr[data-selected] {
+				outline: 2px solid Highlight;
+				outline-offset: -2px;
+			}
+
+			.table-sort:focus-visible {
+				outline-color: Highlight;
+			}
+
+			.table-sort :global(.table-sort-icon--idle) {
+				opacity: 1;
+			}
+		}
 
-	.table-sort :global(.table-sort-icon--idle) {
-		opacity: 0.5;
+		@media (prefers-reduced-motion: reduce) {
+			.table-sort {
+				transition: none;
+			}
+		}
 	}
 </style>

package/dist/components/table/Table.svelte.d.ts

@@ -35,9 +35,19 @@ declare function $$render<T>(): {
         selected?: T[];
         /** Identifies rows across data updates; defaults to the row object itself. */
         rowId?: (row: T) => unknown;
+        /** Locale used to compare strings when sorting. Defaults to the runtime locale. */
+        locale?: string;
+        /** Accessible names of the selection checkboxes. */
+        labels?: {
+            selectAll?: string;
+            selectRow?: string;
+        };
+        /** Rendered in a full-width row while `data` is empty. */
+        empty?: Snippet;
+        ref?: HTMLTableElement | null;
     };
     exports: {};
-    bindings: "sort" | "selected";
+    bindings: "ref" | "sort" | "selected";
     slots: {};
     events: {};
 };
@@ -45,7 +55,7 @@ declare class __sveltets_Render<T> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "sort" | "selected";
+    bindings(): "ref" | "sort" | "selected";
     exports(): {};
 }
 interface $$IsomorphicComponent {