@noahbaumgartner/svelte-ui 0.0.5 → 0.0.6

package/dist/components/field/FieldSet.svelte

@@ -5,29 +5,32 @@
 	type Props = Omit<HTMLFieldsetAttributes, 'children'> & {
 		/** A FieldLegend, optionally a FieldDescription, then a FieldGroup. `disabled` disables every control inside. */
 		children: Snippet;
+		ref?: HTMLFieldSetElement | null;
 	};
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { class: className, children, ref = $bindable(null), ...rest }: Props = $props();
 </script>
 
-<fieldset {...rest} class={['field-set', className]}>
+<fieldset {...rest} bind:this={ref} class={['field-set', className]}>
 	{@render children()}
 </fieldset>
 
 <style>
-	.field-set {
-		display: flex;
-		flex-direction: column;
-		gap: 24px;
-		min-width: 0;
-		margin: 0;
-		padding: 0;
-		border: none;
-		color: var(--color-text);
-	}
+	@layer svelte-ui {
+		.field-set {
+			display: flex;
+			flex-direction: column;
+			gap: 24px;
+			min-width: 0;
+			margin: 0;
+			padding: 0;
+			border: none;
+			color: var(--color-text);
+		}
 
-	/* The legend sits outside the flex layout, so only its own margin spaces it */
-	.field-set > :global(.field-legend + .field-description) {
-		margin-top: -8px;
+		/* The legend sits outside the flex layout, so only its own margin spaces it */
+		.field-set > :global(.field-legend + .field-description) {
+			margin-top: -8px;
+		}
 	}
 </style>

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

@@ -3,7 +3,8 @@ import type { HTMLFieldsetAttributes } from 'svelte/elements';
 type Props = Omit<HTMLFieldsetAttributes, 'children'> & {
     /** A FieldLegend, optionally a FieldDescription, then a FieldGroup. `disabled` disables every control inside. */
     children: Snippet;
+    ref?: HTMLFieldSetElement | null;
 };
-declare const FieldSet: import("svelte").Component<Props, {}, "">;
+declare const FieldSet: import("svelte").Component<Props, {}, "ref">;
 type FieldSet = ReturnType<typeof FieldSet>;
 export default FieldSet;

package/dist/components/footer/Footer.svelte

@@ -9,14 +9,22 @@
 		copyright?: string;
 		/** FooterColumns. */
 		children?: Snippet;
+		ref?: HTMLElement | null;
 	};
 
-	let { title, copyright, class: className, children, ...rest }: Props = $props();
+	let {
+		title,
+		copyright,
+		class: className,
+		children,
+		ref = $bindable(null),
+		...rest
+	}: Props = $props();
 
 	const year = new Date().getFullYear();
 </script>
 
