@noahbaumgartner/svelte-ui 0.0.5 → 0.0.7

package/dist/components/progress/Progress.svelte.d.ts

@@ -6,7 +6,8 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     size?: 'sm' | 'md';
     /** Accessible name, e.g. what is loading. */
     label?: string;
+    ref?: HTMLDivElement | null;
 };
-declare const Progress: import("svelte").Component<Props, {}, "">;
+declare const Progress: import("svelte").Component<Props, {}, "ref">;
 type Progress = ReturnType<typeof Progress>;
 export default Progress;

package/dist/components/radio-group/RadioGroup.svelte

@@ -11,6 +11,7 @@
 		disabled?: boolean;
 		required?: boolean;
 		orientation?: 'vertical' | 'horizontal';
+		ref?: HTMLDivElement | null;
 		/** Horizontal Fields, each with a RadioGroupItem and a Label. */
 		children: Snippet;
 	};
@@ -21,6 +22,7 @@
 		disabled = false,
 		required = false,
 		orientation = 'vertical',
+		ref = $bindable(null),
 		class: className,
 		children,
 		...rest
@@ -49,6 +51,7 @@
 
 <div
 	{...rest}
+	bind:this={ref}
 	role="radiogroup"
 	aria-disabled={disabled || undefined}
 	aria-required={required || undefined}
@@ -59,28 +62,30 @@
 </div>
 
 <style>
-	.radio-group {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-	}
+	@layer svelte-ui {
+		.radio-group {
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+		}
 
-	.radio-group--horizontal {
-		flex-direction: row;
-		flex-wrap: wrap;
-		gap: 12px 24px;
-	}
+		.radio-group--horizontal {
+			flex-direction: row;
+			flex-wrap: wrap;
+			gap: 12px 24px;
+		}
 
-	.radio-group--horizontal > :global(.field) {
-		width: auto;
-	}
+		.radio-group--horizontal > :global(.field) {
+			width: auto;
+		}
 
-	/* aria-invalid is not allowed on a radio, so the group carries it */
-	.radio-group[aria-invalid='true'] :global(.radio input) {
-		border-color: var(--color-destructive);
-	}
+		/* aria-invalid is not allowed on a radio, so the group carries it */
+		.radio-group[aria-invalid='true'] :global(.radio input) {
+			border-color: var(--color-destructive);
+		}
 
-	.radio-group[aria-invalid='true'] :global(.label) {
-		color: var(--color-destructive);
+		.radio-group[aria-invalid='true'] :global(.label) {
+			color: var(--color-destructive);
+		}
 	}
 </style>

package/dist/components/radio-group/RadioGroup.svelte.d.ts

@@ -8,9 +8,10 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     disabled?: boolean;
     required?: boolean;
     orientation?: 'vertical' | 'horizontal';
+    ref?: HTMLDivElement | null;
     /** Horizontal Fields, each with a RadioGroupItem and a Label. */
     children: Snippet;
 };
-declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
+declare const RadioGroup: import("svelte").Component<Props, {}, "ref" | "value">;
 type RadioGroup = ReturnType<typeof RadioGroup>;
 export default RadioGroup;

package/dist/components/radio-group/RadioGroupItem.svelte

@@ -4,9 +4,10 @@
 
 	type Props = Omit<HTMLInputAttributes, 'type' | 'name' | 'value' | 'checked'> & {
 		value: string;
+		ref?: HTMLInputElement | null;
 	};
 
-	let { value, disabled, class: className, ...rest }: Props = $props();
+	let { value, disabled, ref = $bindable(null), class: className, ...rest }: Props = $props();
 
 	const group = getRadioGroupContext();
 </script>
@@ -14,6 +15,7 @@
 <span class={['radio', className]}>
 	<input
 		{...rest}
+		bind:this={ref}
 		type="radio"
 		name={group.name}
 		{value}
@@ -29,67 +31,112 @@
 </span>
 
 <style>
