@noahbaumgartner/svelte-ui 0.0.5 → 0.0.6

package/dist/components/input-group/InputGroup.svelte

@@ -5,84 +5,124 @@
 	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
 		/** An Input plus InputGroupAddons, in any order. */
 		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="group" class={['input-group', className]}>
+<div {...rest} bind:this={ref} role="group" class={['input-group', className]}>
 	{@render children()}
 </div>
 
 <style>
-	.input-group {
-		position: relative;
-		display: flex;
-		align-items: center;
-		box-sizing: border-box;
-		width: 100%;
-		min-width: 0;
-		height: 32px;
-		font-size: 13px;
-		color: var(--color-text);
-		border: 1px solid var(--color-border-strong);
-		border-radius: 10px;
-		transition: border-color 200ms ease;
-	}
+	@layer svelte-ui {
+		.input-group {
+			position: relative;
+			display: flex;
+			align-items: center;
+			box-sizing: border-box;
+			width: 100%;
+			min-width: 0;
+			height: 32px;
+			font-size: 13px;
+			color: var(--color-text);
+			border: 1px solid var(--color-border-strong);
+			border-radius: 10px;
+			transition: border-color 200ms ease;
+		}
 
-	/* The group draws border and focus ring instead of the Input */
-	.input-group > :global(.input),
-	.input-group > :global(.input-wrapper > .input),
-	.input-group > :global(.input:is(:focus-visible, [aria-invalid='true'])),
-	.input-group > :global(.input-wrapper > .input:is(:focus-visible, [aria-invalid='true'])) {
-		height: 30px;
-		border: none;
-		border-radius: 0;
-		outline: none;
-		background-color: transparent;
-	}
+		/* The group draws border and focus ring instead of the Input */
+		.input-group > :global(.input),
+		.input-group > :global(.input-wrapper > .input),
+		.input-group > :global(.input:is(:focus-visible, [aria-invalid='true'])),
+		.input-group > :global(.input-wrapper > .input:is(:focus-visible, [aria-invalid='true'])) {
+			height: 30px;
+			border: none;
+			border-radius: 0;
+			outline: none;
+			background-color: transparent;
+		}
 
-	.input-group > :global(:is(.input, .input-wrapper)) {
-		flex: 1;
-	}
+		.input-group > :global(:is(.input, .input-wrapper)) {
+			flex: 1;
+		}
 
-	.input-group:has(:global(.input:focus-visible)) {
-		border-color: var(--color-accent);
-		outline: 1px solid var(--color-accent);
-	}
+		.input-group:has(:global(.input:focus-visible)) {
+			border-color: var(--color-accent);
+			outline: 1px solid var(--color-accent);
+		}
 
-	.input-group:has(:global([aria-invalid='true'])) {
-		border-color: var(--color-destructive);
-		outline-color: var(--color-destructive);
-	}
+		.input-group:has(:global([aria-invalid='true'])) {
+			border-color: var(--color-destructive);
+			outline-color: var(--color-destructive);
+		}
 
-	.input-group:has(:global(.input:disabled)) {
-		cursor: not-allowed;
-		opacity: 0.5;
-	}
+		.input-group:has(:global(.input:disabled)) {
+			cursor: not-allowed;
+			opacity: 0.5;
+		}
 
-	.input-group:has(:global(.input:disabled)) :global(.input) {
-		opacity: 1;
-	}
+		.input-group:has(:global(.input:disabled)) :global(.input) {
+			opacity: 1;
+		}
 
-	/* Tighten the input's padding next to an inline addon */
-	.input-group:has(> :global(.input-group-addon--inline-start)) > :global(.input) {
-		padding-left: 6px;
-	}
+		/* Tighten the input's padding next to an inline addon */
+		.input-group:has(> :global(.input-group-addon--inline-start)) > :global(.input) {
+			padding-left: 6px;
+		}
 
-	.input-group:has(> :global(.input-group-addon--inline-end)) > :global(.input) {
-		padding-right: 6px;
-	}
+		.input-group:has(> :global(.input-group-addon--inline-end)) > :global(.input) {
+			padding-right: 6px;
+		}
 
-	/* Block addons stack above or below the input */
-	.input-group:has(> :global(:is(.input-group-addon--block-start, .input-group-addon--block-end))) {
-		flex-direction: column;
-		align-items: stretch;
-		height: auto;
-	}
+		/* Block addons stack above or below the input */
+		.input-group:has(
+			> :global(:is(.input-group-addon--block-start, .input-group-addon--block-end))
+		) {
+			flex-direction: column;
+			align-items: stretch;
+			height: auto;
+		}
+
+		.input-group:has(> :global(:is(.input-group-addon--block-start, .input-group-addon--block-end)))
+			> :global(:is(.input, .input-wrapper)) {
+			flex: none;
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.input-group {
+				transition: none;
+			}
+		}
+
+		@media (forced-colors: active) {
+			.input-group:has(:global(.input:focus-visible)) {
+				border-color: Highlight;
+				outline: 2px solid Highlight;
+			}
+
+			.input-group:has(:global([aria-invalid='true'])) {
+				border-width: 2px;
+				border-style: dashed;
+			}
+
+			.input-group:has(:global(.input:disabled)) {
+				color: GrayText;
+				border-color: GrayText;
+				opacity: 1;
+			}
+		}
+
+		@media (pointer: coarse) {
+			.input-group {
+				min-height: 44px;
+			}
 
-	.input-group:has(> :global(:is(.input-group-addon--block-start, .input-group-addon--block-end)))
-		> :global(:is(.input, .input-wrapper)) {
-		flex: none;
+			.input-group > :global(.input),
+			.input-group > :global(.input-wrapper > .input) {
+				height: 42px;
+			}
+		}
 	}
 </style>

package/dist/components/input-group/InputGroup.svelte.d.ts

@@ -3,7 +3,8 @@ import type { HTMLAttributes } from 'svelte/elements';
 type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     /** An Input plus InputGroupAddons, in any order. */
     children: Snippet;
+    ref?: HTMLDivElement | null;
 };
