@noahbaumgartner/svelte-ui 0.0.4 → 0.0.6

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;

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

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLElement>, 'children' | 'title'> & {
+		/** Message in the panel, rendered as an `<h2>`; `\n` breaks the line. */
+		title?: string;
+		/** Owner shown below the panel as "© <current year> <copyright>". */
+		copyright?: string;
+		/** FooterColumns. */
+		children?: Snippet;
+		ref?: HTMLElement | null;
+	};
+
+	let {
+		title,
+		copyright,
+		class: className,
+		children,
+		ref = $bindable(null),
+		...rest
+	}: Props = $props();
+
+	const year = new Date().getFullYear();
+</script>
+
+<footer {...rest} bind:this={ref} class={['footer', className]}>
+	<div class="footer-panel">
+		{#if title}
+			<h2 class="footer-title">{title}</h2>
+		{/if}
+		{#if children}
+			<div class="footer-columns">{@render children()}</div>
+		{/if}
+	</div>
+	{#if copyright}
+		<p class="footer-copyright">© {year} {copyright}</p>
+	{/if}
+</footer>
+
+<style>
+	@layer svelte-ui {
+		.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: var(--color-base);
+			background-color: var(--color-ink);
+			border-radius: 10px;
+		}
+
+		.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;
+		}
+
+		@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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLElement>, 'children' | 'title'> & {
+    /** Message in the panel, rendered as an `<h2>`; `\n` breaks the line. */
+    title?: string;
+    /** Owner shown below the panel as "© <current year> <copyright>". */
+    copyright?: string;
+    /** FooterColumns. */
+    children?: Snippet;
+    ref?: HTMLElement | null;
+};
+declare const Footer: import("svelte").Component<Props, {}, "ref">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;