@noahbaumgartner/svelte-ui 0.0.5 → 0.0.6

package/dist/components/card/CardAction.svelte

@@ -4,21 +4,25 @@
 
 	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
 		/** E.g. a Button or Badge, placed top right in the CardHeader. */
+		/** The root element. Bindable. */
+		ref?: HTMLDivElement | null;
 		children: Snippet;
 	};
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { ref = $bindable(null), class: className, children, ...rest }: Props = $props();
 </script>
 
-<div {...rest} class={['card-action', className]}>
+<div {...rest} bind:this={ref} class={['card-action', className]}>
 	{@render children()}
 </div>
 
 <style>
-	.card-action {
-		grid-column: 2;
-		grid-row: 1 / span 2;
-		align-self: start;
-		justify-self: end;
+	@layer svelte-ui {
+		.card-action {
+			grid-column: 2;
+			grid-row: 1 / span 2;
+			align-self: start;
+			justify-self: end;
+		}
 	}
 </style>

package/dist/components/card/CardAction.svelte.d.ts

@@ -2,8 +2,10 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     /** E.g. a Button or Badge, placed top right in the CardHeader. */
+    /** The root element. Bindable. */
+    ref?: HTMLDivElement | null;
     children: Snippet;
 };
-declare const CardAction: import("svelte").Component<Props, {}, "">;
+declare const CardAction: import("svelte").Component<Props, {}, "ref">;
 type CardAction = ReturnType<typeof CardAction>;
 export default CardAction;

package/dist/components/card/CardContent.svelte

@@ -3,18 +3,22 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** The root element. Bindable. */
+		ref?: HTMLDivElement | null;
 		children: Snippet;
 	};
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { ref = $bindable(null), class: className, children, ...rest }: Props = $props();
 </script>
 
-<div {...rest} class={['card-content', className]}>
+<div {...rest} bind:this={ref} class={['card-content', className]}>
 	{@render children()}
 </div>
 
 <style>
-	.card-content {
-		padding-inline: var(--card-spacing);
+	@layer svelte-ui {
+		.card-content {
+			padding-inline: var(--card-spacing);
+		}
 	}
 </style>

package/dist/components/card/CardContent.svelte.d.ts

@@ -1,8 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The root element. Bindable. */
+    ref?: HTMLDivElement | null;
     children: Snippet;
 };
-declare const CardContent: import("svelte").Component<Props, {}, "">;
+declare const CardContent: import("svelte").Component<Props, {}, "ref">;
 type CardContent = ReturnType<typeof CardContent>;
 export default CardContent;

package/dist/components/card/CardDescription.svelte

@@ -3,21 +3,25 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	type Props = Omit<HTMLAttributes<HTMLParagraphElement>, 'children'> & {
+		/** The root element. Bindable. */
+		ref?: HTMLParagraphElement | null;
 		children: Snippet;
 	};
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { ref = $bindable(null), class: className, children, ...rest }: Props = $props();
 </script>
 
-<p {...rest} class={['card-description', className]}>
+<p {...rest} bind:this={ref} class={['card-description', className]}>
 	{@render children()}
 </p>
 
 <style>
-	.card-description {
-		margin: 0;
-		font-size: 13px;
-		line-height: 1.5;
-		color: var(--color-text-muted);
+	@layer svelte-ui {
+		.card-description {
+			margin: 0;
+			font-size: 13px;
+			line-height: 1.5;
+			color: var(--color-text-muted);
+		}
 	}
 </style>

package/dist/components/card/CardDescription.svelte.d.ts

@@ -1,8 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = Omit<HTMLAttributes<HTMLParagraphElement>, 'children'> & {
+    /** The root element. Bindable. */
+    ref?: HTMLParagraphElement | null;
     children: Snippet;
 };
-declare const CardDescription: import("svelte").Component<Props, {}, "">;
+declare const CardDescription: import("svelte").Component<Props, {}, "ref">;
 type CardDescription = ReturnType<typeof CardDescription>;
 export default CardDescription;

package/dist/components/card/CardFooter.svelte

@@ -4,25 +4,29 @@
 
 	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
 		/** Buttons or secondary content, primary Button first. */
+		/** The root element. Bindable. */
+		ref?: HTMLDivElement | null;
 		children: Snippet;
 	};
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { ref = $bindable(null), class: className, children, ...rest }: Props = $props();
 </script>
 
-<div {...rest} class={['card-footer', className]}>
+<div {...rest} bind:this={ref} class={['card-footer', className]}>
 	{@render children()}
 </div>
 
 <style>
-	.card-footer {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		gap: 4px;
-		margin-top: auto;
-		padding: var(--card-spacing);
-		background-color: color-mix(in srgb, var(--color-surface) 50%, transparent);
-		border-top: 1px solid var(--color-border);
+	@layer svelte-ui {
+		.card-footer {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: 4px;
+			margin-top: auto;
+			padding: var(--card-spacing);
+			background-color: color-mix(in srgb, var(--color-surface) 50%, transparent);
+			border-top: 1px solid var(--color-border);
+		}
 	}
 </style>

package/dist/components/card/CardFooter.svelte.d.ts

@@ -2,8 +2,10 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     /** Buttons or secondary content, primary Button first. */
+    /** The root element. Bindable. */
+    ref?: HTMLDivElement | null;
     children: Snippet;
 };
