@noahbaumgartner/svelte-ui 0.0.5 → 0.0.6

package/dist/components/empty-state/EmptyState.svelte.d.ts

@@ -1,16 +1,19 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { LucideIcon } from '@lucide/svelte';
+import type { IconComponent } from '../../icon.js';
 type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {
-    /** Any Lucide icon (import from `svelte-ui/icons`). */
-    icon?: LucideIcon;
+    /** Any icon component, e.g. from `@lucide/svelte`. */
+    icon?: IconComponent;
     title: string;
     description?: string;
     /** `outline` has a dashed border, for empty areas that can be filled. */
     variant?: 'secondary' | 'outline';
     /** Optional actions below the text, e.g. a Button that creates the first entry. */
     children?: Snippet;
+    /** Custom media instead of `icon`. */
+    media?: Snippet;
+    ref?: HTMLDivElement | null;
 };
-declare const EmptyState: import("svelte").Component<Props, {}, "">;
+declare const EmptyState: import("svelte").Component<Props, {}, "ref">;
 type EmptyState = ReturnType<typeof EmptyState>;
 export default EmptyState;

package/dist/components/entry/Entry.svelte

@@ -11,12 +11,21 @@
 		children?: Snippet;
 		/** Below the description, e.g. a Link. */
 		footer?: Snippet;
+		ref?: HTMLDivElement | null;
 	};
 
-	let { title, meta, class: className, children, footer, ...rest }: Props = $props();
+	let {
+		title,
+		meta,
+		class: className,
+		children,
+		footer,
+		ref = $bindable(null),
+		...rest
+	}: Props = $props();
 </script>
 