-declare const InputGroup: import("svelte").Component<Props, {}, "">;
+declare const InputGroup: import("svelte").Component<Props, {}, "ref">;
 type InputGroup = ReturnType<typeof InputGroup>;
 export default InputGroup;

package/dist/components/input-group/InputGroupAddon.svelte

@@ -26,63 +26,72 @@
 </div>
 
 <style>
-	.input-group-addon {
-		display: flex;
-		flex-shrink: 0;
-		align-items: center;
-		gap: 6px;
-		height: 100%;
-		font-size: 13px;
-		color: var(--color-text-muted);
-		white-space: nowrap;
-		cursor: text;
-		user-select: none;
-	}
+	@layer svelte-ui {
+		.input-group-addon {
+			display: flex;
+			flex-shrink: 0;
+			align-items: center;
+			gap: 6px;
+			height: 100%;
+			font-size: 13px;
+			color: var(--color-text-muted);
+			white-space: nowrap;
+			cursor: text;
+			user-select: none;
+		}
 
-	.input-group-addon :global(svg) {
-		width: 16px;
-		height: 16px;
-		flex-shrink: 0;
-	}
+		.input-group-addon :global(svg) {
+			width: 16px;
+			height: 16px;
+			flex-shrink: 0;
+		}
 
-	/* Buttons shrink to fit inside the 32px group */
-	.input-group-addon > :global(.button) {
-		height: 24px;
-		border-radius: 6px;
-	}
+		/* Buttons shrink to fit inside the 32px group */
+		.input-group-addon > :global(.button) {
+			height: 24px;
+			border-radius: 6px;
+		}
 
-	.input-group-addon > :global(.button--icon-only) {
-		width: 24px;
-	}
+		.input-group-addon > :global(.button--icon-only) {
+			width: 24px;
+		}
 
-	.input-group-addon--inline-start {
-		order: -1;
-		padding-left: 10px;
-	}
+		.input-group-addon--inline-start {
+			order: -1;
+			padding-left: 10px;
+		}
 
-	.input-group-addon--inline-end {
-		order: 1;
-		padding-right: 10px;
-	}
+		.input-group-addon--inline-end {
+			order: 1;
+			padding-right: 10px;
+		}
 
-	.input-group-addon--block-start {
-		order: -1;
-		height: auto;
-		padding: 8px 10px 0;
-	}
+		.input-group-addon--block-start {
+			order: -1;
+			height: auto;
+			padding: 8px 10px 0;
+		}
 
-	.input-group-addon--block-end {
-		order: 1;
-		height: auto;
-		padding: 0 10px 8px;
-	}
+		.input-group-addon--block-end {
+			order: 1;
+			height: auto;
+			padding: 0 10px 8px;
+		}
 
-	/* Buttons sit 4px from the border, like the Input's own controls */
-	.input-group-addon--inline-start:has(> :global(.button:first-child)) {
-		padding-left: 4px;
-	}
+		/* Buttons sit 4px from the border, like the Input's own controls */
+		.input-group-addon--inline-start:has(> :global(.button:first-child)) {
+			padding-left: 4px;
+		}
+
+		.input-group-addon--inline-end:has(> :global(.button:last-child)) {
+			padding-right: 4px;
+		}
 
-	.input-group-addon--inline-end:has(> :global(.button:last-child)) {
-		padding-right: 4px;
+		@media (pointer: coarse) {
+			.input-group-addon > :global(.button) {
+				min-width: 44px;
+				min-height: 44px;
+			}
+		}
 	}
 </style>

package/dist/components/kbd/Kbd.svelte

@@ -4,43 +4,52 @@
 
 	type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
 		children: Snippet;
+		ref?: HTMLElement | null;
 	};
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { class: className, children, ref = $bindable(null), ...rest }: Props = $props();
 </script>
 