-	.radio {
-		position: relative;
-		display: inline-flex;
-		flex-shrink: 0;
-		width: 16px;
-		height: 16px;
-	}
+	@layer svelte-ui {
+		.radio {
+			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: 50%;
-		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: 50%;
+			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:disabled {
-		cursor: not-allowed;
-		opacity: 0.5;
-	}
+		input:disabled {
+			cursor: not-allowed;
+			opacity: 0.5;
+		}
 
-	.radio-indicator {
-		position: absolute;
-		inset: 4.5px;
-		background-color: var(--color-accent-foreground);
-		border-radius: 50%;
-		pointer-events: none;
-		transform: scale(0);
-		transition: transform 200ms ease;
-	}
+		.radio-indicator {
+			position: absolute;
+			inset: 4.5px;
+			background-color: var(--color-accent-foreground);
+			border-radius: 50%;
+			pointer-events: none;
+			transform: scale(0);
+			transition: transform 200ms ease;
+		}
 
-	input:checked + .radio-indicator {
-		transform: scale(1);
-	}
+		input:checked + .radio-indicator {
+			transform: scale(1);
+		}
 
-	input:checked:disabled + .radio-indicator {
-		opacity: 0.5;
-	}
+		input:checked:disabled + .radio-indicator {
+			opacity: 0.5;
+		}
 
-	@media (prefers-reduced-motion: reduce) {
-		input,
-		.radio-indicator {
-			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;
+			}
+
+			.radio-indicator {
+				background-color: HighlightText;
+			}
+
+			input:focus-visible {
+				outline-color: Highlight;
+			}
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			input,
+			.radio-indicator {
+				transition: none;
+			}
 		}
 	}
 </style>

package/dist/components/radio-group/RadioGroupItem.svelte.d.ts

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

package/dist/components/section/Section.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		/** The root element. Bindable. */
+		ref?: HTMLElement | null;
+		/**
+		 * `contained` is an inset, rounded grey box; `full` is a grey band that runs edge to edge
+		 * and keeps its content at `--section-max-width`.
+		 */
+		width?: 'contained' | 'full';
+		/**
+		 * Adds inner padding that grows with the viewport. On by default for `full`, off for
+		 * `contained` (give the box your own padding via `class`).
+		 */
+		padded?: boolean;
+		/** Fills the section with `--color-surface`. Off, it sits on the page background. */
+		surface?: boolean;
+		children?: Snippet;
+	};
+
+	let {
+		ref = $bindable(null),
+		width = 'contained',
+		padded,
+		surface = true,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	let hasPadding = $derived(padded ?? width === 'full');
+</script>
+
+<section
+	{...rest}
+	bind:this={ref}
+	class={[
+		'section',
+		`section--${width}`,
+		{ 'section--padded': hasPadding, 'section--surface': surface },
+		className
+	]}
+>
+	{#if width === 'full'}
+		<div class="section-content">{@render children?.()}</div>
+	{:else}
+		{@render children?.()}
+	{/if}
+</section>
+
+<style>
+	@layer svelte-ui {
+		/*
+		 * --section-inline         distance from the viewport edge
+		 * --section-padding-block  inner padding when `padded`
+		 * --section-max-width      width of the content, 1280px by default
+		 * All three are overridable; the first two follow the viewport.
+		 */
+		.section {
+			--section-gutter: var(--section-inline, 24px);
+			--section-pad: var(--section-padding-block, 24px);
+			box-sizing: border-box;
+		}
+
+		@media (min-width: 640px) {
+			.section {
+				--section-gutter: var(--section-inline, 40px);
+				--section-pad: var(--section-padding-block, 40px);
+			}
+		}
+
+		@media (min-width: 1024px) {
+			.section {
+				--section-gutter: var(--section-inline, 64px);
+				--section-pad: var(--section-padding-block, 64px);
+			}
+		}
+
+		.section--contained {
+			width: min(100% - 2 * var(--section-gutter), var(--section-max-width, 1280px));
+			margin-inline: auto;
+			border-radius: 10px;
+		}
+
+		.section--contained.section--padded {
+			padding: var(--section-pad);
+		}
+
+		.section--full {
+			padding-inline: var(--section-gutter);
+		}
+
+		.section--surface {
+			background-color: var(--color-surface);
+		}
+
+		.section--full.section--padded {
+			padding-block: var(--section-pad);
+		}
+
+		.section-content {
+			max-width: var(--section-max-width, 1280px);
+			margin-inline: auto;
+		}
+
+		@media (forced-colors: active) {
+			.section--contained.section--surface {
+				border: 1px solid CanvasText;
+			}
+		}
+	}
+</style>

package/dist/components/section/Section.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    /** The root element. Bindable. */
+    ref?: HTMLElement | null;
+    /**
+     * `contained` is an inset, rounded grey box; `full` is a grey band that runs edge to edge
+     * and keeps its content at `--section-max-width`.
+     */
+    width?: 'contained' | 'full';
+    /**
+     * Adds inner padding that grows with the viewport. On by default for `full`, off for
+     * `contained` (give the box your own padding via `class`).
+     */
+    padded?: boolean;
+    /** Fills the section with `--color-surface`. Off, it sits on the page background. */
+    surface?: boolean;
+    children?: Snippet;
+};
+declare const Section: import("svelte").Component<Props, {}, "ref">;
+type Section = ReturnType<typeof Section>;
+export default Section;