-<footer {...rest} class={['footer', className]}>
+<footer {...rest} bind:this={ref} class={['footer', className]}>
 	<div class="footer-panel">
 		{#if title}
 			<h2 class="footer-title">{title}</h2>
@@ -31,59 +39,67 @@
 </footer>
 
 <style>
-	.footer {
-		display: flex;
-		flex-direction: column;
-		gap: 20px;
-		font-size: 14px;
-	}
-
-	.footer-panel {
-		display: flex;
-		flex-direction: column;
-		gap: 40px;
-		box-sizing: border-box;
-		min-height: 256px;
-		padding: 40px;
-		color: #fff;
-		background-color: #000;
-		border-radius: 14px;
-	}
-
-	.footer-title {
-		margin: 0;
-		font-size: 24px;
-		font-weight: 600;
-		line-height: 1.25;
-		white-space: pre-line;
-		user-select: none;
-	}
-
-	.footer-columns {
-		display: flex;
-		flex-direction: column;
-		gap: 40px;
-	}
-
-	.footer-copyright {
-		margin: 0;
-		text-align: center;
-		color: var(--color-text-muted);
-		user-select: none;
-	}
+	@layer svelte-ui {
+		.footer {
+			display: flex;
+			flex-direction: column;
+			gap: 20px;
+			font-size: 14px;
+		}
 
-	@media (min-width: 640px) {
 		.footer-panel {
-			flex-direction: row;
+			display: flex;
+			flex-direction: column;
+			gap: 40px;
+			box-sizing: border-box;
+			min-height: 256px;
+			padding: 40px;
+			color: var(--color-base);
+			background-color: var(--color-ink);
+			border-radius: 10px;
 		}
 
 		.footer-title {
-			flex: 1;
+			margin: 0;
+			font-size: 24px;
+			font-weight: 600;
+			line-height: 1.25;
+			white-space: pre-line;
+			user-select: none;
 		}
 
 		.footer-columns {
-			flex: 1;
-			flex-direction: row;
+			display: flex;
+			flex-direction: column;
+			gap: 40px;
+		}
+
+		.footer-copyright {
+			margin: 0;
+			text-align: center;
+			color: var(--color-text-muted);
+			user-select: none;
+		}
+
+		@media (min-width: 640px) {
+			.footer-panel {
+				flex-direction: row;
+			}
+
+			.footer-title {
+				flex: 1;
+			}
+
+			.footer-columns {
+				flex: 1;
+				flex-direction: row;
+			}
+		}
+
+		@media (forced-colors: active) {
+			.footer-panel {
+				border: 1px solid CanvasText;
+			}
 		}
 	}
 </style>

package/dist/components/footer/Footer.svelte.d.ts

@@ -7,7 +7,8 @@ type Props = Omit<HTMLAttributes<HTMLElement>, 'children' | 'title'> & {
     copyright?: string;
     /** FooterColumns. */
     children?: Snippet;
+    ref?: HTMLElement | null;
 };
-declare const Footer: import("svelte").Component<Props, {}, "">;
+declare const Footer: import("svelte").Component<Props, {}, "ref">;
 type Footer = ReturnType<typeof Footer>;
 export default Footer;

package/dist/components/footer/FooterColumn.svelte

@@ -6,29 +6,32 @@
 		heading: string;
 		/** Links, one per line. */
 		children: Snippet;
+		ref?: HTMLDivElement | null;
 	};
 
-	let { heading, class: className, children, ...rest }: Props = $props();
+	let { heading, class: className, children, ref = $bindable(null), ...rest }: Props = $props();
 </script>
 
-<div {...rest} class={['footer-column', className]}>
+<div {...rest} bind:this={ref} class={['footer-column', className]}>
 	<span class="footer-column-heading">{heading}</span>
 	{@render children()}
 </div>
 
 <style>
-	.footer-column {
-		display: flex;
-		flex: 1;
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 8px;
-		color: color-mix(in srgb, #fff, #000 17%);
-	}
+	@layer svelte-ui {
+		.footer-column {
+			display: flex;
+			flex: 1;
+			flex-direction: column;
+			align-items: flex-start;
+			gap: 8px;
+			color: color-mix(in srgb, var(--color-base), var(--color-ink) 17%);
+		}
 
-	.footer-column-heading {
-		font-weight: 600;
-		color: #fff;
-		user-select: none;
+		.footer-column-heading {
+			font-weight: 600;
+			color: var(--color-base);
+			user-select: none;
+		}
 	}
 </style>

package/dist/components/footer/FooterColumn.svelte.d.ts

@@ -4,7 +4,8 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     heading: string;
     /** Links, one per line. */
     children: Snippet;
+    ref?: HTMLDivElement | null;
 };
-declare const FooterColumn: import("svelte").Component<Props, {}, "">;
+declare const FooterColumn: import("svelte").Component<Props, {}, "ref">;
 type FooterColumn = ReturnType<typeof FooterColumn>;
 export default FooterColumn;

package/dist/components/image/Image.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { HTMLImgAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLImgAttributes, 'alt' | 'src'> & {
+		/** The img element. Bindable. */
+		ref?: HTMLImageElement | null;
+		src: string;
+		/** Describes the image; use `""` for purely decorative images. */
+		alt: string;
+		/**
+		 * Crops the image to this CSS aspect ratio, e.g. `1` or `16 / 9`. Without it the image keeps
+		 * its natural ratio. Pass `width` and `height` to reserve the space before it loads.
+		 */
+		ratio?: string | number;
+		/** How the image fills the frame when `ratio` crops it. */
+		fit?: 'cover' | 'contain';
+	};
+
+	let {
+		ref = $bindable(null),
+		src,
+		alt,
+		ratio,
+		fit = 'cover',
+		loading = 'lazy',
+		decoding = 'async',
+		class: className,
+		...rest
+	}: Props = $props();
+</script>
+
+<img
+	{...rest}
+	bind:this={ref}
+	{src}
+	{alt}
+	{loading}
+	{decoding}
+	class={['image', `image--${fit}`, className]}
+	style:aspect-ratio={ratio}
+/>
+
+<style>
+	@layer svelte-ui {
+		.image {
+			display: block;
+			max-width: 100%;
+			height: auto;
+			background-color: var(--color-surface);
+			border-radius: 10px;
+		}
+
+		.image--cover {
+			object-fit: cover;
+		}
+
+		.image--contain {
+			object-fit: contain;
+		}
+	}
+</style>

package/dist/components/image/Image.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLImgAttributes } from 'svelte/elements';
+type Props = Omit<HTMLImgAttributes, 'alt' | 'src'> & {
+    /** The img element. Bindable. */
+    ref?: HTMLImageElement | null;
+    src: string;
+    /** Describes the image; use `""` for purely decorative images. */
+    alt: string;
+    /**
+     * Crops the image to this CSS aspect ratio, e.g. `1` or `16 / 9`. Without it the image keeps
+     * its natural ratio. Pass `width` and `height` to reserve the space before it loads.
+     */
+    ratio?: string | number;
+    /** How the image fills the frame when `ratio` crops it. */
+    fit?: 'cover' | 'contain';
+};
+declare const Image: import("svelte").Component<Props, {}, "ref">;
+type Image = ReturnType<typeof Image>;
+export default Image;