-<kbd {...rest} class={['kbd', className]}>{@render children()}</kbd>
+<kbd {...rest} bind:this={ref} class={['kbd', className]}>{@render children()}</kbd>
 
 <style>
-	.kbd {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		gap: 4px;
-		box-sizing: border-box;
-		width: fit-content;
-		min-width: 20px;
-		height: 20px;
-		padding: 0 4px;
-		font-family: inherit;
-		font-size: 12px;
-		line-height: 1;
-		background-color: var(--color-surface);
-		color: var(--color-text-muted);
-		border-radius: 4px;
-		pointer-events: none;
-		user-select: none;
-	}
+	@layer svelte-ui {
+		.kbd {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			gap: 4px;
+			box-sizing: border-box;
+			width: fit-content;
+			min-width: 20px;
+			height: 20px;
+			padding: 0 4px;
+			font-family: inherit;
+			font-size: 12px;
+			line-height: 1;
+			background-color: var(--color-surface);
+			color: var(--color-text-muted);
+			border-radius: 4px;
+			pointer-events: none;
+			user-select: none;
+		}
 
-	.kbd :global(svg) {
-		width: 12px;
-		height: 12px;
-		flex-shrink: 0;
-	}
+		.kbd :global(svg) {
+			width: 12px;
+			height: 12px;
+			flex-shrink: 0;
+		}
+
+		:global(.button--primary) .kbd,
+		:global(.tooltip-content) .kbd {
+			background-color: color-mix(in srgb, currentColor 20%, transparent);
+			color: inherit;
+		}
 
-	:global(.button--primary) .kbd,
-	:global(.tooltip-content) .kbd {
-		background-color: color-mix(in srgb, currentColor 20%, transparent);
-		color: inherit;
+		@media (forced-colors: active) {
+			.kbd {
+				border: 1px solid CanvasText;
+			}
+		}
 	}
 </style>

package/dist/components/kbd/Kbd.svelte.d.ts

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

package/dist/components/kbd/KbdGroup.svelte

@@ -4,24 +4,27 @@
 
 	type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
 		children: Snippet;
+		ref?: HTMLElement | null;
 	};
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { class: className, children, ref = $bindable(null), ...rest }: Props = $props();
 </script>
 
-<kbd {...rest} class={['kbd-group', className]}>{@render children()}</kbd>
+<kbd {...rest} bind:this={ref} class={['kbd-group', className]}>{@render children()}</kbd>
 
 <style>