-<div {...rest} class={['entry', className]}>
+<div {...rest} bind:this={ref} class={['entry', className]}>
 	<div class="entry-heading">
 		<h3 class="entry-title">{title}</h3>
 		{#if meta}
@@ -32,52 +41,54 @@
 </div>
 
 <style>
-	.entry {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 10px;
-		box-sizing: border-box;
-		padding: 24px;
-		color: var(--color-text);
-		border: 1px solid var(--color-border-strong);
-		border-radius: 14px;
-	}
+	@layer svelte-ui {
+		.entry {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			gap: 10px;
+			box-sizing: border-box;
+			padding: 24px;
+			color: var(--color-text);
+			border: 1px solid var(--color-border-strong);
+			border-radius: 10px;
+		}
 
-	.entry-heading {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: baseline;
-		column-gap: 8px;
-	}
+		.entry-heading {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: baseline;
+			column-gap: 8px;
+		}
 
-	.entry-title {
-		margin: 0;
-		font-size: 20px;
-		font-weight: 500;
-	}
+		.entry-title {
+			margin: 0;
+			font-size: 20px;
+			font-weight: 500;
+		}
 
-	.entry-meta {
-		font-size: 14px;
-		color: var(--color-text-muted);
-		white-space: nowrap;
-	}
+		.entry-meta {
+			font-size: 14px;
+			color: var(--color-text-muted);
+			white-space: nowrap;
+		}
 
-	.entry-description {
-		margin: 0;
-		max-width: 640px;
-	}
+		.entry-description {
+			margin: 0;
+			max-width: 640px;
+		}
 
-	.entry-footer {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		gap: 8px;
-	}
+		.entry-footer {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: 8px;
+		}
 
-	@media (min-width: 768px) {
-		.entry {
-			padding: 32px;
+		@media (min-width: 768px) {
+			.entry {
+				padding: 32px;
+			}
 		}
 	}
 </style>

package/dist/components/entry/Entry.svelte.d.ts

@@ -9,7 +9,8 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {
     children?: Snippet;
     /** Below the description, e.g. a Link. */
     footer?: Snippet;
+    ref?: HTMLDivElement | null;
 };
-declare const Entry: import("svelte").Component<Props, {}, "">;
+declare const Entry: import("svelte").Component<Props, {}, "ref">;
 type Entry = ReturnType<typeof Entry>;
 export default Entry;

package/dist/components/field/Field.svelte

@@ -7,72 +7,93 @@
 		orientation?: 'vertical' | 'horizontal' | 'responsive';
 		/** A Label, the control, and optionally FieldDescription and FieldError. Horizontal fields wrap label and description in a FieldContent. */
 		children: Snippet;
+		ref?: HTMLDivElement | null;
 	};
 
-	let { orientation = 'vertical', class: className, children, ...rest }: Props = $props();
+	let {
+		orientation = 'vertical',
+		class: className,
+		children,
+		ref = $bindable(null),
+		...rest
+	}: Props = $props();
 </script>
 
-<div {...rest} role="group" class={['field', `field--${orientation}`, className]}>
+<div {...rest} bind:this={ref} role="group" class={['field', `field--${orientation}`, className]}>
 	{@render children()}
 </div>
 
 <style>
-	.field {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-		width: 100%;
-		font-size: 13px;
-		color: var(--color-text);
-	}
-
-	.field--horizontal {
-		flex-direction: row;
-		align-items: center;
-	}
-
-	.field--horizontal > :global(.label) {
-		flex: auto;
-	}
-
-	.field--horizontal:has(> :global(.field-content)) {
-		align-items: flex-start;
-	}
-
-	.field--horizontal:has(> :global(.field-content)) > :global(:is(.checkbox, .radio)) {
-		margin-top: 2px;
-	}
+	@layer svelte-ui {
+		.field {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+			width: 100%;
+			font-size: 13px;
+			color: var(--color-text);
+		}
 
-	@container field-group (min-width: 448px) {
-		.field--responsive {
+		.field--horizontal {
 			flex-direction: row;
 			align-items: center;
 		}
 
-		.field--responsive > :global(:is(.label, .field-content)) {
+		.field--horizontal > :global(.label) {
 			flex: auto;
 		}
 
-		.field--responsive:has(> :global(.field-content)) {
+		.field--horizontal:has(> :global(.field-content)) {
 			align-items: flex-start;
 		}
-	}
 
-	/* State follows the control, so there is no invalid or disabled prop to keep in sync */
-	.field:has(:global([aria-invalid='true'])) :global(.label) {
-		color: var(--color-destructive);
-	}
+		.field--horizontal:has(> :global(.field-content)) > :global(:is(.checkbox, .radio)) {
+			margin-top: 2px;
+		}
 
-	.field:has(:global(:is(.checkbox, .radio, .switch))) :global(.label) {
-		cursor: pointer;
-	}
+		@container field-group (min-width: 448px) {
+			.field--responsive {
+				flex-direction: row;
+				align-items: center;
+			}
 
-	/* The control dims itself */
-	.field:has(:global(:disabled)) > :global(:is(.label, .field-description, .field-content)) {
-		opacity: 0.5;
-	}
+			.field--responsive > :global(:is(.label, .field-content)) {
+				flex: auto;
+			}
+
+			.field--responsive:has(> :global(.field-content)) {
+				align-items: flex-start;
+			}
+		}
+
+		/* State follows the control, so there is no invalid or disabled prop to keep in sync */
+		.field:has(:global([aria-invalid='true'])) :global(.label) {
+			color: var(--color-destructive);
+		}
+
+		.field:has(:global(:is(.checkbox, .radio, .switch))) :global(.label) {
+			cursor: pointer;
+		}
 
-	.field:has(:global(:disabled)) :global(.label) {
-		cursor: not-allowed;
+		/* The control dims itself */
+		.field:has(:global(:disabled)) > :global(:is(.label, .field-description, .field-content)) {
+			opacity: 0.5;
+		}
+
+		.field:has(:global(:disabled)) :global(.label) {
+			cursor: not-allowed;
+		}
+
+		@media (forced-colors: active) {
+			.field:has(:global(:disabled)) > :global(:is(.label, .field-description, .field-content)) {
+				color: GrayText;
+				opacity: 1;
+			}
+
+			.field:has(:global([aria-invalid='true'])) :global(.label) {
+				color: Mark;
+				text-decoration: underline;
+			}
+		}
 	}
 </style>

package/dist/components/field/Field.svelte.d.ts

@@ -5,7 +5,8 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     orientation?: 'vertical' | 'horizontal' | 'responsive';
     /** A Label, the control, and optionally FieldDescription and FieldError. Horizontal fields wrap label and description in a FieldContent. */
     children: Snippet;
+    ref?: HTMLDivElement | null;
 };
-declare const Field: import("svelte").Component<Props, {}, "">;
+declare const Field: import("svelte").Component<Props, {}, "ref">;
 type Field = ReturnType<typeof Field>;
 export default Field;

package/dist/components/field/FieldContent.svelte

@@ -5,21 +5,24 @@
 	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
 		/** Label, FieldDescription and FieldError next to the control in a horizontal Field. */
 		children: Snippet;
+		ref?: HTMLDivElement | null;
 	};
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { class: className, children, ref = $bindable(null), ...rest }: Props = $props();
 </script>
 
-<div {...rest} class={['field-content', className]}>
+<div {...rest} bind:this={ref} class={['field-content', className]}>
 	{@render children()}
 </div>
 
 <style>
-	.field-content {
-		display: flex;
-		flex: 1;
-		flex-direction: column;
-		gap: 4px;
-		min-width: 0;
+	@layer svelte-ui {
+		.field-content {
+			display: flex;
+			flex: 1;
+			flex-direction: column;
+			gap: 4px;
+			min-width: 0;
+		}
 	}
 </style>

package/dist/components/field/FieldContent.svelte.d.ts

@@ -3,7 +3,8 @@ import type { HTMLAttributes } from 'svelte/elements';
 type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     /** Label, FieldDescription and FieldError next to the control in a horizontal Field. */
     children: Snippet;
+    ref?: HTMLDivElement | null;
 };
-declare const FieldContent: import("svelte").Component<Props, {}, "">;
+declare const FieldContent: import("svelte").Component<Props, {}, "ref">;
 type FieldContent = ReturnType<typeof FieldContent>;
 export default FieldContent;

package/dist/components/field/FieldDescription.svelte

@@ -5,30 +5,33 @@
 	type Props = Omit<HTMLAttributes<HTMLParagraphElement>, 'children'> & {
 		/** Give it an id and reference it from the control's `aria-describedby`. */
 		children: Snippet;
+		ref?: HTMLParagraphElement | null;
 	};
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { class: className, children, ref = $bindable(null), ...rest }: Props = $props();
 </script>
 
-<p {...rest} class={['field-description', className]}>
+<p {...rest} bind:this={ref} class={['field-description', className]}>
 	{@render children()}
 </p>
 
 <style>
-	.field-description {
-		margin: 0;
-		font-size: 12px;
-		line-height: 1.5;
-		color: var(--color-text-muted);
-	}
+	@layer svelte-ui {
+		.field-description {
+			margin: 0;
+			font-size: 12px;
+			line-height: 1.5;
+			color: var(--color-text-muted);
+		}
 
-	.field-description :global(a) {
-		color: inherit;
-		text-decoration: underline;
-		text-underline-offset: 3px;
-	}
+		.field-description :global(a) {
+			color: inherit;
+			text-decoration: underline;
+			text-underline-offset: 3px;
+		}
 
-	.field-description :global(a:hover) {
-		color: var(--color-text);
+		.field-description :global(a:hover) {
+			color: var(--color-text);
+		}
 	}
 </style>

package/dist/components/field/FieldDescription.svelte.d.ts

@@ -3,7 +3,8 @@ import type { HTMLAttributes } from 'svelte/elements';
 type Props = Omit<HTMLAttributes<HTMLParagraphElement>, 'children'> & {
     /** Give it an id and reference it from the control's `aria-describedby`. */
     children: Snippet;
+    ref?: HTMLParagraphElement | null;
 };
-declare const FieldDescription: import("svelte").Component<Props, {}, "">;
+declare const FieldDescription: import("svelte").Component<Props, {}, "ref">;
 type FieldDescription = ReturnType<typeof FieldDescription>;
 export default FieldDescription;

package/dist/components/field/FieldError.svelte

@@ -7,15 +7,16 @@
 		errors?: (string | undefined)[];
 		/** Custom content instead of `errors`. */
 		children?: Snippet;
+		ref?: HTMLDivElement | null;
 	};
 
-	let { errors = [], class: className, children, ...rest }: Props = $props();
+	let { errors = [], class: className, children, ref = $bindable(null), ...rest }: Props = $props();
 
 	let messages = $derived([...new Set(errors.filter(Boolean))]);
 </script>
 
 {#if children || messages.length}
-	<div {...rest} role="alert" class={['field-error', className]}>
+	<div {...rest} bind:this={ref} role="alert" class={['field-error', className]}>
 		{#if children}
 			{@render children()}
 		{:else if messages.length === 1}
@@ -29,17 +30,25 @@
 {/if}
 
 <style>
-	.field-error {
-		font-size: 12px;
-		line-height: 1.5;
-		color: var(--color-destructive);
-	}
+	@layer svelte-ui {
+		.field-error {
+			font-size: 12px;
+			line-height: 1.5;
+			color: var(--color-destructive);
+		}
+
+		ul {
+			display: flex;
+			flex-direction: column;
+			gap: 2px;
+			margin: 0;
+			padding-left: 16px;
+		}
 
-	ul {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		margin: 0;
-		padding-left: 16px;
+		@media (forced-colors: active) {
+			.field-error {
+				color: CanvasText;
+			}
+		}
 	}
 </style>

package/dist/components/field/FieldError.svelte.d.ts

@@ -5,7 +5,8 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     errors?: (string | undefined)[];
     /** Custom content instead of `errors`. */
     children?: Snippet;
+    ref?: HTMLDivElement | null;
 };
-declare const FieldError: import("svelte").Component<Props, {}, "">;
+declare const FieldError: import("svelte").Component<Props, {}, "ref">;
 type FieldError = ReturnType<typeof FieldError>;
 export default FieldError;

package/dist/components/field/FieldGroup.svelte

@@ -5,26 +5,29 @@
 	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
 		/** Fields, FieldSets and FieldSeparators. */
 		children: Snippet;
+		ref?: HTMLDivElement | null;
 	};
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { class: className, children, ref = $bindable(null), ...rest }: Props = $props();
 </script>
 
-<div {...rest} class={['field-group', className]}>
+<div {...rest} bind:this={ref} class={['field-group', className]}>
 	{@render children()}
 </div>
 
 <style>
-	.field-group {
-		container: field-group / inline-size;
-		display: flex;
-		flex-direction: column;
-		gap: 24px;
-		width: 100%;
-	}
+	@layer svelte-ui {
+		.field-group {
+			container: field-group / inline-size;
+			display: flex;
+			flex-direction: column;
+			gap: 24px;
+			width: 100%;
+		}
 
-	/* Tighter spacing for lists of checkboxes or radios */
-	.field-group:has(> :global(.field--horizontal)):not(:has(> :global(:not(.field--horizontal)))) {
-		gap: 12px;
+		/* Tighter spacing for lists of checkboxes or radios */
+		.field-group:has(> :global(.field--horizontal)):not(:has(> :global(:not(.field--horizontal)))) {
+			gap: 12px;
+		}
 	}
 </style>

package/dist/components/field/FieldGroup.svelte.d.ts

@@ -3,7 +3,8 @@ import type { HTMLAttributes } from 'svelte/elements';
 type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     /** Fields, FieldSets and FieldSeparators. */
     children: Snippet;
+    ref?: HTMLDivElement | null;
 };
-declare const FieldGroup: import("svelte").Component<Props, {}, "">;
+declare const FieldGroup: import("svelte").Component<Props, {}, "ref">;
 type FieldGroup = ReturnType<typeof FieldGroup>;
 export default FieldGroup;

package/dist/components/field/FieldLegend.svelte

@@ -6,29 +6,38 @@
 		/** `label` matches a Label, for a group of checkboxes or radios. */
 		variant?: 'legend' | 'label';
 		children: Snippet;
+		ref?: HTMLLegendElement | null;
 	};
 
-	let { variant = 'legend', class: className, children, ...rest }: Props = $props();
+	let {
+		variant = 'legend',
+		class: className,
+		children,
+		ref = $bindable(null),
+		...rest
+	}: Props = $props();
 </script>
 
-<legend {...rest} class={['field-legend', `field-legend--${variant}`, className]}>
+<legend {...rest} bind:this={ref} class={['field-legend', `field-legend--${variant}`, className]}>
 	{@render children()}
 </legend>
 
 <style>
-	.field-legend {
-		margin-bottom: 12px;
-		padding: 0;
-		font-weight: 600;
-		line-height: 1.4;
-	}
+	@layer svelte-ui {
+		.field-legend {
+			margin-bottom: 12px;
+			padding: 0;
+			font-weight: 600;
+			line-height: 1.4;
+		}
 
-	.field-legend--legend {
-		font-size: 15px;
-	}
+		.field-legend--legend {
+			font-size: 15px;
+		}
 
-	.field-legend--label {
-		font-size: 13px;
-		font-weight: 500;
+		.field-legend--label {
+			font-size: 13px;
+			font-weight: 500;
+		}
 	}
 </style>

package/dist/components/field/FieldLegend.svelte.d.ts

@@ -4,7 +4,8 @@ type Props = Omit<HTMLAttributes<HTMLLegendElement>, 'children'> & {
     /** `label` matches a Label, for a group of checkboxes or radios. */
     variant?: 'legend' | 'label';
     children: Snippet;
+    ref?: HTMLLegendElement | null;
 };
-declare const FieldLegend: import("svelte").Component<Props, {}, "">;
+declare const FieldLegend: import("svelte").Component<Props, {}, "ref">;
 type FieldLegend = ReturnType<typeof FieldLegend>;
 export default FieldLegend;

package/dist/components/field/FieldSeparator.svelte

@@ -6,12 +6,13 @@
 	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
 		/** Optional text in the middle of the line, e.g. "Or continue with". */
 		children?: Snippet;
+		ref?: HTMLDivElement | null;
 	};
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { class: className, children, ref = $bindable(null), ...rest }: Props = $props();
 </script>
 
-<div {...rest} role="separator" class={['field-separator', className]}>
+<div {...rest} bind:this={ref} role="separator" class={['field-separator', className]}>
 	<Separator style="flex: 1;" />
 	{#if children}
 		<span class="field-separator-content">{@render children()}</span>
@@ -20,12 +21,14 @@
 </div>
 
 <style>
-	.field-separator {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		min-height: 20px;
-		font-size: 13px;
-		color: var(--color-text-muted);
+	@layer svelte-ui {
+		.field-separator {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			min-height: 20px;
+			font-size: 13px;
+			color: var(--color-text-muted);
+		}
 	}
 </style>

package/dist/components/field/FieldSeparator.svelte.d.ts

@@ -3,7 +3,8 @@ import type { HTMLAttributes } from 'svelte/elements';
 type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     /** Optional text in the middle of the line, e.g. "Or continue with". */
     children?: Snippet;
+    ref?: HTMLDivElement | null;
 };
-declare const FieldSeparator: import("svelte").Component<Props, {}, "">;
+declare const FieldSeparator: import("svelte").Component<Props, {}, "ref">;
 type FieldSeparator = ReturnType<typeof FieldSeparator>;
 export default FieldSeparator;