-declare const CardFooter: import("svelte").Component<Props, {}, "">;
+declare const CardFooter: import("svelte").Component<Props, {}, "ref">;
 type CardFooter = ReturnType<typeof CardFooter>;
 export default CardFooter;

package/dist/components/card/CardHeader.svelte

@@ -4,26 +4,30 @@
 
 	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
 		/** CardTitle, CardDescription and optionally a CardAction. */
+		/** The root element. Bindable. */
+		ref?: HTMLDivElement | null;
 		children: Snippet;
 	};
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { ref = $bindable(null), class: className, children, ...rest }: Props = $props();
 </script>
 
-<div {...rest} class={['card-header', className]}>
+<div {...rest} bind:this={ref} class={['card-header', className]}>
 	{@render children()}
 </div>
 
 <style>
-	.card-header {
-		display: grid;
-		grid-auto-rows: min-content;
-		align-items: start;
-		gap: 4px;
-		padding-inline: var(--card-spacing);
-	}
+	@layer svelte-ui {
+		.card-header {
+			display: grid;
+			grid-auto-rows: min-content;
+			align-items: start;
+			gap: 4px;
+			padding-inline: var(--card-spacing);
+		}
 
-	.card-header:has(> :global(.card-action)) {
-		grid-template-columns: 1fr auto;
+		.card-header:has(> :global(.card-action)) {
+			grid-template-columns: 1fr auto;
+		}
 	}
 </style>

package/dist/components/card/CardHeader.svelte.d.ts

@@ -2,8 +2,10 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     /** CardTitle, CardDescription and optionally a CardAction. */
+    /** The root element. Bindable. */
+    ref?: HTMLDivElement | null;
     children: Snippet;
 };
-declare const CardHeader: import("svelte").Component<Props, {}, "">;
+declare const CardHeader: import("svelte").Component<Props, {}, "ref">;
 type CardHeader = ReturnType<typeof CardHeader>;
 export default CardHeader;

package/dist/components/card/CardTitle.svelte

@@ -3,21 +3,25 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	type Props = Omit<HTMLAttributes<HTMLHeadingElement>, 'children'> & {
+		/** The root element. Bindable. */
+		ref?: HTMLHeadingElement | null;
 		children: Snippet;
 	};
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { ref = $bindable(null), class: className, children, ...rest }: Props = $props();
 </script>
 
-<h3 {...rest} class={['card-title', className]}>
+<h3 {...rest} bind:this={ref} class={['card-title', className]}>
 	{@render children()}
 </h3>
 
 <style>