-	.kbd-group {
-		display: inline-flex;
-		align-items: center;
-		gap: 4px;
-		font-family: inherit;
-		font-size: 12px;
-		color: var(--color-text-muted);
-	}
+	@layer svelte-ui {
+		.kbd-group {
+			display: inline-flex;
+			align-items: center;
+			gap: 4px;
+			font-family: inherit;
+			font-size: 12px;
+			color: var(--color-text-muted);
+		}
 
-	:global(.tooltip-content) .kbd-group {
-		color: inherit;
+		:global(.tooltip-content) .kbd-group {
+			color: inherit;
+		}
 	}
 </style>

package/dist/components/kbd/KbdGroup.svelte.d.ts

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

package/dist/components/label/Label.svelte

@@ -5,44 +5,63 @@
 	type Props = Omit<HTMLLabelAttributes, 'children'> & {
 		/** Set `for` to the control's id, or wrap the control. */
 		children: Snippet;
+		ref?: HTMLLabelElement | null;
 	};
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { class: className, children, ref = $bindable(null), ...rest }: Props = $props();
 </script>
 
-<label {...rest} class={['label', className]}>
+<label {...rest} bind:this={ref} class={['label', className]}>
 	{@render children()}
 </label>
 
 <style>
-	.label {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		width: fit-content;
-		font-size: 13px;
-		font-weight: 500;
-		line-height: 1.4;
-		color: var(--color-text);
-		user-select: none;
-	}
+	@layer svelte-ui {
+		.label {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			width: fit-content;
+			font-size: 13px;
+			font-weight: 500;
+			line-height: 1.4;
+			color: var(--color-text);
+			user-select: none;
+		}
 
-	/* Checkboxes and switches toggle on a label click, so show it */
-	.label:has(:global(:is(.checkbox, .switch))),
-	:global(:is(.checkbox, .switch)) + .label {
-		cursor: pointer;
-	}
+		/* Checkboxes and switches toggle on a label click, so show it */
+		.label:has(:global(:is(.checkbox, .switch))),
+		:global(:is(.checkbox, .switch)) + .label {
+			cursor: pointer;
+		}
 
-	/* Dim with a disabled control, whether wrapped or placed right before the label */
-	.label:has(:global(:disabled)),
-	:global(:disabled) + .label,
-	:global(:is(.checkbox, .switch):has(:disabled)) + .label {
-		cursor: not-allowed;
-		opacity: 0.5;
-	}
+		/* Dim with a disabled control, whether wrapped or placed right before the label */
+		.label:has(:global(:disabled)),
+		:global(:disabled) + .label,
+		:global(:is(.checkbox, .switch):has(:disabled)) + .label {
+			cursor: not-allowed;
+			opacity: 0.5;
+		}
+
+		/* A wrapped control is already dimmed by the label */
+		.label:has(:global(:disabled)) :global(:disabled) {
+			opacity: 1;
+		}
+
+		@media (forced-colors: active) {
+			.label:has(:global(:disabled)),
+			:global(:disabled) + .label,
+			:global(:is(.checkbox, .switch):has(:disabled)) + .label {
+				color: GrayText;
+				opacity: 1;
+			}
+		}
 
-	/* A wrapped control is already dimmed by the label */
-	.label:has(:global(:disabled)) :global(:disabled) {
-		opacity: 1;
+		@media (pointer: coarse) {
+			.label:has(:global(:is(.checkbox, .switch, .radio))),
+			:global(:is(.checkbox, .switch, .radio)) + .label {
+				min-height: 44px;
+			}
+		}
 	}
 </style>

package/dist/components/label/Label.svelte.d.ts

@@ -3,7 +3,8 @@ import type { HTMLLabelAttributes } from 'svelte/elements';
 type Props = Omit<HTMLLabelAttributes, 'children'> & {
     /** Set `for` to the control's id, or wrap the control. */
     children: Snippet;
+    ref?: HTMLLabelElement | null;
 };
-declare const Label: import("svelte").Component<Props, {}, "">;
+declare const Label: import("svelte").Component<Props, {}, "ref">;
 type Label = ReturnType<typeof Label>;
 export default Label;

package/dist/components/link/Link.svelte

@@ -6,35 +6,89 @@
 		/** External (http) links open in a new tab. */
 		href: string;
 		children: Snippet;
+		ref?: HTMLAnchorElement | null;
 	};
 
-	let { href, target, rel, class: className, children, ...rest }: Props = $props();
+	let {
+		href,
+		target,
+		rel,
+		class: className,
+		children,
+		ref = $bindable(null),
+		...rest
+	}: Props = $props();
 
 	let resolvedTarget = $derived(target ?? (href.startsWith('http') ? '_blank' : undefined));
 	let resolvedRel = $derived(rel ?? (resolvedTarget === '_blank' ? 'noopener' : undefined));
 </script>
 
-<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
-<a {...rest} {href} target={resolvedTarget} rel={resolvedRel} class={['link', className]}>
+<!-- eslint-disable svelte/no-navigation-without-resolve -->
+<a
+	{...rest}
+	bind:this={ref}
+	{href}
+	target={resolvedTarget}
+	rel={resolvedRel}
+	class={['link', className]}
+>
 	{@render children()}
 </a>
 
+<!-- eslint-enable svelte/no-navigation-without-resolve -->
+
 <style>
-	.link {
-		color: inherit;
-		text-decoration: underline;
-		text-decoration-thickness: max(1px, 0.0625em);
-		text-underline-offset: 4px;
-		outline: none;
-		cursor: pointer;
-		transition: opacity 200ms;
-	}
+	@layer svelte-ui {
+		.link {
+			color: inherit;
+			text-decoration: underline;
+			text-decoration-thickness: max(1px, 0.0625em);
+			text-underline-offset: 4px;
+			outline: none;
+			cursor: pointer;
+			transition: opacity 200ms;
+		}
 
-	.link:hover {
-		opacity: 0.6;
-	}
+		.link:hover {
+			opacity: 0.6;
+		}
+
+		.link:focus-visible {
+			text-decoration-thickness: max(2px, 0.125em);
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.link {
+				transition: none;
+			}
+		}
+
+		@media (forced-colors: active) {
+			.link {
+				color: LinkText;
+			}
+
+			.link:hover {
+				opacity: 1;
+				text-decoration-thickness: max(2px, 0.125em);
+			}
+
+			.link:focus-visible {
+				outline: 2px solid Highlight;
+				outline-offset: 2px;
+			}
+		}
+
+		@media (pointer: coarse) {
+			.link {
+				position: relative;
+			}
 
-	.link:focus-visible {
-		text-decoration-thickness: max(2px, 0.125em);
+			.link::after {
+				content: '';
+				position: absolute;
+				inset: -12px -4px;
+			}
+		}
 	}
 </style>