-	.card-title {
-		margin: 0;
-		font-size: 15px;
-		font-weight: 600;
-		line-height: 1.4;
+	@layer svelte-ui {
+		.card-title {
+			margin: 0;
+			font-size: 15px;
+			font-weight: 600;
+			line-height: 1.4;
+		}
 	}
 </style>

package/dist/components/card/CardTitle.svelte.d.ts

@@ -1,8 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = Omit<HTMLAttributes<HTMLHeadingElement>, 'children'> & {
+    /** The root element. Bindable. */
+    ref?: HTMLHeadingElement | null;
     children: Snippet;
 };
-declare const CardTitle: import("svelte").Component<Props, {}, "">;
+declare const CardTitle: import("svelte").Component<Props, {}, "ref">;
 type CardTitle = ReturnType<typeof CardTitle>;
 export default CardTitle;

package/dist/components/checkbox/Checkbox.svelte

@@ -1,19 +1,24 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { Check, Minus } from '@lucide/svelte';
+	import Check from '../../internal/icons/Check.svelte';
+	import Minus from '../../internal/icons/Minus.svelte';
 
-	type Props = Omit<HTMLInputAttributes, 'type'>;
+	type Props = Omit<HTMLInputAttributes, 'type'> & {
+		/** The input element. Bindable. */
+		ref?: HTMLInputElement | null;
+	};
 
 	let {
 		checked = $bindable(false),
 		indeterminate = $bindable(false),
+		ref = $bindable(null),
 		class: className,
 		...rest
 	}: Props = $props();
 </script>
 
 <span class={['checkbox', className]}>
-	<input {...rest} type="checkbox" bind:checked bind:indeterminate />
+	<input {...rest} bind:this={ref} type="checkbox" bind:checked bind:indeterminate />
 	{#if indeterminate}
 		<Minus class="checkbox-icon" aria-hidden="true" />
 	{:else}
@@ -22,72 +27,158 @@
 </span>
 
 <style>
-	.checkbox {
-		position: relative;
-		display: inline-flex;
-		flex-shrink: 0;
-		width: 16px;
-		height: 16px;
-	}
+	@layer svelte-ui {
+		.checkbox {
+			position: relative;
+			display: inline-flex;
+			flex-shrink: 0;
+			width: 16px;
+			height: 16px;
+		}
 
-	input {
-		appearance: none;
-		box-sizing: border-box;
-		width: 100%;
-		height: 100%;
-		margin: 0;
-		background-color: transparent;
-		border: 1px solid var(--color-border-strong);
-		border-radius: 5px;
-		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: transparent;
+			border: 1px solid var(--color-border-strong);
+			border-radius: 5px;
+			outline: none;
+			cursor: pointer;
+			transition:
+				background-color 200ms ease,
+				border-color 200ms ease;
+		}
 
-	input:checked,
-	input:indeterminate {
-		background-color: var(--color-accent);
-		border-color: var(--color-accent);
-	}
+		input:checked,
+		input:indeterminate {
+			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;
+		}
 
-	.checkbox :global(.checkbox-icon) {
-		position: absolute;
-		inset: 2px;
-		width: 12px;
-		height: 12px;
-		color: var(--color-accent-foreground);
-		stroke-width: 3;
-		pointer-events: none;
-		opacity: 0;
-	}
+		.checkbox :global(.checkbox-icon) {
+			position: absolute;
+			inset: 2px;
+			width: 12px;
+			height: 12px;
+			color: var(--color-accent-foreground);
+			stroke-width: 3;
+			pointer-events: none;
+			opacity: 0;
+		}
 
-	input:checked + :global(.checkbox-icon),
-	input:indeterminate + :global(.checkbox-icon) {
-		opacity: 1;
-	}
+		input:checked + :global(.checkbox-icon),
+		input:indeterminate + :global(.checkbox-icon) {
+			opacity: 1;
+		}
 
-	input:disabled + :global(.checkbox-icon) {
-		opacity: 0;
-	}
+		input:disabled + :global(.checkbox-icon) {
+			opacity: 0;
+		}
+
+		input:checked:disabled + :global(.checkbox-icon),
+		input:indeterminate:disabled + :global(.checkbox-icon) {
+			opacity: 0.5;
+		}
+
+		@media (pointer: coarse) {
+			.checkbox::before {
+				content: '';
+				position: absolute;
+				inset: 0;
+				box-sizing: border-box;
+				border: 1px solid var(--color-border-strong);
+				border-radius: 5px;
+				transition:
+					background-color 200ms ease,
+					border-color 200ms ease;
+			}
+
+			.checkbox:has(input:checked)::before,
+			.checkbox:has(input:indeterminate)::before {
+				background-color: var(--color-accent);
+				border-color: var(--color-accent);
+			}
+
+			.checkbox:has(input[aria-invalid='true'])::before {
+				border-color: var(--color-destructive);
+			}
+
+			.checkbox:has(input:focus-visible)::before {
+				outline: 2px solid var(--color-accent);
+				outline-offset: 2px;
+			}
+
+			.checkbox:has(input:disabled)::before {
+				opacity: 0.5;
+			}
+
+			input {
+				position: absolute;
+				inset: -14px;
+				width: 44px;
+				height: 44px;
+				opacity: 0;
+			}
+		}
+
+		@media (forced-colors: active) {
+			input:checked,
+			input:indeterminate {
+				border-width: 2px;
+				border-color: Highlight;
+			}
+
+			input:focus-visible {
+				outline-color: Highlight;
+			}
+
+			input:disabled {
+				border-color: GrayText;
+				opacity: 1;
+			}
+
+			.checkbox :global(.checkbox-icon) {
+				color: CanvasText;
+			}
+
+			.checkbox:has(input:disabled) :global(.checkbox-icon) {
+				color: GrayText;
+			}
+
+			.checkbox::before {
+				border-color: ButtonText;
+			}
+
+			.checkbox:has(input:checked)::before,
+			.checkbox:has(input:indeterminate)::before {
+				border-width: 2px;
+				border-color: Highlight;
+				background-color: Canvas;
+			}
+		}
 
-	input:checked:disabled + :global(.checkbox-icon),
-	input:indeterminate:disabled + :global(.checkbox-icon) {
-		opacity: 0.5;
+		@media (prefers-reduced-motion: reduce) {
+			input,
+			.checkbox::before {
+				transition: none;
+			}
+		}
 	}
 </style>

package/dist/components/checkbox/Checkbox.svelte.d.ts

@@ -1,5 +1,8 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
-type Props = Omit<HTMLInputAttributes, 'type'>;
-declare const Checkbox: import("svelte").Component<Props, {}, "checked" | "indeterminate">;
+type Props = Omit<HTMLInputAttributes, 'type'> & {
+    /** The input element. Bindable. */
+    ref?: HTMLInputElement | null;
+};
+declare const Checkbox: import("svelte").Component<Props, {}, "ref" | "checked" | "indeterminate">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;